@kerfjs/ui 5.0.0-beta.82 → 5.0.0-beta.83

package/dist/wire-catalog.js

@@ -2,7 +2,7 @@ import { wireWorkbench } from './chunk-5BZBIRQG.js';
 
 import { wireScrollDividers } from './chunk-3CXRQAYT.js';
 
-import { readTokenSearchField } from './chunk-3SXWV2IR.js';
+import { readTokenSearchField } from './chunk-VLGQIYZ5.js';
 
 
 
@@ -133,204 +133,6 @@ function revealCatalogEntry(root, id, {
   });
   return () => view.cancelAnimationFrame(frame);
 }
-function pixels(value) {
-  const number = Number.parseFloat(value);
-  if (!Number.isFinite(number)) return 0;
-  return value.trim().endsWith("rem") ? number * 16 : number;
-}
-function isTransparent(color) {
-  const normalized = color.replace(/\s+/g, "");
-  return normalized === "transparent" || /(?:,|\/)0(?:\.0+)?\)$/.test(normalized);
-}
-function geometrySpecimens(canvas) {
-  const result = [];
-  for (const example of canvas.querySelectorAll(
-    "[data-catalog-example]"
-  )) {
-    if (example.closest("[data-catalog-geometry-overlay-skip]")) continue;
-    for (const child of example.children) {
-      if (child.matches("[data-catalog-geometry-overlay]") || child.matches("[data-catalog-example-label]") || child.matches("[data-catalog-example-note]"))
-        continue;
-      result.push(child);
-    }
-  }
-  for (const element of canvas.querySelectorAll(
-    "[data-component]"
-  )) {
-    if (element.closest("[data-catalog-geometry-overlay]") || element.closest("[data-catalog-geometry-overlay-skip]") || element.closest(".kui-catalog-example"))
-      continue;
-    const parent = element.parentElement?.closest("[data-component]");
-    if (parent && canvas.contains(parent)) continue;
-    result.push(element);
-  }
-  return result;
-}
-function geometryBox(document, className, left, top, width, height) {
-  const element = document.createElement("div");
-  element.className = className;
-  element.style.transform = `translate(${left}px, ${top}px)`;
-  element.style.width = `${Math.max(0, width)}px`;
-  element.style.height = `${Math.max(0, height)}px`;
-  return element;
-}
-function effectiveBorderWidth(width, style) {
-  return style === "none" || style === "hidden" ? 0 : pixels(width);
-}
-function wireCatalogGeometryOverlay(root) {
-  const catalog = root.matches('[data-component="catalog"]') ? root : root.querySelector('[data-component="catalog"]');
-  const canvas = catalog?.querySelector(".kui-catalog__canvas");
-  const layer = catalog?.querySelector(
-    "[data-catalog-geometry-overlay]"
-  );
-  const view = root.ownerDocument.defaultView;
-  if (!catalog || !canvas || !layer || !view) return () => {
-  };
-  let frame = 0;
-  const render = () => {
-    frame = 0;
-    layer.replaceChildren();
-    if (catalog.dataset.geometryOverlay !== "true") {
-      syncObservedSpecimens([]);
-      return;
-    }
-    const base = canvas.getBoundingClientRect();
-    const specimens = geometrySpecimens(canvas);
-    syncObservedSpecimens(specimens);
-    for (const [specimenIndex, element] of specimens.entries()) {
-      const rect = element.getBoundingClientRect();
-      const style = view.getComputedStyle(element);
-      const align = pixels(
-        style.getPropertyValue("--kui-catalog-example-align")
-      );
-      const top = pixels(style.marginTop);
-      const right = Math.max(
-        0,
-        pixels(style.marginRight) - (style.direction === "rtl" ? align : 0)
-      );
-      const bottom = pixels(style.marginBottom);
-      const left = Math.max(
-        0,
-        pixels(style.marginLeft) - (style.direction === "rtl" ? 0 : align)
-      );
-      const x = rect.left - base.left + canvas.scrollLeft;
-      const y = rect.top - base.top + canvas.scrollTop;
-      const borderWidths = [
-        effectiveBorderWidth(style.borderTopWidth, style.borderTopStyle),
-        effectiveBorderWidth(style.borderRightWidth, style.borderRightStyle),
-        effectiveBorderWidth(style.borderBottomWidth, style.borderBottomStyle),
-        effectiveBorderWidth(style.borderLeftWidth, style.borderLeftStyle)
-      ];
-      if (borderWidths.some((width) => width > 0)) {
-        const border = geometryBox(
-          root.ownerDocument,
-          "kui-catalog__geometry-border",
-          x,
-          y,
-          rect.width,
-          rect.height
-        );
-        border.dataset.catalogGeometrySpecimen = String(specimenIndex);
-        border.style.borderTopWidth = `${borderWidths[0]}px`;
-        border.style.borderRightWidth = `${borderWidths[1]}px`;
-        border.style.borderBottomWidth = `${borderWidths[2]}px`;
-        border.style.borderLeftWidth = `${borderWidths[3]}px`;
-        border.style.borderRadius = style.borderRadius;
-        layer.append(border);
-      } else if (isTransparent(style.backgroundColor)) {
-        const bound = geometryBox(
-          root.ownerDocument,
-          "kui-catalog__geometry-bound",
-          x,
-          y,
-          rect.width,
-          rect.height
-        );
-        bound.dataset.catalogGeometrySpecimen = String(specimenIndex);
-        layer.append(bound);
-      }
-      const margins = [
-        ["top", top, x - left, y - top, rect.width + left + right, top],
-        [
-          "bottom",
-          bottom,
-          x - left,
-          y + rect.height,
-          rect.width + left + right,
-          bottom
-        ],
-        ["left", left, x - left, y, left, rect.height],
-        ["right", right, x + rect.width, y, right, rect.height]
-      ];
-      for (const [side, size, marginX, marginY, width, height] of margins) {
-        if (size <= 0) continue;
-        const margin = geometryBox(
-          root.ownerDocument,
-          "kui-catalog__geometry-margin",
-          marginX,
-          marginY,
-          width,
-          height
-        );
-        margin.dataset.catalogGeometrySpecimen = String(specimenIndex);
-        margin.dataset.catalogGeometrySide = side;
-        layer.append(margin);
-      }
-    }
-  };
-  const schedule = () => {
-    if (!frame) frame = view.requestAnimationFrame(render);
-  };
-  const resizeObserver = new view.ResizeObserver(schedule);
-  resizeObserver.observe(canvas);
-  const observedSpecimens = /* @__PURE__ */ new Set();
-  const syncObservedSpecimens = (specimens) => {
-    const next = new Set(specimens);
-    for (const specimen of observedSpecimens) {
-      if (next.has(specimen)) continue;
-      resizeObserver.unobserve(specimen);
-      observedSpecimens.delete(specimen);
-    }
-    for (const specimen of next) {
-      if (observedSpecimens.has(specimen)) continue;
-      resizeObserver.observe(specimen);
-      observedSpecimens.add(specimen);
-    }
-  };
-  const mutationObserver = new view.MutationObserver((records) => {
-    if (records.some(
-      ({ target }) => target !== layer && !layer.contains(target)
-    ))
-      schedule();
-  });
-  mutationObserver.observe(catalog, {
-    attributes: true,
-    childList: true,
-    subtree: true
-  });
-  mutationObserver.observe(root.ownerDocument.documentElement, {
-    attributes: true
-  });
-  const documentHead = root.ownerDocument.head;
-  if (documentHead)
-    mutationObserver.observe(documentHead, {
-      attributes: true,
-      characterData: true,
-      childList: true,
-      subtree: true
-    });
-  const stylesheetLoaded = () => schedule();
-  documentHead?.addEventListener("load", stylesheetLoaded, true);
-  view.addEventListener("resize", schedule);
-  render();
-  return () => {
-    if (frame) view.cancelAnimationFrame(frame);
-    resizeObserver.disconnect();
-    mutationObserver.disconnect();
-    documentHead?.removeEventListener("load", stylesheetLoaded, true);
-    view.removeEventListener("resize", schedule);
-    layer.replaceChildren();
-  };
-}
 function wireCatalog(root, {
   onSelect,
   onToggleSidebar,
@@ -432,6 +234,6 @@ function wireCatalog(root, {
   };
 }
 
-export { revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };
+export { revealCatalogEntry, wireCatalog };
 
 //# sourceMappingURL=wire-catalog.js.map

package/dist/wire-catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":[],"mappings":";;;;;;;;;;AAgEA,IAAM,mBAAA,GAAsB,uBAAA;AAG5B,SAAS,kBAAkB,IAAA,EAA+B;AACxD,EAAA,MAAM,IAAA,GAAO,KAAK,aAAA,CAAc,WAAA;AAChC,EAAA,IAAI,WAAA,GAAc,EAAA;AAClB,EAAA,IAAI,KAAA,GAAQ,EAAA;AACZ,EAAA,IAAI,aAAA,GAAoC,IAAA;AACxC,EAAA,MAAM,UAAU,CAAC,IAAA,KAAiB,KAAK,iBAAA,EAAkB,CAAE,SAAS,KAAK,CAAA;AACzE,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,aAAA,CAA2B,uBAAuB,CAAA;AACtE,IAAA,MAAM,GAAA,GAAM,IAAA,CAAK,aAAA,CAA2B,wBAAwB,CAAA;AACpE,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,GAAA,EAAK;AACrB,IAAA,IAAI,WAAW,aAAA,EAAe;AAC5B,MAAA,aAAA,GAAgB,MAAA;AAChB,MAAA,IAAI,oBAAA,CAAqB,MAAM,CAAA,CAAE,KAAA,KAAU,WAAA;AACzC,QAAA,MAAA,CAAO,WAAA,GAAc,WAAA;AAAA,IACzB;AACA,IAAA,MAAM,QAAQ,MAAA,CAAO,OAAA;AAAA,MACnB;AAAA,KACF;AACA,IAAA,KAAA,CAAM,OAAA,CAAQ,mBAAA,GAAsB,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAC,CAAA;AACzD,IAAA,KAAA,CAAM,OAAA,CAAQ,kBAAA,GAAqB,MAAA,CAAO,CAAC,WAAW,CAAA;AACtD,IAAA,MAAM,QAAQ,KAAA,CAAM,aAAA;AAAA,MAClB;AAAA,KACF;AACA,IAAA,KAAA,CAAM,KAAA,CAAM,OAAA,GAAU,KAAA,GAAQ,EAAA,GAAK,MAAA;AACnC,IAAA,GAAA,CAAI,OAAA,CAAQ,mBAAA,GAAsB,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAC,CAAA;AACvD,IAAA,IAAI,cAAA,GAAiB,CAAA;AACrB,IAAA,KAAA,MAAW,WAAW,GAAA,CAAI,gBAAA;AAAA,MACxB;AAAA,KACF,EAAG;AACD,MAAA,MAAM,QAAQ,OAAA,CAAQ,OAAA;AAAA,QACpB;AAAA,OACF;AACA,MAAA,MAAM,cAAA,GACJ,OAAA,CAAQ,OAAA,CAAQ,OAAA,CAAQ,cAAe,CAAA,IACtC,KAAA,KAAU,IAAA,IAAQ,OAAA,CAAQ,KAAA,CAAM,OAAA,CAAQ,qBAAsB,CAAA;AACjE,MAAA,IAAI,cAAA,GAAiB,CAAA;AACrB,MAAA,KAAA,MAAW,SAAS,OAAA,CAAQ,gBAAA;AAAA,QAC1B;AAAA,OACF,EAAG;AACD,QAAA,MAAM,UACJ,CAAC,KAAA,IAAS,kBAAkB,OAAA,CAAQ,KAAA,CAAM,QAAQ,gBAAiB,CAAA;AACrE,QAAA,KAAA,CAAM,SAAS,CAAC,OAAA;AAChB,QAAA,IAAI,OAAA,EAAS,cAAA,EAAA;AAAA,MACf;AACA,MAAA,OAAA,CAAQ,MAAA,GAAS,OAAA,CAAQ,KAAK,CAAA,IAAK,cAAA,KAAmB,CAAA;AACtD,MAAA,cAAA,IAAkB,cAAA;AAAA,IACpB;AACA,IAAA,KAAA,MAAW,SAAS,GAAA,CAAI,gBAAA;AAAA,MACtB;AAAA,KACF,EAAG;AACD,MAAA,KAAA,CAAM,MAAA,GACJ,OAAA,CAAQ,KAAK,CAAA,IACb,CAAC,KAAA,CAAM,IAAA;AAAA,QACL,KAAA,CAAM,iBAA8B,wBAAwB;AAAA,QAC5D,IAAA,CAAK,CAAC,OAAA,KAAY,CAAC,QAAQ,MAAM,CAAA;AACrC,MAAA,MAAM,MAAA,GAAS,KAAA,CAAM,aAAA,CAA2B,iBAAiB,CAAA;AACjE,MAAA,MAAM,UAAU,KAAA,CAAM,aAAA;AAAA,QACpB;AAAA,OACF;AACA,MAAA,IAAI,UAAU,OAAA,EAAS;AACrB,QAAA,MAAM,WAAW,KAAA,GACb,CAAC,MAAM,MAAA,GACP,OAAA,CAAQ,QAAQ,yBAAA,KAA8B,MAAA;AAClD,QAAA,MAAA,CAAO,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,QAAQ,CAAC,CAAA;AACrD,QAAA,MAAM,QAAQ,MAAA,CAAO,aAAA;AAAA,UACnB;AAAA,SACF;AACA,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,KAAA,CAAM,OAAA,CAAQ,IAAA,GAAO,MAAA,CAAO,QAAQ,CAAA;AACpC,UAAA,KAAA,CAAM,OAAA,CAAQ,SAAA,GAAY,QAAA,GAAW,MAAA,GAAS,OAAA;AAC9C,UAAA,KAAA,CAAM,KAAA,CAAM,WAAA;AAAA,YACV,kCAAA;AAAA,YACA,WAAW,OAAA,GAAU;AAAA,WACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,IAAA,MAAM,QAAQ,GAAA,CAAI,aAAA;AAAA,MAChB;AAAA,KACF;AACA,IAAA,KAAA,CAAM,QAAQ,OAAA,GAAU,MAAA,CAAO,QAAQ,KAAK,CAAA,IAAK,mBAAmB,CAAC,CAAA;AAAA,EACvE,CAAA;AACA,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAiB;AAChC,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,IAAA,MAAM,MAAA,GAAS,MAAA,EAAQ,OAAA,CAAqB,uBAAuB,CAAA;AACnE,IAAA,IAAI,CAAC,MAAA,IAAU,CAAC,IAAA,CAAK,QAAA,CAAS,MAAM,CAAA,EAAG;AACvC,IAAA,WAAA,GAAc,oBAAA,CAAqB,MAAM,CAAA,CAAE,KAAA;AAC3C,IAAA,KAAA,GAAQ,WAAA,CAAY,IAAA,EAAK,CAAE,iBAAA,EAAkB;AAC7C,IAAA,KAAA,EAAM;AAAA,EACR,CAAA;AACA,EAAA,MAAM,OAAA,GAAU,CAAC,KAAA,KAAiB;AAChC,IAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,IAAA,IAAI,CAAC,MAAA,CAAO,OAAA,CAAQ,sCAAsC,CAAA,EAAG;AAC7D,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,aAAA,CAA2B,uBAAuB,CAAA;AACtE,IAAA,WAAA,GAAc,EAAA;AACd,IAAA,KAAA,GAAQ,EAAA;AACR,IAAA,MAAA,CAAO,WAAA,GAAc,EAAA;AACrB,IAAA,KAAA,EAAM;AACN,IAAA,MAAA,CAAO,KAAA,EAAM;AAAA,EACf,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AACtC,EAAA,MAAM,QAAA,GAAW,IAAI,IAAA,CAAK,gBAAA,CAAiB,MAAM;AAC/C,IAAA,IAAI,OAAO,KAAA,EAAM;AAAA,EACnB,CAAC,CAAA;AACD,EAAA,QAAA,CAAS,QAAQ,IAAA,EAAM,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AACzD,EAAA,KAAA,EAAM;AACN,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AACzC,IAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AACzC,IAAA,QAAA,CAAS,UAAA,EAAW;AAAA,EACtB,CAAA;AACF;AAMO,SAAS,kBAAA,CACd,MACA,EAAA,EACA;AAAA,EACE,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA,GAAS,SAAA;AAAA,EACT,QAAA,GAAW,MAAA;AAAA,EACX,KAAA,GAAQ;AACV,CAAA,GAA0B,EAAC,EACf;AACZ,EAAA,MAAM,IAAA,GAAO,KAAK,aAAA,CAAc,WAAA;AAChC,EAAA,IAAI,CAAC,IAAA,IAAS,KAAA,IAAS,CAAC,IAAA,CAAK,WAAW,KAAK,CAAA,CAAE,OAAA,EAAU,OAAO,MAAM;AAAA,EAAC,CAAA;AACvE,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,qBAAA,CAAsB,MAAM;AAC7C,IAAA,KAAA,MAAW,IAAA,IAAQ,IAAA,CAAK,gBAAA,CAA8B,gBAAgB,CAAA,EAAG;AACvE,MAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,MAAA,KAAW,EAAA,EAAI;AAChC,MAAA,IAAA,CAAK,cAAA,CAAe,EAAE,KAAA,EAAO,MAAA,EAAQ,UAAU,CAAA;AAC/C,MAAA;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,OAAO,MAAM,IAAA,CAAK,oBAAA,CAAqB,KAAK,CAAA;AAC9C;AAEA,SAAS,OAAO,KAAA,EAAuB;AACrC,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AACtC,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,MAAM,GAAG,OAAO,CAAA;AACrC,EAAA,OAAO,MAAM,IAAA,EAAK,CAAE,SAAS,KAAK,CAAA,GAAI,SAAS,EAAA,GAAK,MAAA;AACtD;AAEA,SAAS,cAAc,KAAA,EAAwB;AAC7C,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,OAAA,CAAQ,MAAA,EAAQ,EAAE,CAAA;AAC3C,EAAA,OACE,UAAA,KAAe,aAAA,IAAiB,uBAAA,CAAwB,IAAA,CAAK,UAAU,CAAA;AAE3E;AAEA,SAAS,kBAAkB,MAAA,EAAgC;AACzD,EAAA,MAAM,SAAoB,EAAC;AAC3B,EAAA,KAAA,MAAW,WAAW,MAAA,CAAO,gBAAA;AAAA,IAC3B;AAAA,GACF,EAAG;AACD,IAAA,IAAI,OAAA,CAAQ,OAAA,CAAQ,sCAAsC,CAAA,EAAG;AAC7D,IAAA,KAAA,MAAW,KAAA,IAAS,QAAQ,QAAA,EAAU;AACpC,MAAA,IACE,KAAA,CAAM,OAAA,CAAQ,iCAAiC,CAAA,IAC/C,KAAA,CAAM,QAAQ,8BAA8B,CAAA,IAC5C,KAAA,CAAM,OAAA,CAAQ,6BAA6B,CAAA;AAE3C,QAAA;AACF,MAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,IACnB;AAAA,EACF;AACA,EAAA,KAAA,MAAW,WAAW,MAAA,CAAO,gBAAA;AAAA,IAC3B;AAAA,GACF,EAAG;AACD,IAAA,IACE,OAAA,CAAQ,OAAA,CAAQ,iCAAiC,CAAA,IACjD,OAAA,CAAQ,QAAQ,sCAAsC,CAAA,IACtD,OAAA,CAAQ,OAAA,CAAQ,sBAAsB,CAAA;AAEtC,MAAA;AACF,IAAA,MAAM,MAAA,GACJ,OAAA,CAAQ,aAAA,EAAe,OAAA,CAAqB,kBAAkB,CAAA;AAChE,IAAA,IAAI,MAAA,IAAU,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,EAAG;AACvC,IAAA,MAAA,CAAO,KAAK,OAAO,CAAA;AAAA,EACrB;AACA,EAAA,OAAO,MAAA;AACT;AAEA,SAAS,YACP,QAAA,EACA,SAAA,EACA,IAAA,EACA,GAAA,EACA,OACA,MAAA,EACa;AACb,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC5C,EAAA,OAAA,CAAQ,SAAA,GAAY,SAAA;AACpB,EAAA,OAAA,CAAQ,KAAA,CAAM,SAAA,GAAY,CAAA,UAAA,EAAa,IAAI,OAAO,GAAG,CAAA,GAAA,CAAA;AACrD,EAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,CAAA,EAAG,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA,EAAA,CAAA;AAC3C,EAAA,OAAA,CAAQ,MAAM,MAAA,GAAS,CAAA,EAAG,KAAK,GAAA,CAAI,CAAA,EAAG,MAAM,CAAC,CAAA,EAAA,CAAA;AAC7C,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,oBAAA,CAAqB,OAAe,KAAA,EAAuB;AAClE,EAAA,OAAO,UAAU,MAAA,IAAU,KAAA,KAAU,QAAA,GAAW,CAAA,GAAI,OAAO,KAAK,CAAA;AAClE;AASO,SAAS,2BAA2B,IAAA,EAA+B;AACxE,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,CAAQ,4BAA4B,IACrD,IAAA,GACA,IAAA,CAAK,cAA2B,4BAA4B,CAAA;AAChE,EAAA,MAAM,MAAA,GAAS,OAAA,EAAS,aAAA,CAA2B,sBAAsB,CAAA;AACzE,EAAA,MAAM,QAAQ,OAAA,EAAS,aAAA;AAAA,IACrB;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,KAAK,aAAA,CAAc,WAAA;AAChC,EAAA,IAAI,CAAC,WAAW,CAAC,MAAA,IAAU,CAAC,KAAA,IAAS,CAAC,IAAA,EAAM,OAAO,MAAM;AAAA,EAAC,CAAA;AAE1D,EAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,EAAA,MAAM,SAAS,MAAY;AACzB,IAAA,KAAA,GAAQ,CAAA;AACR,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,IAAI,OAAA,CAAQ,OAAA,CAAQ,eAAA,KAAoB,MAAA,EAAQ;AAC9C,MAAA,qBAAA,CAAsB,EAAE,CAAA;AACxB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,IAAA,GAAO,OAAO,qBAAA,EAAsB;AAC1C,IAAA,MAAM,SAAA,GAAY,kBAAkB,MAAM,CAAA;AAC1C,IAAA,qBAAA,CAAsB,SAAS,CAAA;AAC/B,IAAA,KAAA,MAAW,CAAC,aAAA,EAAe,OAAO,CAAA,IAAK,SAAA,CAAU,SAAQ,EAAG;AAC1D,MAAA,MAAM,IAAA,GAAO,QAAQ,qBAAA,EAAsB;AAC3C,MAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,gBAAA,CAAiB,OAAO,CAAA;AAC3C,MAAA,MAAM,KAAA,GAAQ,MAAA;AAAA,QACZ,KAAA,CAAM,iBAAiB,6BAA6B;AAAA,OACtD;AACA,MAAA,MAAM,GAAA,GAAM,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA;AAClC,MAAA,MAAM,QAAQ,IAAA,CAAK,GAAA;AAAA,QACjB,CAAA;AAAA,QACA,OAAO,KAAA,CAAM,WAAW,KAAK,KAAA,CAAM,SAAA,KAAc,QAAQ,KAAA,GAAQ,CAAA;AAAA,OACnE;AACA,MAAA,MAAM,MAAA,GAAS,MAAA,CAAO,KAAA,CAAM,YAAY,CAAA;AACxC,MAAA,MAAM,OAAO,IAAA,CAAK,GAAA;AAAA,QAChB,CAAA;AAAA,QACA,OAAO,KAAA,CAAM,UAAU,KAAK,KAAA,CAAM,SAAA,KAAc,QAAQ,CAAA,GAAI,KAAA;AAAA,OAC9D;AACA,MAAA,MAAM,CAAA,GAAI,IAAA,CAAK,IAAA,GAAO,IAAA,CAAK,OAAO,MAAA,CAAO,UAAA;AACzC,MAAA,MAAM,CAAA,GAAI,IAAA,CAAK,GAAA,GAAM,IAAA,CAAK,MAAM,MAAA,CAAO,SAAA;AACvC,MAAA,MAAM,YAAA,GAAe;AAAA,QACnB,oBAAA,CAAqB,KAAA,CAAM,cAAA,EAAgB,KAAA,CAAM,cAAc,CAAA;AAAA,QAC/D,oBAAA,CAAqB,KAAA,CAAM,gBAAA,EAAkB,KAAA,CAAM,gBAAgB,CAAA;AAAA,QACnE,oBAAA,CAAqB,KAAA,CAAM,iBAAA,EAAmB,KAAA,CAAM,iBAAiB,CAAA;AAAA,QACrE,oBAAA,CAAqB,KAAA,CAAM,eAAA,EAAiB,KAAA,CAAM,eAAe;AAAA,OACnE;AACA,MAAA,IAAI,aAAa,IAAA,CAAK,CAAC,KAAA,KAAU,KAAA,GAAQ,CAAC,CAAA,EAAG;AAC3C,QAAA,MAAM,MAAA,GAAS,WAAA;AAAA,UACb,IAAA,CAAK,aAAA;AAAA,UACL,8BAAA;AAAA,UACA,CAAA;AAAA,UACA,CAAA;AAAA,UACA,IAAA,CAAK,KAAA;AAAA,UACL,IAAA,CAAK;AAAA,SACP;AACA,QAAA,MAAA,CAAO,OAAA,CAAQ,uBAAA,GAA0B,MAAA,CAAO,aAAa,CAAA;AAC7D,QAAA,MAAA,CAAO,KAAA,CAAM,cAAA,GAAiB,CAAA,EAAG,YAAA,CAAa,CAAC,CAAC,CAAA,EAAA,CAAA;AAChD,QAAA,MAAA,CAAO,KAAA,CAAM,gBAAA,GAAmB,CAAA,EAAG,YAAA,CAAa,CAAC,CAAC,CAAA,EAAA,CAAA;AAClD,QAAA,MAAA,CAAO,KAAA,CAAM,iBAAA,GAAoB,CAAA,EAAG,YAAA,CAAa,CAAC,CAAC,CAAA,EAAA,CAAA;AACnD,QAAA,MAAA,CAAO,KAAA,CAAM,eAAA,GAAkB,CAAA,EAAG,YAAA,CAAa,CAAC,CAAC,CAAA,EAAA,CAAA;AACjD,QAAA,MAAA,CAAO,KAAA,CAAM,eAAe,KAAA,CAAM,YAAA;AAClC,QAAA,KAAA,CAAM,OAAO,MAAM,CAAA;AAAA,MACrB,CAAA,MAAA,IAAW,aAAA,CAAc,KAAA,CAAM,eAAe,CAAA,EAAG;AAC/C,QAAA,MAAM,KAAA,GAAQ,WAAA;AAAA,UACZ,IAAA,CAAK,aAAA;AAAA,UACL,6BAAA;AAAA,UACA,CAAA;AAAA,UACA,CAAA;AAAA,UACA,IAAA,CAAK,KAAA;AAAA,UACL,IAAA,CAAK;AAAA,SACP;AACA,QAAA,KAAA,CAAM,OAAA,CAAQ,uBAAA,GAA0B,MAAA,CAAO,aAAa,CAAA;AAC5D,QAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MACpB;AACA,MAAA,MAAM,OAAA,GAEF;AAAA,QACF,CAAC,KAAA,EAAO,GAAA,EAAK,CAAA,GAAI,IAAA,EAAM,CAAA,GAAI,GAAA,EAAK,IAAA,CAAK,KAAA,GAAQ,IAAA,GAAO,KAAA,EAAO,GAAG,CAAA;AAAA,QAC9D;AAAA,UACE,QAAA;AAAA,UACA,MAAA;AAAA,UACA,CAAA,GAAI,IAAA;AAAA,UACJ,IAAI,IAAA,CAAK,MAAA;AAAA,UACT,IAAA,CAAK,QAAQ,IAAA,GAAO,KAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,CAAC,QAAQ,IAAA,EAAM,CAAA,GAAI,MAAM,CAAA,EAAG,IAAA,EAAM,KAAK,MAAM,CAAA;AAAA,QAC7C,CAAC,SAAS,KAAA,EAAO,CAAA,GAAI,KAAK,KAAA,EAAO,CAAA,EAAG,KAAA,EAAO,IAAA,CAAK,MAAM;AAAA,OACxD;AACA,MAAA,KAAA,MAAW,CAAC,MAAM,IAAA,EAAM,OAAA,EAAS,SAAS,KAAA,EAAO,MAAM,KAAK,OAAA,EAAS;AACnE,QAAA,IAAI,QAAQ,CAAA,EAAG;AACf,QAAA,MAAM,MAAA,GAAS,WAAA;AAAA,UACb,IAAA,CAAK,aAAA;AAAA,UACL,8BAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,MAAA,CAAO,OAAA,CAAQ,uBAAA,GAA0B,MAAA,CAAO,aAAa,CAAA;AAC7D,QAAA,MAAA,CAAO,QAAQ,mBAAA,GAAsB,IAAA;AACrC,QAAA,KAAA,CAAM,OAAO,MAAM,CAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF,CAAA;AACA,EAAA,MAAM,WAAW,MAAY;AAC3B,IAAA,IAAI,CAAC,KAAA,EAAO,KAAA,GAAQ,IAAA,CAAK,sBAAsB,MAAM,CAAA;AAAA,EACvD,CAAA;AACA,EAAA,MAAM,cAAA,GAAiB,IAAI,IAAA,CAAK,cAAA,CAAe,QAAQ,CAAA;AACvD,EAAA,cAAA,CAAe,QAAQ,MAAM,CAAA;AAC7B,EAAA,MAAM,iBAAA,uBAAwB,GAAA,EAAa;AAC3C,EAAA,MAAM,qBAAA,GAAwB,CAAC,SAAA,KAA+B;AAC5D,IAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,SAAS,CAAA;AAC9B,IAAA,KAAA,MAAW,YAAY,iBAAA,EAAmB;AACxC,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,QAAQ,CAAA,EAAG;AACxB,MAAA,cAAA,CAAe,UAAU,QAAQ,CAAA;AACjC,MAAA,iBAAA,CAAkB,OAAO,QAAQ,CAAA;AAAA,IACnC;AACA,IAAA,KAAA,MAAW,YAAY,IAAA,EAAM;AAC3B,MAAA,IAAI,iBAAA,CAAkB,GAAA,CAAI,QAAQ,CAAA,EAAG;AACrC,MAAA,cAAA,CAAe,QAAQ,QAAQ,CAAA;AAC/B,MAAA,iBAAA,CAAkB,IAAI,QAAQ,CAAA;AAAA,IAChC;AAAA,EACF,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,IAAI,IAAA,CAAK,gBAAA,CAAiB,CAAC,OAAA,KAAY;AAC9D,IAAA,IACE,OAAA,CAAQ,IAAA;AAAA,MACN,CAAC,EAAE,MAAA,EAAO,KAAM,WAAW,KAAA,IAAS,CAAC,KAAA,CAAM,QAAA,CAAS,MAAc;AAAA,KACpE;AAEA,MAAA,QAAA,EAAS;AAAA,EACb,CAAC,CAAA;AACD,EAAA,gBAAA,CAAiB,QAAQ,OAAA,EAAS;AAAA,IAChC,UAAA,EAAY,IAAA;AAAA,IACZ,SAAA,EAAW,IAAA;AAAA,IACX,OAAA,EAAS;AAAA,GACV,CAAA;AACD,EAAA,gBAAA,CAAiB,OAAA,CAAQ,IAAA,CAAK,aAAA,CAAc,eAAA,EAAiB;AAAA,IAC3D,UAAA,EAAY;AAAA,GACb,CAAA;AACD,EAAA,MAAM,YAAA,GAAe,KAAK,aAAA,CAAc,IAAA;AACxC,EAAA,IAAI,YAAA;AACF,IAAA,gBAAA,CAAiB,QAAQ,YAAA,EAAc;AAAA,MACrC,UAAA,EAAY,IAAA;AAAA,MACZ,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACV,CAAA;AACH,EAAA,MAAM,gBAAA,GAAmB,MAAY,QAAA,EAAS;AAC9C,EAAA,YAAA,EAAc,gBAAA,CAAiB,MAAA,EAAQ,gBAAA,EAAkB,IAAI,CAAA;AAC7D,EAAA,IAAA,CAAK,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACxC,EAAA,MAAA,EAAO;AACP,EAAA,OAAO,MAAM;AACX,IAAA,IAAI,KAAA,EAAO,IAAA,CAAK,oBAAA,CAAqB,KAAK,CAAA;AAC1C,IAAA,cAAA,CAAe,UAAA,EAAW;AAC1B,IAAA,gBAAA,CAAiB,UAAA,EAAW;AAC5B,IAAA,YAAA,EAAc,mBAAA,CAAoB,MAAA,EAAQ,gBAAA,EAAkB,IAAI,CAAA;AAChE,IAAA,IAAA,CAAK,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AAC3C,IAAA,KAAA,CAAM,eAAA,EAAgB;AAAA,EACxB,CAAA;AACF;AAWO,SAAS,YACd,IAAA,EACA;AAAA,EACE,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA,GAAe,gBAAA;AAAA,EACf,mBAAA,GAAsB,wBAAA;AAAA,EACtB,iBAAA,GAAoB,sBAAA;AAAA,EACpB,qBAAA,GAAwB,0BAAA;AAAA,EACxB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,IAAI,SAAA,GAAY;AAClB,CAAA,EACY;AACZ,EAAA,IAAI,YAAA;AACJ,EAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAe;AAC7B,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,MAAM,IAAA,GAAO,KAAK,aAAA,CAAc,WAAA;AAChC,IAAA,IAAI,YAAY,IAAA,EAAM;AACpB,MAAA,MAAM,GAAA,GAAM,IAAI,GAAA,CAAI,IAAA,CAAK,SAAS,IAAI,CAAA;AACtC,MAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,QAAA,EAAU,EAAE,CAAA;AACjC,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,IAAA,EAAM,EAAA,EAAI,GAAG,CAAA;AAAA,IACzC;AAEA,IAAA,MAAM,OAAO,IAAA,CAAK,aAAA,CAAc,cAAA,CAAe,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAA;AACvE,IAAA,IACE,SAAA,IACA,CAAC,SAAA,CAAU,IAAA,EAAK,IAChB,IAAA,IACA,IAAA,CAAK,aAAA,CAAc,WAAA,EAAa,gBAAA,CAAiB,IAAI,CAAA,CAAE,QAAA,KACrD,UAAA;AAEF,MAAA,SAAA,CAAU,KAAA,GAAQ,IAAA;AACpB,IAAA,IAAI,eAAA,EAAiB;AACnB,MAAA,YAAA,IAAe;AACf,MAAA,YAAA,GAAe,kBAAA;AAAA,QACb,IAAA;AAAA,QACA,EAAA;AAAA,QACA,eAAA,KAAoB,OAAO,MAAA,GAAY;AAAA,OACzC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAA+B;AAAA,IACnC,mBAAmB,IAAI,CAAA;AAAA,IACvB,kBAAkB,IAAI,CAAA;AAAA;AAAA;AAAA,IAGtB,QAAA;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAiB,YAAY,CAAA,EAAA,CAAA;AAAA,MAC7B,CAAC,QAAQ,OAAA,KAAY;AACnB,QAAA,MAAM,EAAA,GAAM,QAAwB,OAAA,CAAQ,MAAA;AAC5C,QAAA,IAAI,EAAA,SAAW,EAAE,CAAA;AAAA,MACnB;AAAA;AACF,GACF;AACA,EAAA,IAAI,eAAA,EAAiB;AACnB,IAAA,SAAA,CAAU,IAAA;AAAA,MACR,QAAA;AAAA,QAAS,IAAA;AAAA,QAAM,OAAA;AAAA,QAAS,iBAAiB,mBAAmB,CAAA,EAAA,CAAA;AAAA,QAAM,MAChE,eAAA;AAAgB;AAClB,KACF;AAAA,EACF;AACA,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,SAAA,CAAU,IAAA;AAAA,MACR,QAAA;AAAA,QAAS,IAAA;AAAA,QAAM,OAAA;AAAA,QAAS,iBAAiB,iBAAiB,CAAA,EAAA,CAAA;AAAA,QAAM,MAC9D,aAAA;AAAc;AAChB,KACF;AAAA,EACF;AACA,EAAA,IAAI,iBAAA,EAAmB;AACrB,IAAA,SAAA,CAAU,IAAA;AAAA,MACR,QAAA;AAAA,QAAS,IAAA;AAAA,QAAM,OAAA;AAAA,QAAS,iBAAiB,qBAAqB,CAAA,EAAA,CAAA;AAAA,QAAM,MAClE,iBAAA;AAAkB;AACpB,KACF;AAAA,EACF;AACA,EAAA,IAAI,SAAA,IAAa,WAAA;AACf,IAAA,SAAA,CAAU,IAAA;AAAA,MACR,cAAc,IAAA,EAAM;AAAA,QAClB,EAAA,EAAI,SAAA;AAAA,QACJ,MAAA,EAAQ;AAAA,UACN,QAAA,EAAU;AAAA,YACR,SAAA;AAAA,YACA,IAAA,EAAM,WAAA;AAAA,YACN,UAAA,EAAY;AAAA;AACd;AACF,OACD;AAAA,KACH;AACF,EAAA,OAAO,MAAM;AACX,IAAA,YAAA,IAAe;AACf,IAAA,KAAA,MAAW,OAAA,IAAW,SAAA,CAAU,MAAA,CAAO,CAAC,GAAG,OAAA,EAAQ;AAAA,EACrD,CAAA;AACF","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readTokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { wireWorkbench } from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\n\nexport interface WireCatalogOptions {\n  /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n  onSelect: (id: string) => void;\n  /** Invoked when the sidebar collapse/expand control is activated. */\n  onToggleSidebar?: () => void;\n  /** Invoked when the theme toggle is activated. */\n  onToggleTheme?: () => void;\n  /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n  onToggleSecondary?: () => void;\n  /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n  urlParam?: string;\n  /**\n   * Reveal the chosen sidebar row after selection. `true` uses desktop-safe\n   * defaults; pass options to customize scroll alignment or the media guard.\n   */\n  revealSelection?: boolean | CatalogRevealOptions;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  toggleSecondaryAction?: string;\n  /**\n   * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench\n   * sidebar is wired like any Workbench rail: it becomes a transient overlay\n   * on a small screen (collapsed as the breakpoint applies, closed on Escape\n   * or a press outside, focus handed back), and choosing an entry from the\n   * open overlay closes it.\n   */\n  collapsed?: Signal<boolean>;\n  /**\n   * The app-owned sidebar width signal for a Catalog rendered with\n   * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed\n   * drag or keyboard resize is written to it.\n   */\n  sidebarSize?: Signal<number>;\n  /**\n   * With `sidebarSize`, load and save the width under this storage key so the\n   * catalog remembers the user's sidebar width.\n   */\n  sidebarStorageKey?: string;\n  /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n  id?: string;\n}\n\nexport interface CatalogRevealOptions {\n  /** Scroll alignment within the sidebar. Default `'nearest'`. */\n  block?: ScrollLogicalPosition;\n  /** Cross-axis alignment. Default `'nearest'`. */\n  inline?: ScrollLogicalPosition;\n  /** Scroll behavior. Default `'auto'`. */\n  behavior?: ScrollBehavior;\n  /**\n   * Only reveal when this media query matches. Defaults to the Catalog's\n   * desktop layout; pass `false` to reveal at every viewport size.\n   */\n  media?: string | false;\n}\n\n// The Workbench keeps the sidebar inline above its `narrow` breakpoint (704px).\nconst catalogDesktopMedia = '(min-width: 44.01rem)';\n\n/** Keep the sidebar filter local to the shared Catalog, including across controlled rerenders. */\nfunction wireCatalogFilter(root: HTMLElement): () => void {\n  const view = root.ownerDocument.defaultView!;\n  let filterValue = '';\n  let query = '';\n  let currentEditor: HTMLElement | null = null;\n  const matches = (name: string) => name.toLocaleLowerCase().includes(query);\n  const apply = () => {\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]');\n    const nav = root.querySelector<HTMLElement>('[data-catalog-sidebar]');\n    if (!editor || !nav) return;\n    if (editor !== currentEditor) {\n      currentEditor = editor;\n      if (readTokenSearchField(editor).query !== filterValue)\n        editor.textContent = filterValue;\n    }\n    const field = editor.closest<HTMLElement>(\n      '[data-component=\"token-search-field\"]',\n    )!;\n    field.dataset.catalogFilterActive = String(Boolean(query));\n    field.dataset.placeholderVisible = String(!filterValue);\n    const clear = field.querySelector<HTMLElement>(\n      '[data-action=\"catalog-clear-filter\"]',\n    )!;\n    clear.style.display = query ? '' : 'none';\n    nav.dataset.catalogFilterActive = String(Boolean(query));\n    let visibleEntries = 0;\n    for (const section of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-section]',\n    )) {\n      const group = section.closest<HTMLElement>(\n        '[data-catalog-secondary-group]',\n      );\n      const headingMatches =\n        matches(section.dataset.catalogSection!) ||\n        (group !== null && matches(group.dataset.catalogSecondaryGroup!));\n      let sectionEntries = 0;\n      for (const entry of section.querySelectorAll<HTMLElement>(\n        '[data-catalog-entry-name]',\n      )) {\n        const visible =\n          !query || headingMatches || matches(entry.dataset.catalogEntryName!);\n        entry.hidden = !visible;\n        if (visible) sectionEntries++;\n      }\n      section.hidden = Boolean(query) && sectionEntries === 0;\n      visibleEntries += sectionEntries;\n    }\n    for (const group of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-secondary-group]',\n    )) {\n      group.hidden =\n        Boolean(query) &&\n        !Array.from(\n          group.querySelectorAll<HTMLElement>('[data-catalog-section]'),\n        ).some((section) => !section.hidden);\n      const toggle = group.querySelector<HTMLElement>('[aria-expanded]');\n      const content = group.querySelector<HTMLElement>(\n        '[data-catalog-secondary-collapsed]',\n      );\n      if (toggle && content) {\n        const expanded = query\n          ? !group.hidden\n          : content.dataset.catalogSecondaryCollapsed !== 'true';\n        toggle.setAttribute('aria-expanded', String(expanded));\n        const arrow = toggle.querySelector<HTMLElement>(\n          '[data-component=\"disclosure-arrow\"]',\n        );\n        if (arrow) {\n          arrow.dataset.open = String(expanded);\n          arrow.dataset.direction = expanded ? 'down' : 'right';\n          arrow.style.setProperty(\n            '--_kui-disclosure-arrow-rotation',\n            expanded ? '90deg' : '0deg',\n          );\n        }\n      }\n    }\n    const empty = nav.querySelector<HTMLElement>(\n      '[data-catalog-filter-empty]',\n    )!;\n    empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);\n  };\n  const onInput = (event: Event) => {\n    const target = event.target as HTMLElement | null;\n    const editor = target?.closest<HTMLElement>('[data-catalog-filter]');\n    if (!editor || !root.contains(editor)) return;\n    filterValue = readTokenSearchField(editor).query;\n    query = filterValue.trim().toLocaleLowerCase();\n    apply();\n  };\n  const onClick = (event: Event) => {\n    const target = event.target as Element;\n    if (!target.closest('[data-action=\"catalog-clear-filter\"]')) return;\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]')!;\n    filterValue = '';\n    query = '';\n    editor.textContent = '';\n    apply();\n    editor.focus();\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('click', onClick);\n  const observer = new view.MutationObserver(() => {\n    if (query) apply();\n  });\n  observer.observe(root, { childList: true, subtree: true });\n  apply();\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('click', onClick);\n    observer.disconnect();\n  };\n}\n\n/**\n * Reveal one Catalog sidebar entry after the controlled render settles without\n * moving focus. Returns a cancellation function for rapid selection changes.\n */\nexport function revealCatalogEntry(\n  root: HTMLElement,\n  id: string,\n  {\n    block = 'nearest',\n    inline = 'nearest',\n    behavior = 'auto',\n    media = catalogDesktopMedia,\n  }: CatalogRevealOptions = {},\n): () => void {\n  const view = root.ownerDocument.defaultView;\n  if (!view || (media && !view.matchMedia(media).matches)) return () => {};\n  const frame = view.requestAnimationFrame(() => {\n    for (const item of root.querySelectorAll<HTMLElement>('[data-item-id]')) {\n      if (item.dataset.itemId !== id) continue;\n      item.scrollIntoView({ block, inline, behavior });\n      break;\n    }\n  });\n  return () => view.cancelAnimationFrame(frame);\n}\n\nfunction pixels(value: string): number {\n  const number = Number.parseFloat(value);\n  if (!Number.isFinite(number)) return 0;\n  return value.trim().endsWith('rem') ? number * 16 : number;\n}\n\nfunction isTransparent(color: string): boolean {\n  const normalized = color.replace(/\\s+/g, '');\n  return (\n    normalized === 'transparent' || /(?:,|\\/)0(?:\\.0+)?\\)$/.test(normalized)\n  );\n}\n\nfunction geometrySpecimens(canvas: HTMLElement): Element[] {\n  const result: Element[] = [];\n  for (const example of canvas.querySelectorAll<HTMLElement>(\n    '[data-catalog-example]',\n  )) {\n    if (example.closest('[data-catalog-geometry-overlay-skip]')) continue;\n    for (const child of example.children) {\n      if (\n        child.matches('[data-catalog-geometry-overlay]') ||\n        child.matches('[data-catalog-example-label]') ||\n        child.matches('[data-catalog-example-note]')\n      )\n        continue;\n      result.push(child);\n    }\n  }\n  for (const element of canvas.querySelectorAll<HTMLElement>(\n    '[data-component]',\n  )) {\n    if (\n      element.closest('[data-catalog-geometry-overlay]') ||\n      element.closest('[data-catalog-geometry-overlay-skip]') ||\n      element.closest('.kui-catalog-example')\n    )\n      continue;\n    const parent =\n      element.parentElement?.closest<HTMLElement>('[data-component]');\n    if (parent && canvas.contains(parent)) continue;\n    result.push(element);\n  }\n  return result;\n}\n\nfunction geometryBox(\n  document: Document,\n  className: string,\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n): HTMLElement {\n  const element = document.createElement('div');\n  element.className = className;\n  element.style.transform = `translate(${left}px, ${top}px)`;\n  element.style.width = `${Math.max(0, width)}px`;\n  element.style.height = `${Math.max(0, height)}px`;\n  return element;\n}\n\nfunction effectiveBorderWidth(width: string, style: string): number {\n  return style === 'none' || style === 'hidden' ? 0 : pixels(width);\n}\n\n/**\n * Keep a Catalog's opt-in geometry overlay synchronized with its preview.\n * Specimens receive computed border highlights (or a dashed bound when they\n * have no border and are transparent), while positive computed margins use\n * devtools-style orange bands. CSS/stylesheet-only changes are observed too.\n * Returns a disposer.\n */\nexport function wireCatalogGeometryOverlay(root: HTMLElement): () => void {\n  const catalog = root.matches('[data-component=\"catalog\"]')\n    ? root\n    : root.querySelector<HTMLElement>('[data-component=\"catalog\"]');\n  const canvas = catalog?.querySelector<HTMLElement>('.kui-catalog__canvas');\n  const layer = catalog?.querySelector<HTMLElement>(\n    '[data-catalog-geometry-overlay]',\n  );\n  const view = root.ownerDocument.defaultView;\n  if (!catalog || !canvas || !layer || !view) return () => {};\n\n  let frame = 0;\n  const render = (): void => {\n    frame = 0;\n    layer.replaceChildren();\n    if (catalog.dataset.geometryOverlay !== 'true') {\n      syncObservedSpecimens([]);\n      return;\n    }\n    const base = canvas.getBoundingClientRect();\n    const specimens = geometrySpecimens(canvas);\n    syncObservedSpecimens(specimens);\n    for (const [specimenIndex, element] of specimens.entries()) {\n      const rect = element.getBoundingClientRect();\n      const style = view.getComputedStyle(element);\n      const align = pixels(\n        style.getPropertyValue('--kui-catalog-example-align'),\n      );\n      const top = pixels(style.marginTop);\n      const right = Math.max(\n        0,\n        pixels(style.marginRight) - (style.direction === 'rtl' ? align : 0),\n      );\n      const bottom = pixels(style.marginBottom);\n      const left = Math.max(\n        0,\n        pixels(style.marginLeft) - (style.direction === 'rtl' ? 0 : align),\n      );\n      const x = rect.left - base.left + canvas.scrollLeft;\n      const y = rect.top - base.top + canvas.scrollTop;\n      const borderWidths = [\n        effectiveBorderWidth(style.borderTopWidth, style.borderTopStyle),\n        effectiveBorderWidth(style.borderRightWidth, style.borderRightStyle),\n        effectiveBorderWidth(style.borderBottomWidth, style.borderBottomStyle),\n        effectiveBorderWidth(style.borderLeftWidth, style.borderLeftStyle),\n      ];\n      if (borderWidths.some((width) => width > 0)) {\n        const border = geometryBox(\n          root.ownerDocument,\n          'kui-catalog__geometry-border',\n          x,\n          y,\n          rect.width,\n          rect.height,\n        );\n        border.dataset.catalogGeometrySpecimen = String(specimenIndex);\n        border.style.borderTopWidth = `${borderWidths[0]}px`;\n        border.style.borderRightWidth = `${borderWidths[1]}px`;\n        border.style.borderBottomWidth = `${borderWidths[2]}px`;\n        border.style.borderLeftWidth = `${borderWidths[3]}px`;\n        border.style.borderRadius = style.borderRadius;\n        layer.append(border);\n      } else if (isTransparent(style.backgroundColor)) {\n        const bound = geometryBox(\n          root.ownerDocument,\n          'kui-catalog__geometry-bound',\n          x,\n          y,\n          rect.width,\n          rect.height,\n        );\n        bound.dataset.catalogGeometrySpecimen = String(specimenIndex);\n        layer.append(bound);\n      }\n      const margins: Array<\n        readonly [string, number, number, number, number, number]\n      > = [\n        ['top', top, x - left, y - top, rect.width + left + right, top],\n        [\n          'bottom',\n          bottom,\n          x - left,\n          y + rect.height,\n          rect.width + left + right,\n          bottom,\n        ],\n        ['left', left, x - left, y, left, rect.height],\n        ['right', right, x + rect.width, y, right, rect.height],\n      ];\n      for (const [side, size, marginX, marginY, width, height] of margins) {\n        if (size <= 0) continue;\n        const margin = geometryBox(\n          root.ownerDocument,\n          'kui-catalog__geometry-margin',\n          marginX,\n          marginY,\n          width,\n          height,\n        );\n        margin.dataset.catalogGeometrySpecimen = String(specimenIndex);\n        margin.dataset.catalogGeometrySide = side;\n        layer.append(margin);\n      }\n    }\n  };\n  const schedule = (): void => {\n    if (!frame) frame = view.requestAnimationFrame(render);\n  };\n  const resizeObserver = new view.ResizeObserver(schedule);\n  resizeObserver.observe(canvas);\n  const observedSpecimens = new Set<Element>();\n  const syncObservedSpecimens = (specimens: Element[]): void => {\n    const next = new Set(specimens);\n    for (const specimen of observedSpecimens) {\n      if (next.has(specimen)) continue;\n      resizeObserver.unobserve(specimen);\n      observedSpecimens.delete(specimen);\n    }\n    for (const specimen of next) {\n      if (observedSpecimens.has(specimen)) continue;\n      resizeObserver.observe(specimen);\n      observedSpecimens.add(specimen);\n    }\n  };\n  const mutationObserver = new view.MutationObserver((records) => {\n    if (\n      records.some(\n        ({ target }) => target !== layer && !layer.contains(target as Node),\n      )\n    )\n      schedule();\n  });\n  mutationObserver.observe(catalog, {\n    attributes: true,\n    childList: true,\n    subtree: true,\n  });\n  mutationObserver.observe(root.ownerDocument.documentElement, {\n    attributes: true,\n  });\n  const documentHead = root.ownerDocument.head;\n  if (documentHead)\n    mutationObserver.observe(documentHead, {\n      attributes: true,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  const stylesheetLoaded = (): void => schedule();\n  documentHead?.addEventListener('load', stylesheetLoaded, true);\n  view.addEventListener('resize', schedule);\n  render();\n  return () => {\n    if (frame) view.cancelAnimationFrame(frame);\n    resizeObserver.disconnect();\n    mutationObserver.disconnect();\n    documentHead?.removeEventListener('load', stylesheetLoaded, true);\n    view.removeEventListener('resize', schedule);\n    layer.replaceChildren();\n  };\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle, and\n * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * It also wires the scroll dividers below root (`wireScrollDividers`), so the\n * catalog's panes and every example in it show their chrome dividers only\n * while scrolled. Returns a disposer.\n */\nexport function wireCatalog(\n  root: HTMLElement,\n  {\n    onSelect,\n    onToggleSidebar,\n    onToggleTheme,\n    onToggleSecondary,\n    urlParam,\n    revealSelection,\n    selectAction = 'catalog-select',\n    toggleSidebarAction = 'catalog-toggle-sidebar',\n    toggleThemeAction = 'catalog-toggle-theme',\n    toggleSecondaryAction = 'catalog-toggle-secondary',\n    collapsed,\n    sidebarSize,\n    sidebarStorageKey,\n    id: catalogId = 'kui-catalog',\n  }: WireCatalogOptions,\n): () => void {\n  let cancelReveal: (() => void) | undefined;\n  const select = (id: string) => {\n    onSelect(id);\n    const view = root.ownerDocument.defaultView;\n    if (urlParam && view) {\n      const url = new URL(view.location.href);\n      url.searchParams.set(urlParam, id);\n      view.history.replaceState(null, '', url);\n    }\n    // An open overlay sidebar gives way to the entry just chosen from it.\n    const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);\n    if (\n      collapsed &&\n      !collapsed.peek() &&\n      rail &&\n      root.ownerDocument.defaultView?.getComputedStyle(rail).position ===\n        'absolute'\n    )\n      collapsed.value = true;\n    if (revealSelection) {\n      cancelReveal?.();\n      cancelReveal = revealCatalogEntry(\n        root,\n        id,\n        revealSelection === true ? undefined : revealSelection,\n      );\n    }\n  };\n\n  const disposers: Array<() => void> = [\n    wireScrollDividers(root),\n    wireCatalogFilter(root),\n    // Sidebar items AND the footer's related-entry popup-menu items both carry\n    // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n    delegate(\n      root,\n      'click',\n      `[data-action=\"${selectAction}\"]`,\n      (_event, element) => {\n        const id = (element as HTMLElement).dataset.itemId;\n        if (id) select(id);\n      },\n    ),\n  ];\n  if (onToggleSidebar) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () =>\n        onToggleSidebar(),\n      ),\n    );\n  }\n  if (onToggleTheme) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () =>\n        onToggleTheme(),\n      ),\n    );\n  }\n  if (onToggleSecondary) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () =>\n        onToggleSecondary(),\n      ),\n    );\n  }\n  if (collapsed || sidebarSize)\n    disposers.push(\n      wireWorkbench(root, {\n        id: catalogId,\n        panels: {\n          leftRail: {\n            collapsed,\n            size: sidebarSize,\n            storageKey: sidebarStorageKey,\n          },\n        },\n      }),\n    );\n  return () => {\n    cancelReveal?.();\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n}\n"]}
+{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":[],"mappings":"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","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readTokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { wireWorkbench } from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\n\nexport interface WireCatalogOptions {\n  /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n  onSelect: (id: string) => void;\n  /** Invoked when the sidebar collapse/expand control is activated. */\n  onToggleSidebar?: () => void;\n  /** Invoked when the theme toggle is activated. */\n  onToggleTheme?: () => void;\n  /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n  onToggleSecondary?: () => void;\n  /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n  urlParam?: string;\n  /**\n   * Reveal the chosen sidebar row after selection. `true` uses desktop-safe\n   * defaults; pass options to customize scroll alignment or the media guard.\n   */\n  revealSelection?: boolean | CatalogRevealOptions;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  toggleSecondaryAction?: string;\n  /**\n   * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench\n   * sidebar is wired like any Workbench rail: it becomes a transient overlay\n   * on a small screen (collapsed as the breakpoint applies, closed on Escape\n   * or a press outside, focus handed back), and choosing an entry from the\n   * open overlay closes it.\n   */\n  collapsed?: Signal<boolean>;\n  /**\n   * The app-owned sidebar width signal for a Catalog rendered with\n   * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed\n   * drag or keyboard resize is written to it.\n   */\n  sidebarSize?: Signal<number>;\n  /**\n   * With `sidebarSize`, load and save the width under this storage key so the\n   * catalog remembers the user's sidebar width.\n   */\n  sidebarStorageKey?: string;\n  /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n  id?: string;\n}\n\nexport interface CatalogRevealOptions {\n  /** Scroll alignment within the sidebar. Default `'nearest'`. */\n  block?: ScrollLogicalPosition;\n  /** Cross-axis alignment. Default `'nearest'`. */\n  inline?: ScrollLogicalPosition;\n  /** Scroll behavior. Default `'auto'`. */\n  behavior?: ScrollBehavior;\n  /**\n   * Only reveal when this media query matches. Defaults to the Catalog's\n   * desktop layout; pass `false` to reveal at every viewport size.\n   */\n  media?: string | false;\n}\n\n// The Workbench keeps the sidebar inline above its `narrow` breakpoint (704px).\nconst catalogDesktopMedia = '(min-width: 44.01rem)';\n\n/** Keep the sidebar filter local to the shared Catalog, including across controlled rerenders. */\nfunction wireCatalogFilter(root: HTMLElement): () => void {\n  const view = root.ownerDocument.defaultView!;\n  let filterValue = '';\n  let query = '';\n  let currentEditor: HTMLElement | null = null;\n  const matches = (name: string) => name.toLocaleLowerCase().includes(query);\n  const apply = () => {\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]');\n    const nav = root.querySelector<HTMLElement>('[data-catalog-sidebar]');\n    if (!editor || !nav) return;\n    if (editor !== currentEditor) {\n      currentEditor = editor;\n      if (readTokenSearchField(editor).query !== filterValue)\n        editor.textContent = filterValue;\n    }\n    const field = editor.closest<HTMLElement>(\n      '[data-component=\"token-search-field\"]',\n    )!;\n    field.dataset.catalogFilterActive = String(Boolean(query));\n    field.dataset.placeholderVisible = String(!filterValue);\n    const clear = field.querySelector<HTMLElement>(\n      '[data-action=\"catalog-clear-filter\"]',\n    )!;\n    clear.style.display = query ? '' : 'none';\n    nav.dataset.catalogFilterActive = String(Boolean(query));\n    let visibleEntries = 0;\n    for (const section of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-section]',\n    )) {\n      const group = section.closest<HTMLElement>(\n        '[data-catalog-secondary-group]',\n      );\n      const headingMatches =\n        matches(section.dataset.catalogSection!) ||\n        (group !== null && matches(group.dataset.catalogSecondaryGroup!));\n      let sectionEntries = 0;\n      for (const entry of section.querySelectorAll<HTMLElement>(\n        '[data-catalog-entry-name]',\n      )) {\n        const visible =\n          !query || headingMatches || matches(entry.dataset.catalogEntryName!);\n        entry.hidden = !visible;\n        if (visible) sectionEntries++;\n      }\n      section.hidden = Boolean(query) && sectionEntries === 0;\n      visibleEntries += sectionEntries;\n    }\n    for (const group of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-secondary-group]',\n    )) {\n      group.hidden =\n        Boolean(query) &&\n        !Array.from(\n          group.querySelectorAll<HTMLElement>('[data-catalog-section]'),\n        ).some((section) => !section.hidden);\n      const toggle = group.querySelector<HTMLElement>('[aria-expanded]');\n      const content = group.querySelector<HTMLElement>(\n        '[data-catalog-secondary-collapsed]',\n      );\n      if (toggle && content) {\n        const expanded = query\n          ? !group.hidden\n          : content.dataset.catalogSecondaryCollapsed !== 'true';\n        toggle.setAttribute('aria-expanded', String(expanded));\n        const arrow = toggle.querySelector<HTMLElement>(\n          '[data-component=\"disclosure-arrow\"]',\n        );\n        if (arrow) {\n          arrow.dataset.open = String(expanded);\n          arrow.dataset.direction = expanded ? 'down' : 'right';\n          arrow.style.setProperty(\n            '--_kui-disclosure-arrow-rotation',\n            expanded ? '90deg' : '0deg',\n          );\n        }\n      }\n    }\n    const empty = nav.querySelector<HTMLElement>(\n      '[data-catalog-filter-empty]',\n    )!;\n    empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);\n  };\n  const onInput = (event: Event) => {\n    const target = event.target as HTMLElement | null;\n    const editor = target?.closest<HTMLElement>('[data-catalog-filter]');\n    if (!editor || !root.contains(editor)) return;\n    filterValue = readTokenSearchField(editor).query;\n    query = filterValue.trim().toLocaleLowerCase();\n    apply();\n  };\n  const onClick = (event: Event) => {\n    const target = event.target as Element;\n    if (!target.closest('[data-action=\"catalog-clear-filter\"]')) return;\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]')!;\n    filterValue = '';\n    query = '';\n    editor.textContent = '';\n    apply();\n    editor.focus();\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('click', onClick);\n  const observer = new view.MutationObserver(() => {\n    if (query) apply();\n  });\n  observer.observe(root, { childList: true, subtree: true });\n  apply();\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('click', onClick);\n    observer.disconnect();\n  };\n}\n\n/**\n * Reveal one Catalog sidebar entry after the controlled render settles without\n * moving focus. Returns a cancellation function for rapid selection changes.\n */\nexport function revealCatalogEntry(\n  root: HTMLElement,\n  id: string,\n  {\n    block = 'nearest',\n    inline = 'nearest',\n    behavior = 'auto',\n    media = catalogDesktopMedia,\n  }: CatalogRevealOptions = {},\n): () => void {\n  const view = root.ownerDocument.defaultView;\n  if (!view || (media && !view.matchMedia(media).matches)) return () => {};\n  const frame = view.requestAnimationFrame(() => {\n    for (const item of root.querySelectorAll<HTMLElement>('[data-item-id]')) {\n      if (item.dataset.itemId !== id) continue;\n      item.scrollIntoView({ block, inline, behavior });\n      break;\n    }\n  });\n  return () => view.cancelAnimationFrame(frame);\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle, and\n * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * It also wires the scroll dividers below root (`wireScrollDividers`), so the\n * catalog's panes and every example in it show their chrome dividers only\n * while scrolled. Returns a disposer.\n */\nexport function wireCatalog(\n  root: HTMLElement,\n  {\n    onSelect,\n    onToggleSidebar,\n    onToggleTheme,\n    onToggleSecondary,\n    urlParam,\n    revealSelection,\n    selectAction = 'catalog-select',\n    toggleSidebarAction = 'catalog-toggle-sidebar',\n    toggleThemeAction = 'catalog-toggle-theme',\n    toggleSecondaryAction = 'catalog-toggle-secondary',\n    collapsed,\n    sidebarSize,\n    sidebarStorageKey,\n    id: catalogId = 'kui-catalog',\n  }: WireCatalogOptions,\n): () => void {\n  let cancelReveal: (() => void) | undefined;\n  const select = (id: string) => {\n    onSelect(id);\n    const view = root.ownerDocument.defaultView;\n    if (urlParam && view) {\n      const url = new URL(view.location.href);\n      url.searchParams.set(urlParam, id);\n      view.history.replaceState(null, '', url);\n    }\n    // An open overlay sidebar gives way to the entry just chosen from it.\n    const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);\n    if (\n      collapsed &&\n      !collapsed.peek() &&\n      rail &&\n      root.ownerDocument.defaultView?.getComputedStyle(rail).position ===\n        'absolute'\n    )\n      collapsed.value = true;\n    if (revealSelection) {\n      cancelReveal?.();\n      cancelReveal = revealCatalogEntry(\n        root,\n        id,\n        revealSelection === true ? undefined : revealSelection,\n      );\n    }\n  };\n\n  const disposers: Array<() => void> = [\n    wireScrollDividers(root),\n    wireCatalogFilter(root),\n    // Sidebar items AND the footer's related-entry popup-menu items both carry\n    // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n    delegate(\n      root,\n      'click',\n      `[data-action=\"${selectAction}\"]`,\n      (_event, element) => {\n        const id = (element as HTMLElement).dataset.itemId;\n        if (id) select(id);\n      },\n    ),\n  ];\n  if (onToggleSidebar) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () =>\n        onToggleSidebar(),\n      ),\n    );\n  }\n  if (onToggleTheme) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () =>\n        onToggleTheme(),\n      ),\n    );\n  }\n  if (onToggleSecondary) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () =>\n        onToggleSecondary(),\n      ),\n    );\n  }\n  if (collapsed || sidebarSize)\n    disposers.push(\n      wireWorkbench(root, {\n        id: catalogId,\n        panels: {\n          leftRail: {\n            collapsed,\n            size: sidebarSize,\n            storageKey: sidebarStorageKey,\n          },\n        },\n      }),\n    );\n  return () => {\n    cancelReveal?.();\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n}\n"]}

package/dist/wire-token-search-fields.js

@@ -1,4 +1,4 @@
-export { wireTokenSearchFields } from './chunk-62VMNBV2.js';
+export { wireTokenSearchFields } from './chunk-XNXKIPU5.js';
 
 
 

package/dist/workbench.js

@@ -1,4 +1,5 @@
-export { Workbench } from './chunk-LQKY5S4F.js';
+export { Workbench } from './chunk-EA5R75B5.js';
+
 
 
 

package/docs/anchored-surface.md

@@ -0,0 +1,51 @@
+# AnchoredSurface
+
+Use `openAnchoredSurface` from `@kerfjs/ui/anchored-surface` for interactive help
+or other arbitrary content beside a control. Use `openAnchoredSurfaceAt` for a
+pointer location. Import `@kerfjs/ui/styles.css` or the individual
+`@kerfjs/ui/anchored-surface.css` stylesheet. The surface draws its own raised
+background, border, inset, radius, shadow, and viewport size limit; the app
+supplies the content and decides when to open or close it.
+
+```tsx
+import { openAnchoredSurface } from '@kerfjs/ui/anchored-surface';
+
+const help = openAnchoredSurface(button, () => <HelpContent />, {
+  label: 'Pricing help',
+});
+// Close after an app action: help.close();
+```
+
+The returned `OverlayHandle` has `el`, idempotent `close()`, and `result`.
+The surface is a non-modal `role="dialog"` named by the required nonempty `label`.
+Focus moves to its first focusable descendant by default and returns to the
+focusable anchor on close (or the previously focused element for a nonfocusable
+anchor). Pass `initialFocus: false` for read-only
+help that leaves focus on its trigger. Escape and an outside press dismiss it;
+`dismiss`, `onDismiss`, and `outsideIgnore` can customize that behavior.
+`placement` (`bottom` or `top`), `align` (`start` or `end`), and `gap` feed the
+shared `kerfjs/overlay` positioning core: it flips vertically when the other
+side fits, clamps horizontally, and follows scroll and resize. Content taller
+than the viewport scrolls inside the surface.
+
+```tsx
+openAnchoredSurfaceAt(
+  { x: event.clientX, y: event.clientY, context: event.target as Element },
+  () => <ContextHelp />,
+  { label: 'Context help' },
+);
+```
+
+Pass `context` for a pointer opened inside a modal `<dialog>`. For app-owned
+dialogs, include `<div data-kerf-overlay-host data-morph-skip></div>` in the
+dialog markup so controls in the anchored surface stay interactive. Dialogs
+opened by `kerfjs/overlay` get that host automatically. The helper uses the
+browser top layer where available, and the shared overlay fallback elsewhere.
+Closing an anchor's modal dialog also closes the surface. The temporary pointer
+anchor is removed when the surface closes.
+
+Override `--kui-anchored-surface-inset` and
+`--kui-anchored-surface-radius` for a theme; content can compose any Kerf UI
+components without the surface applying action policy. Prefer `PopupMenu` for
+a typed command list and `Select` for choosing a persistent value. See
+[component selection](component-selection.md).

package/docs/catalog.md

@@ -37,7 +37,16 @@ description?, tags?, resources?, related? }] }`. Each entry becomes a sidebar
   the row's quiet status treatment for decision metadata such as `Discouraged`.
 - **`content`** — the rendered preview for the active entry. Keep a map of `id →
 () => SafeHtml` in your app and call `renderers[active]()` in your render.
-- **`brand`** — `{ title, subtitle?, logoUrl? }` for the sidebar header.
+- **`backgroundStyle`** — the preview stage backdrop: `checkerboard` (default,
+  8px squares),
+  `vertical-stripes` (alternating 8px bands), `surface`, or `sunken`. The two
+  patterned choices share the main Pane's sunken surface and reveal transparent
+  specimen edges; `surface` paints an
+  opaque backdrop. `sunken` leaves the stage
+  transparent so the main Pane's semitransparent sunken surface paints only once.
+  A controlled app may pass its current choice on each render.
+- **`brand`** — `{ title, subtitle?, logoUrl? }` for the sidebar header. The
+  optional logo paints through `ToolbarControlGroup.avatarImage`.
 - **`secondarySections`** — an optional secondary "ecosystem" group shown below the
   primary sections with a quieter treatment: `{ label, sections, collapsible?,
 expanded? }`. When `collapsible`, the label is a disclosure toggle controlling
@@ -74,11 +83,11 @@ chosen component.
 
 Classify every entry before rendering it:
 
-| Entry kind      | Preview purpose                                                                                         | Geometry overlay                                                                    |
-| --------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| **Component**   | Show one public component, its meaningful variants, and adverse states.                                 | `true`; the overlay inspects each selected specimen.                                |
-| **Composition** | Show components commonly used together in one focused container or surface.                             | `false`; child geometry remains unmarked so the composition can be read as a whole. |
-| **Recipe**      | Teach the recommended production approach to a specific task, including ownership and application glue. | `false`; child geometry remains unmarked so the complete approach can be read.      |
+| Entry kind      | Preview purpose                                                                                         |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
+| **Component**   | Show one public component, its meaningful variants, and adverse states.                                 |
+| **Composition** | Show components commonly used together in one focused container or surface.                             |
+| **Recipe**      | Teach the recommended production approach to a specific task, including ownership and application glue. |
 
 These three kinds are exhaustive. Theme/foundation showcases use a functional
 category, third-party specimens use source metadata, and state galleries retain
@@ -94,10 +103,6 @@ field exists. Show a `Composition` tag rather than repeating the word in a
 composition's display name; the generic `Catalog` accepts that through the
 entry's `tags` array.
 
-Keep `geometryOverlay` present and compute it from the active entry. Do not make
-it a permanent catalog-wide `true`, and do not give individual specimens their
-own overlay implementation.
-
 ### Required structure
 
 - `Catalog` is the one shell. The app owns active-entry state and passes one
@@ -149,29 +154,17 @@ const buttonPreview = (
     <CatalogExample label="Control" align="inline-control">
       <SegmentedControl id="view" label="View" value="list" choices={choices} />
     </CatalogExample>
-    <CatalogExample
-      label="Authoring note"
-      note="Explanatory chrome is not a specimen."
-      rootAttributes={{ "data-catalog-geometry-overlay-skip": "" }}
-    >
+    <CatalogExample label="Authoring note" note="Explain the specimen below.">
       <p>Use the public helper contract.</p>
     </CatalogExample>
   </CatalogExampleStack>
 );
 ```
 
-The overlay selects every immediate child of a `CatalogExample`; the helper
-marks its generated label and note so they are excluded automatically. It does
-not recursively promote a nested child to be the specimen. Outside an example
-row, it selects only top-level
-`[data-component]` roots in the canvas and ignores nested component descendants.
-These rules keep a row's label/group scaffolding out of the measurement and make
-the authored nesting determine exactly what is inspected.
-
 ### Metadata ownership
 
-Use `rootAttributes` on either helper for authoring metadata such as `data-demo`
-or `data-catalog-geometry-overlay-skip`; the metadata lands on that helper's
+Use `rootAttributes` on either helper for authoring metadata such as `data-demo`;
+the metadata lands on that helper's
 rendered root. The slot accepts only `data-*` strings. Structural
 `data-catalog-example`, `data-catalog-example-stack`, and `data-align` semantics
 remain helper-owned and are rejected case-insensitively at runtime, including
@@ -182,50 +175,21 @@ The app owns entry ids, `kind`, routing, sources, relationships, and test hooks.
 `Catalog.stageRootAttributes` places app-owned `data-*` state on the
 catalog-owned preview stage without an extra wrapper; `data-catalog-stage`
 remains protected.
+The stage is the main Pane's direct scrolling content, owns an 8px inset, and
+grows with tall specimens. The main Pane keeps its sunken appearance without a
+deep inset.
 The helpers own their structural markers, label/note anatomy, alignment marker,
 and private classes. Component metadata such as margin/border/padding ownership
-lives in `component-catalog.json`; do not infer or overwrite it from overlay
-pixels.
-
-### Geometry overlay and legend
+lives in `component-catalog.json`.
 
-Pass the conditional `geometryOverlay` boolean to `Catalog`, then call
-`wireCatalogGeometryOverlay(root)` once after the first render and retain its
-disposer alongside `wireCatalog`'s.
+### Component metadata
 
-| Overlay mark            | Meaning                                                                                              | It is not                                                                |
-| ----------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| Orange translucent band | A positive computed margin on the selected specimen, after subtracting the helper's alignment inset. | Padding, gap, or empty content. Zero and negative margins are not drawn. |
-| Accent solid edge       | The selected specimen's computed border widths and radius, except `none`/`hidden` styles.            | A focus ring, outline, child border, or metadata ownership claim.        |
-| Quiet dashed outline    | The border-box bound of a transparent selected specimen with no visible border.                      | A real CSS border, padding edge, or proof that the specimen owns size.   |
-
-The overlay recomputes from live rendered styles when specimens resize, preview
-markup changes, theme/root attributes change, or loaded/inline stylesheets
-change. Component CSS is therefore the source of truth; do not duplicate margin
-or border values in demo data. The overlay does not visualize padding, gaps,
-negative/zero margins, scroll overflow, hit targets, or nested descendants.
-Inspect computed styles and the machine-readable `geometry` metadata for those
-facts. Opaque borderless specimens do not receive the dashed bound.
-
-```tsx
-<Catalog
-  {...props}
-  geometryOverlay={activeEntry.kind === "component"}
-  content={renderers[active.value]()}
-/>
-```
+Machine-readable geometry ownership metadata identifies whether the component,
+its parent, or its children are responsible for margin, border, and padding.
+Keep that metadata in `component-catalog.json` and use the rendered specimen to
+review the actual appearance.
 
-Put `rootAttributes={{ "data-catalog-geometry-overlay-skip": "" }}` on a
-`CatalogExample` or `CatalogExampleStack` only when that whole subtree is
-explanatory chrome rather than a specimen. The marker excludes the marked root
-and every descendant from selection; it does not merely hide one band. It is
-normally unnecessary in a composition because the active entry already sets the
-global overlay to `false`.
-
-Use the overlay together with machine-readable geometry ownership metadata; the
-overlay verifies what is rendered, while metadata tells people and AI tools
-whether the component, its parent, or its children are responsible for margin,
-border, and padding. Catalogs for downstream components should conform to the
+Catalogs for downstream components should conform to the
 [`component-catalog-extension.schema.json`](../ai/component-catalog-extension.schema.json)
 contract and can start from the checked
 [`component-catalog-extension.json`](./examples/component-catalog-extension.json)
@@ -275,8 +239,8 @@ facts that source can prove without guessing at rendered intent:
 
 - focused component routes import and use `CatalogExampleStack` and
   `CatalogExample` from the public package;
-- focused route metadata uses the helpers' `rootAttributes` slot, example rows
-  are not empty, and composition routes do not add redundant skip markers;
+- focused route metadata uses the helpers' `rootAttributes` slot and example rows
+  are not empty;
 - every `@kerfjs/ui` import is a published package export and relative imports
   do not reach into `ui/src`;
 - focused demos have no relative stylesheet imports, inline style attributes,
@@ -286,20 +250,19 @@ facts that source can prove without guessing at rendered intent:
   analyzer) import no stylesheet other than public `@kerfjs/ui` CSS, set no
   inline style, and name only published layout and Web Awesome classes; each
   recipe declares its catalog frame through an exported `presentation`; and
-- the shell derives both geometry-overlay enablement and documented demo mode
-  from the active entry's source and kind.
+- the shell derives the documented demo mode from the active entry's kind.
 
 The gate deliberately does not infer component ownership from arbitrary class
-names, margins, borders, or nested descendants. Runtime selection and geometry
-remain the browser suite's job.
+names, margins, borders, or nested descendants. Runtime appearance remains the
+browser suite's job.
 
 A focused route may bypass the two public layout helpers only when the route's
 stage geometry is itself the reviewed specimen. Add the narrow waiver to
 [`catalog-conformance-exceptions.json`](../ux-demo/catalog-conformance-exceptions.json)
 with the exact route, source file, stable diagnostic ids, a substantive reason,
 and the reviewing `KF-*` ticket. Only helper/metadata rules are waivable;
-private imports, local styling, private markup, empty examples, composition overlay drift, and
-shell-mode drift always fail. The gate rejects duplicate, malformed, unused,
+private imports, local styling, private markup, empty examples, and shell-mode
+drift always fail. The gate rejects duplicate, malformed, unused,
 and stale exceptions, so delete a waiver when its route adopts the standard
 helpers.
 
@@ -330,7 +293,6 @@ import {
 import {
   revealCatalogEntry,
   wireCatalog,
-  wireCatalogGeometryOverlay,
 } from "@kerfjs/ui/wire-catalog";
 // A CSS-aware (browser-condition) bundler loads the Catalog's CSS with its import.
 
@@ -375,11 +337,7 @@ const renderers: Record<string, () => SafeHtml> = {
       <CatalogExample label="Default" align="inline-control">
         <Button label="Save" />
       </CatalogExample>
-      <CatalogExample
-        label="Authoring note"
-        note="This explanatory row is deliberately excluded from inspection."
-        rootAttributes={{ "data-catalog-geometry-overlay-skip": "" }}
-      >
+      <CatalogExample label="Authoring note" note="Explain the specimen below.">
         <p>The application owns product copy and actions.</p>
       </CatalogExample>
     </CatalogExampleStack>
@@ -402,7 +360,6 @@ const initial =
 const active = signal(initial);
 const collapsed = signal(false);
 const theme = signal<"light" | "dark">("light");
-const activeEntry = () => entries.find(({ id }) => id === active.value) ?? entries[0];
 
 const app = document.getElementById("app")!;
 mount(app, () => (
@@ -413,7 +370,6 @@ mount(app, () => (
     content={renderers[active.value]?.() ?? <></>}
     collapsed={collapsed.value}
     theme={theme.value}
-    geometryOverlay={activeEntry().kind === "component"}
   />
 ));
 
@@ -431,7 +387,6 @@ wireCatalog(app, {
   urlParam: "c", // mirror the active id into ?c=<id>
   revealSelection: true, // reveal long desktop sidebars without moving focus
 });
-wireCatalogGeometryOverlay(app);
 
 // Optional for an initial deep link whose row may start outside the viewport.
 revealCatalogEntry(app, initial, { block: "center" });
@@ -484,7 +439,7 @@ matching options on `wireCatalog`) if they collide with your own action table.
 
 `Catalog` composes public components (`Workbench`, `Pane`, `Toolbar`, `List`,
 `ListHeader`, `ListItem`, `ListInsetText`, `Text`, …) and owns only the preview stage
-(the checkerboard and centered canvas), the geometry overlay, the example viewport
+(the checkerboard and left-aligned canvas), the example viewport
 options, and the brand mark's size. A bundler that honors the `browser` export
 condition loads the Catalog's stylesheets and those of every component it renders
 internally with the `@kerfjs/ui/catalog` import alone — no dependence on which other