pattern-dump 0.1.0-alpha.0

package/dist/dev-ui/main.js

@@ -0,0 +1,3054 @@
+// ../../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".`;
+function buildAuditRollup(graph, opts = {}) {
+  const total = graph.components.length;
+  const affected = new Set(graph.occurrences.map((o) => o.component));
+  const cleanPct = total > 0 ? Math.round(100 * (total - affected.size) / total) : 100;
+  const outcomes = graph.components.reduce((a, c) => {
+    a[c.render] = (a[c.render] ?? 0) + 1;
+    return a;
+  }, {});
+  const perRule = /* @__PURE__ */ new Map();
+  for (const o of graph.occurrences) {
+    const k = `${o.engine} ${o.ruleId}`;
+    const r = perRule.get(k) ?? { engine: o.engine, ruleId: o.ruleId, occ: 0, comps: /* @__PURE__ */ new Set(), tags: /* @__PURE__ */ new Set() };
+    r.occ += 1;
+    r.comps.add(o.component);
+    r.tags.add(o.tag);
+    perRule.set(k, r);
+  }
+  const rulesByBlast = [...perRule.values()].sort((a, b) => b.comps.size - a.comps.size || b.occ - a.occ || `${a.engine}:${a.ruleId}`.localeCompare(`${b.engine}:${b.ruleId}`)).map((r) => ({ engine: r.engine, ruleId: r.ruleId, components: r.comps.size, occurrences: r.occ, tags: [...r.tags].sort() }));
+  const occByComp = /* @__PURE__ */ new Map();
+  for (const o of graph.occurrences) {
+    const a = occByComp.get(o.component) ?? [];
+    a.push(o);
+    occByComp.set(o.component, a);
+  }
+  const perComponent = [];
+  for (const c of graph.components) {
+    const occ = occByComp.get(c.id) ?? [];
+    if (occ.length === 0 && c.render === "ok") continue;
+    perComponent.push({
+      id: c.id,
+      render: c.render,
+      occurrences: [...occ].sort((a, b) => `${a.engine}:${a.ruleId}`.localeCompare(`${b.engine}:${b.ruleId}`)).map((o) => ({ engine: o.engine, ruleId: o.ruleId, tag: o.tag, message: o.message, ...o.domPath ? { domPath: o.domPath } : {} }))
+    });
+  }
+  return {
+    ...opts.subjectSha ? { subjectSha: opts.subjectSha } : {},
+    headline: `${graph.occurrences.length} machine-detectable static defects across ${affected.size} of ${total} components \u2014 ${cleanPct}% clean of static machine-detectable defects.`,
+    totals: { components: total, affected: affected.size, cleanPct, defects: graph.occurrences.length },
+    renderOutcomes: { ok: outcomes["ok"] ?? 0, blank: outcomes["blank"] ?? 0, error: outcomes["error"] ?? 0 },
+    rulesByBlast,
+    perComponent,
+    scope: SCOPE_BOUNDARY
+  };
+}
+function previewUrl(id, variant, theme) {
+  const params = new URLSearchParams();
+  if (variant) params.set("variant", variant);
+  if (theme) params.set("theme", theme);
+  const q = params.toString() ? `?${params.toString()}` : "";
+  return `${PD_ROUTE_PREFIX.preview}${id}${q}`;
+}
+function renderedSourceUrl(id, variant) {
+  const q = variant ? `?variant=${encodeURIComponent(variant)}` : "";
+  return `${PD_ROUTE_PREFIX.source}${id}/rendered${q}`;
+}
+function dataSourceUrl(id, variant) {
+  const q = variant ? `?variant=${encodeURIComponent(variant)}` : "";
+  return `${PD_ROUTE_PREFIX.source}${id}/data${q}`;
+}
+function overviewUrl(path) {
+  return `${PD_ROUTE_PREFIX.overview}${path}`;
+}
+var PD_ROUTES = {
+  /** GET → ComponentTree */
+  tree: "/api/tree",
+  /** GET → AuditResponse (500 → ApiError) */
+  audit: "/api/audit",
+  /** GET → ThemeSummary[] */
+  themes: "/api/themes",
+  /** GET → VersionInfo */
+  version: "/api/version",
+  /** GET → ShellClientConfig */
+  config: "/api/config",
+  /** The shell bundle, stylesheet and vendored assets. */
+  mainJs: "/_pd/main.js",
+  mainCss: "/_pd/main.css",
+  axeCore: "/_pd/axe-core.js",
+  /** GET → RuleTiers */
+  ruleTiers: "/_pd/rule-tiers.json",
+  shikiCss: "/_pd/shiki.css",
+  /** Document-base layer (reset + font-face). */
+  baseCss: "/_pd/base.css"
+};
+var PD_ROUTE_PREFIX = {
+  component: "/api/component/",
+  overview: "/api/overview/",
+  preview: "/preview/",
+  source: "/source/",
+  componentCss: "/_pd/components/",
+  themeCss: "/_pd/themes/",
+  script: "/_pd/scripts/",
+  assets: "/assets/"
+};
+function componentUrl(id, variant) {
+  const q = variant ? `?variant=${encodeURIComponent(variant)}` : "";
+  return `${PD_ROUTE_PREFIX.component}${id}${q}`;
+}
+function themeCssUrl(name) {
+  return `${PD_ROUTE_PREFIX.themeCss}${encodeURIComponent(name)}.css`;
+}
+function normalizeBasePath(basePath2) {
+  const trimmed = (basePath2 ?? "").trim().replace(/^\/+|\/+$/g, "");
+  return trimmed ? `/${trimmed}/` : "/";
+}
+function staticPathFor(liveUrl) {
+  const url = new URL(liveUrl, "http://pd.invalid");
+  const path = url.pathname;
+  const variant = url.searchParams.get("variant") || void 0;
+  const suffix = (ext) => variant ? `~${variant}${ext}` : `index${ext}`;
+  const under = (prefix) => path.slice(prefix.length);
+  if (path.startsWith(PD_ROUTE_PREFIX.component)) return `api/component/${under(PD_ROUTE_PREFIX.component)}/${suffix(".json")}`;
+  if (path.startsWith(PD_ROUTE_PREFIX.overview)) return `api/overview/${under(PD_ROUTE_PREFIX.overview)}/index.json`;
+  if (path.startsWith("/api/")) return `${path.slice(1)}.json`;
+  if (path.startsWith(PD_ROUTE_PREFIX.preview)) return `preview/${under(PD_ROUTE_PREFIX.preview)}/${suffix(".html")}`;
+  if (path.startsWith(PD_ROUTE_PREFIX.source)) {
+    const rest = under(PD_ROUTE_PREFIX.source);
+    const facet = rest.endsWith("/rendered") ? "rendered" : rest.endsWith("/data") ? "data" : null;
+    if (facet) {
+      const id = rest.slice(0, -(facet.length + 1));
+      return `source/${id}/${facet}${variant ? `~${variant}` : ""}.html`;
+    }
+  }
+  if (path.startsWith("/_pd/") || path.startsWith(PD_ROUTE_PREFIX.assets)) return path.slice(1);
+  const route = path.replace(/^\/+|\/+$/g, "");
+  return route ? `${route}/index.html` : "index.html";
+}
+var PD_PROTOCOL_VERSION = 1;
+
+// src/core/dom.ts
+var dom = {};
+function initDom(app) {
+  dom.iframe = document.getElementById("preview-frame");
+  dom.singlePreview = document.getElementById("single-preview");
+  dom.categoryOverview = document.getElementById("category-overview");
+  dom.mainEl = app.querySelector(".main");
+  dom.stageView = app.querySelector(".stage-view");
+  dom.variantBar = app.querySelector(".variant-bar");
+  dom.panel = app.querySelector(".panel");
+  dom.previewCaption = app.querySelector(".preview-caption");
+  dom.sidebarTree = app.querySelector(".sidebar-tree");
+  dom.sidebarEl = app.querySelector(".sidebar");
+  dom.railBrandEl = app.querySelector(".rail-brand");
+  dom.searchInput = app.querySelector(".sidebar-search input");
+  dom.showInternalsCheck = app.querySelector(".show-internals-check");
+  dom.hidePackagesCheck = app.querySelector(".hide-packages-check");
+  dom.hidePackagesLabel = app.querySelector(".hide-packages-label");
+  dom.variantSelect = app.querySelector(".variant-select");
+  dom.themePickerList = app.querySelector(".theme-picker-list");
+  dom.themePickerCurrentName = app.querySelector(".theme-picker-current-name");
+  dom.themePickerSwatch = app.querySelector(".theme-picker-swatch");
+  dom.themePickerReadout = app.querySelector(".theme-picker-readout");
+  dom.panelToggleBtn = app.querySelector(".panel-toggle-btn");
+  dom.railToggleClusterEl = app.querySelector(".rail-toggle-cluster");
+  dom.railToggleLabelEl = app.querySelector(".rail-toggle-label");
+  dom.panelContent = app.querySelector(".panel-content");
+  dom.railStatus = app.querySelector(".rail-status");
+  dom.railStatusLabel = dom.railStatus.querySelector(".rail-status-label");
+  dom.dockEl = app.querySelector(".dock");
+  dom.dockToggleBtn = app.querySelector(".dock-toggle-btn");
+  dom.dockTabBtns = Array.from(app.querySelectorAll(".dock-tab"));
+  dom.dockHbsPanel = document.getElementById("dock-panel-hbs");
+  dom.dockHtmlPanel = document.getElementById("dock-panel-html");
+  dom.dockConsolePanel = document.getElementById("dock-panel-console");
+  dom.dockDiagnosticsPanel = document.getElementById("dock-panel-diagnostics");
+  dom.hbsBody = dom.dockHbsPanel.querySelector(".source-body");
+  dom.htmlBody = dom.dockHtmlPanel.querySelector(".source-body");
+  dom.consoleEl = dom.dockConsolePanel.querySelector(".console");
+  dom.diagnosticsEl = dom.dockDiagnosticsPanel.querySelector(".diagnostics");
+  dom.dockCopyBtn = app.querySelector(".dock-copy-btn");
+  dom.dockFacetsEl = app.querySelector(".dock-facets");
+  dom.dockFacetBtns = Array.from(app.querySelectorAll(".dock-facet"));
+  dom.dockFacetDataBtn = document.getElementById("dock-facet-data");
+  dom.dockFacetSchemaBtn = document.getElementById("dock-facet-schema");
+  dom.sourceFacetsEl = app.querySelector(".source-facets");
+  dom.dockDataPanel = document.getElementById("dock-panel-data");
+  dom.dockSchemaPanel = document.getElementById("dock-panel-schema");
+  dom.dataBody = dom.dockDataPanel.querySelector(".source-body");
+  dom.schemaBody = dom.dockSchemaPanel.querySelector(".source-body");
+  dom.variantsGalleryEl = document.getElementById("variants-gallery");
+  dom.viewportToolbar = app.querySelector(".rail-vp-cluster");
+  dom.vpReadout = app.querySelector(".vp-readout");
+  dom.vpModeLabelEl = app.querySelector(".vp-mode-label");
+  dom.vpDiscoBtn = app.querySelector(".vp-disco-btn");
+  dom.cvdFeMatrix = document.getElementById("cvd-matrix-vals");
+  dom.a11yDetails = app.querySelector(".a11y-picker");
+  dom.cvdTypeGroup = app.querySelector(".cvd-type-group");
+  dom.cvdSeveritySlider = app.querySelector(".cvd-severity-slider");
+  dom.fullpageDialog = document.getElementById("fullpage-dialog");
+  dom.fullpageFrame = document.getElementById("fullpage-frame");
+  dom.fullpageCloseBtn = dom.fullpageDialog.querySelector(".fullpage-close");
+  dom.markOverlay = document.createElement("div");
+  dom.markOverlay.className = "pd-mark-overlay";
+  dom.markOverlay.setAttribute("aria-hidden", "true");
+  dom.markOverlay.innerHTML = '<span class="pd-mark pd-mark-tl"></span><span class="pd-mark pd-mark-tr"></span><span class="pd-mark pd-mark-bl"></span><span class="pd-mark pd-mark-br"></span>';
+  dom.markOverlay.hidden = true;
+  dom.stageView.appendChild(dom.markOverlay);
+}
+
+// src/core/session.ts
+var session = {
+  tree: { roots: [] },
+  componentRegistry: /* @__PURE__ */ new Map(),
+  navCategoryOrder: /* @__PURE__ */ new Map(),
+  themes: [],
+  themeSwitch: "attribute",
+  serverDefaultTheme: "",
+  needsRenderingRules: [],
+  current: null,
+  currentVariant: null,
+  stageMode: "single",
+  searchQuery: "",
+  renderedHtmlCache: null,
+  rawRenderedHtml: null,
+  dataCache: null,
+  dataRaw: null,
+  renderedA11y: [],
+  scanPending: false,
+  lastPdWidth: null
+};
+
+// src/core/runtime.ts
+var runtime = typeof window !== "undefined" && window.__pd || { mode: "live", wsPort: 4001 };
+var isStatic = runtime.mode === "static";
+var auditAvailable = runtime.mode === "live" || runtime.audit !== false;
+var basePath = runtime.mode === "static" ? normalizeBasePath(runtime.basePath) : "/";
+function resourceUrl(liveUrl) {
+  return isStatic && liveUrl.startsWith("/") ? `${basePath}${staticPathFor(liveUrl)}` : liveUrl;
+}
+function routeHref(route) {
+  return basePath === "/" ? route : `${basePath}${route.replace(/^\/+/, "")}`;
+}
+function routeFromPathname(pathname) {
+  if (basePath === "/" || !pathname.startsWith(basePath)) return pathname;
+  return `/${pathname.slice(basePath.length)}`;
+}
+function installStaticFetch() {
+  if (!isStatic || typeof window === "undefined") return;
+  const original = window.fetch.bind(window);
+  window.fetch = (input, init2) => original(typeof input === "string" ? resourceUrl(input) : input, init2);
+}
+
+// src/core/store.ts
+var KNOWN_VP_MODES = /* @__PURE__ */ new Set(["fit", "content", "mobile", "tablet", "desktop", "fullscreen"]);
+var KNOWN_CVD_TYPES = /* @__PURE__ */ new Set(
+  ["none", "protanopia", "deuteranopia", "tritanopia", "achromatopsia"]
+);
+var DEFAULT_CVD_STATE = { type: "none", severity: 0 };
+var DEFAULT_URL_STATE = {
+  pattern: null,
+  variant: null,
+  viewport: "fit",
+  cvd: DEFAULT_CVD_STATE
+};
+var DEFAULT_LOCAL_STATE = {
+  theme: "",
+  dims: { sidebarW: "", panelW: "", dockH: "" },
+  dockVisibility: { rightPanelOpen: false, consoleDockOpen: true },
+  panelTab: "docs",
+  dock: { dockTab: "source", sourceFacet: "hbs" },
+  navOpenPaths: /* @__PURE__ */ new Set(),
+  navFilters: { showPrivate: false, hidePackages: false }
+};
+var STORAGE_KEY = "pd-view-state";
+function toJSON(local) {
+  return JSON.stringify({
+    theme: local.theme,
+    dims: local.dims,
+    dockVisibility: local.dockVisibility,
+    panelTab: local.panelTab,
+    dock: local.dock,
+    navOpenPaths: [...local.navOpenPaths],
+    // Set → Array (sole conversion point)
+    navFilters: local.navFilters
+  });
+}
+function deserializeLocalState(raw) {
+  const theme = typeof raw.theme === "string" ? raw.theme : DEFAULT_LOCAL_STATE.theme;
+  const rawDims = raw.dims;
+  const dims = {
+    sidebarW: typeof rawDims?.sidebarW === "string" ? rawDims.sidebarW : DEFAULT_LOCAL_STATE.dims.sidebarW,
+    panelW: typeof rawDims?.panelW === "string" ? rawDims.panelW : DEFAULT_LOCAL_STATE.dims.panelW,
+    dockH: typeof rawDims?.dockH === "string" ? rawDims.dockH : DEFAULT_LOCAL_STATE.dims.dockH
+  };
+  const rawVis = raw.dockVisibility;
+  const dockVisibility = {
+    rightPanelOpen: typeof rawVis?.rightPanelOpen === "boolean" ? rawVis.rightPanelOpen : DEFAULT_LOCAL_STATE.dockVisibility.rightPanelOpen,
+    consoleDockOpen: typeof rawVis?.consoleDockOpen === "boolean" ? rawVis.consoleDockOpen : DEFAULT_LOCAL_STATE.dockVisibility.consoleDockOpen
+  };
+  const panelTab = raw.panelTab === "docs" || raw.panelTab === "relationships" || raw.panelTab === "audit" ? raw.panelTab : DEFAULT_LOCAL_STATE.panelTab;
+  const rawDock = raw.dock;
+  let dock;
+  if (rawDock?.dockTab === "source") {
+    const sf = rawDock.sourceFacet;
+    dock = {
+      dockTab: "source",
+      sourceFacet: sf === "hbs" || sf === "data" || sf === "schema" ? sf : "hbs"
+    };
+  } else if (rawDock?.dockTab === "html" || rawDock?.dockTab === "diagnostics" || rawDock?.dockTab === "console") {
+    dock = { dockTab: rawDock.dockTab };
+  } else {
+    dock = DEFAULT_LOCAL_STATE.dock;
+  }
+  const rawPaths = raw.navOpenPaths;
+  const navOpenPaths = Array.isArray(rawPaths) ? new Set(rawPaths.filter((p) => typeof p === "string")) : /* @__PURE__ */ new Set();
+  const rawFilters = raw.navFilters;
+  const navFilters = {
+    showPrivate: typeof rawFilters?.showPrivate === "boolean" ? rawFilters.showPrivate : DEFAULT_LOCAL_STATE.navFilters.showPrivate,
+    hidePackages: typeof rawFilters?.hidePackages === "boolean" ? rawFilters.hidePackages : DEFAULT_LOCAL_STATE.navFilters.hidePackages
+  };
+  return { theme, dims, dockVisibility, panelTab, dock, navOpenPaths, navFilters };
+}
+function fromJSON(json) {
+  try {
+    return deserializeLocalState(JSON.parse(json));
+  } catch {
+    return null;
+  }
+}
+function parseCvd(raw) {
+  if (!raw) return DEFAULT_CVD_STATE;
+  const colon = raw.indexOf(":");
+  const typeRaw = colon === -1 ? raw : raw.slice(0, colon);
+  const sevRaw = colon === -1 ? "" : raw.slice(colon + 1);
+  const type = KNOWN_CVD_TYPES.has(typeRaw) ? typeRaw : "none";
+  const severity = Math.min(1, Math.max(0, parseFloat(sevRaw) || 0));
+  return { type, severity };
+}
+function parseUrlState(location) {
+  const raw = routeFromPathname(location.pathname).slice(1);
+  const pattern = raw || null;
+  const hash = location.hash.slice(1);
+  const variant = hash || null;
+  const params = new URLSearchParams(location.search);
+  const vpRaw = params.get("vp");
+  const viewport = vpRaw !== null && KNOWN_VP_MODES.has(vpRaw) ? vpRaw : "fit";
+  const cvd = parseCvd(params.get("cvd"));
+  return { pattern, variant, viewport, cvd };
+}
+function reconcile(url, local, ctx, themeOverride = null) {
+  let variant = url.variant;
+  if (variant !== null && ctx.availableVariants !== null) {
+    if (!ctx.availableVariants.includes(variant)) variant = null;
+  }
+  let viewport = KNOWN_VP_MODES.has(url.viewport) ? url.viewport : "fit";
+  if (viewport === "fullscreen" && url.pattern === null) viewport = "fit";
+  const navOpenPaths = new Set(
+    [...local.navOpenPaths].filter((p) => ctx.knownFolderPaths.has(p))
+  );
+  let theme = local.theme;
+  let stripThemeParam = false;
+  if (themeOverride !== null && ctx.knownThemes.has(themeOverride)) {
+    theme = themeOverride;
+    stripThemeParam = true;
+  }
+  return {
+    url: { ...url, variant, viewport },
+    local: { ...local, theme, navOpenPaths },
+    stripThemeParam
+  };
+}
+function createStore() {
+  let local = { ...DEFAULT_LOCAL_STATE, navOpenPaths: /* @__PURE__ */ new Set() };
+  let url = { ...DEFAULT_URL_STATE };
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    for (const fn of listeners) fn();
+  }
+  function persist(state) {
+    try {
+      localStorage.setItem(STORAGE_KEY, toJSON(state));
+    } catch {
+    }
+  }
+  const storeObj = {
+    get local() {
+      return local;
+    },
+    get url() {
+      return url;
+    },
+    setLocal(patch) {
+      local = { ...local, ...patch };
+      persist(local);
+      notify();
+    },
+    setUrl(patch) {
+      url = { ...url, ...patch };
+      notify();
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    },
+    hydrate(ctx) {
+      const parsedUrl = parseUrlState(window.location);
+      const themeOverride = new URLSearchParams(window.location.search).get("theme");
+      const stored = localStorage.getItem(STORAGE_KEY);
+      const storedLocal = stored !== null ? fromJSON(stored) ?? { ...DEFAULT_LOCAL_STATE, navOpenPaths: /* @__PURE__ */ new Set() } : { ...DEFAULT_LOCAL_STATE, navOpenPaths: /* @__PURE__ */ new Set() };
+      const { url: reconciledUrl, local: reconciledLocal, stripThemeParam } = reconcile(parsedUrl, storedLocal, ctx, themeOverride);
+      url = reconciledUrl;
+      local = reconciledLocal;
+      persist(local);
+      notify();
+      return stripThemeParam;
+    }
+  };
+  return storeObj;
+}
+var store = createStore();
+
+// src/dock/axe-map.ts
+function mapAxeResults(results) {
+  const out = [];
+  function mapNodes(v, needsReview) {
+    const impact = v["impact"];
+    const severity = impact === "critical" || impact === "serious" ? "error" : "warning";
+    for (const n of v["nodes"] ?? []) {
+      const target = (n["target"] ?? []).join(" > ");
+      const any0 = n["any"]?.[0];
+      const message = needsReview ? any0?.["message"] ?? n["failureSummary"] ?? v["description"] : n["failureSummary"] ?? v["description"];
+      const d = {
+        kind: "A11Y",
+        source: "axe",
+        severity,
+        message,
+        ruleId: v["id"],
+        target,
+        nodeHtml: n["html"] ?? "",
+        help: v["help"],
+        helpUrl: v["helpUrl"],
+        ...needsReview ? { needsReview: true } : {}
+      };
+      if (v["id"] === "color-contrast") {
+        const data = any0?.["data"];
+        if (data?.["fgColor"]) {
+          d.contrast = {
+            fg: data["fgColor"],
+            bg: data["bgColor"],
+            ratio: data["contrastRatio"],
+            expected: parseFloat(data["expectedContrastRatio"])
+          };
+        }
+      }
+      out.push(d);
+    }
+  }
+  for (const v of results.violations ?? []) {
+    mapNodes(v, false);
+  }
+  for (const v of results.incomplete ?? []) {
+    mapNodes(v, true);
+  }
+  return out;
+}
+
+// src/icons/index.ts
+var ICONS = {
+  "warning": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>`,
+  "x": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>`,
+  "panel": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm-64,80h64v16H136Zm0-16V88h64v16Zm0,48h64v16H136Zm64-80H136V56h64ZM56,56h64V200H56ZM200,200H136V184h64v16Z"/></svg>`,
+  "panel-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40ZM56,56h72V200H56Z"/></svg>`,
+  "dock": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,16v64H56V56Zm-96,80v64H88V136Zm16,0h16v64H120Zm32,0h16v64H152Zm-96,0H72v64H56Zm144,64H184V136h16v64Z"/></svg>`,
+  "dock-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,16v72H56V56Z"/></svg>`,
+  // ---- Viewport cluster ----
+  "vp-fit": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"/></svg>`,
+  "vp-fit-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M152,96V48a8,8,0,0,1,13.66-5.66l48,48A8,8,0,0,1,208,104H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0-5.66,13.66l48,48A8,8,0,0,0,104,208V160A8,8,0,0,0,96,152ZM99.06,40.61a8,8,0,0,0-8.72,1.73l-48,48A8,8,0,0,0,48,104H96a8,8,0,0,0,8-8V48A8,8,0,0,0,99.06,40.61ZM208,152H160a8,8,0,0,0-8,8v48a8,8,0,0,0,13.66,5.66l48-48A8,8,0,0,0,208,152Z"/></svg>`,
+  // FrameCorners — bracket marks at four corners; the empty center represents the
+  // content that the frame sizes itself to fit. Regular = inactive, fill = active.
+  "vp-content": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M96,48H48V96a8,8,0,0,1-16,0V48A16,16,0,0,1,48,32H96a8,8,0,0,1,0,16ZM216,32H168a8,8,0,0,0,0,16h48V96a8,8,0,0,0,16,0V48A16,16,0,0,0,216,32Zm8,112a8,8,0,0,0-8,8v48H168a8,8,0,0,0,0,16h48a16,16,0,0,0,16-16V152A8,8,0,0,0,224,144ZM96,208H48V160a8,8,0,0,0-16,0v48a16,16,0,0,0,16,16H96a8,8,0,0,0,0-16Z"/></svg>`,
+  "vp-content-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M96,40H48A24,24,0,0,0,24,64v48a8,8,0,0,0,16,0V64a8,8,0,0,1,8-8H96a8,8,0,0,0,0-16ZM232,152a8,8,0,0,0-8,8v32H192a8,8,0,0,0,0,16h32a24,24,0,0,0,24-24V160A8,8,0,0,0,232,152ZM208,40H160a8,8,0,0,0,0,16h32v32a8,8,0,0,0,16,0V64A24,24,0,0,0,208,40ZM64,160a8,8,0,0,0-16,0v32a24,24,0,0,0,24,24H96a8,8,0,0,0,0-16H72Z"/></svg>`,
+  "vp-mobile": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"/></svg>`,
+  "vp-mobile-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM80,32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"/></svg>`,
+  "vp-tablet": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M192,24H64A24,24,0,0,0,40,48V208a24,24,0,0,0,24,24H192a24,24,0,0,0,24-24V48A24,24,0,0,0,192,24ZM56,72H200V184H56Zm8-32H192a8,8,0,0,1,8,8v8H56V48A8,8,0,0,1,64,40ZM192,216H64a8,8,0,0,1-8-8v-8H200v8A8,8,0,0,1,192,216Z"/></svg>`,
+  "vp-tablet-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M192,24H64A24,24,0,0,0,40,48V208a24,24,0,0,0,24,24H192a24,24,0,0,0,24-24V48A24,24,0,0,0,192,24ZM64,40H192a8,8,0,0,1,8,8v8H56V48A8,8,0,0,1,64,40ZM192,216H64a8,8,0,0,1-8-8v-8H200v8A8,8,0,0,1,192,216Z"/></svg>`,
+  "vp-desktop": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Zm-48,48a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,224Z"/></svg>`,
+  "vp-desktop-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M232,64V176a24,24,0,0,1-24,24H48a24,24,0,0,1-24-24V64A24,24,0,0,1,48,40H208A24,24,0,0,1,232,64ZM160,216H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Z"/></svg>`,
+  "vp-disco": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M120,64.37V16a8,8,0,0,0-16,0V64.37a88,88,0,1,0,16,0ZM183.54,144H151.77c-1.51-28.36-10.79-48.36-19.44-61.06A72.16,72.16,0,0,1,183.54,144Zm-95.3,16h47.52c-2,33.52-16.13,52.95-23.76,61.08C104.36,212.93,90.23,193.51,88.24,160Zm0-16c2-33.52,16.13-52.95,23.76-61.08,7.64,8.15,21.77,27.57,23.76,61.08Zm3.43-61.06C83,95.64,73.74,115.64,72.23,144H40.46A72.16,72.16,0,0,1,91.67,82.94ZM40.46,160H72.23c1.51,28.36,10.79,48.36,19.44,61.06A72.16,72.16,0,0,1,40.46,160Zm91.87,61.06c8.65-12.7,17.93-32.7,19.44-61.06h31.77A72.16,72.16,0,0,1,132.33,221.06ZM256,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,256,88ZM152,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H192V64a8,8,0,0,1-16,0V48H160A8,8,0,0,1,152,40Z"/></svg>`,
+  "vp-disco-fill": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M120,64.37V16a8,8,0,0,0-16,0V64.37a88,88,0,1,0,16,0ZM183.54,144H151.77c-1.51-28.36-10.79-48.36-19.44-61.06A72.16,72.16,0,0,1,183.54,144Zm-47.78,16c-2,33.52-16.13,52.95-23.76,61.08-7.64-8.15-21.77-27.57-23.76-61.08ZM91.67,82.94C83,95.64,73.74,115.64,72.23,144H40.46A72.16,72.16,0,0,1,91.67,82.94ZM40.46,160H72.23c1.51,28.36,10.79,48.36,19.44,61.06A72.16,72.16,0,0,1,40.46,160ZM256,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,256,88ZM152,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H192V64a8,8,0,0,1-16,0V48H160A8,8,0,0,1,152,40Z"/></svg>`,
+  "vp-fullpage": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z"/></svg>`,
+  // ---- A11y CVD picker ----
+  "a11y": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M160,40a32,32,0,1,0-32,32A32,32,0,0,0,160,40ZM128,56a16,16,0,1,1,16-16A16,16,0,0,1,128,56ZM231.5,87.71A19.62,19.62,0,0,0,212,72H44a20,20,0,0,0-8.38,38.16l.13,0,50.75,22.35-21,79.72A20,20,0,0,0,102,228.8l26-44.87,26,44.87a20,20,0,0,0,36.4-16.52l-21-79.72,50.75-22.35.13,0A19.64,19.64,0,0,0,231.5,87.71Zm-17.8,7.9-56.93,25.06a8,8,0,0,0-4.51,9.36L175.13,217a7,7,0,0,0,.49,1.35,4,4,0,0,1-5,5.45,4,4,0,0,1-2.25-2.07,6.31,6.31,0,0,0-.34-.63L134.92,164a8,8,0,0,0-13.84,0L88,221.05a6.31,6.31,0,0,0-.34.63,4,4,0,0,1-2.25,2.07,4,4,0,0,1-5-5.45,7,7,0,0,0,.49-1.35L103.74,130a8,8,0,0,0-4.51-9.36L42.3,95.61A4,4,0,0,1,44,88H212a4,4,0,0,1,1.73,7.61Z"/></svg>`,
+  // ---- Custom (non-Phosphor) — stroke-based, viewBox 0 0 16 16 ----
+  "chevron": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="1em" height="1em" aria-hidden="true" shape-rendering="geometricPrecision"><path d="M6 3.5 L10.5 8 L6 12.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  // Box-arrow "open in new / external link". Same custom-stroke idiom as chevron: viewBox 0 0 16 16,
+  // fill none, currentColor, round caps/joins. Box (open at its top-right) + an arrow escaping to the
+  // top-right corner. Slightly lighter stroke (1.5) than the chevron since it carries more detail.
+  "external-link": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="1em" height="1em" aria-hidden="true" shape-rendering="geometricPrecision"><path d="M12 8.7 V12.5 A1.3 1.3 0 0 1 10.7 13.8 H3.5 A1.3 1.3 0 0 1 2.2 12.5 V5.3 A1.3 1.3 0 0 1 3.5 4 H7.3 M9.8 2.2 H13.8 V6.2 M13.8 2.2 L7.4 8.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+};
+function svgIcon(name) {
+  return ICONS[name];
+}
+
+// src/dock/diag-format.ts
+var SEVERITY_ORDER = { error: 0, warning: 1, info: 2 };
+var CATEGORY_ORDER = ["Render/Template", "Schema/Data", "HTML validation", "A11y", "Other"];
+function diagSevLabel(severity) {
+  const s = document.createElement("span");
+  s.className = "diag-sev";
+  s.textContent = severity.charAt(0).toUpperCase() + severity.slice(1);
+  return s;
+}
+function diagSep() {
+  const s = document.createElement("span");
+  s.className = "diag-sep";
+  s.textContent = " \xB7 ";
+  return s;
+}
+function diagDocsLink(helpUrl) {
+  const link = document.createElement("a");
+  link.className = "diag-docs";
+  link.href = helpUrl;
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.innerHTML = `${svgIcon("external-link")}<span>See docs</span>`;
+  return link;
+}
+function categoryFromSource(source) {
+  if (source === "render" || source === "highlight") return "Render/Template";
+  if (source === "schema" || source === "cascade") return "Schema/Data";
+  if (source === "html") return "HTML validation";
+  if (source === "axe") return "A11y";
+  return "Other";
+}
+
+// src/dock/severity.ts
+function severityGlyph(severity) {
+  if (severity === "error" || severity === "warning") {
+    return `<span class="pd-sev-glyph" data-severity="${severity}" aria-hidden="true"></span>`;
+  }
+  return "";
+}
+
+// src/dock/diagnostics.ts
+function renderDiagnostics(diagnostics) {
+  dom.diagnosticsEl.innerHTML = "";
+  if (diagnostics.length === 0) {
+    const p = document.createElement("p");
+    p.textContent = "No issues found";
+    dom.diagnosticsEl.appendChild(p);
+    return;
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const d of diagnostics) {
+    const cat = categoryFromSource(d.source);
+    const list = groups.get(cat) ?? [];
+    list.push(d);
+    groups.set(cat, list);
+  }
+  function buildA11yLi(d) {
+    const li = document.createElement("li");
+    li.dataset.severity = d.severity;
+    li.dataset.kind = d.kind;
+    li.dataset.ruleId = d.ruleId;
+    if (d.needsReview) li.dataset.needsReview = "true";
+    if (d.needsReview) {
+      li.appendChild(document.createTextNode(d.message));
+    } else {
+      li.appendChild(diagSevLabel(d.severity));
+      li.appendChild(diagSep());
+      li.appendChild(document.createTextNode(d.message));
+    }
+    const ruleSpan = document.createElement("span");
+    ruleSpan.className = "pd-a11y-rule";
+    ruleSpan.textContent = ` \u2014 ${d.ruleId}`;
+    li.appendChild(ruleSpan);
+    if (d.target) {
+      const targetSpan = document.createElement("span");
+      targetSpan.className = "pd-a11y-target";
+      targetSpan.textContent = ` (${d.target})`;
+      li.appendChild(targetSpan);
+    }
+    li.appendChild(diagDocsLink(d.helpUrl));
+    if (d.contrast) {
+      const c = d.contrast;
+      const swatches = document.createElement("span");
+      swatches.className = "pd-contrast-swatches";
+      const fgSwatch = document.createElement("span");
+      fgSwatch.className = "pd-swatch";
+      fgSwatch.style.setProperty("--swatch-color", c.fg);
+      fgSwatch.title = c.fg;
+      const bgSwatch = document.createElement("span");
+      bgSwatch.className = "pd-swatch";
+      bgSwatch.style.setProperty("--swatch-color", c.bg);
+      bgSwatch.title = c.bg;
+      const ratioSpan = document.createElement("span");
+      ratioSpan.className = "pd-contrast-ratio";
+      ratioSpan.textContent = ` ${c.ratio.toFixed(2)}:1 (needs ${c.expected}:1)`;
+      swatches.append(fgSwatch, bgSwatch, ratioSpan);
+      li.appendChild(swatches);
+    }
+    if (!d.needsReview) li.insertAdjacentHTML("afterbegin", severityGlyph(d.severity));
+    return li;
+  }
+  const sortBySeverity = (arr) => [...arr].sort((a, b) => (SEVERITY_ORDER[a.severity] ?? 9) - (SEVERITY_ORDER[b.severity] ?? 9));
+  const catRank = (c) => {
+    const i = CATEGORY_ORDER.indexOf(c);
+    return i === -1 ? CATEGORY_ORDER.length : i;
+  };
+  const ordered = [...groups.entries()].filter(([, items]) => items.length > 0).map(([cat, items]) => {
+    const isA11y = cat === "A11y";
+    const needsReview = (d) => d.kind === "A11Y" && d.needsReview === true;
+    const confirmed = isA11y ? items.filter((d) => !needsReview(d)) : items;
+    const review = isA11y ? items.filter(needsReview) : [];
+    const errorCount = confirmed.filter((d) => d.severity === "error").length;
+    const warningCount = confirmed.filter((d) => d.severity === "warning").length;
+    const worstRank = confirmed.reduce((m, d) => Math.min(m, SEVERITY_ORDER[d.severity] ?? 9), 9);
+    return { cat, items, isA11y, confirmed, review, errorCount, warningCount, worstRank };
+  }).sort((a, b) => a.worstRank - b.worstRank || catRank(a.cat) - catRank(b.cat));
+  for (const { cat, isA11y, confirmed, review, errorCount, warningCount } of ordered) {
+    const mixed = errorCount > 0 && warningCount > 0;
+    const details = document.createElement("details");
+    details.name = "pd-diagnostics";
+    if (mixed) details.dataset.mixed = "true";
+    const summary = document.createElement("summary");
+    summary.appendChild(document.createTextNode(cat));
+    const headSeg = (sev, n) => `<span class="pd-diag-head-seg" data-severity="${sev}">${severityGlyph(sev)}<span class="pd-diag-head-count">${n}</span></span>`;
+    let markerHtml = "";
+    if (errorCount > 0) markerHtml += headSeg("error", errorCount);
+    if (warningCount > 0) markerHtml += headSeg("warning", warningCount);
+    if (markerHtml) summary.insertAdjacentHTML("beforeend", markerHtml);
+    if (isA11y && review.length > 0) {
+      const rev = document.createElement("span");
+      rev.className = "pd-diag-head-review";
+      rev.textContent = confirmed.length === 0 ? ` 0 \xB7 ${review.length} to review` : ` \xB7 ${review.length} to review`;
+      summary.appendChild(rev);
+    }
+    const diagCaret = document.createElement("span");
+    diagCaret.className = "disclosure-caret";
+    diagCaret.setAttribute("aria-hidden", "true");
+    diagCaret.innerHTML = svgIcon("chevron");
+    summary.prepend(diagCaret);
+    details.appendChild(summary);
+    const ul = document.createElement("ul");
+    for (const d of sortBySeverity(confirmed)) {
+      if (d.kind === "A11Y") {
+        ul.appendChild(buildA11yLi(d));
+      } else {
+        const li = document.createElement("li");
+        li.dataset.severity = d.severity;
+        li.dataset.kind = d.kind;
+        li.appendChild(diagSevLabel(d.severity));
+        li.appendChild(diagSep());
+        let text = d.message;
+        if (d.path) text += ` (path: ${d.path})`;
+        if (d.location) {
+          const loc = [d.location.file, d.location.line, d.location.column].filter((v) => v !== void 0).join(":");
+          if (loc) text += ` (at ${loc})`;
+        }
+        li.appendChild(document.createTextNode(text));
+        li.insertAdjacentHTML("afterbegin", severityGlyph(d.severity));
+        ul.appendChild(li);
+      }
+    }
+    details.appendChild(ul);
+    if (review.length > 0) {
+      const reviewDetails = document.createElement("details");
+      const reviewSummary = document.createElement("summary");
+      reviewSummary.className = "pd-a11y-review-header";
+      reviewSummary.textContent = `Needs review (${review.length})`;
+      const reviewCaret = document.createElement("span");
+      reviewCaret.className = "disclosure-caret";
+      reviewCaret.setAttribute("aria-hidden", "true");
+      reviewCaret.innerHTML = svgIcon("chevron");
+      reviewSummary.prepend(reviewCaret);
+      reviewDetails.appendChild(reviewSummary);
+      const reviewUl = document.createElement("ul");
+      for (const d of sortBySeverity(review)) {
+        if (d.kind === "A11Y") reviewUl.appendChild(buildA11yLi(d));
+      }
+      reviewDetails.appendChild(reviewUl);
+      if (confirmed.length === 0) reviewDetails.open = true;
+      details.appendChild(reviewDetails);
+    }
+    dom.diagnosticsEl.appendChild(details);
+  }
+}
+function refreshDiagnostics() {
+  if (session.scanPending) {
+    const structural = session.current?.diagnostics ?? [];
+    if (structural.length > 0) {
+      renderDiagnostics(structural);
+      const p = document.createElement("p");
+      p.className = "pd-a11y-pending";
+      p.textContent = "running rendered checks\u2026";
+      dom.diagnosticsEl.appendChild(p);
+    } else {
+      dom.diagnosticsEl.innerHTML = "";
+      const p = document.createElement("p");
+      p.className = "pd-a11y-pending";
+      p.textContent = "running rendered checks\u2026";
+      dom.diagnosticsEl.appendChild(p);
+    }
+  } else {
+    renderDiagnostics([...session.current?.diagnostics ?? [], ...session.renderedA11y]);
+  }
+  updateTabMarkers();
+}
+function updateTabMarkers() {
+  const tab = document.getElementById("dock-tab-diagnostics");
+  if (!tab) return;
+  const merged = [...session.current?.diagnostics ?? [], ...session.renderedA11y];
+  let errors = 0;
+  let warnings = 0;
+  for (const d of merged) {
+    if (d.kind === "A11Y" && d.needsReview === true) continue;
+    if (d.severity === "error") errors++;
+    else if (d.severity === "warning") warnings++;
+  }
+  const marker = tab.querySelector(".tab-marker");
+  const countEl = tab.querySelector(".tab-marker-count");
+  marker?.querySelector(".pd-sev-glyph")?.remove();
+  if (errors > 0) {
+    tab.dataset.severity = "error";
+    tab.dataset.count = String(errors);
+    if (countEl) countEl.textContent = String(errors);
+    marker?.insertAdjacentHTML("afterbegin", severityGlyph("error"));
+  } else if (warnings > 0) {
+    tab.dataset.severity = "warning";
+    tab.dataset.count = String(warnings);
+    if (countEl) countEl.textContent = String(warnings);
+    marker?.insertAdjacentHTML("afterbegin", severityGlyph("warning"));
+  } else {
+    delete tab.dataset.severity;
+    delete tab.dataset.count;
+    if (countEl) countEl.textContent = "";
+  }
+  const clauses = [];
+  if (errors > 0) clauses.push(`${errors} ${errors === 1 ? "error" : "errors"}`);
+  if (warnings > 0) clauses.push(`${warnings} ${warnings === 1 ? "warning" : "warnings"}`);
+  if (clauses.length > 0) {
+    tab.setAttribute("aria-label", `Diagnostics, ${clauses.join(", ")}`);
+  } else {
+    tab.removeAttribute("aria-label");
+  }
+}
+
+// src/dock/a11y-scan.ts
+var scanGen = 0;
+async function injectAxe() {
+  const script = dom.iframe.contentDocument.createElement("script");
+  script.src = resourceUrl(PD_ROUTES.axeCore);
+  await new Promise((res, rej) => {
+    script.onload = () => res();
+    script.onerror = rej;
+    dom.iframe.contentDocument.head.appendChild(script);
+  });
+}
+async function runRenderedA11yScan() {
+  if (!session.current || !dom.iframe.contentDocument) return;
+  const gen = ++scanGen;
+  if (session.needsRenderingRules.length === 0) {
+    await new Promise((res) => setTimeout(res, 200));
+    if (session.needsRenderingRules.length === 0) {
+      if (gen === scanGen) {
+        session.scanPending = false;
+        refreshDiagnostics();
+      }
+      return;
+    }
+  }
+  try {
+    if (dom.iframe.contentDocument?.readyState !== "complete") {
+      await new Promise((res) => dom.iframe.addEventListener("load", () => res(), { once: true }));
+    }
+    if (!dom.iframe.contentDocument) {
+      if (gen === scanGen) {
+        session.scanPending = false;
+        refreshDiagnostics();
+      }
+      return;
+    }
+    const axeWindow = dom.iframe.contentWindow;
+    if (!axeWindow.axe) await injectAxe();
+    const root = dom.iframe.contentDocument.querySelector("main") ?? dom.iframe.contentDocument.body;
+    const results = await axeWindow.axe.run(root, { runOnly: session.needsRenderingRules });
+    if (gen !== scanGen) return;
+    session.renderedA11y = mapAxeResults(results);
+  } catch (err) {
+    if (gen !== scanGen) return;
+    session.renderedA11y = [];
+    console.error("[pd-a11y] scan error:", err);
+  } finally {
+    if (gen === scanGen) {
+      session.scanPending = false;
+      refreshDiagnostics();
+    }
+  }
+}
+
+// src/core/html-util.ts
+function extractHighlightedPre(containerHtml) {
+  const tmp = document.createElement("div");
+  tmp.innerHTML = containerHtml;
+  const pre = tmp.querySelector("pre");
+  return pre ? pre.outerHTML : containerHtml;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/dock/tabs.ts
+function applySourceFacetDom(facet) {
+  document.getElementById("dock-tab-source")?.setAttribute("aria-controls", `dock-panel-${facet}`);
+  for (const btn of dom.dockFacetBtns) {
+    btn.setAttribute("aria-selected", String(btn.dataset.facet === facet));
+  }
+  dom.dockHbsPanel.hidden = facet !== "hbs";
+  dom.dockDataPanel.hidden = facet !== "data";
+  dom.dockSchemaPanel.hidden = facet !== "schema";
+  if (facet === "data" && session.current && session.dataCache === null) void fetchAndShowData();
+  updateCopyLabel();
+}
+function switchDockTab(tab, forceFacet) {
+  if (tab === "diagnostics" && session.current) {
+    session.renderedA11y = [];
+    session.scanPending = true;
+  }
+  const prevDock = store.local.dock;
+  const dock = tab === "source" ? { dockTab: "source", sourceFacet: forceFacet ?? (prevDock.dockTab === "source" ? prevDock.sourceFacet : "hbs") } : { dockTab: tab };
+  store.setLocal({ dock });
+  for (const btn of dom.dockTabBtns) {
+    btn.setAttribute("aria-selected", String(btn.dataset.tab === tab));
+  }
+  const isSource = tab === "source";
+  const isHtml = tab === "html";
+  dom.dockFacetsEl.hidden = tab === "console" || tab === "diagnostics";
+  dom.sourceFacetsEl.hidden = !isSource;
+  dom.dockHtmlPanel.hidden = !isHtml;
+  dom.dockDiagnosticsPanel.hidden = tab !== "diagnostics";
+  dom.dockConsolePanel.hidden = tab !== "console";
+  if (!isSource) {
+    dom.dockHbsPanel.hidden = true;
+    dom.dockDataPanel.hidden = true;
+    dom.dockSchemaPanel.hidden = true;
+  } else {
+    const d = store.local.dock;
+    if (d.dockTab === "source") applySourceFacetDom(d.sourceFacet);
+  }
+  if (isHtml && session.current && session.renderedHtmlCache === null) {
+    void fetchAndShowHtml();
+  }
+  if (tab === "diagnostics" && session.current) {
+    refreshDiagnostics();
+    void runRenderedA11yScan();
+  }
+  updateCopyLabel();
+}
+function switchSourceFacet(facet) {
+  store.setLocal({ dock: { dockTab: "source", sourceFacet: facet } });
+  applySourceFacetDom(facet);
+}
+async function copyDockSource() {
+  const dock = store.local.dock;
+  if (!session.current || dock.dockTab === "console") return;
+  let raw;
+  if (dock.dockTab === "html") {
+    raw = session.rawRenderedHtml ?? "";
+  } else if (dock.dockTab !== "source") {
+    raw = session.current.source.schema ?? "";
+  } else if (dock.sourceFacet === "hbs") {
+    raw = session.current.source.hbs;
+  } else if (dock.sourceFacet === "data") {
+    raw = session.dataRaw ?? session.current.source.json ?? "";
+  } else {
+    raw = session.current.source.schema ?? "";
+  }
+  const prevLabel = dom.dockCopyBtn.textContent ?? "";
+  try {
+    await navigator.clipboard.writeText(raw);
+    dom.dockCopyBtn.textContent = "Copied!";
+    setTimeout(() => {
+      dom.dockCopyBtn.textContent = prevLabel;
+    }, 1500);
+  } catch {
+    dom.dockCopyBtn.textContent = "Failed";
+    setTimeout(() => {
+      dom.dockCopyBtn.textContent = prevLabel;
+    }, 1500);
+  }
+}
+function updateCopyLabel() {
+  const dock = store.local.dock;
+  let label;
+  if (dock.dockTab === "html") {
+    label = "Copy HTML";
+  } else if (dock.dockTab !== "source" || dock.sourceFacet === "hbs") {
+    label = "Copy Handlebars";
+  } else if (dock.sourceFacet === "data") {
+    label = "Copy data";
+  } else {
+    label = "Copy schema";
+  }
+  dom.dockCopyBtn.setAttribute("aria-label", label);
+  dom.dockCopyBtn.textContent = label;
+}
+async function fetchAndShowHtml() {
+  if (!session.current) return;
+  if (session.renderedHtmlCache !== null) {
+    dom.htmlBody.innerHTML = session.renderedHtmlCache;
+    return;
+  }
+  dom.htmlBody.innerHTML = "<p>Loading\u2026</p>";
+  try {
+    const url = renderedSourceUrl(session.current.id, session.currentVariant ?? void 0);
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const fullHtml = await res.text();
+    const tmp = document.createElement("div");
+    tmp.innerHTML = fullHtml;
+    session.rawRenderedHtml = tmp.querySelector(".shiki-container")?.dataset.raw ?? fullHtml;
+    const pre = tmp.querySelector("pre");
+    session.renderedHtmlCache = pre ? pre.outerHTML : fullHtml;
+    dom.htmlBody.innerHTML = session.renderedHtmlCache;
+  } catch (e) {
+    dom.htmlBody.innerHTML = `<p>Error: ${String(e)}</p>`;
+  }
+}
+async function fetchAndShowData() {
+  if (!session.current) return;
+  if (session.dataCache !== null) {
+    dom.dataBody.innerHTML = extractHighlightedPre(session.dataCache);
+    return;
+  }
+  dom.dataBody.innerHTML = "<p>Loading\u2026</p>";
+  try {
+    const url = dataSourceUrl(session.current.id, session.currentVariant ?? void 0);
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const fullHtml = await res.text();
+    const tmp = document.createElement("div");
+    tmp.innerHTML = fullHtml;
+    session.dataRaw = tmp.querySelector(".shiki-container")?.dataset.raw ?? fullHtml;
+    const pre = tmp.querySelector("pre");
+    session.dataCache = pre ? pre.outerHTML : fullHtml;
+    dom.dataBody.innerHTML = session.dataCache;
+  } catch (e) {
+    dom.dataBody.innerHTML = `<p>Error: ${String(e)}</p>`;
+  }
+}
+function renderConsole(message, level = "info") {
+  const p = document.createElement("p");
+  p.textContent = message;
+  if (level !== "info") p.dataset.level = level;
+  dom.consoleEl.appendChild(p);
+  dom.consoleEl.scrollTop = dom.consoleEl.scrollHeight;
+}
+
+// src/inspector/audit-view.ts
+async function fetchAuditRollup() {
+  const res = await fetch(PD_ROUTES.audit);
+  if (!res.ok) throw new Error(`audit fetch failed: ${res.status}`);
+  const graph = await res.json();
+  return buildAuditRollup(graph, graph.subjectSha ? { subjectSha: graph.subjectSha } : {});
+}
+var el = (tag, cls, text) => {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+};
+function tagBadge(tag) {
+  const s = el("span", "audit-tag", `[${tag}]`);
+  s.dataset.tag = tag;
+  return s;
+}
+function componentLink(id) {
+  const a = el("a", "audit-link", id);
+  a.href = routeHref(`/${id.split("/").map(encodeURIComponent).join("/")}`);
+  return a;
+}
+function renderAuditView(rollup) {
+  const section = el("section", "audit-panel");
+  section.setAttribute("aria-label", "Corpus diagnostics audit");
+  const head = el("header", "audit-head");
+  head.appendChild(el("p", "audit-headline", rollup.headline));
+  if (rollup.subjectSha) head.appendChild(el("p", "audit-sha", rollup.subjectSha));
+  if (runtime.mode === "static") {
+    head.appendChild(el("p", "audit-sha", `Snapshot from ${new Date(runtime.builtAt).toLocaleString()}`));
+  }
+  section.appendChild(head);
+  const t = rollup.totals, ro = rollup.renderOutcomes;
+  const totals = el("dl", "audit-totals");
+  const stat = (label, value) => {
+    totals.appendChild(el("dt", "audit-stat-label", label));
+    totals.appendChild(el("dd", "audit-stat-value", value));
+  };
+  stat("Components", String(t.components));
+  stat("Affected", String(t.affected));
+  stat("Clean", `${t.cleanPct}%`);
+  stat("Defects", String(t.defects));
+  stat("Render", `${ro.ok} ok \xB7 ${ro.blank} blank \xB7 ${ro.error} error`);
+  section.appendChild(totals);
+  section.appendChild(el("h3", "audit-h", "Rules by blast radius"));
+  if (rollup.rulesByBlast.length === 0) {
+    section.appendChild(el("p", "audit-empty", "No rule findings."));
+  } else {
+    const ul = el("ul", "audit-rules");
+    for (const r of rollup.rulesByBlast) {
+      const li = el("li", "audit-rule");
+      li.appendChild(el("code", "audit-rule-id", `${r.engine}:${r.ruleId}`));
+      li.appendChild(el("span", "audit-rule-count", `${r.components} component${r.components === 1 ? "" : "s"} \xB7 ${r.occurrences} occ`));
+      for (const tag of r.tags) li.appendChild(tagBadge(tag));
+      ul.appendChild(li);
+    }
+    section.appendChild(ul);
+  }
+  section.appendChild(el("h3", "audit-h", "Per component"));
+  if (rollup.perComponent.length === 0) {
+    section.appendChild(el("p", "audit-empty", "No components with findings or a non-ok render."));
+  } else {
+    const ul = el("ul", "audit-components");
+    for (const c of rollup.perComponent) {
+      const li = el("li", "audit-component");
+      const cHead = el("div", "audit-component-head");
+      cHead.appendChild(componentLink(c.id));
+      if (c.render !== "ok") {
+        const r = el("span", "audit-render", c.render);
+        r.dataset.render = c.render;
+        cHead.appendChild(r);
+      }
+      li.appendChild(cHead);
+      const findings = el("ul", "audit-findings");
+      for (const o of c.occurrences) {
+        const f = el("li", "audit-finding");
+        f.appendChild(el("code", "audit-finding-rule", `${o.engine}:${o.ruleId}`));
+        f.appendChild(tagBadge(o.tag));
+        f.appendChild(el("span", "audit-finding-msg", o.message));
+        if (o.domPath) f.appendChild(el("code", "audit-finding-path", o.domPath));
+        findings.appendChild(f);
+      }
+      li.appendChild(findings);
+      ul.appendChild(li);
+    }
+    section.appendChild(ul);
+  }
+  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));
+  section.appendChild(scope);
+  return section;
+}
+
+// src/inspector/audit.ts
+var auditState = "idle";
+var auditRollup = null;
+async function loadAudit() {
+  auditState = "loading";
+  if (store.local.panelTab === "audit") renderAuditFacet();
+  try {
+    auditRollup = await fetchAuditRollup();
+    auditState = "loaded";
+  } catch {
+    auditRollup = null;
+    auditState = "error";
+  }
+  if (store.local.panelTab === "audit") renderAuditFacet();
+}
+function refreshAudit() {
+  void loadAudit();
+}
+function clearAuditError() {
+  if (auditState === "error") auditState = "idle";
+}
+function renderAuditFacet() {
+  if (auditState === "idle") {
+    void loadAudit();
+    return;
+  }
+  if (auditState === "loaded" && auditRollup) {
+    dom.panelContent.replaceChildren(renderAuditView(auditRollup));
+    return;
+  }
+  dom.panelContent.innerHTML = "<section class='audit-panel' aria-label='Corpus diagnostics audit'>" + (auditState === "loading" ? "<p class='audit-loading'>Loading corpus audit\u2026</p>" : "<p class='audit-error'>Corpus audit unavailable. Reopen the tab to retry.</p>") + "</section>";
+}
+
+// src/inspector/panel.ts
+async function renderPanel() {
+  if (store.local.panelTab === "audit") {
+    await renderAuditFacet();
+    return;
+  }
+  if (!session.current) {
+    dom.panelContent.innerHTML = "<p>Select a component to view docs.</p>";
+    return;
+  }
+  if (store.local.panelTab === "docs") {
+    dom.panelContent.innerHTML = session.current.doc ? session.current.doc : '<p class="doc-empty">No Documentation found</p>';
+    return;
+  }
+  if (store.local.panelTab === "relationships") {
+    let appendComponentGroup2 = function(label, ids, container, headingTag = "h3") {
+      const h = document.createElement(headingTag);
+      h.className = "rel-group-heading";
+      h.textContent = label;
+      container.appendChild(h);
+      if (ids.length === 0) {
+        const empty = document.createElement("p");
+        empty.className = "rel-empty";
+        empty.textContent = "none";
+        container.appendChild(empty);
+        return;
+      }
+      const byCategory = /* @__PURE__ */ new Map();
+      for (const id of ids) {
+        const cat = session.componentRegistry.get(id)?.category ?? id.split("/")[0];
+        const bucket = byCategory.get(cat) ?? [];
+        bucket.push(id);
+        byCategory.set(cat, bucket);
+      }
+      const sortedCategories = [...byCategory.keys()].sort(
+        (a, b) => (session.navCategoryOrder.get(a) ?? 999) - (session.navCategoryOrder.get(b) ?? 999)
+      );
+      const list = document.createElement("ul");
+      list.className = "rel-list";
+      for (const cat of sortedCategories) {
+        const catIds = byCategory.get(cat);
+        const catLi = document.createElement("li");
+        catLi.className = "rel-category";
+        const catSpan = document.createElement("span");
+        catSpan.className = "rel-category-heading";
+        catSpan.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
+        catLi.appendChild(catSpan);
+        catIds.sort((a, b) => {
+          const ta = session.componentRegistry.get(a)?.title ?? a;
+          const tb = session.componentRegistry.get(b)?.title ?? b;
+          return ta.localeCompare(tb);
+        });
+        const catList = document.createElement("ul");
+        catList.className = "rel-category-list";
+        for (const id of catIds) {
+          const meta = session.componentRegistry.get(id);
+          const isPrivate = meta?.visibility === "private";
+          const li = document.createElement("li");
+          li.className = "rel-item";
+          const a = document.createElement("a");
+          a.className = "rel-link";
+          a.href = routeHref(`/${id}`);
+          a.textContent = meta?.title ?? id;
+          li.appendChild(a);
+          if (isPrivate) {
+            const badge = document.createElement("span");
+            badge.className = "rel-private-badge";
+            badge.textContent = " private";
+            li.appendChild(badge);
+          }
+          catList.appendChild(li);
+        }
+        catLi.appendChild(catList);
+        list.appendChild(catLi);
+      }
+      container.appendChild(list);
+    }, appendPlainGroup2 = function(label, ids, container, headingTag = "h3") {
+      const h = document.createElement(headingTag);
+      h.className = "rel-group-heading";
+      h.textContent = label;
+      container.appendChild(h);
+      if (ids.length === 0) {
+        const empty = document.createElement("p");
+        empty.className = "rel-empty";
+        empty.textContent = "none";
+        container.appendChild(empty);
+        return;
+      }
+      const list = document.createElement("ul");
+      list.className = "rel-list";
+      for (const id of ids) {
+        const li = document.createElement("li");
+        li.className = "rel-item";
+        li.textContent = id;
+        list.appendChild(li);
+      }
+      container.appendChild(list);
+    };
+    var appendComponentGroup = appendComponentGroup2, appendPlainGroup = appendPlainGroup2;
+    const relAvail = session.current.relationships;
+    dom.panelContent.innerHTML = "";
+    const section = document.createElement("section");
+    section.className = "rel-panel";
+    section.setAttribute("aria-label", "Component relationships");
+    appendComponentGroup2("Uses", relAvail.uses, section);
+    appendComponentGroup2("Used by", relAvail.usedBy, section);
+    const styleUmbrella = document.createElement("div");
+    styleUmbrella.className = "rel-style-umbrella";
+    const styleH = document.createElement("h3");
+    styleH.className = "rel-group-heading rel-umbrella-heading";
+    styleH.textContent = "Style";
+    styleUmbrella.appendChild(styleH);
+    appendComponentGroup2("Style uses", relAvail.styleUses, styleUmbrella, "h4");
+    const styleModulesAll = [.../* @__PURE__ */ new Set([
+      ...relAvail.styleUsesModules ?? [],
+      ...relAvail.styleModules ?? []
+    ])].sort();
+    appendPlainGroup2("Style modules", styleModulesAll, styleUmbrella, "h4");
+    section.appendChild(styleUmbrella);
+    const hasChips = relAvail.inlineStyles || relAvail.utilityClasses || (relAvail.unattributedClasses?.length ?? 0) > 0;
+    if (hasChips) {
+      const chips = document.createElement("div");
+      chips.className = "rel-chips";
+      if (relAvail.inlineStyles) {
+        const chip = document.createElement("span");
+        chip.className = "rel-chip rel-chip--inline-styles";
+        chip.textContent = "Inline styles";
+        chips.appendChild(chip);
+      }
+      if (relAvail.utilityClasses) {
+        const chip = document.createElement("span");
+        chip.className = "rel-chip rel-chip--utility-classes";
+        chip.textContent = "Utility classes";
+        chips.appendChild(chip);
+      }
+      for (const cls of relAvail.unattributedClasses ?? []) {
+        const chip = document.createElement("span");
+        chip.className = "rel-chip rel-chip--unattributed";
+        chip.textContent = cls;
+        chips.appendChild(chip);
+      }
+      section.appendChild(chips);
+    }
+    dom.panelContent.appendChild(section);
+    return;
+  }
+}
+
+// src/core/cvd-math.ts
+var CVD_IDENTITY = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+function cvdLinearTable(full) {
+  return Array.from({ length: 11 }, (_, i) => {
+    const t = i / 10;
+    return CVD_IDENTITY.map((v, j) => v + (full[j] - v) * t);
+  });
+}
+var MACHADO = {
+  // Protanopia (L-cone loss) — Machado 2009, exact physiological values.
+  protanopia: [
+    [...CVD_IDENTITY],
+    [0.856167, 0.182038, -0.038205, 0.029342, 0.955115, 0.015544, -2176e-6, -0.025934, 1.02811],
+    [0.734766, 0.334872, -0.069637, 0.05784, 0.903969, 0.038191, -4285e-6, -0.051898, 1.056183],
+    [0.630323, 0.465641, -0.095964, 0.086397, 0.8471, 0.066503, -6294e-6, -0.075916, 1.08221],
+    [0.539009, 0.579343, -0.118352, 0.11482, 0.788267, 0.096913, -82e-4, -0.098948, 1.107148],
+    [0.458064, 0.679578, -0.137642, 0.140729, 0.736319, 0.122953, -9962e-6, -0.121111, 1.131073],
+    [0.38545, 0.769005, -0.154455, 0.164416, 0.69109, 0.144494, -0.011561, -0.142143, 1.153704],
+    [0.319627, 0.849633, -0.169261, 0.186197, 0.651799, 0.162004, -0.013136, -0.16262, 1.175756],
+    [0.259411, 0.923008, -0.182419, 0.205816, 0.613938, 0.180247, -0.014678, -0.182078, 1.196756],
+    [0.203876, 0.990338, -0.194214, 0.223825, 0.579316, 0.19686, -0.016169, -0.200382, 1.216551],
+    [0.152286, 1.052583, -0.204868, 0.114503, 0.786281, 0.099216, -3882e-6, -0.048116, 1.051998]
+  ],
+  // Deuteranopia (M-cone loss) — Machado 2009, exact physiological values.
+  deuteranopia: [
+    [...CVD_IDENTITY],
+    [0.866435, 0.177704, -0.044139, 0.049567, 0.939063, 0.01137, -3453e-6, 7233e-6, 0.99622],
+    [0.760729, 0.319078, -0.079807, 0.090568, 0.865985, 0.043447, -6027e-6, 0.013626, 0.992401],
+    [0.675425, 0.43385, -0.109275, 0.125303, 0.781209, 0.093488, -795e-5, 0.026799, 0.981151],
+    [0.605511, 0.52856, -0.134071, 0.155318, 0.687938, 0.156744, -9376e-6, 0.04331, 0.966066],
+    [0.547494, 0.60724, -0.154734, 0.181692, 0.589028, 0.22928, -0.01041, 0.06081, 0.9496],
+    [0.498864, 0.674188, -0.173052, 0.205199, 0.484799, 0.310002, -0.011131, 0.078156, 0.932975],
+    [0.457771, 0.731899, -0.18967, 0.225977, 0.374653, 0.39937, -0.011595, 0.095399, 0.916196],
+    [0.422116, 0.781437, -0.203553, 0.24434, 0.260728, 0.494932, -0.011841, 0.112064, 0.899777],
+    [0.394719, 0.821042, -0.215761, 0.262213, 0.466615, 0.271172, -0.01183, 0.077502, 0.934329],
+    [0.367322, 0.860646, -0.227968, 0.280085, 0.672501, 0.047413, -0.01182, 0.04294, 0.968881]
+  ],
+  // Tritanopia (S-cone loss) — Machado 2009, exact physiological values.
+  // NOT a linear ramp: R→R dips to 0.896 at sev 0.2, then rises past 1 (peaks ~1.279 at sev 0.9).
+  tritanopia: [
+    [...CVD_IDENTITY],
+    [0.92667, 0.092514, -0.019184, 0.021191, 0.964503, 0.014306, 8437e-6, 0.054813, 0.93675],
+    [0.89572, 0.13333, -0.02905, 0.029997, 0.9454, 0.024603, 0.013027, 0.104707, 0.882266],
+    [0.905871, 0.127791, -0.033662, 0.026856, 0.941251, 0.031893, 0.01341, 0.148296, 0.838294],
+    [0.948035, 0.08949, -0.037526, 0.014364, 0.946792, 0.038844, 0.010853, 0.193991, 0.795156],
+    [1.017277, 0.027029, -0.044306, -6113e-6, 0.958479, 0.047634, 6379e-6, 0.248708, 0.744913],
+    [1.104996, -0.046633, -0.058363, -0.032137, 0.971635, 0.060503, 1336e-6, 0.317922, 0.680742],
+    [1.193214, -0.109812, -0.083402, -0.058496, 0.97941, 0.079086, -2346e-6, 0.403492, 0.598854],
+    [1.257728, -0.139648, -0.118081, -0.078003, 0.975409, 0.102594, -3316e-6, 0.501214, 0.502102],
+    [1.278864, -0.125333, -0.153531, -0.084748, 0.957674, 0.127074, -989e-6, 0.601151, 0.399838],
+    [1.255528, -0.076749, -0.178779, -0.078411, 0.930809, 0.147602, 4733e-6, 0.691367, 0.3039]
+  ],
+  // Achromatopsia — Rec. 709 luminance-weighted greyscale ramp (identity → full greyscale).
+  // Not a Machado table: the physiological model doesn't cover monochromacy.
+  achromatopsia: cvdLinearTable(
+    [0.2126, 0.7152, 0.0722, 0.2126, 0.7152, 0.0722, 0.2126, 0.7152, 0.0722]
+  )
+};
+function computeCvdMatrix(type, severity) {
+  const table = MACHADO[type];
+  if (severity <= 0) return table[0];
+  if (severity >= 1) return table[10];
+  const lo = Math.floor(severity * 10);
+  const t = severity * 10 - lo;
+  const a = table[lo];
+  const b = table[lo + 1];
+  return a.map((v, i) => v + (b[i] - v) * t);
+}
+function cvdMatrixToValues(m) {
+  return `${m[0]} ${m[1]} ${m[2]} 0 0  ${m[3]} ${m[4]} ${m[5]} 0 0  ${m[6]} ${m[7]} ${m[8]} 0 0  0 0 0 1 0`;
+}
+
+// src/core/radiogroup.ts
+function setupRadiogroupKeyboard(group) {
+  group.addEventListener("keydown", (e) => {
+    const radios = [...group.querySelectorAll("[role='radio']")];
+    const focused = radios.indexOf(document.activeElement);
+    if (focused === -1) return;
+    let next = -1;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      next = (focused + 1) % radios.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      next = (focused - 1 + radios.length) % radios.length;
+    } else if (e.key === " " || e.key === "Enter") {
+      radios[focused].click();
+      e.preventDefault();
+      return;
+    } else return;
+    e.preventDefault();
+    radios[next].focus();
+    radios[next].click();
+  });
+}
+
+// src/rail/a11y-control.ts
+function applyCvd() {
+  const { type, severity } = store.url.cvd;
+  if (type === "none" || !dom.cvdFeMatrix) {
+    dom.iframe.style.removeProperty("filter");
+    return;
+  }
+  dom.cvdFeMatrix.setAttribute("values", cvdMatrixToValues(computeCvdMatrix(type, severity)));
+  dom.iframe.style.setProperty("filter", "url(#cvd-filter)");
+}
+function applyType() {
+  const type = store.url.cvd.type;
+  dom.cvdTypeGroup.querySelectorAll("[role='radio']").forEach((btn) => {
+    const active = btn.dataset.cvdType === type;
+    btn.setAttribute("aria-checked", String(active));
+    btn.tabIndex = active ? 0 : -1;
+  });
+  dom.cvdSeveritySlider.disabled = type === "none";
+  updateSeverityFill();
+  updateSignal();
+}
+function updateSeverityFill() {
+  const min = parseFloat(dom.cvdSeveritySlider.min || "0");
+  const max = parseFloat(dom.cvdSeveritySlider.max || "1");
+  const v = parseFloat(dom.cvdSeveritySlider.value);
+  const pct = max > min ? (v - min) / (max - min) * 100 : 0;
+  dom.cvdSeveritySlider.style.setProperty("--fill", `${pct}%`);
+}
+function updateSignal() {
+  const { type, severity } = store.url.cvd;
+  const active = type !== "none" && severity > 0;
+  const summary = dom.a11yDetails.querySelector(".a11y-picker-summary");
+  const existing = summary.querySelector(".a11y-signal");
+  if (!active) {
+    existing?.remove();
+    return;
+  }
+  const el2 = existing ?? (() => {
+    const s = document.createElement("span");
+    s.className = "a11y-signal";
+    s.setAttribute("aria-hidden", "true");
+    summary.appendChild(s);
+    return s;
+  })();
+  const LABELS = {
+    protanopia: "Protanopia",
+    deuteranopia: "Deuteranopia",
+    tritanopia: "Tritanopia",
+    achromatopsia: "Achrom."
+  };
+  el2.textContent = `${LABELS[type] ?? type} \xB7 ${severity.toFixed(2)}`;
+}
+function initA11yControl() {
+  if (store.url.cvd.type !== "none") {
+    dom.cvdSeveritySlider.value = String(store.url.cvd.severity);
+  }
+  applyType();
+  setupRadiogroupKeyboard(dom.cvdTypeGroup);
+  dom.cvdTypeGroup.querySelectorAll("[role='radio']").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const type = btn.dataset.cvdType;
+      const severity = type === "none" ? 0 : parseFloat(dom.cvdSeveritySlider.value);
+      store.setUrl({ cvd: { type, severity } });
+      const u = new URL(window.location.href);
+      if (type === "none") u.searchParams.delete("cvd");
+      else u.searchParams.set("cvd", `${type}:${severity}`);
+      history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+      applyType();
+      applyCvd();
+    });
+  });
+  dom.cvdSeveritySlider.addEventListener("input", () => {
+    const type = store.url.cvd.type;
+    if (type === "none") return;
+    const severityStr = dom.cvdSeveritySlider.value;
+    const severity = parseFloat(severityStr);
+    store.setUrl({ cvd: { type, severity } });
+    const u = new URL(window.location.href);
+    u.searchParams.set("cvd", `${type}:${severityStr}`);
+    history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+    updateSeverityFill();
+    applyCvd();
+    updateSignal();
+  });
+}
+
+// src/rail/brand.ts
+function renderBrand(brand) {
+  dom.railBrandEl.innerHTML = "";
+  let inner;
+  if (typeof brand?.logo === "string") {
+    const img = document.createElement("img");
+    img.src = brand.logo;
+    img.alt = brand.logoAlt ?? "";
+    img.className = "rail-brand-logo";
+    inner = img;
+  } else if (brand?.logo && typeof brand.logo === "object") {
+    const picture = document.createElement("picture");
+    const source = document.createElement("source");
+    source.media = "(prefers-color-scheme: dark)";
+    source.srcset = brand.logo.dark;
+    const img = document.createElement("img");
+    img.src = brand.logo.light;
+    img.alt = brand.logoAlt ?? "";
+    picture.appendChild(source);
+    picture.appendChild(img);
+    inner = picture;
+  } else {
+    const span = document.createElement("span");
+    span.className = "rail-brand-title";
+    span.textContent = brand?.title ?? "Pattern Dump";
+    inner = span;
+  }
+  if (brand?.href) {
+    const a = document.createElement("a");
+    a.href = brand.href;
+    a.className = "rail-brand-link";
+    a.appendChild(inner);
+    dom.railBrandEl.appendChild(a);
+  } else {
+    dom.railBrandEl.appendChild(inner);
+  }
+}
+
+// src/rail/theme.ts
+function buildSwatchStrip(tokens, slots) {
+  const strip = document.createElement("span");
+  strip.className = "theme-swatch-strip";
+  strip.setAttribute("aria-hidden", "true");
+  if (!tokens || slots.length === 0) return strip;
+  for (const slot of slots) {
+    const band = document.createElement("span");
+    const value = tokens[slot];
+    if (value !== null && value !== void 0) {
+      band.className = "theme-swatch-band";
+      band.style.background = value;
+    } else {
+      band.className = "theme-swatch-band theme-swatch-undefined";
+    }
+    strip.appendChild(band);
+  }
+  return strip;
+}
+function activeThemeName() {
+  return store.local.theme || session.serverDefaultTheme;
+}
+function populateThemePicker(fetchedThemes, onThemeApplied) {
+  const currentTheme = activeThemeName();
+  const defaultSlots = ["--bodyBackground", "--themePrimary", "--accent"];
+  const slotsOf = (t) => t?.tokens ? Object.keys(t.tokens) : defaultSlots;
+  const activeTheme = fetchedThemes.find((t) => t.name === currentTheme);
+  dom.themePickerSwatch.innerHTML = "";
+  dom.themePickerSwatch.appendChild(buildSwatchStrip(activeTheme?.tokens, slotsOf(activeTheme)));
+  dom.themePickerCurrentName.textContent = currentTheme || "\u2014 no theme \u2014";
+  dom.themePickerReadout.textContent = currentTheme || "";
+  dom.themePickerList.innerHTML = "";
+  for (const t of fetchedThemes) {
+    const li = document.createElement("li");
+    li.className = "theme-swatch-item";
+    const radio = document.createElement("input");
+    radio.type = "radio";
+    radio.name = "pd-theme";
+    radio.id = `pd-theme-${t.name}`;
+    radio.className = "theme-radio";
+    radio.value = t.name;
+    radio.checked = t.name === currentTheme;
+    const label = document.createElement("label");
+    label.htmlFor = radio.id;
+    label.className = "theme-swatch-chip";
+    label.title = t.name;
+    label.setAttribute("aria-label", t.name);
+    label.appendChild(buildSwatchStrip(t.tokens, slotsOf(t)));
+    radio.addEventListener("change", () => {
+      store.setLocal({ theme: t.name });
+      applyTheme(t.name);
+      dom.themePickerCurrentName.textContent = t.name;
+      dom.themePickerReadout.textContent = t.name;
+      dom.themePickerSwatch.innerHTML = "";
+      dom.themePickerSwatch.appendChild(buildSwatchStrip(t.tokens, slotsOf(t)));
+      onThemeApplied();
+    });
+    label.addEventListener("mouseover", () => {
+      dom.themePickerReadout.textContent = t.name;
+    });
+    label.addEventListener("focus", () => {
+      dom.themePickerReadout.textContent = t.name;
+    });
+    label.addEventListener("mouseleave", () => {
+      dom.themePickerReadout.textContent = activeThemeName();
+    });
+    label.addEventListener("blur", () => {
+      dom.themePickerReadout.textContent = activeThemeName();
+    });
+    li.appendChild(radio);
+    li.appendChild(label);
+    dom.themePickerList.appendChild(li);
+  }
+}
+function applyTheme(theme) {
+  applyThemeToIframe(dom.iframe, theme);
+  document.querySelectorAll(".gallery-item iframe").forEach((f) => {
+    applyThemeToIframe(f, theme);
+  });
+}
+function applyThemeToIframe(f, theme) {
+  const doc = f.contentDocument;
+  const body = doc?.body;
+  if (!doc || !body) return;
+  if (session.themeSwitch === "stylesheet") {
+    const link = doc.querySelector("link[data-pd-theme]");
+    if (link && theme) {
+      link.setAttribute("href", resourceUrl(themeCssUrl(theme)));
+      link.setAttribute("data-pd-theme", theme);
+    }
+    return;
+  }
+  if (theme) body.setAttribute("data-theme", theme);
+  else body.removeAttribute("data-theme");
+}
+
+// src/rail/tree-util.ts
+function extractFolderPaths(nodes) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const n of nodes) {
+    if (n.children && n.children.length > 0) {
+      paths.add(n.path);
+      for (const p of extractFolderPaths(n.children)) paths.add(p);
+    }
+  }
+  return paths;
+}
+function buildSidebarHtml(nodes, depth) {
+  return nodes.map((n) => buildNodeHtml(n, depth)).join("");
+}
+function isEffectivelyPrivate(node) {
+  if (node.visibility === "private") return true;
+  if (node.kind === "component") return false;
+  if (!node.children || node.children.length === 0) return false;
+  return node.children.every(isEffectivelyPrivate);
+}
+function isEffectivelyPackage(node) {
+  if (node.kind === "component") return node.source !== void 0;
+  if (!node.children || node.children.length === 0) return false;
+  return node.children.every(isEffectivelyPackage);
+}
+function hasPackageComponents(nodes) {
+  return nodes.some((n) => n.kind === "component" && n.source !== void 0 || hasPackageComponents(n.children ?? []));
+}
+function buildNodeHtml(node, depth) {
+  const isPrivate = isEffectivelyPrivate(node);
+  const privateAttr = (isPrivate ? " data-private" : "") + (isEffectivelyPackage(node) ? " data-package" : "");
+  const hasChildren = node.children && node.children.length > 0;
+  if (hasChildren) {
+    const titleEscaped = escapeAttr(node.title);
+    const pathEscaped = escapeAttr(node.path);
+    const showAllLink = node.hasOverview ? `<a href="${routeHref(`/${pathEscaped}`)}" class="tree-show-all" aria-label="Show all ${titleEscaped}">All</a>` : "";
+    let firstItem = "";
+    if (!node.hasOverview && node.kind === "component") {
+      firstItem = `<li class="tree-node"><a href="${routeHref(`/${pathEscaped}`)}" class="tree-link">${titleEscaped}</a></li>`;
+    }
+    const childrenHtml = buildSidebarHtml(node.children, depth + 1);
+    return `<li class="tree-node"${privateAttr} data-path="${pathEscaped}">
+<div class="tree-folder-row" data-depth="${depth}"><details class="tree-details" data-depth="${depth}"><summary class="tree-folder"><span class="disclosure-caret" aria-hidden="true">${svgIcon("chevron")}</span><span class="tree-folder-label">${titleEscaped}</span></summary></details>${showAllLink}</div>
+<ul role="list">${firstItem}${childrenHtml}</ul>
+</li>`;
+  }
+  const privateBadge = isPrivate ? ` <span class="private-badge">private</span>` : "";
+  return `<li class="tree-node"${privateAttr} data-path="${escapeAttr(node.path)}"><a href="${routeHref(`/${escapeAttr(node.path)}`)}" class="tree-link">${escapeAttr(node.title)}${privateBadge}</a></li>`;
+}
+
+// src/rail/tree.ts
+function restoreNavOpenState(paths) {
+  for (const path of paths) {
+    const li = dom.sidebarTree.querySelector(`.tree-node[data-path="${CSS.escape(path)}"]`);
+    const det = li?.querySelector(":scope > .tree-folder-row > .tree-details");
+    if (det) det.open = true;
+  }
+}
+function mountSidebar() {
+  dom.sidebarTree.innerHTML = buildSidebarHtml(session.tree.roots, 0);
+  dom.sidebarTree.querySelectorAll("details.tree-details > summary").forEach((summary) => {
+    summary.addEventListener("click", () => {
+      const det = summary.closest("details.tree-details");
+      if (!det) return;
+      const li = det.closest(".tree-node[data-path]");
+      if (!li?.dataset.path) return;
+      const path = li.dataset.path;
+      const paths = new Set(store.local.navOpenPaths);
+      const willBeOpen = !det.open;
+      if (willBeOpen) paths.add(path);
+      else paths.delete(path);
+      store.setLocal({ navOpenPaths: paths });
+    });
+  });
+}
+function setActiveTreeItem(path) {
+  dom.sidebarTree.querySelectorAll("[aria-current]").forEach((el3) => el3.removeAttribute("aria-current"));
+  const link = dom.sidebarTree.querySelector(`a.tree-link[href="${CSS.escape(routeHref(`/${path}`))}"]`) ?? dom.sidebarTree.querySelector(`a.tree-show-all[href="${CSS.escape(routeHref(`/${path}`))}"]`);
+  if (!link) return;
+  link.setAttribute("aria-current", "page");
+  let el2 = link.parentElement;
+  while (el2 && el2 !== dom.sidebarTree) {
+    if (el2.classList.contains("tree-node")) {
+      const det = el2.querySelector(":scope > .tree-folder-row > .tree-details");
+      if (det) det.open = true;
+    }
+    el2 = el2.parentElement;
+  }
+  link.scrollIntoView({ block: "nearest" });
+}
+function filterTree(query) {
+  const q = query.toLowerCase().trim();
+  if (!q) {
+    dom.sidebarTree.querySelectorAll(".tree-node[data-hidden-search]").forEach((el2) => {
+      el2.hidden = false;
+      el2.removeAttribute("data-hidden-search");
+    });
+    return;
+  }
+  dom.sidebarTree.querySelectorAll(".tree-node").forEach((li) => {
+    const path = li.dataset.path ?? "";
+    const linkText = (li.querySelector("a.tree-link")?.textContent ?? li.querySelector(".tree-folder-label")?.textContent ?? "").toLowerCase();
+    const matches = linkText.includes(q) || path.toLowerCase().includes(q);
+    li.hidden = !matches;
+    if (!matches) li.dataset.hiddenSearch = "1";
+    else li.removeAttribute("data-hidden-search");
+  });
+  const allDetails = Array.from(dom.sidebarTree.querySelectorAll("details.tree-details")).reverse();
+  for (const det of allDetails) {
+    const li = det.closest(".tree-node");
+    if (!li) continue;
+    const ul = li.querySelector(":scope > ul");
+    if (!ul) continue;
+    const hasVisible = Array.from(ul.querySelectorAll(":scope > .tree-node")).some(
+      (child) => !child.hidden
+    );
+    li.hidden = !hasVisible;
+    if (!hasVisible) li.dataset.hiddenSearch = "1";
+    else {
+      li.removeAttribute("data-hidden-search");
+      if (q) det.open = true;
+    }
+  }
+}
+function applyPackageFilter(hide) {
+  dom.hidePackagesCheck.checked = hide;
+  dom.mainEl.classList.toggle("hide-packages", hide);
+}
+function syncPackageControl(tree) {
+  dom.hidePackagesLabel.hidden = !hasPackageComponents(tree.roots);
+}
+
+// src/stage/fullpage-forwarder.ts
+var FORWARDER = `<script>(function(){
+  document.addEventListener('keydown',function(e){
+    if(e.key==='Escape'){e.preventDefault();window.parent.postMessage({type:'pd-fp',action:'exit'},'*');}
+  });
+  var _l=0;
+  function _a(){var n=Date.now();if(n-_l<100)return;_l=n;window.parent.postMessage({type:'pd-fp',action:'active'},'*');}
+  document.addEventListener('pointermove',_a);
+  document.addEventListener('pointerdown',_a);
+  document.addEventListener('touchstart',_a,{passive:true});
+})();<\/script>`;
+function withForwarder(doc) {
+  return doc.includes("</body>") ? doc.replace("</body>", FORWARDER + "</body>") : doc + FORWARDER;
+}
+
+// src/stage/viewport.ts
+var PRESETS = {
+  mobile: { w: 375, h: 667 },
+  tablet: { w: 768, h: 1024 },
+  desktop: { w: 1280, h: 800 }
+};
+var vpDisco = false;
+var vpDiscoRaf = 0;
+var vpDiscoX = 320;
+var vpDiscoDir = 1;
+function updateVpModeLabel() {
+  if (dom.vpDiscoBtn.getAttribute("aria-pressed") === "true") {
+    dom.vpModeLabelEl.textContent = "Disco";
+    return;
+  }
+  const active = dom.viewportToolbar.querySelector('[data-vp][aria-checked="true"]');
+  dom.vpModeLabelEl.textContent = active?.getAttribute("aria-label") ?? "";
+}
+function updateReadout() {
+  dom.iframe.title = session.current ? session.currentVariant ? `Preview: ${session.current.id}~${session.currentVariant}` : `Preview: ${session.current.id}` : "Component preview";
+  try {
+    const cw = dom.iframe.contentWindow;
+    if (!cw) {
+      dom.vpReadout.textContent = "\u2014 \xD7 \u2014";
+      return;
+    }
+    const w = cw.innerWidth;
+    const h = cw.innerHeight;
+    dom.vpReadout.textContent = `${w} \xD7 ${h}`;
+    dom.vpReadout.setAttribute("aria-label", `Viewport ${w} by ${h} pixels`);
+  } catch {
+    dom.vpReadout.textContent = "\u2014 \xD7 \u2014";
+  }
+  syncMarks();
+}
+function syncMarks() {
+  if (dom.singlePreview.hidden) {
+    dom.markOverlay.hidden = true;
+    return;
+  }
+  const fr = dom.iframe.getBoundingClientRect();
+  if (fr.width < 1 || fr.height < 1) {
+    dom.markOverlay.hidden = true;
+    return;
+  }
+  const sr = dom.stageView.getBoundingClientRect();
+  const EPSILON = 2;
+  if (fr.width >= sr.width - EPSILON || fr.height >= sr.height - EPSILON) {
+    dom.markOverlay.hidden = true;
+    return;
+  }
+  dom.markOverlay.style.left = `${fr.left - sr.left}px`;
+  dom.markOverlay.style.top = `${fr.top - sr.top}px`;
+  dom.markOverlay.style.width = `${fr.width}px`;
+  dom.markOverlay.style.height = `${fr.height}px`;
+  dom.markOverlay.hidden = false;
+}
+function syncFrameFocusListeners() {
+  try {
+    const doc = dom.iframe.contentDocument;
+    if (!doc) return;
+    doc.addEventListener("focusin", () => dom.iframe.classList.add("frame-focused"), { capture: true });
+  } catch {
+  }
+}
+function currentVpParam() {
+  const vp = store.url.viewport;
+  return vp !== "fit" && vp !== "fullscreen" ? `?vp=${encodeURIComponent(vp)}` : "";
+}
+function applyViewport() {
+  const vp = store.url.viewport;
+  if (vp === "fit" || vp === "fullscreen") {
+    dom.iframe.style.removeProperty("--vp-w");
+    dom.iframe.classList.remove("vp-sized");
+    dom.iframe.classList.remove("vp-content");
+    dom.iframe.classList.add("vp-fit");
+  } 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");
+  } else {
+    const p = PRESETS[vp];
+    dom.iframe.style.setProperty("--vp-w", `${p.w}px`);
+    dom.iframe.classList.add("vp-sized");
+    dom.iframe.classList.remove("vp-content");
+    dom.iframe.classList.remove("vp-fit");
+  }
+  dom.viewportToolbar.querySelectorAll("[data-vp]").forEach((btn) => {
+    const key = btn.dataset.vp;
+    const active = key === vp;
+    btn.setAttribute("aria-checked", String(active));
+    btn.innerHTML = active ? svgIcon(`vp-${key}-fill`) : svgIcon(`vp-${key}`);
+  });
+  const radios = [...dom.viewportToolbar.querySelectorAll("[role='radio']")];
+  const checkedIdx = radios.findIndex((b) => b.dataset.vp === vp && vp !== "fullscreen");
+  radios.forEach((b, i) => {
+    b.tabIndex = (checkedIdx === -1 ? i === 0 : i === checkedIdx) ? 0 : -1;
+  });
+  requestAnimationFrame(updateReadout);
+  updateVpModeLabel();
+}
+function isDiscoRunning() {
+  return vpDisco;
+}
+function stopDisco() {
+  vpDisco = false;
+  cancelAnimationFrame(vpDiscoRaf);
+  dom.viewportToolbar.removeAttribute("data-disco-active");
+  dom.vpDiscoBtn.setAttribute("aria-pressed", "false");
+  dom.vpDiscoBtn.innerHTML = svgIcon("vp-disco");
+  delete dom.mainEl.dataset.noTransition;
+  applyViewport();
+}
+function startDisco() {
+  if (vpDisco) return;
+  vpDisco = true;
+  dom.viewportToolbar.setAttribute("data-disco-active", "");
+  dom.vpDiscoBtn.setAttribute("aria-pressed", "true");
+  dom.vpDiscoBtn.innerHTML = svgIcon("vp-disco-fill");
+  dom.mainEl.dataset.noTransition = "";
+  dom.iframe.classList.add("vp-sized");
+  vpDiscoX = Math.max(320, Math.round(dom.iframe.getBoundingClientRect().width) || 320);
+  vpDiscoDir = 1;
+  function tick() {
+    if (!vpDisco) return;
+    const stageW = dom.stageView.clientWidth;
+    vpDiscoX += vpDiscoDir * 4;
+    if (vpDiscoX >= stageW) {
+      vpDiscoX = stageW;
+      vpDiscoDir = -1;
+    }
+    if (vpDiscoX <= 320) {
+      vpDiscoX = 320;
+      vpDiscoDir = 1;
+    }
+    dom.iframe.style.setProperty("--vp-w", `${vpDiscoX}px`);
+    updateReadout();
+    vpDiscoRaf = requestAnimationFrame(tick);
+  }
+  vpDiscoRaf = requestAnimationFrame(tick);
+}
+function initViewport(onFullscreen) {
+  applyViewport();
+  dom.viewportToolbar.querySelectorAll("[data-vp]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      if (vpDisco) stopDisco();
+      const key = btn.dataset.vp;
+      if (key === "fullscreen") {
+        onFullscreen();
+        return;
+      }
+      store.setUrl({ viewport: key });
+      const u = new URL(window.location.href);
+      if (key === "fit") u.searchParams.delete("vp");
+      else u.searchParams.set("vp", key);
+      history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+      applyViewport();
+    });
+  });
+  dom.vpDiscoBtn.addEventListener("click", () => {
+    if (vpDisco) stopDisco();
+    else startDisco();
+    updateVpModeLabel();
+  });
+  let vpPointerInside = false;
+  let vpFocusInside = false;
+  const showVpLabel = (e) => {
+    const btn = e.target.closest(".rail-vp-btn");
+    if (!btn) return;
+    if (btn.dataset.labelOff !== void 0) {
+      const on = btn.getAttribute("aria-pressed") === "true";
+      dom.vpModeLabelEl.textContent = on ? btn.dataset.labelOn ?? "" : btn.dataset.labelOff ?? "";
+    } else {
+      dom.vpModeLabelEl.textContent = btn.getAttribute("aria-label") ?? "";
+    }
+  };
+  const tryRevertVpLabel = () => {
+    if (!vpPointerInside && !vpFocusInside) updateVpModeLabel();
+  };
+  dom.viewportToolbar.addEventListener("pointerenter", (e) => {
+    vpPointerInside = true;
+    showVpLabel(e);
+  }, true);
+  dom.viewportToolbar.addEventListener("pointerleave", () => {
+    vpPointerInside = false;
+    tryRevertVpLabel();
+  });
+  dom.viewportToolbar.addEventListener("focusin", (e) => {
+    vpFocusInside = true;
+    showVpLabel(e);
+  });
+  dom.viewportToolbar.addEventListener("focusout", (e) => {
+    if (!e.relatedTarget || !dom.viewportToolbar.contains(e.relatedTarget)) {
+      vpFocusInside = false;
+      tryRevertVpLabel();
+    }
+  });
+  setupRadiogroupKeyboard(dom.viewportToolbar.querySelector("[role='radiogroup']"));
+  const iframeObserver = new ResizeObserver(() => requestAnimationFrame(updateReadout));
+  iframeObserver.observe(dom.iframe);
+  iframeObserver.observe(dom.stageView);
+  dom.iframe.addEventListener("load", () => {
+    updateReadout();
+    syncFrameFocusListeners();
+  });
+  document.addEventListener("focusin", () => dom.iframe.classList.remove("frame-focused"), { capture: true });
+}
+function initDprTracking() {
+  const setDpr = () => {
+    document.documentElement.style.setProperty("--dpr", String(window.devicePixelRatio));
+  };
+  setDpr();
+  const arm = () => {
+    const mq = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mq.addEventListener("change", () => {
+      setDpr();
+      arm();
+    }, { once: true });
+  };
+  arm();
+}
+
+// src/stage/fullpage.ts
+var fpIdleTimer = null;
+var fullpageUnsubscribe = null;
+function showFullpageChrome() {
+  dom.fullpageDialog.classList.add("fp-chrome-visible");
+  if (fpIdleTimer !== null) clearTimeout(fpIdleTimer);
+  fpIdleTimer = setTimeout(() => {
+    dom.fullpageDialog.classList.remove("fp-chrome-visible");
+    fpIdleTimer = null;
+  }, 2e3);
+}
+async function refreshFullpageContent() {
+  if (!session.current) return;
+  try {
+    const doc = await fetch(previewUrl(session.current.id, session.currentVariant ?? void 0, store.local.theme || void 0)).then((r) => r.text());
+    dom.fullpageFrame.srcdoc = withForwarder(doc);
+  } catch {
+  }
+}
+async function openFullpage() {
+  if (!session.current) return;
+  store.setUrl({ viewport: "fullscreen" });
+  const u = new URL(window.location.href);
+  u.searchParams.set("vp", "fullscreen");
+  history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+  applyViewport();
+  await refreshFullpageContent();
+  dom.fullpageDialog.showModal();
+  if (fullpageUnsubscribe) fullpageUnsubscribe();
+  fullpageUnsubscribe = store.subscribe(() => {
+    if (dom.fullpageDialog.open) void refreshFullpageContent();
+  });
+}
+function initFullpage() {
+  dom.fullpageCloseBtn.addEventListener("click", () => dom.fullpageDialog.close());
+  dom.fullpageDialog.addEventListener("close", () => {
+    dom.fullpageFrame.srcdoc = "";
+    if (fpIdleTimer !== null) {
+      clearTimeout(fpIdleTimer);
+      fpIdleTimer = null;
+    }
+    dom.fullpageDialog.classList.remove("fp-chrome-visible");
+    if (fullpageUnsubscribe) {
+      fullpageUnsubscribe();
+      fullpageUnsubscribe = null;
+    }
+    if (store.url.viewport === "fullscreen") {
+      store.setUrl({ viewport: "fit" });
+      const u = new URL(window.location.href);
+      u.searchParams.delete("vp");
+      history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+      applyViewport();
+    }
+  });
+  dom.viewportToolbar.querySelector(".fullpage-btn").addEventListener("click", () => {
+    void openFullpage();
+  });
+}
+
+// src/stage/splitters.ts
+function initSplitters() {
+  const dims = store.local.dims;
+  if (dims.sidebarW) dom.mainEl.style.setProperty("--pd-sidebar-w", dims.sidebarW);
+  if (dims.panelW) dom.mainEl.style.setProperty("--pd-panel-w", dims.panelW);
+  if (dims.dockH) dom.mainEl.style.setProperty("--pd-dock-h", dims.dockH);
+  requestAnimationFrame(() => {
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const renderedSidebar = dom.sidebarEl.getBoundingClientRect().width;
+    const renderedPanel = "panelOpen" in dom.mainEl.dataset && !dom.panel.hidden ? dom.panel.getBoundingClientRect().width : null;
+    const renderedDock = !dom.dockEl.hidden ? dom.dockEl.getBoundingClientRect().height : null;
+    function pxToVw(px) {
+      return `${(px / vw * 100).toFixed(2)}vw`;
+    }
+    function pxToVh(px) {
+      return `${(px / vh * 100).toFixed(2)}vh`;
+    }
+    const cur = store.local.dims;
+    const storedSidebarPx = cur.sidebarW ? parseFloat(cur.sidebarW) / 100 * vw : null;
+    const storedPanelPx = cur.panelW ? parseFloat(cur.panelW) / 100 * vw : null;
+    const storedDockPx = cur.dockH ? parseFloat(cur.dockH) / 100 * vh : null;
+    const EPS = 2;
+    let next = cur;
+    let changed = false;
+    if (storedSidebarPx !== null && Math.abs(storedSidebarPx - renderedSidebar) > EPS) {
+      next = { ...next, sidebarW: pxToVw(renderedSidebar) };
+      dom.mainEl.style.setProperty("--pd-sidebar-w", next.sidebarW);
+      changed = true;
+    }
+    if (renderedPanel !== null && storedPanelPx !== null && Math.abs(storedPanelPx - renderedPanel) > EPS) {
+      next = { ...next, panelW: pxToVw(renderedPanel) };
+      dom.mainEl.style.setProperty("--pd-panel-w", next.panelW);
+      changed = true;
+    }
+    if (renderedDock !== null && storedDockPx !== null && Math.abs(storedDockPx - renderedDock) > EPS) {
+      next = { ...next, dockH: pxToVh(renderedDock) };
+      dom.mainEl.style.setProperty("--pd-dock-h", next.dockH);
+      changed = true;
+    }
+    if (changed) store.setLocal({ dims: next });
+  });
+  function probeWidth(cssExpr, contextEl) {
+    const el2 = document.createElement("div");
+    el2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;width:${cssExpr}`;
+    contextEl.appendChild(el2);
+    const px = Math.round(el2.getBoundingClientRect().width);
+    el2.remove();
+    return px;
+  }
+  const STAGE_MIN_PX = 320;
+  const DOCK_MIN_PX = 80;
+  const panelFloorPx = 320;
+  const sidebarFloorPx = probeWidth("var(--pd-rail-min)", dom.mainEl);
+  dom.mainEl.querySelectorAll("[data-resize]").forEach((el2) => {
+    const handle = el2;
+    const key = handle.dataset.resize;
+    handle.addEventListener("pointerdown", (e) => {
+      const pe = e;
+      pe.preventDefault();
+      handle.setPointerCapture(pe.pointerId);
+      dom.mainEl.dataset.noTransition = "";
+      document.querySelectorAll("iframe").forEach((f) => {
+        f.style.pointerEvents = "none";
+      });
+      const startX = pe.clientX;
+      const startY = pe.clientY;
+      let startPx;
+      if (key === "sidebar-w") startPx = dom.sidebarEl.getBoundingClientRect().width;
+      else if (key === "panel-w") startPx = dom.panel.getBoundingClientRect().width;
+      else startPx = dom.dockEl.getBoundingClientRect().height;
+      function computeVal(ce) {
+        let newPx;
+        if (key === "sidebar-w") {
+          newPx = startPx + (ce.clientX - startX);
+          const reservedForPanel = "panelOpen" in dom.mainEl.dataset ? panelFloorPx : 0;
+          newPx = Math.min(newPx, window.innerWidth - reservedForPanel - STAGE_MIN_PX);
+          newPx = Math.max(newPx, sidebarFloorPx);
+        } else if (key === "panel-w") {
+          newPx = startPx - (ce.clientX - startX);
+          newPx = Math.min(newPx, window.innerWidth - sidebarFloorPx - STAGE_MIN_PX);
+          newPx = Math.max(newPx, panelFloorPx);
+        } else {
+          newPx = startPx - (ce.clientY - startY);
+          newPx = Math.max(newPx, DOCK_MIN_PX);
+          newPx = Math.min(newPx, window.innerHeight * 0.8);
+        }
+        return `${Math.round(newPx)}px`;
+      }
+      const prop = `--pd-${key}`;
+      function onMove(me) {
+        dom.mainEl.style.setProperty(prop, computeVal(me));
+      }
+      function endDrag() {
+        delete dom.mainEl.dataset.noTransition;
+        document.querySelectorAll("iframe").forEach((f) => {
+          f.style.pointerEvents = "";
+        });
+        const actualPx = key === "sidebar-w" ? dom.sidebarEl.getBoundingClientRect().width : key === "panel-w" ? dom.panel.getBoundingClientRect().width : dom.dockEl.getBoundingClientRect().height;
+        const val = key === "dock-h" ? `${(actualPx / window.innerHeight * 100).toFixed(2)}vh` : `${(actualPx / window.innerWidth * 100).toFixed(2)}vw`;
+        dom.mainEl.style.setProperty(prop, val);
+        const cur = store.local.dims;
+        if (key === "sidebar-w") store.setLocal({ dims: { ...cur, sidebarW: val } });
+        else if (key === "panel-w") store.setLocal({ dims: { ...cur, panelW: val } });
+        else store.setLocal({ dims: { ...cur, dockH: val } });
+        document.removeEventListener("pointermove", onMove, true);
+        document.removeEventListener("pointerup", endDrag, true);
+        document.removeEventListener("pointercancel", endDrag, true);
+      }
+      document.addEventListener("pointermove", onMove, true);
+      document.addEventListener("pointerup", endDrag, true);
+      document.addEventListener("pointercancel", endDrag, true);
+    });
+  });
+}
+
+// src/core/pd-links.ts
+function reconcilePdLinks(doc, orderedHrefs) {
+  if (!doc) return;
+  const desired = orderedHrefs.flatMap((href) => {
+    const m = href.match(/\/_pd\/components\/(.+?)\.css/);
+    return m ? [{ id: m[1], href }] : [];
+  });
+  const desiredIds = new Set(desired.map((d) => d.id));
+  const existing = Array.from(doc.querySelectorAll("link[data-pd-comp]"));
+  const existingMap = new Map(existing.map((l) => [l.dataset.pdComp, l]));
+  for (const link of existing) {
+    if (!desiredIds.has(link.dataset.pdComp)) link.remove();
+  }
+  for (let i = 0; i < desired.length; i++) {
+    const { id, href } = desired[i];
+    const existingLink = existingMap.get(id);
+    if (existingLink) {
+      existingLink.href = href;
+    } else {
+      const link = doc.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      link.dataset.pdComp = id;
+      let anchor = null;
+      for (let j = i + 1; j < desired.length; j++) {
+        const follower = existingMap.get(desired[j].id);
+        if (follower?.parentNode === doc.head) {
+          anchor = follower;
+          break;
+        }
+      }
+      doc.head.insertBefore(link, anchor);
+    }
+  }
+}
+
+// src/core/protocol.ts
+function protocolMismatch(serverProtocol, shellProtocol = PD_PROTOCOL_VERSION) {
+  if (serverProtocol === shellProtocol) return null;
+  const server = typeof serverProtocol === "number" ? `v${serverProtocol}` : "an unknown version";
+  return `Protocol mismatch \u2014 the server speaks ${server}, this shell expects v${shellProtocol}. Rebuild and restart the dev server, then reload.`;
+}
+
+// src/app/galleries.ts
+async function buildVariantsGallery() {
+  if (!session.current) return;
+  dom.variantsGalleryEl.innerHTML = "";
+  const gallery = document.createElement("div");
+  gallery.className = "gallery";
+  const currentTheme = store.local.theme;
+  const allVariants = [
+    { name: "default", variantParam: void 0 },
+    ...session.current.variants.map((v) => ({ name: v.name, variantParam: v.name }))
+  ];
+  const docs = await Promise.all(
+    allVariants.map((v) => fetch(previewUrl(session.current.id, v.variantParam, currentTheme || void 0)).then((r) => r.text()))
+  );
+  for (let i = 0; i < allVariants.length; i++) {
+    const v = allVariants[i];
+    const fig = document.createElement("figure");
+    fig.className = "preview gallery-item";
+    const isDefault = v.variantParam === void 0;
+    const labelText = isDefault ? session.current.title : `${session.current.title} \u2014 ${v.name}`;
+    const labelHref = isDefault ? `/${session.current.id}${currentVpParam()}` : `/${session.current.id}${currentVpParam()}#${encodeURIComponent(v.name)}`;
+    const h2 = document.createElement("h2");
+    h2.className = "gallery-label";
+    const lnk = document.createElement("a");
+    lnk.className = "gallery-label-link";
+    lnk.href = labelHref;
+    lnk.textContent = labelText;
+    h2.appendChild(lnk);
+    const f = document.createElement("iframe");
+    f.title = labelText;
+    f.srcdoc = docs[i];
+    f.dataset.pdVariant = v.variantParam ?? "";
+    f.addEventListener("load", () => {
+      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`);
+    });
+    fig.appendChild(h2);
+    fig.appendChild(f);
+    gallery.appendChild(fig);
+  }
+  dom.variantsGalleryEl.appendChild(gallery);
+}
+function renderOverview(overview) {
+  dom.categoryOverview.innerHTML = "";
+  if (overview.doc) {
+    const docDiv = document.createElement("div");
+    docDiv.className = "overview-doc";
+    docDiv.innerHTML = overview.doc;
+    dom.categoryOverview.appendChild(docDiv);
+  }
+  if (overview.components.length === 0) {
+    const p = document.createElement("p");
+    p.textContent = "No components found.";
+    dom.categoryOverview.appendChild(p);
+    return;
+  }
+  const gallery = document.createElement("div");
+  gallery.className = "gallery";
+  for (const item of overview.components) {
+    const fig = document.createElement("figure");
+    fig.className = "preview gallery-item";
+    if (item.source) fig.dataset.package = item.source;
+    const h2 = document.createElement("h2");
+    h2.className = "gallery-label";
+    const lnk = document.createElement("a");
+    lnk.className = "gallery-label-link";
+    lnk.href = routeHref(`/${item.id}`);
+    lnk.textContent = item.title;
+    h2.appendChild(lnk);
+    const f = document.createElement("iframe");
+    f.title = item.title;
+    f.addEventListener("load", () => {
+      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`);
+    });
+    f.src = resourceUrl(previewUrl(item.id, void 0, store.local.theme || void 0));
+    fig.appendChild(h2);
+    fig.appendChild(f);
+    gallery.appendChild(fig);
+  }
+  dom.categoryOverview.appendChild(gallery);
+}
+
+// src/app/navigation.ts
+function swapWithTransition(fn) {
+  if (document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    document.startViewTransition(fn);
+  } else {
+    fn();
+  }
+}
+async function applyComponent(detail, variant) {
+  session.current = detail;
+  session.currentVariant = variant ?? null;
+  session.renderedHtmlCache = null;
+  session.rawRenderedHtml = null;
+  session.stageMode = "single";
+  dom.panel.hidden = false;
+  dom.singlePreview.hidden = false;
+  dom.categoryOverview.hidden = true;
+  dom.variantsGalleryEl.hidden = true;
+  dom.stageView.dataset.layout = detail.layout;
+  dom.previewCaption.textContent = detail.id;
+  populateVariantSelect(detail.variants);
+  const isKnownVariant = !variant || detail.variants.some((v) => v.name === variant);
+  if (!isKnownVariant) {
+    session.currentVariant = null;
+    variant = void 0;
+    history.replaceState(null, "", window.location.pathname + (window.location.search || ""));
+  }
+  dom.variantSelect.value = variant ?? "";
+  dom.variantBar.hidden = detail.variants.length === 0;
+  if (session.componentRegistry.get(detail.id)?.visibility === "private" && !dom.showInternalsCheck.checked) {
+    dom.showInternalsCheck.checked = true;
+    dom.showInternalsCheck.dispatchEvent(new Event("change"));
+  }
+  if (session.componentRegistry.get(detail.id)?.source && dom.hidePackagesCheck.checked) {
+    dom.hidePackagesCheck.checked = false;
+    dom.hidePackagesCheck.dispatchEvent(new Event("change"));
+  }
+  const previewDoc = variant && isKnownVariant ? await fetch(previewUrl(detail.id, variant, store.local.theme || void 0)).then((r) => r.text()) : detail.document;
+  const _html = previewDoc ?? "";
+  swapWithTransition(() => {
+    dom.iframe.srcdoc = _html;
+  });
+  dom.iframe.style.removeProperty("--vp-h");
+  session.lastPdWidth = null;
+  if (isDiscoRunning()) stopDisco();
+  applyViewport();
+  delete dom.dockEl.dataset.mode;
+  dom.hbsBody.innerHTML = extractHighlightedPre(detail.source.hbsHighlighted);
+  dom.htmlBody.innerHTML = "";
+  const hasData = detail.source.json !== void 0;
+  dom.dockFacetDataBtn.hidden = !hasData;
+  if (hasData) {
+    session.dataCache = detail.source.jsonHighlighted ?? null;
+    session.dataRaw = detail.source.json ?? null;
+    dom.dataBody.innerHTML = session.dataCache ? extractHighlightedPre(session.dataCache) : "";
+  } else {
+    session.dataCache = null;
+    session.dataRaw = null;
+    dom.dataBody.innerHTML = "";
+  }
+  const hasSchema = detail.source.schema !== void 0;
+  dom.dockFacetSchemaBtn.hidden = !hasSchema;
+  dom.schemaBody.innerHTML = hasSchema ? extractHighlightedPre(detail.source.schemaHighlighted ?? "") : "";
+  session.renderedA11y = [];
+  session.scanPending = false;
+  refreshDiagnostics();
+  switchDockTab("source", "hbs");
+  setActiveTreeItem(detail.id);
+  await renderPanel();
+}
+async function swapVariant(componentId, variant) {
+  if (!session.current || session.current.id !== componentId) return;
+  session.currentVariant = variant;
+  session.renderedHtmlCache = null;
+  session.rawRenderedHtml = null;
+  session.dataCache = null;
+  session.dataRaw = null;
+  dom.htmlBody.innerHTML = "";
+  dom.dataBody.innerHTML = "";
+  dom.variantSelect.value = variant ?? "";
+  const previewDoc = await fetch(previewUrl(componentId, variant ?? void 0, store.local.theme || void 0)).then((r) => r.text());
+  swapWithTransition(() => {
+    dom.iframe.srcdoc = previewDoc;
+  });
+  const dock = store.local.dock;
+  if (dock.dockTab === "html") await fetchAndShowHtml();
+  if (dock.dockTab === "source" && dock.sourceFacet === "data") await fetchAndShowData();
+  void fetch(componentUrl(componentId, variant ?? void 0)).then((r) => r.ok ? r.json() : Promise.reject()).then((d) => {
+    session.current = d;
+    session.renderedA11y = [];
+    session.scanPending = store.local.dock.dockTab === "diagnostics";
+    refreshDiagnostics();
+    if (store.local.dock.dockTab === "diagnostics") {
+      dom.iframe.addEventListener("load", () => void runRenderedA11yScan(), { once: true });
+    }
+  }).catch(() => {
+  });
+}
+async function navigate(componentId, variant) {
+  try {
+    const res = await fetch(componentUrl(componentId, variant));
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const detail = await res.json();
+    await applyComponent(detail, variant);
+  } catch (e) {
+    console.error("[pd] Navigate error:", e);
+  }
+}
+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);
+    renderOverview(overview);
+    await renderPanel();
+  } catch (e) {
+    console.error("[pd] Overview error:", e);
+  }
+}
+async function navigateVariants(componentId) {
+  try {
+    if (!session.current || session.current.id !== componentId) {
+      const res = await fetch(componentUrl(componentId));
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      session.current = await res.json();
+    }
+    session.currentVariant = null;
+    session.renderedHtmlCache = null;
+    session.rawRenderedHtml = null;
+    session.dataCache = null;
+    session.dataRaw = null;
+    session.stageMode = "variants";
+    dom.panel.hidden = false;
+    dom.singlePreview.hidden = true;
+    dom.categoryOverview.hidden = true;
+    dom.variantsGalleryEl.hidden = false;
+    dom.stageView.dataset.layout = session.current.layout;
+    populateVariantSelect(session.current.variants);
+    dom.variantSelect.value = "__all__";
+    dom.variantBar.hidden = false;
+    void buildVariantsGallery();
+    delete dom.dockEl.dataset.mode;
+    dom.hbsBody.innerHTML = extractHighlightedPre(session.current.source.hbsHighlighted);
+    dom.htmlBody.innerHTML = "";
+    const hasData = session.current.source.json !== void 0;
+    dom.dockFacetDataBtn.hidden = !hasData;
+    if (hasData) {
+      session.dataCache = session.current.source.jsonHighlighted ?? null;
+      session.dataRaw = session.current.source.json ?? null;
+      dom.dataBody.innerHTML = session.dataCache ? extractHighlightedPre(session.dataCache) : "";
+    } else {
+      session.dataCache = null;
+      session.dataRaw = null;
+      dom.dataBody.innerHTML = "";
+    }
+    const hasSchema = session.current.source.schema !== void 0;
+    dom.dockFacetSchemaBtn.hidden = !hasSchema;
+    dom.schemaBody.innerHTML = hasSchema ? extractHighlightedPre(session.current.source.schemaHighlighted ?? "") : "";
+    switchDockTab("source", "hbs");
+    setActiveTreeItem(componentId);
+    await renderPanel();
+  } catch (e) {
+    console.error("[pd] Variants navigate error:", e);
+  }
+}
+function populateVariantSelect(variants) {
+  dom.variantSelect.innerHTML = '<option value="">default</option>';
+  for (const v of variants) {
+    const opt = document.createElement("option");
+    opt.value = v.name;
+    opt.textContent = v.name;
+    dom.variantSelect.appendChild(opt);
+  }
+  if (variants.length > 0) {
+    dom.variantSelect.appendChild(document.createElement("hr"));
+    const allOpt = document.createElement("option");
+    allOpt.value = "__all__";
+    allOpt.textContent = "All variants";
+    dom.variantSelect.appendChild(allOpt);
+  }
+}
+
+// src/app/hmr.ts
+function connectHmr() {
+  if (runtime.mode !== "live") return;
+  const ws = new WebSocket(`ws://localhost:${runtime.wsPort}`);
+  ws.addEventListener("open", () => {
+    dom.railStatus.dataset.state = "connected";
+    dom.railStatusLabel.textContent = "Connected";
+    renderConsole("HMR connected");
+  });
+  ws.addEventListener("close", () => {
+    dom.railStatus.dataset.state = "disconnected";
+    dom.railStatusLabel.textContent = "disconnected";
+    renderConsole("HMR disconnected \u2014 retrying\u2026");
+    setTimeout(() => connectHmr(), 1e3);
+  });
+  ws.addEventListener("message", async (e) => {
+    let msg;
+    try {
+      msg = JSON.parse(e.data);
+    } catch {
+      return;
+    }
+    if ((msg.type === "content-swap" || msg.type === "error") && store.local.panelTab === "audit") {
+      refreshAudit();
+    }
+    if (msg.type === "content-swap") {
+      const componentId = msg.componentId;
+      if (componentId === session.current?.id) {
+        session.renderedHtmlCache = null;
+        session.rawRenderedHtml = null;
+        session.dataCache = null;
+        session.dataRaw = null;
+        dom.htmlBody.innerHTML = "";
+        dom.dataBody.innerHTML = "";
+        if (session.stageMode === "variants") {
+          const tiles = Array.from(
+            dom.variantsGalleryEl.querySelectorAll(".gallery-item iframe")
+          );
+          await Promise.all(tiles.map(async (f) => {
+            const vp = f.dataset.pdVariant || void 0;
+            const doc = await fetch(previewUrl(componentId, vp, store.local.theme || void 0)).then((r) => r.text());
+            f.srcdoc = doc;
+            console.log(
+              "%c[pd] srcdoc reloaded",
+              "color:#7ed321;font-weight:bold",
+              `\u2014 ${componentId} (${vp ?? "default"})`
+            );
+          }));
+        } else {
+          const previewDoc = await fetch(previewUrl(componentId, session.currentVariant ?? void 0, store.local.theme || void 0)).then((r) => r.text());
+          dom.iframe.srcdoc = previewDoc;
+          console.log("%c[pd] srcdoc reloaded", "color:#7ed321;font-weight:bold", `\u2014 ${componentId}`);
+        }
+        {
+          const d = store.local.dock;
+          if (d.dockTab === "source" && d.sourceFacet === "hbs") {
+            dom.hbsBody.innerHTML = extractHighlightedPre(session.current.source.hbsHighlighted);
+          } else if (d.dockTab === "html") {
+            void fetchAndShowHtml();
+          } else if (d.dockTab === "source" && d.sourceFacet === "data") {
+            void fetchAndShowData();
+          }
+        }
+        void fetch(componentUrl(componentId, session.currentVariant ?? void 0)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
+          session.current = d;
+          session.renderedA11y = [];
+          session.scanPending = store.local.dock.dockTab === "diagnostics";
+          refreshDiagnostics();
+          if (store.local.dock.dockTab === "diagnostics") {
+            dom.iframe.addEventListener("load", () => void runRenderedA11yScan(), { once: true });
+          }
+          {
+            const d2 = store.local.dock;
+            if (d2.dockTab === "source" && d2.sourceFacet === "hbs") {
+              dom.hbsBody.innerHTML = extractHighlightedPre(session.current.source.hbsHighlighted);
+            }
+          }
+          if (store.local.panelTab === "relationships" || store.local.panelTab === "docs") void renderPanel();
+        }).catch(() => {
+        });
+      }
+    } else if (msg.type === "hello") {
+      const mismatch = protocolMismatch(msg.protocol);
+      if (mismatch) {
+        dom.railStatus.dataset.state = "disconnected";
+        dom.railStatusLabel.textContent = "Protocol mismatch";
+        renderConsole(mismatch, "error");
+      }
+    } else if (msg.type === "css-link-swap") {
+      const componentId = msg.componentId;
+      const href = msg.href;
+      const orderedHrefs = msg.orderedHrefs;
+      if (orderedHrefs !== void 0) {
+        const previewFrame = document.getElementById("preview-frame");
+        if (previewFrame) reconcilePdLinks(previewFrame.contentDocument, orderedHrefs);
+        document.querySelectorAll("#variants-gallery .gallery-item iframe").forEach((f) => reconcilePdLinks(f.contentDocument, orderedHrefs));
+        document.querySelectorAll("iframe").forEach((f) => {
+          if (f.id === "preview-frame") return;
+          if (f.closest("#variants-gallery")) return;
+          const link = f.contentDocument?.querySelector(`link[data-pd-comp="${componentId}"]`);
+          if (link) link.href = href;
+        });
+      } else {
+        document.querySelectorAll("iframe").forEach((f) => {
+          const link = f.contentDocument?.querySelector(`link[data-pd-comp="${componentId}"]`);
+          if (link) link.href = href;
+        });
+      }
+      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;
+          return renderPanel();
+        }).catch(() => {
+        });
+      }
+    } else if (msg.type === "error") {
+      renderConsole(`${msg.scope === "build" ? "Build" : "Render"} error \u2014 ${msg.message}`, "error");
+      const errId = msg.componentId;
+      if (errId && errId === session.current?.id) {
+        void fetch(componentUrl(errId)).then((r) => r.ok ? r.json() : Promise.reject()).then((d) => {
+          session.current = d;
+          session.renderedA11y = [];
+          session.scanPending = store.local.dock.dockTab === "diagnostics";
+          refreshDiagnostics();
+          if (store.local.dock.dockTab === "diagnostics") void runRenderedA11yScan();
+        }).catch(() => {
+        });
+      }
+    } else if (msg.type === "tree-changed") {
+      void fetch(PD_ROUTES.tree).then((r) => r.ok ? r.json() : Promise.reject()).then((freshTree) => {
+        session.tree = freshTree;
+        session.componentRegistry.clear();
+        (function populate(nodes) {
+          for (const n of nodes) {
+            if (n.kind === "component") session.componentRegistry.set(n.path, { title: n.title, category: n.path.split("/")[0], visibility: n.visibility, ...n.source ? { source: n.source } : {} });
+            if (n.children) populate(n.children);
+          }
+        })(session.tree.roots);
+        session.navCategoryOrder = new Map(session.tree.roots.map((r, i) => [r.path, i]));
+        const newFolderPaths = extractFolderPaths(session.tree.roots);
+        const reconciledPaths = new Set([...store.local.navOpenPaths].filter((p) => newFolderPaths.has(p)));
+        store.setLocal({ navOpenPaths: reconciledPaths });
+        mountSidebar();
+        syncPackageControl(session.tree);
+        restoreNavOpenState(store.local.navOpenPaths);
+        if (session.current?.id) {
+          if (session.componentRegistry.has(session.current.id)) {
+            setActiveTreeItem(session.current.id);
+          } else {
+            session.current = null;
+            dom.iframe.srcdoc = "";
+            dom.singlePreview.hidden = true;
+            dom.panel.hidden = true;
+          }
+        }
+        if (session.searchQuery) filterTree(session.searchQuery);
+        if (!dom.categoryOverview.hidden && !session.current) {
+          const folderPath = routeFromPathname(window.location.pathname).slice(1);
+          if (folderPath) void navigateOverview(folderPath);
+        }
+        if (session.current?.id && session.componentRegistry.has(session.current.id) && store.local.panelTab === "relationships") {
+          void fetch(componentUrl(session.current.id)).then((r) => r.ok ? r.json() : Promise.reject(r.status)).then((d) => {
+            session.current = d;
+            return renderPanel();
+          }).catch(() => {
+          });
+        }
+      }).catch(() => {
+      });
+    } else if (msg.type === "collision") {
+      renderConsole(
+        `Handle collision \u2014 "${msg.handle}" is held by ${msg.incumbentPath}; ${msg.quarantinedPath} is quarantined until one is renamed`,
+        "error"
+      );
+    } else {
+      const unhandled = msg;
+      void unhandled;
+    }
+  });
+}
+
+// src/app/router.ts
+function resolvePathKind(path) {
+  function findNode(nodes) {
+    for (const n of nodes) {
+      if (n.path === path) return n;
+      if (n.children) {
+        const found = findNode(n.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+  const node = findNode(session.tree.roots);
+  return node ? node.kind : null;
+}
+async function routeFromCurrentLocation() {
+  const parsedUrl = parseUrlState(window.location);
+  if (parsedUrl.viewport !== store.url.viewport) {
+    store.setUrl({ viewport: parsedUrl.viewport });
+    applyViewport();
+  }
+  const parsedCvd = parsedUrl.cvd;
+  if (parsedCvd.type !== store.url.cvd.type || parsedCvd.severity !== store.url.cvd.severity) {
+    store.setUrl({ cvd: parsedCvd });
+    applyCvd();
+  }
+  const path = routeFromPathname(window.location.pathname).slice(1);
+  const variant = window.location.hash.slice(1) || void 0;
+  if (!path) return;
+  if (path.endsWith("/variants")) {
+    const componentId = path.slice(0, -"/variants".length);
+    if (resolvePathKind(componentId) === "component") {
+      await navigateVariants(componentId);
+      return;
+    }
+  }
+  const kind = resolvePathKind(path);
+  if (kind === "component") {
+    if (session.current && session.current.id === path && session.stageMode !== "variants") {
+      await swapVariant(path, variant ?? null);
+    } else {
+      await navigate(path, variant);
+    }
+  } else {
+    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`);
+  }
+}
+
+// src/stage/preview-messages.ts
+function listenForPreviewMessages() {
+  window.addEventListener("message", (e) => {
+    const data = e.data;
+    if (!data) return;
+    if (data.type === "pd-height" && typeof data.height === "number") {
+      const height = data.height;
+      document.querySelectorAll("iframe").forEach((f) => {
+        if (f.contentWindow === e.source) {
+          const el2 = f;
+          if (el2.closest('[data-layout="full"]')) return;
+          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-fp") {
+      if (data.action === "exit") dom.fullpageDialog.close();
+      else if (data.action === "active") showFullpageChrome();
+    }
+  });
+}
+
+// src/app/shell.html
+var shell_default = '<div class="app">\n  <div class="main">\n    <nav class="sidebar" aria-label="Components">\n      <div class="rail-brand">\n        <span class="rail-brand-title">Pattern Dump</span>\n      </div>\n      <details class="theme-picker">\n        <summary class="theme-picker-summary">\n          <span class="disclosure-caret" aria-hidden="true"><!--pd-icon:chevron--></span>\n          <span class="theme-picker-swatch" aria-hidden="true"></span>\n          <span class="theme-picker-current-name"></span>\n        </summary>\n        <ul class="theme-picker-list" role="radiogroup" aria-label="Component theme"></ul>\n        <p class="theme-picker-readout" aria-live="polite"></p>\n      </details>\n      <details class="a11y-picker">\n        <summary class="a11y-picker-summary" aria-label="Accessibility">\n          <span class="disclosure-caret" aria-hidden="true"><!--pd-icon:chevron--></span>\n          <span class="a11y-icon" aria-hidden="true"><!--pd-icon:a11y--></span>\n          <span class="a11y-label">\n            <span class="a11y-label-full" aria-hidden="true">Accessibility</span>\n            <span class="a11y-label-short" aria-hidden="true">A11y</span>\n          </span>\n        </summary>\n        <div class="a11y-cvd-panel">\n          <div role="radiogroup" aria-label="Deficiency type" class="cvd-type-group">\n            <button class="cvd-type-btn" role="radio" data-cvd-type="none"\n                    aria-checked="true"  tabindex="0" >None</button>\n            <button class="cvd-type-btn" role="radio" data-cvd-type="protanopia"\n                    aria-checked="false" tabindex="-1">Protanopia</button>\n            <button class="cvd-type-btn" role="radio" data-cvd-type="deuteranopia"\n                    aria-checked="false" tabindex="-1">Deuteranopia</button>\n            <button class="cvd-type-btn" role="radio" data-cvd-type="tritanopia"\n                    aria-checked="false" tabindex="-1">Tritanopia</button>\n            <button class="cvd-type-btn" role="radio" data-cvd-type="achromatopsia"\n                    aria-checked="false" tabindex="-1">Achromatopsia</button>\n          </div>\n          <label class="cvd-severity-label">\n            <span>Severity</span>\n            <input type="range" class="cvd-severity-slider"\n                   min="0" max="1" step="0.01" value="1"\n                   aria-label="Severity" disabled>\n          </label>\n        </div>\n      </details>\n      <div class="rail-toggle-cluster" role="group" aria-label="Layout controls">\n        <button class="rail-toggle panel-toggle-btn"\n                aria-label="Docs panel"\n                aria-expanded="false" aria-controls="app-panel"\n                data-label-open="Hide docs panel"\n                data-label-closed="Show docs panel">\n          <!--pd-icon:panel-->\n        </button>\n        <button class="rail-toggle dock-toggle-btn"\n                aria-label="Source dock"\n                aria-expanded="true" aria-controls="app-dock"\n                data-label-open="Hide source dock"\n                data-label-closed="Show source dock">\n          <!--pd-icon:dock-fill-->\n        </button>\n        <span class="rail-toggle-label" aria-hidden="true"></span>\n      </div>\n      <div class="rail-vp-cluster" role="group" aria-label="Viewport">\n        <output class="vp-readout">\u2014 \xD7 \u2014</output>\n        <div role="radiogroup" aria-label="Viewport size">\n          <button class="rail-vp-btn" data-vp="fit"\n                  role="radio" aria-checked="true"  tabindex="0"\n                  aria-label="Fit"><!--pd-icon:vp-fit-fill--></button>\n          <button class="rail-vp-btn" data-vp="content"\n                  role="radio" aria-checked="false" tabindex="-1"\n                  aria-label="Fit content"><!--pd-icon:vp-content--></button>\n          <button class="rail-vp-btn" data-vp="mobile"\n                  role="radio" aria-checked="false" tabindex="-1"\n                  aria-label="Mobile"><!--pd-icon:vp-mobile--></button>\n          <button class="rail-vp-btn" data-vp="tablet"\n                  role="radio" aria-checked="false" tabindex="-1"\n                  aria-label="Tablet"><!--pd-icon:vp-tablet--></button>\n          <button class="rail-vp-btn" data-vp="desktop"\n                  role="radio" aria-checked="false" tabindex="-1"\n                  aria-label="Desktop"><!--pd-icon:vp-desktop--></button>\n        </div>\n        <button class="rail-vp-btn vp-disco-btn"\n                aria-pressed="false"\n                aria-label="Disco mode"\n                data-label-off="Start disco"\n                data-label-on="Stop disco"><!--pd-icon:vp-disco--></button>\n        <button class="rail-vp-btn fullpage-btn"\n                aria-haspopup="dialog"\n                aria-label="Full-page preview"><!--pd-icon:vp-fullpage--></button>\n        <span class="vp-mode-label" aria-hidden="true"></span>\n      </div>\n      <div class="sidebar-search">\n        <input type="search" placeholder="Search components\u2026" aria-label="Search components">\n      </div>\n      <div class="sidebar-controls">\n        <label class="internals-label"><input type="checkbox" class="show-internals-check"> Show private</label>\n        <label class="internals-label hide-packages-label" hidden><input type="checkbox" class="hide-packages-check"> Hide packages</label>\n      </div>\n      <ul class="sidebar-tree" role="list"></ul>\n      <div class="rail-status" role="status" aria-label="Server connection status"\n           data-state="connected">\n        <span class="rail-status-icon" aria-hidden="true"><!--pd-icon:warning--></span>\n        <span class="rail-status-label">Connected</span>\n      </div>\n      <div data-resize="sidebar-w" aria-hidden="true"></div>\n    </nav>\n    <main class="stage">\n      <div class="variant-bar" hidden>\n        <label>Variant: <select class="variant-select"><option value="">default</option></select></label>\n      </div>\n      <div class="stage-view">\n        <figure class="preview single-preview" id="single-preview" hidden>\n          <iframe id="preview-frame" title="Component preview"></iframe>\n\n          <figcaption class="preview-caption"></figcaption>\n        </figure>\n        <div class="overview" id="category-overview" tabindex="0" hidden></div>\n        <div class="variants-gallery" id="variants-gallery" hidden></div>\n      </div>\n    </main>\n    <section class="dock" id="app-dock" aria-label="Console">\n      <div data-resize="dock-h" aria-hidden="true"></div>\n      <div class="dock-header">\n        <div class="dock-tabs" role="tablist" aria-label="Source and console">\n          <button role="tab" id="dock-tab-source" class="dock-tab" data-tab="source" aria-selected="true" aria-controls="dock-panel-hbs"><span class="tab-content"><span class="tab-label">Source</span></span></button>\n          <button role="tab" id="dock-tab-html" class="dock-tab" data-tab="html" aria-selected="false" aria-controls="dock-panel-html"><span class="tab-content"><span class="tab-label">HTML</span></span></button>\n          <button role="tab" id="dock-tab-diagnostics" class="dock-tab" data-tab="diagnostics" aria-selected="false" aria-controls="dock-panel-diagnostics"><span class="tab-content"><span class="tab-label">Diagnostics</span><span class="tab-marker" aria-hidden="true"><span class="tab-marker-count"></span></span></span></button>\n          <button role="tab" id="dock-tab-console" class="dock-tab" data-tab="console" aria-selected="false" aria-controls="dock-panel-console"><span class="tab-content"><span class="tab-label">Console</span></span></button>\n        </div>\n      </div>\n      <div class="dock-facets">\n        <div class="source-facets" role="tablist" aria-label="Source format">\n          <button role="tab" id="dock-facet-hbs" class="dock-facet" data-facet="hbs" aria-selected="true" aria-controls="dock-panel-hbs"><span class="tab-content"><span class="tab-label">Handlebars</span></span></button>\n          <button role="tab" id="dock-facet-data" class="dock-facet" data-facet="data" aria-selected="false" aria-controls="dock-panel-data" hidden><span class="tab-content"><span class="tab-label">Data</span></span></button>\n          <button role="tab" id="dock-facet-schema" class="dock-facet" data-facet="schema" aria-selected="false" aria-controls="dock-panel-schema" hidden><span class="tab-content"><span class="tab-label">Schema</span></span></button>\n        </div>\n        <button class="dock-copy-btn" aria-label="Copy Handlebars">Copy Handlebars</button>\n      </div>\n      <div id="dock-panel-hbs" class="dock-panel" role="tabpanel" aria-labelledby="dock-facet-hbs">\n        <div class="source-body"></div>\n      </div>\n      <div id="dock-panel-data" class="dock-panel" role="tabpanel" aria-labelledby="dock-facet-data" hidden>\n        <div class="source-body"></div>\n      </div>\n      <div id="dock-panel-schema" class="dock-panel" role="tabpanel" aria-labelledby="dock-facet-schema" hidden>\n        <div class="source-body"></div>\n      </div>\n      <div id="dock-panel-html" class="dock-panel" role="tabpanel" aria-labelledby="dock-tab-html" hidden>\n        <div class="source-body"></div>\n      </div>\n      <div id="dock-panel-diagnostics" class="dock-panel dock-panel-diagnostics" role="tabpanel" aria-labelledby="dock-tab-diagnostics" hidden>\n        <div class="pd-a11y-controls">\n          <button class="pd-run-rendered" type="button">Run rendered checks</button>\n        </div>\n        <div class="diagnostics" role="region" aria-label="Diagnostics"></div>\n      </div>\n      <div id="dock-panel-console" class="dock-panel" role="tabpanel" aria-labelledby="dock-tab-console" hidden>\n        <div class="console" role="log" aria-live="polite"></div>\n      </div>\n    </section>\n    <aside class="panel" id="app-panel" aria-label="Inspector">\n      <div data-resize="panel-w" aria-hidden="true"></div>\n      <div class="panel-tabs" role="tablist" aria-label="Panel tabs">\n        <button role="tab" data-tab="docs" aria-selected="true"><span class="tab-content"><span class="tab-label">Docs</span></span></button>\n        <button role="tab" data-tab="relationships"><span class="tab-content"><span class="tab-label">Relationships</span></span></button>\n        <button role="tab" data-tab="audit"><span class="tab-content"><span class="tab-label">Audit</span></span></button>\n      </div>\n      <div class="panel-content" role="tabpanel"></div>\n    </aside>\n  </div>\n  <dialog id="fullpage-dialog" class="fullpage" aria-label="Full-page preview">\n    <button class="fullpage-close" aria-label="Close full-page preview"><!--pd-icon:x--></button>\n    <iframe id="fullpage-frame" title="Full-page preview"></iframe>\n  </dialog>\n  <svg aria-hidden="true" focusable="false"\n       style="position:absolute;width:0;height:0;overflow:hidden">\n    <defs>\n      <filter id="cvd-filter" color-interpolation-filters="linearRGB">\n        <feColorMatrix id="cvd-matrix-vals" type="matrix"\n                       values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>\n      </filter>\n    </defs>\n  </svg>\n</div>\n';
+
+// src/app/shell.ts
+function renderShellHtml() {
+  const expanded = shell_default.replace(
+    /<!--pd-icon:([a-z0-9-]+)-->/g,
+    (_match, name) => svgIcon(name)
+  );
+  return "\n" + expanded.replace(/\n+$/, "");
+}
+
+// src/app/wiring.ts
+function applyRightPanelDom(open) {
+  if (open) dom.mainEl.dataset.panelOpen = "";
+  else delete dom.mainEl.dataset.panelOpen;
+  dom.panelToggleBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  dom.panelToggleBtn.innerHTML = svgIcon(open ? "panel-fill" : "panel");
+}
+function applyConsoleDockDom(open) {
+  dom.dockEl.hidden = !open;
+  if (open) delete dom.mainEl.dataset.dockHidden;
+  else dom.mainEl.dataset.dockHidden = "";
+  dom.dockToggleBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  dom.dockToggleBtn.innerHTML = svgIcon(open ? "dock-fill" : "dock");
+}
+function mount() {
+  const app = document.getElementById("app");
+  if (!app) return;
+  app.innerHTML = renderShellHtml();
+  initDom(app);
+  listenForPreviewMessages();
+  dom.searchInput.addEventListener("input", () => {
+    session.searchQuery = dom.searchInput.value;
+    filterTree(session.searchQuery);
+  });
+  dom.showInternalsCheck.addEventListener("change", () => {
+    const checked = dom.showInternalsCheck.checked;
+    store.setLocal({ navFilters: { ...store.local.navFilters, showPrivate: checked } });
+    dom.sidebarTree.classList.toggle("show-internals", checked);
+  });
+  dom.hidePackagesCheck.addEventListener("change", () => {
+    const hide = dom.hidePackagesCheck.checked;
+    store.setLocal({ navFilters: { ...store.local.navFilters, hidePackages: hide } });
+    applyPackageFilter(hide);
+  });
+  dom.variantSelect.addEventListener("change", async () => {
+    if (!session.current) return;
+    const value = dom.variantSelect.value;
+    if (value === "__all__") {
+      history.pushState({}, "", routeHref(`/${session.current.id}/variants`) + currentVpParam());
+      void navigateVariants(session.current.id);
+      return;
+    }
+    if (session.stageMode === "variants") {
+      session.stageMode = "single";
+      dom.singlePreview.hidden = false;
+      dom.variantsGalleryEl.hidden = true;
+    }
+    const variantParam = value || void 0;
+    const hash = variantParam ? `#${encodeURIComponent(variantParam)}` : "";
+    history.pushState({}, "", routeHref(`/${session.current.id}`) + `${currentVpParam()}${hash}`);
+    await swapVariant(session.current.id, variantParam ?? null);
+  });
+  dom.iframe.addEventListener("load", () => {
+    const theme = store.local.theme;
+    if (theme) applyThemeToIframe(dom.iframe, theme);
+  });
+  dom.sidebarTree.addEventListener("click", (e) => {
+    const target = e.target;
+    const showAll = target.closest("a.tree-show-all");
+    if (showAll) {
+      e.preventDefault();
+      const href = showAll.getAttribute("href") ?? "/";
+      history.pushState({}, "", href + currentVpParam());
+      void routeFromCurrentLocation();
+      return;
+    }
+    const link = target.closest("a.tree-link");
+    if (link) {
+      e.preventDefault();
+      const href = link.getAttribute("href") ?? "/";
+      history.pushState({}, "", href + currentVpParam());
+      void routeFromCurrentLocation();
+    }
+  });
+  app.querySelector(".dock-tabs")?.addEventListener("click", (e) => {
+    const btn = e.target.closest("[role='tab'][data-tab]");
+    if (btn) {
+      const tab = btn.dataset.tab;
+      switchDockTab(tab);
+    }
+  });
+  app.querySelector(".source-facets")?.addEventListener("click", (e) => {
+    const btn = e.target.closest("[role='tab'][data-facet]");
+    if (btn) {
+      const facet = btn.dataset.facet;
+      switchSourceFacet(facet);
+    }
+  });
+  dom.dockCopyBtn.addEventListener("click", () => {
+    void copyDockSource();
+  });
+  app.querySelector(".pd-run-rendered")?.addEventListener("click", () => {
+    session.renderedA11y = [];
+    session.scanPending = true;
+    refreshDiagnostics();
+    void runRenderedA11yScan();
+  });
+  const panelTabsEl = app.querySelector(".panel-tabs");
+  panelTabsEl.addEventListener("click", (e) => {
+    const btn = e.target.closest("button[data-tab]");
+    if (!btn) return;
+    const tab = btn.dataset.tab;
+    if (tab === "audit") clearAuditError();
+    store.setLocal({ panelTab: tab });
+    panelTabsEl.querySelectorAll("button[role='tab']").forEach((b) => {
+      b.setAttribute("aria-selected", String(b.dataset.tab === tab));
+    });
+    void renderPanel();
+  });
+  dom.panelContent.addEventListener("click", async (e) => {
+    const btn = e.target.closest(".copy-btn");
+    if (!btn) return;
+    const raw = btn.closest("[data-raw]")?.getAttribute("data-raw") ?? "";
+    try {
+      await navigator.clipboard.writeText(raw);
+      btn.textContent = "Copied!";
+      setTimeout(() => {
+        btn.textContent = "Copy";
+      }, 1500);
+    } catch {
+      btn.textContent = "Failed";
+    }
+  });
+  dom.panelContent.addEventListener("click", (e) => {
+    const a = e.target.closest("a.rel-link");
+    if (!a) return;
+    e.preventDefault();
+    const href = a.getAttribute("href") ?? "/";
+    history.pushState({}, "", href + currentVpParam());
+    void routeFromCurrentLocation();
+  });
+  dom.panelContent.addEventListener("click", (e) => {
+    const a = e.target.closest("a.audit-link");
+    if (!a) return;
+    e.preventDefault();
+    const href = a.getAttribute("href") ?? "/";
+    history.pushState({}, "", href + currentVpParam());
+    void routeFromCurrentLocation();
+  });
+  dom.panelContent.addEventListener("click", (e) => {
+    const target = e.target;
+    if (target.closest("a.pattern-link--unresolved")) {
+      e.preventDefault();
+      return;
+    }
+    const a = target.closest("a.pattern-link");
+    if (!a) return;
+    e.preventDefault();
+    const compId = a.dataset["patternId"];
+    const variant = a.dataset["variant"];
+    if (!compId) return;
+    const url = routeHref(`/${compId}`) + `${currentVpParam()}${variant ? "#" + variant : ""}`;
+    history.pushState({}, "", url);
+    void routeFromCurrentLocation();
+  });
+  dom.panelToggleBtn.addEventListener("click", () => {
+    const vis = store.local.dockVisibility;
+    const open = !vis.rightPanelOpen;
+    store.setLocal({ dockVisibility: { ...vis, rightPanelOpen: open } });
+    applyRightPanelDom(open);
+  });
+  dom.dockToggleBtn.addEventListener("click", () => {
+    const vis = store.local.dockVisibility;
+    const open = !vis.consoleDockOpen;
+    store.setLocal({ dockVisibility: { ...vis, consoleDockOpen: open } });
+    applyConsoleDockDom(open);
+  });
+  const showToggleLabel = (e) => {
+    const btn = e.target.closest(".rail-toggle");
+    if (!btn) return;
+    const open = btn.getAttribute("aria-expanded") === "true";
+    dom.railToggleLabelEl.textContent = open ? btn.dataset.labelOpen ?? "" : btn.dataset.labelClosed ?? "";
+  };
+  const clearToggleLabel = (e) => {
+    if (!e.relatedTarget || !dom.railToggleClusterEl.contains(e.relatedTarget)) {
+      dom.railToggleLabelEl.textContent = "";
+    }
+  };
+  dom.railToggleClusterEl.addEventListener("pointerenter", showToggleLabel, true);
+  dom.railToggleClusterEl.addEventListener("pointerleave", () => {
+    dom.railToggleLabelEl.textContent = "";
+  });
+  dom.railToggleClusterEl.addEventListener("focusin", showToggleLabel);
+  dom.railToggleClusterEl.addEventListener("focusout", clearToggleLabel);
+  window.addEventListener("popstate", () => {
+    void routeFromCurrentLocation();
+  });
+  window.addEventListener("hashchange", () => {
+    if (!session.current) return;
+    const newVariant = window.location.hash.slice(1) || null;
+    void swapVariant(session.current.id, newVariant);
+  });
+  app.querySelector(".stage")?.addEventListener("click", (e) => {
+    const link = e.target.closest("a.gallery-label-link");
+    if (!link) return;
+    e.preventDefault();
+    const href = link.getAttribute("href") ?? "/";
+    const url = new URL(href, window.location.href);
+    history.pushState({}, "", url.pathname + (url.search || currentVpParam()) + url.hash);
+    void routeFromCurrentLocation();
+  });
+}
+
+// src/app/bootstrap.ts
+async function init() {
+  installStaticFetch();
+  mount();
+  if (!auditAvailable) document.querySelector(".panel-tabs button[data-tab='audit']")?.remove();
+  dom.mainEl.dataset.noTransition = "";
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      delete dom.mainEl.dataset.noTransition;
+    });
+  });
+  const isFirstLoad = localStorage.getItem(STORAGE_KEY) === null;
+  if (isFirstLoad && window.innerWidth > 900) {
+    dom.mainEl.dataset.panelOpen = "";
+  }
+  if (!isFirstLoad) {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        const stored = JSON.parse(raw);
+        if (stored.dockVisibility?.rightPanelOpen === true) applyRightPanelDom(true);
+        if (stored.dockVisibility?.consoleDockOpen === false) applyConsoleDockDom(false);
+      }
+    } catch {
+    }
+  }
+  const [treeRes, themeRes, configRes, tiersRes] = await Promise.all([
+    fetch(PD_ROUTES.tree),
+    fetch(PD_ROUTES.themes),
+    fetch(PD_ROUTES.config),
+    fetch(PD_ROUTES.ruleTiers).catch(() => null)
+  ]);
+  session.tree = await treeRes.json();
+  session.themes = await themeRes.json();
+  const shellConfig = await configRes.json();
+  session.themeSwitch = shellConfig.themeSwitch;
+  session.serverDefaultTheme = shellConfig.defaultTheme;
+  renderBrand(shellConfig.shell?.brand);
+  if (tiersRes) {
+    const tiers = await tiersRes.json();
+    session.needsRenderingRules = tiers["needsRendering"] ?? [];
+  }
+  function walkTree(nodes) {
+    for (const node of nodes) {
+      if (node.kind === "component") {
+        session.componentRegistry.set(node.path, {
+          title: node.title,
+          category: node.path.split("/")[0],
+          visibility: node.visibility,
+          ...node.source ? { source: node.source } : {}
+        });
+      }
+      if (node.children) walkTree(node.children);
+    }
+  }
+  walkTree(session.tree.roots);
+  session.navCategoryOrder = new Map(session.tree.roots.map((r, i) => [r.path, i]));
+  const knownThemes = new Set(session.themes.map((t) => t.name));
+  const stripThemeParam = store.hydrate({ availableVariants: null, knownFolderPaths: extractFolderPaths(session.tree.roots), knownThemes });
+  if (!auditAvailable && store.local.panelTab === "audit") store.setLocal({ panelTab: "docs" });
+  if (stripThemeParam) {
+    const stripped = new URL(window.location.href);
+    stripped.searchParams.delete("theme");
+    history.replaceState(null, "", stripped.pathname + (stripped.search || "") + stripped.hash);
+  }
+  populateThemePicker(session.themes, () => {
+    if (store.local.dock.dockTab === "diagnostics") {
+      session.renderedA11y = [];
+      session.scanPending = true;
+      refreshDiagnostics();
+      requestAnimationFrame(() => void runRenderedA11yScan());
+    }
+  });
+  if (isFirstLoad && window.innerWidth > 900) {
+    store.setLocal({ dockVisibility: { ...store.local.dockVisibility, rightPanelOpen: true } });
+  }
+  dom.mainEl.dataset.noTransition = "";
+  applyRightPanelDom(store.local.dockVisibility.rightPanelOpen);
+  applyConsoleDockDom(store.local.dockVisibility.consoleDockOpen);
+  requestAnimationFrame(() => {
+    delete dom.mainEl.dataset.noTransition;
+  });
+  if (store.local.navFilters.showPrivate) {
+    dom.showInternalsCheck.checked = true;
+    dom.sidebarTree.classList.add("show-internals");
+  }
+  syncPackageControl(session.tree);
+  applyPackageFilter(store.local.navFilters.hidePackages);
+  const storedDockForInit = store.local.dock;
+  mountSidebar();
+  restoreNavOpenState(store.local.navOpenPaths);
+  initDprTracking();
+  initSplitters();
+  initViewport(() => {
+    void openFullpage();
+  });
+  if (store.url.cvd.type !== "none" && store.url.cvd.severity > 0) {
+    dom.a11yDetails.open = true;
+  }
+  applyCvd();
+  initA11yControl();
+  initFullpage();
+  await routeFromCurrentLocation();
+  const storedPanelTab = store.local.panelTab;
+  document.querySelectorAll(".panel-tabs button[role='tab']").forEach((b) => {
+    b.setAttribute("aria-selected", String(b.dataset.tab === storedPanelTab));
+  });
+  if (storedPanelTab !== "docs") void renderPanel();
+  if (store.url.viewport === "fullscreen" && session.current !== null) {
+    void openFullpage();
+  }
+  if (session.current !== null && (storedDockForInit.dockTab !== "source" || storedDockForInit.sourceFacet !== "hbs")) {
+    if (storedDockForInit.dockTab !== "source") {
+      switchDockTab(storedDockForInit.dockTab);
+    } else {
+      switchDockTab("source", storedDockForInit.sourceFacet);
+    }
+  }
+  if (runtime.mode === "static") {
+    const built = new Date(runtime.builtAt).toLocaleString();
+    dom.railStatus.dataset.state = "static";
+    dom.railStatusLabel.textContent = `Static build \xB7 ${built}`;
+    renderConsole(`Static build of ${runtime.builtAt} (pattern-dump ${runtime.pdVersion}) \u2014 read-only snapshot, no live reload.`);
+  } else {
+    connectHmr();
+  }
+}
+
+// src/main.ts
+void init();