docs: move component reference to showcase

app/docs.test.ts

@@ -60,25 +60,17 @@ test("every package page contains installation, guide, and complete API sections
   }
 });
 
-test("UI components have a dedicated catalog and complete detail pages", () => {
+test("UI components use the dedicated external showcase", () => {
   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");
+  expect(existsSync(join(root, "app", "pages", "components.wrn"))).toBe(false);
-  const details = readdirSync(join(root, "app", "pages", "components")).filter((file) =>
+  expect(
-    file.endsWith(".wrn"),
+    readdirSync(join(root, "app", "pages", "components")).filter((file) => file.endsWith(".wrn")),
-  );
+  ).toHaveLength(0);
-  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).toContain('href="https://component.wrnexusjs.dev/"');
+  expect(reference.count).toBeGreaterThan(0);
   expect(uiPackage).not.toContain("All 901 UI components and props");
 });
 
@@ -88,7 +80,9 @@ test("primary navigation exposes the component catalog", () => {
     join(root, "app", "pages", "getting-started.wrn"),
     join(root, "app", "pages", "packages", "core.wrn"),
   ]) {
-    expect(readFileSync(file, "utf8")).toContain('<a href="/components">Components</a>');
+    expect(readFileSync(file, "utf8")).toContain(
+      '<a href="https://component.wrnexusjs.dev/">Components</a>',
+    );
   }
 });
 
@@ -152,9 +146,14 @@ test("portal exposes truthful access and machine discovery", () => {
 
   const llms = readFileSync(join(root, "public", "llms.txt"), "utf8");
   expect(llms).toContain(`# WRNexusJS documentation ${frameworkVersion}`);
-  expect(llms).toContain("# Installed package documentation");
+  expect(llms).toContain("# Installed package index");
-  expect(llms).toContain("## @wrnexus/helpers");
+  expect(llms).toContain("- @wrnexus/helpers");
   expect(llms).toContain("redirectToLogin");
+  expect(llms).toContain("https://component.wrnexusjs.dev/");
+  const llmsFull = readFileSync(join(root, "public", "llms-full.txt"), "utf8");
+  expect(llmsFull).toContain("# Installed package documentation");
+  expect(llmsFull).toContain("# Complete @wrnexus/ui component reference and source contracts");
+  expect(llmsFull).toContain("### Complete .wrn source contract");
 });
 
 test("workspace guide documents app addition and safe forward-auth redirects", () => {

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0 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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0 <small>2026-07-13</small></h2><p>Documentation is aligned to all 31 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.5.0. 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.5.0</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 />

app/pages/components.wrn

@@ -1,107 +0,0 @@
-page Components {
-  seo {
-    title = "Components"
-    description = "Browse all 85 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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 · 85 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>85</span></button><button type="button" @click="category = 'advanced-forms'">Advanced-forms<span>9</span></button><button type="button" @click="category = 'base'">Base<span>27</span></button><button type="button" @click="category = 'forms'">Forms<span>11</span></button><button type="button" @click="category = 'integrations'">Integrations<span>12</span></button><button type="button" @click="category = 'layout'">Layout<span>10</span></button><button type="button" @click="category = 'navigation'">Navigation<span>9</span></button><button type="button" @click="category = 'overlays'">Overlays<span>6</span></button><button type="button" @click="category = 'tables'">Tables<span>1</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'accordion accordion base theme-aware, responsive accordion component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p><div class="component-card-meta"><span>17 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/advanced-date-picker" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advanceddatepicker advanceddatepicker integrations theme-aware, responsive advanced date picker component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedDatePicker</h2><p>Theme-aware, responsive advanced date picker component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/advanced-range-slider" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advancedrangeslider advancedrangeslider integrations theme-aware, responsive advanced range slider component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedRangeSlider</h2><p>Theme-aware, responsive advanced range slider component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/advanced-select" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'advancedselect advancedselect advanced-forms theme-aware, responsive advanced select component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>AdvancedSelect</h2><p>Theme-aware, responsive advanced select component.</p><div class="component-card-meta"><span>51 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'alert alert base theme-aware, responsive alert component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p><div class="component-card-meta"><span>21 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/avatar" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatar avatar base theme-aware, responsive avatar component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p><div class="component-card-meta"><span>18 props</span><span>0 slots</span><span>3 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 === 'base') ? (query === '' ? true : 'avatargroup avatargroup base theme-aware, responsive avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>AvatarGroup</h2><p>Theme-aware, responsive avatar group component.</p><div class="component-card-meta"><span>12 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 === 'base') ? (query === '' ? true : 'badge badge base theme-aware, responsive badge component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p><div class="component-card-meta"><span>22 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/blockquote" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'blockquote blockquote base theme-aware, responsive blockquote component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p><div class="component-card-meta"><span>13 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/breadcrumb" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'breadcrumb breadcrumb navigation theme-aware, responsive breadcrumb component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'button button base theme-aware, responsive button component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p><div class="component-card-meta"><span>25 props</span><span>1 slots</span><span>3 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 === 'base') ? (query === '' ? true : 'buttongroup buttongroup base theme-aware, responsive button group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ButtonGroup</h2><p>Theme-aware, responsive button group component.</p><div class="component-card-meta"><span>13 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'card card base theme-aware, responsive card component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p><div class="component-card-meta"><span>31 props</span><span>1 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'carousel carousel base theme-aware, responsive carousel component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p><div class="component-card-meta"><span>22 props</span><span>1 slots</span><span>10 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chart" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'chart chart integrations theme-aware, responsive chart component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/chat-bubble" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'chatbubble chatbubble base theme-aware, responsive chat bubble component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ChatBubble</h2><p>Theme-aware, responsive chat bubble component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkbox checkbox forms theme-aware, responsive checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/clipboard" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'clipboard clipboard integrations theme-aware, responsive clipboard component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/collapse" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'collapse collapse base theme-aware, responsive collapse component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 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 theme-aware, responsive color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Theme-aware, responsive color picker component.</p><div class="component-card-meta"><span>19 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/columns" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'columns columns layout theme-aware, responsive columns component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Columns</h2><p>Theme-aware, responsive columns 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/combo-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'combobox combobox advanced-forms editable autocomplete combobox with local and remote suggestions.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ComboBox</h2><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="component-card-meta"><span>41 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/confetti" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'confetti confetti integrations theme-aware, responsive confetti component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'container container layout theme-aware, responsive container component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Container</h2><p>Theme-aware, responsive container 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/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays theme-aware, responsive context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Theme-aware, responsive context menu component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/copy-markup" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'copymarkup copymarkup advanced-forms theme-aware, responsive copy markup component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>CopyMarkup</h2><p>Theme-aware, responsive copy markup component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/custom-scrollbar" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'customscrollbar customscrollbar layout theme-aware, responsive custom scrollbar component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CustomScrollbar</h2><p>Theme-aware, responsive custom scrollbar 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/data-map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datamap datamap integrations theme-aware, responsive data map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataMap</h2><p>Theme-aware, responsive data map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 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 === 'integrations') ? (query === '' ? true : 'datatable datatable integrations theme-aware, responsive data table component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataTable</h2><p>Theme-aware, responsive data table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>5 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 === 'base') ? (query === '' ? true : 'datepicker datepicker base theme-aware, responsive date picker component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DatePicker</h2><p>Theme-aware, responsive date picker component.</p><div class="component-card-meta"><span>25 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/device-frame" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'deviceframe deviceframe base theme-aware, responsive device frame component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DeviceFrame</h2><p>Theme-aware, responsive device frame component.</p><div class="component-card-meta"><span>14 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'divider divider layout theme-aware, responsive divider component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Divider</h2><p>Theme-aware, responsive divider 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/drag-and-drop" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'draganddrop draganddrop integrations theme-aware, responsive drag and drop component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DragAndDrop</h2><p>Theme-aware, responsive drag and drop component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'drawer drawer overlays theme-aware, responsive drawer component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/dropdown" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdown dropdown overlays theme-aware, responsive dropdown component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>4 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 theme-aware, responsive file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Theme-aware, responsive file input component.</p><div class="component-card-meta"><span>21 props</span><span>0 slots</span><span>7 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 === 'integrations') ? (query === '' ? true : 'fileupload fileupload integrations theme-aware, responsive file upload component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>FileUpload</h2><p>Theme-aware, responsive file upload component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/file-upload-progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'fileuploadprogress fileuploadprogress base theme-aware, responsive file upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>FileUploadProgress</h2><p>Theme-aware, responsive file upload progress component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'grid grid layout theme-aware, responsive grid component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Grid</h2><p>Theme-aware, responsive grid 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/image" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'image image layout theme-aware, responsive image component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'input input forms theme-aware, responsive input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p><div class="component-card-meta"><span>28 props</span><span>0 slots</span><span>7 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 theme-aware, responsive input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Theme-aware, responsive input group component.</p><div class="component-card-meta"><span>23 props</span><span>0 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/input-number" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'inputnumber inputnumber advanced-forms theme-aware, responsive input number component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>InputNumber</h2><p>Theme-aware, responsive input number component.</p><div class="component-card-meta"><span>40 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/kbd" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'kbd kbd layout theme-aware, responsive kbd component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd 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/layout-splitter" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'layoutsplitter layoutsplitter layout theme-aware, responsive layout splitter component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LayoutSplitter</h2><p>Theme-aware, responsive layout splitter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/legend-indicator" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'legendindicator legendindicator base theme-aware, responsive legend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>LegendIndicator</h2><p>Theme-aware, responsive legend indicator component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'link link layout theme-aware, responsive link component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'list list base theme-aware, responsive list component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>List</h2><p>Theme-aware, responsive list component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/list-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'listgroup listgroup base theme-aware, responsive list group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ListGroup</h2><p>Theme-aware, responsive list group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'map map integrations theme-aware, responsive map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/marquee" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'marquee marquee base theme-aware, responsive marquee component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 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 === 'navigation') ? (query === '' ? true : 'megamenu megamenu navigation theme-aware, responsive mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>MegaMenu</h2><p>Theme-aware, responsive mega menu component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'modal modal overlays theme-aware, responsive modal component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/nav" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'nav nav navigation theme-aware, responsive nav component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/navbar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'navbar navbar navigation theme-aware, responsive navbar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'pagination pagination navigation theme-aware, responsive pagination component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 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 === 'advanced-forms') ? (query === '' ? true : 'pininput pininput advanced-forms secure multi-cell pin and verification-code input with regex and paste support.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>PinInput</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>6 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 theme-aware, responsive popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'progress progress base theme-aware, responsive progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Progress</h2><p>Theme-aware, responsive progress 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/radio" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radio radio forms theme-aware, responsive radio component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p><div class="component-card-meta"><span>25 props</span><span>0 slots</span><span>5 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 === 'forms') ? (query === '' ? true : 'rangeslider rangeslider forms theme-aware, responsive range slider component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeSlider</h2><p>Theme-aware, responsive range slider component.</p><div class="component-card-meta"><span>26 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/rating" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'rating rating base theme-aware, responsive rating component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/scrollspy" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'scrollspy scrollspy navigation theme-aware, responsive scrollspy component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy 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/search-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'searchbox searchbox advanced-forms theme-aware, responsive search box component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>SearchBox</h2><p>Theme-aware, responsive search box component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'select select forms theme-aware, responsive select component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p><div class="component-card-meta"><span>22 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/sidebar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'sidebar sidebar navigation theme-aware, responsive sidebar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'skeleton skeleton base theme-aware, responsive skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton 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/spinner" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'spinner spinner base theme-aware, responsive spinner component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner 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/stepper" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'stepper stepper navigation theme-aware, responsive stepper component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/strong-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'strongpassword strongpassword advanced-forms theme-aware, responsive strong password component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>StrongPassword</h2><p>Theme-aware, responsive strong password component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/styled-icon" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'styledicon styledicon base theme-aware, responsive styled icon component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>StyledIcon</h2><p>Theme-aware, responsive styled icon component.</p><div class="component-card-meta"><span>7 props</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 === 'forms') ? (query === '' ? true : 'switch switch forms theme-aware, responsive switch component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p><div class="component-card-meta"><span>20 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/table" data-show="(category === 'All' ? true : category === 'tables') ? (query === '' ? true : 'table table tables theme-aware, responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'tabs tabs navigation theme-aware, responsive tabs component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textarea textarea forms theme-aware, responsive textarea component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p><div class="component-card-meta"><span>23 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'timeline timeline base theme-aware, responsive timeline component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline 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/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms theme-aware, responsive time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Theme-aware, responsive time picker component.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'toast toast base theme-aware, responsive toast component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toast-notifications" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'toastnotifications toastnotifications integrations theme-aware, responsive toast notifications component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>ToastNotifications</h2><p>Theme-aware, responsive toast notifications component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/toggle-count" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglecount togglecount advanced-forms theme-aware, responsive toggle count component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ToggleCount</h2><p>Theme-aware, responsive toggle count component.</p><div class="component-card-meta"><span>23 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/toggle-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglepassword togglepassword advanced-forms accessible password field with optional show and hide controls.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>TogglePassword</h2><p>Accessible password field with optional show and hide controls.</p><div class="component-card-meta"><span>24 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'tooltip tooltip overlays theme-aware, responsive tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/tree-view" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'treeview treeview base theme-aware, responsive tree view component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>TreeView</h2><p>Theme-aware, responsive tree view component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
-<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'typography typography layout theme-aware, responsive typography component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Typography</h2><p>Theme-aware, responsive typography 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/wysiwyg-editor" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'wysiwygeditor wysiwygeditor integrations theme-aware, responsive wysiwyg editor component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>WysiwygEditor</h2><p>Theme-aware, responsive wysiwyg editor component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/accordion.wrn

@@ -1,232 +0,0 @@
-page Accordioncomponent {
-  seo {
-    title = "Accordion component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Accordion</h1><p>Theme-aware, responsive accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>17 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  variant=&quot;default&quot;
-  id=&quot;accordion&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;accordion&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>defaultOpen</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>alwaysOpen</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>indicator</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;plus&quot;</code></td></tr><tr><td><code>indicatorPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>showIndicator</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>bordered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>separated</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>flush</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>contentItalic</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>change</code></li><li><code>open</code></li><li><code>close</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;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-
-    id = &quot;accordion&quot;
-    items = []
-    defaultOpen = []
-    multiple = false
-    alwaysOpen = false
-    disabled = false
-
-    indicator = &quot;plus&quot;
-    indicatorPosition = &quot;start&quot;
-    showIndicator = true
-    bordered = false
-    separated = false
-    flush = false
-    contentItalic = false
-
-    @event change = function
-    @event open = function
-    @event close = function
-  &#125;
-
-  state openValues = defaultOpen
-
-  functions &#123;
-    function itemValue(item, index) &#123;
-      return item.value !== undefined &amp;&amp; item.value !== &quot;&quot;
-        ? String(item.value)
-        : String(index)
-    &#125;
-
-    function nestedValue(parent, parentIndex, item, index) &#123;
-      return itemValue(parent, parentIndex) + &quot;.&quot; + itemValue(item, index)
-    &#125;
-
-    function isOpen(value) &#123;
-      return openValues.includes(value)
-    &#125;
-
-    function allowsMultiple() &#123;
-      return multiple || alwaysOpen
-    &#125;
-
-    function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) &#123;
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-accordion]&quot;)
-
-      if (!root) &#123;
-        return
-      &#125;
-
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(eventName, true, false, &#123;
-        component: &quot;Accordion&quot;,
-        value: value,
-        item: item,
-        open: isOpen(value),
-        openValues: openValues
-      &#125;)
-      root.dispatchEvent(customEvent)
-    &#125;
-
-    function toggleItem(sourceEvent, value, item, wasOpen) &#123;
-      if (disabled || item.disabled) &#123;
-        return
-      &#125;
-
-      wasOpen = isOpen(value)
-
-      if (wasOpen) &#123;
-        openValues = openValues.filter((entry) =&gt; entry !== value)
-      &#125; else if (allowsMultiple()) &#123;
-        openValues = openValues.concat([value])
-      &#125; else &#123;
-        openValues = [value]
-      &#125;
-
-      dispatchAccordionEvent(
-        sourceEvent,
-        wasOpen ? &quot;close&quot; : &quot;open&quot;,
-        value,
-        item
-      )
-      dispatchAccordionEvent(sourceEvent, &quot;change&quot;, value, item)
-    &#125;
-
-  &#125;
-
-  view &#123;
-        &lt;div
-      &#123;...attrs&#125;
-      id=&quot;&#123;id&#125;&quot;
-      data-wrn-accordion
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-indicator=&quot;&#123;indicator&#125;&quot;
-      data-multiple=&quot;&#123;allowsMultiple() ? 'true' : 'false'&#125;&quot;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--accordion wire-next--accordion-&#123;variant&#125; &#123;bordered ? 'wire-next--accordion-bordered' : ''&#125; &#123;separated ? 'wire-next--accordion-separated' : ''&#125; &#123;flush ? 'wire-next--accordion-flush' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
-    &gt;
-      &#123;#each items as item, index&#125;
-        &lt;section
-          class=&quot;wire-next__accordion-item&quot;
-          data-open=&quot;&#123;isOpen(itemValue(item, index)) ? 'true' : 'false'&#125;&quot;
-          data-disabled=&quot;&#123;disabled || item.disabled ? 'true' : 'false'&#125;&quot;
-        &gt;
-        &lt;h3 class=&quot;wire-next__accordion-heading&quot;&gt;
-        &lt;button
-              type=&quot;button&quot;
-              id=&quot;&#123;id&#125;-trigger-&#123;index&#125;&quot;
-              aria-expanded=&quot;&#123;isOpen(itemValue(item, index)) ? 'true' : 'false'&#125;&quot;
-              aria-controls=&quot;&#123;id&#125;-panel-&#123;index&#125;&quot;
-              disabled=&quot;&#123;disabled || item.disabled&#125;&quot;
-              @click=&quot;toggleItem(event, itemValue(item, index), item)&quot;
-            &gt;
-              &#123;#if showIndicator &amp;&amp; indicatorPosition === &quot;start&quot;&#125;
-                &lt;span class=&quot;wire-next__accordion-indicator&quot; aria-hidden=&quot;true&quot;&gt;
-                  &#123;#if indicator === &quot;chevron&quot;&#125;
-                    &lt;span class=&quot;icon-[lucide--chevron-down]&quot;&gt;
-        &lt;/span&gt;
-                  &#123;:else&#125;
-                    &lt;span&gt;+&lt;/span&gt;
-                  &#123;/if&#125;
-                &lt;/span&gt;
-              &#123;/if&#125;
-              &lt;span&gt;&#123;item.label || item.title&#125;&lt;/span&gt;
-              &#123;#if showIndicator &amp;&amp; indicatorPosition === &quot;end&quot;&#125;
-                &lt;span class=&quot;wire-next__accordion-indicator&quot; aria-hidden=&quot;true&quot;&gt;
-                  &#123;#if indicator === &quot;chevron&quot;&#125;
-                    &lt;span class=&quot;icon-[lucide--chevron-down]&quot;&gt;
-        &lt;/span&gt;
-                  &#123;:else&#125;
-                    &lt;span&gt;+&lt;/span&gt;
-                  &#123;/if&#125;
-                &lt;/span&gt;
-              &#123;/if&#125;
-            &lt;/button&gt;
-        &lt;/h3&gt;
-        &lt;div
-            id=&quot;&#123;id&#125;-panel-&#123;index&#125;&quot;
-            class=&quot;wire-next__accordion-panel&quot;
-            role=&quot;region&quot;
-            aria-labelledby=&quot;&#123;id&#125;-trigger-&#123;index&#125;&quot;
-            aria-hidden=&quot;&#123;isOpen(itemValue(item, index)) ? 'false' : 'true'&#125;&quot;
-          &gt;
-        &lt;div&gt;
-        &lt;div class=&quot;wire-next__accordion-content &#123;contentItalic ? 'wire-next__accordion-content-italic' : ''&#125;&quot;&gt;
-                &#123;#if item.content&#125;&lt;p&gt;&#123;item.content&#125;&lt;/p&gt;&#123;/if&#125;
-
-                &#123;#if item.children &amp;&amp; item.children.length &gt; 0&#125;
-                  &lt;div class=&quot;wire-next__accordion-nested&quot;&gt;
-                    &#123;#each item.children as child, childIndex&#125;
-                      &lt;section
-                        class=&quot;wire-next__accordion-item&quot;
-                        data-open=&quot;&#123;isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'&#125;&quot;
-                      &gt;
-        &lt;h4 class=&quot;wire-next__accordion-heading&quot;&gt;
-        &lt;button
-                            type=&quot;button&quot;
-                            id=&quot;&#123;id&#125;-trigger-&#123;index&#125;-&#123;childIndex&#125;&quot;
-                            aria-expanded=&quot;&#123;isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'&#125;&quot;
-                            aria-controls=&quot;&#123;id&#125;-panel-&#123;index&#125;-&#123;childIndex&#125;&quot;
-                            disabled=&quot;&#123;disabled || child.disabled&#125;&quot;
-                            @click=&quot;toggleItem(event, nestedValue(item, index, child, childIndex), child)&quot;
-                          &gt;
-                            &#123;#if showIndicator&#125;
-                              &lt;span class=&quot;wire-next__accordion-indicator&quot; aria-hidden=&quot;true&quot;&gt;
-                                &#123;#if indicator === &quot;chevron&quot;&#125;
-                                  &lt;span class=&quot;icon-[lucide--chevron-down]&quot;&gt;
-        &lt;/span&gt;
-                                &#123;:else&#125;
-                                  &lt;span&gt;+&lt;/span&gt;
-                                &#123;/if&#125;
-                              &lt;/span&gt;
-                            &#123;/if&#125;
-                            &lt;span&gt;&#123;child.label || child.title&#125;&lt;/span&gt;
-        &lt;/button&gt;
-        &lt;/h4&gt;
-        &lt;div
-                          id=&quot;&#123;id&#125;-panel-&#123;index&#125;-&#123;childIndex&#125;&quot;
-                          class=&quot;wire-next__accordion-panel&quot;
-                          role=&quot;region&quot;
-                          aria-labelledby=&quot;&#123;id&#125;-trigger-&#123;index&#125;-&#123;childIndex&#125;&quot;
-                          aria-hidden=&quot;&#123;isOpen(nestedValue(item, index, child, childIndex)) ? 'false' : 'true'&#125;&quot;
-                        &gt;
-        &lt;div&gt;
-        &lt;div class=&quot;wire-next__accordion-content &#123;contentItalic ? 'wire-next__accordion-content-italic' : ''&#125;&quot;&gt;
-        &lt;p&gt;&#123;child.content&#125;&lt;/p&gt;
-        &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;/section&gt;
-                    &#123;/each&#125;
-                  &lt;/div&gt;
-                &#123;/if&#125;
-              &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;/section&gt;
-      &#123;/each&#125;
-    &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/advanced-date-picker.wrn

@@ -1,51 +0,0 @@
-page AdvancedDatePickercomponent {
-  seo {
-    title = "AdvancedDatePicker component"
-    description = "Theme-aware, responsive advanced 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedDatePicker</h1><p>Theme-aware, responsive advanced date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;AdvancedDatePicker
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Advanced Date Picker&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedDatePicker&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Advanced Date Picker&quot;</code></td></tr><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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li><li><code>clear</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedDatePicker.wrn</code></p><pre data-language="wrn"><code>component AdvancedDatePicker &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    @event open = function
-    @event close = function
-    @event clear = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Advanced Date Picker&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-date-picker wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/advanced-range-slider.wrn

@@ -1,50 +0,0 @@
-page AdvancedRangeSlidercomponent {
-  seo {
-    title = "AdvancedRangeSlider component"
-    description = "Theme-aware, responsive advanced 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedRangeSlider</h1><p>Theme-aware, responsive advanced range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;AdvancedRangeSlider
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Advanced Range Slider&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;AdvancedRangeSlider&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Advanced Range Slider&quot;</code></td></tr><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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>start</code></li><li><code>end</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedRangeSlider.wrn</code></p><pre data-language="wrn"><code>component AdvancedRangeSlider &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    @event start = function
-    @event end = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Advanced Range Slider&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--advanced-range-slider wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/alert.wrn

@@ -1,175 +0,0 @@
-page Alertcomponent {
-  seo {
-    title = "Alert component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Alert</h1><p>Theme-aware, responsive alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>21 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;Alert
-  size=&quot;default&quot;
-  color=&quot;info&quot;
-  variant=&quot;soft&quot;
-  radius=&quot;md&quot;
-  shadow=&quot;sm&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;info&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;soft&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>radius</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>shadow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;sm&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Alert&quot;</code></td></tr><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>actions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>showIcon</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>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dismissLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Dismiss alert&quot;</code></td></tr><tr><td><code>role</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;alert&quot;</code></td></tr><tr><td><code>live</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;polite&quot;</code></td></tr><tr><td><code>linkLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>linkHref</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>compact</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>dismiss</code></li><li><code>action</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;
-    size = &quot;default&quot;
-    color = &quot;info&quot;
-    variant = &quot;soft&quot;
-    class = &quot;&quot;
-    radius = &quot;md&quot;
-    shadow = &quot;sm&quot;
-
-    title = &quot;Alert&quot;
-    description = &quot;&quot;
-    items = []
-    actions = []
-
-    showIcon = false
-    icon = &quot;&quot;
-    dismissible = false
-    dismissLabel = &quot;Dismiss alert&quot;
-    role = &quot;alert&quot;
-    live = &quot;polite&quot;
-
-    linkLabel = &quot;&quot;
-    linkHref = &quot;&quot;
-    actionLabel = &quot;&quot;
-    actionHref = &quot;&quot;
-    compact = false
-
-    @event dismiss = function
-    @event action = function
-  &#125;
-
-  state visible = true
-
-  functions &#123;
-    function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) &#123;
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-alert]&quot;)
-
-      if (!root) &#123;
-        return
-      &#125;
-
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(eventName, true, false, &#123;
-        component: &quot;Alert&quot;,
-        title: title,
-        color: color,
-        variant: variant,
-        action: action
-      &#125;)
-      root.dispatchEvent(customEvent)
-    &#125;
-
-    function dismissAlert(sourceEvent) &#123;
-      visible = false
-      dispatchAlertEvent(sourceEvent, &quot;dismiss&quot;, null)
-    &#125;
-
-    function selectAction(sourceEvent, action) &#123;
-      dispatchAlertEvent(sourceEvent, &quot;action&quot;, action)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      data-wrn-alert
-      data-color=&quot;&#123;color&#125;&quot;
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-radius=&quot;&#123;radius&#125;&quot;
-      data-shadow=&quot;&#123;shadow&#125;&quot;
-      data-show=&quot;visible&quot;
-      aria-hidden=&quot;&#123;visible ? 'false' : 'true'&#125;&quot;
-      role=&quot;&#123;role&#125;&quot;
-      aria-live=&quot;&#123;live&#125;&quot;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--alert wire-next--alert-&#123;variant&#125; &#123;compact ? 'wire-next--alert-compact' : ''&#125; &#123;class&#125;&quot;
-    &gt;
-      &#123;#if showIcon&#125;
-        &lt;span class=&quot;wire-next__alert-icon&quot; aria-hidden=&quot;true&quot;&gt;
-          &#123;#if icon&#125;
-            &lt;span class=&quot;&#123;icon&#125;&quot;&gt;
-        &lt;/span&gt;
-          &#123;:else if color === &quot;success&quot;&#125;
-            &lt;span class=&quot;icon-[lucide--circle-check]&quot;&gt;
-        &lt;/span&gt;
-          &#123;:else if color === &quot;danger&quot;&#125;
-            &lt;span class=&quot;icon-[lucide--circle-x]&quot;&gt;
-        &lt;/span&gt;
-          &#123;:else if color === &quot;warning&quot;&#125;
-            &lt;span class=&quot;icon-[lucide--triangle-alert]&quot;&gt;
-        &lt;/span&gt;
-          &#123;:else&#125;
-            &lt;span class=&quot;icon-[lucide--info]&quot;&gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-        &lt;/span&gt;
-      &#123;/if&#125;
-
-      &lt;div class=&quot;wire-next__alert-body&quot;&gt;
-        &#123;#if title&#125;&lt;strong class=&quot;wire-next__alert-title&quot;&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-        &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-
-        &#123;#if items.length &gt; 0&#125;
-          &lt;ul&gt;
-            &#123;#each items as item&#125;&lt;li&gt;&#123;item.label || item&#125;&lt;/li&gt;&#123;/each&#125;
-          &lt;/ul&gt;
-        &#123;/if&#125;
-
-        &#123;#if actions.length &gt; 0 || actionLabel || linkLabel&#125;
-          &lt;div class=&quot;wire-next__alert-actions&quot;&gt;
-            &#123;#each actions as item&#125;
-              &lt;a
-                href=&quot;&#123;item.href || '#'&#125;&quot;
-                data-variant=&quot;&#123;item.variant || 'link'&#125;&quot;
-                @click=&quot;selectAction(event, item)&quot;
-              &gt;&#123;item.label&#125;&lt;/a&gt;
-            &#123;/each&#125;
-            &#123;#if actionLabel&#125;
-              &lt;a
-                href=&quot;&#123;actionHref || '#'&#125;&quot;
-                data-variant=&quot;action&quot;
-                @click=&quot;selectAction(event, &#123; label: actionLabel, href: actionHref &#125;)&quot;
-              &gt;&#123;actionLabel&#125;&lt;/a&gt;
-            &#123;/if&#125;
-            &#123;#if linkLabel&#125;
-              &lt;a
-                href=&quot;&#123;linkHref || '#'&#125;&quot;
-                data-variant=&quot;link&quot;
-                @click=&quot;selectAction(event, &#123; label: linkLabel, href: linkHref &#125;)&quot;
-              &gt;&#123;linkLabel&#125;&lt;/a&gt;
-            &#123;/if&#125;
-          &lt;/div&gt;
-        &#123;/if&#125;
-      &lt;/div&gt;
-
-      &#123;#if dismissible&#125;
-        &lt;button
-          type=&quot;button&quot;
-          class=&quot;wire-next__alert-dismiss&quot;
-          aria-label=&quot;&#123;dismissLabel&#125;&quot;
-          @click=&quot;dismissAlert(event)&quot;
-        &gt;
-        &lt;span class=&quot;icon-[lucide--x]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/avatar-group.wrn

@@ -1,148 +0,0 @@
-page AvatarGroupcomponent {
-  seo {
-    title = "AvatarGroup component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>AvatarGroup</h1><p>Theme-aware, responsive avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>12 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;AvatarGroup
-  items=&quot;[]&quot;
-  size=&quot;md&quot;
-  color=&quot;primary&quot;
-  variant=&quot;solid&quot;
-  shape=&quot;circle&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>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;solid&quot;</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;circle&quot;</code></td></tr><tr><td><code>layout</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;stack&quot;</code></td></tr><tr><td><code>maxVisible</code></td><td><code>number</code></td><td>Optional</td><td><code>4</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>borderColor</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>showTooltips</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>overflowLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Show remaining members&quot;</code></td></tr><tr><td><code>class</code></td><td><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>overflow</code></li></ul></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;
-    items = []
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    variant = &quot;solid&quot;
-    shape = &quot;circle&quot;
-    layout = &quot;stack&quot;
-    maxVisible = 4
-    columns = 3
-    borderColor = &quot;&quot;
-    showTooltips = true
-    overflowLabel = &quot;Show remaining members&quot;
-    class = &quot;&quot;
-
-    @event overflow = function
-  &#125;
-
-  state overflowOpen = false
-
-  functions &#123;
-    function visibleMembers() &#123;
-      return items.slice(0, Number(maxVisible))
-    &#125;
-
-    function hiddenMembers() &#123;
-      return items.slice(Number(maxVisible))
-    &#125;
-
-    function toggleOverflow(sourceEvent, root, customEvent) &#123;
-      overflowOpen = !overflowOpen
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-avatar-group]&quot;)
-
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(&quot;overflow&quot;, true, false, &#123;
-        component: &quot;AvatarGroup&quot;,
-        open: overflowOpen,
-        hiddenCount: hiddenMembers().length
-      &#125;)
-      root.dispatchEvent(customEvent)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;div
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--avatar-group &#123;class&#125;&quot;
-      data-wrn-avatar-group
-      data-layout=&quot;&#123;layout&#125;&quot;
-      data-shape=&quot;&#123;shape&#125;&quot;
-      data-size=&quot;&#123;size&#125;&quot;
-      style=&quot;--wire-avatar-group-columns:&#123;columns&#125;; --wire-avatar-group-ring:&#123;borderColor || 'var(--wire-color-bg)'&#125;&quot;
-      role=&quot;group&quot;
-      aria-label=&quot;Avatar group&quot;
-    &gt;
-        &lt;div class=&quot;wire-next__avatar-group-members&quot;&gt;
-        &#123;#each visibleMembers() as item&#125;
-          &lt;span
-            class=&quot;wire-next__avatar-group-member&quot;
-            data-size=&quot;&#123;item.size || size&#125;&quot;
-            data-shape=&quot;&#123;item.shape || shape&#125;&quot;
-            data-color=&quot;&#123;item.color || color&#125;&quot;
-            data-variant=&quot;&#123;item.variant || variant&#125;&quot;
-            tabindex=&quot;&#123;showTooltips &amp;&amp; (item.tooltip || item.name) ? '0' : '-1'&#125;&quot;
-            aria-label=&quot;&#123;item.name || item.alt || item.initials || 'Group member'&#125;&quot;
-          &gt;
-        &lt;span class=&quot;wire-next__avatar-group-avatar&quot;&gt;
-              &#123;#if item.src&#125;
-                &lt;img src=&quot;&#123;item.src&#125;&quot; alt=&quot;&#123;item.alt || item.name || ''&#125;&quot; loading=&quot;lazy&quot; /&gt;
-              &#123;:else if item.initials&#125;
-                &lt;span aria-hidden=&quot;true&quot;&gt;&#123;item.initials&#125;&lt;/span&gt;
-              &#123;:else&#125;
-                &lt;span class=&quot;icon-[lucide--user-round]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-              &#123;/if&#125;
-            &lt;/span&gt;
-
-            &#123;#if showTooltips &amp;&amp; (item.tooltip || item.name)&#125;
-              &lt;span class=&quot;wire-next__avatar-group-tooltip&quot; role=&quot;tooltip&quot;&gt;
-                &#123;item.tooltip || item.name&#125;
-              &lt;/span&gt;
-            &#123;/if&#125;
-          &lt;/span&gt;
-        &#123;/each&#125;
-
-        &#123;#if hiddenMembers().length &gt; 0&#125;
-          &lt;span class=&quot;wire-next__avatar-group-overflow&quot;&gt;
-        &lt;button
-              type=&quot;button&quot;
-              class=&quot;wire-next__avatar-group-overflow-button&quot;
-              aria-label=&quot;&#123;overflowLabel&#125;&quot;
-              aria-expanded=&quot;&#123;overflowOpen ? 'true' : 'false'&#125;&quot;
-              @click=&quot;toggleOverflow(event)&quot;
-            &gt;
-              +&#123;hiddenMembers().length&#125;
-            &lt;/button&gt;
-        &lt;span
-              class=&quot;wire-next__avatar-group-menu&quot;
-              role=&quot;menu&quot;
-              data-show=&quot;overflowOpen&quot;
-              aria-hidden=&quot;&#123;overflowOpen ? 'false' : 'true'&#125;&quot;
-            &gt;
-              &#123;#each hiddenMembers() as item&#125;
-                &lt;span class=&quot;wire-next__avatar-group-menu-item&quot; role=&quot;menuitem&quot;&gt;
-        &lt;span class=&quot;wire-next__avatar-group-menu-avatar&quot;&gt;
-                    &#123;#if item.src&#125;
-                      &lt;img src=&quot;&#123;item.src&#125;&quot; alt=&quot;&quot; loading=&quot;lazy&quot; /&gt;
-                    &#123;:else&#125;
-                      &lt;span&gt;&#123;item.initials || '?'&#125;&lt;/span&gt;
-                    &#123;/if&#125;
-                  &lt;/span&gt;
-        &lt;span&gt;&#123;item.name || item.alt || item.initials || 'Team member'&#125;&lt;/span&gt;
-        &lt;/span&gt;
-              &#123;/each&#125;
-            &lt;/span&gt;
-        &lt;/span&gt;
-        &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/avatar.wrn

@@ -1,117 +0,0 @@
-page Avatarcomponent {
-  seo {
-    title = "Avatar component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Avatar</h1><p>Theme-aware, responsive avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>18 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>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;initials&quot;
-  size=&quot;md&quot;
-  color=&quot;primary&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>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;&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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;solid&quot;</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;circle&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>statusLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>statusPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&quot;</code></td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>badgeIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>badgeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>tooltip</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>description</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>string</code></td><td>Optional</td><td><code>&quot;lazy&quot;</code></td></tr><tr><td><code>class</code></td><td><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>load</code></li><li><code>error</code></li><li><code>click</code></li></ul></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;
-    @event load = function
-    @event error = function
-    @event click = function
-    src = &quot;&quot;
-    alt = &quot;&quot;
-    initials = &quot;&quot;
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    variant = &quot;solid&quot;
-    shape = &quot;circle&quot;
-
-    status = &quot;&quot;
-    statusLabel = &quot;&quot;
-    statusPosition = &quot;bottom&quot;
-
-    badge = &quot;&quot;
-    badgeIcon = &quot;&quot;
-    badgeLabel = &quot;&quot;
-
-    tooltip = &quot;&quot;
-    name = &quot;&quot;
-    description = &quot;&quot;
-    loading = &quot;lazy&quot;
-    class = &quot;&quot;
-  &#125;
-
-  view &#123;
-        &lt;span
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--avatar &#123;description ? 'wire-next--avatar-media' : ''&#125; &#123;class&#125;&quot;
-      data-wrn-avatar
-    &gt;
-        &lt;span
-        class=&quot;wire-next__avatar-wrap&quot;
-        data-shape=&quot;&#123;shape&#125;&quot;
-        data-size=&quot;&#123;size&#125;&quot;
-        data-color=&quot;&#123;color&#125;&quot;
-        data-variant=&quot;&#123;variant&#125;&quot;
-        data-status-position=&quot;&#123;statusPosition&#125;&quot;
-        tabindex=&quot;&#123;tooltip ? '0' : '-1'&#125;&quot;
-        aria-label=&quot;&#123;tooltip || name || alt || initials || 'Avatar'&#125;&quot;
-      &gt;
-        &lt;span class=&quot;wire-next__avatar&quot;&gt;
-          &#123;#if src&#125;
-            &lt;img src=&quot;&#123;src&#125;&quot; alt=&quot;&#123;alt || name&#125;&quot; loading=&quot;&#123;loading&#125;&quot; /&gt;
-          &#123;:else if initials&#125;
-            &lt;span class=&quot;wire-next__avatar-initials&quot; aria-hidden=&quot;true&quot;&gt;&#123;initials&#125;&lt;/span&gt;
-          &#123;:else&#125;
-            &lt;span class=&quot;wire-next__avatar-placeholder icon-[lucide--user-round]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-        &lt;/span&gt;
-
-        &#123;#if status&#125;
-          &lt;span
-            class=&quot;wire-next__avatar-status&quot;
-            data-status=&quot;&#123;status&#125;&quot;
-            title=&quot;&#123;statusLabel || status&#125;&quot;
-            aria-label=&quot;&#123;statusLabel || status&#125;&quot;
-          &gt;
-        &lt;/span&gt;
-        &#123;/if&#125;
-
-        &#123;#if badgeIcon&#125;
-          &lt;span class=&quot;wire-next__avatar-badge&quot; aria-label=&quot;&#123;badgeLabel || 'Linked account'&#125;&quot;&gt;
-        &lt;span class=&quot;&#123;badgeIcon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/span&gt;
-        &#123;:else if badge&#125;
-          &lt;span class=&quot;wire-next__avatar-badge wire-next__avatar-badge--text&quot; aria-label=&quot;&#123;badgeLabel || badge&#125;&quot;&gt;
-            &#123;badge&#125;
-          &lt;/span&gt;
-        &#123;/if&#125;
-
-        &#123;#if tooltip&#125;
-          &lt;span class=&quot;wire-next__avatar-tooltip&quot; role=&quot;tooltip&quot;&gt;&#123;tooltip&#125;&lt;/span&gt;
-        &#123;/if&#125;
-      &lt;/span&gt;
-
-      &#123;#if description&#125;
-        &lt;span class=&quot;wire-next__avatar-copy&quot;&gt;
-        &lt;strong&gt;&#123;name || alt || initials&#125;&lt;/strong&gt;
-        &lt;span&gt;&#123;description&#125;&lt;/span&gt;
-        &lt;/span&gt;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/badge.wrn

@@ -1,135 +0,0 @@
-page Badgecomponent {
-  seo {
-    title = "Badge component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Badge</h1><p>Theme-aware, responsive badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 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;Badge
-  label=&quot;Badge&quot;
-  size=&quot;md&quot;
-  color=&quot;primary&quot;
-  variant=&quot;solid&quot;
-  shape=&quot;pill&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>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Badge&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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;solid&quot;</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;pill&quot;</code></td></tr><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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>dot</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dotOnly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dotLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Status&quot;</code></td></tr><tr><td><code>animated</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>avatarSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>avatarAlt</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>false</code></td></tr><tr><td><code>dismissLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Remove badge&quot;</code></td></tr><tr><td><code>truncate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;12rem&quot;</code></td></tr><tr><td><code>anchorLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>anchorIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;inline&quot;</code></td></tr><tr><td><code>anchorLabelText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Badge anchor&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>dismiss</code></li></ul></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;
-    label = &quot;Badge&quot;
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    variant = &quot;solid&quot;
-    shape = &quot;pill&quot;
-    class = &quot;&quot;
-
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    dot = false
-    dotOnly = false
-    dotLabel = &quot;Status&quot;
-    animated = false
-
-    avatarSrc = &quot;&quot;
-    avatarAlt = &quot;&quot;
-    dismissible = false
-    dismissLabel = &quot;Remove badge&quot;
-    truncate = false
-    maxWidth = &quot;12rem&quot;
-
-    anchorLabel = &quot;&quot;
-    anchorIcon = &quot;&quot;
-    placement = &quot;inline&quot;
-    anchorLabelText = &quot;Badge anchor&quot;
-
-    @event dismiss = function
-  &#125;
-
-  state visible = true
-
-  functions &#123;
-    function dismissBadge(sourceEvent, root, customEvent) &#123;
-      visible = false
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-badge]&quot;)
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(&quot;dismiss&quot;, true, false, &#123;
-        component: &quot;Badge&quot;,
-        label: label
-      &#125;)
-      root.dispatchEvent(customEvent)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;span
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--badge-root &#123;anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''&#125; &#123;class&#125;&quot;
-      data-wrn-badge
-      data-placement=&quot;&#123;placement&#125;&quot;
-      data-show=&quot;visible&quot;
-      aria-hidden=&quot;&#123;visible ? 'false' : 'true'&#125;&quot;
-    &gt;
-      &#123;#if anchorLabel || anchorIcon&#125;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__badge-anchor&quot; aria-label=&quot;&#123;anchorLabelText&#125;&quot;&gt;
-          &#123;#if anchorIcon&#125;&lt;span class=&quot;&#123;anchorIcon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-          &#123;#if anchorLabel&#125;&lt;span&gt;&#123;anchorLabel&#125;&lt;/span&gt;&#123;/if&#125;
-        &lt;/button&gt;
-      &#123;/if&#125;
-
-      &lt;span
-        class=&quot;wire-next__badge&quot;
-        data-size=&quot;&#123;size&#125;&quot;
-        data-color=&quot;&#123;color&#125;&quot;
-        data-variant=&quot;&#123;variant&#125;&quot;
-        data-shape=&quot;&#123;shape&#125;&quot;
-        data-animated=&quot;&#123;animated ? 'true' : 'false'&#125;&quot;
-        style=&quot;--wire-badge-max-width:&#123;maxWidth&#125;&quot;
-        role=&quot;&#123;dotOnly ? 'status' : ''&#125;&quot;
-        aria-label=&quot;&#123;dotOnly ? dotLabel : ''&#125;&quot;
-      &gt;
-        &#123;#if animated&#125;
-          &lt;span class=&quot;wire-next__badge-ping&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &#123;/if&#125;
-        &#123;#if avatarSrc&#125;
-          &lt;img class=&quot;wire-next__badge-avatar&quot; src=&quot;&#123;avatarSrc&#125;&quot; alt=&quot;&#123;avatarAlt&#125;&quot; loading=&quot;lazy&quot; /&gt;
-        &#123;/if&#125;
-        &#123;#if dot || dotOnly&#125;
-          &lt;span class=&quot;wire-next__badge-dot&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &#123;/if&#125;
-        &#123;#if icon &amp;&amp; iconPosition === &quot;start&quot;&#125;
-          &lt;span class=&quot;wire-next__badge-icon &#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &#123;/if&#125;
-        &#123;#if !dotOnly&#125;
-          &lt;span class=&quot;wire-next__badge-label &#123;truncate ? 'wire-next__badge-label--truncate' : ''&#125;&quot;&gt;
-            &#123;label&#125;
-          &lt;/span&gt;
-        &#123;/if&#125;
-        &#123;#if icon &amp;&amp; iconPosition === &quot;end&quot;&#125;
-          &lt;span class=&quot;wire-next__badge-icon &#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &#123;/if&#125;
-        &#123;#if dismissible&#125;
-          &lt;button type=&quot;button&quot; class=&quot;wire-next__badge-dismiss&quot; aria-label=&quot;&#123;dismissLabel&#125;&quot; @click=&quot;dismissBadge(event)&quot;&gt;
-        &lt;span class=&quot;icon-[lucide--x]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-        &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/blockquote.wrn

@@ -1,96 +0,0 @@
-page Blockquotecomponent {
-  seo {
-    title = "Blockquote component"
-    description = "Theme-aware, responsive blockquote component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Blockquote</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Blockquote</h1><p>Theme-aware, responsive blockquote component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Blockquote
-  quote=&quot;I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.&quot;
-  citation=&quot;citation&quot;
-  citationTitle=&quot;citationTitle&quot;
-  citationUrl=&quot;citationUrl&quot;
-  avatarSrc=&quot;avatarSrc&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Blockquote&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>quote</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.&quot;</code></td></tr><tr><td><code>citation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>citationTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>citationUrl</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>avatarSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>avatarAlt</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;md&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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><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>quoteMark</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>italic</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/Blockquote.wrn</code></p><pre data-language="wrn"><code>component Blockquote &#123;
-  props &#123;
-    quote = &quot;I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.&quot;
-    citation = &quot;&quot;
-    citationTitle = &quot;&quot;
-    citationUrl = &quot;&quot;
-    avatarSrc = &quot;&quot;
-    avatarAlt = &quot;&quot;
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    align = &quot;left&quot;
-    variant = &quot;default&quot;
-    quoteMark = true
-    italic = true
-    class = &quot;&quot;
-  &#125;
-
-  view &#123;
-        &lt;figure
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--blockquote wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; &#123;class&#125;&quot;
-      data-size=&quot;&#123;size&#125;&quot;
-      data-color=&quot;&#123;color&#125;&quot;
-      data-align=&quot;&#123;align&#125;&quot;
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-italic=&quot;&#123;italic&#125;&quot;
-    &gt;
-        &lt;blockquote cite=&quot;&#123;citationUrl&#125;&quot;&gt;
-        &#123;#if quoteMark&#125;
-          &lt;span class=&quot;wire-next__blockquote-mark&quot; aria-hidden=&quot;true&quot;&gt;“&lt;/span&gt;
-        &#123;/if&#125;
-
-        &lt;div class=&quot;wire-next__blockquote-copy&quot;&gt;
-          &#123;#if quote&#125;
-            &lt;p&gt;&#123;quote&#125;&lt;/p&gt;
-          &#123;:else&#125;
-            &lt;slot /&gt;
-          &#123;/if&#125;
-        &lt;/div&gt;
-        &lt;/blockquote&gt;
-
-      &#123;#if citation || citationTitle || avatarSrc&#125;
-        &lt;figcaption class=&quot;wire-next__blockquote-citation&quot;&gt;
-          &#123;#if avatarSrc&#125;
-            &lt;img
-              class=&quot;wire-next__blockquote-avatar&quot;
-              src=&quot;&#123;avatarSrc&#125;&quot;
-              alt=&quot;&#123;avatarAlt&#125;&quot;
-              loading=&quot;lazy&quot;
-            /&gt;
-          &#123;/if&#125;
-
-          &lt;span class=&quot;wire-next__blockquote-attribution&quot;&gt;
-            &#123;#if citation&#125;
-              &#123;#if citationUrl&#125;
-                &lt;cite&gt;
-        &lt;a href=&quot;&#123;citationUrl&#125;&quot;&gt;&#123;citation&#125;&lt;/a&gt;
-        &lt;/cite&gt;
-              &#123;:else&#125;
-                &lt;cite&gt;&#123;citation&#125;&lt;/cite&gt;
-              &#123;/if&#125;
-            &#123;/if&#125;
-            &#123;#if citationTitle&#125;&lt;span&gt;&#123;citationTitle&#125;&lt;/span&gt;&#123;/if&#125;
-          &lt;/span&gt;
-        &lt;/figcaption&gt;
-      &#123;/if&#125;
-    &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/breadcrumb.wrn

@@ -1,46 +0,0 @@
-page Breadcrumbcomponent {
-  seo {
-    title = "Breadcrumb component"
-    description = "Theme-aware, responsive breadcrumb component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumb</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Breadcrumb</h1><p>Theme-aware, responsive breadcrumb component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Breadcrumb
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Breadcrumb&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Breadcrumb&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Breadcrumb&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>navigate</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Breadcrumb.wrn</code></p><pre data-language="wrn"><code>component Breadcrumb &#123;
-  props &#123;
-    @event navigate = function
-    @event click = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Breadcrumb&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--breadcrumb wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/button-group.wrn

@@ -1,117 +0,0 @@
-page ButtonGroupcomponent {
-  seo {
-    title = "ButtonGroup component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>ButtonGroup</h1><p>Theme-aware, responsive button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  items=&quot;[]&quot;
-  value=&quot;value&quot;
-  size=&quot;md&quot;
-  color=&quot;primary&quot;
-  variant=&quot;default&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>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>value</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;md&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>responsive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>attached</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>selectable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>toolbar</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>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Button group&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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><li><code>select</code></li><li><code>change</code></li></ul></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;
-    @event click = function
-    @event select = function
-    @event change = function
-    items = []
-    value = &quot;&quot;
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    variant = &quot;default&quot;
-    orientation = &quot;horizontal&quot;
-    responsive = false
-    attached = true
-    selectable = false
-    toolbar = false
-    disabled = false
-    ariaLabel = &quot;Button group&quot;
-    class = &quot;&quot;
-  &#125;
-
-  state selectedValue = value
-
-  functions &#123;
-    function itemValue(item, index) &#123;
-      return item.value || item.label || String(index)
-    &#125;
-
-    function selectItem(item, index) &#123;
-      previousValue = selectedValue
-      nextValue = itemValue(item, index)
-
-      $emit(&quot;select&quot;, &#123;
-        value: nextValue,
-        previousValue: previousValue,
-        item: item,
-        index: index
-      &#125;)
-
-      if (selectable &amp;&amp; previousValue !== nextValue) &#123;
-        selectedValue = nextValue
-        $emit(&quot;change&quot;, &#123;
-          value: nextValue,
-          previousValue: previousValue,
-          item: item,
-          index: index
-        &#125;)
-      &#125;
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;div
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--button-group &#123;class&#125;&quot;
-      role=&quot;&#123;toolbar ? 'toolbar' : 'group'&#125;&quot;
-      aria-label=&quot;&#123;ariaLabel&#125;&quot;
-      aria-orientation=&quot;&#123;orientation&#125;&quot;
-      data-size=&quot;&#123;size&#125;&quot;
-      data-color=&quot;&#123;color&#125;&quot;
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-orientation=&quot;&#123;orientation&#125;&quot;
-      data-responsive=&quot;&#123;responsive&#125;&quot;
-      data-attached=&quot;&#123;attached&#125;&quot;
-      data-selectable=&quot;&#123;selectable&#125;&quot;
-      data-disabled=&quot;&#123;disabled&#125;&quot;
-    &gt;
-      &#123;#if items&#125;
-        &#123;#each items as item, index&#125;
-          &lt;button
-            type=&quot;&#123;item.type || 'button'&#125;&quot;
-            class=&quot;wire-btn wire-btn--variant-&#123;item.variant || variant&#125; wire-btn--color-&#123;item.color || color&#125; wire-btn--size-&#123;item.size || size&#125;&quot;
-            disabled=&quot;&#123;disabled || item.disabled&#125;&quot;
-            aria-label=&quot;&#123;item.ariaLabel || item.label&#125;&quot;
-            aria-pressed=&quot;&#123;selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''&#125;&quot;
-            data-value=&quot;&#123;item.value || item.label || String(index)&#125;&quot;
-            data-selected=&quot;&#123;selectable &amp;&amp; selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'&#125;&quot;
-            @click=&quot;selectItem(item, index)&quot;
-          &gt;
-            &#123;#if item.icon&#125;
-              &lt;span class=&quot;wire-btn__icon &#123;item.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-            &#123;/if&#125;
-            &lt;span class=&quot;wire-btn__label&quot;&gt;&#123;item.label&#125;&lt;/span&gt;
-        &lt;/button&gt;
-        &#123;/each&#125;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/button.wrn

@@ -1,191 +0,0 @@
-page Buttoncomponent {
-  seo {
-    title = "Button component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Button</h1><p>Theme-aware, responsive button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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;
-  loadingLabel=&quot;Loading…&quot;
-  description=&quot;description&quot;
-  as=&quot;as&quot;
-  href=&quot;href&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>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Loading…&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>as</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>target</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rel</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;default&quot;</code></td></tr><tr><td><code>color</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;default&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>pill</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>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaPressed</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaExpanded</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>ariaControls</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>autofocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>controlClass</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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><li><code>focus</code></li><li><code>blur</code></li></ul></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;
-    @event click = function
-    @event focus = function
-    @event blur = function
-    label = &quot;Button&quot;
-    loadingLabel = &quot;Loading…&quot;
-    description = &quot;&quot;
-    as = &quot;&quot;
-    href = &quot;&quot;
-    target = &quot;&quot;
-    rel = &quot;&quot;
-    type = &quot;button&quot;
-    variant = &quot;default&quot;
-    color = &quot;primary&quot;
-    size = &quot;default&quot;
-    disabled = false
-    loading = false
-    pill = false
-    fullWidth = false
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    ariaLabel = &quot;&quot;
-    ariaPressed = &quot;&quot;
-    ariaExpanded = &quot;&quot;
-    ariaControls = &quot;&quot;
-    title = &quot;&quot;
-    autofocus = false
-    controlClass = &quot;&quot;
-    class = &quot;&quot;
-  &#125;
-
-  view &#123;
-        &lt;span
-      class=&quot;wire-action &#123;fullWidth ? 'w-full' : ''&#125; &#123;class&#125;&quot;
-    &gt;
-      &#123;#if as === &quot;a&quot; || (as === &quot;&quot; &amp;&amp; href)&#125;
-        &lt;a
-          &#123;...attrs&#125;
-          href=&quot;&#123;disabled || loading ? '' : href&#125;&quot;
-          target=&quot;&#123;target&#125;&quot;
-          rel=&quot;&#123;rel&#125;&quot;
-          title=&quot;&#123;title&#125;&quot;
-          aria-label=&quot;&#123;ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')&#125;&quot;
-          aria-disabled=&quot;&#123;disabled || loading&#125;&quot;
-          aria-busy=&quot;&#123;loading&#125;&quot;
-          aria-pressed=&quot;&#123;ariaPressed&#125;&quot;
-          aria-expanded=&quot;&#123;ariaExpanded&#125;&quot;
-          aria-controls=&quot;&#123;ariaControls&#125;&quot;
-          tabindex=&quot;&#123;disabled || loading ? '-1' : '0'&#125;&quot;
-          class=&quot;wire-btn wire-btn--variant-&#123;variant&#125; wire-btn--color-&#123;color&#125; wire-btn--size-&#123;size&#125; &#123;pill ? 'wire-btn--pill' : ''&#125; &#123;description ? 'wire-btn--with-description' : ''&#125; &#123;fullWidth ? 'w-full' : ''&#125; &#123;controlClass&#125;&quot;
-        &gt;
-          &#123;#if loading&#125;
-            &lt;span
-              class=&quot;wire-spinner wire-spinner--inline&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;start&quot;&#125;
-            &lt;span
-              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &lt;span
-            class=&quot;wire-btn__copy &#123;(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''&#125;&quot;
-          &gt;
-        &lt;span
-              class=&quot;wire-btn__label&quot;
-            &gt;
-        &lt;slot&gt;&#123;loading ? loadingLabel : label&#125;&lt;/slot&gt;
-        &lt;/span&gt;
-            &#123;#if description &amp;&amp; !loading&#125;
-              &lt;span
-                class=&quot;wire-btn__description&quot;
-              &gt;
-                &#123;description&#125;
-              &lt;/span&gt;
-            &#123;/if&#125;
-          &lt;/span&gt;
-          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;end&quot;&#125;
-            &lt;span
-              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &#123;#if (size === &quot;icon&quot; || size === &quot;icon-xs&quot; || size === &quot;icon-sm&quot; || size === &quot;icon-lg&quot;) &amp;&amp; (ariaLabel || label)&#125;
-            &lt;span
-              class=&quot;wire-btn__tooltip&quot;
-              role=&quot;tooltip&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-              &#123;ariaLabel || label&#125;
-            &lt;/span&gt;
-          &#123;/if&#125;
-        &lt;/a&gt;
-      &#123;:else&#125;
-        &lt;button
-          &#123;...attrs&#125;
-          type=&quot;&#123;type&#125;&quot;
-          title=&quot;&#123;title&#125;&quot;
-          autofocus=&quot;&#123;autofocus&#125;&quot;
-          disabled=&quot;&#123;disabled || loading&#125;&quot;
-          aria-label=&quot;&#123;ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')&#125;&quot;
-          aria-busy=&quot;&#123;loading&#125;&quot;
-          aria-pressed=&quot;&#123;ariaPressed&#125;&quot;
-          aria-expanded=&quot;&#123;ariaExpanded&#125;&quot;
-          aria-controls=&quot;&#123;ariaControls&#125;&quot;
-          class=&quot;wire-btn wire-btn--variant-&#123;variant&#125; wire-btn--color-&#123;color&#125; wire-btn--size-&#123;size&#125; &#123;pill ? 'wire-btn--pill' : ''&#125; &#123;description ? 'wire-btn--with-description' : ''&#125; &#123;fullWidth ? 'w-full' : ''&#125; &#123;controlClass&#125;&quot;
-        &gt;
-          &#123;#if loading&#125;
-            &lt;span
-              class=&quot;wire-spinner wire-spinner--inline&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;start&quot;&#125;
-            &lt;span
-              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &lt;span
-            class=&quot;wire-btn__copy &#123;(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''&#125;&quot;
-          &gt;
-        &lt;span
-              class=&quot;wire-btn__label&quot;
-            &gt;
-        &lt;slot&gt;&#123;loading ? loadingLabel : label&#125;&lt;/slot&gt;
-        &lt;/span&gt;
-            &#123;#if description &amp;&amp; !loading&#125;
-              &lt;span
-                class=&quot;wire-btn__description&quot;
-              &gt;
-                &#123;description&#125;
-              &lt;/span&gt;
-            &#123;/if&#125;
-          &lt;/span&gt;
-          &#123;#if icon &amp;&amp; !loading &amp;&amp; iconPosition === &quot;end&quot;&#125;
-            &lt;span
-              class=&quot;wire-btn__icon &#123;icon&#125;&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-        &lt;/span&gt;
-          &#123;/if&#125;
-          &#123;#if (size === &quot;icon&quot; || size === &quot;icon-xs&quot; || size === &quot;icon-sm&quot; || size === &quot;icon-lg&quot;) &amp;&amp; (ariaLabel || label)&#125;
-            &lt;span
-              class=&quot;wire-btn__tooltip&quot;
-              role=&quot;tooltip&quot;
-              aria-hidden=&quot;true&quot;
-            &gt;
-              &#123;ariaLabel || label&#125;
-            &lt;/span&gt;
-          &#123;/if&#125;
-        &lt;/button&gt;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/card.wrn

@@ -1,290 +0,0 @@
-page Cardcomponent {
-  seo {
-    title = "Card component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Card</h1><p>Theme-aware, responsive card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>31 props</span><span>1 slots</span><span>6 events</span></div></section><section id="usage"><h2>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
-  title=&quot;Card title&quot;
-  subtitle=&quot;subtitle&quot;
-  description=&quot;description&quot;
-  header=&quot;header&quot;
-  footer=&quot;footer&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>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Card title&quot;</code></td></tr><tr><td><code>subtitle</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>header</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>footer</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>imageSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>imageAlt</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>imagePosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;top&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>headerActions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>navigation</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>activeNav</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>mobileNavigation</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>alertTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>alertDescription</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>emptyTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;No data to show&quot;</code></td></tr><tr><td><code>emptyIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;icon-[lucide--inbox]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>layout</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;vertical&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><tr><td><code>hover</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;none&quot;</code></td></tr><tr><td><code>scrollable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>maxHeight</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;18rem&quot;</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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><li><code>action</code></li><li><code>navigate</code></li><li><code>dismiss</code></li><li><code>load</code></li><li><code>error</code></li></ul></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;
-    @event click = function
-    @event action = function
-    @event navigate = function
-    @event dismiss = function
-    @event load = function
-    @event error = function
-    title = &quot;Card title&quot;
-    subtitle = &quot;&quot;
-    description = &quot;&quot;
-    header = &quot;&quot;
-    footer = &quot;&quot;
-    imageSrc = &quot;&quot;
-    imageAlt = &quot;&quot;
-    imagePosition = &quot;top&quot;
-    actionLabel = &quot;&quot;
-    actionHref = &quot;&quot;
-    headerActions = []
-    navigation = []
-    activeNav = &quot;&quot;
-    mobileNavigation = false
-    alertTitle = &quot;&quot;
-    alertDescription = &quot;&quot;
-    empty = false
-    emptyTitle = &quot;No data to show&quot;
-    emptyIcon = &quot;icon-[lucide--inbox]&quot;
-    items = []
-    size = &quot;md&quot;
-    color = &quot;primary&quot;
-    variant = &quot;default&quot;
-    layout = &quot;vertical&quot;
-    align = &quot;left&quot;
-    hover = &quot;none&quot;
-    scrollable = false
-    maxHeight = &quot;18rem&quot;
-    dismissible = false
-    ariaLabel = &quot;&quot;
-    class = &quot;&quot;
-  &#125;
-
-  state visible = true
-  state selectedNav = activeNav
-
-  functions &#123;
-    function chooseNavigation(item, index) &#123;
-      previousValue = selectedNav
-      selectedNav = item.value || item.label
-      $emit(&quot;navigate&quot;, &#123;
-        value: selectedNav,
-        previousValue: previousValue,
-        item: item,
-        index: index
-      &#125;)
-    &#125;
-
-    function chooseMobileNavigation(sourceEvent) &#123;
-      previousValue = selectedNav
-      selectedNav = sourceEvent.target.value
-      $emit(&quot;navigate&quot;, &#123;
-        value: selectedNav,
-        previousValue: previousValue
-      &#125;)
-    &#125;
-
-    function chooseAction(action, index) &#123;
-      $emit(&quot;action&quot;, &#123;
-        action: action,
-        index: index
-      &#125;)
-    &#125;
-
-    function dismissCard(sourceEvent) &#123;
-      panel = sourceEvent.currentTarget.closest(&quot;.wire-next__card-panel&quot;)
-      if (panel) &#123;
-        panel.setAttribute(&quot;hidden&quot;, &quot;&quot;)
-      &#125;
-      visible = false
-      $emit(&quot;dismiss&quot;, &#123;
-        title: title
-      &#125;)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--card &#123;class&#125;&quot;
-      data-size=&quot;&#123;size&#125;&quot;
-      data-color=&quot;&#123;color&#125;&quot;
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-layout=&quot;&#123;layout&#125;&quot;
-      data-align=&quot;&#123;align&#125;&quot;
-      data-hover=&quot;&#123;hover&#125;&quot;
-      data-image-position=&quot;&#123;imagePosition&#125;&quot;
-      data-group=&quot;&#123;items.length &gt; 0&#125;&quot;
-      aria-label=&quot;&#123;ariaLabel || title&#125;&quot;
-    &gt;
-      &#123;#if items.length &gt; 0&#125;
-        &lt;div class=&quot;wire-next__card-group&quot;&gt;
-          &#123;#each items as item&#125;
-            &lt;article class=&quot;wire-next__card-panel&quot;&gt;
-              &#123;#if item.imageSrc&#125;
-                &lt;div class=&quot;wire-next__card-media&quot;&gt;
-        &lt;img src=&quot;&#123;item.imageSrc&#125;&quot; alt=&quot;&#123;item.imageAlt || ''&#125;&quot; loading=&quot;lazy&quot; /&gt;
-        &lt;/div&gt;
-              &#123;/if&#125;
-              &lt;div class=&quot;wire-next__card-body&quot;&gt;
-                &#123;#if item.title&#125;&lt;h3&gt;&#123;item.title&#125;&lt;/h3&gt;&#123;/if&#125;
-                &#123;#if item.description&#125;&lt;p&gt;&#123;item.description&#125;&lt;/p&gt;&#123;/if&#125;
-              &lt;/div&gt;
-              &#123;#if item.footer&#125;&lt;footer class=&quot;wire-next__card-footer&quot;&gt;&#123;item.footer&#125;&lt;/footer&gt;&#123;/if&#125;
-            &lt;/article&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;:else if visible&#125;
-        &lt;article class=&quot;wire-next__card-panel&quot;&gt;
-          &#123;#if imagePosition === &quot;overlay&quot; &amp;&amp; imageSrc&#125;
-            &lt;div class=&quot;wire-next__card-media wire-next__card-media--overlay&quot;&gt;
-        &lt;img
-                src=&quot;&#123;imageSrc&#125;&quot;
-                alt=&quot;&#123;imageAlt&#125;&quot;
-                loading=&quot;lazy&quot;
-                @load=&quot;$emit('load', &#123; src: imageSrc &#125;)&quot;
-                @error=&quot;$emit('error', &#123; src: imageSrc &#125;)&quot;
-              /&gt;
-        &lt;div class=&quot;wire-next__card-overlay&quot;&gt;
-                &#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
-                &#123;#if subtitle&#125;&lt;span class=&quot;wire-next__card-subtitle&quot;&gt;&#123;subtitle&#125;&lt;/span&gt;&#123;/if&#125;
-                &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-                &#123;#if footer&#125;&lt;small&gt;&#123;footer&#125;&lt;/small&gt;&#123;/if&#125;
-              &lt;/div&gt;
-        &lt;/div&gt;
-          &#123;:else&#125;
-            &#123;#if header || headerActions.length &gt; 0 || dismissible&#125;
-              &lt;header class=&quot;wire-next__card-header&quot;&gt;
-        &lt;span&gt;&#123;header&#125;&lt;/span&gt;
-                &#123;#if headerActions.length &gt; 0 || dismissible&#125;
-                  &lt;span class=&quot;wire-next__card-header-actions&quot;&gt;
-                    &#123;#each headerActions as action, index&#125;
-                      &lt;button
-                        type=&quot;button&quot;
-                        aria-label=&quot;&#123;action.ariaLabel || action.label&#125;&quot;
-                        title=&quot;&#123;action.label&#125;&quot;
-                        @click=&quot;chooseAction(action, index)&quot;
-                      &gt;
-                        &#123;#if action.icon&#125;&lt;span class=&quot;&#123;action.icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-                        &#123;#if !action.icon&#125;&lt;span&gt;&#123;action.label&#125;&lt;/span&gt;&#123;/if&#125;
-                      &lt;/button&gt;
-                    &#123;/each&#125;
-                    &#123;#if dismissible&#125;
-                      &lt;button type=&quot;button&quot; aria-label=&quot;Close card&quot; @click=&quot;dismissCard(event)&quot;&gt;
-        &lt;span class=&quot;icon-[lucide--x]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-                    &#123;/if&#125;
-                  &lt;/span&gt;
-                &#123;/if&#125;
-              &lt;/header&gt;
-            &#123;/if&#125;
-
-            &#123;#if navigation.length &gt; 0&#125;
-              &lt;nav class=&quot;wire-next__card-navigation&quot; aria-label=&quot;&#123;ariaLabel || title&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__card-tabs&quot;&gt;
-                  &#123;#each navigation as item, index&#125;
-                    &lt;button
-                      type=&quot;button&quot;
-                      data-active=&quot;&#123;selectedNav === (item.value || item.label)&#125;&quot;
-                      aria-current=&quot;&#123;selectedNav === (item.value || item.label) ? 'page' : ''&#125;&quot;
-                      @click=&quot;chooseNavigation(item, index)&quot;
-                    &gt;
-                      &#123;item.label&#125;
-                    &lt;/button&gt;
-                  &#123;/each&#125;
-                &lt;/div&gt;
-                &#123;#if mobileNavigation&#125;
-                  &lt;select
-                    class=&quot;wire-next__card-navigation-select&quot;
-                    aria-label=&quot;&#123;ariaLabel || title&#125;&quot;
-                    value=&quot;&#123;selectedNav&#125;&quot;
-                    @change=&quot;chooseMobileNavigation(event)&quot;
-                  &gt;
-                    &#123;#each navigation as item&#125;
-                      &lt;option
-                        value=&quot;&#123;item.value || item.label&#125;&quot;
-                        selected=&quot;&#123;selectedNav === (item.value || item.label)&#125;&quot;
-                      &gt;
-                        &#123;item.label&#125;
-                      &lt;/option&gt;
-                    &#123;/each&#125;
-                  &lt;/select&gt;
-                &#123;/if&#125;
-              &lt;/nav&gt;
-            &#123;/if&#125;
-
-            &#123;#if imageSrc &amp;&amp; imagePosition !== &quot;bottom&quot;&#125;
-              &lt;div class=&quot;wire-next__card-media&quot;&gt;
-        &lt;img
-                  src=&quot;&#123;imageSrc&#125;&quot;
-                  alt=&quot;&#123;imageAlt&#125;&quot;
-                  loading=&quot;lazy&quot;
-                  @load=&quot;$emit('load', &#123; src: imageSrc &#125;)&quot;
-                  @error=&quot;$emit('error', &#123; src: imageSrc &#125;)&quot;
-                /&gt;
-        &lt;/div&gt;
-            &#123;/if&#125;
-
-            &#123;#if alertTitle || alertDescription&#125;
-              &lt;aside class=&quot;wire-next__card-alert&quot; role=&quot;status&quot;&gt;
-                &#123;#if alertTitle&#125;&lt;strong&gt;&#123;alertTitle&#125;&lt;/strong&gt;&#123;/if&#125;
-                &#123;#if alertDescription&#125;&lt;span&gt;&#123;alertDescription&#125;&lt;/span&gt;&#123;/if&#125;
-              &lt;/aside&gt;
-            &#123;/if&#125;
-
-            &lt;div
-              class=&quot;wire-next__card-body&quot;
-              data-scrollable=&quot;&#123;scrollable&#125;&quot;
-              style=&quot;--wire-card-max-height: &#123;maxHeight&#125;&quot;
-            &gt;
-              &#123;#if empty&#125;
-                &lt;div class=&quot;wire-next__card-empty&quot;&gt;
-        &lt;span class=&quot;&#123;emptyIcon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;strong&gt;&#123;emptyTitle&#125;&lt;/strong&gt;
-        &lt;/div&gt;
-              &#123;:else&#125;
-                &#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
-                &#123;#if subtitle&#125;&lt;span class=&quot;wire-next__card-subtitle&quot;&gt;&#123;subtitle&#125;&lt;/span&gt;&#123;/if&#125;
-                &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-                &lt;slot /&gt;
-                &#123;#if actionLabel&#125;
-                  &lt;a
-                    class=&quot;wire-next__card-action&quot;
-                    href=&quot;&#123;actionHref || '#'&#125;&quot;
-                    @click=&quot;$emit('action', &#123; label: actionLabel, href: actionHref &#125;)&quot;
-                  &gt;
-                    &#123;actionLabel&#125;&lt;span class=&quot;icon-[lucide--chevron-right]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/a&gt;
-                &#123;/if&#125;
-              &#123;/if&#125;
-            &lt;/div&gt;
-
-            &#123;#if footer&#125;&lt;footer class=&quot;wire-next__card-footer&quot;&gt;&#123;footer&#125;&lt;/footer&gt;&#123;/if&#125;
-
-            &#123;#if imageSrc &amp;&amp; imagePosition === &quot;bottom&quot;&#125;
-              &lt;div class=&quot;wire-next__card-media&quot;&gt;
-        &lt;img
-                  src=&quot;&#123;imageSrc&#125;&quot;
-                  alt=&quot;&#123;imageAlt&#125;&quot;
-                  loading=&quot;lazy&quot;
-                  @load=&quot;$emit('load', &#123; src: imageSrc &#125;)&quot;
-                  @error=&quot;$emit('error', &#123; src: imageSrc &#125;)&quot;
-                /&gt;
-        &lt;/div&gt;
-            &#123;/if&#125;
-          &#123;/if&#125;
-        &lt;/article&gt;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/carousel.wrn

@@ -1,490 +0,0 @@
-page Carouselcomponent {
-  seo {
-    title = "Carousel component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>1 slots</span><span>10 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;title&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><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>activeIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>slidesPerView</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;0.75rem&quot;</code></td></tr><tr><td><code>showPagination</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoPlay</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoplayInterval</code></td><td><code>number</code></td><td>Optional</td><td><code>4000</code></td></tr><tr><td><code>isInfiniteLoop</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isRTL</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isCentered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isDraggable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoHeight</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isSnap</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showCounter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>thumbnails</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;none&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Content carousel&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><ul><li><code>initialize</code></li><li><code>change</code></li><li><code>previous</code></li><li><code>next</code></li><li><code>play</code></li><li><code>pause</code></li><li><code>reachStart</code></li><li><code>reachEnd</code></li><li><code>dragStart</code></li><li><code>dragEnd</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/carousel.wrn</code></p><pre data-language="wrn"><code>// Interactive, hydration-safe content carousel.
-component Carousel &#123;
-  props &#123;
-    @event initialize = function
-    @event change = function
-    @event previous = function
-    @event next = function
-    @event play = function
-    @event pause = function
-    @event reachStart = function
-    @event reachEnd = function
-    @event dragStart = function
-    @event dragEnd = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;&quot;
-    description = &quot;&quot;
-    items = []
-    activeIndex = 0
-    slidesPerView = 1
-    gap = &quot;0.75rem&quot;
-    showPagination = false
-    isAutoPlay = false
-    autoplayInterval = 4000
-    isInfiniteLoop = false
-    isRTL = false
-    isCentered = false
-    isDraggable = false
-    isAutoHeight = false
-    isSnap = false
-    showCounter = false
-    thumbnails = &quot;none&quot;
-    ariaLabel = &quot;Content carousel&quot;
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-
-  state currentIndex = activeIndex
-  state playing = false
-  state dragOrigin = null
-  state dragOffset = 0
-  state autoplayTimer = null
-  state carouselRoot = null
-
-  functions &#123;
-    function slideCount() &#123;
-      return items.length
-    &#125;
-
-    function maximumIndex(count, visible) &#123;
-      count = slideCount()
-      visible = Math.max(1, Number(slidesPerView) || 1)
-      if (isCentered || isSnap) &#123;
-        return Math.max(0, count - 1)
-      &#125;
-      return Math.max(0, count - visible)
-    &#125;
-
-    function normalizedIndex(index, maximum) &#123;
-      maximum = maximumIndex()
-      if (slideCount() === 0) &#123;
-        return 0
-      &#125;
-      if (isInfiniteLoop) &#123;
-        if (index &lt; 0) &#123;
-          return maximum
-        &#125;
-        if (index &gt; maximum) &#123;
-          return 0
-        &#125;
-      &#125;
-      return Math.max(0, Math.min(index, maximum))
-    &#125;
-
-    function rememberRoot(sourceEvent, root) &#123;
-      if (!sourceEvent || !sourceEvent.currentTarget) &#123;
-        return
-      &#125;
-      root = sourceEvent.currentTarget.closest(&quot;.wire-next--carousel&quot;)
-      if (root) &#123;
-        carouselRoot = root
-      &#125;
-    &#125;
-
-    function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) &#123;
-      rememberRoot(sourceEvent)
-      root = carouselRoot
-      if (!root) &#123;
-        return
-      &#125;
-      if (isSnap) &#123;
-        viewport = root.querySelector(&quot;.wire-next__carousel-viewport&quot;)
-        slides = root.querySelectorAll(&quot;.wire-next__carousel-slide&quot;)
-        slide = slides[index]
-        if (viewport &amp;&amp; slide) &#123;
-          viewport.scrollTo(&#123;
-            left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
-            behavior: &quot;smooth&quot;
-          &#125;)
-        &#125;
-      &#125;
-      thumbnails = root.querySelectorAll(&quot;.wire-next__carousel-thumbnails button&quot;)
-      if (thumbnails[index]) &#123;
-        thumbnail = thumbnails[index]
-        rail = thumbnail.parentElement
-        rail.scrollTo(&#123;
-          left: thumbnail.offsetLeft - (rail.clientWidth - thumbnail.clientWidth) / 2,
-          top: thumbnail.offsetTop - (rail.clientHeight - thumbnail.clientHeight) / 2,
-          behavior: &quot;smooth&quot;
-        &#125;)
-      &#125;
-    &#125;
-
-    function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) &#123;
-      if (!isSnap) &#123;
-        return
-      &#125;
-      rememberRoot(sourceEvent)
-      viewport = sourceEvent.currentTarget
-      slides = viewport.querySelectorAll(&quot;.wire-next__carousel-slide&quot;)
-      viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2
-      closestIndex = currentIndex
-      closestDistance = 1000000000
-      slides.forEach(function (candidate, index) &#123;
-        slideCenter = candidate.offsetLeft + candidate.clientWidth / 2
-        distance = Math.abs(slideCenter - viewportCenter)
-        if (distance &lt; closestDistance) &#123;
-          closestDistance = distance
-          closestIndex = index
-        &#125;
-      &#125;)
-      closestIndex = normalizedIndex(closestIndex)
-      if (closestIndex !== currentIndex) &#123;
-        previousIndex = currentIndex
-        currentIndex = closestIndex
-        $emit(&quot;change&quot;, &#123;
-          index: currentIndex,
-          previousIndex: previousIndex,
-          item: items[currentIndex],
-          reason: &quot;snap&quot;
-        &#125;)
-        slides = carouselRoot.querySelectorAll(&quot;.wire-next__carousel-thumbnails button&quot;)
-        slide = slides[currentIndex]
-        if (slide) &#123;
-          viewport = slide.parentElement
-          viewport.scrollTo(&#123;
-            left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
-            top: slide.offsetTop - (viewport.clientHeight - slide.clientHeight) / 2,
-            behavior: &quot;smooth&quot;
-          &#125;)
-        &#125;
-      &#125;
-    &#125;
-
-    function selectSlide(index, reason, sourceEvent, previousIndex) &#123;
-      if (slideCount() === 0) &#123;
-        return
-      &#125;
-      previousIndex = currentIndex
-      currentIndex = normalizedIndex(Number(index))
-      syncNavigation(sourceEvent, currentIndex)
-      if (previousIndex === currentIndex &amp;&amp; reason !== &quot;initialize&quot;) &#123;
-        return
-      &#125;
-      $emit(&quot;change&quot;, &#123;
-        index: currentIndex,
-        previousIndex: previousIndex,
-        item: items[currentIndex],
-        reason: reason || &quot;select&quot;
-      &#125;)
-      if (currentIndex === 0) &#123;
-        $emit(&quot;reachStart&quot;, &#123; index: currentIndex &#125;)
-      &#125;
-      if (currentIndex === maximumIndex()) &#123;
-        $emit(&quot;reachEnd&quot;, &#123; index: currentIndex &#125;)
-      &#125;
-    &#125;
-
-    function previousSlide(sourceEvent, previousIndex) &#123;
-      previousIndex = currentIndex
-      selectSlide(currentIndex - 1, &quot;previous&quot;, sourceEvent)
-      $emit(&quot;previous&quot;, &#123;
-        index: currentIndex,
-        previousIndex: previousIndex,
-        item: items[currentIndex]
-      &#125;)
-    &#125;
-
-    function nextSlide(sourceEvent, previousIndex) &#123;
-      previousIndex = currentIndex
-      selectSlide(currentIndex + 1, &quot;next&quot;, sourceEvent)
-      $emit(&quot;next&quot;, &#123;
-        index: currentIndex,
-        previousIndex: previousIndex,
-        item: items[currentIndex]
-      &#125;)
-    &#125;
-
-    function handleKeydown(sourceEvent) &#123;
-      if (sourceEvent.key === &quot;ArrowLeft&quot;) &#123;
-        sourceEvent.preventDefault()
-        if (isRTL) &#123;
-          nextSlide(sourceEvent)
-        &#125; else &#123;
-          previousSlide(sourceEvent)
-        &#125;
-      &#125;
-      if (sourceEvent.key === &quot;ArrowRight&quot;) &#123;
-        sourceEvent.preventDefault()
-        if (isRTL) &#123;
-          previousSlide(sourceEvent)
-        &#125; else &#123;
-          nextSlide(sourceEvent)
-        &#125;
-      &#125;
-      if (sourceEvent.key === &quot;Home&quot;) &#123;
-        sourceEvent.preventDefault()
-        selectSlide(0, &quot;keyboard&quot;, sourceEvent)
-      &#125;
-      if (sourceEvent.key === &quot;End&quot;) &#123;
-        sourceEvent.preventDefault()
-        selectSlide(maximumIndex(), &quot;keyboard&quot;, sourceEvent)
-      &#125;
-    &#125;
-
-    function beginDrag(sourceEvent) &#123;
-      if (!isDraggable || isSnap) &#123;
-        return
-      &#125;
-      sourceEvent.preventDefault()
-      dragOrigin = sourceEvent.clientX
-      dragOffset = 0
-      sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId)
-      $emit(&quot;dragStart&quot;, &#123; index: currentIndex, x: dragOrigin &#125;)
-    &#125;
-
-    function moveDrag(sourceEvent) &#123;
-      if (!isDraggable || isSnap || dragOrigin === null) &#123;
-        return
-      &#125;
-      sourceEvent.preventDefault()
-      dragOffset = sourceEvent.clientX - dragOrigin
-    &#125;
-
-    function cancelDrag() &#123;
-      dragOrigin = null
-      dragOffset = 0
-    &#125;
-
-    function endDrag(sourceEvent, distance) &#123;
-      if (!isDraggable || isSnap || dragOrigin === null) &#123;
-        return
-      &#125;
-      sourceEvent.preventDefault()
-      distance = dragOffset || sourceEvent.clientX - dragOrigin
-      dragOrigin = null
-      dragOffset = 0
-      if (Math.abs(distance) &gt; 20) &#123;
-        if ((distance &lt; 0 &amp;&amp; !isRTL) || (distance &gt; 0 &amp;&amp; isRTL)) &#123;
-          nextSlide(sourceEvent)
-        &#125; else &#123;
-          previousSlide(sourceEvent)
-        &#125;
-      &#125;
-      $emit(&quot;dragEnd&quot;, &#123;
-        index: currentIndex,
-        distance: distance
-      &#125;)
-    &#125;
-
-    function advanceAutoplay() &#123;
-      if (currentIndex &gt;= maximumIndex()) &#123;
-        selectSlide(0, &quot;autoplay&quot;)
-      &#125; else &#123;
-        selectSlide(currentIndex + 1, &quot;autoplay&quot;)
-      &#125;
-    &#125;
-
-    function startAutoplay() &#123;
-      if (!isAutoPlay || playing || slideCount() &lt; 2) &#123;
-        return
-      &#125;
-      playing = true
-      autoplayTimer = setInterval(advanceAutoplay, Math.max(1000, Number(autoplayInterval)))
-      $emit(&quot;play&quot;, &#123; index: currentIndex, interval: autoplayInterval &#125;)
-    &#125;
-
-    function pauseAutoplay() &#123;
-      if (autoplayTimer) &#123;
-        clearInterval(autoplayTimer)
-      &#125;
-      autoplayTimer = null
-      if (playing) &#123;
-        $emit(&quot;pause&quot;, &#123; index: currentIndex &#125;)
-      &#125;
-      playing = false
-    &#125;
-
-  &#125;
-
-  lifecycle &#123;
-    mount &#123;
-      $emit(&quot;initialize&quot;, &#123; index: currentIndex, count: slideCount() &#125;)
-      startAutoplay()
-    &#125;
-    unmount &#123;
-      if (autoplayTimer) &#123;
-        clearInterval(autoplayTimer)
-      &#125;
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--carousel wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;
-      data-rtl=&quot;&#123;isRTL&#125;&quot;
-      data-centered=&quot;&#123;isCentered&#125;&quot;
-      data-draggable=&quot;&#123;isDraggable &amp;&amp; !isSnap&#125;&quot;
-      data-dragging=&quot;&#123;dragOrigin !== null&#125;&quot;
-      data-auto-height=&quot;&#123;isAutoHeight&#125;&quot;
-      data-snap=&quot;&#123;isSnap&#125;&quot;
-      data-thumbnails=&quot;&#123;thumbnails&#125;&quot;
-      dir=&quot;&#123;isRTL ? 'rtl' : 'ltr'&#125;&quot;
-      role=&quot;region&quot;
-      aria-roledescription=&quot;carousel&quot;
-      aria-label=&quot;&#123;ariaLabel&#125;&quot;
-      @keydown=&quot;handleKeydown(event)&quot;
-      @mouseenter=&quot;rememberRoot(event); pauseAutoplay()&quot;
-      @mouseleave=&quot;startAutoplay()&quot;
-      @focusin=&quot;rememberRoot(event); pauseAutoplay()&quot;
-      @focusout=&quot;startAutoplay()&quot;
-    &gt;
-      &#123;#if title || description&#125;
-        &lt;header class=&quot;wire-next__carousel-header&quot;&gt;
-          &#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
-          &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-        &lt;/header&gt;
-      &#123;/if&#125;
-
-        &lt;div class=&quot;wire-next__carousel-layout&quot;&gt;
-          &#123;#if thumbnails === &quot;vertical&quot;&#125;
-            &lt;div class=&quot;wire-next__carousel-thumbnails&quot; aria-label=&quot;Choose a slide&quot;&gt;
-              &#123;#each items as item, index&#125;
-                &lt;button
-                  type=&quot;button&quot;
-                  data-active=&quot;&#123;index === currentIndex&#125;&quot;
-                  aria-label=&quot;Show slide &#123;index + 1&#125;: &#123;item.label || item.title&#125;&quot;
-                  aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
-                  @click=&quot;selectSlide(index, 'thumbnail', event)&quot;
-                &gt;
-                  &#123;#if item.thumbnail&#125;&lt;img src=&quot;&#123;item.thumbnail&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
-                  &lt;span&gt;&#123;item.label || item.title || &quot;Slide &quot; + (index + 1)&#125;&lt;/span&gt;
-        &lt;/button&gt;
-              &#123;/each&#125;
-            &lt;/div&gt;
-          &#123;/if&#125;
-
-          &lt;div class=&quot;wire-next__carousel-main&quot;&gt;
-        &lt;div class=&quot;wire-next__carousel-stage&quot;&gt;
-        &lt;div
-                class=&quot;wire-next__carousel-viewport&quot;
-                tabindex=&quot;0&quot;
-                @scroll=&quot;handleSnapScroll(event)&quot;
-                @pointerdown=&quot;beginDrag(event)&quot;
-                @pointermove=&quot;moveDrag(event)&quot;
-                @pointerup=&quot;endDrag(event)&quot;
-                @pointercancel=&quot;cancelDrag()&quot;
-                @lostpointercapture=&quot;cancelDrag()&quot;
-              &gt;
-        &lt;div
-                  class=&quot;wire-next__carousel-track&quot;
-                  style=&quot;--wire-carousel-index: &#123;currentIndex&#125;; --wire-carousel-per-view: &#123;slidesPerView&#125;; --wire-carousel-gap: &#123;gap&#125;; --wire-carousel-drag-offset: &#123;dragOffset&#125;px&quot;
-                &gt;
-                  &#123;#each items as item, index&#125;
-                    &lt;article
-                      class=&quot;wire-next__carousel-slide&quot;
-                      data-active=&quot;&#123;index === currentIndex&#125;&quot;
-                      role=&quot;group&quot;
-                      aria-roledescription=&quot;slide&quot;
-                      aria-label=&quot;&#123;index + 1&#125; of &#123;items.length&#125;&quot;
-                      aria-hidden=&quot;&#123;index === currentIndex ? 'false' : 'true'&#125;&quot;
-                    &gt;
-                      &#123;#if item.imageSrc&#125;
-                        &lt;img src=&quot;&#123;item.imageSrc&#125;&quot; alt=&quot;&#123;item.imageAlt || item.title || ''&#125;&quot; /&gt;
-                      &#123;/if&#125;
-                      &lt;div class=&quot;wire-next__carousel-slide-content&quot;&gt;
-                        &#123;#if item.eyebrow&#125;&lt;span&gt;&#123;item.eyebrow&#125;&lt;/span&gt;&#123;/if&#125;
-                        &#123;#if item.title || item.label&#125;&lt;h4&gt;&#123;item.title || item.label&#125;&lt;/h4&gt;&#123;/if&#125;
-                        &#123;#if item.description&#125;&lt;p&gt;&#123;item.description&#125;&lt;/p&gt;&#123;/if&#125;
-                        &#123;#if item.actionLabel&#125;
-                          &lt;a href=&quot;&#123;item.actionHref || '#'&#125;&quot;&gt;&#123;item.actionLabel&#125;&lt;/a&gt;
-                        &#123;/if&#125;
-                      &lt;/div&gt;
-        &lt;/article&gt;
-                  &#123;/each&#125;
-                  &lt;slot /&gt;
-        &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;button
-                class=&quot;wire-next__carousel-control wire-next__carousel-control--previous&quot;
-                type=&quot;button&quot;
-                aria-label=&quot;Previous slide&quot;
-                disabled=&quot;&#123;!isInfiniteLoop &amp;&amp; currentIndex === 0&#125;&quot;
-                @click=&quot;previousSlide(event)&quot;
-              &gt;
-        &lt;span class=&quot;icon-[lucide--chevron-left]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-        &lt;button
-                class=&quot;wire-next__carousel-control wire-next__carousel-control--next&quot;
-                type=&quot;button&quot;
-                aria-label=&quot;Next slide&quot;
-                disabled=&quot;&#123;!isInfiniteLoop &amp;&amp; currentIndex === maximumIndex()&#125;&quot;
-                @click=&quot;nextSlide(event)&quot;
-              &gt;
-        &lt;span class=&quot;icon-[lucide--chevron-right]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-
-              &#123;#if showCounter&#125;
-                &lt;output class=&quot;wire-next__carousel-counter&quot; aria-live=&quot;polite&quot;&gt;
-                  &#123;currentIndex + 1&#125; / &#123;items.length&#125;
-                &lt;/output&gt;
-              &#123;/if&#125;
-            &lt;/div&gt;
-
-            &#123;#if showPagination&#125;
-              &lt;div class=&quot;wire-next__carousel-pagination&quot; aria-label=&quot;Choose a slide&quot;&gt;
-                &#123;#each items as item, index&#125;
-                  &lt;button
-                    type=&quot;button&quot;
-                    data-active=&quot;&#123;index === currentIndex&#125;&quot;
-                    aria-label=&quot;Show slide &#123;index + 1&#125;&quot;
-                    aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
-                    @click=&quot;selectSlide(index, 'pagination', event)&quot;
-                  &gt;
-        &lt;/button&gt;
-                &#123;/each&#125;
-              &lt;/div&gt;
-            &#123;/if&#125;
-
-            &#123;#if thumbnails === &quot;horizontal&quot;&#125;
-              &lt;div class=&quot;wire-next__carousel-thumbnails&quot; aria-label=&quot;Choose a slide&quot;&gt;
-                &#123;#each items as item, index&#125;
-                  &lt;button
-                    type=&quot;button&quot;
-                    data-active=&quot;&#123;index === currentIndex&#125;&quot;
-                    aria-label=&quot;Show slide &#123;index + 1&#125;: &#123;item.label || item.title&#125;&quot;
-                    aria-current=&quot;&#123;index === currentIndex ? 'true' : 'false'&#125;&quot;
-                    @click=&quot;selectSlide(index, 'thumbnail', event)&quot;
-                  &gt;
-                    &#123;#if item.thumbnail&#125;&lt;img src=&quot;&#123;item.thumbnail&#125;&quot; alt=&quot;&quot; /&gt;&#123;/if&#125;
-                    &lt;span&gt;&#123;item.label || item.title || &quot;Slide &quot; + (index + 1)&#125;&lt;/span&gt;
-        &lt;/button&gt;
-                &#123;/each&#125;
-              &lt;/div&gt;
-            &#123;/if&#125;
-          &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/chart.wrn

@@ -1,49 +0,0 @@
-page Chartcomponent {
-  seo {
-    title = "Chart component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chart</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Chart</h1><p>Theme-aware, responsive chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Chart
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Chart&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Chart&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Chart&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>dataPointClick</code></li><li><code>legendToggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Chart.wrn</code></p><pre data-language="wrn"><code>component Chart &#123;
-  props &#123;
-    @event select = function
-    @event dataPointClick = function
-    @event legendToggle = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Chart&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--chart wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/chat-bubble.wrn

@@ -1,175 +0,0 @@
-page ChatBubblecomponent {
-  seo {
-    title = "ChatBubble component"
-    description = "Theme-aware, responsive chat bubble component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChatBubble</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ChatBubble</h1><p>Theme-aware, responsive chat bubble component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>11 props</span><span>1 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;ChatBubble
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;title&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ChatBubble&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><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>oneSided</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showAvatars</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showMetadata</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Conversation&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><ul><li><code>action</code></li><li><code>messageClick</code></li><li><code>avatarClick</code></li><li><code>linkClick</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChatBubble.wrn</code></p><pre data-language="wrn"><code>component ChatBubble &#123;
-  props &#123;
-    @event action = function
-    @event messageClick = function
-    @event avatarClick = function
-    @event linkClick = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;&quot;
-    description = &quot;&quot;
-    items = []
-    oneSided = false
-    showAvatars = false
-    showMetadata = false
-    ariaLabel = &quot;Conversation&quot;
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-
-  functions &#123;
-    function messageDirection(item) &#123;
-      return item.direction === &quot;outgoing&quot; ? &quot;outgoing&quot; : &quot;incoming&quot;
-    &#125;
-
-    function selectMessage(item, index) &#123;
-      $emit(&quot;messageClick&quot;, &#123;
-        item: item,
-        index: index,
-        direction: messageDirection(item)
-      &#125;)
-    &#125;
-
-    function selectAvatar(sourceEvent, item, index) &#123;
-      sourceEvent.stopPropagation()
-      $emit(&quot;avatarClick&quot;, &#123;
-        item: item,
-        index: index,
-        direction: messageDirection(item)
-      &#125;)
-    &#125;
-
-    function selectLink(sourceEvent, link, item, index) &#123;
-      sourceEvent.stopPropagation()
-      $emit(&quot;linkClick&quot;, &#123;
-        link: link,
-        item: item,
-        index: index
-      &#125;)
-    &#125;
-
-    function selectAction(sourceEvent, item, index) &#123;
-      sourceEvent.stopPropagation()
-      $emit(&quot;action&quot;, &#123;
-        action: item.action || &quot;retry&quot;,
-        item: item,
-        index: index
-      &#125;)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--chat-bubble wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;
-      data-one-sided=&quot;&#123;oneSided&#125;&quot;
-      role=&quot;log&quot;
-      aria-label=&quot;&#123;ariaLabel&#125;&quot;
-      aria-live=&quot;polite&quot;
-    &gt;
-      &#123;#if title || description&#125;
-        &lt;header class=&quot;wire-next__chat-header&quot;&gt;
-          &#123;#if title&#125;&lt;h3&gt;&#123;title&#125;&lt;/h3&gt;&#123;/if&#125;
-          &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-        &lt;/header&gt;
-      &#123;/if&#125;
-
-      &#123;#if items.length&#125;
-        &lt;div class=&quot;wire-next__chat-thread&quot;&gt;
-          &#123;#each items as item, index&#125;
-            &lt;article
-              class=&quot;wire-next__chat-message&quot;
-              data-direction=&quot;&#123;messageDirection(item)&#125;&quot;
-              aria-label=&quot;&#123;messageDirection(item) === 'outgoing' ? 'Sent message' : 'Received message'&#125;&quot;
-            &gt;
-        &lt;div class=&quot;wire-next__chat-row&quot;&gt;
-                &#123;#if showAvatars &amp;&amp; (item.avatarSrc || item.avatarFallback)&#125;
-                  &lt;button
-                    class=&quot;wire-next__chat-avatar&quot;
-                    type=&quot;button&quot;
-                    aria-label=&quot;&#123;item.avatarLabel || item.author || 'Message author'&#125;&quot;
-                    @click=&quot;selectAvatar(event, item, index)&quot;
-                  &gt;
-                    &#123;#if item.avatarSrc&#125;
-                      &lt;img src=&quot;&#123;item.avatarSrc&#125;&quot; alt=&quot;&#123;item.avatarAlt || ''&#125;&quot; /&gt;
-                    &#123;:else&#125;
-                      &lt;span&gt;&#123;item.avatarFallback&#125;&lt;/span&gt;
-                    &#123;/if&#125;
-                  &lt;/button&gt;
-                &#123;/if&#125;
-
-                &lt;div
-                  class=&quot;wire-next__chat-content&quot;
-                  role=&quot;button&quot;
-                  tabindex=&quot;0&quot;
-                  @click=&quot;selectMessage(item, index)&quot;
-                  @keydown=&quot;if (event.key === 'Enter' || event.key === ' ') &#123; event.preventDefault(); selectMessage(item, index) &#125;&quot;
-                &gt;
-                  &#123;#if item.title&#125;&lt;h4&gt;&#123;item.title&#125;&lt;/h4&gt;&#123;/if&#125;
-                  &#123;#if item.text&#125;&lt;p&gt;&#123;item.text&#125;&lt;/p&gt;&#123;/if&#125;
-                  &#123;#if item.bullets &amp;&amp; item.bullets.length&#125;
-                    &lt;ul&gt;
-                      &#123;#each item.bullets as bullet&#125;&lt;li&gt;&#123;bullet&#125;&lt;/li&gt;&#123;/each&#125;
-                    &lt;/ul&gt;
-                  &#123;/if&#125;
-                  &#123;#if item.links &amp;&amp; item.links.length&#125;
-                    &lt;nav aria-label=&quot;Message links&quot;&gt;
-                      &#123;#each item.links as link&#125;
-                        &lt;a
-                          href=&quot;&#123;link.href || '#'&#125;&quot;
-                          @click=&quot;selectLink(event, link, item, index)&quot;
-                        &gt;&#123;link.label&#125;&lt;/a&gt;
-                      &#123;/each&#125;
-                    &lt;/nav&gt;
-                  &#123;/if&#125;
-                &lt;/div&gt;
-        &lt;/div&gt;
-
-              &#123;#if showMetadata &amp;&amp; (item.timestamp || item.status || item.actionLabel)&#125;
-                &lt;footer class=&quot;wire-next__chat-meta&quot; data-tone=&quot;&#123;item.statusTone || 'muted'&#125;&quot;&gt;
-                  &#123;#if item.statusIcon&#125;&lt;span class=&quot;&#123;item.statusIcon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-                  &#123;#if item.status&#125;&lt;span&gt;&#123;item.status&#125;&lt;/span&gt;&#123;/if&#125;
-                  &#123;#if item.timestamp&#125;&lt;time datetime=&quot;&#123;item.datetime || ''&#125;&quot;&gt;&#123;item.timestamp&#125;&lt;/time&gt;&#123;/if&#125;
-                  &#123;#if item.actionLabel&#125;
-                    &lt;button type=&quot;button&quot; @click=&quot;selectAction(event, item, index)&quot;&gt;
-                      &#123;item.actionLabel&#125;
-                    &lt;/button&gt;
-                  &#123;/if&#125;
-                &lt;/footer&gt;
-              &#123;/if&#125;
-            &lt;/article&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/checkbox.wrn

@@ -1,91 +0,0 @@
-page Checkboxcomponent {
-  seo {
-    title = "Checkbox component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Checkbox</h1><p>Theme-aware, responsive checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>27 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Checkbox&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&quot;</code></td></tr><tr><td><code>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>indeterminate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;vertical&quot;</code></td></tr><tr><td><code>card</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>rightAligned</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>list</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Checkbox&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    value = &quot;on&quot;
-    values = []
-    options = []
-    checked = false
-    indeterminate = false
-    orientation = &quot;vertical&quot;
-    card = false
-    rightAligned = false
-    list = false
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, values: values, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function preventReadonly(sourceEvent) &#123; if (readonly) sourceEvent.preventDefault() &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice-field wire-next--checkbox-field &#123;class&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-orientation=&quot;&#123;orientation&#125;&quot; data-card=&quot;&#123;card&#125;&quot; data-list=&quot;&#123;list&#125;&quot; data-right-aligned=&quot;&#123;rightAligned&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;&#123;#if options.length || cornerHint&#125;&lt;span class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&#123;/if&#125;&lt;/div&gt;
-      &#123;#if options.length&#125;
-        &lt;div class=&quot;wire-next__checkbox-group&quot; role=&quot;group&quot; aria-label=&quot;&#123;hiddenLabel ? label : ''&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-          &#123;#each options as option&#125;
-            &lt;label class=&quot;wire-next__choice wire-next--checkbox&quot; for=&quot;&#123;id || name&#125;-&#123;option.value&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-disabled=&quot;&#123;disabled || option.disabled&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;-&#123;option.value&#125;&quot; type=&quot;checkbox&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;option.value&#125;&quot; checked=&quot;&#123;values.includes(option.value) || option.checked&#125;&quot; disabled=&quot;&#123;disabled || option.disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;emitField('invalid', event)&quot; /&gt;
-        &lt;span class=&quot;wire-next__choice-copy&quot;&gt;
-        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
-        &lt;/label&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;:else&#125;
-        &lt;label class=&quot;wire-next__choice wire-next--checkbox&quot; for=&quot;&#123;id || name&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;checkbox&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-checked=&quot;&#123;indeterminate ? 'mixed' : (checked ? 'true' : 'false')&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;emitField('invalid', event)&quot; /&gt;
-          &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-          &lt;span class=&quot;&#123;hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;/label&gt;
-      &#123;/if&#125;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/clipboard.wrn

@@ -1,49 +0,0 @@
-page Clipboardcomponent {
-  seo {
-    title = "Clipboard component"
-    description = "Theme-aware, responsive clipboard component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Clipboard</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Clipboard</h1><p>Theme-aware, responsive clipboard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Clipboard
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Clipboard&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Clipboard&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clipboard&quot;</code></td></tr><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>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><ul><li><code>copy</code></li><li><code>success</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Clipboard.wrn</code></p><pre data-language="wrn"><code>component Clipboard &#123;
-  props &#123;
-    @event copy = function
-    @event success = function
-    @event error = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Clipboard&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--clipboard wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/collapse.wrn

@@ -1,122 +0,0 @@
-page Collapsecomponent {
-  seo {
-    title = "Collapse component"
-    description = "Theme-aware, responsive collapse component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Collapse</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Collapse</h1><p>Theme-aware, responsive collapse component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Collapse
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  items=&quot;[]&quot;
-  multiple=&quot;false&quot;
-  mode=&quot;panel&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Collapse&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>mode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;panel&quot;</code></td></tr><tr><td><code>initialOpenIndexes</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Collapsible content&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Collapse.wrn</code></p><pre data-language="wrn"><code>component Collapse &#123;
-  props &#123;
-    @event toggle = function
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    items = []
-    multiple = false
-    mode = &quot;panel&quot;
-    initialOpenIndexes = []
-    ariaLabel = &quot;Collapsible content&quot;
-    class = &quot;&quot;
-  &#125;
-
-  state openIndexes = initialOpenIndexes
-
-  functions &#123;
-    function isOpen(index) &#123;
-      return openIndexes.includes(index)
-    &#125;
-
-    function toggleItem(index, item, opening) &#123;
-      if (item.disabled) &#123;
-        return
-      &#125;
-      opening = !isOpen(index)
-      if (opening) &#123;
-        if (multiple) &#123;
-          openIndexes = openIndexes.concat(index)
-        &#125; else &#123;
-          openIndexes = [index]
-        &#125;
-        $emit(&quot;open&quot;, &#123; index: index, item: item &#125;)
-      &#125; else &#123;
-        openIndexes = openIndexes.filter((openIndex) =&gt; openIndex !== index)
-        $emit(&quot;close&quot;, &#123; index: index, item: item &#125;)
-      &#125;
-      $emit(&quot;toggle&quot;, &#123;
-        index: index,
-        item: item,
-        open: opening,
-        openIndexes: openIndexes
-      &#125;)
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--collapse &#123;class&#125;&quot;
-      data-mode=&quot;&#123;mode&#125;&quot;
-      aria-label=&quot;&#123;ariaLabel&#125;&quot;
-    &gt;
-      &#123;#each items as item, index&#125;
-        &lt;article class=&quot;wire-next__collapse-item&quot; data-open=&quot;&#123;isOpen(index)&#125;&quot;&gt;
-          &#123;#if mode === &quot;inline&quot; &amp;&amp; item.preview&#125;
-            &lt;p class=&quot;wire-next__collapse-preview&quot;&gt;&#123;item.preview&#125;&lt;/p&gt;
-          &#123;/if&#125;
-
-          &lt;button
-            class=&quot;wire-next__collapse-trigger&quot;
-            type=&quot;button&quot;
-            aria-expanded=&quot;&#123;isOpen(index) ? 'true' : 'false'&#125;&quot;
-            aria-controls=&quot;&#123;item.id || 'collapse-panel-' + index&#125;&quot;
-            disabled=&quot;&#123;item.disabled&#125;&quot;
-            @click=&quot;toggleItem(index, item)&quot;
-          &gt;
-        &lt;span&gt;&#123;isOpen(index) ? (item.closeLabel || &quot;Read less&quot;) : item.label&#125;&lt;/span&gt;
-        &lt;span class=&quot;icon-[lucide--chevron-down] wire-next__collapse-chevron&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-        &lt;div
-            id=&quot;&#123;item.id || 'collapse-panel-' + index&#125;&quot;
-            class=&quot;wire-next__collapse-panel&quot;
-            data-open=&quot;&#123;isOpen(index)&#125;&quot;
-            aria-hidden=&quot;&#123;isOpen(index) ? 'false' : 'true'&#125;&quot;
-            inert=&quot;&#123;!isOpen(index)&#125;&quot;
-          &gt;
-        &lt;div class=&quot;wire-next__collapse-content&quot;&gt;
-              &#123;#if item.title&#125;&lt;h4&gt;&#123;item.title&#125;&lt;/h4&gt;&#123;/if&#125;
-              &#123;#if item.content&#125;&lt;p&gt;&#123;item.content&#125;&lt;/p&gt;&#123;/if&#125;
-              &#123;#if item.links &amp;&amp; item.links.length&#125;
-                &lt;nav aria-label=&quot;Related links&quot;&gt;
-                  &#123;#each item.links as link&#125;&lt;a href=&quot;&#123;link.href || '#'&#125;&quot;&gt;&#123;link.label&#125;&lt;/a&gt;&#123;/each&#125;
-                &lt;/nav&gt;
-              &#123;/if&#125;
-            &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;/article&gt;
-      &#123;/each&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/color-picker.wrn

@@ -1,69 +0,0 @@
-page ColorPickercomponent {
-  seo {
-    title = "ColorPicker component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>19 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;ColorPicker
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Color&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Color&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#2563eb&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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;normal&quot;</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Color&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    value = &quot;#2563eb&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    variant = &quot;normal&quot;
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function preventReadonly(sourceEvent) &#123; if (readonly) sourceEvent.preventDefault() &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--color-picker &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__color-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;&#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;&lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;color&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; /&gt;
-        &lt;output&gt;&#123;value&#125;&lt;/output&gt;
-        &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/columns.wrn

@@ -1,42 +0,0 @@
-page Columnscomponent {
-  seo {
-    title = "Columns component"
-    description = "Theme-aware, responsive columns component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Columns</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Columns</h1><p>Theme-aware, responsive columns component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Columns
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Columns&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Columns.wrn</code></p><pre data-language="wrn"><code>component Columns &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--columns wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/confetti.wrn

@@ -1,48 +0,0 @@
-page Confetticomponent {
-  seo {
-    title = "Confetti component"
-    description = "Theme-aware, responsive confetti component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Confetti</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Confetti</h1><p>Theme-aware, responsive confetti component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Confetti
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Confetti&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Confetti&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Confetti&quot;</code></td></tr><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>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><ul><li><code>start</code></li><li><code>complete</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Confetti.wrn</code></p><pre data-language="wrn"><code>component Confetti &#123;
-  props &#123;
-    @event start = function
-    @event complete = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Confetti&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--confetti wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/container.wrn

@@ -1,42 +0,0 @@
-page Containercomponent {
-  seo {
-    title = "Container component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">layout component</span><h1>Container</h1><p>Theme-aware, responsive container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Container
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</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;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--container wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/context-menu.wrn

@@ -1,52 +0,0 @@
-page ContextMenucomponent {
-  seo {
-    title = "ContextMenu component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Context Menu&quot;
-  description=&quot;description&quot;
-  open=&quot;false&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Context Menu&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li><li><code>select</code></li></ul></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;
-    @event open = function
-    @event close = function
-    @event select = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Context Menu&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--context-menu wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/copy-markup.wrn

@@ -1,53 +0,0 @@
-page CopyMarkupcomponent {
-  seo {
-    title = "CopyMarkup component"
-    description = "Theme-aware, responsive copy markup component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyMarkup</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>CopyMarkup</h1><p>Theme-aware, responsive copy markup component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;CopyMarkup
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Copy Markup&quot;
-  name=&quot;name&quot;
-  value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CopyMarkup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Copy Markup&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>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>string</code></td><td>Optional</td><td><code>&quot;&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>required</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>copy</code></li><li><code>success</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopyMarkup.wrn</code></p><pre data-language="wrn"><code>component CopyMarkup &#123;
-  props &#123;
-    @event copy = function
-    @event success = function
-    @event error = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Copy Markup&quot;
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--copy-markup &#123;class&#125;&quot;&gt;
-        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;input &#123;...attrs&#125; type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; step=&quot;&#123;step&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/custom-scrollbar.wrn

@@ -1,43 +0,0 @@
-page CustomScrollbarcomponent {
-  seo {
-    title = "CustomScrollbar component"
-    description = "Theme-aware, responsive custom scrollbar component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomScrollbar</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CustomScrollbar</h1><p>Theme-aware, responsive custom scrollbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;CustomScrollbar
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;CustomScrollbar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>scroll</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CustomScrollbar.wrn</code></p><pre data-language="wrn"><code>component CustomScrollbar &#123;
-  props &#123;
-    @event scroll = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--custom-scrollbar wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/data-map.wrn

@@ -1,48 +0,0 @@
-page DataMapcomponent {
-  seo {
-    title = "DataMap component"
-    description = "Theme-aware, responsive data map component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataMap</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataMap</h1><p>Theme-aware, responsive data map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;DataMap
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Data Map&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DataMap&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Data Map&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataMap.wrn</code></p><pre data-language="wrn"><code>component DataMap &#123;
-  props &#123;
-    @event select = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Data Map&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--data-map wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/data-table.wrn

@@ -1,55 +0,0 @@
-page DataTablecomponent {
-  seo {
-    title = "DataTable component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">integrations component</span><h1>DataTable</h1><p>Theme-aware, responsive data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>5 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  caption=&quot;Data Table&quot;
-  columns=&quot;[]&quot;
-  rows=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>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>striped</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><ul><li><code>sort</code></li><li><code>select</code></li><li><code>change</code></li><li><code>rowClick</code></li><li><code>pageChange</code></li></ul></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;
-    @event sort = function
-    @event select = function
-    @event change = function
-    @event rowClick = function
-    @event pageChange = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    caption = &quot;Data Table&quot;
-    columns = []
-    rows = []
-    striped = true
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--table &#123;class&#125;&quot;&gt;
-        &lt;table&gt;
-        &lt;caption&gt;&#123;caption&#125;&lt;/caption&gt;
-        &lt;thead&gt;
-        &lt;tr&gt;&#123;#each columns as column&#125;&lt;th&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;/each&#125;&lt;/tbody&gt;
-        &lt;/table&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/date-picker.wrn

@@ -1,102 +0,0 @@
-page DatePickercomponent {
-  seo {
-    title = "DatePicker component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Date Picker&quot;
-  id=&quot;id&quot;
-  name=&quot;name&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Date Picker&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>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;date&quot;</code></td></tr><tr><td><code>locale</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;en-US&quot;</code></td></tr><tr><td><code>firstDayOfWeek</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>months</code></td><td><code>string</code></td><td>Optional</td><td><code>[&#123; label: &quot;Jan&quot;, value: &quot;01&quot; &#125;, &#123; label: &quot;Feb&quot;, value: &quot;02&quot; &#125;, &#123; label: &quot;Mar&quot;, value: &quot;03&quot; &#125;, &#123; label: &quot;Apr&quot;, value: &quot;04&quot; &#125;, &#123; label: &quot;May&quot;, value: &quot;05&quot; &#125;, &#123; label: &quot;Jun&quot;, value: &quot;06&quot; &#125;, &#123; label: &quot;Jul&quot;, value: &quot;07&quot; &#125;, &#123; label: &quot;Aug&quot;, value: &quot;08&quot; &#125;, &#123; label: &quot;Sep&quot;, value: &quot;09&quot; &#125;, &#123; label: &quot;Oct&quot;, value: &quot;10&quot; &#125;, &#123; label: &quot;Nov&quot;, value: &quot;11&quot; &#125;, &#123; label: &quot;Dec&quot;, value: &quot;12&quot; &#125;]</code></td></tr><tr><td><code>days</code></td><td><code>string</code></td><td>Optional</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td></tr><tr><td><code>years</code></td><td><code>string</code></td><td>Optional</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</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>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&quot;</code></td></tr><tr><td><code>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event open = function
-    @event close = function
-    @event focus = function
-    @event blur = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Date Picker&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;date&quot;
-    locale = &quot;en-US&quot;
-    firstDayOfWeek = 0
-    months = [&#123; label: &quot;Jan&quot;, value: &quot;01&quot; &#125;, &#123; label: &quot;Feb&quot;, value: &quot;02&quot; &#125;, &#123; label: &quot;Mar&quot;, value: &quot;03&quot; &#125;, &#123; label: &quot;Apr&quot;, value: &quot;04&quot; &#125;, &#123; label: &quot;May&quot;, value: &quot;05&quot; &#125;, &#123; label: &quot;Jun&quot;, value: &quot;06&quot; &#125;, &#123; label: &quot;Jul&quot;, value: &quot;07&quot; &#125;, &#123; label: &quot;Aug&quot;, value: &quot;08&quot; &#125;, &#123; label: &quot;Sep&quot;, value: &quot;09&quot; &#125;, &#123; label: &quot;Oct&quot;, value: &quot;10&quot; &#125;, &#123; label: &quot;Nov&quot;, value: &quot;11&quot; &#125;, &#123; label: &quot;Dec&quot;, value: &quot;12&quot; &#125;]
-    days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
-    years = [2024, 2025, 2026, 2027, 2028, 2029, 2030]
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    variant = &quot;normal&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  state currentValue = value
-  state selectedYear = value ? value.split(&quot;-&quot;)[0] : &quot;&quot;
-  state selectedMonth = value ? value.split(&quot;-&quot;)[1] : &quot;&quot;
-  state selectedDay = value ? value.split(&quot;-&quot;)[2] : &quot;&quot;
-  state expanded = false
-  functions &#123;
-    function openCalendar(sourceEvent) &#123; expanded = true; $emit(&quot;open&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function updateDate(part, nextValue, sourceEvent, nextDate, detail) &#123; if (part === &quot;year&quot;) &#123; selectedYear = String(nextValue) &#125; if (part === &quot;month&quot;) &#123; selectedMonth = String(nextValue).padStart(2, &quot;0&quot;) &#125; if (part === &quot;day&quot;) &#123; selectedDay = String(nextValue).padStart(2, &quot;0&quot;) &#125; if (!selectedYear || !selectedMonth || !selectedDay) &#123; return &#125; nextDate = selectedYear + &quot;-&quot; + selectedMonth + &quot;-&quot; + selectedDay; if ((min &amp;&amp; nextDate &lt; min) || (max &amp;&amp; nextDate &gt; max)) &#123; return &#125; currentValue = nextDate; detail = &#123; value: currentValue, year: selectedYear, month: selectedMonth, day: selectedDay, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function finishDate(sourceEvent) &#123; if (!currentValue) &#123; return &#125; expanded = false; $emit(&quot;close&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function selectDay(sourceEvent, root, input, nextDate, trigger, detail) &#123; root = sourceEvent.currentTarget.closest(&quot;.wire-next--date-picker&quot;); input = root.querySelector(&quot;.wire-next__picker-value&quot;); nextDate = input.getAttribute(&quot;value&quot;).slice(0, 5) + root.querySelector(&quot;select&quot;).getAttribute(&quot;value&quot;) + &quot;-&quot; + sourceEvent.currentTarget.dataset.value; currentValue = nextDate; input.setAttribute(&quot;value&quot;, nextDate); trigger = root.querySelector(&quot;.wire-next__date-trigger span&quot;); if (trigger) &#123; trigger.replaceChildren(nextDate) &#125; sourceEvent.currentTarget.setAttribute(&quot;aria-pressed&quot;, &quot;true&quot;); detail = &#123; value: nextDate, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function clearDate(sourceEvent, detail) &#123; if (disabled || readonly) &#123; return &#125; currentValue = &quot;&quot;; detail = &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function handleFocus(sourceEvent) &#123; $emit(&quot;focus&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleBlur(sourceEvent) &#123; $emit(&quot;blur&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleInvalid(sourceEvent) &#123; $emit(&quot;invalid&quot;, &#123; name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--date-picker &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-expanded=&quot;&#123;expanded&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__picker-control&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; class=&quot;wire-next__sr-only wire-next__picker-value&quot; type=&quot;text&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;currentValue&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot; @invalid=&quot;handleInvalid(event)&quot; /&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__date-trigger&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;&#123;expanded&#125;&quot; @click=&quot;openCalendar(event)&quot; @focus=&quot;handleFocus(event)&quot; @blur=&quot;handleBlur(event)&quot;&gt;
-        &lt;span&gt;&#123;currentValue || placeholder || &quot;Select date&quot;&#125;&lt;/span&gt;
-        &lt;i class=&quot;icon-[lucide--calendar-days]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/i&gt;
-        &lt;/button&gt;&#123;#if currentValue &amp;&amp; !readonly &amp;&amp; !disabled&#125;&lt;button type=&quot;button&quot; class=&quot;wire-next__picker-clear&quot; aria-label=&quot;Clear date&quot; @click=&quot;clearDate(event)&quot;&gt;×&lt;/button&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__calendar&quot; role=&quot;dialog&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__date-selectors&quot;&gt;
-        &lt;label&gt;Month&lt;select value=&quot;&#123;selectedMonth&#125;&quot; @change=&quot;updateDate('month', event.currentTarget.value, event)&quot;&gt;&#123;#each months as month&#125;&lt;option value=&quot;&#123;month.value&#125;&quot; selected=&quot;&#123;month.value === selectedMonth&#125;&quot;&gt;&#123;month.label&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;
-        &lt;/label&gt;
-        &lt;label&gt;Year&lt;select value=&quot;&#123;selectedYear&#125;&quot; @change=&quot;updateDate('year', event.currentTarget.value, event)&quot;&gt;&#123;#each years as year&#125;&lt;option value=&quot;&#123;year&#125;&quot; selected=&quot;&#123;String(year) === selectedYear&#125;&quot;&gt;&#123;year&#125;&lt;/option&gt;&#123;/each&#125;&lt;/select&gt;
-        &lt;/label&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;wire-next__calendar-grid&quot;&gt;&#123;#each days as day&#125;&lt;button type=&quot;button&quot; data-value=&quot;&#123;String(day).padStart(2, '0')&#125;&quot; aria-pressed=&quot;&#123;String(day).padStart(2, '0') === selectedDay&#125;&quot; @click=&quot;selectDay(event)&quot;&gt;&#123;day&#125;&lt;/button&gt;&#123;/each&#125;&lt;/div&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__date-done&quot; disabled=&quot;&#123;!currentValue&#125;&quot; @click=&quot;finishDate(event)&quot;&gt;Done&lt;/button&gt;
-        &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/device-frame.wrn

@@ -1,63 +0,0 @@
-page DeviceFramecomponent {
-  seo {
-    title = "DeviceFrame component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DeviceFrame</h1><p>Theme-aware, responsive device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>14 props</span><span>1 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;DeviceFrame
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Device Frame&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DeviceFrame&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Device Frame&quot;</code></td></tr><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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>device</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;phone&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;portrait&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>srcdoc</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>frameTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Device preview&quot;</code></td></tr><tr><td><code>showToolbar</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allow</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>change</code></li><li><code>rotate</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeviceFrame.wrn</code></p><pre data-language="wrn"><code>component DeviceFrame &#123;
-  props &#123;
-    @event change = function
-    @event rotate = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Device Frame&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    device = &quot;phone&quot;
-    orientation = &quot;portrait&quot;
-    src = &quot;&quot;
-    srcdoc = &quot;&quot;
-    frameTitle = &quot;Device preview&quot;
-    showToolbar = true
-    allow = &quot;&quot;
-    class = &quot;&quot;
-  &#125;
-  state currentOrientation = orientation
-  functions &#123;
-    function setDevice(nextDevice, sourceEvent) &#123; $emit(&quot;change&quot;, &#123; device: nextDevice, orientation: currentOrientation, sourceEvent: sourceEvent &#125;) &#125;
-    function rotateFrame(sourceEvent) &#123; currentOrientation = currentOrientation === &quot;portrait&quot; ? &quot;landscape&quot; : &quot;portrait&quot;; $emit(&quot;rotate&quot;, &#123; device: device, orientation: currentOrientation, sourceEvent: sourceEvent &#125;); $emit(&quot;change&quot;, &#123; device: device, orientation: currentOrientation, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;section &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--device-frame wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot; data-device=&quot;&#123;device&#125;&quot; data-orientation=&quot;&#123;currentOrientation&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;div&gt;&#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;&#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;&lt;/div&gt;&#123;#if showToolbar&#125;&lt;div class=&quot;wire-next__device-actions&quot; role=&quot;toolbar&quot; aria-label=&quot;Preview device&quot;&gt;&#123;#each items as item&#125;&lt;button type=&quot;button&quot; aria-pressed=&quot;&#123;item.value === device&#125;&quot; @click=&quot;setDevice(item.value, event)&quot;&gt;&#123;item.label&#125;&lt;/button&gt;&#123;/each&#125;&lt;button type=&quot;button&quot; aria-label=&quot;Rotate preview&quot; @click=&quot;rotateFrame(event)&quot;&gt;↻&lt;/button&gt;
-        &lt;/div&gt;&#123;/if&#125;&lt;/header&gt;
-        &lt;div class=&quot;wire-next__device-shell&quot;&gt;&#123;#if src || srcdoc&#125;&lt;iframe title=&quot;&#123;frameTitle&#125;&quot; src=&quot;&#123;src&#125;&quot; srcdoc=&quot;&#123;srcdoc&#125;&quot; allow=&quot;&#123;allow&#125;&quot;&gt;
-        &lt;/iframe&gt;&#123;:else&#125;&lt;div class=&quot;wire-next__device-content&quot;&gt;
-        &lt;slot /&gt;
-        &lt;/div&gt;&#123;/if&#125;&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/divider.wrn

@@ -1,38 +0,0 @@
-page Dividercomponent {
-  seo {
-    title = "Divider component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">layout component</span><h1>Divider</h1><p>Theme-aware, responsive divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Divider
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;label&quot;
-  orientation=&quot;horizontal&quot;
-/&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><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/divider.wrn</code></p><pre data-language="wrn"><code>component Divider &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--divider wire-next--divider-&#123;orientation&#125; &#123;class&#125;&quot; role=&quot;separator&quot; aria-orientation=&quot;&#123;orientation&#125;&quot;&gt;&#123;#if label&#125;&lt;span&gt;&#123;label&#125;&lt;/span&gt;&#123;/if&#125;&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/drag-and-drop.wrn

@@ -1,52 +0,0 @@
-page DragAndDropcomponent {
-  seo {
-    title = "DragAndDrop component"
-    description = "Theme-aware, responsive drag and drop component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DragAndDrop</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DragAndDrop</h1><p>Theme-aware, responsive drag and drop component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;DragAndDrop
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Drag And Drop&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;DragAndDrop&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Drag And Drop&quot;</code></td></tr><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>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><ul><li><code>dragStart</code></li><li><code>dragEnd</code></li><li><code>dragEnter</code></li><li><code>dragLeave</code></li><li><code>drop</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DragAndDrop.wrn</code></p><pre data-language="wrn"><code>component DragAndDrop &#123;
-  props &#123;
-    @event dragStart = function
-    @event dragEnd = function
-    @event dragEnter = function
-    @event dragLeave = function
-    @event drop = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Drag And Drop&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--drag-and-drop wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/drawer.wrn

@@ -1,51 +0,0 @@
-page Drawercomponent {
-  seo {
-    title = "Drawer component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">overlays component</span><h1>Drawer</h1><p>Theme-aware, responsive drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 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;Drawer
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Drawer&quot;
-  description=&quot;description&quot;
-  open=&quot;false&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Drawer&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</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;
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Drawer&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--drawer wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/dropdown.wrn

@@ -1,53 +0,0 @@
-page Dropdowncomponent {
-  seo {
-    title = "Dropdown component"
-    description = "Theme-aware, responsive dropdown component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Dropdown</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Dropdown</h1><p>Theme-aware, responsive dropdown component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 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;Dropdown
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Dropdown&quot;
-  description=&quot;description&quot;
-  open=&quot;false&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Dropdown&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Dropdown&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Dropdown.wrn</code></p><pre data-language="wrn"><code>component Dropdown &#123;
-  props &#123;
-    @event open = function
-    @event close = function
-    @event select = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Dropdown&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--dropdown wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/file-input.wrn

@@ -1,83 +0,0 @@
-page FileInputcomponent {
-  seo {
-    title = "FileInput component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>21 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;File&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;File&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Choose a file&quot;</code></td></tr><tr><td><code>value</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;icon-[lucide--upload]&quot;</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&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>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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;normal&quot;</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>select</code></li><li><code>clear</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event select = function
-    @event clear = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;File&quot;
-    hiddenLabel = false
-    placeholder = &quot;Choose a file&quot;
-    value = &quot;&quot;
-    icon = &quot;icon-[lucide--upload]&quot;
-    iconPosition = &quot;start&quot;
-    accept = &quot;&quot;
-    multiple = false
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    variant = &quot;normal&quot;
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  state selectedName = &quot;&quot;
-  functions &#123;
-    function handleChange(sourceEvent) &#123;
-      sourceEvent.stopPropagation()
-      selectedName = sourceEvent.currentTarget.files &amp;&amp; sourceEvent.currentTarget.files.length ? sourceEvent.currentTarget.files[0].name : &quot;&quot;
-      $emit(&quot;input&quot;, &#123; files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent &#125;)
-      $emit(&quot;change&quot;, &#123; files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent &#125;)
-      if (selectedName) $emit(&quot;select&quot;, &#123; files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent &#125;)
-      else $emit(&quot;clear&quot;, &#123; name: name, sourceEvent: sourceEvent &#125;)
-    &#125;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function preventReadonly(sourceEvent) &#123; if (readonly) sourceEvent.preventDefault() &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--file-input &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__file-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;&#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;&lt;span&gt;&#123;selectedName || value || placeholder&#125;&lt;/span&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;file&quot; name=&quot;&#123;name&#125;&quot; accept=&quot;&#123;accept&#125;&quot; multiple=&quot;&#123;multiple&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; aria-readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;handleChange(event)&quot; @change=&quot;handleChange(event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;emitField('invalid', event)&quot; /&gt;
-        &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/file-upload-progress.wrn

@@ -1,72 +0,0 @@
-page FileUploadProgresscomponent {
-  seo {
-    title = "FileUploadProgress component"
-    description = "Theme-aware, responsive file 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>FileUploadProgress</h1><p>Theme-aware, responsive file upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;FileUploadProgress
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Progress&quot;
-  value=&quot;50&quot;
-  max=&quot;100&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;FileUploadProgress&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</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>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</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>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</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>fileSize</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>uploadedSize</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;uploading&quot;</code></td></tr><tr><td><code>cancelLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Cancel upload&quot;</code></td></tr><tr><td><code>retryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Retry upload&quot;</code></td></tr><tr><td><code>class</code></td><td><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>cancel</code></li><li><code>retry</code></li><li><code>complete</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUploadProgress.wrn</code></p><pre data-language="wrn"><code>component FileUploadProgress &#123;
-  props &#123;
-    @event cancel = function
-    @event retry = function
-    @event complete = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Progress&quot;
-    value = 50
-    max = 100
-    showValue = true
-    fileName = &quot;&quot;
-    fileSize = &quot;&quot;
-    uploadedSize = &quot;&quot;
-    status = &quot;uploading&quot;
-    cancelLabel = &quot;Cancel upload&quot;
-    retryLabel = &quot;Retry upload&quot;
-    class = &quot;&quot;
-  &#125;
-  state currentValue = value
-  state currentStatus = status
-  functions &#123;
-    function percent() &#123; if (!Number(max)) &#123; return 0 &#125; return Math.max(0, Math.min(100, Math.round(Number(currentValue) / Number(max) * 100))) &#125;
-    function detail(sourceEvent) &#123; return &#123; value: currentValue, max: max, percent: percent(), status: currentStatus, fileName: fileName, sourceEvent: sourceEvent &#125; &#125;
-    function cancelUpload(sourceEvent) &#123; currentStatus = &quot;cancelled&quot;; $emit(&quot;cancel&quot;, detail(sourceEvent)) &#125;
-    function retryUpload(sourceEvent) &#123; currentValue = 0; currentStatus = &quot;uploading&quot;; $emit(&quot;retry&quot;, detail(sourceEvent)) &#125;
-    function completeUpload(sourceEvent) &#123; currentValue = max; currentStatus = &quot;complete&quot;; $emit(&quot;complete&quot;, detail(sourceEvent)) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--file-upload-progress &#123;class&#125;&quot; data-status=&quot;&#123;currentStatus&#125;&quot; aria-live=&quot;polite&quot;&gt;
-        &lt;div class=&quot;wire-next__row&quot;&gt;
-        &lt;span&gt;&#123;#if fileName&#125;&lt;strong&gt;&#123;fileName&#125;&lt;/strong&gt;
-        &lt;small&gt;&#123;#if uploadedSize || fileSize&#125;&#123;uploadedSize&#125;&#123;#if uploadedSize &amp;&amp; fileSize&#125; of &#123;/if&#125;&#123;fileSize&#125;&#123;:else&#125;&#123;label&#125;&#123;/if&#125;&lt;/small&gt;&#123;:else&#125;&lt;strong&gt;&#123;label&#125;&lt;/strong&gt;&#123;/if&#125;&lt;/span&gt;&#123;#if showValue&#125;&lt;strong&gt;&#123;percent()&#125;%&lt;/strong&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;progress value=&quot;&#123;currentValue&#125;&quot; max=&quot;&#123;max&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-        &lt;/progress&gt;
-        &lt;div class=&quot;wire-next__upload-status&quot;&gt;
-        &lt;span class=&quot;wire-next__upload-status-icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;span&gt;&#123;#if currentStatus === &quot;uploading&quot;&#125;Uploading securely…&#123;:else if currentStatus === &quot;complete&quot;&#125;Upload complete&#123;:else if currentStatus === &quot;error&quot;&#125;Upload failed&#123;:else&#125;Upload cancelled&#123;/if&#125;&lt;/span&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;wire-next__upload-actions&quot;&gt;&#123;#if currentStatus === &quot;uploading&quot;&#125;&lt;button type=&quot;button&quot; @click=&quot;cancelUpload(event)&quot;&gt;&#123;cancelLabel&#125;&lt;/button&gt;
-        &lt;button type=&quot;button&quot; @click=&quot;completeUpload(event)&quot;&gt;Complete&lt;/button&gt;&#123;/if&#125;&#123;#if currentStatus === &quot;error&quot; || currentStatus === &quot;cancelled&quot;&#125;&lt;button type=&quot;button&quot; @click=&quot;retryUpload(event)&quot;&gt;&#123;retryLabel&#125;&lt;/button&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/file-upload.wrn

@@ -1,53 +0,0 @@
-page FileUploadcomponent {
-  seo {
-    title = "FileUpload component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">integrations component</span><h1>FileUpload</h1><p>Theme-aware, responsive file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;File Upload&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;File Upload&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>upload</code></li><li><code>progress</code></li><li><code>success</code></li><li><code>error</code></li><li><code>cancel</code></li><li><code>remove</code></li></ul></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;
-    @event select = function
-    @event upload = function
-    @event progress = function
-    @event success = function
-    @event error = function
-    @event cancel = function
-    @event remove = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;File Upload&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--file-upload wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/grid.wrn

@@ -1,42 +0,0 @@
-page Gridcomponent {
-  seo {
-    title = "Grid component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">layout component</span><h1>Grid</h1><p>Theme-aware, responsive grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Grid
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</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;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--grid wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/image.wrn

@@ -1,48 +0,0 @@
-page Imagecomponent {
-  seo {
-    title = "Image component"
-    description = "Theme-aware, responsive image component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Image</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Image</h1><p>Theme-aware, responsive image component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>9 props</span><span>1 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;Image
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  src=&quot;src&quot;
-  alt=&quot;alt&quot;
-  width=&quot;width&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Image&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>width</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>height</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>string</code></td><td>Optional</td><td><code>&quot;lazy&quot;</code></td></tr><tr><td><code>rounded</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><ul><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Image.wrn</code></p><pre data-language="wrn"><code>component Image &#123;
-  props &#123;
-    @event load = function
-    @event error = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    src = &quot;&quot;
-    alt = &quot;&quot;
-    width = &quot;&quot;
-    height = &quot;&quot;
-    loading = &quot;lazy&quot;
-    rounded = false
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;figure class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--image &#123;rounded ? 'wire-next--rounded' : ''&#125; &#123;class&#125;&quot;&gt;
-        &lt;img src=&quot;&#123;src&#125;&quot; alt=&quot;&#123;alt&#125;&quot; width=&quot;&#123;width&#125;&quot; height=&quot;&#123;height&#125;&quot; loading=&quot;&#123;loading&#125;&quot; /&gt;
-        &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/input-group.wrn

@@ -1,80 +0,0 @@
-page InputGroupcomponent {
-  seo {
-    title = "InputGroup component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Input group&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Input group&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><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>startText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>endText</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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&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>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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;normal&quot;</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>submit</code></li><li><code>action</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event submit = function
-    @event action = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Input group&quot;
-    hiddenLabel = false
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;text&quot;
-    startText = &quot;&quot;
-    endText = &quot;&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    actionLabel = &quot;&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    variant = &quot;normal&quot;
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleKeydown(sourceEvent) &#123; if (sourceEvent.key === &quot;Enter&quot;) &#123; sourceEvent.stopPropagation(); $emit(&quot;submit&quot;, &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125; &#125;
-    function handleAction(sourceEvent) &#123; $emit(&quot;action&quot;, &#123; name: name, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--input-group &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__input-group-control&quot;&gt;
-        &#123;#if startText&#125;&lt;span class=&quot;wire-next__input-addon&quot;&gt;&#123;startText&#125;&lt;/span&gt;&#123;/if&#125;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125; wire-next__field-icon&quot; data-position=&quot;&#123;iconPosition&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @keydown=&quot;handleKeydown(event)&quot; /&gt;
-        &#123;#if endText&#125;&lt;span class=&quot;wire-next__input-addon&quot;&gt;&#123;endText&#125;&lt;/span&gt;&#123;/if&#125;
-        &#123;#if actionLabel&#125;&lt;button type=&quot;button&quot; disabled=&quot;&#123;disabled&#125;&quot; @click=&quot;handleAction(event)&quot;&gt;&#123;actionLabel&#125;&lt;/button&gt;&#123;/if&#125;
-      &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/input.wrn

@@ -1,120 +0,0 @@
-page Inputcomponent {
-  seo {
-    title = "Input component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Input</h1><p>Theme-aware, responsive input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>28 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Input&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Input&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>value</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>inputmode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>pattern</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>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li><li><code>keydown</code></li><li><code>keyup</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Input.wrn</code></p><pre data-language="wrn"><code>component Input &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event invalid = function
-    @event keydown = function
-    @event keyup = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Input&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    value = &quot;&quot;
-    type = &quot;text&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    autocomplete = &quot;&quot;
-    inputmode = &quot;&quot;
-    minlength = &quot;&quot;
-    maxlength = &quot;&quot;
-    pattern = &quot;&quot;
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function detail(sourceEvent) &#123;
-      return &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;
-    &#125;
-    function handleInput(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;input&quot;, detail(sourceEvent)) &#125;
-    function handleChange(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;change&quot;, detail(sourceEvent)) &#125;
-    function handleFocus(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;focus&quot;, detail(sourceEvent)) &#125;
-    function handleBlur(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;blur&quot;, detail(sourceEvent)) &#125;
-    function handleInvalid(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;invalid&quot;, &#123; value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;) &#125;
-    function handleKeydown(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;keydown&quot;, &#123; key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleKeyup(sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(&quot;keyup&quot;, &#123; key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--input &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-floating=&quot;&#123;variant === 'floating'&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;
-        &#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;
-      &lt;/div&gt;
-        &lt;div class=&quot;wire-next__field-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125; wire-next__field-icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;input
-          id=&quot;&#123;id || name&#125;&quot;
-          type=&quot;&#123;type&#125;&quot;
-          name=&quot;&#123;name&#125;&quot;
-          value=&quot;&#123;value&#125;&quot;
-          placeholder=&quot;&#123;variant === 'floating' ? ' ' : placeholder&#125;&quot;
-          readonly=&quot;&#123;readonly&#125;&quot;
-          disabled=&quot;&#123;disabled&#125;&quot;
-          required=&quot;&#123;required&#125;&quot;
-          autocomplete=&quot;&#123;autocomplete&#125;&quot;
-          inputmode=&quot;&#123;inputmode&#125;&quot;
-          minlength=&quot;&#123;minlength&#125;&quot;
-          maxlength=&quot;&#123;maxlength&#125;&quot;
-          pattern=&quot;&#123;pattern&#125;&quot;
-          min=&quot;&#123;min&#125;&quot;
-          max=&quot;&#123;max&#125;&quot;
-          step=&quot;&#123;step&#125;&quot;
-          aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;
-          aria-describedby=&quot;&#123;error ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')&#125;&quot;
-          @input=&quot;handleInput(event)&quot;
-          @change=&quot;handleChange(event)&quot;
-          @focus=&quot;handleFocus(event)&quot;
-          @blur=&quot;handleBlur(event)&quot;
-          @invalid=&quot;handleInvalid(event)&quot;
-          @keydown=&quot;handleKeydown(event)&quot;
-          @keyup=&quot;handleKeyup(event)&quot;
-        /&gt;
-        &#123;#if variant === &quot;floating&quot;&#125;&lt;span class=&quot;wire-next__field-floating-label&quot;&gt;&#123;label&#125;&lt;/span&gt;&#123;/if&#125;
-      &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small id=&quot;&#123;(id || name) + '-help'&#125;&quot; class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small id=&quot;&#123;(id || name) + '-error'&#125;&quot; class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/kbd.wrn

@@ -1,38 +0,0 @@
-page Kbdcomponent {
-  seo {
-    title = "Kbd component"
-    description = "Theme-aware, responsive kbd component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Kbd</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Kbd</h1><p>Theme-aware, responsive kbd component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Kbd
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;⌘ K&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Kbd&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;⌘ K&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Kbd.wrn</code></p><pre data-language="wrn"><code>component Kbd &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;⌘ K&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;kbd class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--kbd &#123;class&#125;&quot;&gt;
-        &lt;slot&gt;&#123;label&#125;&lt;/slot&gt;
-        &lt;/kbd&gt;
-    &#125;
-&#125;
-</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
-      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/layout-splitter.wrn

@@ -1,45 +0,0 @@
-page LayoutSplittercomponent {
-  seo {
-    title = "LayoutSplitter component"
-    description = "Theme-aware, responsive layout splitter component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LayoutSplitter</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LayoutSplitter</h1><p>Theme-aware, responsive layout splitter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;LayoutSplitter
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LayoutSplitter&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>resizeStart</code></li><li><code>resize</code></li><li><code>resizeEnd</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LayoutSplitter.wrn</code></p><pre data-language="wrn"><code>component LayoutSplitter &#123;
-  props &#123;
-    @event resizeStart = function
-    @event resize = function
-    @event resizeEnd = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--layout-splitter wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/legend-indicator.wrn

@@ -1,48 +0,0 @@
-page LegendIndicatorcomponent {
-  seo {
-    title = "LegendIndicator component"
-    description = "Theme-aware, responsive legend 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>LegendIndicator</h1><p>Theme-aware, responsive legend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;LegendIndicator
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Legend Indicator&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;LegendIndicator&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Legend Indicator&quot;</code></td></tr><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>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><ul><li><code>toggle</code></li><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegendIndicator.wrn</code></p><pre data-language="wrn"><code>component LegendIndicator &#123;
-  props &#123;
-    @event toggle = function
-    @event select = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Legend Indicator&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--legend-indicator wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/link.wrn

@@ -1,46 +0,0 @@
-page Linkcomponent {
-  seo {
-    title = "Link component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">layout component</span><h1>Link</h1><p>Theme-aware, responsive link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Link&quot;
-  href=&quot;#&quot;
-  target=&quot;target&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>href</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;#&quot;</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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><li><code>focus</code></li><li><code>blur</code></li></ul></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;
-    @event click = function
-    @event focus = function
-    @event blur = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Link&quot;
-    href = &quot;#&quot;
-    target = &quot;&quot;
-    rel = &quot;&quot;
-    external = false
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;a &#123;...attrs&#125; href=&quot;&#123;href&#125;&quot; target=&quot;&#123;target&#125;&quot; rel=&quot;&#123;rel&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--link &#123;class&#125;&quot;&gt;
-        &lt;slot&gt;&#123;label&#125;&lt;/slot&gt;&#123;#if external&#125;&lt;span aria-hidden=&quot;true&quot;&gt;↗&lt;/span&gt;&#123;/if&#125;&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/list-group.wrn

@@ -1,48 +0,0 @@
-page ListGroupcomponent {
-  seo {
-    title = "ListGroup component"
-    description = "Theme-aware, responsive list 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ListGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ListGroup</h1><p>Theme-aware, responsive list group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;ListGroup
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;List Group&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ListGroup&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;List Group&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ListGroup.wrn</code></p><pre data-language="wrn"><code>component ListGroup &#123;
-  props &#123;
-    @event select = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;List Group&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--list-group wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/list.wrn

@@ -1,48 +0,0 @@
-page Listcomponent {
-  seo {
-    title = "List component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>List</h1><p>Theme-aware, responsive list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;List
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;List&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;List&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>click</code></li></ul></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;
-    @event select = function
-    @event click = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;List&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--list wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/map.wrn

@@ -1,50 +0,0 @@
-page Mapcomponent {
-  seo {
-    title = "Map component"
-    description = "Theme-aware, responsive map component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Map</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Map</h1><p>Theme-aware, responsive map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Map
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Map&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Map&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Map&quot;</code></td></tr><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>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><ul><li><code>ready</code></li><li><code>move</code></li><li><code>zoom</code></li><li><code>markerClick</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Map.wrn</code></p><pre data-language="wrn"><code>component Map &#123;
-  props &#123;
-    @event ready = function
-    @event move = function
-    @event zoom = function
-    @event markerClick = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Map&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--map wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/marquee.wrn

@@ -1,48 +0,0 @@
-page Marqueecomponent {
-  seo {
-    title = "Marquee component"
-    description = "Theme-aware, responsive marquee component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Marquee</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Marquee</h1><p>Theme-aware, responsive marquee component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Marquee
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Marquee&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Marquee&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Marquee&quot;</code></td></tr><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>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><ul><li><code>pause</code></li><li><code>resume</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Marquee.wrn</code></p><pre data-language="wrn"><code>component Marquee &#123;
-  props &#123;
-    @event pause = function
-    @event resume = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Marquee&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--marquee wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/mega-menu.wrn

@@ -1,47 +0,0 @@
-page MegaMenucomponent {
-  seo {
-    title = "MegaMenu component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">navigation component</span><h1>MegaMenu</h1><p>Theme-aware, responsive mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Mega Menu&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Mega 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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li><li><code>select</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;
-    @event open = function
-    @event close = function
-    @event select = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Mega Menu&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--mega-menu wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/modal.wrn

@@ -1,53 +0,0 @@
-page Modalcomponent {
-  seo {
-    title = "Modal component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">overlays component</span><h1>Modal</h1><p>Theme-aware, responsive modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 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;Modal
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Modal&quot;
-  description=&quot;description&quot;
-  open=&quot;false&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Modal&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li><li><code>cancel</code></li><li><code>confirm</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;
-    @event open = function
-    @event close = function
-    @event cancel = function
-    @event confirm = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Modal&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--modal wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/nav.wrn

@@ -1,46 +0,0 @@
-page Navcomponent {
-  seo {
-    title = "Nav component"
-    description = "Theme-aware, responsive nav component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Nav</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Nav</h1><p>Theme-aware, responsive nav component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Nav
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Nav&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Nav&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Nav&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Nav.wrn</code></p><pre data-language="wrn"><code>component Nav &#123;
-  props &#123;
-    @event select = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Nav&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--nav wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/navbar.wrn

@@ -1,47 +0,0 @@
-page Navbarcomponent {
-  seo {
-    title = "Navbar component"
-    description = "Theme-aware, responsive navbar component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navbar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Navbar</h1><p>Theme-aware, responsive navbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Navbar
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Navbar&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Navbar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Navbar&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Navbar.wrn</code></p><pre data-language="wrn"><code>component Navbar &#123;
-  props &#123;
-    @event toggle = function
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Navbar&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--navbar wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/pagination.wrn

@@ -1,47 +0,0 @@
-page Paginationcomponent {
-  seo {
-    title = "Pagination component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">navigation component</span><h1>Pagination</h1><p>Theme-aware, responsive pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Pagination&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Pagination&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>change</code></li><li><code>previous</code></li><li><code>next</code></li></ul></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;
-    @event change = function
-    @event previous = function
-    @event next = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Pagination&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--pagination wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/pin-input.wrn

@@ -1,140 +0,0 @@
-page PinInputcomponent {
-  seo {
-    title = "PinInput component"
-    description = "Secure multi-cell PIN and verification-code input with regex and paste support."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">advanced-forms component</span><h1>PinInput</h1><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Verification code&quot;
-  name=&quot;pin&quot;
-  value=&quot;value&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</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><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;pin&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>length</code></td><td><code>number</code></td><td>Optional</td><td><code>4</code></td></tr><tr><td><code>pattern</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;[0-9]&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>inputMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;numeric&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>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;one-time-code&quot;</code></td></tr><tr><td><code>masked</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>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoFocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoSubmit</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>allowPaste</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>clearable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>clearLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Clear code&quot;</code></td></tr><tr><td><code>separator</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>groupSize</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>complete</code></li><li><code>paste</code></li><li><code>clear</code></li><li><code>error</code></li></ul></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;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Verification code&quot;
-    name = &quot;pin&quot;
-    value = &quot;&quot;
-    length = 4
-    pattern = &quot;[0-9]&quot;
-    type = &quot;text&quot;
-    inputMode = &quot;numeric&quot;
-    placeholder = &quot;○&quot;
-    autocomplete = &quot;one-time-code&quot;
-    masked = false
-    disabled = false
-    readonly = false
-    required = false
-    autoFocus = false
-    autoSubmit = false
-    allowPaste = true
-    clearable = true
-    clearLabel = &quot;Clear code&quot;
-    separator = &quot;&quot;
-    groupSize = 0
-    helpText = &quot;&quot;
-    invalid = false
-    validationMessage = &quot;&quot;
-    class = &quot;&quot;
-    @event input = function
-    @event change = function
-    @event complete = function
-    @event paste = function
-    @event clear = function
-    @event error = function
-  &#125;
-
-  functions &#123;
-    function inputIndexes() &#123;
-      return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].slice(
-        0,
-        Math.max(1, Math.min(12, Number(length)))
-      )
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;fieldset
-      &#123;...attrs&#125;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--pin-input &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
-      data-wrn-pin-input
-      data-length=&quot;&#123;length&#125;&quot;
-      data-pattern=&quot;&#123;pattern&#125;&quot;
-      data-allow-paste=&quot;&#123;allowPaste ? 'true' : 'false'&#125;&quot;
-      data-auto-submit=&quot;&#123;autoSubmit ? 'true' : 'false'&#125;&quot;
-      data-value=&quot;&#123;value&#125;&quot;
-      disabled=&quot;&#123;disabled&#125;&quot;
-      aria-describedby=&quot;&#123;validationMessage ? `$&#123;name&#125;-validation` : helpText ? `$&#123;name&#125;-help` : ''&#125;&quot;
-    &gt;
-        &lt;div class=&quot;wire-next__pin-heading&quot;&gt;
-        &lt;legend&gt;&#123;label&#125;&lt;/legend&gt;
-        &lt;button
-          type=&quot;button&quot;
-          class=&quot;wire-next__pin-clear&quot;
-          data-pin-clear
-          aria-label=&quot;&#123;clearLabel&#125;&quot;
-          title=&quot;&#123;clearLabel&#125;&quot;
-          style=&quot;&#123;clearable &amp;&amp; value ? '' : 'display: none'&#125;&quot;
-        &gt;
-        &lt;span class=&quot;icon-[lucide--rotate-ccw]&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;span&gt;&#123;clearLabel&#125;&lt;/span&gt;
-        &lt;/button&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;wire-next__pin-cells&quot; role=&quot;group&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-        &#123;#each inputIndexes() as index&#125;
-          &lt;input
-            data-pin-cell
-            data-pin-index=&quot;&#123;index&#125;&quot;
-            id=&quot;&#123;name&#125;-&#123;index&#125;&quot;
-            type=&quot;&#123;masked ? 'password' : type&#125;&quot;
-            inputmode=&quot;&#123;inputMode&#125;&quot;
-            maxlength=&quot;1&quot;
-            value=&quot;&#123;value[index] || ''&#125;&quot;
-            placeholder=&quot;&#123;placeholder&#125;&quot;
-            autocomplete=&quot;&#123;index === 0 ? autocomplete : 'off'&#125;&quot;
-            aria-label=&quot;&#123;label&#125; digit &#123;index + 1&#125; of &#123;length&#125;&quot;
-            aria-required=&quot;&#123;required ? 'true' : 'false'&#125;&quot;
-            readonly=&quot;&#123;readonly&#125;&quot;
-            disabled=&quot;&#123;disabled&#125;&quot;
-            autofocus=&quot;&#123;autoFocus &amp;&amp; index === 0&#125;&quot;
-          /&gt;
-          &#123;#if separator &amp;&amp; groupSize !== 0 &amp;&amp; (index + 1) % groupSize === 0 &amp;&amp; index + 1 !== length&#125;
-            &lt;span class=&quot;wire-next__pin-separator&quot; aria-hidden=&quot;true&quot;&gt;&#123;separator&#125;&lt;/span&gt;
-          &#123;/if&#125;
-        &#123;/each&#125;
-      &lt;/div&gt;
-        &lt;input
-        type=&quot;hidden&quot;
-        name=&quot;&#123;name&#125;&quot;
-        value=&quot;&#123;value&#125;&quot;
-        required=&quot;&#123;required&#125;&quot;
-        data-pin-value
-      /&gt;
-
-      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small
-        id=&quot;&#123;name&#125;-validation&quot;
-        class=&quot;wire-next__validation&quot;
-        data-error=&quot;&#123;name&#125;&quot;
-      &gt;&#123;validationMessage&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/popover.wrn

@@ -1,51 +0,0 @@
-page Popovercomponent {
-  seo {
-    title = "Popover component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 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;Popover
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Popover&quot;
-  description=&quot;description&quot;
-  open=&quot;false&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Popover&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li></ul></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;
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Popover&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--popover wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/progress.wrn

@@ -1,46 +0,0 @@
-page Progresscomponent {
-  seo {
-    title = "Progress component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Progress</h1><p>Theme-aware, responsive progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Progress
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Progress&quot;
-  value=&quot;50&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</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>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</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>showValue</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><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>component Progress &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Progress&quot;
-    value = 50
-    max = 100
-    showValue = true
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--progress &#123;class&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__row&quot;&gt;
-        &lt;span&gt;&#123;label&#125;&lt;/span&gt;&#123;#if showValue&#125;&lt;strong&gt;&#123;value&#125;%&lt;/strong&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;progress value=&quot;&#123;value&#125;&quot; max=&quot;&#123;max&#125;&quot;&gt;
-        &lt;/progress&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/radio.wrn

@@ -1,87 +0,0 @@
-page Radiocomponent {
-  seo {
-    title = "Radio component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Radio</h1><p>Theme-aware, responsive radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Radio&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Radio&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&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>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;vertical&quot;</code></td></tr><tr><td><code>card</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>rightAligned</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>list</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Radio&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    value = &quot;on&quot;
-    options = []
-    checked = false
-    orientation = &quot;vertical&quot;
-    card = false
-    rightAligned = false
-    list = false
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function preventReadonly(sourceEvent) &#123; if (readonly) sourceEvent.preventDefault() &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice-field wire-next--radio-field &#123;class&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-orientation=&quot;&#123;orientation&#125;&quot; data-card=&quot;&#123;card&#125;&quot; data-list=&quot;&#123;list&#125;&quot; data-right-aligned=&quot;&#123;rightAligned&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;&#123;#if options.length || cornerHint&#125;&lt;span class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&#123;/if&#125;&lt;/div&gt;
-      &#123;#if options.length&#125;
-        &lt;div class=&quot;wire-next__radio-group&quot; role=&quot;radiogroup&quot; aria-label=&quot;&#123;hiddenLabel ? label : ''&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-          &#123;#each options as option&#125;
-            &lt;label class=&quot;wire-next__choice wire-next--radio&quot; for=&quot;&#123;id || name&#125;-&#123;option.value&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-disabled=&quot;&#123;disabled || option.disabled&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;-&#123;option.value&#125;&quot; type=&quot;radio&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;option.value&#125;&quot; checked=&quot;&#123;option.value === value || option.checked&#125;&quot; disabled=&quot;&#123;disabled || option.disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;emitField('invalid', event)&quot; /&gt;
-        &lt;span class=&quot;wire-next__choice-copy&quot;&gt;
-        &lt;strong&gt;&#123;option.label&#125;&lt;/strong&gt;&#123;#if option.description&#125;&lt;small&gt;&#123;option.description&#125;&lt;/small&gt;&#123;/if&#125;&lt;/span&gt;
-        &lt;/label&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;:else&#125;
-        &lt;label class=&quot;wire-next__choice wire-next--radio&quot; for=&quot;&#123;id || name&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;radio&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;emitField('invalid', event)&quot; /&gt;&#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;&lt;span class=&quot;&#123;hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;/label&gt;
-      &#123;/if&#125;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/range-slider.wrn

@@ -1,105 +0,0 @@
-page RangeSlidercomponent {
-  seo {
-    title = "RangeSlider component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>RangeSlider</h1><p>Theme-aware, responsive range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 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;RangeSlider
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Range&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Range&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>min</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>step</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showBounds</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showSteps</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>marks</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Range&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    value = 50
-    min = 0
-    max = 100
-    step = 1
-    showValue = true
-    showBounds = true
-    showSteps = false
-    marks = []
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  state currentValue = value
-  functions &#123;
-    function percent() &#123; if (Number(max) === Number(min)) &#123; return 0 &#125; return (Number(currentValue) - Number(min)) / (Number(max) - Number(min)) * 100 &#125;
-    function setValue(nextValue, sourceEvent, commit, detail, root, slider, input, output, progressValue) &#123; if (readonly || disabled) &#123; return &#125; currentValue = Number(nextValue); root = sourceEvent.currentTarget.closest(&quot;.wire-next--range-slider&quot;); if (root) &#123; slider = root.querySelector(&quot;[role=slider]&quot;); input = root.querySelector(&quot;input[name='&quot; + name + &quot;']&quot;); output = root.querySelector(&quot;output&quot;); progressValue = (currentValue - Number(min)) / (Number(max) - Number(min)) * 100; if (slider) &#123; slider.setAttribute(&quot;aria-valuenow&quot;, String(currentValue)); slider.style.setProperty(&quot;--wire-range-progress&quot;, progressValue + &quot;%&quot;) &#125; if (input) &#123; input.value = String(currentValue) &#125; if (output) &#123; output.textContent = String(currentValue) &#125; &#125; detail = &#123; value: currentValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); if (commit) &#123; $emit(&quot;change&quot;, detail) &#125; &#125;
-    function valueFromPointer(sourceEvent, rect, ratio) &#123; rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); return Number(min) + ratio * (Number(max) - Number(min)) &#125;
-    function beginSlide(sourceEvent, rect, ratio, rawValue) &#123; if (readonly || disabled) &#123; return &#125; sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId); rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function moveSlide(sourceEvent, rect, ratio, rawValue) &#123; if (!sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) &#123; return &#125; rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function endSlide(sourceEvent, rect, ratio, rawValue) &#123; rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); if (sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) &#123; sourceEvent.currentTarget.releasePointerCapture(sourceEvent.pointerId) &#125; $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function selectMark(sourceEvent, root, slider, input, output, nextValue, progressValue, detail) &#123; if (readonly || disabled) &#123; return &#125; root = sourceEvent.currentTarget.closest(&quot;.wire-next--range-slider&quot;); slider = root.querySelector(&quot;.wire-next__custom-slider&quot;); input = root.querySelector(&quot;.wire-next__range-value&quot;); output = root.querySelector(&quot;output&quot;); nextValue = Number(sourceEvent.currentTarget.dataset.value); currentValue = nextValue; progressValue = (nextValue - Number(min)) / (Number(max) - Number(min)) * 100; slider.setAttribute(&quot;aria-valuenow&quot;, String(nextValue)); slider.style.setProperty(&quot;--wire-range-progress&quot;, progressValue + &quot;%&quot;); input.setAttribute(&quot;value&quot;, String(nextValue)); output.replaceChildren(String(nextValue)); detail = &#123; value: nextValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function handleKey(sourceEvent) &#123; if (sourceEvent.key === &quot;ArrowRight&quot;) &#123; sourceEvent.preventDefault(); currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125; if (sourceEvent.key === &quot;ArrowLeft&quot;) &#123; sourceEvent.preventDefault(); currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125; if (sourceEvent.key === &quot;Home&quot;) &#123; sourceEvent.preventDefault(); currentValue = Number(min); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125; if (sourceEvent.key === &quot;End&quot;) &#123; sourceEvent.preventDefault(); currentValue = Number(max); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125; &#125;
-    function emitFocus(nameEvent, sourceEvent) &#123; $emit(nameEvent, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function decreaseValue(sourceEvent) &#123; currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function increaseValue(sourceEvent) &#123; currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit(&quot;input&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;); $emit(&quot;change&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--range-slider &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__range-control&quot; data-variant=&quot;&#123;variant&#125;&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot; data-show-steps=&quot;&#123;showSteps&#125;&quot;&gt;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__range-stepper&quot; aria-label=&quot;Decrease &#123;label&#125;&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; @click=&quot;decreaseValue(event)&quot;&gt;−&lt;/button&gt;
-        &lt;div class=&quot;wire-next__range-track&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; class=&quot;wire-next__sr-only wire-next__range-value&quot; type=&quot;number&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;currentValue&#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; readonly /&gt;
-        &lt;div class=&quot;wire-next__custom-slider&quot; role=&quot;slider&quot; tabindex=&quot;&#123;disabled ? '-1' : '0'&#125;&quot; aria-label=&quot;&#123;hiddenLabel ? label : ''&#125;&quot; aria-valuemin=&quot;&#123;min&#125;&quot; aria-valuemax=&quot;&#123;max&#125;&quot; aria-valuenow=&quot;&#123;currentValue&#125;&quot; aria-disabled=&quot;&#123;disabled&#125;&quot; aria-readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; style=&quot;--wire-range-progress: &#123;percent()&#125;%&quot; @pointerdown=&quot;beginSlide(event)&quot; @pointermove=&quot;moveSlide(event)&quot; @pointerup=&quot;endSlide(event)&quot; @pointercancel=&quot;endSlide(event)&quot; @keydown=&quot;handleKey(event)&quot; @focus=&quot;emitFocus('focus', event)&quot; @blur=&quot;emitFocus('blur', event)&quot;&gt;
-        &lt;span class=&quot;wire-next__slider-fill&quot;&gt;
-        &lt;/span&gt;
-        &lt;span class=&quot;wire-next__slider-thumb&quot;&gt;
-        &lt;/span&gt;
-            &#123;#if marks.length&#125;&lt;span class=&quot;wire-next__slider-marks&quot;&gt;&#123;#each marks as mark&#125;&lt;button type=&quot;button&quot; data-value=&quot;&#123;mark.value&#125;&quot; style=&quot;left: &#123;(Number(mark.value) - Number(min)) / (Number(max) - Number(min)) * 100&#125;%&quot; aria-label=&quot;&#123;mark.label&#125;&quot; @click=&quot;selectMark(event)&quot;&gt;
-        &lt;/button&gt;&#123;/each&#125;&lt;/span&gt;&#123;/if&#125;
-          &lt;/div&gt;
-          &#123;#if showBounds&#125;&lt;div class=&quot;wire-next__range-bounds&quot;&gt;
-        &lt;span&gt;&#123;min&#125;&lt;/span&gt;
-        &lt;span&gt;Step &#123;step&#125;&lt;/span&gt;
-        &lt;span&gt;&#123;max&#125;&lt;/span&gt;
-        &lt;/div&gt;&#123;/if&#125;
-        &lt;/div&gt;
-        &#123;#if showValue&#125;&lt;output for=&quot;&#123;id || name&#125;&quot;&gt;&#123;currentValue&#125;&lt;/output&gt;&#123;/if&#125;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__range-stepper&quot; aria-label=&quot;Increase &#123;label&#125;&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; @click=&quot;increaseValue(event)&quot;&gt;+&lt;/button&gt;
-        &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/rating.wrn

@@ -1,48 +0,0 @@
-page Ratingcomponent {
-  seo {
-    title = "Rating component"
-    description = "Theme-aware, responsive rating component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Rating</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Rating</h1><p>Theme-aware, responsive rating component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Rating
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Rating&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Rating&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Rating&quot;</code></td></tr><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>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><ul><li><code>input</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Rating.wrn</code></p><pre data-language="wrn"><code>component Rating &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Rating&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--rating wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/scrollspy.wrn

@@ -1,45 +0,0 @@
-page Scrollspycomponent {
-  seo {
-    title = "Scrollspy component"
-    description = "Theme-aware, responsive scrollspy component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Scrollspy</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Scrollspy</h1><p>Theme-aware, responsive scrollspy component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Scrollspy
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Scrollspy&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Scrollspy&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Scrollspy&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Scrollspy.wrn</code></p><pre data-language="wrn"><code>component Scrollspy &#123;
-  props &#123;
-    @event change = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Scrollspy&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--scrollspy wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/search-box.wrn

@@ -1,55 +0,0 @@
-page SearchBoxcomponent {
-  seo {
-    title = "SearchBox component"
-    description = "Theme-aware, responsive search box component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>SearchBox</h1><p>Theme-aware, responsive search box component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;SearchBox
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Search Box&quot;
-  name=&quot;name&quot;
-  value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;SearchBox&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Search Box&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;search&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>string</code></td><td>Optional</td><td><code>&quot;&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>required</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>input</code></li><li><code>change</code></li><li><code>search</code></li><li><code>submit</code></li><li><code>clear</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchBox.wrn</code></p><pre data-language="wrn"><code>component SearchBox &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    @event search = function
-    @event submit = function
-    @event clear = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Search Box&quot;
-    name = &quot;&quot;
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    type = &quot;search&quot;
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;label class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--search-box &#123;class&#125;&quot;&gt;
-        &lt;span&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;input &#123;...attrs&#125; type=&quot;&#123;type&#125;&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; placeholder=&quot;&#123;placeholder&#125;&quot; min=&quot;&#123;min&#125;&quot; max=&quot;&#123;max&#125;&quot; step=&quot;&#123;step&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/select.wrn

@@ -1,90 +0,0 @@
-page Selectcomponent {
-  seo {
-    title = "Select component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Select</h1><p>Theme-aware, responsive select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Select&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</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>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Select an option&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>readonly</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>required</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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>open</code></li><li><code>close</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event open = function
-    @event close = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Select&quot;
-    hiddenLabel = false
-    value = &quot;&quot;
-    values = []
-    options = []
-    placeholder = &quot;Select an option&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    multiple = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function selected(option) &#123;
-      if (multiple) return values.includes(option.value)
-      return option.value === value
-    &#125;
-    function emitField(nameEvent, sourceEvent) &#123;
-      sourceEvent.stopPropagation()
-      $emit(nameEvent, &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;)
-    &#125;
-    function handleFocus(sourceEvent) &#123; emitField(&quot;focus&quot;, sourceEvent); $emit(&quot;open&quot;, &#123; name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleBlur(sourceEvent) &#123; emitField(&quot;blur&quot;, sourceEvent); $emit(&quot;close&quot;, &#123; name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleInvalid(sourceEvent) &#123; $emit(&quot;invalid&quot;, &#123; name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--select &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-floating=&quot;&#123;variant === 'floating'&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-readonly=&quot;&#123;readonly&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__field-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125; wire-next__field-icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;select id=&quot;&#123;id || name&#125;&quot; name=&quot;&#123;name&#125;&quot; multiple=&quot;&#123;multiple&#125;&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; required=&quot;&#123;required&#125;&quot; aria-readonly=&quot;&#123;readonly&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;handleFocus(event)&quot; @blur=&quot;handleBlur(event)&quot; @invalid=&quot;handleInvalid(event)&quot;&gt;
-          &#123;#if !multiple&#125;&lt;option value=&quot;&quot; selected=&quot;&#123;value === ''&#125;&quot; disabled=&quot;&#123;required&#125;&quot;&gt;&#123;placeholder&#125;&lt;/option&gt;&#123;/if&#125;
-          &#123;#each options as option&#125;&lt;option value=&quot;&#123;option.value&#125;&quot; selected=&quot;&#123;selected(option)&#125;&quot; disabled=&quot;&#123;option.disabled&#125;&quot;&gt;&#123;option.label&#125;&lt;/option&gt;&#123;/each&#125;
-        &lt;/select&gt;
-        &#123;#if variant === &quot;floating&quot;&#125;&lt;span class=&quot;wire-next__field-floating-label&quot;&gt;&#123;label&#125;&lt;/span&gt;&#123;/if&#125;
-      &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/sidebar.wrn

@@ -1,47 +0,0 @@
-page Sidebarcomponent {
-  seo {
-    title = "Sidebar component"
-    description = "Theme-aware, responsive sidebar component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sidebar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Sidebar</h1><p>Theme-aware, responsive sidebar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;Sidebar
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Sidebar&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;Sidebar&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Sidebar&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Sidebar.wrn</code></p><pre data-language="wrn"><code>component Sidebar &#123;
-  props &#123;
-    @event toggle = function
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Sidebar&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--sidebar wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/skeleton.wrn

@@ -1,42 +0,0 @@
-page Skeletoncomponent {
-  seo {
-    title = "Skeleton component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Skeleton</h1><p>Theme-aware, responsive skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Skeleton
-  color=&quot;primary&quot;
-  label=&quot;Loading&quot;
-  size=&quot;md&quot;
-  lines=&quot;3&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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><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;
-    color = &quot;primary&quot;
-    label = &quot;Loading&quot;
-    size = &quot;md&quot;
-    lines = 3
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--skeleton wire-next--size-&#123;size&#125; &#123;class&#125;&quot; role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#if &quot;Skeleton&quot; === &quot;Skeleton&quot;&#125;&#123;#each Array(lines).fill(0) as line&#125;&lt;span&gt;
-        &lt;/span&gt;&#123;/each&#125;&#123;:else&#125;&lt;i aria-hidden=&quot;true&quot;&gt;
-        &lt;/i&gt;&#123;/if&#125;
-    &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/spinner.wrn

@@ -1,42 +0,0 @@
-page Spinnercomponent {
-  seo {
-    title = "Spinner component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Spinner</h1><p>Theme-aware, responsive spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Spinner
-  color=&quot;primary&quot;
-  label=&quot;Loading&quot;
-  size=&quot;md&quot;
-  lines=&quot;3&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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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><tr><td><code>lines</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>class</code></td><td><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/spinner.wrn</code></p><pre data-language="wrn"><code>component Spinner &#123;
-  props &#123;
-    color = &quot;primary&quot;
-    label = &quot;Loading&quot;
-    size = &quot;md&quot;
-    lines = 3
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--spinner wire-next--size-&#123;size&#125; &#123;class&#125;&quot; role=&quot;status&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#if &quot;Spinner&quot; === &quot;Skeleton&quot;&#125;&#123;#each Array(lines).fill(0) as line&#125;&lt;span&gt;
-        &lt;/span&gt;&#123;/each&#125;&#123;:else&#125;&lt;i aria-hidden=&quot;true&quot;&gt;
-        &lt;/i&gt;&#123;/if&#125;
-    &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/stepper.wrn

@@ -1,48 +0,0 @@
-page Steppercomponent {
-  seo {
-    title = "Stepper component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">navigation component</span><h1>Stepper</h1><p>Theme-aware, responsive stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Stepper
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Stepper&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><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>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>change</code></li><li><code>previous</code></li><li><code>next</code></li><li><code>complete</code></li></ul></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;
-    @event change = function
-    @event previous = function
-    @event next = function
-    @event complete = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Stepper&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--stepper wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/strong-password.wrn

@@ -1,264 +0,0 @@
-page StrongPasswordcomponent {
-  seo {
-    title = "StrongPassword component"
-    description = "Theme-aware, responsive strong password component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StrongPassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>StrongPassword</h1><p>Theme-aware, responsive strong password component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>27 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StrongPassword
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Password&quot;
-  name=&quot;password&quot;
-  value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StrongPassword&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>name</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;Create a strong password&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;new-password&quot;</code></td></tr><tr><td><code>minLength</code></td><td><code>number</code></td><td>Optional</td><td><code>8</code></td></tr><tr><td><code>specialCharactersSet</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;!@#$%^&amp;*()_+-=[]&#123;&#125;|;:,.&lt;&gt;?&quot;</code></td></tr><tr><td><code>requireLowercase</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireUppercase</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireNumber</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>requireSpecialCharacter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showRequirements</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>presentation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;inline&quot;</code></td></tr><tr><td><code>hintText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Use a unique password you do not use elsewhere.&quot;</code></td></tr><tr><td><code>emptyLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Enter a password&quot;</code></td></tr><tr><td><code>weakLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Weak&quot;</code></td></tr><tr><td><code>fairLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Fair&quot;</code></td></tr><tr><td><code>goodLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Good&quot;</code></td></tr><tr><td><code>strongLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Strong&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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>strength</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/StrongPassword.wrn</code></p><pre data-language="wrn"><code>component StrongPassword &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Password&quot;
-    name = &quot;password&quot;
-    value = &quot;&quot;
-    placeholder = &quot;Create a strong password&quot;
-    autocomplete = &quot;new-password&quot;
-    minLength = 8
-    specialCharactersSet = &quot;!@#$%^&amp;*()_+-=[]&#123;&#125;|;:,.&lt;&gt;?&quot;
-    requireLowercase = true
-    requireUppercase = true
-    requireNumber = true
-    requireSpecialCharacter = true
-    showRequirements = true
-    presentation = &quot;inline&quot;
-    hintText = &quot;Use a unique password you do not use elsewhere.&quot;
-    emptyLabel = &quot;Enter a password&quot;
-    weakLabel = &quot;Weak&quot;
-    fairLabel = &quot;Fair&quot;
-    goodLabel = &quot;Good&quot;
-    strongLabel = &quot;Strong&quot;
-    disabled = false
-    readonly = false
-    required = false
-    invalid = false
-    validationMessage = &quot;&quot;
-    class = &quot;&quot;
-    @event input = function
-    @event change = function
-    @event strength = function
-  &#125;
-
-  state password = value
-  state detailsOpen = false
-
-  functions &#123;
-    function hasMinimumLength() &#123;
-      return password.length &gt;= Number(minLength)
-    &#125;
-
-    function hasLowercase() &#123;
-      return password !== password.toUpperCase()
-    &#125;
-
-    function hasUppercase() &#123;
-      return password !== password.toLowerCase()
-    &#125;
-
-    function hasNumber() &#123;
-      return containsCharacterAt(&quot;0123456789&quot;, 0)
-    &#125;
-
-    function hasSpecialCharacter() &#123;
-      return containsCharacterAt(specialCharactersSet, 0)
-    &#125;
-
-    function containsCharacterAt(characters, index) &#123;
-      if (index &gt;= characters.length) &#123;
-        return false
-      &#125;
-      if (password.includes(characters[index])) &#123;
-        return true
-      &#125;
-      return containsCharacterAt(characters, index + 1)
-    &#125;
-
-    function score() &#123;
-      return (hasMinimumLength() ? 1 : 0) + (requireLowercase &amp;&amp; hasLowercase() ? 1 : 0) + (requireUppercase &amp;&amp; hasUppercase() ? 1 : 0) + (requireNumber &amp;&amp; hasNumber() ? 1 : 0) + (requireSpecialCharacter &amp;&amp; hasSpecialCharacter() ? 1 : 0)
-    &#125;
-
-    function maximumScore() &#123;
-      return 1 + (requireLowercase ? 1 : 0) + (requireUppercase ? 1 : 0) + (requireNumber ? 1 : 0) + (requireSpecialCharacter ? 1 : 0)
-    &#125;
-
-    function strengthPercent() &#123;
-      return Math.round(score() / maximumScore() * 100)
-    &#125;
-
-    function strengthLevel() &#123;
-      if (!password) &#123;
-        return &quot;empty&quot;
-      &#125;
-      if (strengthPercent() &lt;= 25) &#123;
-        return &quot;weak&quot;
-      &#125;
-      if (strengthPercent() &lt;= 50) &#123;
-        return &quot;fair&quot;
-      &#125;
-      if (strengthPercent() &lt; 100) &#123;
-        return &quot;good&quot;
-      &#125;
-      return &quot;strong&quot;
-    &#125;
-
-    function strengthLabel() &#123;
-      if (strengthLevel() === &quot;weak&quot;) &#123;
-        return weakLabel
-      &#125;
-      if (strengthLevel() === &quot;fair&quot;) &#123;
-        return fairLabel
-      &#125;
-      if (strengthLevel() === &quot;good&quot;) &#123;
-        return goodLabel
-      &#125;
-      if (strengthLevel() === &quot;strong&quot;) &#123;
-        return strongLabel
-      &#125;
-      return emptyLabel
-    &#125;
-
-  &#125;
-
-  view &#123;
-        &lt;div
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--strong-password wire-next--strong-password-&#123;presentation&#125; &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
-      data-wrn-strong-password
-      data-strength=&quot;&#123;password ? strengthLevel() : 'empty'&#125;&quot;
-      data-score=&quot;&#123;password ? score() : 0&#125;&quot;
-    &gt;
-        &lt;label for=&quot;&#123;name&#125;-strong-password&quot;&gt;&#123;label&#125;&lt;/label&gt;
-        &lt;div class=&quot;wire-next__strong-password-anchor&quot;&gt;
-        &lt;input
-          &#123;...attrs&#125;
-          id=&quot;&#123;name&#125;-strong-password&quot;
-          type=&quot;password&quot;
-          name=&quot;&#123;name&#125;&quot;
-          value=&quot;&#123;password&#125;&quot;
-          placeholder=&quot;&#123;placeholder&#125;&quot;
-          autocomplete=&quot;&#123;autocomplete&#125;&quot;
-          minlength=&quot;&#123;minLength&#125;&quot;
-          disabled=&quot;&#123;disabled&#125;&quot;
-          readonly=&quot;&#123;readonly&#125;&quot;
-          required=&quot;&#123;required&#125;&quot;
-          aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
-          aria-describedby=&quot;&#123;validationMessage ? name + '-validation' : hintText ? name + '-hint' : ''&#125;&quot;
-          @focus=&quot;detailsOpen = true&quot;
-          @blur=&quot;detailsOpen = false&quot;
-          @input=&quot;password = event.target.value; $emit('input', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;); $emit('strength', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;)&quot;
-          @change=&quot;$emit('change', &#123; value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() &#125;)&quot;
-        /&gt;
-
-        &#123;#if presentation === &quot;popover&quot;&#125;
-          &lt;div
-            class=&quot;wire-next__strong-password-popover&quot;
-            data-open=&quot;&#123;detailsOpen ? 'true' : 'false'&#125;&quot;
-            role=&quot;status&quot;
-          &gt;
-        &lt;div class=&quot;wire-next__strong-password-popover-arrow&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;wire-next__strong-password-details&quot;&gt;
-        &lt;div class=&quot;wire-next__strong-password-summary&quot;&gt;
-        &lt;span&gt;Password strength&lt;/span&gt;
-        &lt;strong&gt;&#123;password ? strengthLabel() : emptyLabel&#125;&lt;/strong&gt;
-        &lt;/div&gt;
-        &lt;div
-                class=&quot;wire-next__strong-password-meter&quot;
-                role=&quot;progressbar&quot;
-                aria-label=&quot;Password strength&quot;
-                aria-valuemin=&quot;0&quot;
-                aria-valuemax=&quot;100&quot;
-                aria-valuenow=&quot;&#123;password ? strengthPercent() : 0&#125;&quot;
-              &gt;
-        &lt;span style=&quot;width: &#123;password ? strengthPercent() : 0&#125;%&quot;&gt;
-        &lt;/span&gt;
-        &lt;/div&gt;
-              &#123;#if showRequirements&#125;
-                &lt;ul class=&quot;wire-next__strong-password-requirements&quot;&gt;
-        &lt;li data-met=&quot;&#123;password &amp;&amp; hasMinimumLength() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;At least &#123;minLength&#125; characters
-                  &lt;/li&gt;
-                  &#123;#if requireLowercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasLowercase() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One lowercase letter&lt;/li&gt;&#123;/if&#125;
-                  &#123;#if requireUppercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasUppercase() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One uppercase letter&lt;/li&gt;&#123;/if&#125;
-                  &#123;#if requireNumber&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasNumber() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One number&lt;/li&gt;&#123;/if&#125;
-                  &#123;#if requireSpecialCharacter&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasSpecialCharacter() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One special character: &#123;specialCharactersSet&#125;&lt;/li&gt;&#123;/if&#125;
-                &lt;/ul&gt;
-              &#123;/if&#125;
-              &#123;#if hintText&#125;&lt;small id=&quot;&#123;name&#125;-hint&quot;&gt;&#123;hintText&#125;&lt;/small&gt;&#123;/if&#125;
-            &lt;/div&gt;
-        &lt;/div&gt;
-        &#123;/if&#125;
-      &lt;/div&gt;
-
-      &#123;#if presentation !== &quot;popover&quot;&#125;
-        &lt;div class=&quot;wire-next__strong-password-details&quot;&gt;
-        &lt;div class=&quot;wire-next__strong-password-summary&quot;&gt;
-        &lt;span&gt;Password strength&lt;/span&gt;
-        &lt;strong&gt;&#123;password ? strengthLabel() : emptyLabel&#125;&lt;/strong&gt;
-        &lt;/div&gt;
-        &lt;div
-            class=&quot;wire-next__strong-password-meter&quot;
-            role=&quot;progressbar&quot;
-            aria-label=&quot;Password strength&quot;
-            aria-valuemin=&quot;0&quot;
-            aria-valuemax=&quot;100&quot;
-            aria-valuenow=&quot;&#123;password ? strengthPercent() : 0&#125;&quot;
-          &gt;
-        &lt;span style=&quot;width: &#123;password ? strengthPercent() : 0&#125;%&quot;&gt;
-        &lt;/span&gt;
-        &lt;/div&gt;
-          &#123;#if showRequirements&#125;
-            &lt;ul class=&quot;wire-next__strong-password-requirements&quot;&gt;
-        &lt;li data-met=&quot;&#123;password &amp;&amp; hasMinimumLength() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;At least &#123;minLength&#125; characters&lt;/li&gt;
-              &#123;#if requireLowercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasLowercase() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One lowercase letter&lt;/li&gt;&#123;/if&#125;
-              &#123;#if requireUppercase&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasUppercase() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One uppercase letter&lt;/li&gt;&#123;/if&#125;
-              &#123;#if requireNumber&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasNumber() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One number&lt;/li&gt;&#123;/if&#125;
-              &#123;#if requireSpecialCharacter&#125;&lt;li data-met=&quot;&#123;password &amp;&amp; hasSpecialCharacter() ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;One special character: &#123;specialCharactersSet&#125;&lt;/li&gt;&#123;/if&#125;
-            &lt;/ul&gt;
-          &#123;/if&#125;
-          &#123;#if hintText&#125;&lt;small id=&quot;&#123;name&#125;-hint&quot;&gt;&#123;hintText&#125;&lt;/small&gt;&#123;/if&#125;
-        &lt;/div&gt;
-      &#123;/if&#125;
-
-      &lt;small id=&quot;&#123;name&#125;-validation&quot; class=&quot;wire-next__validation&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;validationMessage&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/styled-icon.wrn

@@ -1,46 +0,0 @@
-page StyledIconcomponent {
-  seo {
-    title = "StyledIcon component"
-    description = "Theme-aware, responsive styled 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StyledIcon</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>StyledIcon</h1><p>Theme-aware, responsive styled icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;StyledIcon
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Styled Icon&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;StyledIcon&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Styled Icon&quot;</code></td></tr><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>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/StyledIcon.wrn</code></p><pre data-language="wrn"><code>component StyledIcon &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Styled Icon&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--styled-icon wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/switch.wrn

@@ -1,70 +0,0 @@
-page Switchcomponent {
-  seo {
-    title = "Switch component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Switch</h1><p>Theme-aware, responsive switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>20 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;Switch
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Switch&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;on&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>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Switch&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    value = &quot;on&quot;
-    checked = false
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123; sourceEvent.stopPropagation(); $emit(nameEvent, &#123; checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function preventReadonly(sourceEvent) &#123; if (readonly) sourceEvent.preventDefault() &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--choice-field &#123;class&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;label class=&quot;wire-next__choice wire-next--switch&quot; for=&quot;&#123;id || name&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; type=&quot;checkbox&quot; role=&quot;switch&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;value&#125;&quot; checked=&quot;&#123;checked&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; aria-checked=&quot;&#123;checked ? 'true' : 'false'&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; @click=&quot;preventReadonly(event)&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; /&gt;&#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;&lt;span class=&quot;&#123;hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''&#125;&quot;&gt;&#123;label&#125;&lt;/span&gt;
-        &lt;/label&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;&lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/table.wrn

@@ -1,53 +0,0 @@
-page Tablecomponent {
-  seo {
-    title = "Table component"
-    description = "Theme-aware, 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">tables component</span><h1>Table</h1><p>Theme-aware, responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  caption=&quot;Table&quot;
-  columns=&quot;[]&quot;
-  rows=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;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>striped</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><ul><li><code>sort</code></li><li><code>select</code></li><li><code>rowClick</code></li></ul></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;
-    @event sort = function
-    @event select = function
-    @event rowClick = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    caption = &quot;Table&quot;
-    columns = []
-    rows = []
-    striped = true
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--table &#123;class&#125;&quot;&gt;
-        &lt;table&gt;
-        &lt;caption&gt;&#123;caption&#125;&lt;/caption&gt;
-        &lt;thead&gt;
-        &lt;tr&gt;&#123;#each columns as column&#125;&lt;th&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;/each&#125;&lt;/tbody&gt;
-        &lt;/table&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/tabs.wrn

@@ -1,46 +0,0 @@
-page Tabscomponent {
-  seo {
-    title = "Tabs component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">navigation component</span><h1>Tabs</h1><p>Theme-aware, responsive tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Tabs
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Tabs&quot;
-  items=&quot;[]&quot;
-  active=&quot;active&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tabs&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>active</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;horizontal&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>change</code></li><li><code>select</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;
-    @event change = function
-    @event select = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Tabs&quot;
-    items = []
-    active = &quot;&quot;
-    orientation = &quot;horizontal&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;nav class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tabs wire-next--&#123;orientation&#125; &#123;class&#125;&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-      &#123;#each items as item&#125;&lt;a href=&quot;&#123;item.href&#125;&quot; aria-current=&quot;&#123;item.value === active ? 'page' : ''&#125;&quot;&gt;&#123;item.label&#125;&lt;/a&gt;&#123;/each&#125;
-      &lt;slot /&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/textarea.wrn

@@ -1,82 +0,0 @@
-page Textareacomponent {
-  seo {
-    title = "Textarea component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">forms component</span><h1>Textarea</h1><p>Theme-aware, responsive textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Textarea&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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;Textarea&quot;</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>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;normal&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>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;start&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>resize</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;vertical&quot;</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Textarea&quot;
-    hiddenLabel = false
-    placeholder = &quot;&quot;
-    value = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;&quot;
-    iconPosition = &quot;start&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    rows = 5
-    resize = &quot;vertical&quot;
-    readonly = false
-    disabled = false
-    required = false
-    minlength = &quot;&quot;
-    maxlength = &quot;&quot;
-    class = &quot;&quot;
-  &#125;
-  functions &#123;
-    function emitField(nameEvent, sourceEvent) &#123;
-      sourceEvent.stopPropagation()
-      $emit(nameEvent, &#123; value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent &#125;)
-    &#125;
-    function handleInvalid(sourceEvent) &#123;
-      $emit(&quot;invalid&quot;, &#123; value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;)
-    &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--textarea &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-floating=&quot;&#123;variant === 'floating'&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__field-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125; wire-next__field-icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;textarea id=&quot;&#123;id || name&#125;&quot; name=&quot;&#123;name&#125;&quot; placeholder=&quot;&#123;variant === 'floating' ? ' ' : placeholder&#125;&quot; rows=&quot;&#123;rows&#125;&quot; style=&quot;resize: &#123;resize&#125;&quot; readonly=&quot;&#123;readonly&#125;&quot; disabled=&quot;&#123;disabled&#125;&quot; required=&quot;&#123;required&#125;&quot; minlength=&quot;&#123;minlength&#125;&quot; maxlength=&quot;&#123;maxlength&#125;&quot; aria-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; aria-describedby=&quot;&#123;error ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')&#125;&quot; @input=&quot;emitField('input', event)&quot; @change=&quot;emitField('change', event)&quot; @focus=&quot;emitField('focus', event)&quot; @blur=&quot;emitField('blur', event)&quot; @invalid=&quot;handleInvalid(event)&quot;&gt;&#123;value&#125;&lt;/textarea&gt;
-        &#123;#if variant === &quot;floating&quot;&#125;&lt;span class=&quot;wire-next__field-floating-label&quot;&gt;&#123;label&#125;&lt;/span&gt;&#123;/if&#125;
-      &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small id=&quot;&#123;(id || name) + '-help'&#125;&quot; class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small id=&quot;&#123;(id || name) + '-error'&#125;&quot; class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/time-picker.wrn

@@ -1,106 +0,0 @@
-page TimePickercomponent {
-  seo {
-    title = "TimePicker component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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>Theme-aware, responsive time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>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
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  id=&quot;id&quot;
-  name=&quot;name&quot;
-  label=&quot;Time&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><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>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;normal&quot;</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;icon-[lucide--clock-3]&quot;</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;end&quot;</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>cornerHint</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>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>format</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;24&quot;</code></td></tr><tr><td><code>minuteStep</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>hours</code></td><td><code>string</code></td><td>Optional</td><td><code>[&quot;00&quot;, &quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;, &quot;07&quot;, &quot;08&quot;, &quot;09&quot;, &quot;10&quot;, &quot;11&quot;, &quot;12&quot;, &quot;13&quot;, &quot;14&quot;, &quot;15&quot;, &quot;16&quot;, &quot;17&quot;, &quot;18&quot;, &quot;19&quot;, &quot;20&quot;, &quot;21&quot;, &quot;22&quot;, &quot;23&quot;]</code></td></tr><tr><td><code>minutes</code></td><td><code>string</code></td><td>Optional</td><td><code>[&quot;00&quot;, &quot;05&quot;, &quot;10&quot;, &quot;15&quot;, &quot;20&quot;, &quot;25&quot;, &quot;30&quot;, &quot;35&quot;, &quot;40&quot;, &quot;45&quot;, &quot;50&quot;, &quot;55&quot;]</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>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>open</code></li><li><code>close</code></li><li><code>invalid</code></li></ul></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;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    @event open = function
-    @event close = function
-    @event invalid = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    id = &quot;&quot;
-    name = &quot;&quot;
-    label = &quot;Time&quot;
-    hiddenLabel = false
-    value = &quot;&quot;
-    placeholder = &quot;&quot;
-    variant = &quot;normal&quot;
-    icon = &quot;icon-[lucide--clock-3]&quot;
-    iconPosition = &quot;end&quot;
-    helperText = &quot;&quot;
-    cornerHint = &quot;&quot;
-    error = &quot;&quot;
-    inline = false
-    min = &quot;&quot;
-    max = &quot;&quot;
-    step = &quot;&quot;
-    format = &quot;24&quot;
-    minuteStep = 5
-    hours = [&quot;00&quot;, &quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;, &quot;07&quot;, &quot;08&quot;, &quot;09&quot;, &quot;10&quot;, &quot;11&quot;, &quot;12&quot;, &quot;13&quot;, &quot;14&quot;, &quot;15&quot;, &quot;16&quot;, &quot;17&quot;, &quot;18&quot;, &quot;19&quot;, &quot;20&quot;, &quot;21&quot;, &quot;22&quot;, &quot;23&quot;]
-    minutes = [&quot;00&quot;, &quot;05&quot;, &quot;10&quot;, &quot;15&quot;, &quot;20&quot;, &quot;25&quot;, &quot;30&quot;, &quot;35&quot;, &quot;40&quot;, &quot;45&quot;, &quot;50&quot;, &quot;55&quot;]
-    readonly = false
-    disabled = false
-    required = false
-    class = &quot;&quot;
-  &#125;
-  state currentValue = value
-  state selectedHour = value ? value.split(&quot;:&quot;)[0] : &quot;00&quot;
-  state selectedMinute = value ? value.split(&quot;:&quot;)[1] : &quot;00&quot;
-  state expanded = false
-  functions &#123;
-    function commit(part, nextValue, sourceEvent, next, detail) &#123; if (part === &quot;hour&quot;) &#123; selectedHour = String(nextValue).padStart(2, &quot;0&quot;) &#125; if (part === &quot;minute&quot;) &#123; selectedMinute = String(nextValue).padStart(2, &quot;0&quot;) &#125; next = selectedHour + &quot;:&quot; + selectedMinute; if ((min &amp;&amp; next &lt; min) || (max &amp;&amp; next &gt; max)) &#123; return &#125; currentValue = next; detail = &#123; value: currentValue, hour: selectedHour, minute: selectedMinute, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail) &#123; root = sourceEvent.currentTarget.closest(&quot;.wire-next--time-picker&quot;); input = root.querySelector(&quot;.wire-next__time-value&quot;); parts = String(input.value || value || &quot;00:00&quot;).split(&quot;:&quot;); hourValue = sourceEvent.currentTarget.dataset.part === &quot;hour&quot; ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === &quot;minute&quot; ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + &quot;:&quot; + minuteValue; if ((min &amp;&amp; next &lt; min) || (max &amp;&amp; next &gt; max)) &#123; return &#125; currentValue = next; input.setAttribute(&quot;value&quot;, next); trigger = root.querySelector(&quot;.wire-next__time-trigger span&quot;); if (trigger) &#123; trigger.replaceChildren(next) &#125; sourceEvent.currentTarget.setAttribute(&quot;aria-pressed&quot;, &quot;true&quot;); detail = &#123; value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent &#125;; $emit(&quot;input&quot;, detail); $emit(&quot;change&quot;, detail) &#125;
-    function openPicker(sourceEvent) &#123; expanded = true; $emit(&quot;open&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function closePicker(sourceEvent) &#123; expanded = false; $emit(&quot;close&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleFocus(sourceEvent) &#123; $emit(&quot;focus&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleBlur(sourceEvent) &#123; $emit(&quot;blur&quot;, &#123; value: currentValue, name: name, sourceEvent: sourceEvent &#125;) &#125;
-    function handleInvalid(sourceEvent) &#123; $emit(&quot;invalid&quot;, &#123; name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent &#125;) &#125;
-  &#125;
-  view &#123;
-        &lt;div &#123;...attrs&#125; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--field wire-next--time-picker &#123;class&#125;&quot; data-variant=&quot;&#123;variant&#125;&quot; data-inline=&quot;&#123;inline&#125;&quot; data-floating=&quot;&#123;variant === 'floating'&#125;&quot; data-invalid=&quot;&#123;error ? 'true' : 'false'&#125;&quot; data-expanded=&quot;&#123;expanded&#125;&quot;&gt;
-        &lt;div class=&quot;wire-next__field-heading&quot;&gt;
-        &lt;label class=&quot;&#123;hiddenLabel ? 'wire-next__sr-only' : ''&#125;&quot; for=&quot;&#123;id || name&#125;&quot;&gt;&#123;label&#125;&lt;/label&gt;&#123;#if cornerHint&#125;&lt;span class=&quot;wire-next__field-hint&quot;&gt;&#123;cornerHint&#125;&lt;/span&gt;&#123;/if&#125;&lt;/div&gt;
-        &lt;div class=&quot;wire-next__field-control&quot; data-icon-position=&quot;&#123;iconPosition&#125;&quot;&gt;
-        &#123;#if icon&#125;&lt;span class=&quot;&#123;icon&#125; wire-next__field-icon&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;&#123;/if&#125;
-        &lt;input id=&quot;&#123;id || name&#125;&quot; class=&quot;wire-next__sr-only wire-next__time-value&quot; type=&quot;text&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;currentValue&#125;&quot; required=&quot;&#123;required&#125;&quot; readonly aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot; @invalid=&quot;handleInvalid(event)&quot; /&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__time-trigger&quot; disabled=&quot;&#123;disabled || readonly&#125;&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;&#123;expanded&#125;&quot; @click=&quot;openPicker(event)&quot; @focus=&quot;handleFocus(event)&quot; @blur=&quot;handleBlur(event)&quot;&gt;
-        &lt;span&gt;&#123;currentValue || placeholder || &quot;Select time&quot;&#125;&lt;/span&gt;
-        &lt;i class=&quot;&#123;icon&#125;&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/i&gt;
-        &lt;/button&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;wire-next__time-panel&quot; role=&quot;dialog&quot; aria-label=&quot;&#123;label&#125;&quot;&gt;
-        &lt;div&gt;
-        &lt;strong&gt;Hour&lt;/strong&gt;
-        &lt;div class=&quot;wire-next__time-options&quot;&gt;&#123;#each hours as hour&#125;&lt;button type=&quot;button&quot; data-part=&quot;hour&quot; data-value=&quot;&#123;hour&#125;&quot; aria-pressed=&quot;&#123;String(hour) === selectedHour&#125;&quot; @click=&quot;selectTimePart(event)&quot;&gt;&#123;hour&#125;&lt;/button&gt;&#123;/each&#125;&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;div&gt;
-        &lt;strong&gt;Minute&lt;/strong&gt;
-        &lt;div class=&quot;wire-next__time-options&quot;&gt;&#123;#each minutes as minute&#125;&lt;button type=&quot;button&quot; data-part=&quot;minute&quot; data-value=&quot;&#123;minute&#125;&quot; aria-pressed=&quot;&#123;String(minute) === selectedMinute&#125;&quot; @click=&quot;selectTimePart(event)&quot;&gt;&#123;minute&#125;&lt;/button&gt;&#123;/each&#125;&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;button type=&quot;button&quot; class=&quot;wire-next__time-done&quot; @click=&quot;closePicker(event)&quot;&gt;Done&lt;/button&gt;
-        &lt;/div&gt;
-      &#123;#if helperText&#125;&lt;small class=&quot;wire-next__field-help&quot;&gt;&#123;helperText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small class=&quot;wire-next__field-error&quot; data-error=&quot;&#123;name&#125;&quot;&gt;&#123;error&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/timeline.wrn

@@ -1,47 +0,0 @@
-page Timelinecomponent {
-  seo {
-    title = "Timeline component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Timeline</h1><p>Theme-aware, responsive timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Timeline
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Timeline&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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><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>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><ul><li><code>select</code></li></ul></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;
-    @event select = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Timeline&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--timeline wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/toast-notifications.wrn

@@ -1,50 +0,0 @@
-page ToastNotificationscomponent {
-  seo {
-    title = "ToastNotifications component"
-    description = "Theme-aware, responsive toast notifications component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastNotifications</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>ToastNotifications</h1><p>Theme-aware, responsive toast notifications component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;ToastNotifications
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Toast Notifications&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToastNotifications&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toast Notifications&quot;</code></td></tr><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>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><ul><li><code>add</code></li><li><code>dismiss</code></li><li><code>clear</code></li><li><code>action</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastNotifications.wrn</code></p><pre data-language="wrn"><code>component ToastNotifications &#123;
-  props &#123;
-    @event add = function
-    @event dismiss = function
-    @event clear = function
-    @event action = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Toast Notifications&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toast-notifications wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/toast.wrn

@@ -1,48 +0,0 @@
-page Toastcomponent {
-  seo {
-    title = "Toast component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">base component</span><h1>Toast</h1><p>Theme-aware, responsive toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;Toast
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Toast&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Toast&quot;</code></td></tr><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>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><ul><li><code>dismiss</code></li><li><code>action</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;
-    @event dismiss = function
-    @event action = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Toast&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toast wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/toggle-count.wrn

@@ -1,264 +0,0 @@
-page ToggleCountcomponent {
-  seo {
-    title = "ToggleCount component"
-    description = "Theme-aware, responsive toggle count component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleCount</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ToggleCount</h1><p>Theme-aware, responsive toggle count component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 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;ToggleCount
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  variant=&quot;segmented&quot;
-  name=&quot;billing-cycle&quot;
-  value=&quot;monthly&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;ToggleCount&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;segmented&quot;</code></td></tr><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;billing-cycle&quot;</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;monthly&quot;</code></td></tr><tr><td><code>firstValue</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;monthly&quot;</code></td></tr><tr><td><code>firstLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Monthly&quot;</code></td></tr><tr><td><code>secondValue</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;annual&quot;</code></td></tr><tr><td><code>secondLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Annual&quot;</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Billing frequency&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>currency</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;$&quot;</code></td></tr><tr><td><code>suffix</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>firstValueKey</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;monthly&quot;</code></td></tr><tr><td><code>secondValueKey</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;annual&quot;</code></td></tr><tr><td><code>emptyValue</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;end&quot;</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>animate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>animationDuration</code></td><td><code>number</code></td><td>Optional</td><td><code>450</code></td></tr><tr><td><code>animationSteps</code></td><td><code>number</code></td><td>Optional</td><td><code>18</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>toggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToggleCount.wrn</code></p><pre data-language="wrn"><code>component ToggleCount &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    variant = &quot;segmented&quot;
-    class = &quot;&quot;
-
-    name = &quot;billing-cycle&quot;
-    value = &quot;monthly&quot;
-    firstValue = &quot;monthly&quot;
-    firstLabel = &quot;Monthly&quot;
-    secondValue = &quot;annual&quot;
-    secondLabel = &quot;Annual&quot;
-    ariaLabel = &quot;Billing frequency&quot;
-
-    items = []
-    currency = &quot;$&quot;
-    suffix = &quot;&quot;
-    firstValueKey = &quot;monthly&quot;
-    secondValueKey = &quot;annual&quot;
-    emptyValue = &quot;—&quot;
-
-    align = &quot;end&quot;
-    fullWidth = true
-    disabled = false
-    animate = true
-    animationDuration = 450
-    animationSteps = 18
-
-    @event change = function
-    @event toggle = function
-  &#125;
-
-  state selectedValue = value
-
-  functions &#123;
-    function isFirstSelected() &#123;
-      return selectedValue === firstValue
-    &#125;
-
-    function isSecondSelected() &#123;
-      return selectedValue === secondValue
-    &#125;
-
-    function displayValue(item) &#123;
-      if (isSecondSelected()) &#123;
-        return item[secondValueKey] !== undefined
-          ? item[secondValueKey]
-          : emptyValue
-      &#125;
-
-      return item[firstValueKey] !== undefined
-        ? item[firstValueKey]
-        : emptyValue
-    &#125;
-
-    function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) &#123;
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-toggle-count]&quot;)
-
-      if (!root) &#123;
-        return
-      &#125;
-
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(&quot;change&quot;, true, false, &#123;
-        component: &quot;ToggleCount&quot;,
-        name: name,
-        value: selectedValue,
-        previousValue: previousValue,
-        firstValue: firstValue,
-        secondValue: secondValue
-      &#125;)
-      root.dispatchEvent(customEvent)
-
-      customEvent = document.createEvent(&quot;CustomEvent&quot;)
-      customEvent.initCustomEvent(&quot;toggle&quot;, true, false, &#123;
-        component: &quot;ToggleCount&quot;,
-        name: name,
-        value: selectedValue,
-        previousValue: previousValue,
-        firstValue: firstValue,
-        secondValue: secondValue
-      &#125;)
-      root.dispatchEvent(customEvent)
-    &#125;
-
-    function selectValue(sourceEvent, nextValue, previousValue) &#123;
-      if (disabled || selectedValue === nextValue) &#123;
-        return
-      &#125;
-
-      previousValue = selectedValue
-      selectedValue = nextValue
-
-      if (
-        animate &amp;&amp;
-        !window.matchMedia(&quot;(prefers-reduced-motion: reduce)&quot;).matches
-      ) &#123;
-        animateDisplayedValues(sourceEvent, previousValue)
-      &#125;
-
-      dispatchToggleEvent(sourceEvent, previousValue)
-    &#125;
-
-    function animateDisplayedValues(sourceEvent, previousValue, root, nodes) &#123;
-      root = sourceEvent.currentTarget.closest(&quot;[data-wrn-toggle-count]&quot;)
-
-      if (!root) &#123;
-        return
-      &#125;
-
-      nodes = root.querySelectorAll(&quot;[data-toggle-count-value]&quot;)
-      animateValueAt(nodes, 0, previousValue)
-    &#125;
-
-    function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) &#123;
-      if (index &gt;= nodes.length) &#123;
-        return
-      &#125;
-
-      node = nodes[index]
-      fromValue = Number(
-        previousValue === secondValue
-          ? node.getAttribute(&quot;data-second-value&quot;)
-          : node.getAttribute(&quot;data-first-value&quot;)
-      )
-      toValue = Number(
-        selectedValue === secondValue
-          ? node.getAttribute(&quot;data-second-value&quot;)
-          : node.getAttribute(&quot;data-first-value&quot;)
-      )
-
-      if (!Number.isNaN(fromValue) &amp;&amp; !Number.isNaN(toValue)) &#123;
-        animateValueFrame(node, fromValue, toValue, 0)
-      &#125;
-
-      animateValueAt(nodes, index + 1, previousValue)
-    &#125;
-
-    function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) &#123;
-      totalFrames = Math.max(1, Number(animationSteps) || 1)
-
-      if (frame &gt;= totalFrames) &#123;
-        node.replaceChildren(String(toValue))
-        return
-      &#125;
-
-      nextValue = Math.round(
-        fromValue +
-        (toValue - fromValue) * (frame / totalFrames)
-      )
-      node.replaceChildren(String(nextValue))
-
-      setTimeout(
-        animateValueFrame,
-        Math.max(1, Number(animationDuration) / totalFrames),
-        node,
-        fromValue,
-        toValue,
-        frame + 1
-      )
-    &#125;
-
-    function toggleValue(sourceEvent) &#123;
-      selectValue(
-        sourceEvent,
-        isFirstSelected() ? secondValue : firstValue
-      )
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;section
-      &#123;...attrs&#125;
-      data-wrn-toggle-count
-      data-variant=&quot;&#123;variant&#125;&quot;
-      data-value=&quot;&#123;selectedValue&#125;&quot;
-      data-disabled=&quot;&#123;disabled ? 'true' : 'false'&#125;&quot;
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toggle-count wire-next--toggle-count-&#123;variant&#125; &#123;fullWidth ? 'wire-next--toggle-count-full' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
-    &gt;
-        &lt;input type=&quot;hidden&quot; name=&quot;&#123;name&#125;&quot; value=&quot;&#123;selectedValue&#125;&quot; /&gt;
-        &lt;div class=&quot;wire-next__toggle-count-control wire-next__toggle-count-control--&#123;align&#125;&quot;&gt;
-        &#123;#if variant === &quot;switch&quot;&#125;
-          &lt;span data-selected=&quot;&#123;isFirstSelected() ? 'true' : 'false'&#125;&quot;&gt;&#123;firstLabel&#125;&lt;/span&gt;
-        &lt;button
-            type=&quot;button&quot;
-            role=&quot;switch&quot;
-            aria-label=&quot;&#123;ariaLabel&#125;&quot;
-            aria-checked=&quot;&#123;isSecondSelected() ? 'true' : 'false'&#125;&quot;
-            disabled=&quot;&#123;disabled&#125;&quot;
-            @click=&quot;toggleValue(event)&quot;
-            class=&quot;wire-next__toggle-count-switch&quot;
-          &gt;
-        &lt;span aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-        &lt;span data-selected=&quot;&#123;isSecondSelected() ? 'true' : 'false'&#125;&quot;&gt;&#123;secondLabel&#125;&lt;/span&gt;
-        &#123;:else&#125;
-          &lt;div class=&quot;wire-next__toggle-count-segmented&quot; role=&quot;group&quot; aria-label=&quot;&#123;ariaLabel&#125;&quot;&gt;
-        &lt;button
-              type=&quot;button&quot;
-              aria-pressed=&quot;&#123;isFirstSelected() ? 'true' : 'false'&#125;&quot;
-              disabled=&quot;&#123;disabled&#125;&quot;
-              @click=&quot;selectValue(event, firstValue)&quot;
-            &gt;&#123;firstLabel&#125;&lt;/button&gt;
-        &lt;button
-              type=&quot;button&quot;
-              aria-pressed=&quot;&#123;isSecondSelected() ? 'true' : 'false'&#125;&quot;
-              disabled=&quot;&#123;disabled&#125;&quot;
-              @click=&quot;selectValue(event, secondValue)&quot;
-            &gt;&#123;secondLabel&#125;&lt;/button&gt;
-        &lt;/div&gt;
-        &#123;/if&#125;
-      &lt;/div&gt;
-
-      &#123;#if items.length &gt; 0&#125;
-        &lt;div class=&quot;wire-next__toggle-count-items&quot;&gt;
-          &#123;#each items as item&#125;
-            &lt;article&gt;
-        &lt;span&gt;&#123;item.label || item.name&#125;&lt;/span&gt;
-        &lt;strong&gt;
-                &#123;#if currency&#125;&lt;small&gt;&#123;currency&#125;&lt;/small&gt;&#123;/if&#125;
-                &lt;span
-                  data-toggle-count-value
-                  data-first-value=&quot;&#123;item[firstValueKey]&#125;&quot;
-                  data-second-value=&quot;&#123;item[secondValueKey]&#125;&quot;
-                &gt;&#123;displayValue(item)&#125;&lt;/span&gt;
-                &#123;#if suffix&#125;&lt;small&gt;&#123;suffix&#125;&lt;/small&gt;&#123;/if&#125;
-              &lt;/strong&gt;
-              &#123;#if item.description&#125;&lt;small&gt;&#123;item.description&#125;&lt;/small&gt;&#123;/if&#125;
-            &lt;/article&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/toggle-password.wrn

@@ -1,182 +0,0 @@
-page TogglePasswordcomponent {
-  seo {
-    title = "TogglePassword component"
-    description = "Accessible password field with optional show and hide controls."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TogglePassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>TogglePassword</h1><p>Accessible password field with optional show and hide controls.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>24 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>&lt;TogglePassword
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  label=&quot;Password&quot;
-  name=&quot;password&quot;
-  value=&quot;value&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TogglePassword&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&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>name</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;Enter your password&quot;</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;current-password&quot;</code></td></tr><tr><td><code>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>pattern</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).&#123;8,&#125;&quot;</code></td></tr><tr><td><code>fields</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>visible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>toggleable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>toggleMode</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;button&quot;</code></td></tr><tr><td><code>checkboxLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Show password&quot;</code></td></tr><tr><td><code>showLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Show password&quot;</code></td></tr><tr><td><code>hideLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Hide password&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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</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>invalid</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helpText</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>validationMessage</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr><tr><td><code>class</code></td><td><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>input</code></li><li><code>change</code></li><li><code>toggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TogglePassword.wrn</code></p><pre data-language="wrn"><code>component TogglePassword &#123;
-  props &#123;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    label = &quot;Password&quot;
-    name = &quot;password&quot;
-    value = &quot;&quot;
-    placeholder = &quot;Enter your password&quot;
-    autocomplete = &quot;current-password&quot;
-    minlength = &quot;&quot;
-    maxlength = &quot;&quot;
-    pattern = &quot;(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).&#123;8,&#125;&quot;
-    fields = []
-    visible = false
-    toggleable = true
-    toggleMode = &quot;button&quot;
-    checkboxLabel = &quot;Show password&quot;
-    showLabel = &quot;Show password&quot;
-    hideLabel = &quot;Hide password&quot;
-    disabled = false
-    readonly = false
-    required = false
-    invalid = false
-    helpText = &quot;&quot;
-    validationMessage = &quot;&quot;
-    class = &quot;&quot;
-    @event input = function
-    @event change = function
-    @event toggle = function
-  &#125;
-
-  state revealed = visible
-
-  functions &#123;
-    function toggleVisibility() &#123;
-      if (disabled || readonly || !toggleable) &#123;
-        return
-      &#125;
-      revealed = !revealed
-    &#125;
-
-    function fieldId(field, index) &#123;
-      return field.id || field.name || name + &quot;-&quot; + index
-    &#125;
-
-    function fieldName(field, index) &#123;
-      return field.name || name + &quot;-&quot; + index
-    &#125;
-  &#125;
-
-  view &#123;
-        &lt;fieldset
-      class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--toggle-password &#123;invalid ? 'wire-next--invalid' : ''&#125; &#123;disabled ? 'wire-next--disabled' : ''&#125; &#123;class&#125;&quot;
-      data-wrn-toggle-password
-      data-visible=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
-    &gt;
-      &#123;#if fields.length&#125;
-        &lt;div class=&quot;wire-next__password-fields&quot;&gt;
-          &#123;#each fields as field, index&#125;
-            &lt;div class=&quot;wire-next__password-field&quot;&gt;
-        &lt;label for=&quot;&#123;fieldId(field, index)&#125;&quot;&gt;&#123;field.label || label&#125;&lt;/label&gt;
-        &lt;div class=&quot;wire-next__password-control&quot;&gt;
-        &lt;input
-                  id=&quot;&#123;fieldId(field, index)&#125;&quot;
-                  type=&quot;&#123;revealed ? 'text' : 'password'&#125;&quot;
-                  name=&quot;&#123;fieldName(field, index)&#125;&quot;
-                  value=&quot;&#123;field.value || ''&#125;&quot;
-                  placeholder=&quot;&#123;field.placeholder || placeholder&#125;&quot;
-                  autocomplete=&quot;&#123;field.autocomplete || autocomplete&#125;&quot;
-                  minlength=&quot;&#123;field.minlength || minlength&#125;&quot;
-                  maxlength=&quot;&#123;field.maxlength || maxlength&#125;&quot;
-                  pattern=&quot;&#123;field.pattern || pattern&#125;&quot;
-                  disabled=&quot;&#123;disabled || field.disabled&#125;&quot;
-                  readonly=&quot;&#123;readonly || field.readonly&#125;&quot;
-                  required=&quot;&#123;required || field.required&#125;&quot;
-                  aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
-                  @input=&quot;$emit('input', &#123; name: event.target.name, value: event.target.value, visible: revealed &#125;)&quot;
-                  @change=&quot;$emit('change', &#123; name: event.target.name, value: event.target.value, visible: revealed &#125;)&quot;
-                /&gt;
-                &#123;#if toggleable &amp;&amp; toggleMode === &quot;button&quot;&#125;
-                  &lt;button
-                    type=&quot;button&quot;
-                    class=&quot;wire-next__password-toggle&quot;
-                    aria-label=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
-                    title=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
-                    aria-pressed=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
-                    disabled=&quot;&#123;disabled || readonly&#125;&quot;
-                    @click=&quot;toggleVisibility(); $emit('toggle', &#123; visible: revealed &#125;)&quot;
-                  &gt;
-        &lt;span class=&quot;wire-next__password-icon wire-next__password-icon--show&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-                &#123;/if&#125;
-              &lt;/div&gt;
-        &lt;/div&gt;
-          &#123;/each&#125;
-        &lt;/div&gt;
-      &#123;:else&#125;
-        &lt;label for=&quot;&#123;name&#125;-password&quot;&gt;&#123;label&#125;&lt;/label&gt;
-        &lt;div class=&quot;wire-next__password-control&quot;&gt;
-        &lt;input
-            &#123;...attrs&#125;
-            id=&quot;&#123;name&#125;-password&quot;
-            type=&quot;&#123;revealed ? 'text' : 'password'&#125;&quot;
-            name=&quot;&#123;name&#125;&quot;
-            value=&quot;&#123;value&#125;&quot;
-            placeholder=&quot;&#123;placeholder&#125;&quot;
-            autocomplete=&quot;&#123;autocomplete&#125;&quot;
-            minlength=&quot;&#123;minlength&#125;&quot;
-            maxlength=&quot;&#123;maxlength&#125;&quot;
-            pattern=&quot;&#123;pattern&#125;&quot;
-            disabled=&quot;&#123;disabled&#125;&quot;
-            readonly=&quot;&#123;readonly&#125;&quot;
-            required=&quot;&#123;required&#125;&quot;
-            aria-invalid=&quot;&#123;invalid ? 'true' : 'false'&#125;&quot;
-            aria-describedby=&quot;&#123;validationMessage ? name + '-validation' : helpText ? name + '-help' : ''&#125;&quot;
-            @input=&quot;$emit('input', &#123; value: event.target.value, visible: revealed &#125;)&quot;
-            @change=&quot;$emit('change', &#123; value: event.target.value, visible: revealed &#125;)&quot;
-          /&gt;
-          &#123;#if toggleable &amp;&amp; toggleMode === &quot;button&quot;&#125;
-            &lt;button
-              type=&quot;button&quot;
-              class=&quot;wire-next__password-toggle&quot;
-              aria-label=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
-              title=&quot;&#123;revealed ? hideLabel : showLabel&#125;&quot;
-              aria-pressed=&quot;&#123;revealed ? 'true' : 'false'&#125;&quot;
-              disabled=&quot;&#123;disabled || readonly&#125;&quot;
-              @click=&quot;toggleVisibility(); $emit('toggle', &#123; visible: revealed &#125;)&quot;
-            &gt;
-        &lt;span class=&quot;wire-next__password-icon wire-next__password-icon--show&quot; aria-hidden=&quot;true&quot;&gt;
-        &lt;/span&gt;
-        &lt;/button&gt;
-          &#123;/if&#125;
-        &lt;/div&gt;
-      &#123;/if&#125;
-      &#123;#if toggleable &amp;&amp; toggleMode === &quot;checkbox&quot;&#125;
-        &lt;label class=&quot;wire-next__password-checkbox&quot;&gt;
-        &lt;input
-            type=&quot;checkbox&quot;
-            checked=&quot;&#123;revealed&#125;&quot;
-            disabled=&quot;&#123;disabled || readonly&#125;&quot;
-            @change=&quot;revealed = event.target.checked; $emit('toggle', &#123; visible: revealed &#125;)&quot;
-          /&gt;
-        &lt;span&gt;&#123;checkboxLabel&#125;&lt;/span&gt;
-        &lt;/label&gt;
-      &#123;/if&#125;
-      &#123;#if helpText &amp;&amp; !validationMessage&#125;&lt;small id=&quot;&#123;name&#125;-help&quot;&gt;&#123;helpText&#125;&lt;/small&gt;&#123;/if&#125;
-      &lt;small
-        id=&quot;&#123;name&#125;-validation&quot;
-        class=&quot;wire-next__validation&quot;
-        data-error=&quot;&#123;name&#125;&quot;
-      &gt;&#123;validationMessage&#125;&lt;/small&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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/tooltip.wrn

@@ -1,51 +0,0 @@
-page Tooltipcomponent {
-  seo {
-    title = "Tooltip component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">overlays component</span><h1>Tooltip</h1><p>Theme-aware, responsive tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 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;Tooltip
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Tooltip&quot;
-  description=&quot;description&quot;
-  open=&quot;false&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tooltip&quot;</code></td></tr><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>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;bottom&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><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></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>open</code></li><li><code>close</code></li></ul></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;
-    @event open = function
-    @event close = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Tooltip&quot;
-    description = &quot;&quot;
-    open = false
-    placement = &quot;bottom&quot;
-    closeLabel = &quot;Close&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;div data-show=&quot;&#123;open&#125;&quot; class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tooltip wire-next--placement-&#123;placement&#125; &#123;class&#125;&quot; role=&quot;region&quot; aria-modal=&quot;false&quot; aria-label=&quot;&#123;title&#125;&quot;&gt;
-        &lt;header&gt;
-        &lt;strong&gt;&#123;title&#125;&lt;/strong&gt;
-        &lt;button type=&quot;button&quot; aria-label=&quot;&#123;closeLabel&#125;&quot;&gt;×&lt;/button&gt;
-        &lt;/header&gt;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/tree-view.wrn

@@ -1,50 +0,0 @@
-page TreeViewcomponent {
-  seo {
-    title = "TreeView component"
-    description = "Theme-aware, responsive tree view component."
-  }
-
-  view {
-    <div class="docs-shell">
-      <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
-      <header class="topbar">
-        <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
-        <div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeView</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>TreeView</h1><p>Theme-aware, responsive tree view component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;TreeView
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Tree View&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;TreeView&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Tree View&quot;</code></td></tr><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>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><ul><li><code>select</code></li><li><code>toggle</code></li><li><code>expand</code></li><li><code>collapse</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TreeView.wrn</code></p><pre data-language="wrn"><code>component TreeView &#123;
-  props &#123;
-    @event select = function
-    @event toggle = function
-    @event expand = function
-    @event collapse = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Tree View&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--tree-view wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/typography.wrn

@@ -1,42 +0,0 @@
-page Typographycomponent {
-  seo {
-    title = "Typography component"
-    description = "Theme-aware, responsive 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose 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">layout component</span><h1>Typography</h1><p>Theme-aware, responsive typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</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;Typography
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  columns=&quot;2&quot;
-  gap=&quot;md&quot;
-  maxWidth=&quot;xl&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>size</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;default&quot;</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;md&quot;</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;xl&quot;</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;&quot;</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</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;
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    columns = 2
-    gap = &quot;md&quot;
-    maxWidth = &quot;xl&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;article class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--typography wire-next--gap-&#123;gap&#125; wire-next--columns-&#123;columns&#125; wire-next--max-&#123;maxWidth&#125; &#123;class&#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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

app/pages/components/wysiwyg-editor.wrn

@@ -1,50 +0,0 @@
-page WysiwygEditorcomponent {
-  seo {
-    title = "WysiwygEditor component"
-    description = "Theme-aware, responsive wysiwyg 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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
-      </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
-      <main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WysiwygEditor</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>WysiwygEditor</h1><p>Theme-aware, responsive wysiwyg editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 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;WysiwygEditor
-  size=&quot;default&quot;
-  color=&quot;primary&quot;
-  title=&quot;Wysiwyg Editor&quot;
-  description=&quot;description&quot;
-  items=&quot;[]&quot;
-/&gt;</code></pre><p>Legacy mount name: <code>data-component=&quot;WysiwygEditor&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div 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>color</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;primary&quot;</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>&quot;Wysiwyg Editor&quot;</code></td></tr><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>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><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WysiwygEditor.wrn</code></p><pre data-language="wrn"><code>component WysiwygEditor &#123;
-  props &#123;
-    @event input = function
-    @event change = function
-    @event focus = function
-    @event blur = function
-    size = &quot;default&quot;
-    color = &quot;primary&quot;
-    title = &quot;Wysiwyg Editor&quot;
-    description = &quot;&quot;
-    items = []
-    variant = &quot;default&quot;
-    class = &quot;&quot;
-  &#125;
-  view &#123;
-        &lt;section class=&quot;wire-next wire-next--color-&#123;color&#125; wire-next--size-&#123;size&#125; wire-next--wysiwyg-editor wire-next--variant-&#123;variant&#125; &#123;class&#125;&quot;&gt;
-      &#123;#if title&#125;&lt;strong&gt;&#123;title&#125;&lt;/strong&gt;&#123;/if&#125;
-      &#123;#if description&#125;&lt;p&gt;&#123;description&#125;&lt;/p&gt;&#123;/if&#125;
-      &#123;#if items&#125;&lt;div class=&quot;wire-next__items&quot;&gt;&#123;#each items as item&#125;&lt;span&gt;&#123;item.label&#125;&lt;/span&gt;&#123;/each&#125;&lt;/div&gt;&#123;/if&#125;
-      &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.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
-      <BackToTop />
-    </div>
-  }
-}

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 create my-app
 cd my-app
 bun install

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />

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="/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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
+      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">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.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/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.5.0</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.5.0 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.5.0</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 />