@canopy-iiif/app 0.9.2 → 0.9.3

package/ui/dist/server.mjs

@@ -809,51 +809,18 @@ function Layout({
   )) : null);
 }
 
-// ui/src/search/MdxSearchResults.jsx
-import React10 from "react";
-function MdxSearchResults(props) {
-  let json = "{}";
-  try {
-    json = JSON.stringify(props || {});
-  } catch (_) {
-    json = "{}";
-  }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
-}
-
-// ui/src/search/SearchSummary.jsx
-import React11 from "react";
-function SearchSummary(props) {
-  let json = "{}";
-  try {
-    json = JSON.stringify(props || {});
-  } catch (_) {
-    json = "{}";
-  }
-  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
-}
-
-// ui/src/search/MdxSearchTabs.jsx
-import React12 from "react";
-function MdxSearchTabs(props) {
-  let json = "{}";
-  try {
-    json = JSON.stringify(props || {});
-  } catch (_) {
-    json = "{}";
-  }
-  return /* @__PURE__ */ React12.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React12.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
-}
-
-// ui/src/search-form/MdxSearchFormModal.jsx
+// ui/src/layout/CanopyHeader.jsx
 import React16 from "react";
 
-// ui/src/Icons.jsx
+// ui/src/search/SearchPanel.jsx
 import React13 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.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/Icons.jsx
+import React10 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React10.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React10.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 React14 from "react";
+import React11 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -916,18 +883,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React14.useMemo(
+  const action = React11.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React14.useId === "function" ? React14.useId() : void 0;
-  const [fallbackId] = React14.useState(
+  const autoId = typeof React11.useId === "function" ? React11.useId() : void 0;
+  const [fallbackId] = React11.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React14.useRef(null);
-  const [hasValue, setHasValue] = React14.useState(false);
-  const focusInput = React14.useCallback(() => {
+  const inputRef = React11.useRef(null);
+  const [hasValue, setHasValue] = React11.useState(false);
+  const focusInput = React11.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -940,7 +907,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React14.useCallback(
+  const handlePointerDown = React11.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -952,23 +919,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React14.useEffect(() => {
+  React11.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React14.useCallback((event) => {
+  const handleInputChange = React11.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 = React14.useCallback((event) => {
+  const handleClear = React11.useCallback((event) => {
   }, []);
-  const handleClearKey = React14.useCallback(
+  const handleClearKey = React11.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -977,7 +944,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "form",
     {
       action,
@@ -989,7 +956,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React11.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React11.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React11.createElement(
       "input",
       {
         id: inputId,
@@ -1005,7 +972,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React14.createElement(
+    hasValue ? /* @__PURE__ */ React11.createElement(
       "button",
       {
         type: "button",
@@ -1018,44 +985,45 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React11.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React14.createElement("span", null, text),
-      /* @__PURE__ */ React14.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React14.createElement("span", null, "\u2318"), /* @__PURE__ */ React14.createElement("span", null, "K"))
+      /* @__PURE__ */ React11.createElement("span", null, text),
+      /* @__PURE__ */ React11.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React11.createElement("span", null, "\u2318"), /* @__PURE__ */ React11.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React15 from "react";
+import React12 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React15.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React12.createElement("div", { id: "cplist" })
   );
 }
 
-// ui/src/search-form/MdxSearchFormModal.jsx
-function MdxSearchFormModal(props = {}) {
+// ui/src/search/SearchPanel.jsx
+function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
     hotkey = "mod+k",
     maxResults = 8,
-    groupOrder = ["work", "page"],
+    groupOrder = ["work", "docs", "page"],
+    // Kept for backward compat; form always renders submit
     button = true,
-    // kept for backward compat; ignored by teaser form
+    // eslint-disable-line no-unused-vars
     buttonLabel = "Search",
     label,
     searchPath = "/search"
@@ -1063,20 +1031,443 @@ 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__ */ React16.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React13.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React13.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React13.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React13.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React13.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
-// ui/src/search/SearchPanel.jsx
+// ui/src/layout/CanopyBrand.jsx
+import React14 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__ */ React14.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React14.createElement(Logo, null) : null, /* @__PURE__ */ React14.createElement("span", { ...spanProps }, label));
+}
+
+// ui/src/layout/CanopyModal.jsx
+import React15 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__ */ React15.createElement("div", { ...modalProps }, /* @__PURE__ */ React15.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React15.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React15.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__ */ React15.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React15.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React15.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React15.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__ */ React16.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__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("header", { className: "canopy-header", "data-mobile-nav": "closed", "data-mobile-search": "closed" }, /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React16.createElement(
+    CanopyBrand,
+    {
+      label: title,
+      href: brandHref,
+      className: "canopy-header__brand-link",
+      Logo: SiteLogo
+    }
+  )), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React16.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })), /* @__PURE__ */ React16.createElement("nav", { className: "canopy-nav-links canopy-header__desktop-nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.href, href: link.href }, link.label || link.href))), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React16.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__ */ React16.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__ */ React16.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__ */ React16.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__ */ React16.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__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
+    )
+  ))), /* @__PURE__ */ React16.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__ */ React16.createElement("nav", { className: "canopy-nav-links canopy-modal__nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.href, href: link.href }, link.label || link.href)))
+  ), /* @__PURE__ */ React16.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__ */ React16.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })
+  ), /* @__PURE__ */ React16.createElement(HeaderScript, null));
+}
+
+// ui/src/search/MdxSearchResults.jsx
 import React17 from "react";
-function SearchPanel(props = {}) {
+function MdxSearchResults(props) {
+  let json = "{}";
+  try {
+    json = JSON.stringify(props || {});
+  } catch (_) {
+    json = "{}";
+  }
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+}
+
+// ui/src/search/SearchSummary.jsx
+import React18 from "react";
+function SearchSummary(props) {
+  let json = "{}";
+  try {
+    json = JSON.stringify(props || {});
+  } catch (_) {
+    json = "{}";
+  }
+  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React18.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+}
+
+// ui/src/search/MdxSearchTabs.jsx
+import React19 from "react";
+function MdxSearchTabs(props) {
+  let json = "{}";
+  try {
+    json = JSON.stringify(props || {});
+  } catch (_) {
+    json = "{}";
+  }
+  return /* @__PURE__ */ React19.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React19.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+}
+
+// ui/src/search-form/MdxSearchFormModal.jsx
+import React20 from "react";
+function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
     hotkey = "mod+k",
     maxResults = 8,
-    groupOrder = ["work", "docs", "page"],
-    // Kept for backward compat; form always renders submit
+    groupOrder = ["work", "page"],
     button = true,
-    // eslint-disable-line no-unused-vars
+    // kept for backward compat; ignored by teaser form
     buttonLabel = "Search",
     label,
     searchPath = "/search"
@@ -1084,11 +1475,11 @@ function SearchPanel(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__ */ React17.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React20.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React20.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React20.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React20.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React20.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React18 from "react";
+import React21 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -1113,26 +1504,199 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React18.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React21.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React18.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React21.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React18.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React21.createElement(CloverMetadata, { metadata: items, ...rest });
 }
 function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   const stmt = requiredStatement || manifest && manifest.requiredStatement;
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React21.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+}
+
+// ui/src/docs/CodeBlock.jsx
+import React22 from "react";
+function parseHighlightAttr(attr) {
+  if (!attr) return /* @__PURE__ */ new Set();
+  const cleaned = String(attr || "").trim();
+  if (!cleaned) return /* @__PURE__ */ new Set();
+  const segments = cleaned.split(",").map((segment) => segment.trim()).filter(Boolean);
+  const lines = /* @__PURE__ */ new Set();
+  for (const segment of segments) {
+    if (!segment) continue;
+    if (/^\d+-\d+$/.test(segment)) {
+      const [startRaw, endRaw] = segment.split("-");
+      const start = Number(startRaw);
+      const end = Number(endRaw);
+      if (Number.isFinite(start) && Number.isFinite(end) && end >= start) {
+        for (let i = start; i <= end; i += 1) {
+          lines.add(i);
+        }
+      }
+    } else if (/^\d+$/.test(segment)) {
+      const value = Number(segment);
+      if (Number.isFinite(value)) lines.add(value);
+    }
+  }
+  return lines;
+}
+function normaliseCode(children) {
+  if (children == null) return "";
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) {
+    return children.map((child) => typeof child === "string" ? child : "").join("");
+  }
+  if (typeof children === "object" && typeof children.toString === "function") {
+    return children.toString();
+  }
+  return "";
+}
+var baseLineStyle = {
+  display: "block",
+  padding: "0.125rem 1.25rem",
+  boxSizing: "border-box"
+};
+var highlightBaseStyle = {
+  background: "linear-gradient(to right, var(--color-brand-200, #bfdbfe), var(--color-brand-100, #bfdbfe))"
+};
+function DocsCodeBlock(props = {}) {
+  const { children, ...rest } = props;
+  const childArray = React22.Children.toArray(children);
+  const codeElement = childArray.find((el) => React22.isValidElement(el));
+  if (!codeElement || !codeElement.props) {
+    return React22.createElement("pre", props);
+  }
+  const {
+    className = "",
+    children: codeChildren,
+    ...codeProps
+  } = codeElement.props;
+  const rawCode = normaliseCode(codeChildren);
+  const trimmedCode = rawCode.endsWith("\n") ? rawCode.slice(0, -1) : rawCode;
+  const lines = trimmedCode.split("\n");
+  const filename = codeProps["data-filename"] || "";
+  const highlightAttr = codeProps["data-highlight"] || "";
+  const highlightSet = parseHighlightAttr(highlightAttr);
+  const copyAttr = codeProps["data-copy"];
+  const enableCopy = copyAttr !== void 0 ? copyAttr === true || copyAttr === "true" || copyAttr === "" : false;
+  const [copied, setCopied] = React22.useState(false);
+  const handleCopy = React22.useCallback(async () => {
+    const text = rawCode;
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "absolute";
+        textarea.style.left = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (_) {
+      setCopied(false);
+    }
+  }, [rawCode]);
+  const containerStyle = {
+    borderRadius: "12px",
+    overflow: "hidden",
+    margin: "1.5rem 0",
+    background: "var(--color-brand-100, #e0f2ff)",
+    fontFamily: "var(--font-mono)",
+    fontSize: "0.85rem"
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 1.25rem",
+    fontWeight: 700,
+    background: "var(--color-brand-200, #dbeafe)",
+    color: "var(--color-brand-900)"
+  };
+  const preStyle = {
+    margin: 0,
+    background: "var(--color-brand-100, #e0f2ff)",
+    color: "var(--color-brand-800, #1f2d5c)",
+    lineHeight: 1.55,
+    padding: "1rem 0",
+    overflowX: "auto"
+  };
+  const codeStyle = {
+    display: "block",
+    padding: 0
+  };
+  const lineContentStyle = {
+    whiteSpace: "pre",
+    display: "inline"
+  };
+  const showFilename = Boolean(filename);
+  const { style: preStyleOverride, className: preClassName, ...preRest } = rest;
+  const mergedPreStyle = Object.assign({}, preStyle, preStyleOverride || {});
+  const lineElements = lines.map((line, index) => {
+    const lineNumber = index + 1;
+    const highlight = highlightSet.has(lineNumber);
+    const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
+    const displayLine = line === "" ? " " : line;
+    return React22.createElement(
+      "span",
+      { key: lineNumber, style },
+      React22.createElement("span", { style: lineContentStyle }, displayLine)
+    );
+  });
+  return React22.createElement(
+    "div",
+    { style: containerStyle },
+    React22.createElement(
+      "div",
+      { style: headerStyle },
+      React22.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React22.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          style: {
+            border: "1px solid var(--color-brand-300, #bfdbfe)",
+            borderRadius: "6px",
+            padding: "0.2rem 0.55rem",
+            fontSize: "0.7rem",
+            fontWeight: 500,
+            background: "color-mix(in srgb, var(--color-brand-100, #e0f2ff) 55%, #ffffff)",
+            color: "var(--color-brand-700, #1d4ed8)",
+            cursor: "pointer"
+          }
+        },
+        copied ? "Copied" : "Copy"
+      ) : null
+    ),
+    React22.createElement(
+      "pre",
+      { ...preRest, className: preClassName, style: mergedPreStyle },
+      React22.createElement("code", { style: codeStyle }, lineElements)
+    )
+  );
 }
 export {
+  CanopyBrand,
+  CanopyHeader,
+  CanopyModal,
+  DocsCodeBlock,
   HelloWorld,
   interstitials_exports as Interstitials,
   Label,