@agent-scope/site 1.19.0 → 1.20.0

package/dist/index.cjs

@@ -71,7 +71,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}"` : "";
@@ -519,6 +519,58 @@ 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; }
+}
+/* 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);
+}
+.sidebar-collection-header:first-child {
+  margin-top: 0;
+  border-top: none;
+}
+
+/* Collection section headers on index page */
+.collection-section {
+  margin-bottom: 40px;
+}
+.collection-section-header {
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--color-border);
+}
+.collection-section-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: var(--color-text);
+}
+.collection-section-header p {
+  font-size: 13px;
+  color: var(--color-muted);
+  margin: 0;
+}
+
+/* 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 #d1d5db;
+  color: #9ca3af;
+  background: #f3f4f6;
+  margin-left: 4px;
+  vertical-align: middle;
+  line-height: 1.4;
 }`;
   return `<style>
 ${css}
@@ -526,14 +578,54 @@ ${css}
 }
 
 // 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>
+function sidebarLinks(data, currentSlug) {
+  const { components } = data.manifest;
+  const collections = data.manifest.collections ?? [];
+  const basePath = data.options.basePath;
+  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");
+  }
+  if (!hasAnyCollections) {
+    const links = renderLinks(visibleEntries.map(([name]) => name));
+    return `<div class="sidebar-heading">Components</div>
 ${links}`;
+  }
+  const sections = [];
+  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 } = options;
@@ -896,9 +988,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(
@@ -952,8 +1046,7 @@ function renderComponentDetail(name, data) {
     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 sidebar = sidebarLinks(data, slug);
   return htmlShell({
     title: `${name} \u2014 ${data.options.title}`,
     body,
@@ -964,17 +1057,45 @@ function renderComponentDetail(name, data) {
 }
 
 // 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 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>
+  </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 totalCount = allComponents.length;
+  const visibleCount = visibleComponents.length;
+  const collectionCount = collections.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">${collectionCount}</div>
+  </div>
   <div class="stat-card">
     <div class="stat-label">Simple</div>
     <div class="stat-value">${simpleCount}</div>
@@ -988,25 +1109,54 @@ 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 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 hasCollections = collectionCount > 0 || visibleComponents.some(([, c]) => c.collection);
+  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 col of collections) {
+      const names = collectionMap.get(col.name) ?? [];
+      if (names.length === 0) continue;
+      const collectionConfig = collections.find((c) => c.name === col.name);
+      const descHtml = collectionConfig?.description ? `<p>${escapeHtml(collectionConfig.description)}</p>` : "";
+      const cards = names.sort().map((name) => renderCard(name, data)).join("\n");
+      sectionParts.push(`<div class="collection-section">
+  <div class="collection-section-header">
+    <h2>${escapeHtml(col.name)}</h2>
+    ${descHtml}
   </div>
-</a>`;
-  }).join("\n");
-  const cardGrid = `<div class="component-grid" id="component-grid">${cards}</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">
+  <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');
@@ -1028,12 +1178,11 @@ function renderComponentIndex(data) {
 </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 body = `${header}${statsGrid}${cardSections}${filterScript}`;
+  const sidebar = sidebarLinks(data, null);
   const onThisPage = `<a href="#top">Overview</a>
 <a href="#component-grid">Components</a>`;
   return htmlShell({
@@ -1143,8 +1292,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>