@agent-scope/site 1.18.1 → 1.20.0

package/dist/index.js

@@ -68,21 +68,24 @@ function slugify(name) {
 }
 function renderDOMTree(node, depth = 0) {
   const indent = "  ".repeat(depth);
-  const attrs = Object.entries(node.attrs).map(
-    ([k, v]) => ` <span class="dom-attr-name">${escapeHtml(k)}</span>=<span class="dom-attr-value">"${escapeHtml(v)}"</span>`
-  ).join("");
+  const attrsHtml = Object.entries(node.attrs).map(([k, 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}"` : "";
+  const clickable = node.nodeId !== void 0 ? " dom-node-clickable" : "";
   const hasChildren = node.children.length > 0;
   const hasText = node.text !== void 0 && node.text.trim().length > 0;
   if (!hasChildren && !hasText) {
-    return `${indent}<span class="dom-tag-open">&lt;${escapeHtml(node.tag)}${attrs} /&gt;</span>
+    return `${indent}<span class="dom-tag-open${clickable}"${nodeIdAttr}>&lt;${escapeHtml(node.tag)}${attrsHtml} /&gt;</span>
 `;
   }
   const childrenHtml = node.children.map((child) => renderDOMTree(child, depth + 1)).join("");
   const textHtml = hasText ? `${indent}  <span class="dom-text">${escapeHtml(node.text ?? "")}</span>
 ` : "";
-  return `<details class="dom-node" ${depth < 2 ? "open" : ""}>
-${indent}<summary><span class="dom-tag-open">&lt;${escapeHtml(node.tag)}${attrs}&gt;</span></summary>
-${textHtml}${childrenHtml}${indent}<span class="dom-tag-open">&lt;/${escapeHtml(node.tag)}&gt;</span>
+  return `<details class="dom-node${clickable}" ${depth < 2 ? "open" : ""}${nodeIdAttr}>
+${indent}<summary><span class="dom-tag-open">&lt;${escapeHtml(node.tag)}${attrsHtml}&gt;</span></summary>
+${textHtml}${childrenHtml}${indent}<span class="dom-tag-close">&lt;/${escapeHtml(node.tag)}&gt;</span>
 </details>`;
 }
 function propTableRow(name, prop) {
@@ -298,6 +301,7 @@ body {
   max-width: 100%;
 }
 .render-preview img { display: block; max-width: 100%; }
+.scope-screenshot { zoom: 0.5; display: block; image-rendering: -webkit-optimize-contrast; }
 
 /* Props table */
 .props-table { width: 100%; border-collapse: collapse; font-size: 13px; }
@@ -437,7 +441,7 @@ pre.code-block {
   overflow: hidden;
 }
 .matrix-cell { background: var(--color-bg); padding: 8px; text-align: center; }
-.matrix-cell img { max-width: 100%; border-radius: 2px; }
+.matrix-cell img { border-radius: 2px; }
 .matrix-cell .cell-label { font-size: 10px; color: var(--color-muted); margin-top: 4px; }
 .matrix-header { background: var(--color-bg-subtle); padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--color-muted); }
 
@@ -446,6 +450,13 @@ pre.code-block {
 details.dom-node > summary { cursor: pointer; list-style: none; }
 details.dom-node > summary::-webkit-details-marker { display: none; }
 .dom-tag-open { color: #f07178; }
+.dom-tag-close { color: #f07178; }
+.dom-attr-name { color: #ffcb6b; }
+.dom-attr-value { color: #c3e88d; }
+.dom-text { color: #82aaff; font-style: italic; }
+.dom-node-clickable { cursor: pointer; border-radius: 3px; transition: background 0.1s; }
+.dom-node-clickable:hover, details.dom-node-clickable > summary:hover { background: rgba(255,255,255,0.08); }
+.dom-node-selected, details.dom-node-selected > summary { background: rgba(99,179,237,0.15) !important; outline: 1px solid rgba(99,179,237,0.4); border-radius: 3px; }
 .dom-attr-name { color: #ffcb6b; }
 .dom-attr-value { color: #c3e88d; }
 .dom-text { color: #a0a0b0; font-style: italic; }
@@ -486,7 +497,7 @@ details.dom-node > summary::-webkit-details-marker { display: none; }
   justify-content: center;
   border-bottom: 1px solid var(--color-border);
 }
-.card-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.card-preview img { object-fit: contain; }
 .card-preview .no-preview { color: var(--color-muted); font-size: 12px; }
 .card-body { padding: 12px 16px; }
 .card-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
@@ -506,6 +517,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}
@@ -513,14 +576,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;
@@ -619,8 +722,11 @@ function renderPlayground(name, data) {
     ${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" />
+  <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",
@@ -644,7 +750,7 @@ function renderMatrix(name, data) {
   const cols = Math.ceil(Math.sqrt(cells.length));
   const cellsHtml = cells.map((cell) => {
     const label = cell.axisValues.join(" / ");
-    const imgHtml = cell.screenshot ? `<img 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>`;
+    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)">
@@ -745,25 +851,56 @@ function renderXRay(name, data) {
     );
   }
   const dom = render.dom;
+  const nodeStylesMap = {};
+  if (render.computedStyles) {
+    for (const [key, styles] of Object.entries(render.computedStyles)) {
+      const m = key.match(/^#node-(\d+)$/);
+      if (m?.[1] !== void 0) nodeStylesMap[parseInt(m[1], 10)] = styles;
+    }
+  }
+  const nodeStylesJson = escapeHtml(JSON.stringify(nodeStylesMap));
   const treeHtml = `<div class="dom-tree">${renderDOMTree(dom.tree)}</div>`;
-  const stylesHtml = render.computedStyles && Object.keys(render.computedStyles).length > 0 ? `<details style="margin-top:16px">
-  <summary style="cursor:pointer;font-size:13px;font-weight:600;margin-bottom:8px">Computed Styles</summary>
-  <table class="token-table" style="margin-top:8px">
-    <thead><tr><th>Selector</th><th>Property</th><th>Value</th></tr></thead>
-    <tbody>
-      ${Object.entries(render.computedStyles).flatMap(
-    ([selector, styles]) => Object.entries(styles).map(
-      ([prop, val]) => `<tr><td class="token-path">${escapeHtml(selector)}</td><td>${escapeHtml(prop)}</td><td>${escapeHtml(val)}</td></tr>`
-    )
-  ).join("\n      ")}
-    </tbody>
+  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">
+    <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>
+  <table class="token-table" style="margin:0">
+    <thead><tr><th>Property</th><th>Value</th></tr></thead>
+    <tbody id="xray-styles-body-${escapeHtml(name)}"></tbody>
   </table>
-</details>` : "";
+</div>
+<script>
+(function() {
+  var nodeStyles = JSON.parse(${nodeStylesJson});
+  var container = document.currentScript.parentElement;
+  container.addEventListener("click", function(e) {
+    var el = e.target.closest("[data-node-id]");
+    if (!el) return;
+    var id = parseInt(el.getAttribute("data-node-id"), 10);
+    var styles = nodeStyles[id];
+    if (!styles) return;
+    var panel = document.getElementById("xray-styles-panel-${escapeHtml(name)}");
+    var label = document.getElementById("xray-styles-label-${escapeHtml(name)}");
+    var body = document.getElementById("xray-styles-body-${escapeHtml(name)}");
+    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>";
+    }).join("");
+    panel.style.display = "block";
+    // Highlight selected node
+    container.querySelectorAll(".dom-node-selected").forEach(function(n) { n.classList.remove("dom-node-selected"); });
+    el.classList.add("dom-node-selected");
+  });
+})();
+</script>`;
   return sectionWrap(
     "x-ray",
     "X-Ray",
-    `DOM structure \u2014 ${dom.elementCount} elements.`,
-    `${treeHtml}${stylesHtml}`
+    `DOM structure \u2014 ${dom.elementCount} elements. Click any element to inspect its computed styles.`,
+    `${treeHtml}${stylesPanelHtml}`
   );
 }
 function renderTokens(name, data) {
@@ -849,9 +986,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(
@@ -905,8 +1044,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,
@@ -917,17 +1055,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>
@@ -941,25 +1107,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 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');
@@ -981,12 +1176,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({
@@ -1096,8 +1290,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>