@agent-scope/site 1.19.0 → 1.20.1

package/dist/index.js

@@ -8,9 +8,26 @@ function normalizeOptions(options) {
     outputDir: options?.outputDir ?? ".reactscope/site",
     basePath: options?.basePath ?? "/",
     compliancePath: options?.compliancePath ?? "",
-    title: options?.title ?? "Scope \u2014 Component Gallery"
+    tokenFilePath: options?.tokenFilePath ?? "",
+    title: options?.title ?? "Scope \u2014 Component Gallery",
+    iconPatterns: options?.iconPatterns ?? []
   };
 }
+function flattenTokens(obj, prefix, result) {
+  for (const [key, value] of Object.entries(obj)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && "value" in value && "type" in value) {
+      const v = value;
+      result.push({
+        path,
+        value: String(v.value),
+        type: String(v.type)
+      });
+    } else if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      flattenTokens(value, path, result);
+    }
+  }
+}
 async function readJsonFile(filePath) {
   const content = await readFile(filePath, "utf-8");
   return JSON.parse(content);
@@ -25,7 +42,7 @@ async function readSiteData(options) {
     const jsonFiles = entries.filter((f) => f.endsWith(".json"));
     await Promise.all(
       jsonFiles.map(async (file) => {
-        const componentName = file.replace(/\.json$/, "");
+        const componentName = file.replace(/(?:\.error)?\.json$/, "");
         const filePath = join(rendersDir, file);
         try {
           const renderData = await readJsonFile(filePath);
@@ -51,15 +68,63 @@ async function readSiteData(options) {
       );
     }
   }
+  let tokenEntries;
+  let tokenMeta;
+  let siteTokenThemes;
+  if (options.tokenFilePath) {
+    try {
+      const tokenFile = await readJsonFile(options.tokenFilePath);
+      const entries = [];
+      flattenTokens(tokenFile.tokens, "", entries);
+      tokenEntries = entries;
+      tokenMeta = tokenFile.meta;
+      if (tokenFile.themes && Object.keys(tokenFile.themes).length > 0) {
+        siteTokenThemes = tokenFile.themes;
+      }
+    } catch (err) {
+      console.warn(
+        `[scope/site] Warning: could not read token file ${options.tokenFilePath}:`,
+        err instanceof Error ? err.message : String(err)
+      );
+    }
+  }
+  let playgroundDefaults;
+  try {
+    const defaultsPath = join(options.inputDir, "playground-defaults.json");
+    const defaultsRaw = await readJsonFile(defaultsPath);
+    playgroundDefaults = new Map(Object.entries(defaultsRaw));
+  } catch {
+  }
   return {
     manifest,
     renders,
     complianceBatch,
-    options
+    tokenEntries,
+    tokenThemes: siteTokenThemes,
+    tokenMeta,
+    options,
+    playgroundDefaults
   };
 }
 
 // src/utils.ts
+function matchGlob(pattern, value) {
+  const escaped = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&");
+  const regexStr = escaped.replace(/\*\*/g, "\xA7GLOBSTAR\xA7").replace(/\*/g, "[^/]*").replace(/§GLOBSTAR§/g, ".*");
+  return new RegExp(`^${regexStr}$`, "i").test(value);
+}
+function domTreeToSvg(node) {
+  if (node.tag === "#text") {
+    return node.text ?? "";
+  }
+  const attrs = Object.entries(node.attrs).map(([k, v]) => ` ${k}="${escapeHtml(v)}"`).join("");
+  const children = node.children.map((child) => domTreeToSvg(child)).join("");
+  const textContent = node.text?.trim() ?? "";
+  if (!children && !textContent) {
+    return `<${node.tag}${attrs} />`;
+  }
+  return `<${node.tag}${attrs}>${textContent}${children}</${node.tag}>`;
+}
 function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -69,7 +134,7 @@ function slugify(name) {
 function renderDOMTree(node, depth = 0) {
   const indent = "  ".repeat(depth);
   const attrsHtml = Object.entries(node.attrs).map(([k, v]) => {
-    const display = v.length > 60 ? v.slice(0, 57) + "\u2026" : v;
+    const display = v.length > 60 ? `${v.slice(0, 57)}\u2026` : v;
     return ` <span class="dom-attr-name">${escapeHtml(k)}</span>=<span class="dom-attr-value">"${escapeHtml(display)}"</span>`;
   }).join("");
   const nodeIdAttr = node.nodeId !== void 0 ? ` data-node-id="${node.nodeId}"` : "";
@@ -88,6 +153,73 @@ ${indent}<summary><span class="dom-tag-open">&lt;${escapeHtml(node.tag)}${attrsH
 ${textHtml}${childrenHtml}${indent}<span class="dom-tag-close">&lt;/${escapeHtml(node.tag)}&gt;</span>
 </details>`;
 }
+function propControlHtml(name, prop, overrideDefault) {
+  const escapedName = escapeHtml(name);
+  const dataAttrs = `data-prop-name="${escapedName}" data-prop-type="${escapeHtml(prop.type)}"`;
+  const rawDefault = overrideDefault ?? prop.default;
+  const defaultVal = rawDefault !== void 0 ? rawDefault.replace(/^['"]|['"]$/g, "") : void 0;
+  switch (prop.type) {
+    case "boolean": {
+      const checked = defaultVal === "true" ? " checked" : "";
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-checkbox" type="checkbox" id="pg-${escapedName}" ${dataAttrs}${checked} />
+</div>`;
+    }
+    case "number": {
+      const numVal = defaultVal ?? (prop.required ? "0" : "");
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-input" type="number" id="pg-${escapedName}" ${dataAttrs} value="${escapeHtml(numVal)}" />
+</div>`;
+    }
+    case "union": {
+      if (prop.values && prop.values.length > 0) {
+        const options = prop.values.map((v) => {
+          const sel = defaultVal === v ? " selected" : "";
+          return `<option value="${escapeHtml(v)}"${sel}>${escapeHtml(v)}</option>`;
+        }).join("");
+        const emptyOption = prop.required ? "" : '<option value="">\u2014</option>';
+        return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <select class="pg-select" id="pg-${escapedName}" ${dataAttrs}>${emptyOption}${options}</select>
+</div>`;
+      }
+      const textVal = defaultVal ?? "";
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-input" type="text" id="pg-${escapedName}" ${dataAttrs} value="${escapeHtml(textVal)}" placeholder="${escapeHtml(prop.rawType)}" />
+</div>`;
+    }
+    case "string": {
+      const strVal = defaultVal ?? (prop.required ? "" : "");
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-input" type="text" id="pg-${escapedName}" ${dataAttrs} value="${escapeHtml(strVal)}" />
+</div>`;
+    }
+    case "function":
+      return `<div class="pg-control-row">
+  <label class="pg-control-label">${escapedName}</label>
+  <span class="pg-control-readonly">${escapeHtml(prop.rawType)}</span>
+</div>`;
+    case "node":
+    case "element": {
+      const nodeVal = defaultVal ?? "";
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-input" type="text" id="pg-${escapedName}" ${dataAttrs} value="${escapeHtml(nodeVal)}" placeholder="text content" />
+</div>`;
+    }
+    default: {
+      const otherVal = defaultVal ?? "";
+      return `<div class="pg-control-row">
+  <label class="pg-control-label" for="pg-${escapedName}">${escapedName}</label>
+  <input class="pg-input" type="text" id="pg-${escapedName}" ${dataAttrs} value="${escapeHtml(otherVal)}" placeholder="JSON" />
+</div>`;
+    }
+  }
+}
 function propTableRow(name, prop) {
   const valuesHtml = prop.values && prop.values.length > 0 ? `<br><span style="color:var(--color-muted);font-size:11px">${prop.values.map((v) => escapeHtml(v)).join(" | ")}</span>` : "";
   const defaultHtml = prop.default !== void 0 ? escapeHtml(prop.default) : "\u2014";
@@ -104,6 +236,7 @@ function generateCSS() {
   const css = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;700&display=swap');
 
 :root {
+  color-scheme: light;
   --color-text: #0f0f0f;
   --color-muted: #6b7280;
   --color-border: #e5e7eb;
@@ -114,6 +247,31 @@ function generateCSS() {
   --color-success: #16a34a;
   --color-warn: #d97706;
   --color-error: #dc2626;
+  --color-on-accent: #fff;
+  --color-preview-bg: #f8f8f8;
+  --color-code-text: #e2e8f0;
+  --badge-complex-border: #fbbf24;
+  --badge-complex-color: #92400e;
+  --badge-complex-bg: #fffbeb;
+  --badge-simple-border: #6ee7b7;
+  --badge-simple-color: #065f46;
+  --badge-simple-bg: #ecfdf5;
+  --badge-memo-border: #a5b4fc;
+  --badge-memo-color: #3730a3;
+  --badge-memo-bg: #eef2ff;
+  --badge-internal-border: #d1d5db;
+  --badge-internal-color: #9ca3af;
+  --badge-internal-bg: #f3f4f6;
+  --pill-on-bg: #dcfce7;
+  --pill-on-color: #166534;
+  --pill-off-bg: #fef3c7;
+  --pill-off-color: #92400e;
+  --violation-bg: #fef2f2;
+  --violation-border: #fecaca;
+  --violation-color: #991b1b;
+  --color-bg-selected: #eef2ff;
+  --overlay-bg: rgba(0,0,0,0.2);
+  --slideout-shadow: -4px 0 24px rgba(0,0,0,0.12);
   --font-body: 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --radius: 6px;
@@ -121,6 +279,47 @@ function generateCSS() {
   --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
 }
 
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-text: #f3f4f6;
+  --color-muted: #9ca3af;
+  --color-border: #1f2937;
+  --color-bg: #111827;
+  --color-bg-subtle: #1f2937;
+  --color-bg-code: #0d1117;
+  --color-accent: #60a5fa;
+  --color-success: #4ade80;
+  --color-warn: #fbbf24;
+  --color-error: #f87171;
+  --color-on-accent: #fff;
+  --color-preview-bg: #1f2937;
+  --color-code-text: #e2e8f0;
+  --badge-complex-border: #92400e;
+  --badge-complex-color: #fcd34d;
+  --badge-complex-bg: rgba(120,53,15,0.3);
+  --badge-simple-border: #065f46;
+  --badge-simple-color: #6ee7b7;
+  --badge-simple-bg: rgba(6,78,59,0.3);
+  --badge-memo-border: #4338ca;
+  --badge-memo-color: #a5b4fc;
+  --badge-memo-bg: rgba(67,56,202,0.2);
+  --badge-internal-border: #4b5563;
+  --badge-internal-color: #9ca3af;
+  --badge-internal-bg: #374151;
+  --pill-on-bg: rgba(22,101,52,0.3);
+  --pill-on-color: #86efac;
+  --pill-off-bg: rgba(146,64,14,0.3);
+  --pill-off-color: #fde68a;
+  --violation-bg: rgba(153,27,27,0.2);
+  --violation-border: #991b1b;
+  --violation-color: #fca5a5;
+  --color-bg-selected: rgba(99,102,241,0.15);
+  --overlay-bg: rgba(0,0,0,0.5);
+  --slideout-shadow: -4px 0 24px rgba(0,0,0,0.4);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
+}
+
 *, *::before, *::after { box-sizing: border-box; }
 
 body {
@@ -145,7 +344,13 @@ body {
   padding: 0 24px;
   gap: 16px;
 }
-.top-nav .site-title { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--color-text); }
+.top-nav .site-title { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
+.top-nav .site-logo { flex-shrink: 0; }
+.top-nav .breadcrumbs { display: flex; align-items: center; gap: 0; font-size: 14px; color: var(--color-text-muted); }
+.top-nav .breadcrumbs a, .top-nav .breadcrumbs span { text-decoration: none; color: var(--color-text-muted); }
+.top-nav .breadcrumbs a:hover { color: var(--color-text); }
+.top-nav .breadcrumbs span:last-child { color: var(--color-text); font-weight: 500; }
+.top-nav .breadcrumbs a::before, .top-nav .breadcrumbs span::before { content: "/"; margin: 0 8px; color: var(--color-border); }
 .top-nav .spacer { flex: 1; }
 .search-box {
   border: 1px solid var(--color-border);
@@ -159,6 +364,24 @@ body {
 }
 .search-box:focus { border-color: var(--color-accent); background: var(--color-bg); }
 
+/* Theme toggle */
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg-subtle);
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  padding: 0;
+  flex-shrink: 0;
+}
+.theme-toggle:hover { color: var(--color-text); border-color: var(--color-muted); }
+
 /* Page layout */
 .page-layout {
   display: flex;
@@ -256,9 +479,9 @@ body {
   color: var(--color-muted);
   background: var(--color-bg-subtle);
 }
-.badge.complex { border-color: #fbbf24; color: #92400e; background: #fffbeb; }
-.badge.simple { border-color: #6ee7b7; color: #065f46; background: #ecfdf5; }
-.badge.memoized { border-color: #a5b4fc; color: #3730a3; background: #eef2ff; }
+.badge.complex { border-color: var(--badge-complex-border); color: var(--badge-complex-color); background: var(--badge-complex-bg); }
+.badge.simple { border-color: var(--badge-simple-border); color: var(--badge-simple-color); background: var(--badge-simple-bg); }
+.badge.memoized { border-color: var(--badge-memo-border); color: var(--badge-memo-color); background: var(--badge-memo-bg); }
 
 .filepath {
   font-family: var(--font-mono);
@@ -281,6 +504,17 @@ body {
 .section-header p { color: var(--color-muted); margin: 0; font-size: 13px; }
 
 /* Not generated placeholder */
+.render-failure {
+  background: var(--violation-bg);
+  border: 1px solid var(--violation-border);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  color: var(--violation-color);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+.matrix-cell-error { color: var(--color-error); font-size: 11px; font-weight: 600; }
+
 .not-generated {
   background: var(--color-bg-subtle);
   border: 1px dashed var(--color-border);
@@ -296,7 +530,7 @@ body {
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
-  background: #f8f8f8;
+  background: var(--color-preview-bg);
   display: inline-block;
   max-width: 100%;
 }
@@ -326,10 +560,50 @@ body {
 .prop-required { color: var(--color-error); font-size: 11px; }
 .prop-default { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
 
+/* Inherited props section */
+.inherited-props-section { margin-top: 20px; }
+.inherited-props-heading {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-muted);
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 8px;
+}
+.inherited-group {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  margin-bottom: 6px;
+}
+.inherited-group summary {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-muted);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.inherited-group summary:hover { color: var(--color-text); }
+.inherited-group[open] summary { border-bottom: 1px solid var(--color-border); }
+.inherited-group-count {
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--color-muted);
+  opacity: 0.7;
+}
+.inherited-group .props-table { font-size: 12px; }
+.inherited-group .props-table td,
+.inherited-group .props-table th { padding: 4px 12px; }
+
 /* Code blocks */
 pre.code-block {
   background: var(--color-bg-code);
-  color: #e2e8f0;
+  color: var(--color-code-text);
   border-radius: var(--radius);
   padding: 16px 20px;
   overflow-x: auto;
@@ -389,13 +663,13 @@ pre.code-block {
 .pill-on {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; border-radius: 999px;
-  background: #dcfce7; color: #166534;
+  background: var(--pill-on-bg); color: var(--pill-on-color);
   font-size: 11px; font-weight: 500;
 }
 .pill-off {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; border-radius: 999px;
-  background: #fef3c7; color: #92400e;
+  background: var(--pill-off-bg); color: var(--pill-off-color);
   font-size: 11px; font-weight: 500;
 }
 
@@ -422,12 +696,12 @@ pre.code-block {
 .violation-list { list-style: none; padding: 0; margin: 0; }
 .violation-list li {
   padding: 8px 12px;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
+  background: var(--violation-bg);
+  border: 1px solid var(--violation-border);
   border-radius: var(--radius);
   margin-bottom: 6px;
   font-size: 13px;
-  color: #991b1b;
+  color: var(--violation-color);
 }
 .a11y-role-badge { font-family: var(--font-mono); font-size: 11px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); padding: 2px 6px; border-radius: 4px; }
 
@@ -489,7 +763,7 @@ details.dom-node > summary::-webkit-details-marker { display: none; }
 }
 .component-card:hover { box-shadow: var(--shadow); }
 .card-preview {
-  background: #f8f8f8;
+  background: var(--color-preview-bg);
   height: 160px;
   overflow: hidden;
   display: flex;
@@ -517,245 +791,1779 @@ details.dom-node > summary::-webkit-details-marker { display: none; }
   .content-body { padding: 20px 16px; }
   .analysis-grid { grid-template-columns: 1fr; }
   .composition-lists { grid-template-columns: 1fr; }
-}`;
-  return `<style>
-${css}
-</style>`;
 }
-
-// src/templates/layout.ts
-function sidebarLinks(components, currentSlug, basePath) {
-  const links = components.sort().map((name) => {
-    const slug = slugify(name);
-    const isActive = slug === currentSlug;
-    return `<a href="${basePath}${slug}.html" class="${isActive ? "active" : ""}">${escapeHtml(name)}</a>`;
-  }).join("\n");
-  return `<div class="sidebar-heading">Components</div>
-${links}`;
+/* Collection section headers in sidebar */
+.sidebar-collection-header {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  padding: 12px 16px 4px;
+  margin-top: 4px;
+  border-top: 1px solid var(--color-border);
 }
-function htmlShell(options) {
-  const { title, body, sidebar, onThisPage, basePath } = options;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${escapeHtml(title)}</title>
-  ${generateCSS()}
-</head>
-<body>
-  <nav class="top-nav">
-    <a class="site-title" href="${basePath}index.html">Scope</a>
-    <div class="spacer"></div>
-    <input
-      class="search-box"
-      type="search"
-      placeholder="Search components\u2026"
-      id="sidebar-search"
-      aria-label="Search components"
-    />
-  </nav>
-  <div class="page-layout">
-    <nav class="sidebar" id="sidebar">
-      ${sidebar}
-    </nav>
-    <div class="main-content">
-      <div class="content-body">
-        ${body}
-      </div>
-      <nav class="on-this-page">
-        <h4>On this page</h4>
-        ${onThisPage}
-      </nav>
-    </div>
-  </div>
-  <script>
-    (function () {
-      var search = document.getElementById('sidebar-search');
-      var sidebar = document.getElementById('sidebar');
-      if (!search || !sidebar) return;
-      search.addEventListener('input', function () {
-        var q = search.value.toLowerCase();
-        var links = sidebar.querySelectorAll('a');
-        links.forEach(function (link) {
-          var text = link.textContent || '';
-          link.style.display = text.toLowerCase().includes(q) ? '' : 'none';
-        });
-      });
-    })();
-  </script>
-</body>
-</html>`;
+.sidebar-collection-header:first-child {
+  margin-top: 0;
+  border-top: none;
 }
 
-// src/templates/component-detail.ts
-var SECTIONS = [
-  "Playground",
-  "Matrix",
-  "Docs",
-  "Analysis",
-  "X-Ray",
-  "Tokens",
-  "Accessibility",
-  "Composition",
-  "Responsive",
-  "Stress Tests"
-];
-function notGenerated(message = "Not generated") {
-  return `<div class="not-generated">${escapeHtml(message)}</div>`;
+/* Collection section headers on index page */
+.collection-section {
+  margin-bottom: 40px;
 }
-function sectionWrap(id, title, description, content) {
-  return `<section class="section" id="${id}">
-  <div class="section-header">
-    <h2>${escapeHtml(title)}</h2>
-    <p>${escapeHtml(description)}</p>
-  </div>
-  ${content}
-</section>`;
+.collection-section-header {
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--color-border);
 }
-function renderPlayground(name, data) {
-  const component = data.manifest.components[name];
-  const render = data.renders.get(name);
-  const props = component ? Object.entries(component.props) : [];
-  const propsTable = props.length > 0 ? `<table class="props-table">
-  <thead>
-    <tr>
-      <th>Prop</th>
-      <th>Type</th>
-      <th>Required</th>
-      <th>Default</th>
-    </tr>
-  </thead>
-  <tbody>
-    ${props.map(([n, p]) => propTableRow(n, p)).join("\n    ")}
-  </tbody>
-</table>` : `<p style="color:var(--color-muted);font-size:13px">No props defined.</p>`;
-  const renderW = render?.width != null ? render.width : void 0;
-  const renderH = render?.height != null ? render.height : void 0;
-  const renderSizeAttr = renderW != null && renderH != null ? ` width="${renderW}" height="${renderH}"` : "";
-  const renderHtml = render?.screenshot ? `<div class="render-preview">
-  <img src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)} render"${renderSizeAttr} />
-</div>` : notGenerated("Render not generated. Run scope render to produce screenshots.");
-  return sectionWrap(
-    "playground",
-    "Playground",
-    "Props reference and rendered preview.",
-    `${propsTable}
-<div style="margin-top:24px">${renderHtml}</div>`
-  );
+.collection-section-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: var(--color-text);
 }
-function renderMatrix(name, data) {
-  const render = data.renders.get(name);
-  if (!render?.cells || render.cells.length === 0) {
-    return sectionWrap(
-      "matrix",
-      "Matrix",
-      "Prop combination matrix renders.",
-      notGenerated("Matrix renders not generated. Run scope render --matrix to produce a matrix.")
-    );
-  }
-  const cells = render.cells;
-  const cols = Math.ceil(Math.sqrt(cells.length));
-  const cellsHtml = cells.map((cell) => {
-    const label = cell.axisValues.join(" / ");
-    const imgHtml = cell.screenshot ? `<img class="scope-screenshot" src="data:image/png;base64,${cell.screenshot}" alt="${escapeHtml(label)}" />` : `<span style="color:var(--color-muted);font-size:11px">${cell.error ? escapeHtml(cell.error) : "failed"}</span>`;
-    return `<div class="matrix-cell">${imgHtml}<div class="cell-label">${escapeHtml(label)}</div></div>`;
-  }).join("\n");
-  const grid = `<div class="matrix-grid" style="grid-template-columns: repeat(${cols}, 1fr)">
-${cellsHtml}
-</div>`;
-  return sectionWrap("matrix", "Matrix", "Prop combination matrix renders.", grid);
+.collection-section-header p {
+  font-size: 13px;
+  color: var(--color-muted);
+  margin: 0;
 }
-function renderDocs() {
-  return sectionWrap(
-    "docs",
-    "Docs",
-    "Component documentation.",
-    `<p style="color:var(--color-muted);font-size:13px">No documentation file found for this component.</p>`
-  );
+
+/* Collection gallery (index page) */
+.collection-gallery-section { margin-bottom: 32px; }
+.gallery-section-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 12px;
+  color: var(--color-text);
 }
-function renderAnalysis(name, data) {
-  const component = data.manifest.components[name];
-  if (!component) {
-    return sectionWrap("analysis", "Analysis", "Static analysis results.", notGenerated());
-  }
-  const propCount = Object.keys(component.props).length;
-  const hookCount = component.detectedHooks.length;
-  const sideEffectCount = component.sideEffects.fetches.length + (component.sideEffects.timers ? 1 : 0) + component.sideEffects.subscriptions.length + (component.sideEffects.globalListeners ? 1 : 0);
-  const statsGrid = `<div class="stats-grid">
-  <div class="stat-card">
-    <div class="stat-label">Complexity</div>
-    <div class="stat-value"><span class="badge ${component.complexityClass}">${escapeHtml(component.complexityClass)}</span></div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">Props</div>
-    <div class="stat-value">${propCount}</div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">Hooks</div>
-    <div class="stat-value">${hookCount}</div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">Side Effects</div>
-    <div class="stat-value">${sideEffectCount}</div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">Export</div>
-    <div class="stat-value" style="font-size:14px">${escapeHtml(component.exportType)}</div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">Memoized</div>
-    <div class="stat-value" style="font-size:14px">${component.memoized ? "Yes" : "No"}</div>
-  </div>
-  <div class="stat-card">
-    <div class="stat-label">forwardedRef</div>
-    <div class="stat-value" style="font-size:14px">${component.forwardedRef ? "Yes" : "No"}</div>
-  </div>
-</div>`;
-  function tagList(items) {
-    if (items.length === 0)
-      return `<span style="color:var(--color-muted);font-size:12px">None</span>`;
-    return `<div class="tag-list">${items.map((i) => `<span class="tag">${escapeHtml(i)}</span>`).join("")}</div>`;
-  }
-  const sideEffectItems = [
-    ...component.sideEffects.fetches.map((f) => `fetch: ${f}`),
-    ...component.sideEffects.timers ? ["timers"] : [],
-    ...component.sideEffects.subscriptions.map((s) => `sub: ${s}`),
-    ...component.sideEffects.globalListeners ? ["global listeners"] : []
-  ];
-  const analysisGrid = `<div class="analysis-grid">
-  <div class="analysis-card">
-    <h3>Detected Hooks</h3>
-    <div class="value">${tagList(component.detectedHooks)}</div>
-  </div>
-  <div class="analysis-card">
-    <h3>Required Contexts</h3>
-    <div class="value">${tagList(component.requiredContexts)}</div>
-  </div>
-  <div class="analysis-card">
-    <h3>HOC Wrappers</h3>
-    <div class="value">${tagList(component.hocWrappers)}</div>
-  </div>
-  <div class="analysis-card">
-    <h3>Side Effects</h3>
-    <div class="value">${tagList(sideEffectItems)}</div>
-  </div>
-</div>`;
-  return sectionWrap(
-    "analysis",
-    "Analysis",
-    "Static analysis results for this component.",
-    `${statsGrid}${analysisGrid}`
-  );
+.collection-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
 }
-function renderXRay(name, data) {
+.collection-tile {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  text-decoration: none;
+  color: var(--color-text);
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+.collection-tile:hover {
+  box-shadow: var(--shadow);
+  border-color: var(--color-accent);
+}
+.coll-tile-thumbs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--color-border);
+  height: 100px;
+  overflow: hidden;
+}
+.coll-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--color-preview-bg);
+}
+.coll-thumb-empty { background: var(--color-bg-subtle); }
+.coll-tile-body { padding: 10px 14px; }
+.coll-tile-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
+.coll-tile-desc {
+  font-size: 12px;
+  color: var(--color-muted);
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.coll-tile-count {
+  font-size: 11px;
+  color: var(--color-muted);
+  font-weight: 500;
+}
+
+/* Sidebar overview link */
+.sidebar a:first-child {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+/* Internal component badge */
+.badge-internal {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  border: 1px solid var(--badge-internal-border);
+  color: var(--badge-internal-color);
+  background: var(--badge-internal-bg);
+  margin-left: 4px;
+  vertical-align: middle;
+  line-height: 1.4;
+}
+
+/* Playground */
+.pg-container {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+.pg-controls {
+  width: 260px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg-subtle);
+  padding: 12px 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+.pg-controls-header {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-muted);
+  margin-bottom: 10px;
+}
+.pg-control-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 10px;
+}
+.pg-control-row:last-child { margin-bottom: 0; }
+.pg-control-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-muted);
+  letter-spacing: 0.03em;
+}
+.pg-input, .pg-select {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 4px 6px;
+  font-family: var(--font-body);
+  font-size: 12px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  outline: none;
+}
+.pg-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  padding-right: 22px;
+  padding-left: 4px;
+}
+.pg-input:focus, .pg-select:focus {
+  border-color: var(--color-accent);
+}
+.pg-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-accent);
+  cursor: pointer;
+}
+.pg-control-readonly {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-muted);
+  font-style: italic;
+}
+
+/* Preview wrapper with checkerboard background */
+.pg-preview-wrapper {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.pg-iframe-area {
+  flex: 1;
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
+    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.pg-preview-wrapper.pg-dark .pg-iframe-area {
+  background-color: #1a1a1a;
+  background-image:
+    linear-gradient(45deg, #252525 25%, transparent 25%),
+    linear-gradient(-45deg, #252525 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #252525 75%),
+    linear-gradient(-45deg, transparent 75%, #252525 75%);
+}
+
+/* Toolbar */
+.pg-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  background: var(--color-bg-subtle);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+.pg-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius);
+  background: none;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  padding: 0;
+  flex-shrink: 0;
+}
+.pg-toolbar-btn:hover { background: var(--color-border); color: var(--color-text); }
+.pg-toolbar-btn.active { background: var(--color-accent); color: var(--color-on-accent); }
+.pg-toolbar-sep {
+  width: 1px;
+  height: 16px;
+  background: var(--color-border);
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+.pg-toolbar-spacer { flex: 1; }
+
+/* iframe */
+.pg-iframe {
+  display: block;
+  width: 100%;
+  min-height: 300px;
+  height: 300px;
+  border: none;
+  background: transparent;
+  color-scheme: normal;
+  transition: max-width 0.2s ease;
+}
+
+/* Fullscreen overlay */
+.pg-preview-wrapper.pg-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  border-radius: 0;
+  border: none;
+}
+.pg-preview-wrapper.pg-fullscreen .pg-iframe-area { flex: 1; overflow: auto; }
+.pg-preview-wrapper.pg-fullscreen .pg-iframe { height: 100%; min-height: 100%; }
+
+.pg-static-fallback {
+  margin-top: 16px;
+}
+.pg-static-fallback summary {
+  font-size: 12px;
+  color: var(--color-muted);
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+
+@media (max-width: 768px) {
+  .pg-container { flex-direction: column; }
+  .pg-controls { width: 100%; max-height: none; }
+}
+
+/* Full-width content body (no on-this-page nav) */
+.content-body-full { max-width: none; padding: 0; }
+
+/* Two-column detail layout */
+.detail-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+.detail-main {
+  min-width: 0;
+  padding: 32px 32px 32px 40px;
+}
+.detail-inspector {
+  position: sticky;
+  top: 52px;
+  align-self: start;
+  height: calc(100vh - 52px);
+  overflow-y: auto;
+  border-left: 1px solid var(--color-border);
+  padding: 16px 24px 32px;
+  background: var(--color-bg-subtle);
+}
+.detail-inspector .section { padding: 20px 0; }
+.detail-inspector .section-header { margin-bottom: 12px; }
+.detail-inspector .section-header h2 { font-size: 15px; }
+.detail-inspector .section-header p { font-size: 12px; }
+.detail-inspector .stats-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
+.detail-inspector .stat-card { padding: 10px; }
+.detail-inspector .stat-card .stat-value { font-size: 18px; }
+.detail-inspector .analysis-grid { grid-template-columns: 1fr; gap: 8px; }
+.detail-inspector .composition-lists { grid-template-columns: 1fr; gap: 8px; }
+
+@media (max-width: 1200px) {
+  .detail-columns { grid-template-columns: 1fr; }
+  .detail-main { padding: 20px 16px; }
+  .detail-inspector {
+    position: static;
+    height: auto;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    padding: 20px 16px;
+    background: none;
+  }
+}
+
+/* Icon browser */
+.icon-browser-header { margin-bottom: 24px; }
+.icon-browser-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 4px; }
+.icon-browser-header p { color: var(--color-muted); font-size: 14px; margin: 0; }
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: 2px;
+}
+
+.icon-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  background: none;
+  font-family: var(--font-body);
+  transition: background 0.1s, border-color 0.1s;
+}
+.icon-cell:hover {
+  background: var(--color-bg-subtle);
+  border-color: var(--color-border);
+}
+.icon-cell.selected {
+  background: var(--color-bg-selected);
+  border-color: var(--color-accent);
+}
+
+.icon-cell-preview {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.icon-cell-svg { display: flex; align-items: center; justify-content: center; }
+.icon-cell-svg svg { width: 28px; height: 28px; }
+.icon-no-preview {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-muted);
+}
+
+.icon-cell-name {
+  font-size: 10px;
+  color: var(--color-muted);
+  text-align: center;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Icon slide-out panel */
+.icon-slideout-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-bg);
+  z-index: 200;
+}
+.icon-slideout {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 380px;
+  max-width: 100vw;
+  height: 100vh;
+  background: var(--color-bg);
+  border-left: 1px solid var(--color-border);
+  box-shadow: var(--slideout-shadow);
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  animation: icon-slide-in 0.2s ease-out;
+}
+.icon-slideout[hidden] { display: none; }
+.icon-slideout-overlay[hidden] { display: none; }
+@keyframes icon-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.icon-slideout-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+.icon-slideout-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  word-break: break-word;
+}
+.icon-slideout-close {
+  background: none;
+  border: none;
+  color: var(--color-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.1s, color 0.1s;
+}
+.icon-slideout-close:hover {
+  background: var(--color-bg-subtle);
+  color: var(--color-text);
+}
+
+.icon-slideout-body {
+  flex: 1;
+  padding: 0 24px 24px;
+  overflow-y: auto;
+}
+
+.icon-slideout-preview-lg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 32px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  margin: 20px 0;
+}
+.icon-slideout-preview-lg svg {
+  width: 100%;
+  max-width: 120px;
+  height: auto;
+}
+
+.icon-detail-section {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.icon-detail-section:last-child { border-bottom: none; }
+.icon-detail-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  margin-bottom: 10px;
+}
+
+/* Size previews */
+.icon-size-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+}
+.icon-size-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.icon-size-cell span {
+  font-size: 10px;
+  color: var(--color-muted);
+  font-weight: 500;
+}
+.icon-size-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+/* Action buttons */
+.icon-slideout-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.icon-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 14px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  text-decoration: none;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s, border-color 0.1s;
+}
+.icon-action-btn:hover {
+  background: var(--color-bg-subtle);
+  border-color: var(--color-muted);
+}
+.icon-action-primary {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-on-accent);
+}
+.icon-action-primary:hover {
+  opacity: 0.9;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+/* Compiled size */
+.icon-compiled-size {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Props */
+.icon-prop-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.icon-prop-row:last-child { border-bottom: none; }
+.icon-prop-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+.icon-prop-type {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-accent);
+}
+.icon-prop-meta {
+  font-size: 11px;
+  color: var(--color-muted);
+}
+.icon-prop-required { color: var(--color-error); }
+.icon-prop-optional { color: var(--color-muted); }
+.icon-prop-default {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--color-muted);
+  margin-left: 4px;
+}
+
+/* Keywords */
+.icon-keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.icon-keyword-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  font-size: 11px;
+  color: var(--color-muted);
+}
+
+/* Usage list */
+.icon-usage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.icon-usage-link {
+  display: block;
+  padding: 4px 0;
+  font-size: 13px;
+  color: var(--color-accent);
+  text-decoration: none;
+}
+.icon-usage-link:hover { text-decoration: underline; }
+
+@media (max-width: 768px) {
+  .icon-slideout { width: 100vw; }
+}
+
+/* CMD-K trigger button */
+.cmdk-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 6px 10px 6px 12px;
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--color-muted);
+  background: var(--color-bg-subtle);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  height: 34px;
+  min-width: 200px;
+}
+.cmdk-trigger:hover {
+  border-color: var(--color-muted);
+  color: var(--color-text);
+}
+.cmdk-trigger svg { flex-shrink: 0; opacity: 0.5; }
+.cmdk-trigger span { flex: 1; text-align: left; }
+.cmdk-trigger kbd {
+  font-family: var(--font-body);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 5px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-bg);
+  color: var(--color-muted);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+/* CMD-K overlay */
+.cmdk-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-bg);
+  z-index: 300;
+  animation: cmdk-fade-in 0.1s ease-out;
+}
+.cmdk-overlay[hidden] { display: none; }
+
+@keyframes cmdk-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* CMD-K dialog */
+.cmdk-dialog {
+  position: fixed;
+  top: min(20vh, 140px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 520px;
+  max-width: calc(100vw - 32px);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  box-shadow: 0 16px 70px rgba(0,0,0,0.2);
+  z-index: 301;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: cmdk-dialog-in 0.15s ease-out;
+}
+.cmdk-dialog[hidden] { display: none; }
+
+@keyframes cmdk-dialog-in {
+  from { opacity: 0; transform: translateX(-50%) scale(0.96); }
+  to { opacity: 1; transform: translateX(-50%) scale(1); }
+}
+
+/* CMD-K input */
+.cmdk-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+.cmdk-input-wrapper svg { flex-shrink: 0; color: var(--color-muted); }
+.cmdk-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  font-family: var(--font-body);
+  font-size: 15px;
+  color: var(--color-text);
+  padding: 0;
+}
+.cmdk-input::placeholder { color: var(--color-muted); }
+
+/* CMD-K results list */
+.cmdk-list {
+  max-height: 340px;
+  overflow-y: auto;
+  padding: 6px;
+}
+.cmdk-list:empty { display: none; }
+
+.cmdk-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--radius);
+  text-decoration: none;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: background 0.06s;
+}
+.cmdk-item-active {
+  background: var(--color-bg-selected);
+}
+.cmdk-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  color: var(--color-muted);
+  flex-shrink: 0;
+}
+.cmdk-item-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cmdk-item-collection {
+  font-size: 11px;
+  color: var(--color-muted);
+  flex-shrink: 0;
+}
+.cmdk-item-type {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-muted);
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+/* CMD-K empty state */
+.cmdk-empty {
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--color-muted);
+  font-size: 13px;
+}
+.cmdk-empty[hidden] { display: none; }
+
+/* CMD-K footer */
+.cmdk-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border);
+  font-size: 11px;
+  color: var(--color-muted);
+}
+.cmdk-footer kbd {
+  font-family: var(--font-body);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  background: var(--color-bg-subtle);
+  margin-right: 2px;
+}
+
+@media (max-width: 768px) {
+  .cmdk-trigger { min-width: 0; }
+  .cmdk-trigger span { display: none; }
+  .cmdk-dialog { top: 16px; }
+}
+
+/* Token browser */
+.tb-header { margin-bottom: 24px; }
+.tb-header h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; }
+.tb-header p { color: var(--color-muted); font-size: 14px; margin: 0; }
+.tb-updated { font-size: 12px; color: var(--color-muted); }
+
+.tb-section {
+  padding: 28px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.tb-section:last-child { border-bottom: none; }
+.tb-section-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 16px;
+  text-transform: capitalize;
+}
+
+/* Color scales */
+.tb-scale { margin-bottom: 20px; }
+.tb-scale-name {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--color-muted);
+  margin-bottom: 6px;
+  letter-spacing: 0.03em;
+}
+.tb-scale-row {
+  display: flex;
+  gap: 0;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.tb-swatch {
+  flex: 1;
+  min-width: 0;
+  padding: 24px 6px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  cursor: default;
+  transition: transform 0.1s, box-shadow 0.1s;
+  position: relative;
+}
+.tb-swatch:hover {
+  transform: scaleY(1.08);
+  z-index: 1;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+.tb-swatch-label {
+  font-size: 10px;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.tb-swatch-value {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* Swatch pair (light + dark) */
+.tb-swatch-pair {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.tb-swatch-pair .tb-swatch {
+  border-radius: 0;
+  border: none;
+}
+.tb-swatch-dark {
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+}
+.tb-swatch-dark .tb-swatch-value {
+  font-size: 8px;
+  font-family: var(--font-mono);
+  opacity: 0.8;
+}
+
+.tb-standalone-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+.tb-swatch-pair-single {
+  display: flex;
+  flex-direction: column;
+  width: 80px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+.tb-swatch-pair-single .tb-swatch-single {
+  border: none;
+  border-radius: 0;
+  width: auto;
+  min-width: auto;
+  flex: none;
+}
+.tb-swatch-dark-single {
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+}
+.tb-swatch-dark-single .tb-swatch-value {
+  font-size: 8px;
+  font-family: var(--font-mono);
+  opacity: 0.8;
+}
+.tb-swatch-single {
+  width: 80px;
+  min-width: 80px;
+  flex: 0 0 80px;
+  height: 72px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  justify-content: flex-end;
+}
+
+/* Scale badge */
+.tb-scale-badge {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--color-bg-code);
+  color: var(--color-code-text);
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+/* Spacing */
+.tb-spacing-row {
+  display: grid;
+  grid-template-columns: 140px 80px 1fr;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.tb-spacing-row:last-child { border-bottom: none; }
+.tb-spacing-label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+.tb-spacing-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-muted);
+}
+.tb-spacing-bar-wrapper {
+  height: 20px;
+  background: var(--color-bg-subtle);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.tb-spacing-bar {
+  height: 100%;
+  background: var(--color-accent);
+  border-radius: 3px;
+  opacity: 0.5;
+  min-width: 2px;
+}
+
+/* Typography */
+.tb-typo-row {
+  display: grid;
+  grid-template-columns: 160px 1fr auto;
+  align-items: baseline;
+  gap: 16px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.tb-typo-row:last-child { border-bottom: none; }
+.tb-typo-label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+}
+.tb-typo-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-muted);
+}
+.tb-typo-sample {
+  font-size: 18px;
+  color: var(--color-text);
+}
+
+/* Generic table */
+.tb-generic-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.tb-generic-table th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-muted);
+  padding: 8px 12px;
+  border-bottom: 2px solid var(--color-border);
+}
+.tb-generic-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+.tb-generic-table tr:last-child td { border-bottom: none; }
+.tb-generic-path {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-accent);
+}
+.tb-generic-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.tb-generic-type {
+  font-size: 11px;
+  color: var(--color-muted);
+  text-transform: capitalize;
+}
+
+@media (max-width: 768px) {
+  .tb-scale-row { flex-wrap: wrap; }
+  .tb-swatch { min-width: 48px; }
+  .tb-spacing-row { grid-template-columns: 1fr 1fr; }
+  .tb-spacing-bar-wrapper { display: none; }
+  .tb-typo-row { grid-template-columns: 1fr 1fr; }
+}`;
+  return `<style>
+${css}
+</style>`;
+}
+
+// src/templates/layout.ts
+function buildSearchItems(data) {
+  const items = [];
+  const basePath = data.options.basePath;
+  const iconPatterns = data.options.iconPatterns;
+  for (const [name, component] of Object.entries(data.manifest.components)) {
+    const isIcon = iconPatterns.length > 0 && iconPatterns.some(
+      (p) => matchGlob(p, component.filePath) || matchGlob(p, component.displayName)
+    );
+    if (component.internal && !isIcon) continue;
+    items.push({
+      name,
+      type: isIcon ? "icon" : "component",
+      url: `${basePath}${slugify(name)}.html`,
+      collection: component.collection,
+      keywords: (component.keywords ?? []).join(" ")
+    });
+  }
+  return items.sort((a, b) => a.name.localeCompare(b.name));
+}
+function sidebarLinks(data, currentSlug) {
+  const { components } = data.manifest;
+  const collections = data.manifest.collections ?? [];
+  const basePath = data.options.basePath;
+  const hasIcons = data.options.iconPatterns.length > 0;
+  const visibleEntries = Object.entries(components).filter(([, c]) => !c.internal);
+  const collectionMap = /* @__PURE__ */ new Map();
+  for (const col of collections) {
+    collectionMap.set(col.name, []);
+  }
+  const ungrouped = [];
+  for (const [name, component] of visibleEntries) {
+    if (component.collection) {
+      if (!collectionMap.has(component.collection)) {
+        collectionMap.set(component.collection, []);
+      }
+      collectionMap.get(component.collection)?.push(name);
+    } else {
+      ungrouped.push(name);
+    }
+  }
+  const hasAnyCollections = collectionMap.size > 0 || ungrouped.length < visibleEntries.length;
+  function renderLinks(names) {
+    return names.sort().map((name) => {
+      const slug = slugify(name);
+      const isActive = slug === currentSlug;
+      return `<a href="${basePath}${slug}.html" class="${isActive ? "active" : ""}">${escapeHtml(name)}</a>`;
+    }).join("\n");
+  }
+  const hasTokens = (data.tokenEntries?.length ?? 0) > 0;
+  const overviewLink = `<a href="${basePath}index.html" class="${currentSlug === null ? "active" : ""}">Overview</a>`;
+  const tokensLink = hasTokens ? `<a href="${basePath}tokens.html" class="${currentSlug === "tokens" ? "active" : ""}">Tokens</a>` : "";
+  const iconsLink = hasIcons ? `<a href="${basePath}icons.html" class="${currentSlug === "icons" ? "active" : ""}">Icons</a>` : "";
+  if (!hasAnyCollections) {
+    const links = renderLinks(visibleEntries.map(([name]) => name));
+    return `${overviewLink}
+${tokensLink}
+${iconsLink}
+<div class="sidebar-heading">Components</div>
+${links}`;
+  }
+  const sections = [overviewLink];
+  if (tokensLink) sections.push(tokensLink);
+  if (iconsLink) sections.push(iconsLink);
+  for (const [colName, names] of collectionMap) {
+    if (names.length === 0) continue;
+    sections.push(
+      `<div class="sidebar-collection-header">${escapeHtml(colName)}</div>
+${renderLinks(names)}`
+    );
+  }
+  if (ungrouped.length > 0) {
+    sections.push(
+      `<div class="sidebar-collection-header">Ungrouped</div>
+${renderLinks(ungrouped)}`
+    );
+  }
+  return sections.join("\n");
+}
+function htmlShell(options) {
+  const {
+    title,
+    body,
+    sidebar,
+    onThisPage,
+    basePath,
+    searchItems = [],
+    breadcrumbs = []
+  } = options;
+  const searchItemsJson = JSON.stringify(searchItems).replace(/<\/script>/gi, "<\\/script>");
+  const logoSvg = `<svg class="site-logo" width="22" height="22" viewBox="0 0 1200 1200" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="m627.03 392.79c93.695 14.414 169.37 86.488 180.18 183.79h90.09c18.02 0 18.02 50.449 0 50.449h-90.09c-10.812 93.695-86.488 169.37-180.18 180.18v90.09c0 18.02-50.449 18.02-50.449 0v-90.09c-97.297-10.812-169.37-86.488-183.79-180.18h-86.488c-18.02 0-18.02-50.449 0-50.449h86.488c14.414-97.297 86.488-169.37 183.79-183.79v-86.488c0-18.02 50.449-21.621 50.449 0zm486.49-313.51h-201.8c-18.02 0-18.02-50.449 0-50.449h237.84c7.207 0 14.414 7.207 14.414 14.414v237.84c0 18.02-50.449 18.02-50.449 0zm7.207 1034.2v-201.8c0-18.02 50.449-18.02 50.449 0v237.84c0 7.207-3.6055 14.414-10.812 14.414h-241.44c-18.02 0-18.02-50.449 0-50.449zm-1030.6 7.207h198.2c21.621 0 21.621 50.449 0 50.449h-237.84c-7.207 0-10.812-3.6055-10.812-10.812v-241.44c0-18.02 50.449-18.02 50.449 0zm-10.812-1030.6v198.2c0 21.621-50.449 21.621-50.449 0v-237.84c0-7.207 7.207-10.812 14.414-10.812h237.84c18.02 0 18.02 50.449 0 50.449zm547.75 356.76v129.73h129.73c-10.812-68.469-64.863-118.92-129.73-129.73zm129.73 180.18h-129.73v129.73c64.863-10.812 118.92-64.863 129.73-129.73zm-180.18 129.73v-129.73h-129.73c10.812 64.863 61.262 118.92 129.73 129.73zm-129.73-180.18h129.73v-129.73c-68.469 10.812-118.92 61.262-129.73 129.73z" fill-rule="evenodd"/></svg>`;
+  const searchSvg = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
+  const compSvg = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>`;
+  const iconSvg = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script>(function(){var t=localStorage.getItem('scope-theme');if(t==='dark'||t==='light'){document.documentElement.setAttribute('data-theme',t)}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.setAttribute('data-theme','dark')}else{document.documentElement.setAttribute('data-theme','light')}})();</script>
+  <title>${escapeHtml(title)}</title>
+  ${generateCSS()}
+</head>
+<body>
+  <nav class="top-nav">
+    <a class="site-title" href="${basePath}index.html">${logoSvg}<span>Scope</span></a>${breadcrumbs.length > 0 ? `<nav class="breadcrumbs" aria-label="Breadcrumb">${breadcrumbs.map((b) => b.url ? `<a href="${b.url}">${escapeHtml(b.label)}</a>` : `<span>${escapeHtml(b.label)}</span>`).join("")}</nav>` : ""}
+    <div class="spacer"></div>
+    <button class="cmdk-trigger" id="cmdk-trigger" type="button">
+      ${searchSvg}
+      <span>Search\u2026</span>
+      <kbd>\u2318K</kbd>
+    </button>
+    <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle theme" title="Toggle theme"></button>
+  </nav>
+
+  <div class="cmdk-overlay" id="cmdk-overlay" hidden></div>
+  <div class="cmdk-dialog" id="cmdk-dialog" hidden role="dialog" aria-label="Search components">
+    <div class="cmdk-input-wrapper">
+      ${searchSvg}
+      <input class="cmdk-input" id="cmdk-input" placeholder="Jump to component or icon\u2026" autocomplete="off" spellcheck="false" />
+    </div>
+    <div class="cmdk-list" id="cmdk-list"></div>
+    <div class="cmdk-empty" id="cmdk-empty" hidden>No results found.</div>
+    <div class="cmdk-footer">
+      <span><kbd>\u2191\u2193</kbd> navigate</span>
+      <span><kbd>\u21B5</kbd> open</span>
+      <span><kbd>esc</kbd> close</span>
+    </div>
+  </div>
+
+  <div class="page-layout">
+    <nav class="sidebar" id="sidebar">
+      ${sidebar}
+    </nav>
+    <div class="main-content">
+      <div class="content-body${onThisPage ? "" : " content-body-full"}">
+        ${body}
+      </div>
+      ${onThisPage ? `<nav class="on-this-page">
+        <h4>On this page</h4>
+        ${onThisPage}
+      </nav>` : ""}
+    </div>
+  </div>
+  <script>
+    (function () {
+      var ITEMS = ${searchItemsJson};
+      var overlay = document.getElementById('cmdk-overlay');
+      var dialog = document.getElementById('cmdk-dialog');
+      var input = document.getElementById('cmdk-input');
+      var list = document.getElementById('cmdk-list');
+      var trigger = document.getElementById('cmdk-trigger');
+      var emptyEl = document.getElementById('cmdk-empty');
+      if (!overlay || !dialog || !input || !list || !trigger) return;
+
+      var activeIdx = 0;
+      var filtered = ITEMS.slice();
+      var compIcon = ${JSON.stringify(compSvg)};
+      var icoIcon = ${JSON.stringify(iconSvg)};
+
+      function render() {
+        if (filtered.length === 0) {
+          list.innerHTML = '';
+          list.style.display = 'none';
+          if (emptyEl) emptyEl.hidden = false;
+          return;
+        }
+        if (emptyEl) emptyEl.hidden = true;
+        list.style.display = '';
+        list.innerHTML = filtered.map(function (item, i) {
+          var cls = 'cmdk-item' + (i === activeIdx ? ' cmdk-item-active' : '');
+          var icon = item.type === 'icon' ? icoIcon : compIcon;
+          var col = item.collection ? '<span class="cmdk-item-collection">' + item.collection + '</span>' : '';
+          return '<a class="' + cls + '" href="' + item.url + '" data-idx="' + i + '">' +
+            '<span class="cmdk-item-icon">' + icon + '</span>' +
+            '<span class="cmdk-item-name">' + item.name + '</span>' +
+            col +
+            '<span class="cmdk-item-type">' + item.type + '</span>' +
+            '</a>';
+        }).join('');
+      }
+
+      function filter(q) {
+        if (!q) {
+          filtered = ITEMS.slice();
+        } else {
+          filtered = ITEMS.filter(function (item) {
+            var haystack = item.name.toLowerCase();
+            if (item.collection) haystack += ' ' + item.collection.toLowerCase();
+            if (item.keywords) haystack += ' ' + item.keywords.toLowerCase();
+            return haystack.includes(q);
+          });
+        }
+        activeIdx = 0;
+        render();
+      }
+
+      function open() {
+        overlay.hidden = false;
+        dialog.hidden = false;
+        input.value = '';
+        filter('');
+        input.focus();
+      }
+
+      function close() {
+        overlay.hidden = true;
+        dialog.hidden = true;
+      }
+
+      function scrollActive() {
+        var el = list.querySelector('.cmdk-item-active');
+        if (el) el.scrollIntoView({ block: 'nearest' });
+      }
+
+      document.addEventListener('keydown', function (e) {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+          e.preventDefault();
+          if (dialog.hidden) open(); else close();
+          return;
+        }
+        if (dialog.hidden) return;
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+        if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, filtered.length - 1); render(); scrollActive(); }
+        if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); render(); scrollActive(); }
+        if (e.key === 'Enter') { e.preventDefault(); if (filtered[activeIdx]) window.location.href = filtered[activeIdx].url; }
+      });
+
+      overlay.addEventListener('click', close);
+      trigger.addEventListener('click', open);
+      input.addEventListener('input', function () { filter(input.value.toLowerCase()); });
+
+      list.addEventListener('mousemove', function (e) {
+        var item = e.target.closest('.cmdk-item');
+        if (item) {
+          var idx = parseInt(item.getAttribute('data-idx'), 10);
+          if (idx !== activeIdx) { activeIdx = idx; render(); }
+        }
+      });
+
+      list.addEventListener('click', function (e) {
+        var item = e.target.closest('.cmdk-item');
+        if (item) { e.preventDefault(); window.location.href = item.getAttribute('href'); }
+      });
+    })();
+    (function () {
+      var btn = document.getElementById('theme-toggle');
+      if (!btn) return;
+      var sunSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
+      var moonSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+      function setIcon() {
+        btn.innerHTML = document.documentElement.getAttribute('data-theme') === 'dark' ? moonSvg : sunSvg;
+      }
+      setIcon();
+      btn.addEventListener('click', function () {
+        var current = document.documentElement.getAttribute('data-theme');
+        var next = current === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('scope-theme', next);
+        setIcon();
+      });
+    })();
+  </script>
+</body>
+</html>`;
+}
+
+// src/templates/component-detail.ts
+function notGenerated(message = "Not generated") {
+  return `<div class="not-generated">${escapeHtml(message)}</div>`;
+}
+function renderFailure(message, heuristicFlags = []) {
+  const hintHtml = heuristicFlags.length > 0 ? `<div class="render-failure-hints"><strong>Failure hints:</strong> ${escapeHtml(heuristicFlags.join(", "))}</div>` : "";
+  return `<div class="render-failure"><strong>Render failed:</strong> ${escapeHtml(message)}${hintHtml}</div>`;
+}
+function sectionWrap(id, title, description, content) {
+  return `<section class="section" id="${id}">
+  <div class="section-header">
+    <h2>${escapeHtml(title)}</h2>
+    <p>${escapeHtml(description)}</p>
+  </div>
+  ${content}
+</section>`;
+}
+function renderPlayground(name, data) {
+  const component = data.manifest.components[name];
+  const render = data.renders.get(name);
+  const slug = slugify(name);
+  const allProps = component ? Object.entries(component.props) : [];
+  const ownProps = allProps.filter(([, p]) => p.source !== "inherited");
+  const editableTypes = /* @__PURE__ */ new Set([
+    "string",
+    "number",
+    "boolean",
+    "union",
+    "array",
+    "any",
+    "unknown",
+    "other",
+    "node",
+    "element"
+  ]);
+  const editableProps = ownProps.filter(([, p]) => editableTypes.has(p.type));
+  const hasChildren = allProps.some(([n]) => n === "children");
+  const childrenInEditable = editableProps.some(([n]) => n === "children");
+  if (hasChildren && !childrenInEditable) {
+    const childrenProp = allProps.find(([n]) => n === "children");
+    if (childrenProp) editableProps.unshift(childrenProp);
+  }
+  const scopeDefaults = data.playgroundDefaults?.get(name) ?? {};
+  function getOverrideDefault(propName, prop) {
+    const scopeVal = scopeDefaults[propName];
+    if (scopeVal !== void 0) return String(scopeVal);
+    if (propName === "children" && (prop.type === "node" || prop.type === "element")) return name;
+    return void 0;
+  }
+  const controlsHtml = editableProps.length > 0 ? `<div class="pg-controls" id="pg-controls-${escapeHtml(slug)}">
+  <div class="pg-controls-header">Props</div>
+  ${editableProps.map(([n, p]) => propControlHtml(n, p, getOverrideDefault(n, p))).join("\n  ")}
+</div>` : "";
+  const iframeSrc = `${data.options.basePath}playground/${slug}.html`;
+  const svgSun = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
+  const svgMoon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+  const svgMonitor = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>';
+  const svgPhone = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>';
+  const svgTablet = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>';
+  const svgExpand = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+  const svgClose = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+  const es = escapeHtml(slug);
+  const playgroundHtml = render?.errorMessage ? "" : `<div class="pg-container" id="pg-container-${es}">
+  ${controlsHtml}
+  <div class="pg-preview-wrapper" id="pg-preview-${es}">
+    <div class="pg-toolbar" id="pg-toolbar-${es}">
+      <button class="pg-toolbar-btn pg-theme-btn" id="pg-theme-${es}" title="Toggle dark mode">${svgSun}</button>
+      <span class="pg-toolbar-sep"></span>
+      <button class="pg-toolbar-btn pg-device-btn active" data-width="" title="Auto">${svgMonitor}</button>
+      <button class="pg-toolbar-btn pg-device-btn" data-width="375" title="Mobile (375px)">${svgPhone}</button>
+      <button class="pg-toolbar-btn pg-device-btn" data-width="768" title="Tablet (768px)">${svgTablet}</button>
+      <span class="pg-toolbar-sep"></span>
+      <span class="pg-toolbar-spacer"></span>
+      <button class="pg-toolbar-btn pg-fullscreen-btn" id="pg-fs-${es}" title="Fullscreen">${svgExpand}</button>
+    </div>
+    <div class="pg-iframe-area" id="pg-iframe-area-${es}">
+      <iframe
+        class="pg-iframe"
+        id="pg-iframe-${es}"
+        src="${escapeHtml(iframeSrc)}"
+        loading="lazy"
+        allowtransparency="true"
+      ></iframe>
+    </div>
+  </div>
+</div>
+<script>
+(function() {
+  var iframe = document.getElementById("pg-iframe-${es}");
+  var container = document.getElementById("pg-container-${es}");
+  var preview = document.getElementById("pg-preview-${es}");
+  var toolbar = document.getElementById("pg-toolbar-${es}");
+  var iframeArea = document.getElementById("pg-iframe-area-${es}");
+  var themeBtn = document.getElementById("pg-theme-${es}");
+  var fsBtn = document.getElementById("pg-fs-${es}");
+  if (!iframe || !container || !preview) return;
+
+  // --- Props ---
+  function collectProps() {
+    var props = {};
+    var controls = container.querySelectorAll("[data-prop-name]");
+    for (var i = 0; i < controls.length; i++) {
+      var el = controls[i];
+      var propName = el.getAttribute("data-prop-name");
+      if (!propName) continue;
+      if (el.type === "checkbox") {
+        props[propName] = el.checked;
+      } else {
+        var v = (el.value || "").trim();
+        if (v === "") continue;
+        try { props[propName] = JSON.parse(v); } catch(_) { props[propName] = v; }
+      }
+    }
+    return props;
+  }
+
+  function sendProps() {
+    if (!iframe.contentWindow) return;
+    iframe.contentWindow.postMessage({ type: "scope-playground-props", props: collectProps() }, "*");
+  }
+
+  var propsSent = false;
+  function sendOnce() {
+    if (!propsSent) {
+      propsSent = true;
+      setTimeout(function() { sendProps(); applyTheme(); }, 50);
+    }
+  }
+  iframe.addEventListener("load", sendOnce);
+  try { if (iframe.contentDocument && iframe.contentDocument.readyState === "complete") sendOnce(); } catch(e) {}
+  container.addEventListener("input", sendProps);
+  container.addEventListener("change", sendProps);
+
+  window.addEventListener("message", function(e) {
+    if (e.data && e.data.type === "scope-playground-height" && e.source === iframe.contentWindow) {
+      var h = Math.max(300, e.data.height + 32);
+      iframe.style.height = h + "px";
+    }
+  });
+
+  // --- Dark / Light mode ---
+  var isDark = document.documentElement.getAttribute("data-theme") === "dark";
+  var userOverride = false;
+
+  function applyTheme() {
+    themeBtn.innerHTML = isDark ? ${JSON.stringify(svgMoon)} : ${JSON.stringify(svgSun)};
+    themeBtn.classList.toggle("active", isDark);
+    preview.classList.toggle("pg-dark", isDark);
+    if (iframe.contentWindow) {
+      iframe.contentWindow.postMessage({ type: "scope-playground-theme", theme: isDark ? "dark" : "light" }, "*");
+    }
+  }
+
+  // Apply initial theme from global setting
+  applyTheme();
+
+  themeBtn.addEventListener("click", function() {
+    userOverride = true;
+    isDark = !isDark;
+    applyTheme();
+  });
+
+  // Follow global theme changes unless the user has manually toggled
+  new MutationObserver(function() {
+    if (userOverride) return;
+    isDark = document.documentElement.getAttribute("data-theme") === "dark";
+    applyTheme();
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+
+  // --- Device size ---
+  var deviceBtns = toolbar.querySelectorAll(".pg-device-btn");
+  for (var d = 0; d < deviceBtns.length; d++) {
+    deviceBtns[d].addEventListener("click", function() {
+      for (var j = 0; j < deviceBtns.length; j++) deviceBtns[j].classList.remove("active");
+      this.classList.add("active");
+      var w = this.getAttribute("data-width");
+      iframe.style.maxWidth = w ? w + "px" : "";
+      iframe.style.margin = w ? "0 auto" : "";
+    });
+  }
+
+  // --- Fullscreen ---
+  function exitFullscreen() {
+    preview.classList.remove("pg-fullscreen");
+    fsBtn.innerHTML = ${JSON.stringify(svgExpand)};
+    fsBtn.title = "Fullscreen";
+  }
+  fsBtn.addEventListener("click", function() {
+    var isFs = preview.classList.toggle("pg-fullscreen");
+    fsBtn.innerHTML = isFs ? ${JSON.stringify(svgClose)} : ${JSON.stringify(svgExpand)};
+    fsBtn.title = isFs ? "Exit fullscreen" : "Fullscreen";
+  });
+  document.addEventListener("keydown", function(e) {
+    if (e.key === "Escape" && preview.classList.contains("pg-fullscreen")) exitFullscreen();
+  });
+})();
+</script>`;
+  const renderW = render?.width != null ? render.width : void 0;
+  const renderH = render?.height != null ? render.height : void 0;
+  const renderSizeAttr = renderW != null && renderH != null ? ` width="${renderW}" height="${renderH}"` : "";
+  const playgroundError = render?.errorMessage ? renderFailure(
+    `${render.errorMessage}
+Inspect .reactscope/renders/${name}.error.json and rerun scope render component ${name}.`,
+    render.heuristicFlags ?? []
+  ) : render && !render.screenshot && !render.svgContent ? renderFailure(
+    `No static preview was generated for ${name}. Check .reactscope/run-summary.json and rerun scope render all.`
+  ) : "";
+  const screenshotFallback = render?.screenshot ? `<details class="pg-static-fallback">
+  <summary>Static Preview</summary>
+  <div class="render-preview">
+    <img src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)} render"${renderSizeAttr} />
+  </div>
+</details>` : "";
+  return sectionWrap(
+    "playground",
+    "Playground",
+    "Interactive component preview with prop controls.",
+    `${playgroundError}${playgroundHtml}${screenshotFallback}`
+  );
+}
+function renderProps(name, data) {
+  const component = data.manifest.components[name];
+  if (!component) {
+    return sectionWrap("props", "Props", "Component prop definitions.", notGenerated());
+  }
+  const allProps = Object.entries(component.props);
+  const ownProps = allProps.filter(([, p]) => p.source !== "inherited");
+  const inheritedProps = allProps.filter(([, p]) => p.source === "inherited");
+  function propsTableHtml(rows) {
+    return `<table class="props-table">
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Default</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${rows.map(([n, p]) => propTableRow(n, p)).join("\n    ")}
+  </tbody>
+</table>`;
+  }
+  const GROUP_LABELS = {
+    html: "HTML Attributes",
+    react: "React Props",
+    aria: "ARIA Attributes"
+  };
+  function renderInheritedGroup(groupName, rows) {
+    const label = GROUP_LABELS[groupName] ?? groupName;
+    return `<details class="inherited-group">
+  <summary>${escapeHtml(label)} <span class="inherited-group-count">${rows.length}</span></summary>
+  ${propsTableHtml(rows)}
+</details>`;
+  }
+  if (allProps.length === 0) {
+    return sectionWrap(
+      "props",
+      "Props",
+      "Component prop definitions.",
+      `<p style="color:var(--color-muted);font-size:13px">No props defined.</p>`
+    );
+  }
+  let content;
+  if (inheritedProps.length === 0) {
+    content = propsTableHtml(allProps);
+  } else {
+    const ownTable = ownProps.length > 0 ? propsTableHtml(ownProps) : `<p style="color:var(--color-muted);font-size:13px">No component-specific props.</p>`;
+    const groups = /* @__PURE__ */ new Map();
+    for (const entry of inheritedProps) {
+      const group = entry[1].sourceGroup ?? "other";
+      const list = groups.get(group) ?? [];
+      list.push(entry);
+      groups.set(group, list);
+    }
+    const order = ["html", "react", "aria"];
+    const sortedKeys = [
+      ...order.filter((k) => groups.has(k)),
+      ...[...groups.keys()].filter((k) => !order.includes(k)).sort()
+    ];
+    const groupHtml = sortedKeys.map((key) => renderInheritedGroup(key, groups.get(key) ?? [])).join("\n");
+    content = `${ownTable}
+<div class="inherited-props-section">
+  <div class="inherited-props-heading">${inheritedProps.length} inherited prop${inheritedProps.length === 1 ? "" : "s"}</div>
+  ${groupHtml}
+</div>`;
+  }
+  return sectionWrap(
+    "props",
+    "Props",
+    `${allProps.length} prop${allProps.length === 1 ? "" : "s"} defined.`,
+    content
+  );
+}
+function renderMatrix(name, data) {
+  const render = data.renders.get(name);
+  if (!render?.cells || render.cells.length === 0) {
+    return sectionWrap(
+      "matrix",
+      "Matrix",
+      "Prop combination matrix renders.",
+      render?.errorMessage ? renderFailure(
+        `${render.errorMessage}
+Matrix renders unavailable because the base render failed. Inspect .reactscope/renders/${name}.error.json.`,
+        render.heuristicFlags ?? []
+      ) : notGenerated(
+        "Matrix renders not generated. Run scope render matrix <Component> to produce a matrix."
+      )
+    );
+  }
+  const cells = render.cells;
+  const cols = Math.ceil(Math.sqrt(cells.length));
+  const cellsHtml = cells.map((cell) => {
+    const label = cell.axisValues.join(" / ");
+    const imgHtml = cell.screenshot ? `<img class="scope-screenshot" src="data:image/png;base64,${cell.screenshot}" alt="${escapeHtml(label)}" />` : `<span class="matrix-cell-error">${cell.error ? escapeHtml(cell.error) : "failed"}</span>`;
+    return `<div class="matrix-cell">${imgHtml}<div class="cell-label">${escapeHtml(label)}</div></div>`;
+  }).join("\n");
+  const grid = `<div class="matrix-grid" style="grid-template-columns: repeat(${cols}, 1fr)">
+${cellsHtml}
+</div>`;
+  return sectionWrap("matrix", "Matrix", "Prop combination matrix renders.", grid);
+}
+function renderDocs() {
+  return sectionWrap(
+    "docs",
+    "Docs",
+    "Component documentation.",
+    `<p style="color:var(--color-muted);font-size:13px">No documentation file found for this component.</p>`
+  );
+}
+function renderAnalysis(name, data) {
+  const component = data.manifest.components[name];
+  if (!component) {
+    return sectionWrap("analysis", "Analysis", "Static analysis results.", notGenerated());
+  }
+  const propCount = Object.keys(component.props).length;
+  const hookCount = component.detectedHooks.length;
+  const sideEffectCount = component.sideEffects.fetches.length + (component.sideEffects.timers ? 1 : 0) + component.sideEffects.subscriptions.length + (component.sideEffects.globalListeners ? 1 : 0);
+  const statsGrid = `<div class="stats-grid">
+  <div class="stat-card">
+    <div class="stat-label">Complexity</div>
+    <div class="stat-value"><span class="badge ${component.complexityClass}">${escapeHtml(component.complexityClass)}</span></div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Props</div>
+    <div class="stat-value">${propCount}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Hooks</div>
+    <div class="stat-value">${hookCount}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Side Effects</div>
+    <div class="stat-value">${sideEffectCount}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Export</div>
+    <div class="stat-value" style="font-size:14px">${escapeHtml(component.exportType)}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Memoized</div>
+    <div class="stat-value" style="font-size:14px">${component.memoized ? "Yes" : "No"}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">forwardedRef</div>
+    <div class="stat-value" style="font-size:14px">${component.forwardedRef ? "Yes" : "No"}</div>
+  </div>
+</div>`;
+  function tagList(items) {
+    if (items.length === 0)
+      return `<span style="color:var(--color-muted);font-size:12px">None</span>`;
+    return `<div class="tag-list">${items.map((i) => `<span class="tag">${escapeHtml(i)}</span>`).join("")}</div>`;
+  }
+  const sideEffectItems = [
+    ...component.sideEffects.fetches.map((f) => `fetch: ${f}`),
+    ...component.sideEffects.timers ? ["timers"] : [],
+    ...component.sideEffects.subscriptions.map((s) => `sub: ${s}`),
+    ...component.sideEffects.globalListeners ? ["global listeners"] : []
+  ];
+  const analysisGrid = `<div class="analysis-grid">
+  <div class="analysis-card">
+    <h3>Detected Hooks</h3>
+    <div class="value">${tagList(component.detectedHooks)}</div>
+  </div>
+  <div class="analysis-card">
+    <h3>Required Contexts</h3>
+    <div class="value">${tagList(component.requiredContexts)}</div>
+  </div>
+  <div class="analysis-card">
+    <h3>HOC Wrappers</h3>
+    <div class="value">${tagList(component.hocWrappers)}</div>
+  </div>
+  <div class="analysis-card">
+    <h3>Side Effects</h3>
+    <div class="value">${tagList(sideEffectItems)}</div>
+  </div>
+</div>`;
+  return sectionWrap(
+    "analysis",
+    "Analysis",
+    "Static analysis results for this component.",
+    `${statsGrid}${analysisGrid}`
+  );
+}
+function renderXRay(name, data) {
   const render = data.renders.get(name);
   if (!render?.dom) {
     return sectionWrap(
       "x-ray",
       "X-Ray",
       "DOM structure and computed styles.",
-      notGenerated("X-Ray data not generated. Run scope render with DOM capture enabled.")
+      render?.errorMessage ? renderFailure(
+        `${render.errorMessage}
+X-Ray data unavailable because render failed. Inspect .reactscope/renders/${name}.error.json.`,
+        render.heuristicFlags ?? []
+      ) : notGenerated(
+        "X-Ray data not generated. Run scope render component <Component> with DOM capture enabled."
+      )
     );
   }
   const dom = render.dom;
@@ -766,11 +2574,14 @@ function renderXRay(name, data) {
       if (m?.[1] !== void 0) nodeStylesMap[parseInt(m[1], 10)] = styles;
     }
   }
-  const nodeStylesJson = escapeHtml(JSON.stringify(nodeStylesMap));
+  const nodeStylesJson = JSON.stringify(JSON.stringify(nodeStylesMap)).replace(
+    /<\/script>/gi,
+    "<\\/script>"
+  );
   const treeHtml = `<div class="dom-tree">${renderDOMTree(dom.tree)}</div>`;
   const stylesPanelHtml = `
 <div id="xray-styles-panel-${escapeHtml(name)}" class="xray-styles-panel" style="display:none;margin-top:16px;border:1px solid var(--color-border);border-radius:6px;overflow:hidden">
-  <div class="xray-styles-header" style="padding:8px 12px;background:var(--color-surface-2);font-size:12px;font-weight:600;color:var(--color-muted);display:flex;justify-content:space-between;align-items:center">
+  <div class="xray-styles-header" style="padding:8px 12px;background:var(--color-bg-subtle);font-size:12px;font-weight:600;color:var(--color-muted);display:flex;justify-content:space-between;align-items:center">
     <span id="xray-styles-label-${escapeHtml(name)}">\u2014 no node selected \u2014</span>
     <button onclick="document.getElementById('xray-styles-panel-${escapeHtml(name)}').style.display='none'" style="background:none;border:none;cursor:pointer;color:var(--color-muted);font-size:16px;line-height:1">\xD7</button>
   </div>
@@ -795,7 +2606,7 @@ function renderXRay(name, data) {
     var tag = el.tagName === "DETAILS" ? el.querySelector("summary .dom-tag-open") : el;
     label.textContent = tag ? tag.textContent.trim().slice(0, 60) : "node #" + id;
     body.innerHTML = Object.entries(styles).map(function(e) {
-      return "<tr><td>" + e[0] + "</td><td style="font-family:monospace">" + e[1] + "</td></tr>";
+      return "<tr><td>" + e[0] + "</td><td style='font-family:monospace'>" + e[1] + "</td></tr>";
     }).join("");
     panel.style.display = "block";
     // Highlight selected node
@@ -894,9 +2705,11 @@ function renderComposition(name, data) {
     if (items.length === 0) {
       return `<div class="comp-list"><h3>${escapeHtml(title)}</h3><p style="color:var(--color-muted);font-size:12px">None</p></div>`;
     }
-    const liItems = items.map(
-      (n) => `<li><a href="${data.options.basePath}${slugify(n)}.html">${escapeHtml(n)}</a></li>`
-    ).join("");
+    const liItems = items.map((n) => {
+      const compData = data.manifest.components[n];
+      const internalBadge = compData?.internal === true ? `<span class="badge-internal">internal</span>` : "";
+      return `<li><a href="${data.options.basePath}${slugify(n)}.html">${escapeHtml(n)}</a>${internalBadge}</li>`;
+    }).join("");
     return `<div class="comp-list"><h3>${escapeHtml(title)}</h3><ul>${liItems}</ul></div>`;
   }
   return sectionWrap(
@@ -921,15 +2734,10 @@ function renderComponentDetail(name, data) {
   <div class="meta">${complexityBadge}${memoizedBadge}${exportBadge}</div>
   ${filepath}
 </div>`;
-  const sections = [
+  const mainSections = [
     renderPlayground(name, data),
     renderMatrix(name, data),
     renderDocs(),
-    renderAnalysis(name, data),
-    renderXRay(name, data),
-    renderTokens(name, data),
-    renderAccessibility(name, data),
-    renderComposition(name, data),
     sectionWrap(
       "responsive",
       "Responsive",
@@ -945,34 +2753,105 @@ function renderComponentDetail(name, data) {
       notGenerated("Stress tests not generated. Stress render runs are a future feature.")
     )
   ];
-  const body = `${header}${sections.join("\n")}`;
-  const onThisPage = SECTIONS.map((s) => {
-    const id = s.toLowerCase().replace(/\s+/g, "-");
-    return `<a href="#${id}">${escapeHtml(s)}</a>`;
-  }).join("\n");
-  const componentNames = Object.keys(data.manifest.components);
-  const sidebar = sidebarLinks(componentNames, slug, data.options.basePath);
+  const inspectorSections = [
+    renderProps(name, data),
+    renderXRay(name, data),
+    renderTokens(name, data),
+    renderAccessibility(name, data),
+    renderAnalysis(name, data),
+    renderComposition(name, data)
+  ];
+  const body = `<div class="detail-columns">
+  <div class="detail-main">
+    ${header}
+    ${mainSections.join("\n")}
+  </div>
+  <div class="detail-inspector">
+    ${inspectorSections.join("\n")}
+  </div>
+</div>`;
+  const sidebar = sidebarLinks(data, slug);
+  const basePath = data.options.basePath;
+  const breadcrumbs = [];
+  if (component?.collection) {
+    breadcrumbs.push({
+      label: component.collection,
+      url: `${basePath}index.html#collection-${slugify(component.collection)}`
+    });
+  }
+  breadcrumbs.push({ label: name });
   return htmlShell({
     title: `${name} \u2014 ${data.options.title}`,
     body,
     sidebar,
-    onThisPage,
-    basePath: data.options.basePath
+    onThisPage: "",
+    basePath,
+    searchItems: buildSearchItems(data),
+    breadcrumbs
   });
 }
 
 // src/templates/component-index.ts
+function renderCard(name, data) {
+  const component = data.manifest.components[name];
+  if (!component) return "";
+  const slug = slugify(name);
+  const render = data.renders.get(name);
+  const allPropEntries = Object.entries(component.props);
+  const ownPropCount = allPropEntries.filter(([, p]) => p.source !== "inherited").length;
+  const totalPropCount = allPropEntries.length;
+  const hasInherited = ownPropCount < totalPropCount;
+  const propCount = ownPropCount;
+  const hookCount = component.detectedHooks.length;
+  const previewHtml = render?.screenshot ? `<img class="scope-screenshot" src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)}" />` : `<span class="no-preview">No preview</span>`;
+  return `<a class="component-card" href="${data.options.basePath}${slug}.html" data-name="${escapeHtml(name.toLowerCase())}">
+  <div class="card-preview">${previewHtml}</div>
+  <div class="card-body">
+    <div class="card-name">${escapeHtml(name)}</div>
+    <div class="card-meta">
+      <span>${propCount} prop${propCount === 1 ? "" : "s"}${hasInherited ? ` <span style="color:var(--color-muted)">(+${totalPropCount - ownPropCount})</span>` : ""}</span>
+      <span class="badge ${component.complexityClass}" style="font-size:10px">${escapeHtml(component.complexityClass)}</span>
+      ${hookCount > 0 ? `<span>${hookCount} hooks</span>` : ""}
+    </div>
+  </div>
+</a>`;
+}
 function renderComponentIndex(data) {
-  const components = Object.entries(data.manifest.components);
-  const totalCount = components.length;
-  const simpleCount = components.filter(([, c]) => c.complexityClass === "simple").length;
-  const complexCount = components.filter(([, c]) => c.complexityClass === "complex").length;
-  const memoizedCount = components.filter(([, c]) => c.memoized).length;
+  const allComponents = Object.entries(data.manifest.components);
+  const collections = data.manifest.collections ?? [];
+  const visibleComponents = allComponents.filter(([, c]) => !c.internal);
+  const collectionMap = /* @__PURE__ */ new Map();
+  for (const col of collections) {
+    collectionMap.set(col.name, []);
+  }
+  const ungrouped = [];
+  for (const [name, component] of visibleComponents) {
+    if (component.collection) {
+      if (!collectionMap.has(component.collection)) {
+        collectionMap.set(component.collection, []);
+      }
+      collectionMap.get(component.collection)?.push(name);
+    } else {
+      ungrouped.push(name);
+    }
+  }
+  const totalCount = allComponents.length;
+  const visibleCount = visibleComponents.length;
+  const nonEmptyCollections = [...collectionMap.values()].filter(
+    (names) => names.length > 0
+  ).length;
+  const simpleCount = visibleComponents.filter(([, c]) => c.complexityClass === "simple").length;
+  const complexCount = visibleComponents.filter(([, c]) => c.complexityClass === "complex").length;
+  const memoizedCount = visibleComponents.filter(([, c]) => c.memoized).length;
   const statsGrid = `<div class="stats-grid">
   <div class="stat-card">
     <div class="stat-label">Total Components</div>
     <div class="stat-value">${totalCount}</div>
   </div>
+  <div class="stat-card">
+    <div class="stat-label">Collections</div>
+    <div class="stat-value">${nonEmptyCollections}</div>
+  </div>
   <div class="stat-card">
     <div class="stat-label">Simple</div>
     <div class="stat-value">${simpleCount}</div>
@@ -986,31 +2865,81 @@ function renderComponentIndex(data) {
     <div class="stat-value">${memoizedCount}</div>
   </div>
 </div>`;
-  const cards = components.sort(([a], [b]) => a.localeCompare(b)).map(([name, component]) => {
-    const slug = slugify(name);
-    const render = data.renders.get(name);
-    const propCount = Object.keys(component.props).length;
-    const hookCount = component.detectedHooks.length;
-    const previewHtml = render?.screenshot ? `<img class="scope-screenshot" src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(name)}" />` : `<span class="no-preview">No preview</span>`;
-    return `<a class="component-card" href="${data.options.basePath}${slug}.html" data-name="${escapeHtml(name.toLowerCase())}">
-  <div class="card-preview">${previewHtml}</div>
-  <div class="card-body">
-    <div class="card-name">${escapeHtml(name)}</div>
-    <div class="card-meta">
-      <span>${propCount} props</span>
-      <span class="badge ${component.complexityClass}" style="font-size:10px">${escapeHtml(component.complexityClass)}</span>
-      ${hookCount > 0 ? `<span>${hookCount} hooks</span>` : ""}
-    </div>
+  const hasCollections = collectionMap.size > 0 || visibleComponents.some(([, c]) => c.collection);
+  const collectionDescriptions = /* @__PURE__ */ new Map();
+  for (const col of collections) {
+    if (col.description) {
+      collectionDescriptions.set(col.name, col.description);
+    }
+  }
+  function renderCollectionTile(colName, names, description) {
+    const slug = colName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    const descHtml = description ? `<div class="coll-tile-desc">${escapeHtml(description)}</div>` : "";
+    const thumbs = names.slice(0, 4).map((n) => {
+      const render = data.renders.get(n);
+      return render?.screenshot ? `<img class="coll-thumb" src="data:image/png;base64,${render.screenshot}" alt="${escapeHtml(n)}" />` : `<span class="coll-thumb coll-thumb-empty"></span>`;
+    }).join("");
+    return `<a class="collection-tile" href="#collection-${slug}">
+  <div class="coll-tile-thumbs">${thumbs}</div>
+  <div class="coll-tile-body">
+    <div class="coll-tile-name">${escapeHtml(colName)}</div>
+    ${descHtml}
+    <div class="coll-tile-count">${names.length} component${names.length === 1 ? "" : "s"}</div>
   </div>
 </a>`;
-  }).join("\n");
-  const cardGrid = `<div class="component-grid" id="component-grid">${cards}</div>`;
+  }
+  let collectionGallery = "";
+  if (hasCollections) {
+    const tileParts = [];
+    for (const [colName, names] of collectionMap) {
+      if (names.length === 0) continue;
+      tileParts.push(renderCollectionTile(colName, names, collectionDescriptions.get(colName)));
+    }
+    if (ungrouped.length > 0) {
+      tileParts.push(renderCollectionTile("Ungrouped", ungrouped));
+    }
+    collectionGallery = `<div class="collection-gallery-section">
+  <h2 class="gallery-section-title">Collections</h2>
+  <div class="collection-gallery">${tileParts.join("\n")}</div>
+</div>`;
+  }
+  let cardSections;
+  if (!hasCollections) {
+    const cards = visibleComponents.sort(([a], [b]) => a.localeCompare(b)).map(([name]) => renderCard(name, data)).join("\n");
+    cardSections = `<div class="component-grid" id="component-grid">${cards}</div>`;
+  } else {
+    const sectionParts = [];
+    for (const [colName, names] of collectionMap) {
+      if (names.length === 0) continue;
+      const slug = colName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+      const description = collectionDescriptions.get(colName);
+      const descHtml = description ? `<p>${escapeHtml(description)}</p>` : "";
+      const cards = names.sort().map((name) => renderCard(name, data)).join("\n");
+      sectionParts.push(`<div class="collection-section" id="collection-${slug}">
+  <div class="collection-section-header">
+    <h2>${escapeHtml(colName)}</h2>
+    ${descHtml}
+  </div>
+  <div class="component-grid">${cards}</div>
+</div>`);
+    }
+    if (ungrouped.length > 0) {
+      const cards = ungrouped.sort().map((name) => renderCard(name, data)).join("\n");
+      sectionParts.push(`<div class="collection-section" id="collection-ungrouped">
+  <div class="collection-section-header">
+    <h2>Ungrouped</h2>
+    <p>Components not assigned to a collection.</p>
+  </div>
+  <div class="component-grid">${cards}</div>
+</div>`);
+    }
+    cardSections = `<div id="component-grid">${sectionParts.join("\n")}</div>`;
+  }
   const filterScript = `<script>
 (function () {
   var grid = document.getElementById('component-grid');
-  var search = document.getElementById('sidebar-search');
-  if (!grid || !search) return;
   var indexSearch = document.getElementById('index-search');
+  if (!grid || !indexSearch) return;
   function filter(q) {
     var cards = grid.querySelectorAll('.component-card');
     cards.forEach(function (card) {
@@ -1018,28 +2947,29 @@ function renderComponentIndex(data) {
       card.style.display = name.includes(q) ? '' : 'none';
     });
   }
-  search.addEventListener('input', function () { filter(search.value.toLowerCase()); });
-  if (indexSearch) {
-    indexSearch.addEventListener('input', function () { filter(indexSearch.value.toLowerCase()); });
-  }
+  indexSearch.addEventListener('input', function () { filter(indexSearch.value.toLowerCase()); });
 })();
 </script>`;
   const header = `<div class="index-header">
   <h1>${escapeHtml(data.options.title)}</h1>
-  <p>${totalCount} component${totalCount === 1 ? "" : "s"} analysed</p>
+  <p>${visibleCount} component${visibleCount === 1 ? "" : "s"} analysed</p>
   <input class="search-box" type="search" id="index-search" placeholder="Filter components\u2026" style="margin-top:12px" />
 </div>`;
-  const body = `${header}${statsGrid}${cardGrid}${filterScript}`;
-  const componentNames = Object.keys(data.manifest.components);
-  const sidebar = sidebarLinks(componentNames, null, data.options.basePath);
-  const onThisPage = `<a href="#top">Overview</a>
-<a href="#component-grid">Components</a>`;
+  const body = `${header}${statsGrid}${collectionGallery}${cardSections}${filterScript}`;
+  const sidebar = sidebarLinks(data, null);
+  const onThisPageParts = [`<a href="#top">Overview</a>`];
+  if (hasCollections) {
+    onThisPageParts.push(`<a href="#collection-gallery">Collections</a>`);
+  }
+  onThisPageParts.push(`<a href="#component-grid">Components</a>`);
+  const onThisPage = onThisPageParts.join("\n");
   return htmlShell({
     title: data.options.title,
     body,
     sidebar,
     onThisPage,
-    basePath: data.options.basePath
+    basePath: data.options.basePath,
+    searchItems: buildSearchItems(data)
   });
 }
 
@@ -1141,8 +3071,7 @@ function renderDashboard(data) {
   <p style="color:var(--color-muted);font-size:14px">Overview of all ${totalCount} analysed components.</p>
 </div>`;
   const body = `${header}${statsGrid}${complexitySection}${topPropsSection}${complianceSection}`;
-  const componentNames = Object.keys(data.manifest.components);
-  const sidebar = sidebarLinks(componentNames, null, data.options.basePath);
+  const sidebar = sidebarLinks(data, null);
   const onThisPage = `<a href="#top">Overview</a>
 <a href="#complexity">Complexity</a>
 <a href="#top-props">Top by Props</a>
@@ -1152,7 +3081,585 @@ ${data.complianceBatch ? '<a href="#compliance">Compliance</a>' : ""}`;
     body,
     sidebar,
     onThisPage,
-    basePath: data.options.basePath
+    basePath: data.options.basePath,
+    searchItems: buildSearchItems(data),
+    breadcrumbs: [{ label: "Dashboard" }]
+  });
+}
+
+// src/templates/icon-browser.ts
+function isIconComponent(filePath, displayName, patterns) {
+  return patterns.some((p) => matchGlob(p, filePath) || matchGlob(p, displayName));
+}
+function getIconSvg(name, data) {
+  const render = data.renders.get(name);
+  if (render?.svgContent) return render.svgContent;
+  if (render?.dom?.tree) return domTreeToSvg(render.dom.tree);
+  return void 0;
+}
+function generateJsxSnippet(name, component) {
+  const ownProps = Object.entries(component.props).filter(([, p]) => p.source !== "inherited");
+  const propStr = ownProps.filter(([, p]) => p.required).map(([pName, p]) => {
+    if (p.type === "string") return `${pName}=""`;
+    if (p.type === "number") return `${pName}={0}`;
+    if (p.type === "boolean") return pName;
+    return `${pName}={\u2026}`;
+  }).join(" ");
+  const propsSection = propStr ? ` ${propStr}` : "";
+  return `import { ${name} } from "${component.filePath.replace(/\.tsx?$/, "")}";
+
+<${name}${propsSection} />`;
+}
+function renderIconBrowser(data) {
+  const patterns = data.options.iconPatterns;
+  const allComponents = Object.entries(data.manifest.components);
+  const icons = allComponents.filter(([, c]) => isIconComponent(c.filePath, c.displayName, patterns)).sort(([a], [b]) => a.localeCompare(b));
+  const iconDataEntries = icons.map(([name, component]) => {
+    const svg = getIconSvg(name, data);
+    const svgBytes = svg ? new TextEncoder().encode(svg).length : 0;
+    const slug = slugify(name);
+    const keywords = component.keywords ?? [];
+    const usedBy = component.composedBy ?? [];
+    const jsx = generateJsxSnippet(name, component);
+    const ownProps = Object.entries(component.props).filter(([, p]) => p.source !== "inherited").map(([pName, p]) => ({
+      name: pName,
+      type: p.type,
+      rawType: p.rawType,
+      required: p.required,
+      default: p.default,
+      values: p.values
+    }));
+    return {
+      name,
+      slug,
+      svg: svg ?? "",
+      svgBytes,
+      keywords,
+      usedBy,
+      jsx,
+      props: ownProps,
+      filePath: component.filePath
+    };
+  });
+  const iconCards = icons.map(([name]) => {
+    const svg = getIconSvg(name, data);
+    const keywords = (data.manifest.components[name]?.keywords ?? []).join(" ");
+    const slug = slugify(name);
+    const previewHtml = svg ? `<div class="icon-cell-svg">${svg}</div>` : `<span class="icon-no-preview">${escapeHtml(name.slice(0, 2))}</span>`;
+    return `<button class="icon-cell" data-name="${escapeHtml(name.toLowerCase())}" data-slug="${slug}" data-keywords="${escapeHtml(keywords.toLowerCase())}" type="button">
+  <div class="icon-cell-preview">${previewHtml}</div>
+  <div class="icon-cell-name">${escapeHtml(name)}</div>
+</button>`;
+  }).join("\n");
+  const slideOutPanel = `<div class="icon-slideout-overlay" id="icon-slideout-overlay" hidden></div>
+<div class="icon-slideout" id="icon-slideout" hidden>
+  <div class="icon-slideout-header">
+    <h2 class="icon-slideout-name" id="icon-slideout-name"></h2>
+    <button class="icon-slideout-close" id="icon-slideout-close" type="button" aria-label="Close">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  </div>
+
+  <div class="icon-slideout-body">
+    <div class="icon-slideout-preview-lg" id="icon-slideout-preview-lg"></div>
+
+    <div class="icon-detail-section">
+      <div class="icon-detail-section-title">Sizes</div>
+      <div class="icon-size-row">
+        <div class="icon-size-cell"><div class="icon-size-preview" id="icon-size-lg"></div><span>lg (48)</span></div>
+        <div class="icon-size-cell"><div class="icon-size-preview" id="icon-size-md"></div><span>md (32)</span></div>
+        <div class="icon-size-cell"><div class="icon-size-preview" id="icon-size-sm"></div><span>sm (24)</span></div>
+        <div class="icon-size-cell"><div class="icon-size-preview" id="icon-size-xs"></div><span>xs (16)</span></div>
+      </div>
+    </div>
+
+    <div class="icon-detail-section">
+      <div class="icon-slideout-actions">
+        <a class="icon-action-btn icon-action-primary" id="icon-slideout-link" href="#">View component page</a>
+        <button class="icon-action-btn" id="icon-copy-svg" type="button">Copy SVG</button>
+        <button class="icon-action-btn" id="icon-copy-jsx" type="button">Copy JSX</button>
+      </div>
+    </div>
+
+    <div class="icon-detail-section">
+      <div class="icon-detail-section-title">Compiled size</div>
+      <div class="icon-compiled-size" id="icon-compiled-size"></div>
+    </div>
+
+    <div class="icon-detail-section" id="icon-props-section" hidden>
+      <div class="icon-detail-section-title">Props</div>
+      <div id="icon-props-list"></div>
+    </div>
+
+    <div class="icon-detail-section" id="icon-keywords-section" hidden>
+      <div class="icon-detail-section-title">Keywords</div>
+      <div class="icon-keywords" id="icon-keywords"></div>
+    </div>
+
+    <div class="icon-detail-section" id="icon-usage-section" hidden>
+      <div class="icon-detail-section-title">Used by</div>
+      <div class="icon-usage-list" id="icon-usage-list"></div>
+    </div>
+  </div>
+</div>`;
+  const body = `<div class="icon-browser">
+  <div class="icon-browser-header">
+    <h1>Icons</h1>
+    <p>${icons.length} icon${icons.length === 1 ? "" : "s"}</p>
+    <input class="search-box" type="search" id="icon-search" placeholder="Search icons\u2026" style="margin-top:12px" />
+  </div>
+  <div class="icon-grid" id="icon-grid">
+    ${iconCards}
+  </div>
+</div>
+${slideOutPanel}
+<script>
+(function () {
+  var ICON_DATA = ${JSON.stringify(iconDataEntries)};
+  var grid = document.getElementById('icon-grid');
+  var search = document.getElementById('icon-search');
+  var slideout = document.getElementById('icon-slideout');
+  var overlay = document.getElementById('icon-slideout-overlay');
+  var closeBtn = document.getElementById('icon-slideout-close');
+  var nameEl = document.getElementById('icon-slideout-name');
+  var previewLg = document.getElementById('icon-slideout-preview-lg');
+  var sizeLg = document.getElementById('icon-size-lg');
+  var sizeMd = document.getElementById('icon-size-md');
+  var sizeSm = document.getElementById('icon-size-sm');
+  var sizeXs = document.getElementById('icon-size-xs');
+  var linkEl = document.getElementById('icon-slideout-link');
+  var copySvgBtn = document.getElementById('icon-copy-svg');
+  var copyJsxBtn = document.getElementById('icon-copy-jsx');
+  var compiledSizeEl = document.getElementById('icon-compiled-size');
+  var propsSection = document.getElementById('icon-props-section');
+  var propsList = document.getElementById('icon-props-list');
+  var keywordsSection = document.getElementById('icon-keywords-section');
+  var keywordsEl = document.getElementById('icon-keywords');
+  var usageSection = document.getElementById('icon-usage-section');
+  var usageList = document.getElementById('icon-usage-list');
+  var basePath = ${JSON.stringify(data.options.basePath)};
+  var currentData = null;
+
+  if (!grid) return;
+
+  function filter(q) {
+    var cells = grid.querySelectorAll('.icon-cell');
+    cells.forEach(function (cell) {
+      var name = cell.getAttribute('data-name') || '';
+      var kw = cell.getAttribute('data-keywords') || '';
+      var show = name.includes(q) || kw.includes(q);
+      cell.style.display = show ? '' : 'none';
+    });
+  }
+
+  if (search) {
+    search.addEventListener('input', function () { filter(search.value.toLowerCase()); });
+  }
+
+  function setSvgSize(container, svg, px) {
+    if (!container || !svg) return;
+    container.innerHTML = svg;
+    var svgEl = container.querySelector('svg');
+    if (svgEl) { svgEl.setAttribute('width', String(px)); svgEl.setAttribute('height', String(px)); }
+  }
+
+  function openSlideout(slug) {
+    var iconData = ICON_DATA.find(function (d) { return d.slug === slug; });
+    if (!iconData || !slideout) return;
+    currentData = iconData;
+
+    if (nameEl) nameEl.textContent = iconData.name;
+    if (previewLg) previewLg.innerHTML = iconData.svg;
+
+    setSvgSize(sizeLg, iconData.svg, 48);
+    setSvgSize(sizeMd, iconData.svg, 32);
+    setSvgSize(sizeSm, iconData.svg, 24);
+    setSvgSize(sizeXs, iconData.svg, 16);
+
+    if (linkEl) linkEl.href = basePath + iconData.slug + '.html';
+
+    if (compiledSizeEl) {
+      var bytes = iconData.svgBytes;
+      var label = bytes < 1024 ? bytes + ' B' : (bytes / 1024).toFixed(1) + ' KB';
+      compiledSizeEl.textContent = label;
+    }
+
+    if (propsSection && propsList) {
+      if (iconData.props.length > 0) {
+        propsSection.hidden = false;
+        propsList.innerHTML = iconData.props.map(function (p) {
+          var typeStr = p.values && p.values.length > 0 ? p.values.join(' | ') : p.rawType;
+          var reqStr = p.required ? '<span class="icon-prop-required">required</span>' : '<span class="icon-prop-optional">optional</span>';
+          var defStr = p.default ? ' <span class="icon-prop-default">' + p.default + '</span>' : '';
+          return '<div class="icon-prop-row"><div class="icon-prop-name">' + p.name + '</div><div class="icon-prop-type">' + typeStr + '</div><div class="icon-prop-meta">' + reqStr + defStr + '</div></div>';
+        }).join('');
+      } else {
+        propsSection.hidden = true;
+      }
+    }
+
+    if (keywordsSection && keywordsEl) {
+      if (iconData.keywords.length > 0) {
+        keywordsSection.hidden = false;
+        keywordsEl.innerHTML = iconData.keywords.map(function (kw) {
+          return '<span class="icon-keyword-tag">' + kw + '</span>';
+        }).join('');
+      } else {
+        keywordsSection.hidden = true;
+      }
+    }
+
+    if (usageSection && usageList) {
+      if (iconData.usedBy.length > 0) {
+        usageSection.hidden = false;
+        usageList.innerHTML = iconData.usedBy.map(function (u) {
+          var uSlug = u.replace(/([A-Z])/g, function (m) { return '-' + m.toLowerCase(); }).replace(/^-/, '').replace(/[^a-z0-9-]/g, '-');
+          return '<a class="icon-usage-link" href="' + basePath + uSlug + '.html">' + u + '</a>';
+        }).join('');
+      } else {
+        usageSection.hidden = true;
+      }
+    }
+
+    grid.querySelectorAll('.icon-cell.selected').forEach(function (el) { el.classList.remove('selected'); });
+    var activeCell = grid.querySelector('[data-slug="' + slug + '"]');
+    if (activeCell) activeCell.classList.add('selected');
+
+    slideout.hidden = false;
+    if (overlay) overlay.hidden = false;
+  }
+
+  function closeSlideout() {
+    if (slideout) slideout.hidden = true;
+    if (overlay) overlay.hidden = true;
+    currentData = null;
+    grid.querySelectorAll('.icon-cell.selected').forEach(function (el) { el.classList.remove('selected'); });
+  }
+
+  grid.addEventListener('click', function (e) {
+    var cell = e.target.closest('.icon-cell');
+    if (!cell) return;
+    var slug = cell.getAttribute('data-slug');
+    if (slug) openSlideout(slug);
+  });
+
+  if (closeBtn) closeBtn.addEventListener('click', closeSlideout);
+  if (overlay) overlay.addEventListener('click', closeSlideout);
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeSlideout(); });
+
+  function copyToClipboard(text, btn) {
+    navigator.clipboard.writeText(text).then(function () {
+      var orig = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(function () { btn.textContent = orig; }, 1500);
+    });
+  }
+
+  if (copySvgBtn) {
+    copySvgBtn.addEventListener('click', function () {
+      if (currentData && currentData.svg) copyToClipboard(currentData.svg, copySvgBtn);
+    });
+  }
+  if (copyJsxBtn) {
+    copyJsxBtn.addEventListener('click', function () {
+      if (currentData && currentData.jsx) copyToClipboard(currentData.jsx, copyJsxBtn);
+    });
+  }
+})();
+</script>`;
+  const sidebar = sidebarLinks(data, "icons");
+  return htmlShell({
+    title: `Icons \u2014 ${data.options.title}`,
+    body,
+    sidebar,
+    onThisPage: '<a href="#top">Icon Browser</a>',
+    basePath: data.options.basePath,
+    searchItems: buildSearchItems(data),
+    breadcrumbs: [{ label: "Icons" }]
+  });
+}
+
+// src/templates/token-browser.ts
+var HEX_RE = /^#(?:[0-9a-fA-F]{3,8})$/;
+var COLOR_FN_RE = /^(?:rgba?|hsla?|oklch|oklab|lch|lab|color|hwb)\(/;
+function isColorValue(value) {
+  return HEX_RE.test(value) || COLOR_FN_RE.test(value);
+}
+function estimateLuminance(value) {
+  const v = value.trim();
+  if (HEX_RE.test(v)) {
+    const c = v.replace("#", "");
+    const full = c.length <= 4 ? c.slice(0, 3).split("").map((ch) => ch + ch).join("") : c.slice(0, 6);
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  }
+  const rgbMatch = v.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+  if (rgbMatch) {
+    const r = parseFloat(rgbMatch[1] ?? "0");
+    const g = parseFloat(rgbMatch[2] ?? "0");
+    const b = parseFloat(rgbMatch[3] ?? "0");
+    const alphaMatch = v.match(/,\s*([\d.]+)\s*\)$/);
+    const alpha = alphaMatch ? parseFloat(alphaMatch[1] ?? "1") : 1;
+    const blendR = r * alpha + 255 * (1 - alpha);
+    const blendG = g * alpha + 255 * (1 - alpha);
+    const blendB = b * alpha + 255 * (1 - alpha);
+    return (0.299 * blendR + 0.587 * blendG + 0.114 * blendB) / 255;
+  }
+  const oklchMatch = v.match(/^oklch\(\s*([\d.]+)/);
+  if (oklchMatch) {
+    const L = parseFloat(oklchMatch[1] ?? "0.5");
+    return L;
+  }
+  const oklabMatch = v.match(/^oklab\(\s*([\d.]+)/);
+  if (oklabMatch) {
+    return parseFloat(oklabMatch[1] ?? "0.5");
+  }
+  const hslMatch = v.match(/^hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*([\d.]+)%/);
+  if (hslMatch) {
+    return parseFloat(hslMatch[1] ?? "50") / 100;
+  }
+  const colorMixMatch = v.match(/^color-mix\(.*black\s+([\d.]+)%/);
+  if (colorMixMatch) {
+    const blackPct = parseFloat(colorMixMatch[1] ?? "50") / 100;
+    return 1 - blackPct;
+  }
+  return null;
+}
+function contrastColor(value) {
+  const lum = estimateLuminance(value);
+  if (lum === null) return "#fff";
+  return lum > 0.55 ? "#000" : "#fff";
+}
+function groupByTopLevel(tokens) {
+  const map = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    const top = token.path.split(".")[0] ?? "other";
+    if (!map.has(top)) map.set(top, []);
+    map.get(top)?.push(token);
+  }
+  return Array.from(map.entries()).map(([name, toks]) => ({ name, tokens: toks }));
+}
+function renderSwatch(token, darkValue) {
+  const label = token.path.split(".").pop() ?? "";
+  const fg = contrastColor(token.value);
+  const darkHtml = darkValue ? (() => {
+    const darkFg = contrastColor(darkValue);
+    return `<div class="tb-swatch-dark" style="background:${escapeHtml(darkValue)};color:${darkFg}" title="dark: ${escapeHtml(darkValue)}">
+  <span class="tb-swatch-value">${escapeHtml(darkValue)}</span>
+</div>`;
+  })() : "";
+  return `<div class="tb-swatch-pair" title="${escapeHtml(token.path)}: ${escapeHtml(token.value)}">
+  <div class="tb-swatch" style="background:${escapeHtml(token.value)};color:${fg}">
+    <span class="tb-swatch-label">${escapeHtml(label)}</span>
+    <span class="tb-swatch-value">${escapeHtml(token.value)}</span>
+  </div>${darkHtml}
+</div>`;
+}
+function renderColorGroup(group, darkOverrides) {
+  const subgroups = /* @__PURE__ */ new Map();
+  const standalone = [];
+  for (const token of group.tokens) {
+    const parts = token.path.split(".");
+    if (parts.length >= 3) {
+      const sub = parts.slice(0, 2).join(".");
+      if (!subgroups.has(sub)) subgroups.set(sub, []);
+      subgroups.get(sub)?.push(token);
+    } else {
+      standalone.push(token);
+    }
+  }
+  const scaleHtml = Array.from(subgroups.entries()).map(([scaleName, tokens]) => {
+    const hasDark = tokens.some((t) => darkOverrides?.[t.path] !== void 0);
+    const swatches = tokens.map((t) => renderSwatch(t, darkOverrides?.[t.path])).join("\n");
+    const displayName = scaleName.split(".").pop() ?? scaleName;
+    const darkLabel = hasDark ? `<span class="tb-scale-badge">dark</span>` : "";
+    return `<div class="tb-scale">
+  <div class="tb-scale-name">${escapeHtml(displayName)}${darkLabel}</div>
+  <div class="tb-scale-row">${swatches}</div>
+</div>`;
+  }).join("\n");
+  const standaloneHtml = standalone.length > 0 ? `<div class="tb-standalone-colors">${standalone.map((t) => {
+    const label = t.path.split(".").pop() ?? t.path;
+    const darkVal = darkOverrides?.[t.path];
+    const fg = contrastColor(t.value);
+    let darkPart = "";
+    if (darkVal) {
+      const darkFg = contrastColor(darkVal);
+      darkPart = `<div class="tb-swatch-dark-single" style="background:${escapeHtml(darkVal)};color:${darkFg}" title="dark: ${escapeHtml(darkVal)}"><span class="tb-swatch-value">${escapeHtml(darkVal)}</span></div>`;
+    }
+    return `<div class="tb-swatch-pair-single">
+  <div class="tb-swatch tb-swatch-single" style="background:${escapeHtml(t.value)};color:${fg}" title="${escapeHtml(t.path)}: ${escapeHtml(t.value)}">
+    <span class="tb-swatch-label">${escapeHtml(label)}</span>
+    <span class="tb-swatch-value">${escapeHtml(t.value)}</span>
+  </div>${darkPart}
+</div>`;
+  }).join("\n")}</div>` : "";
+  return `<div class="tb-section" id="tb-${escapeHtml(group.name)}">
+  <h2 class="tb-section-title">${escapeHtml(group.name)}</h2>
+  ${scaleHtml}${standaloneHtml}
+</div>`;
+}
+function renderSpacingGroup(group) {
+  const rows = group.tokens.map((t) => {
+    const label = t.path.split(".").slice(1).join(".") || t.path;
+    return `<div class="tb-spacing-row">
+  <div class="tb-spacing-label">${escapeHtml(label)}</div>
+  <div class="tb-spacing-value">${escapeHtml(t.value)}</div>
+  <div class="tb-spacing-bar-wrapper"><div class="tb-spacing-bar" style="width:min(${escapeHtml(t.value)}, 100%)"></div></div>
+</div>`;
+  }).join("\n");
+  return `<div class="tb-section" id="tb-${escapeHtml(group.name)}">
+  <h2 class="tb-section-title">${escapeHtml(group.name)}</h2>
+  ${rows}
+</div>`;
+}
+function renderTypographyGroup(group) {
+  const rows = group.tokens.map((t) => {
+    const label = t.path.split(".").slice(1).join(".") || t.path;
+    const sampleStyle = t.type === "fontFamily" ? `font-family:${escapeHtml(t.value)}` : t.type === "dimension" ? `font-size:${escapeHtml(t.value)}` : "";
+    return `<div class="tb-typo-row">
+  <div class="tb-typo-label">${escapeHtml(label)}</div>
+  <div class="tb-typo-value">${escapeHtml(t.value)}</div>
+  ${sampleStyle ? `<div class="tb-typo-sample" style="${sampleStyle}">Aa</div>` : ""}
+</div>`;
+  }).join("\n");
+  return `<div class="tb-section" id="tb-${escapeHtml(group.name)}">
+  <h2 class="tb-section-title">${escapeHtml(group.name)}</h2>
+  ${rows}
+</div>`;
+}
+function renderGenericGroup(group, darkOverrides) {
+  const isAllColors = group.tokens.every((t) => isColorValue(t.value));
+  if (isAllColors) return renderColorGroup(group, darkOverrides);
+  const hasDarkColumn = group.tokens.some((t) => darkOverrides?.[t.path] !== void 0);
+  const rows = group.tokens.map((t) => {
+    const label = t.path.split(".").slice(1).join(".") || t.path;
+    const swatchHtml = isColorValue(t.value) ? `<span class="token-value-swatch" style="background:${escapeHtml(t.value)}"></span>` : "";
+    const darkVal = darkOverrides?.[t.path];
+    const darkCell = hasDarkColumn ? `<td class="tb-generic-value">${darkVal ? `${isColorValue(darkVal) ? `<span class="token-value-swatch" style="background:${escapeHtml(darkVal)}"></span>` : ""}${escapeHtml(darkVal)}` : `<span style="color:var(--color-muted)">\u2014</span>`}</td>` : "";
+    return `<tr>
+  <td class="tb-generic-path">${escapeHtml(label)}</td>
+  <td class="tb-generic-value">${swatchHtml}${escapeHtml(t.value)}</td>
+  ${darkCell}
+  <td class="tb-generic-type">${escapeHtml(t.type)}</td>
+</tr>`;
+  }).join("\n");
+  const darkHeader = hasDarkColumn ? "<th>Dark</th>" : "";
+  return `<div class="tb-section" id="tb-${escapeHtml(group.name)}">
+  <h2 class="tb-section-title">${escapeHtml(group.name)}</h2>
+  <table class="tb-generic-table">
+    <thead><tr><th>Token</th><th>Value</th>${darkHeader}<th>Type</th></tr></thead>
+    <tbody>${rows}</tbody>
+  </table>
+</div>`;
+}
+function renderGroup(group, darkOverrides) {
+  const allTypes = new Set(group.tokens.map((t) => t.type));
+  const allColors = group.tokens.every((t) => t.type === "color" || isColorValue(t.value));
+  const allDimensions = group.tokens.every((t) => t.type === "dimension");
+  const hasTypography = allTypes.has("fontFamily") || allTypes.has("fontWeight");
+  if (allColors && group.tokens.length > 0) return renderColorGroup(group, darkOverrides);
+  if (allDimensions && group.tokens.length > 0) return renderSpacingGroup(group);
+  if (hasTypography) return renderTypographyGroup(group);
+  return renderGenericGroup(group, darkOverrides);
+}
+function renderTokenBrowser(data) {
+  const tokens = data.tokenEntries ?? [];
+  if (tokens.length === 0) {
+    const body2 = `<div class="tb-header">
+  <h1>Design Tokens</h1>
+  <p>No tokens loaded. Run <code>scope tokens init</code> to generate a token file, then pass <code>--tokens</code> to <code>scope site build</code>.</p>
+</div>`;
+    return htmlShell({
+      title: `Tokens \u2014 ${data.options.title}`,
+      body: body2,
+      sidebar: sidebarLinks(data, "tokens"),
+      onThisPage: "",
+      basePath: data.options.basePath,
+      searchItems: buildSearchItems(data),
+      breadcrumbs: [{ label: "Tokens" }]
+    });
+  }
+  const groups = groupByTopLevel(tokens);
+  const themes = data.tokenThemes ?? {};
+  const darkOverrides = {
+    ...themes["dark"],
+    ...themes["dark-high-contrast"]
+  };
+  const darkCount = Object.keys(darkOverrides).length;
+  const colorGroups = groups.filter(
+    (g) => g.tokens.every((t) => t.type === "color" || isColorValue(t.value))
+  );
+  const otherGroups = groups.filter(
+    (g) => !g.tokens.every((t) => t.type === "color" || isColorValue(t.value))
+  );
+  const totalColors = colorGroups.reduce((sum, g) => sum + g.tokens.length, 0);
+  const totalOther = otherGroups.reduce((sum, g) => sum + g.tokens.length, 0);
+  const meta = data.tokenMeta;
+  const subtitle = meta?.name ? ` \u2014 ${escapeHtml(meta.name)}` : "";
+  const lastUpdated = meta?.lastUpdated ? `<span class="tb-updated">Last updated: ${escapeHtml(meta.lastUpdated)}</span>` : "";
+  const darkStatCard = darkCount > 0 ? `<div class="stat-card"><div class="stat-label">Dark Overrides</div><div class="stat-value">${darkCount}</div></div>` : "";
+  const statsHtml = `<div class="stats-grid" style="margin-bottom:32px">
+  <div class="stat-card"><div class="stat-label">Total Tokens</div><div class="stat-value">${tokens.length}</div></div>
+  <div class="stat-card"><div class="stat-label">Colors</div><div class="stat-value">${totalColors}</div></div>
+  <div class="stat-card"><div class="stat-label">Other</div><div class="stat-value">${totalOther}</div></div>
+  <div class="stat-card"><div class="stat-label">Groups</div><div class="stat-value">${groups.length}</div></div>
+  ${darkStatCard}
+</div>`;
+  const searchHtml = `<input class="search-box" type="search" id="tb-search" placeholder="Search tokens\u2026" style="margin-bottom:24px;width:100%;max-width:400px" />`;
+  const sectionsHtml = groups.map((g) => renderGroup(g, darkCount > 0 ? darkOverrides : void 0)).join("\n");
+  const onThisPage = groups.map(
+    (g) => `<a href="#tb-${escapeHtml(g.name)}">${escapeHtml(g.name)} <span style="opacity:0.5;font-size:10px">(${g.tokens.length})</span></a>`
+  ).join("\n");
+  const body = `<div class="tb-header">
+  <h1>Design Tokens${subtitle}</h1>
+  <p>${tokens.length} tokens across ${groups.length} groups${lastUpdated ? ` \xB7 ${lastUpdated}` : ""}</p>
+</div>
+${statsHtml}
+${searchHtml}
+<div id="tb-sections">
+${sectionsHtml}
+</div>
+<script>
+(function () {
+  var search = document.getElementById('tb-search');
+  var sections = document.getElementById('tb-sections');
+  if (!search || !sections) return;
+
+  search.addEventListener('input', function () {
+    var q = search.value.toLowerCase();
+    var swatches = sections.querySelectorAll('.tb-swatch, .tb-spacing-row, .tb-typo-row, .tb-generic-table tr');
+    var sectionEls = sections.querySelectorAll('.tb-section');
+
+    if (!q) {
+      swatches.forEach(function (el) { el.style.display = ''; });
+      sectionEls.forEach(function (el) { el.style.display = ''; });
+      return;
+    }
+
+    swatches.forEach(function (el) {
+      var title = (el.getAttribute('title') || el.textContent || '').toLowerCase();
+      el.style.display = title.includes(q) ? '' : 'none';
+    });
+
+    sectionEls.forEach(function (sec) {
+      var visible = sec.querySelectorAll('.tb-swatch:not([style*="display: none"]), .tb-spacing-row:not([style*="display: none"]), .tb-typo-row:not([style*="display: none"]), .tb-generic-table tr:not([style*="display: none"])');
+      sec.style.display = visible.length > 0 ? '' : 'none';
+    });
+  });
+})();
+</script>`;
+  return htmlShell({
+    title: `Tokens \u2014 ${data.options.title}`,
+    body,
+    sidebar: sidebarLinks(data, "tokens"),
+    onThisPage,
+    basePath: data.options.basePath,
+    searchItems: buildSearchItems(data),
+    breadcrumbs: [{ label: "Tokens" }]
   });
 }
 
@@ -1177,8 +3684,21 @@ async function buildSite(options) {
   const dashboardHtml = renderDashboard(data);
   await writeFile(join(normalizedOptions.outputDir, "dashboard.html"), dashboardHtml, "utf-8");
   console.log(`[scope/site] \u2713 dashboard.html`);
+  let extraPages = 0;
+  if (normalizedOptions.iconPatterns.length > 0) {
+    const iconsHtml = renderIconBrowser(data);
+    await writeFile(join(normalizedOptions.outputDir, "icons.html"), iconsHtml, "utf-8");
+    console.log(`[scope/site] \u2713 icons.html`);
+    extraPages++;
+  }
+  if (data.tokenEntries && data.tokenEntries.length > 0) {
+    const tokensHtml = renderTokenBrowser(data);
+    await writeFile(join(normalizedOptions.outputDir, "tokens.html"), tokensHtml, "utf-8");
+    console.log(`[scope/site] \u2713 tokens.html (${data.tokenEntries.length} tokens)`);
+    extraPages++;
+  }
   console.log(
-    `[scope/site] Done. Site written to ${normalizedOptions.outputDir} (${componentNames.length + 2} files).`
+    `[scope/site] Done. Site written to ${normalizedOptions.outputDir} (${componentNames.length + 2 + extraPages} files).`
   );
 }