docs: move component reference to showcase

scripts/generate-docs.ts

@@ -18,7 +18,6 @@ const pages = join(root, "app", "pages");
 const packagePages = join(pages, "packages");
 const componentPages = join(pages, "components");
 mkdirSync(packagePages, { recursive: true });
-mkdirSync(componentPages, { recursive: true });
 
 interface UiComponentReference {
   count: number;
@@ -269,10 +268,10 @@ ${state}
       <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
       <header class="topbar">
         <a class="brand" href="/"><span>W</span> WRNexusJS</a>
-        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
+        <nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="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">Private preview · v${frameworkVersion}</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
       </header>
-      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a 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>
       ${content}
       <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS ${frameworkVersion}</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
       <BackToTop />
@@ -333,7 +332,7 @@ for (const [name, category, summary] of catalog) {
   const guide = markdown(readme);
   const componentReference =
     name === "ui" && uiReference
-      ? `<section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>The component reference now has a dedicated catalog with searchable cards and one complete page per component.</p><p><a class="primary" href="/components">Browse all ${uiReference.count} components →</a></p></section>`
+      ? `<section class="prose component-catalog-callout"><h2>Explore the component library</h2><p>Browse interactive examples and complete component usage in the dedicated WRNexusJS component showcase.</p><p><a class="primary" href="https://component.wrnexusjs.dev/">Browse all ${uiReference.count} components →</a></p></section>`
       : "";
   const toc = [
     { id: "guide", title: "Guide", level: 2 },
@@ -353,90 +352,12 @@ for (const [name, category, summary] of catalog) {
   writeFileSync(join(packagePages, `${name}.wrn`), shell(`@wrnexus/${name}`, summary, content));
 }
 
-if (!uiReference) throw new Error("Install @wrnexus/ui before generating component documentation");
-
-const componentSlug = (name: string) =>
-  (name === "file-upload" ? "file-upload-primitive" : name)
-    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-    .replace(/[^a-zA-Z0-9]+/g, "-")
-    .replace(/^-|-$/g, "")
-    .toLowerCase();
-const componentCategories = [
-  ...new Set(uiReference.components.map((item) => item.category)),
-].sort();
-const componentCards = uiReference.components
-  .map(
-    (item) =>
-      `<a class="component-card" href="/components/${componentSlug(item.name)}" data-show="(category === 'All' ? true : category === '${item.category}') ? (query === '' ? true : '${escape(`${item.name} ${item.mount} ${item.category} ${item.purpose}`.toLowerCase())}'.includes(query.toLowerCase())) : false"><span class="category">${escape(item.category)}</span><h2>${escape(item.name)}</h2><p>${escape(item.purpose)}</p><div class="component-card-meta"><span>${item.props.length} props</span><span>${item.slots.length} slots</span><span>${item.events.length} events</span></div><span class="card-link">View component →</span></a>`,
-  )
-  .join("\n");
-const componentFilters = ["All", ...componentCategories]
-  .map(
-    (category) =>
-      `<button type="button" @click="category = '${category}'">${escape(category[0]!.toUpperCase() + category.slice(1))}<span>${category === "All" ? uiReference.count : uiReference.components.filter((item) => item.category === category).length}</span></button>`,
-  )
-  .join("");
-
-writeFileSync(
-  join(pages, "components.wrn"),
-  shell(
-    "Components",
-    `Browse all ${uiReference.count} themeable WRNexusJS UI components, props, slots, events, and examples.`,
-    `<main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · ${uiReference.count} components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row">${componentFilters}</div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid">${componentCards}</section></main>`,
-    '  state query = ""\n  state category = "All"\n',
-  ),
-);
-
-const currentComponentFiles = new Set<string>();
-for (const item of uiReference.components) {
-  const slug = componentSlug(item.name);
-  currentComponentFiles.add(`${slug}.wrn`);
-  const sourcePath = join(root, "node_modules", "@wrnexus", "ui", item.source);
-  const source = existsSync(sourcePath) ? readFileSync(sourcePath, "utf8") : "";
-  const exampleAttributes = item.props
-    .filter((prop) => prop.required || !["class", "className"].includes(prop.name))
-    .slice(0, 5)
-    .map((prop) => {
-      const value = prop.required
-        ? prop.type === "boolean"
-          ? "true"
-          : prop.type === "number"
-            ? "1"
-            : prop.type.includes("[]")
-              ? "[]"
-              : prop.name
-        : (prop.default ?? "").replace(/^"|"$/g, "");
-      return `${prop.name}="${value || prop.name}"`;
-    })
-    .join("\n  ");
-  const example = exampleAttributes
-    ? `<${item.mount}\n  ${exampleAttributes}\n/>`
-    : `<${item.mount} />`;
-  const formattedSource = source
-    .replace(/view \{\s*(?=<)/g, "view {\n        ")
-    .replace(/>\s*</g, ">\n        <")
-    .replace(/>\s*\}/g, ">\n    }");
-  const propsRows = item.props.length
-    ? item.props
-        .map(
-          (prop) =>
-            `<tr><td><code>${escape(prop.name)}</code></td><td><code>${escape(prop.type)}</code></td><td>${prop.required ? '<span class="required">Required</span>' : "Optional"}</td><td><code>${prop.default === null ? "—" : escape(prop.default)}</code></td></tr>`,
-        )
-        .join("")
-    : '<tr><td colspan="4">This component has no props.</td></tr>';
-  const content = `<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">${escape(item.name)}</span></nav><section class="doc-intro"><span class="eyebrow">${escape(item.category)} component</span><h1>${escape(item.name)}</h1><p>${escape(item.purpose)}</p><div class="doc-meta"><span>@wrnexus/ui ${frameworkVersion}</span><span>${item.props.length} props</span><span>${item.slots.length} slots</span><span>${item.events.length} events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code>${escape(example)}</code></pre><p>Legacy mount name: <code>data-component=&quot;${escape(item.mount)}&quot;</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody>${propsRows}</tbody></table></div></section><section id="slots"><h2>Slots</h2>${item.slots.length ? `<ul>${item.slots.map((slot) => `<li><code>${escape(slot)}</code></li>`).join("")}</ul>` : "<p>This component does not declare a slot.</p>"}</section><section id="events"><h2>Events</h2>${item.events.length ? `<ul>${item.events.map((event) => `<li><code>${escape(event)}</code></li>`).join("")}</ul>` : "<p>This component does not declare a custom event.</p>"}</section><section id="source"><h2>Source contract</h2><p>Installed source: <code>${escape(item.source)}</code></p><pre data-language="wrn"><code>${escape(formattedSource)}</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>`;
-  writeFileSync(
-    join(componentPages, `${slug}.wrn`),
-    shell(`${item.name} component`, item.purpose, content),
-  );
-}
-for (const file of readdirSync(componentPages)) {
-  if (!file.endsWith(".wrn") || currentComponentFiles.has(file)) {
-    continue;
+if (!uiReference) throw new Error("Install @wrnexus/ui before generating documentation");
+if (existsSync(join(pages, "components.wrn"))) unlinkSync(join(pages, "components.wrn"));
+if (existsSync(componentPages)) {
+  for (const file of readdirSync(componentPages).filter((name) => name.endsWith(".wrn"))) {
+    unlinkSync(join(componentPages, file));
   }
-
-  unlinkSync(join(componentPages, file));
-  console.log(`Removed stale generated component page: ${file}`);
 }
 
 writeFileSync(