docs: teach component setup with verified examples

scripts/generate-showcase.mjs

@@ -2052,6 +2052,17 @@ page V06${identifier(title)}Guide {
 }
 
 const customizationGuides = new Set(["dark-mode", "themes", "colors", "fonts", "sizing"]);
+const guideOutcomes = {
+  installation: "The UI package becomes discoverable by development, type-check, and production builds without manually copying component CSS.",
+  "framework-guides": "The page depends on public component props, slots, and outputs, so framework upgrades do not depend on private markup.",
+  accessibility: "Keyboard, focus, naming, contrast, zoom, and reduced-motion behavior become explicit acceptance criteria.",
+  resources: "You can move from component contract to composed block, diagnose ownership, and preview upgrades with supported tools.",
+  "dark-mode": "The initial server document and hydrated client agree on light, dark, or system mode without a theme flash.",
+  themes: "Only the selected theme is active while semantic tokens keep every component visually consistent.",
+  colors: "Status and hierarchy use named semantic roles that remain understandable in both light and dark modes.",
+  fonts: "Typography loads only required families and weights while preserving a readable system fallback.",
+  sizing: "Control size and application density remain consistent without shrinking accessible touch targets.",
+};
 const guideDetails = {
   installation: {
     sections: [
@@ -2153,8 +2164,9 @@ for (const [slug, title, description, code] of docsSections) {
     <article class="page-docs guide-page">
       <nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>${escapeText(title)}</span></nav>
       <header class="docs-intro"><span class="showcase-eyebrow">${section}</span><h1>${escapeText(title)}</h1><p>${escapeText(description)}</p></header>
+      ${details.code ? `<section class="guide-section guide-example"><h2>Configure and use it</h2><p>This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.</p><pre><code>${escapeCode(details.code)}</code></pre><h3>What changes after this</h3><p>${escapeText(guideOutcomes[slug] ?? "The application adopts the documented component-library contract and can verify it through the production toolchain.")}</p></section>` : ""}
       ${details.sections.map(([heading, copy]) => `<section class="guide-section"><h2>${escapeText(heading)}</h2><p>${escapeText(copy)}</p></section>`).join("")}
-      ${details.code ? `<section class="guide-section"><h2>Quick start</h2><pre><code>${escapeCode(details.code)}</code></pre></section>` : ""}
+      <section class="guide-section"><h2>Verify the result</h2><p>Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.</p><pre><code>${escapeCode(`bunx wrnexus typecheck .\nbunx wrnexus inspect packages .\nbunx wrnexus inspect styles .\nbunx wrnexus build .`)}</code></pre><h3>Expected result</h3><p>The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.</p></section>
       <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
     </article>
   }