@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/wire-catalog.d.ts

@@ -1,3 +1,22 @@
+import { Signal } from 'kerfjs';
+import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
+import './toolbar.js';
+import './semantic-content-BbzjvSu9.js';
+import './sides-BPSWde0A.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './workbench.js';
+import './nav-stack-VXTumzKa.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './css-values.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
 interface WireCatalogOptions {
     /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
     onSelect: (id: string) => void;
@@ -5,6 +24,17 @@ interface WireCatalogOptions {
     onToggleSidebar?: () => void;
     /** Invoked when the theme toggle is activated. */
     onToggleTheme?: () => void;
+    /** Report a contrast-toggle press; the app updates its signal and applies the preference. */
+    onToggleContrast?: () => void;
+    /** Report a reduced-motion-toggle press; the app updates its signal and applies the preference. */
+    onToggleMotion?: () => void;
+    /** Report a preview background choice; the app updates `backgroundStyle`. */
+    onSelectBackground?: (style: CatalogBackgroundStyle) => void;
+    /**
+     * Invoked when the settings pane toggle is activated. With
+     * `settingsCollapsed`, `wireCatalog` has already flipped the signal.
+     */
+    onToggleSettings?: () => void;
     /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
     onToggleSecondary?: () => void;
     /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
@@ -17,7 +47,58 @@ interface WireCatalogOptions {
     selectAction?: string;
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
+    toggleContrastAction?: string;
+    toggleMotionAction?: string;
+    selectBackgroundAction?: string;
     toggleSecondaryAction?: string;
+    toggleSettingsAction?: string;
+    /**
+     * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
+     * sidebar is wired like any Workbench rail: it becomes a transient overlay
+     * on a small screen (collapsed as the breakpoint applies, closed on Escape
+     * or a press outside, focus handed back), and choosing an entry from the
+     * open overlay closes it.
+     */
+    collapsed?: Signal<boolean>;
+    /**
+     * The app-owned sidebar width signal for a Catalog rendered with
+     * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed
+     * drag or keyboard resize is written to it.
+     */
+    sidebarSize?: Signal<number>;
+    /**
+     * With `sidebarSize`, load and save the width under this storage key so the
+     * catalog remembers the user's sidebar width.
+     */
+    sidebarStorageKey?: string;
+    /**
+     * The settings pane's app-owned collapsed flag, rendered as the Catalog's
+     * `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each
+     * press flips the signal) and wires the pane like any Workbench rail: a
+     * transient overlay on a small screen (collapsed as the breakpoint applies,
+     * closed on Escape or a press outside, focus handed back).
+     */
+    settingsCollapsed?: Signal<boolean>;
+    /**
+     * The app-owned settings pane width signal for a Catalog rendered with
+     * `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each
+     * committed drag or keyboard resize is written to it.
+     */
+    settingsSize?: Signal<number>;
+    /**
+     * With `settingsSize`, load and save the width under this storage key so
+     * the catalog remembers the user's settings pane width.
+     */
+    settingsStorageKey?: string;
+    /** The Catalog's `id`, when it is not the default `kui-catalog`. */
+    id?: string;
+    /**
+     * Ask the page's server once for its UX Review project directory (served by
+     * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the
+     * app can render the Catalog with `uxReview`. Never called on static
+     * hosting or a server without the plugin.
+     */
+    onUxReviewProject?: (projectDirectory: string) => void;
 }
 interface CatalogRevealOptions {
     /** Scroll alignment within the sidebar. Default `'nearest'`. */
@@ -37,21 +118,15 @@ interface CatalogRevealOptions {
  * moving focus. Returns a cancellation function for rapid selection changes.
  */
 declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
-/**
- * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
- * Specimens receive computed border highlights (or a dashed bound when they
- * have no border and are transparent), while positive computed margins use
- * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
- * Returns a disposer.
- */
-declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
 /**
  * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
- * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
- * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
+ * item selection (and the related-entry popup menu), the sidebar collapse toggle,
+ * the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
  * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
- * Returns a disposer.
+ * It also wires the scroll dividers below root (`wireScrollDividers`), so the
+ * catalog's panes and every example in it show their chrome dividers only
+ * while scrolled. Returns a disposer.
  */
-declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, }: WireCatalogOptions): () => void;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
 
-export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };
+export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };

package/dist/wire-catalog.js

@@ -1,244 +1,195 @@
+import { wireWorkbench } from './chunk-QLA25V2K.js';
+import { wireScrollDividers } from './chunk-CXZXHZTR.js';
+
+import { loadUxReviewProject } from './chunk-6C6DLP3W.js';
+
+import { readTokenSearchField } from './chunk-MF6ZUUJZ.js';
+
+
+
 import { delegate } from 'kerfjs';
 
-// src/wire-catalog.ts
-var catalogDesktopMedia = "(min-width: 52.01rem)";
-function revealCatalogEntry(root, id, {
-  block = "nearest",
-  inline = "nearest",
-  behavior = "auto",
-  media = catalogDesktopMedia
-} = {}) {
-  const view = root.ownerDocument.defaultView;
-  if (!view || media && !view.matchMedia(media).matches) return () => {
-  };
-  const frame = view.requestAnimationFrame(() => {
-    for (const item of root.querySelectorAll("[data-item-id]")) {
-      if (item.dataset.itemId !== id) continue;
-      item.scrollIntoView({ block, inline, behavior });
-      break;
-    }
-  });
-  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]"
-  );
+var catalogDesktopMedia = "(min-width: 44.01rem)";
+function wireCatalogFilter(root) {
   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;
+  let filterValue = "";
+  let query = "";
+  let currentEditor = null;
+  const matches = (name) => name.toLocaleLowerCase().includes(query);
+  const apply = () => {
+    const editor = root.querySelector("[data-catalog-filter]");
+    const nav = root.querySelector("[data-catalog-sidebar]");
+    if (!editor || !nav) return;
+    if (editor !== currentEditor) {
+      currentEditor = editor;
+      if (readTokenSearchField(editor).query !== filterValue)
+        editor.textContent = filterValue;
     }
-    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 field = editor.closest(
+      '[data-component="token-search-field"]'
+    );
+    field.dataset.catalogFilterActive = String(Boolean(query));
+    const placeholderVisible = String(!filterValue);
+    if (field.dataset.placeholderVisible !== placeholderVisible)
+      field.dataset.placeholderVisible = placeholderVisible;
+    const clear = field.querySelector(
+      '[data-action="catalog-clear-filter"]'
+    );
+    clear.style.display = query ? "" : "none";
+    nav.dataset.catalogFilterActive = String(Boolean(query));
+    let visibleEntries = 0;
+    for (const section of nav.querySelectorAll(
+      "[data-catalog-section]"
+    )) {
+      const group = section.closest(
+        "[data-catalog-secondary-group]"
       );
-      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 headingMatches = matches(section.dataset.catalogSection) || group !== null && matches(group.dataset.catalogSecondaryGroup);
+      let sectionEntries = 0;
+      for (const entry of section.querySelectorAll(
+        "[data-catalog-entry-name]"
+      )) {
+        const visible = !query || headingMatches || matches(entry.dataset.catalogEntryName);
+        entry.hidden = !visible;
+        if (visible) sectionEntries++;
       }
-      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
+      section.hidden = Boolean(query) && sectionEntries === 0;
+      visibleEntries += sectionEntries;
+    }
+    for (const group of nav.querySelectorAll(
+      "[data-catalog-secondary-group]"
+    )) {
+      group.hidden = Boolean(query) && !Array.from(
+        group.querySelectorAll("[data-catalog-section]")
+      ).some((section) => !section.hidden);
+      const toggle = group.querySelector("[aria-expanded]");
+      const content = group.querySelector(
+        "[data-catalog-secondary-collapsed]"
+      );
+      if (toggle && content) {
+        const expanded = query ? !group.hidden : content.dataset.catalogSecondaryCollapsed !== "true";
+        toggle.setAttribute("aria-expanded", String(expanded));
+        const arrow = toggle.querySelector(
+          '[data-component="disclosure-arrow"]'
         );
-        margin.dataset.catalogGeometrySpecimen = String(specimenIndex);
-        margin.dataset.catalogGeometrySide = side;
-        layer.append(margin);
+        if (arrow) {
+          arrow.dataset.open = String(expanded);
+          arrow.dataset.direction = expanded ? "down" : "right";
+          arrow.style.setProperty(
+            "--_kui-disclosure-arrow-rotation",
+            expanded ? "90deg" : "0deg"
+          );
+        }
       }
     }
+    const empty = nav.querySelector(
+      "[data-catalog-filter-empty]"
+    );
+    empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);
   };
-  const schedule = () => {
-    if (!frame) frame = view.requestAnimationFrame(render);
+  const onInput = (event) => {
+    const target = event.target;
+    const editor = target?.closest("[data-catalog-filter]");
+    if (!editor || !root.contains(editor)) return;
+    filterValue = readTokenSearchField(editor).query;
+    query = filterValue.trim().toLocaleLowerCase();
+    apply();
   };
-  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 onClick = (event) => {
+    const target = event.target;
+    if (!target.closest('[data-action="catalog-clear-filter"]')) return;
+    const editor = root.querySelector("[data-catalog-filter]");
+    filterValue = "";
+    query = "";
+    editor.textContent = "";
+    apply();
+    editor.focus();
   };
-  const mutationObserver = new view.MutationObserver((records) => {
-    if (records.some(
-      ({ target }) => target !== layer && !layer.contains(target)
-    ))
-      schedule();
+  root.addEventListener("input", onInput);
+  root.addEventListener("click", onClick);
+  const observer = new view.MutationObserver(() => {
+    if (filterValue) apply();
   });
-  mutationObserver.observe(catalog, {
+  observer.observe(root, {
     attributes: true,
+    attributeFilter: ["data-placeholder-visible"],
     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();
+  apply();
   return () => {
-    if (frame) view.cancelAnimationFrame(frame);
-    resizeObserver.disconnect();
-    mutationObserver.disconnect();
-    documentHead?.removeEventListener("load", stylesheetLoaded, true);
-    view.removeEventListener("resize", schedule);
-    layer.replaceChildren();
+    root.removeEventListener("input", onInput);
+    root.removeEventListener("click", onClick);
+    observer.disconnect();
   };
 }
+function revealCatalogEntry(root, id, {
+  block = "nearest",
+  inline = "nearest",
+  behavior = "auto",
+  media = catalogDesktopMedia
+} = {}) {
+  const view = root.ownerDocument.defaultView;
+  if (!view || media && !view.matchMedia(media).matches) return () => {
+  };
+  const frame = view.requestAnimationFrame(() => {
+    for (const item of root.querySelectorAll("[data-item-id]")) {
+      if (item.dataset.itemId !== id) continue;
+      item.scrollIntoView({ block, inline, behavior });
+      break;
+    }
+  });
+  return () => view.cancelAnimationFrame(frame);
+}
 function wireCatalog(root, {
   onSelect,
   onToggleSidebar,
   onToggleTheme,
+  onToggleContrast,
+  onToggleMotion,
+  onSelectBackground,
   onToggleSecondary,
+  onToggleSettings,
   urlParam,
   revealSelection,
   selectAction = "catalog-select",
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
-  toggleSecondaryAction = "catalog-toggle-secondary"
+  toggleContrastAction = "catalog-toggle-contrast",
+  toggleMotionAction = "catalog-toggle-motion",
+  selectBackgroundAction = "catalog-select-background",
+  toggleSecondaryAction = "catalog-toggle-secondary",
+  toggleSettingsAction = "catalog-toggle-settings",
+  collapsed,
+  sidebarSize,
+  sidebarStorageKey,
+  settingsCollapsed,
+  settingsSize,
+  settingsStorageKey,
+  id: catalogId = "kui-catalog",
+  onUxReviewProject
 }) {
+  let disposed = false;
+  const view = root.ownerDocument.defaultView;
+  if (onUxReviewProject && view)
+    void loadUxReviewProject(
+      view.location.href,
+      (input, init) => view.fetch(input, init)
+    ).then((directory) => {
+      if (directory && !disposed) onUxReviewProject(directory);
+    });
   let cancelReveal;
   const select = (id) => {
     onSelect(id);
-    const view = root.ownerDocument.defaultView;
-    if (urlParam && view) {
-      const url = new URL(view.location.href);
+    const view2 = root.ownerDocument.defaultView;
+    if (urlParam && view2) {
+      const url = new URL(view2.location.href);
       url.searchParams.set(urlParam, id);
-      view.history.replaceState(null, "", url);
+      view2.history.replaceState(null, "", url);
     }
+    const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);
+    if (collapsed && !collapsed.peek() && rail && root.ownerDocument.defaultView?.getComputedStyle(rail).position === "absolute")
+      collapsed.value = true;
     if (revealSelection) {
       cancelReveal?.();
       cancelReveal = revealCatalogEntry(
@@ -249,6 +200,8 @@ function wireCatalog(root, {
     }
   };
   const disposers = [
+    wireScrollDividers(root),
+    wireCatalogFilter(root),
     // Sidebar items AND the footer's related-entry popup-menu items both carry
     // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.
     delegate(
@@ -281,6 +234,40 @@ function wireCatalog(root, {
       )
     );
   }
+  if (onToggleContrast) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleContrastAction}"]`,
+        () => onToggleContrast()
+      )
+    );
+  }
+  if (onToggleMotion) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleMotionAction}"]`,
+        () => onToggleMotion()
+      )
+    );
+  }
+  if (onSelectBackground) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${selectBackgroundAction}"]`,
+        (_event, element) => {
+          const style = element.getAttribute("data-background-choice");
+          if (style === "checkerboard" || style === "vertical-stripes" || style === "layout-guide" || style === "surface" || style === "sunken")
+            onSelectBackground(style);
+        }
+      )
+    );
+  }
   if (onToggleSecondary) {
     disposers.push(
       delegate(
@@ -291,12 +278,59 @@ function wireCatalog(root, {
       )
     );
   }
+  if (settingsCollapsed || onToggleSettings) {
+    disposers.push(
+      delegate(root, "click", `[data-action="${toggleSettingsAction}"]`, () => {
+        if (settingsCollapsed)
+          settingsCollapsed.value = !settingsCollapsed.peek();
+        onToggleSettings?.();
+      })
+    );
+  }
+  const panels = {};
+  if (collapsed || sidebarSize)
+    panels.leftRail = {
+      collapsed,
+      size: sidebarSize,
+      storageKey: sidebarStorageKey
+    };
+  if (settingsCollapsed || settingsSize)
+    panels.rightRail = {
+      collapsed: settingsCollapsed,
+      size: settingsSize,
+      storageKey: settingsStorageKey
+    };
+  if (panels.leftRail || panels.rightRail)
+    disposers.push(wireWorkbench(root, { id: catalogId, panels }));
+  if (onUxReviewProject)
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        'a.kui-toolbar-action-link[href^="uxreview://capture"]',
+        (_event, element) => {
+          const link = element;
+          const url = new URL(link.href);
+          const context = (url.searchParams.get("context") ?? "").replace(
+            /\nPage: [^\n]*$/,
+            ""
+          );
+          url.searchParams.set(
+            "context",
+            `${context}
+Page: ${link.ownerDocument.location.href}`
+          );
+          link.href = url.href;
+        }
+      )
+    );
   return () => {
+    disposed = true;
     cancelReveal?.();
     for (const dispose of disposers.splice(0)) dispose();
   };
 }
 
-export { revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };
+export { revealCatalogEntry, wireCatalog };
 
 //# sourceMappingURL=wire-catalog.js.map