@canopy-iiif/app 0.9.13 → 0.9.15

package/ui/dist/index.mjs

@@ -226,18 +226,67 @@ function Grid({
   ));
 }
 
+// ui/src/layout/Container.jsx
+import React5 from "react";
+function Container({ className = "", children, ...rest }) {
+  const classes = ["mx-auto", "max-w-content", "w-full", "px-6", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React5.createElement("div", { className: classes, ...rest }, children);
+}
+
+// ui/src/layout/Button.jsx
+import React6 from "react";
+var VARIANTS = /* @__PURE__ */ new Set(["primary", "secondary"]);
+function Button({
+  label,
+  href = "#",
+  target,
+  rel,
+  variant = "primary",
+  className = "",
+  children,
+  ...rest
+}) {
+  const resolvedVariant = VARIANTS.has(variant) ? variant : "primary";
+  const computedRel = target === "_blank" && !rel ? "noopener noreferrer" : rel;
+  const content = children != null ? children : label;
+  if (!content) return null;
+  const classes = [
+    "canopy-button",
+    `canopy-button--${resolvedVariant}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React6.createElement(
+    "a",
+    {
+      href,
+      className: classes,
+      target,
+      rel: computedRel,
+      ...rest
+    },
+    content
+  );
+}
+
+// ui/src/layout/ButtonWrapper.jsx
+import React7 from "react";
+function ButtonWrapper({ className = "", children, ...rest }) {
+  const classes = ["canopy-button-group", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React7.createElement("div", { className: classes, ...rest }, children);
+}
+
 // ui/src/layout/CanopyHeader.jsx
-import React11 from "react";
+import React14 from "react";
 
 // ui/src/search/SearchPanel.jsx
-import React8 from "react";
+import React11 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" }));
+import React8 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React8.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React8.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";
+import React9 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -300,18 +349,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React6.useMemo(
+  const action = React9.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React6.useId === "function" ? React6.useId() : void 0;
-  const [fallbackId] = React6.useState(
+  const autoId = typeof React9.useId === "function" ? React9.useId() : void 0;
+  const [fallbackId] = React9.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 inputRef = React9.useRef(null);
+  const [hasValue, setHasValue] = React9.useState(false);
+  const focusInput = React9.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -324,7 +373,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React6.useCallback(
+  const handlePointerDown = React9.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -336,23 +385,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React6.useCallback((event) => {
+  const handleInputChange = React9.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 handleClear = React9.useCallback((event) => {
   }, []);
-  const handleClearKey = React6.useCallback(
+  const handleClearKey = React9.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -361,7 +410,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "form",
     {
       action,
@@ -373,7 +422,7 @@ function SearchPanelForm(props = {}) {
       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(
+    /* @__PURE__ */ React9.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React9.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React9.createElement(
       "input",
       {
         id: inputId,
@@ -389,7 +438,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React6.createElement(
+    hasValue ? /* @__PURE__ */ React9.createElement(
       "button",
       {
         type: "button",
@@ -402,32 +451,31 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React9.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"))
+      text
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React7 from "react";
+import React10 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React7.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React10.createElement("div", { id: "cplist" })
   );
 }
 
@@ -448,11 +496,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__ */ 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) } }));
+  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React11.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React11.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React11.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/layout/CanopyBrand.jsx
-import React9 from "react";
+import React12 from "react";
 function CanopyBrand(props = {}) {
   const {
     labelId,
@@ -463,11 +511,11 @@ function CanopyBrand(props = {}) {
   } = 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));
+  return /* @__PURE__ */ React12.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React12.createElement(Logo, null) : null, /* @__PURE__ */ React12.createElement("span", { ...spanProps }, label));
 }
 
 // ui/src/layout/CanopyModal.jsx
-import React10 from "react";
+import React13 from "react";
 function CanopyModal(props = {}) {
   const {
     id,
@@ -518,7 +566,7 @@ function CanopyModal(props = {}) {
   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(
+  return /* @__PURE__ */ React13.createElement("div", { ...modalProps }, /* @__PURE__ */ React13.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React13.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React13.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -528,8 +576,8 @@ function CanopyModal(props = {}) {
       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(
+    /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React13.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React13.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React13.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React13.createElement(
     CanopyBrand,
     {
       labelId: resolvedLabelId,
@@ -733,7 +781,7 @@ function HeaderScript() {
   });
 })();
   `;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -744,7 +792,9 @@ function HeaderScript() {
 }
 function ensureArray(navLinks) {
   if (!Array.isArray(navLinks)) return [];
-  return navLinks.filter((link) => link && typeof link === "object" && typeof link.href === "string");
+  return navLinks.filter(
+    (link) => link && typeof link === "object" && typeof link.href === "string"
+  );
 }
 function CanopyHeader(props = {}) {
   const {
@@ -757,59 +807,98 @@ function CanopyHeader(props = {}) {
     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,
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    "header",
     {
-      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"
+      className: "canopy-header",
+      "data-mobile-nav": "closed",
+      "data-mobile-search": "closed"
     },
-    /* @__PURE__ */ React11.createElement(
-      "svg",
+    /* @__PURE__ */ React14.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React14.createElement(
+      CanopyBrand,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        className: "canopy-header__search-icon"
+        label: title,
+        href: brandHref,
+        className: "canopy-header__brand-link",
+        Logo: SiteLogo
+      }
+    )),
+    /* @__PURE__ */ React14.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React14.createElement(
+      SearchPanel,
+      {
+        label: searchLabel,
+        hotkey: searchHotkey,
+        placeholder: searchPlaceholder
+      }
+    )),
+    /* @__PURE__ */ React14.createElement(
+      "nav",
+      {
+        className: "canopy-nav-links canopy-header__desktop-nav",
+        "aria-label": "Primary navigation"
       },
-      /* @__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",
+      navLinks.map((link) => /* @__PURE__ */ React14.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+    ),
+    /* @__PURE__ */ React14.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React14.createElement(
+      "button",
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        className: "canopy-header__menu-icon"
+        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("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
-    )
-  ))), /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React14.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__ */ React14.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__ */ React14.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__ */ React14.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__ */ React14.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+          }
+        )
+      )
+    ))
+  ), /* @__PURE__ */ React14.createElement(
     CanopyModal,
     {
       id: "canopy-modal-nav",
@@ -821,8 +910,15 @@ function CanopyHeader(props = {}) {
       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(
+    /* @__PURE__ */ React14.createElement(
+      "nav",
+      {
+        className: "canopy-nav-links canopy-modal__nav",
+        "aria-label": "Primary navigation"
+      },
+      navLinks.map((link) => /* @__PURE__ */ React14.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+    )
+  ), /* @__PURE__ */ React14.createElement(
     CanopyModal,
     {
       id: "canopy-modal-search",
@@ -835,19 +931,26 @@ function CanopyHeader(props = {}) {
       closeDataAttr: "search",
       bodyClassName: "canopy-modal__body--search"
     },
-    /* @__PURE__ */ React11.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })
-  ), /* @__PURE__ */ React11.createElement(HeaderScript, null));
+    /* @__PURE__ */ React14.createElement(
+      SearchPanel,
+      {
+        label: searchLabel,
+        hotkey: searchHotkey,
+        placeholder: searchPlaceholder
+      }
+    )
+  ), /* @__PURE__ */ React14.createElement(HeaderScript, null));
 }
 
 // ui/src/layout/CanopyFooter.jsx
-import React12 from "react";
+import React15 from "react";
 function CanopyFooter({ className = "", children }) {
   const footerClassName = ["canopy-footer", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React12.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-footer__inner" }, children));
+  return /* @__PURE__ */ React15.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React15.createElement("div", { className: "canopy-footer__inner" }, children));
 }
 
 // ui/src/iiif/Viewer.jsx
-import React13, { useEffect as useEffect2, useState as useState2 } from "react";
+import React16, { useEffect as useEffect2, useState as useState2 } from "react";
 var DEFAULT_VIEWER_OPTIONS = {
   showDownload: false,
   showIIIFBadge: false,
@@ -903,7 +1006,7 @@ var Viewer = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React13.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React16.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React16.createElement(
       "script",
       {
         type: "application/json",
@@ -911,11 +1014,11 @@ var Viewer = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React13.createElement(CloverViewer, { ...props, options: mergedOptions });
+  return /* @__PURE__ */ React16.createElement(CloverViewer, { ...props, options: mergedOptions });
 };
 
 // ui/src/iiif/Slider.jsx
-import React14, { useEffect as useEffect3, useState as useState3 } from "react";
+import React17, { useEffect as useEffect3, useState as useState3 } from "react";
 var Slider = (props) => {
   const [CloverSlider, setCloverSlider] = useState3(null);
   useEffect3(() => {
@@ -941,7 +1044,7 @@ var Slider = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React14.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React17.createElement(
       "script",
       {
         type: "application/json",
@@ -949,11 +1052,11 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React14.createElement(CloverSlider, { ...props });
+  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...props });
 };
 
 // ui/src/iiif/Scroll.jsx
-import React15, { useEffect as useEffect4, useState as useState4 } from "react";
+import React18, { useEffect as useEffect4, useState as useState4 } from "react";
 var Scroll = (props) => {
   const [CloverScroll, setCloverScroll] = useState4(null);
   useEffect4(() => {
@@ -978,7 +1081,7 @@ var Scroll = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React15.createElement("div", { "data-canopy-scroll": "1", className: "not-prose" }, /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React18.createElement("div", { "data-canopy-scroll": "1", className: "not-prose" }, /* @__PURE__ */ React18.createElement(
       "script",
       {
         type: "application/json",
@@ -986,11 +1089,48 @@ var Scroll = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React15.createElement(CloverScroll, { ...props });
+  return /* @__PURE__ */ React18.createElement(CloverScroll, { ...props });
+};
+
+// ui/src/iiif/Image.jsx
+import React19, { useEffect as useEffect5, useState as useState5 } from "react";
+var Image = (props) => {
+  const [CloverImage, setCloverImage] = useState5(null);
+  useEffect5(() => {
+    let mounted = true;
+    const canUseDom = typeof window !== "undefined" && typeof document !== "undefined";
+    if (canUseDom) {
+      import("@samvera/clover-iiif/image").then((mod) => {
+        if (!mounted) return;
+        const Comp = mod && (mod.default || mod.Image || mod);
+        setCloverImage(() => Comp);
+      }).catch(() => {
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  if (!CloverImage) {
+    let json = "{}";
+    try {
+      json = JSON.stringify(props || {});
+    } catch (_) {
+      json = "{}";
+    }
+    return /* @__PURE__ */ React19.createElement("div", { "data-canopy-image": "1", className: "not-prose" }, /* @__PURE__ */ React19.createElement(
+      "script",
+      {
+        type: "application/json",
+        dangerouslySetInnerHTML: { __html: json }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React19.createElement(CloverImage, { ...props });
 };
 
 // ui/src/iiif/MdxRelatedItems.jsx
-import React16 from "react";
+import React20 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -998,11 +1138,11 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React20.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React20.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React17 from "react";
+import React21 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -1010,11 +1150,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React21.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React21.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React18 from "react";
+import React22 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -1022,11 +1162,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React18.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React22.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React22.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React19 from "react";
+import React23 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -1034,11 +1174,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React19.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React19.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React23.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React23.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchResults.jsx
-import React20 from "react";
+import React24 from "react";
 function SearchResults({
   results = [],
   type = "all",
@@ -1046,19 +1186,19 @@ function SearchResults({
   query = ""
 }) {
   if (!results.length) {
-    return /* @__PURE__ */ React20.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React20.createElement("em", null, "No results"));
+    return /* @__PURE__ */ React24.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React24.createElement("em", null, "No results"));
   }
   const normalizedType = String(type || "all").toLowerCase();
   const isAnnotationView = normalizedType === "annotation";
   if (isAnnotationView) {
-    return /* @__PURE__ */ React20.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
+    return /* @__PURE__ */ React24.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__ */ React20.createElement(
+    return /* @__PURE__ */ React24.createElement(
       TextCard,
       {
         key,
@@ -1074,20 +1214,20 @@ function SearchResults({
   const isWorkRecord = (record) => String(record && record.type).toLowerCase() === "work";
   const shouldRenderAsTextCard = (record) => !isWorkRecord(record) || normalizedType !== "work";
   if (layout === "list") {
-    return /* @__PURE__ */ React20.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+    return /* @__PURE__ */ React24.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
       if (shouldRenderAsTextCard(r)) {
-        return /* @__PURE__ */ React20.createElement("li", { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+        return /* @__PURE__ */ React24.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__ */ React20.createElement(
+      return /* @__PURE__ */ React24.createElement(
         "li",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
-        /* @__PURE__ */ React20.createElement(
+        /* @__PURE__ */ React24.createElement(
           Card,
           {
             href: r.href,
@@ -1101,20 +1241,20 @@ function SearchResults({
       );
     }));
   }
-  return /* @__PURE__ */ React20.createElement("div", { id: "search-results" }, /* @__PURE__ */ React20.createElement(Grid, null, results.map((r, i) => {
+  return /* @__PURE__ */ React24.createElement("div", { id: "search-results" }, /* @__PURE__ */ React24.createElement(Grid, null, results.map((r, i) => {
     if (shouldRenderAsTextCard(r)) {
-      return /* @__PURE__ */ React20.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+      return /* @__PURE__ */ React24.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__ */ React20.createElement(
+    return /* @__PURE__ */ React24.createElement(
       GridItem,
       {
         key: i,
         className: `search-result ${r.type}`,
         "data-thumbnail-aspect-ratio": aspect
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React24.createElement(
         Card,
         {
           href: r.href,
@@ -1130,7 +1270,7 @@ function SearchResults({
 }
 
 // ui/src/search/SearchTabs.jsx
-import React21 from "react";
+import React25 from "react";
 function SearchTabs({
   type = "all",
   onTypeChange,
@@ -1145,7 +1285,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__ */ React21.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React25.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React25.createElement(
     "div",
     {
       role: "tablist",
@@ -1156,7 +1296,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__ */ React21.createElement(
+      return /* @__PURE__ */ React25.createElement(
         "button",
         {
           key: t,
@@ -1171,7 +1311,7 @@ function SearchTabs({
         ")"
       );
     })
-  ), hasFilters ? /* @__PURE__ */ React21.createElement(
+  ), hasFilters ? /* @__PURE__ */ React25.createElement(
     "button",
     {
       type: "button",
@@ -1179,12 +1319,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__ */ React21.createElement("span", null, filtersLabel, filterBadge)
+    /* @__PURE__ */ React25.createElement("span", null, filtersLabel, filterBadge)
   ) : null);
 }
 
 // ui/src/search/SearchFiltersDialog.jsx
-import React22 from "react";
+import React26 from "react";
 function toArray(input) {
   if (!input) return [];
   if (Array.isArray(input)) return input;
@@ -1223,20 +1363,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] = React22.useState("");
+  const [quickQuery, setQuickQuery] = React26.useState("");
   const hasQuery = quickQuery.trim().length > 0;
-  const filteredValues = React22.useMemo(
+  const filteredValues = React26.useMemo(
     () => facetMatches(values, quickQuery),
     [values, quickQuery]
   );
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "details",
     {
       className: "canopy-search-filters__facet",
       open: hasSelection
     },
-    /* @__PURE__ */ React22.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React22.createElement("span", null, label), /* @__PURE__ */ React22.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
-    /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React26.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React26.createElement("span", null, label), /* @__PURE__ */ React26.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
+    /* @__PURE__ */ React26.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React26.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React26.createElement(
       "input",
       {
         type: "search",
@@ -1246,7 +1386,7 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-input",
         "aria-label": `Filter ${label} values`
       }
-    ), quickQuery ? /* @__PURE__ */ React22.createElement(
+    ), quickQuery ? /* @__PURE__ */ React26.createElement(
       "button",
       {
         type: "button",
@@ -1254,11 +1394,11 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-clear"
       },
       "Clear"
-    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React22.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React22.createElement("ul", { className: "canopy-search-filters__facet-list" }, filteredValues.map((entry) => {
+    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React26.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React26.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__ */ React22.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React26.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React26.createElement(
         "input",
         {
           id: inputId,
@@ -1270,15 +1410,15 @@ function FacetSection({ facet, selected, onToggle }) {
             if (onToggle) onToggle(slug, valueSlug, nextChecked);
           }
         }
-      ), /* @__PURE__ */ React22.createElement(
+      ), /* @__PURE__ */ React26.createElement(
         "label",
         {
           htmlFor: inputId,
           className: "canopy-search-filters__facet-label"
         },
-        /* @__PURE__ */ React22.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React22.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
+        /* @__PURE__ */ React26.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React26.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
       ));
-    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React22.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
+    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React26.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
   );
 }
 function SearchFiltersDialog(props = {}) {
@@ -1300,7 +1440,7 @@ function SearchFiltersDialog(props = {}) {
     (total, set) => total + set.size,
     0
   );
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (!open) return void 0;
     if (typeof document === "undefined") return void 0;
     const body = document.body;
@@ -1317,7 +1457,7 @@ function SearchFiltersDialog(props = {}) {
   if (!open) return null;
   const brandId = "canopy-modal-filters-label";
   const subtitleText = subtitle != null ? subtitle : title;
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React26.createElement(
     CanopyModal,
     {
       id: "canopy-modal-filters",
@@ -1332,8 +1472,8 @@ function SearchFiltersDialog(props = {}) {
       onBackgroundClick: () => onOpenChange && onOpenChange(false),
       bodyClassName: "canopy-modal__body--filters"
     },
-    subtitleText ? /* @__PURE__ */ React22.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitleText) : null,
-    /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React22.createElement(
+    subtitleText ? /* @__PURE__ */ React26.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitleText) : null,
+    /* @__PURE__ */ React26.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React26.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React26.createElement(
       FacetSection,
       {
         key: facet.slug || facet.label,
@@ -1341,8 +1481,8 @@ function SearchFiltersDialog(props = {}) {
         selected: selectedMap,
         onToggle
       }
-    ))) : /* @__PURE__ */ React22.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")),
-    /* @__PURE__ */ React22.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React22.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React22.createElement(
+    ))) : /* @__PURE__ */ React26.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")),
+    /* @__PURE__ */ React26.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React26.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React26.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React26.createElement(
       "button",
       {
         type: "button",
@@ -1353,7 +1493,7 @@ function SearchFiltersDialog(props = {}) {
         className: "canopy-search-filters__button canopy-search-filters__button--secondary"
       },
       "Clear all"
-    ), /* @__PURE__ */ React22.createElement(
+    ), /* @__PURE__ */ React26.createElement(
       "button",
       {
         type: "button",
@@ -1366,7 +1506,7 @@ function SearchFiltersDialog(props = {}) {
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React23 from "react";
+import React27 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -1382,17 +1522,29 @@ 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__ */ React23.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React23.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React23.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React23.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React23.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React27.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React27.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React27.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React27.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React27.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+}
+
+// ui/src/docs/MarkdownTable.jsx
+import React28 from "react";
+function MarkdownTable({ className = "", ...rest }) {
+  const merged = ["markdown-table", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React28.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React28.createElement("table", { className: merged, ...rest }));
 }
 export {
+  Button,
+  ButtonWrapper,
   CanopyBrand,
   CanopyFooter,
   CanopyHeader,
   CanopyModal,
   Card,
+  Container,
+  MarkdownTable as DocsMarkdownTable,
   Grid,
   GridItem,
   HelloWorld,
+  Image,
   MdxRelatedItems as RelatedItems,
   Scroll,
   SearchFiltersDialog,