pattern-dump 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/dev-ui/main.js

@@ -1,26 +1,19 @@
 // ../../packages/contracts/src/dev-protocol.ts
-var SCOPE_BOUNDARY = `## Scope \u2014 the boundary is part of the artifact
-
-**Covers** \u2014 machine-detectable, static, single-render (no browser layout):
-- **HTML content-model** (html-validate) \u2014 nesting/permitted-content violations.
-- **Structural a11y** (axe, alwaysOn tier) \u2014 labels, names, ARIA, roles, image-alt.
-- **Schema** \u2014 required/shape violations against \`component.schema.json\`.
-- **Render outcome** \u2014 blank / error / ok (metadata, never itself a defect).
-
-**Deliberately NOT covered \u2014 named boundaries, not misses:**
-- **Rendered-contrast (axe needsRendering tier)** \u2014 contrast, aria-hidden-focus, duplicate-id-aria.
-  These require real browser layout/paint; the static jsdom sweep cannot produce them. The
-  per-component panel shows them (live iframe); this aggregate does not. Fewer rule types here is a
-  scope boundary, not a gap.
-- **Structural/graph findings** \u2014 dead subtrees, a shared-base "component", flattened variant families.
-  Those are the style graph's lens, not this one.
-- **PD reporting gaps** \u2014 PD under-claiming (e.g. missing provenance) is not a subject defect.
-- **Interactive / behavioural** \u2014 focus traps, keyboard flow, escape handling. Single static render only.
-- **Data-masked** \u2014 a component that renders empty for want of data won't throw the violations it would
-  when populated; findings are annotated with render outcome wherever it is blank.
-
-A component with zero findings is **not "clean" \u2014 it is "clean of static machine-detectable defects."**
-That is the honest claim; never "clean".`;
+var AUDIT_SCOPE = {
+  covered: [
+    { name: "HTML content model", detail: "invalid nesting and content that isn't permitted where it appears (html-validate)." },
+    { name: "Structural accessibility", detail: "labels, accessible names, ARIA attributes, roles and image alternatives (the axe-core rules that don't need layout)." },
+    { name: "Schema", detail: "missing required fields and values of the wrong type, checked against each component's `<name>.schema.json`." },
+    { name: "Render outcome", detail: "whether each component rendered, rendered empty or failed. It is reported with the component, not counted as a defect." }
+  ],
+  notCovered: [
+    { name: "Checks that need a rendered page", detail: "colour contrast, focusable content hidden with aria-hidden, and duplicate ids referenced by ARIA. They need real browser layout; the Console's Diagnostics tab runs them for the component on screen." },
+    { name: "Interaction", detail: "focus traps, keyboard flow and Escape handling. The audit looks at a single static render." },
+    { name: "Structure", detail: "unused components, shared bases and near-duplicate copies. The Relationships tab and `pd export` cover those." },
+    { name: "Components that need data", detail: "a component that renders empty without data can't show the problems it would have with data. Its findings carry the render outcome." }
+  ],
+  note: "No findings means no static, machine-detectable defects, not that a component is fully accessible or correct."
+};
 function buildAuditRollup(graph, opts = {}) {
   const total = graph.components.length;
   const affected = new Set(graph.occurrences.map((o) => o.component));
@@ -62,7 +55,7 @@ function buildAuditRollup(graph, opts = {}) {
     renderOutcomes: { ok: outcomes["ok"] ?? 0, blank: outcomes["blank"] ?? 0, error: outcomes["error"] ?? 0 },
     rulesByBlast,
     perComponent,
-    scope: SCOPE_BOUNDARY
+    scope: AUDIT_SCOPE
   };
 }
 function previewUrl(id, variant, theme) {
@@ -237,8 +230,7 @@ var session = {
   dataCache: null,
   dataRaw: null,
   renderedA11y: [],
-  scanPending: false,
-  lastPdWidth: null
+  scanPending: false
 };
 
 // src/core/runtime.ts
@@ -796,7 +788,7 @@ async function runRenderedA11yScan() {
     }
     const axeWindow = dom.iframe.contentWindow;
     if (!axeWindow.axe) await injectAxe();
-    const root = dom.iframe.contentDocument.querySelector("main") ?? dom.iframe.contentDocument.body;
+    const root = dom.iframe.contentDocument.body;
     const results = await axeWindow.axe.run(root, { runOnly: session.needsRenderingRules });
     if (gen !== scanGen) return;
     session.renderedA11y = mapAxeResults(results);
@@ -983,6 +975,12 @@ var el = (tag, cls, text) => {
   if (text !== void 0) n.textContent = text;
   return n;
 };
+function appendWithCode(parent, text) {
+  text.split("`").forEach((part, i) => {
+    if (part === "") return;
+    parent.appendChild(i % 2 === 1 ? el("code", "audit-scope-code", part) : document.createTextNode(part));
+  });
+}
 function tagBadge(tag) {
   const s = el("span", "audit-tag", `[${tag}]`);
   s.dataset.tag = tag;
@@ -1060,8 +1058,22 @@ function renderAuditView(rollup) {
   }
   const scope = el("details", "audit-scope");
   scope.open = true;
-  scope.appendChild(el("summary", "audit-scope-summary", "Scope \u2014 what this count does and does not cover"));
-  scope.appendChild(el("pre", "audit-scope-body", rollup.scope));
+  scope.appendChild(el("summary", "audit-scope-summary", "Scope: what this count does and does not cover"));
+  const scopeList = (label, items, kind) => {
+    scope.appendChild(el("p", "audit-scope-label", label));
+    const list = el("ul", "audit-scope-list");
+    list.dataset.scope = kind;
+    for (const item of items) {
+      const li = el("li", "audit-scope-item");
+      li.appendChild(el("strong", "audit-scope-name", `${item.name}: `));
+      appendWithCode(li, item.detail);
+      list.appendChild(li);
+    }
+    scope.appendChild(list);
+  };
+  scopeList("Covered: static checks on a single render, without browser layout.", rollup.scope.covered, "covered");
+  scopeList("Not covered:", rollup.scope.notCovered, "not-covered");
+  scope.appendChild(el("p", "audit-scope-note", rollup.scope.note));
   section.appendChild(scope);
   return section;
 }
@@ -1708,6 +1720,133 @@ function withForwarder(doc) {
   return doc.includes("</body>") ? doc.replace("</body>", FORWARDER + "</body>") : doc + FORWARDER;
 }
 
+// src/stage/preview-sizing.ts
+function setVpProp(el2, prop, value) {
+  const cur = parseFloat(el2.style.getPropertyValue(prop)) || 0;
+  if (Math.abs(value - cur) > 1) {
+    el2.style.setProperty(prop, `${value}px`);
+  }
+}
+
+// src/stage/content-width.ts
+var measuring = /* @__PURE__ */ new WeakMap();
+var fitted = /* @__PURE__ */ new WeakMap();
+function fitsContent(frame) {
+  if (frame === dom.iframe) {
+    const vp = store.url.viewport;
+    return (vp === "fit" || vp === "content") && dom.stageView.dataset.layout !== "full";
+  }
+  return frame.closest(".gallery-item") !== null;
+}
+function measureContentWidth(frame) {
+  if (!fitsContent(frame)) {
+    stopMeasuring(frame);
+    return;
+  }
+  frame.classList.add("vp-measuring");
+  frame.style.removeProperty("--vp-w");
+  fitted.delete(frame);
+  measuring.set(frame, frame.clientWidth);
+}
+function stopMeasuring(frame) {
+  measuring.delete(frame);
+  fitted.delete(frame);
+  frame.classList.remove("vp-measuring");
+}
+function remeasureAll() {
+  for (const frame of document.querySelectorAll("#preview-frame, .gallery-item iframe")) {
+    measureContentWidth(frame);
+  }
+}
+function widthThresholds(condition) {
+  const out = [];
+  const px = (n, unit) => parseFloat(n) * (unit.toLowerCase() === "px" ? 1 : 16);
+  for (const query of condition.split(",")) {
+    if (/^\s*(only\s+)?print\b/i.test(query)) continue;
+    for (const m of query.matchAll(/(?:min|max)-(?:width|inline-size)\s*:\s*(-?[\d.]+)(px|r?em)\b/gi)) out.push(px(m[1], m[2]));
+    for (const m of query.matchAll(/(?:width|inline-size)\s*[<>]=?\s*(-?[\d.]+)(px|r?em)\b/gi)) out.push(px(m[1], m[2]));
+    for (const m of query.matchAll(/(-?[\d.]+)(px|r?em)\s*[<>]=?\s*(?:width|inline-size)\b/gi)) out.push(px(m[1], m[2]));
+  }
+  return out;
+}
+function widthConditionsChange(frame, narrow, wide) {
+  const doc = frame.contentDocument;
+  if (!doc) return false;
+  const between = (t) => t >= narrow && t <= wide;
+  const matches = (selector) => {
+    try {
+      return doc.querySelector(selector) !== null;
+    } catch {
+      return true;
+    }
+  };
+  const stylesThePreview = (rules) => {
+    for (const rule of rules ?? []) {
+      const r = rule;
+      if (r.selectorText !== void 0 && matches(r.selectorText)) return true;
+      if (r.cssRules !== void 0 && stylesThePreview(r.cssRules)) return true;
+    }
+    return false;
+  };
+  const visit = (rules) => {
+    for (const rule of rules ?? []) {
+      const r = rule;
+      const condition = r.styleSheet === void 0 && r.media !== void 0 ? r.media.mediaText : r.containerName !== void 0 ? r.conditionText ?? null : null;
+      if (condition !== null && widthThresholds(condition).some(between) && stylesThePreview(r.cssRules)) return true;
+      if (r.styleSheet !== void 0) {
+        const imported = sheetRules(r.styleSheet);
+        if (r.media && widthThresholds(r.media.mediaText).some(between) && stylesThePreview(imported)) return true;
+        if (visit(imported)) return true;
+      } else if (r.cssRules !== void 0 && visit(r.cssRules)) return true;
+    }
+    return false;
+  };
+  return [...doc.styleSheets].some((sheet) => visit(sheetRules(sheet)));
+}
+function sheetRules(sheet) {
+  try {
+    return sheet?.cssRules;
+  } catch {
+    return void 0;
+  }
+}
+function setWidthNow(frame, width) {
+  frame.classList.add("vp-measuring");
+  if (width === null) frame.style.removeProperty("--vp-w");
+  else setVpProp(frame, "--vp-w", width);
+  requestAnimationFrame(() => requestAnimationFrame(() => frame.classList.remove("vp-measuring")));
+}
+function acceptContentWidth(frame, width, at, scroll) {
+  const full = measuring.get(frame);
+  if (full === void 0) {
+    const state = fitted.get(frame);
+    if (state === void 0 || scroll <= at + 1) return false;
+    const parentWidth = frame.parentElement?.clientWidth ?? Infinity;
+    if (state === "measured" && scroll < parentWidth) {
+      fitted.set(frame, "widened");
+      setWidthNow(frame, scroll);
+    } else {
+      fitted.delete(frame);
+      setWidthNow(frame, null);
+    }
+    return true;
+  }
+  if (Math.abs(at - full) > 1) return false;
+  measuring.delete(frame);
+  const narrower = width < full - 1 && !widthConditionsChange(frame, width, full);
+  if (narrower) fitted.set(frame, "measured");
+  setWidthNow(frame, narrower ? width : null);
+  return true;
+}
+function initContentWidth() {
+  let theme = store.local.theme;
+  store.subscribe(() => {
+    if (store.local.theme === theme) return;
+    theme = store.local.theme;
+    remeasureAll();
+  });
+}
+
 // src/stage/viewport.ts
 var PRESETS = {
   mobile: { w: 375, h: 667 },
@@ -1755,7 +1894,7 @@ function syncMarks() {
   }
   const sr = dom.stageView.getBoundingClientRect();
   const EPSILON = 2;
-  if (fr.width >= sr.width - EPSILON || fr.height >= sr.height - EPSILON) {
+  if (dom.iframe.classList.contains("vp-fit") || fr.width >= sr.width - EPSILON || fr.height >= sr.height - EPSILON) {
     dom.markOverlay.hidden = true;
     return;
   }
@@ -1784,19 +1923,14 @@ function applyViewport() {
     dom.iframe.classList.remove("vp-sized");
     dom.iframe.classList.remove("vp-content");
     dom.iframe.classList.add("vp-fit");
+    measureContentWidth(dom.iframe);
   } else if (vp === "content") {
-    const layout = dom.stageView.getAttribute("data-layout") ?? "centered";
-    if (session.lastPdWidth !== null) {
-      dom.iframe.style.setProperty("--vp-w", `${session.lastPdWidth}px`);
-    } else if (layout === "full") {
-      dom.iframe.style.removeProperty("--vp-w");
-    } else {
-      dom.iframe.style.setProperty("--vp-w", "max-content");
-    }
     dom.iframe.classList.remove("vp-sized");
     dom.iframe.classList.remove("vp-fit");
     dom.iframe.classList.add("vp-content");
+    measureContentWidth(dom.iframe);
   } else {
+    stopMeasuring(dom.iframe);
     const p = PRESETS[vp];
     dom.iframe.style.setProperty("--vp-w", `${p.w}px`);
     dom.iframe.classList.add("vp-sized");
@@ -1832,6 +1966,7 @@ function stopDisco() {
 function startDisco() {
   if (vpDisco) return;
   vpDisco = true;
+  stopMeasuring(dom.iframe);
   dom.viewportToolbar.setAttribute("data-disco-active", "");
   dom.vpDiscoBtn.setAttribute("aria-pressed", "true");
   dom.vpDiscoBtn.innerHTML = svgIcon("vp-disco-fill");
@@ -1918,6 +2053,7 @@ function initViewport(onFullscreen) {
   iframeObserver.observe(dom.iframe);
   iframeObserver.observe(dom.stageView);
   dom.iframe.addEventListener("load", () => {
+    measureContentWidth(dom.iframe);
     updateReadout();
     syncFrameFocusListeners();
   });
@@ -2191,6 +2327,7 @@ async function buildVariantsGallery() {
       if (store.local.theme) applyThemeToIframe(f, store.local.theme);
       const h = f.contentDocument?.documentElement?.scrollHeight;
       if (typeof h === "number" && h > 0) f.style.setProperty("--vp-h", `${h}px`);
+      measureContentWidth(f);
     });
     fig.appendChild(h2);
     fig.appendChild(f);
@@ -2231,6 +2368,7 @@ function renderOverview(overview) {
       if (store.local.theme) applyThemeToIframe(f, store.local.theme);
       const h = f.contentDocument?.documentElement?.scrollHeight;
       if (typeof h === "number" && h > 0) f.style.setProperty("--vp-h", `${h}px`);
+      measureContentWidth(f);
     });
     f.src = resourceUrl(previewUrl(item.id, void 0, store.local.theme || void 0));
     fig.appendChild(h2);
@@ -2283,7 +2421,6 @@ async function applyComponent(detail, variant) {
     dom.iframe.srcdoc = _html;
   });
   dom.iframe.style.removeProperty("--vp-h");
-  session.lastPdWidth = null;
   if (isDiscoRunning()) stopDisco();
   applyViewport();
   delete dom.dockEl.dataset.mode;
@@ -2346,33 +2483,98 @@ async function navigate(componentId, variant) {
     await applyComponent(detail, variant);
   } catch (e) {
     console.error("[pd] Navigate error:", e);
+    showStageMessage(`Could not load \u201C${componentId}\u201D: ${e instanceof Error ? e.message : String(e)}`);
   }
 }
+async function navigateUnknown(path, variant) {
+  const res = await fetch(componentUrl(path, variant)).catch(() => null);
+  if (res?.ok) {
+    await applyComponent(await res.json(), variant);
+    return;
+  }
+  showStageMessage(`No component or folder \u201C${path}\u201D.`, closestPaths(path));
+}
+function closestPaths(path) {
+  const all = [];
+  const walk = (nodes) => {
+    for (const n of nodes) {
+      all.push(n.path);
+      if (n.children) walk(n.children);
+    }
+  };
+  walk(session.tree.roots);
+  const name = path.split("/").pop() ?? path;
+  const sameName = all.filter((p) => p.split("/").pop() === name);
+  const near = all.map((p) => ({ p, d: editDistance(p, path) })).filter(({ p, d }) => d <= Math.max(2, Math.floor(path.length / 5)) && !sameName.includes(p)).sort((a, b) => a.d - b.d).map(({ p }) => p);
+  return [...sameName, ...near].slice(0, 3);
+}
+function editDistance(a, b) {
+  const row = Array.from({ length: b.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= a.length; i++) {
+    let prev = row[0];
+    row[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const cur = row[j];
+      row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+      prev = cur;
+    }
+  }
+  return row[b.length];
+}
+function showFolderArea(activePath) {
+  session.current = null;
+  session.currentVariant = null;
+  session.renderedHtmlCache = null;
+  session.rawRenderedHtml = null;
+  session.dataCache = null;
+  session.dataRaw = null;
+  session.stageMode = "single";
+  dom.variantBar.hidden = true;
+  dom.panel.hidden = true;
+  dom.singlePreview.hidden = true;
+  dom.categoryOverview.hidden = false;
+  dom.variantsGalleryEl.hidden = true;
+  dom.stageView.removeAttribute("data-layout");
+  dom.dockEl.dataset.mode = "overview";
+  switchDockTab("console");
+  setActiveTreeItem(activePath);
+}
+function showStageMessage(message, suggestions = []) {
+  showFolderArea("");
+  dom.categoryOverview.innerHTML = "";
+  const box = document.createElement("div");
+  box.className = "stage-message";
+  box.setAttribute("role", "status");
+  const p = document.createElement("p");
+  p.textContent = message;
+  box.appendChild(p);
+  if (suggestions.length > 0) {
+    const intro = document.createElement("p");
+    intro.textContent = "Did you mean:";
+    const list = document.createElement("ul");
+    for (const s of suggestions) {
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.href = routeHref(`/${s}`);
+      a.textContent = s;
+      li.appendChild(a);
+      list.appendChild(li);
+    }
+    box.append(intro, list);
+  }
+  dom.categoryOverview.appendChild(box);
+}
 async function navigateOverview(folderPath) {
   try {
     const res = await fetch(overviewUrl(folderPath));
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     const overview = await res.json();
-    session.current = null;
-    session.currentVariant = null;
-    session.renderedHtmlCache = null;
-    session.rawRenderedHtml = null;
-    session.dataCache = null;
-    session.dataRaw = null;
-    session.stageMode = "single";
-    dom.variantBar.hidden = true;
-    dom.panel.hidden = true;
-    dom.singlePreview.hidden = true;
-    dom.categoryOverview.hidden = false;
-    dom.variantsGalleryEl.hidden = true;
-    dom.stageView.removeAttribute("data-layout");
-    dom.dockEl.dataset.mode = "overview";
-    switchDockTab("console");
-    setActiveTreeItem(folderPath);
+    showFolderArea(folderPath);
     renderOverview(overview);
     await renderPanel();
   } catch (e) {
     console.error("[pd] Overview error:", e);
+    showStageMessage(`Could not load \u201C${folderPath}\u201D: ${e instanceof Error ? e.message : String(e)}`);
   }
 }
 async function navigateVariants(componentId) {
@@ -2546,6 +2748,7 @@ function connectHmr() {
           if (link) link.href = href;
         });
       }
+      void pdLinksLoaded().then(remeasureAll);
       if (store.local.panelTab === "relationships" && session.current) {
         void fetch(componentUrl(session.current.id)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
           session.current = d;
@@ -2618,6 +2821,14 @@ function connectHmr() {
     }
   });
 }
+function pdLinksLoaded() {
+  const links = [...document.querySelectorAll("iframe")].flatMap((f) => [...f.contentDocument?.querySelectorAll("link[data-pd-comp]") ?? []]);
+  return Promise.all(links.map((link) => new Promise((resolve) => {
+    link.addEventListener("load", () => resolve(), { once: true });
+    link.addEventListener("error", () => resolve(), { once: true });
+    setTimeout(resolve, 1e3);
+  }))).then(() => void 0);
+}
 
 // src/app/router.ts
 function resolvePathKind(path) {
@@ -2646,6 +2857,10 @@ async function routeFromCurrentLocation() {
     applyCvd();
   }
   const path = routeFromPathname(window.location.pathname).slice(1);
+  if (!path && window.location.hash.startsWith("#/")) {
+    history.replaceState(history.state, "", routeHref(window.location.hash.slice(1)) + window.location.search);
+    return routeFromCurrentLocation();
+  }
   const variant = window.location.hash.slice(1) || void 0;
   if (!path) return;
   if (path.endsWith("/variants")) {
@@ -2662,16 +2877,10 @@ async function routeFromCurrentLocation() {
     } else {
       await navigate(path, variant);
     }
-  } else {
+  } else if (kind === "group") {
     await navigateOverview(path);
-  }
-}
-
-// src/stage/preview-sizing.ts
-function setVpProp(el2, prop, value) {
-  const cur = parseFloat(el2.style.getPropertyValue(prop)) || 0;
-  if (Math.abs(value - cur) > 1) {
-    el2.style.setProperty(prop, `${value}px`);
+  } else {
+    await navigateUnknown(path, variant);
   }
 }
 
@@ -2689,17 +2898,16 @@ function listenForPreviewMessages() {
           setVpProp(el2, "--vp-h", height);
         }
       });
-    } else if (data.type === "pd-width" && typeof data.width === "number") {
-      session.lastPdWidth = data.width;
-      if (store.url.viewport === "content") {
-        const width = data.width;
-        document.querySelectorAll("iframe").forEach((f) => {
-          if (f.contentWindow === e.source) {
-            setVpProp(f, "--vp-w", width);
-          }
-        });
-        requestAnimationFrame(updateReadout);
-      }
+    } else if (data.type === "pd-width" && typeof data.width === "number" && typeof data.at === "number") {
+      const { width, at } = data;
+      const scroll = typeof data.scroll === "number" ? data.scroll : at;
+      document.querySelectorAll("iframe").forEach((f) => {
+        const frame = f;
+        if (frame.contentWindow !== e.source) return;
+        if (acceptContentWidth(frame, width, at, scroll) && frame === dom.iframe) {
+          requestAnimationFrame(updateReadout);
+        }
+      });
     } else if (data.type === "pd-fp") {
       if (data.action === "exit") dom.fullpageDialog.close();
       else if (data.action === "active") showFullpageChrome();
@@ -2739,6 +2947,7 @@ function mount() {
   app.innerHTML = renderShellHtml();
   initDom(app);
   listenForPreviewMessages();
+  initContentWidth();
   dom.searchInput.addEventListener("input", () => {
     session.searchQuery = dom.searchInput.value;
     filterTree(session.searchQuery);

package/dist/index.js

@@ -1,7 +1,6 @@
-// packages/config/src/index.ts
-function defineConfig(config) {
-  return config;
-}
+import {
+  defineConfig
+} from "./chunks/chunk-3WZHFYHZ.js";
 export {
   defineConfig
 };