@canopy-iiif/app 0.9.2 → 0.9.4

package/ui/dist/index.mjs

@@ -226,8 +226,621 @@ function Grid({
   ));
 }
 
+// ui/src/layout/CanopyHeader.jsx
+import React11 from "react";
+
+// ui/src/search/SearchPanel.jsx
+import React8 from "react";
+
+// ui/src/Icons.jsx
+import React5 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React5.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React5.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+
+// ui/src/search/SearchPanelForm.jsx
+import React6 from "react";
+function readBasePath() {
+  const normalize = (val) => {
+    const raw = typeof val === "string" ? val.trim() : "";
+    if (!raw) return "";
+    return raw.replace(/\/+$/, "");
+  };
+  try {
+    if (typeof window !== "undefined" && window.CANOPY_BASE_PATH != null) {
+      const fromWindow = normalize(window.CANOPY_BASE_PATH);
+      if (fromWindow) return fromWindow;
+    }
+  } catch (_) {
+  }
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.CANOPY_BASE_PATH != null) {
+      const fromGlobal = normalize(globalThis.CANOPY_BASE_PATH);
+      if (fromGlobal) return fromGlobal;
+    }
+  } catch (_) {
+  }
+  try {
+    if (typeof process !== "undefined" && process.env && process.env.CANOPY_BASE_PATH) {
+      const fromEnv = normalize(process.env.CANOPY_BASE_PATH);
+      if (fromEnv) return fromEnv;
+    }
+  } catch (_) {
+  }
+  return "";
+}
+function isAbsoluteUrl(href) {
+  try {
+    return /^https?:/i.test(String(href || ""));
+  } catch (_) {
+    return false;
+  }
+}
+function resolveSearchPath(pathValue) {
+  let raw = typeof pathValue === "string" ? pathValue.trim() : "";
+  if (!raw) raw = "/search";
+  if (isAbsoluteUrl(raw)) return raw;
+  const normalizedPath = raw.startsWith("/") ? raw : `/${raw}`;
+  const base = readBasePath();
+  if (!base) return normalizedPath;
+  const baseWithLead = base.startsWith("/") ? base : `/${base}`;
+  const baseTrimmed = baseWithLead.replace(/\/+$/, "");
+  if (!baseTrimmed) return normalizedPath;
+  if (normalizedPath === baseTrimmed || normalizedPath.startsWith(`${baseTrimmed}/`)) {
+    return normalizedPath;
+  }
+  const pathTrimmed = normalizedPath.replace(/^\/+/, "");
+  return `${baseTrimmed}/${pathTrimmed}`;
+}
+function SearchPanelForm(props = {}) {
+  const {
+    placeholder = "Search\u2026",
+    buttonLabel = "Search",
+    label,
+    searchPath = "/search",
+    inputId: inputIdProp,
+    clearLabel = "Clear search"
+  } = props || {};
+  const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
+  const action = React6.useMemo(
+    () => resolveSearchPath(searchPath),
+    [searchPath]
+  );
+  const autoId = typeof React6.useId === "function" ? React6.useId() : void 0;
+  const [fallbackId] = React6.useState(
+    () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
+  );
+  const inputId = inputIdProp || autoId || fallbackId;
+  const inputRef = React6.useRef(null);
+  const [hasValue, setHasValue] = React6.useState(false);
+  const focusInput = React6.useCallback(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    if (document.activeElement === el) return;
+    try {
+      el.focus({ preventScroll: true });
+    } catch (_) {
+      try {
+        el.focus();
+      } catch (_2) {
+      }
+    }
+  }, []);
+  const handlePointerDown = React6.useCallback(
+    (event) => {
+      const target = event.target;
+      if (target && typeof target.closest === "function") {
+        if (target.closest("[data-canopy-search-form-trigger]")) return;
+        if (target.closest("[data-canopy-search-form-clear]")) return;
+      }
+      event.preventDefault();
+      focusInput();
+    },
+    [focusInput]
+  );
+  React6.useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    if (el.value && el.value.trim()) {
+      setHasValue(true);
+    }
+  }, []);
+  const handleInputChange = React6.useCallback((event) => {
+    var _a;
+    const nextHasValue = Boolean(
+      ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim()
+    );
+    setHasValue(nextHasValue);
+  }, []);
+  const handleClear = React6.useCallback((event) => {
+  }, []);
+  const handleClearKey = React6.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClear(event);
+      }
+    },
+    [handleClear]
+  );
+  return /* @__PURE__ */ React6.createElement(
+    "form",
+    {
+      action,
+      method: "get",
+      role: "search",
+      autoComplete: "off",
+      spellCheck: "false",
+      className: "canopy-search-form canopy-search-form-shell",
+      onPointerDown: handlePointerDown,
+      "data-has-value": hasValue ? "1" : "0"
+    },
+    /* @__PURE__ */ React6.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React6.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        id: inputId,
+        type: "search",
+        name: "q",
+        inputMode: "search",
+        "data-canopy-search-form-input": true,
+        placeholder,
+        className: "canopy-search-form__input",
+        "aria-label": "Search",
+        ref: inputRef,
+        onChange: handleInputChange,
+        onInput: handleInputChange
+      }
+    )),
+    hasValue ? /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-search-form__clear",
+        onClick: handleClear,
+        onPointerDown: (event) => event.stopPropagation(),
+        onKeyDown: handleClearKey,
+        "aria-label": clearLabel,
+        "data-canopy-search-form-clear": true
+      },
+      "\xD7"
+    ) : null,
+    /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        type: "submit",
+        "data-canopy-search-form-trigger": "submit",
+        className: "canopy-search-form__submit"
+      },
+      /* @__PURE__ */ React6.createElement("span", null, text),
+      /* @__PURE__ */ React6.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React6.createElement("span", null, "\u2318"), /* @__PURE__ */ React6.createElement("span", null, "K"))
+    )
+  );
+}
+
+// ui/src/search/SearchPanelTeaserResults.jsx
+import React7 from "react";
+function SearchPanelTeaserResults(props = {}) {
+  const { style, className } = props || {};
+  const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      "data-canopy-search-form-panel": true,
+      className: classes || void 0,
+      style
+    },
+    /* @__PURE__ */ React7.createElement("div", { id: "cplist" })
+  );
+}
+
+// ui/src/search/SearchPanel.jsx
+function SearchPanel(props = {}) {
+  const {
+    placeholder = "Search\u2026",
+    hotkey = "mod+k",
+    maxResults = 8,
+    groupOrder = ["work", "docs", "page"],
+    // Kept for backward compat; form always renders submit
+    button = true,
+    // eslint-disable-line no-unused-vars
+    buttonLabel = "Search",
+    label,
+    searchPath = "/search"
+  } = props || {};
+  const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
+  const resolvedSearchPath = resolveSearchPath(searchPath);
+  const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
+  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React8.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React8.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React8.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+}
+
+// ui/src/layout/CanopyBrand.jsx
+import React9 from "react";
+function CanopyBrand(props = {}) {
+  const {
+    labelId,
+    label = "Canopy IIIF",
+    href = "/",
+    className,
+    Logo
+  } = props || {};
+  const spanProps = labelId ? { id: labelId } : {};
+  const classes = ["canopy-logo", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React9.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React9.createElement(Logo, null) : null, /* @__PURE__ */ React9.createElement("span", { ...spanProps }, label));
+}
+
+// ui/src/layout/CanopyModal.jsx
+import React10 from "react";
+function CanopyModal(props = {}) {
+  const {
+    id,
+    variant,
+    open = false,
+    labelledBy,
+    label,
+    logo: Logo,
+    href = "/",
+    closeLabel = "Close",
+    closeDataAttr,
+    onClose,
+    onBackgroundClick,
+    bodyClassName,
+    padded = true,
+    className,
+    children
+  } = props;
+  const rootClassName = ["canopy-modal", variant ? `canopy-modal--${variant}` : null, className].filter(Boolean).join(" ");
+  const modalProps = {
+    id,
+    className: rootClassName,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-hidden": open ? "false" : "true",
+    "data-open": open ? "true" : "false"
+  };
+  if (variant) modalProps["data-canopy-modal"] = variant;
+  const resolvedLabelId = labelledBy || (label ? `${variant || "modal"}-label` : void 0);
+  if (resolvedLabelId) modalProps["aria-labelledby"] = resolvedLabelId;
+  if (typeof onBackgroundClick === "function") {
+    modalProps.onClick = (event) => {
+      if (event.target === event.currentTarget) onBackgroundClick(event);
+    };
+  }
+  const closeButtonProps = {
+    type: "button",
+    className: "canopy-modal__close",
+    "aria-label": closeLabel
+  };
+  if (typeof closeDataAttr === "string" && closeDataAttr) {
+    closeButtonProps["data-canopy-header-close"] = closeDataAttr;
+  }
+  if (typeof onClose === "function") {
+    closeButtonProps.onClick = onClose;
+  }
+  const bodyClasses = ["canopy-modal__body"];
+  if (padded) bodyClasses.push("canopy-modal__body--padded");
+  if (bodyClassName) bodyClasses.push(bodyClassName);
+  const bodyClassNameValue = bodyClasses.join(" ");
+  return /* @__PURE__ */ React10.createElement("div", { ...modalProps }, /* @__PURE__ */ React10.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React10.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: "canopy-modal__close-icon"
+    },
+    /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React10.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React10.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React10.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React10.createElement(
+    CanopyBrand,
+    {
+      labelId: resolvedLabelId,
+      label,
+      href,
+      Logo,
+      className: "canopy-modal__brand-link"
+    }
+  )) : null, children)));
+}
+
+// ui/src/layout/CanopyHeader.jsx
+function HeaderScript() {
+  const code = `
+(function () {
+  if (typeof window === 'undefined') return;
+
+  var doc = document;
+  var body = doc.body;
+  var root = doc.documentElement;
+
+  function ready(fn) {
+    if (doc.readyState === 'loading') {
+      doc.addEventListener('DOMContentLoaded', fn, { once: true });
+    } else {
+      fn();
+    }
+  }
+
+  ready(function () {
+    var header = doc.querySelector('.canopy-header');
+    if (!header) return;
+
+    var NAV_ATTR = 'data-mobile-nav';
+    var SEARCH_ATTR = 'data-mobile-search';
+
+    function modalFor(type) {
+      return doc.querySelector('[data-canopy-modal="' + type + '"]');
+    }
+
+    function each(list, fn) {
+      if (!list || typeof fn !== 'function') return;
+      Array.prototype.forEach.call(list, fn);
+    }
+
+    function setExpanded(type, expanded) {
+      var toggles = header.querySelectorAll('[data-canopy-header-toggle="' + type + '"]');
+      each(toggles, function (btn) {
+        btn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+      });
+      var modal = modalFor(type);
+      if (modal) {
+        modal.setAttribute('data-open', expanded ? 'true' : 'false');
+        modal.setAttribute('aria-hidden', expanded ? 'false' : 'true');
+      }
+    }
+
+    function lockScroll(shouldLock) {
+      if (!body) return;
+      if (shouldLock) {
+        if (!body.dataset.canopyScrollLock) {
+          body.dataset.canopyScrollPrevOverflow = body.style.overflow || '';
+          if (root && root.dataset) {
+            root.dataset.canopyScrollPrevOverflow = root.style.overflow || '';
+          }
+        }
+        body.dataset.canopyScrollLock = '1';
+        body.style.overflow = 'hidden';
+        if (root) root.style.overflow = 'hidden';
+      } else {
+        if (body.dataset.canopyScrollLock) {
+          delete body.dataset.canopyScrollLock;
+          body.style.overflow = body.dataset.canopyScrollPrevOverflow || '';
+          delete body.dataset.canopyScrollPrevOverflow;
+        }
+        if (root && root.dataset) {
+          root.style.overflow = root.dataset.canopyScrollPrevOverflow || '';
+          delete root.dataset.canopyScrollPrevOverflow;
+        }
+      }
+    }
+
+    function stateFor(type) {
+      if (type === 'nav') return header.getAttribute(NAV_ATTR);
+      if (type === 'search') return header.getAttribute(SEARCH_ATTR);
+      return 'closed';
+    }
+
+    function focusSearchForm() {
+      var input = header.querySelector('[data-canopy-search-form-input]');
+      if (!input) return;
+      var raf = typeof window !== 'undefined' && window.requestAnimationFrame;
+      (raf || function (fn) { return setTimeout(fn, 16); })(function () {
+        try {
+          input.focus({ preventScroll: true });
+        } catch (_) {
+          try { input.focus(); } catch (_) {}
+        }
+      });
+    }
+
+    function focusNavMenu() {
+      var modal = modalFor('nav');
+      if (!modal) return;
+      var target = modal.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])');
+      if (!target) return;
+      var raf = typeof window !== 'undefined' && window.requestAnimationFrame;
+      (raf || function (fn) { return setTimeout(fn, 16); })(function () {
+        try {
+          target.focus({ preventScroll: true });
+        } catch (_) {
+          try { target.focus(); } catch (_) {}
+        }
+      });
+    }
+
+    function setState(type, next) {
+      if (type === 'nav') header.setAttribute(NAV_ATTR, next);
+      if (type === 'search') header.setAttribute(SEARCH_ATTR, next);
+      setExpanded(type, next === 'open');
+      var navOpen = header.getAttribute(NAV_ATTR) === 'open';
+      var searchOpen = header.getAttribute(SEARCH_ATTR) === 'open';
+      lockScroll(navOpen || searchOpen);
+    }
+
+    function toggle(type, force) {
+      var current = stateFor(type) === 'open';
+      var shouldOpen = typeof force === 'boolean' ? force : !current;
+      if (shouldOpen && type === 'nav') setState('search', 'closed');
+      if (shouldOpen && type === 'search') setState('nav', 'closed');
+      setState(type, shouldOpen ? 'open' : 'closed');
+      if (type === 'search' && shouldOpen) focusSearchForm();
+      if (type === 'nav' && shouldOpen) focusNavMenu();
+    }
+
+    each(header.querySelectorAll('[data-canopy-header-toggle]'), function (btn) {
+      btn.addEventListener('click', function (event) {
+        event.preventDefault();
+        var type = btn.getAttribute('data-canopy-header-toggle');
+        if (!type) return;
+        toggle(type);
+      });
+    });
+
+    each(doc.querySelectorAll('[data-canopy-header-close]'), function (btn) {
+      btn.addEventListener('click', function () {
+        var type = btn.getAttribute('data-canopy-header-close');
+        if (!type) return;
+        toggle(type, false);
+      });
+    });
+
+    var navModal = modalFor('nav');
+    if (navModal) {
+      navModal.addEventListener('click', function (event) {
+        if (event.target === navModal) {
+          toggle('nav', false);
+          return;
+        }
+        var target = event.target && event.target.closest && event.target.closest('a');
+        if (!target) return;
+        toggle('nav', false);
+      });
+    }
+
+    var searchModal = modalFor('search');
+    if (searchModal) {
+      searchModal.addEventListener('click', function (event) {
+        if (event.target === searchModal) toggle('search', false);
+      });
+    }
+
+    doc.addEventListener('keydown', function (event) {
+      if (event.key !== 'Escape') return;
+      var navOpen = header.getAttribute(NAV_ATTR) === 'open';
+      var searchOpen = header.getAttribute(SEARCH_ATTR) === 'open';
+      if (!navOpen && !searchOpen) return;
+      event.preventDefault();
+      toggle('nav', false);
+      toggle('search', false);
+    });
+
+    var mq = window.matchMedia('(min-width: 48rem)');
+    function syncDesktopState() {
+      if (mq.matches) {
+        setState('nav', 'closed');
+        setState('search', 'closed');
+        setExpanded('nav', false);
+        setExpanded('search', false);
+        lockScroll(false);
+      }
+    }
+
+    try {
+      mq.addEventListener('change', syncDesktopState);
+    } catch (_) {
+      mq.addListener(syncDesktopState);
+    }
+
+    syncDesktopState();
+  });
+})();
+  `;
+  return /* @__PURE__ */ React11.createElement(
+    "script",
+    {
+      dangerouslySetInnerHTML: {
+        __html: code
+      }
+    }
+  );
+}
+function ensureArray(navLinks) {
+  if (!Array.isArray(navLinks)) return [];
+  return navLinks.filter((link) => link && typeof link === "object" && typeof link.href === "string");
+}
+function CanopyHeader(props = {}) {
+  const {
+    navigation: navLinksProp,
+    searchLabel = "Search",
+    searchHotkey = "mod+k",
+    searchPlaceholder = "Search\u2026",
+    brandHref = "/",
+    title = "Canopy IIIF",
+    logo: SiteLogo
+  } = props;
+  const navLinks = ensureArray(navLinksProp);
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("header", { className: "canopy-header", "data-mobile-nav": "closed", "data-mobile-search": "closed" }, /* @__PURE__ */ React11.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React11.createElement(
+    CanopyBrand,
+    {
+      label: title,
+      href: brandHref,
+      className: "canopy-header__brand-link",
+      Logo: SiteLogo
+    }
+  )), /* @__PURE__ */ React11.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React11.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })), /* @__PURE__ */ React11.createElement("nav", { className: "canopy-nav-links canopy-header__desktop-nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React11.createElement("a", { key: link.href, href: link.href }, link.label || link.href))), /* @__PURE__ */ React11.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      type: "button",
+      className: "canopy-header__icon-button canopy-header__search-trigger",
+      "aria-label": "Open search",
+      "aria-controls": "canopy-modal-search",
+      "aria-expanded": "false",
+      "data-canopy-header-toggle": "search"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        className: "canopy-header__search-icon"
+      },
+      /* @__PURE__ */ React11.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-3.8-3.8M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" })
+    )
+  ), /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      type: "button",
+      className: "canopy-header__icon-button canopy-header__menu",
+      "aria-label": "Open navigation",
+      "aria-controls": "canopy-modal-nav",
+      "aria-expanded": "false",
+      "data-canopy-header-toggle": "nav"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        className: "canopy-header__menu-icon"
+      },
+      /* @__PURE__ */ React11.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
+    )
+  ))), /* @__PURE__ */ React11.createElement(
+    CanopyModal,
+    {
+      id: "canopy-modal-nav",
+      variant: "nav",
+      labelledBy: "canopy-modal-nav-label",
+      label: title,
+      logo: SiteLogo,
+      href: brandHref,
+      closeLabel: "Close navigation",
+      closeDataAttr: "nav"
+    },
+    /* @__PURE__ */ React11.createElement("nav", { className: "canopy-nav-links canopy-modal__nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React11.createElement("a", { key: link.href, href: link.href }, link.label || link.href)))
+  ), /* @__PURE__ */ React11.createElement(
+    CanopyModal,
+    {
+      id: "canopy-modal-search",
+      variant: "search",
+      labelledBy: "canopy-modal-search-label",
+      label: title,
+      logo: SiteLogo,
+      href: brandHref,
+      closeLabel: "Close search",
+      closeDataAttr: "search",
+      bodyClassName: "canopy-modal__body--search"
+    },
+    /* @__PURE__ */ React11.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })
+  ), /* @__PURE__ */ React11.createElement(HeaderScript, null));
+}
+
 // ui/src/iiif/Viewer.jsx
-import React5, { useEffect as useEffect2, useState as useState2 } from "react";
+import React12, { useEffect as useEffect2, useState as useState2 } from "react";
 var DEFAULT_VIEWER_OPTIONS = {
   showDownload: false,
   showIIIFBadge: false,
@@ -283,7 +896,7 @@ var Viewer = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React12.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React12.createElement(
       "script",
       {
         type: "application/json",
@@ -291,11 +904,11 @@ var Viewer = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React5.createElement(CloverViewer, { ...props, options: mergedOptions });
+  return /* @__PURE__ */ React12.createElement(CloverViewer, { ...props, options: mergedOptions });
 };
 
 // ui/src/iiif/Slider.jsx
-import React6, { useEffect as useEffect3, useState as useState3 } from "react";
+import React13, { useEffect as useEffect3, useState as useState3 } from "react";
 var Slider = (props) => {
   const [CloverSlider, setCloverSlider] = useState3(null);
   useEffect3(() => {
@@ -321,7 +934,7 @@ var Slider = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React6.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React13.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React13.createElement(
       "script",
       {
         type: "application/json",
@@ -329,11 +942,11 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React6.createElement(CloverSlider, { ...props });
+  return /* @__PURE__ */ React13.createElement(CloverSlider, { ...props });
 };
 
 // ui/src/iiif/Scroll.jsx
-import React7, { useEffect as useEffect4, useState as useState4 } from "react";
+import React14, { useEffect as useEffect4, useState as useState4 } from "react";
 var Scroll = (props) => {
   const [CloverScroll, setCloverScroll] = useState4(null);
   useEffect4(() => {
@@ -358,7 +971,7 @@ var Scroll = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React7.createElement("div", { "data-canopy-scroll": "1", className: "not-prose" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React14.createElement("div", { "data-canopy-scroll": "1", className: "not-prose" }, /* @__PURE__ */ React14.createElement(
       "script",
       {
         type: "application/json",
@@ -366,11 +979,11 @@ var Scroll = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React7.createElement(CloverScroll, { ...props });
+  return /* @__PURE__ */ React14.createElement(CloverScroll, { ...props });
 };
 
 // ui/src/iiif/MdxRelatedItems.jsx
-import React8 from "react";
+import React15 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -378,11 +991,11 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React9 from "react";
+import React16 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -390,11 +1003,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React10 from "react";
+import React17 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -402,11 +1015,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React11 from "react";
+import React18 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -414,11 +1027,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React18.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchResults.jsx
-import React12 from "react";
+import React19 from "react";
 function SearchResults({
   results = [],
   type = "all",
@@ -426,19 +1039,19 @@ function SearchResults({
   query = ""
 }) {
   if (!results.length) {
-    return /* @__PURE__ */ React12.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React12.createElement("em", null, "No results"));
+    return /* @__PURE__ */ React19.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React19.createElement("em", null, "No results"));
   }
   const normalizedType = String(type || "all").toLowerCase();
   const isAnnotationView = normalizedType === "annotation";
   if (isAnnotationView) {
-    return /* @__PURE__ */ React12.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
+    return /* @__PURE__ */ React19.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
       if (!r) return null;
       return renderTextCard(r, r.id || i);
     }));
   }
   const renderTextCard = (record, key) => {
     if (!record) return null;
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React19.createElement(
       TextCard,
       {
         key,
@@ -454,20 +1067,20 @@ function SearchResults({
   const isWorkRecord = (record) => String(record && record.type).toLowerCase() === "work";
   const shouldRenderAsTextCard = (record) => !isWorkRecord(record) || normalizedType !== "work";
   if (layout === "list") {
-    return /* @__PURE__ */ React12.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+    return /* @__PURE__ */ React19.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
       if (shouldRenderAsTextCard(r)) {
-        return /* @__PURE__ */ React12.createElement("li", { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+        return /* @__PURE__ */ React19.createElement("li", { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
       }
       const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
       const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React19.createElement(
         "li",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
-        /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React19.createElement(
           Card,
           {
             href: r.href,
@@ -481,20 +1094,20 @@ function SearchResults({
       );
     }));
   }
-  return /* @__PURE__ */ React12.createElement("div", { id: "search-results" }, /* @__PURE__ */ React12.createElement(Grid, null, results.map((r, i) => {
+  return /* @__PURE__ */ React19.createElement("div", { id: "search-results" }, /* @__PURE__ */ React19.createElement(Grid, null, results.map((r, i) => {
     if (shouldRenderAsTextCard(r)) {
-      return /* @__PURE__ */ React12.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+      return /* @__PURE__ */ React19.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
     }
     const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
     const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React19.createElement(
       GridItem,
       {
         key: i,
         className: `search-result ${r.type}`,
         "data-thumbnail-aspect-ratio": aspect
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React19.createElement(
         Card,
         {
           href: r.href,
@@ -510,7 +1123,7 @@ function SearchResults({
 }
 
 // ui/src/search/SearchTabs.jsx
-import React13 from "react";
+import React20 from "react";
 function SearchTabs({
   type = "all",
   onTypeChange,
@@ -525,7 +1138,7 @@ function SearchTabs({
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
   const hasFilters = typeof onOpenFilters === "function";
   const filterBadge = activeFilterCount > 0 ? ` (${activeFilterCount})` : "";
-  return /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React20.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React20.createElement(
     "div",
     {
       role: "tablist",
@@ -536,7 +1149,7 @@ function SearchTabs({
       const active = String(type).toLowerCase() === String(t).toLowerCase();
       const cRaw = counts && Object.prototype.hasOwnProperty.call(counts, t) ? counts[t] : void 0;
       const c = Number.isFinite(Number(cRaw)) ? Number(cRaw) : 0;
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React20.createElement(
         "button",
         {
           key: t,
@@ -551,7 +1164,7 @@ function SearchTabs({
         ")"
       );
     })
-  ), hasFilters ? /* @__PURE__ */ React13.createElement(
+  ), hasFilters ? /* @__PURE__ */ React20.createElement(
     "button",
     {
       type: "button",
@@ -559,12 +1172,12 @@ function SearchTabs({
       "aria-expanded": filtersOpen ? "true" : "false",
       className: "inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:border-brand-200 hover:bg-brand-50 hover:text-brand-700"
     },
-    /* @__PURE__ */ React13.createElement("span", null, filtersLabel, filterBadge)
+    /* @__PURE__ */ React20.createElement("span", null, filtersLabel, filterBadge)
   ) : null);
 }
 
 // ui/src/search/SearchFiltersDialog.jsx
-import React14 from "react";
+import React21 from "react";
 function toArray(input) {
   if (!input) return [];
   if (Array.isArray(input)) return input;
@@ -603,20 +1216,20 @@ function FacetSection({ facet, selected, onToggle }) {
   const selectedValues = selected.get(String(slug)) || /* @__PURE__ */ new Set();
   const checkboxId = (valueSlug) => `filter-${slug}-${valueSlug}`;
   const hasSelection = selectedValues.size > 0;
-  const [quickQuery, setQuickQuery] = React14.useState("");
+  const [quickQuery, setQuickQuery] = React21.useState("");
   const hasQuery = quickQuery.trim().length > 0;
-  const filteredValues = React14.useMemo(
+  const filteredValues = React21.useMemo(
     () => facetMatches(values, quickQuery),
     [values, quickQuery]
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "details",
     {
       className: "canopy-search-filters__facet",
       open: hasSelection
     },
-    /* @__PURE__ */ React14.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React14.createElement("span", null, label), /* @__PURE__ */ React14.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
-    /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React21.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React21.createElement("span", null, label), /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
+    /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React21.createElement(
       "input",
       {
         type: "search",
@@ -626,7 +1239,7 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-input",
         "aria-label": `Filter ${label} values`
       }
-    ), quickQuery ? /* @__PURE__ */ React14.createElement(
+    ), quickQuery ? /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
@@ -634,11 +1247,11 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-clear"
       },
       "Clear"
-    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React14.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React14.createElement("ul", { className: "canopy-search-filters__facet-list" }, filteredValues.map((entry) => {
+    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React21.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React21.createElement("ul", { className: "canopy-search-filters__facet-list" }, filteredValues.map((entry) => {
       const valueSlug = String(entry.slug || entry.value || "");
       const isChecked = selectedValues.has(valueSlug);
       const inputId = checkboxId(valueSlug);
-      return /* @__PURE__ */ React14.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React14.createElement(
+      return /* @__PURE__ */ React21.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React21.createElement(
         "input",
         {
           id: inputId,
@@ -650,15 +1263,15 @@ function FacetSection({ facet, selected, onToggle }) {
             if (onToggle) onToggle(slug, valueSlug, nextChecked);
           }
         }
-      ), /* @__PURE__ */ React14.createElement(
+      ), /* @__PURE__ */ React21.createElement(
         "label",
         {
           htmlFor: inputId,
           className: "canopy-search-filters__facet-label"
         },
-        /* @__PURE__ */ React14.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React14.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
+        /* @__PURE__ */ React21.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
       ));
-    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React14.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
+    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React21.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
   );
 }
 function SearchFiltersDialog(props = {}) {
@@ -669,35 +1282,51 @@ function SearchFiltersDialog(props = {}) {
     selected = {},
     onToggle,
     onClear,
-    title = "Filters",
-    subtitle = "Refine results by metadata"
+    title,
+    subtitle = "Refine results by metadata",
+    brandLabel = "Canopy IIIF",
+    brandHref = "/",
+    logo: SiteLogo
   } = props;
   const selectedMap = normalizeSelected(selected);
   const activeCount = Array.from(selectedMap.values()).reduce(
     (total, set) => total + set.size,
     0
   );
+  React21.useEffect(() => {
+    if (!open) return void 0;
+    if (typeof document === "undefined") return void 0;
+    const body = document.body;
+    const root = document.documentElement;
+    const prevBody = body ? body.style.overflow : "";
+    const prevRoot = root ? root.style.overflow : "";
+    if (body) body.style.overflow = "hidden";
+    if (root) root.style.overflow = "hidden";
+    return () => {
+      if (body) body.style.overflow = prevBody;
+      if (root) root.style.overflow = prevRoot;
+    };
+  }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ React14.createElement(
-    "div",
+  const brandId = "canopy-modal-filters-label";
+  const subtitleText = subtitle != null ? subtitle : title;
+  return /* @__PURE__ */ React21.createElement(
+    CanopyModal,
     {
-      role: "dialog",
-      "aria-modal": "true",
-      className: "canopy-search-filters-overlay",
-      onClick: (event) => {
-        if (event.target === event.currentTarget && onOpenChange)
-          onOpenChange(false);
-      }
+      id: "canopy-modal-filters",
+      variant: "filters",
+      open: true,
+      labelledBy: brandId,
+      label: brandLabel,
+      logo: SiteLogo,
+      href: brandHref,
+      closeLabel: "Close filters",
+      onClose: () => onOpenChange && onOpenChange(false),
+      onBackgroundClick: () => onOpenChange && onOpenChange(false),
+      bodyClassName: "canopy-modal__body--filters"
     },
-    /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters" }, /* @__PURE__ */ React14.createElement("header", { className: "canopy-search-filters__header" }, /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("h2", { className: "canopy-search-filters__title" }, title), /* @__PURE__ */ React14.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitle)), /* @__PURE__ */ React14.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => onOpenChange && onOpenChange(false),
-        className: "canopy-search-filters__close"
-      },
-      "Close"
-    )), /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React14.createElement(
+    subtitleText ? /* @__PURE__ */ React21.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitleText) : null,
+    /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React21.createElement(
       FacetSection,
       {
         key: facet.slug || facet.label,
@@ -705,7 +1334,8 @@ function SearchFiltersDialog(props = {}) {
         selected: selectedMap,
         onToggle
       }
-    ))) : /* @__PURE__ */ React14.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")), /* @__PURE__ */ React14.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React14.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React14.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React14.createElement(
+    ))) : /* @__PURE__ */ React21.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")),
+    /* @__PURE__ */ React21.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React21.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
@@ -716,7 +1346,7 @@ function SearchFiltersDialog(props = {}) {
         className: "canopy-search-filters__button canopy-search-filters__button--secondary"
       },
       "Clear all"
-    ), /* @__PURE__ */ React14.createElement(
+    ), /* @__PURE__ */ React21.createElement(
       "button",
       {
         type: "button",
@@ -724,213 +1354,12 @@ function SearchFiltersDialog(props = {}) {
         className: "canopy-search-filters__button canopy-search-filters__button--primary"
       },
       "Done"
-    ))))
-  );
-}
-
-// ui/src/search-form/MdxSearchFormModal.jsx
-import React18 from "react";
-
-// ui/src/Icons.jsx
-import React15 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React15.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
-
-// ui/src/search/SearchPanelForm.jsx
-import React16 from "react";
-function readBasePath() {
-  const normalize = (val) => {
-    const raw = typeof val === "string" ? val.trim() : "";
-    if (!raw) return "";
-    return raw.replace(/\/+$/, "");
-  };
-  try {
-    if (typeof window !== "undefined" && window.CANOPY_BASE_PATH != null) {
-      const fromWindow = normalize(window.CANOPY_BASE_PATH);
-      if (fromWindow) return fromWindow;
-    }
-  } catch (_) {
-  }
-  try {
-    if (typeof globalThis !== "undefined" && globalThis.CANOPY_BASE_PATH != null) {
-      const fromGlobal = normalize(globalThis.CANOPY_BASE_PATH);
-      if (fromGlobal) return fromGlobal;
-    }
-  } catch (_) {
-  }
-  try {
-    if (typeof process !== "undefined" && process.env && process.env.CANOPY_BASE_PATH) {
-      const fromEnv = normalize(process.env.CANOPY_BASE_PATH);
-      if (fromEnv) return fromEnv;
-    }
-  } catch (_) {
-  }
-  return "";
-}
-function isAbsoluteUrl(href) {
-  try {
-    return /^https?:/i.test(String(href || ""));
-  } catch (_) {
-    return false;
-  }
-}
-function resolveSearchPath(pathValue) {
-  let raw = typeof pathValue === "string" ? pathValue.trim() : "";
-  if (!raw) raw = "/search";
-  if (isAbsoluteUrl(raw)) return raw;
-  const normalizedPath = raw.startsWith("/") ? raw : `/${raw}`;
-  const base = readBasePath();
-  if (!base) return normalizedPath;
-  const baseWithLead = base.startsWith("/") ? base : `/${base}`;
-  const baseTrimmed = baseWithLead.replace(/\/+$/, "");
-  if (!baseTrimmed) return normalizedPath;
-  if (normalizedPath === baseTrimmed || normalizedPath.startsWith(`${baseTrimmed}/`)) {
-    return normalizedPath;
-  }
-  const pathTrimmed = normalizedPath.replace(/^\/+/, "");
-  return `${baseTrimmed}/${pathTrimmed}`;
-}
-function SearchPanelForm(props = {}) {
-  const {
-    placeholder = "Search\u2026",
-    buttonLabel = "Search",
-    label,
-    searchPath = "/search",
-    inputId: inputIdProp,
-    clearLabel = "Clear search"
-  } = props || {};
-  const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React16.useMemo(
-    () => resolveSearchPath(searchPath),
-    [searchPath]
-  );
-  const autoId = typeof React16.useId === "function" ? React16.useId() : void 0;
-  const [fallbackId] = React16.useState(
-    () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
-  );
-  const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React16.useRef(null);
-  const [hasValue, setHasValue] = React16.useState(false);
-  const focusInput = React16.useCallback(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    if (document.activeElement === el) return;
-    try {
-      el.focus({ preventScroll: true });
-    } catch (_) {
-      try {
-        el.focus();
-      } catch (_2) {
-      }
-    }
-  }, []);
-  const handlePointerDown = React16.useCallback(
-    (event) => {
-      const target = event.target;
-      if (target && typeof target.closest === "function") {
-        if (target.closest("[data-canopy-search-form-trigger]")) return;
-        if (target.closest("[data-canopy-search-form-clear]")) return;
-      }
-      event.preventDefault();
-      focusInput();
-    },
-    [focusInput]
-  );
-  React16.useEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    if (el.value && el.value.trim()) {
-      setHasValue(true);
-    }
-  }, []);
-  const handleInputChange = React16.useCallback((event) => {
-    var _a;
-    const nextHasValue = Boolean(
-      ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim()
-    );
-    setHasValue(nextHasValue);
-  }, []);
-  const handleClear = React16.useCallback((event) => {
-  }, []);
-  const handleClearKey = React16.useCallback(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        handleClear(event);
-      }
-    },
-    [handleClear]
-  );
-  return /* @__PURE__ */ React16.createElement(
-    "form",
-    {
-      action,
-      method: "get",
-      role: "search",
-      autoComplete: "off",
-      spellCheck: "false",
-      className: "canopy-search-form canopy-search-form-shell",
-      onPointerDown: handlePointerDown,
-      "data-has-value": hasValue ? "1" : "0"
-    },
-    /* @__PURE__ */ React16.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React16.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React16.createElement(
-      "input",
-      {
-        id: inputId,
-        type: "search",
-        name: "q",
-        inputMode: "search",
-        "data-canopy-search-form-input": true,
-        placeholder,
-        className: "canopy-search-form__input",
-        "aria-label": "Search",
-        ref: inputRef,
-        onChange: handleInputChange,
-        onInput: handleInputChange
-      }
-    )),
-    hasValue ? /* @__PURE__ */ React16.createElement(
-      "button",
-      {
-        type: "button",
-        className: "canopy-search-form__clear",
-        onClick: handleClear,
-        onPointerDown: (event) => event.stopPropagation(),
-        onKeyDown: handleClearKey,
-        "aria-label": clearLabel,
-        "data-canopy-search-form-clear": true
-      },
-      "\xD7"
-    ) : null,
-    /* @__PURE__ */ React16.createElement(
-      "button",
-      {
-        type: "submit",
-        "data-canopy-search-form-trigger": "submit",
-        className: "canopy-search-form__submit"
-      },
-      /* @__PURE__ */ React16.createElement("span", null, text),
-      /* @__PURE__ */ React16.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React16.createElement("span", null, "\u2318"), /* @__PURE__ */ React16.createElement("span", null, "K"))
-    )
-  );
-}
-
-// ui/src/search/SearchPanelTeaserResults.jsx
-import React17 from "react";
-function SearchPanelTeaserResults(props = {}) {
-  const { style, className } = props || {};
-  const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React17.createElement(
-    "div",
-    {
-      "data-canopy-search-form-panel": true,
-      className: classes || void 0,
-      style
-    },
-    /* @__PURE__ */ React17.createElement("div", { id: "cplist" })
+    )))
   );
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
+import React22 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -946,30 +1375,12 @@ function MdxSearchFormModal(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React18.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React18.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React18.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React18.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
-}
-
-// ui/src/search/SearchPanel.jsx
-import React19 from "react";
-function SearchPanel(props = {}) {
-  const {
-    placeholder = "Search\u2026",
-    hotkey = "mod+k",
-    maxResults = 8,
-    groupOrder = ["work", "docs", "page"],
-    // Kept for backward compat; form always renders submit
-    button = true,
-    // eslint-disable-line no-unused-vars
-    buttonLabel = "Search",
-    label,
-    searchPath = "/search"
-  } = props || {};
-  const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const resolvedSearchPath = resolveSearchPath(searchPath);
-  const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React19.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React19.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React19.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React19.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React22.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React22.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React22.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React22.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React22.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 export {
+  CanopyBrand,
+  CanopyHeader,
+  CanopyModal,
   Card,
   Grid,
   GridItem,