@canopy-iiif/app 1.6.21 → 1.7.0

package/ui/dist/server.mjs

@@ -4267,11 +4267,25 @@ TimelinePoint.displayName = "TimelinePoint";
 
 // ui/src/utils/manifestReferences.js
 import React33 from "react";
-import navigationHelpers6 from "@canopy-iiif/app/lib/components/navigation.js";
-import referencedHelpers from "@canopy-iiif/app/lib/components/referenced.js";
-var referencedModule = referencedHelpers && typeof referencedHelpers === "object" ? referencedHelpers : null;
-var buildReferencedItems = referencedModule && typeof referencedModule.buildReferencedItems === "function" ? referencedModule.buildReferencedItems : null;
-var normalizeReferencedManifestList = referencedModule && typeof referencedModule.normalizeReferencedManifestList === "function" ? referencedModule.normalizeReferencedManifestList : null;
+var CONTEXT_KEY2 = typeof Symbol === "function" ? Symbol.for("__CANOPY_PAGE_CONTEXT__") : "__CANOPY_PAGE_CONTEXT__";
+function getGlobalRoot() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof global !== "undefined") return global;
+  if (typeof window !== "undefined") return window;
+  return {};
+}
+function getPageContext2() {
+  const root = getGlobalRoot();
+  if (root && root[CONTEXT_KEY2]) return root[CONTEXT_KEY2];
+  const ctx = React33.createContext({
+    navigation: null,
+    page: null,
+    site: null,
+    primaryNavigation: []
+  });
+  if (root) root[CONTEXT_KEY2] = ctx;
+  return ctx;
+}
 function normalizeManifestId(raw) {
   if (!raw) return "";
   try {
@@ -4288,9 +4302,23 @@ function normalizeManifestId(raw) {
   }
 }
 var PageContextFallback = React33.createContext(null);
+var referencedModule = null;
+function getReferencedModule() {
+  if (typeof window !== "undefined") return null;
+  if (referencedModule) return referencedModule;
+  try {
+    const globalReq = typeof globalThis !== "undefined" && globalThis.__canopyRequire || null;
+    if (typeof globalReq === "function") {
+      referencedModule = globalReq("../../../lib/components/referenced.js");
+      return referencedModule;
+    }
+  } catch (_) {
+    referencedModule = null;
+  }
+  return referencedModule;
+}
 function useReferencedManifestMap() {
-  var _a, _b;
-  const PageContext = ((_b = (_a = navigationHelpers6) == null ? void 0 : _a.getPageContext) == null ? void 0 : _b.call(_a)) || PageContextFallback;
+  const PageContext = getPageContext2() || PageContextFallback;
   const pageContext = React33.useContext(PageContext);
   const referencedItems = pageContext && pageContext.page && Array.isArray(pageContext.page.referencedItems) ? pageContext.page.referencedItems : [];
   return React33.useMemo(() => {
@@ -4353,32 +4381,37 @@ function resolveReferencedManifests(ids, manifestMap) {
     });
   }
   const missing = order.filter((key) => key && !manifestRecords.has(key));
-  if (missing.length && buildReferencedItems) {
-    let fallbackItems = [];
-    try {
-      const normalizedMissing = normalizeReferencedManifestList ? normalizeReferencedManifestList(missing) : missing;
-      if (normalizedMissing && normalizedMissing.length) {
-        fallbackItems = buildReferencedItems(normalizedMissing) || [];
+  if (missing.length) {
+    const referencedHelpers = getReferencedModule();
+    const buildReferencedItems = referencedHelpers == null ? void 0 : referencedHelpers.buildReferencedItems;
+    const normalizeList = referencedHelpers == null ? void 0 : referencedHelpers.normalizeReferencedManifestList;
+    if (typeof buildReferencedItems === "function") {
+      let fallbackItems = [];
+      try {
+        const normalizedMissing = typeof normalizeList === "function" ? normalizeList(missing) : missing;
+        if (normalizedMissing && normalizedMissing.length) {
+          fallbackItems = buildReferencedItems(normalizedMissing) || [];
+        }
+      } catch (_) {
+        fallbackItems = [];
       }
-    } catch (_) {
-      fallbackItems = [];
-    }
-    fallbackItems.forEach((item) => {
-      if (!item) return;
-      const fallbackKey = normalizeManifestId(item.id || item.href);
-      if (!fallbackKey || manifestRecords.has(fallbackKey)) return;
-      manifestRecords.set(fallbackKey, {
-        id: item.id || item.href || fallbackKey,
-        href: item.href || null,
-        title: item.title || item.href || "",
-        summary: item.summary || "",
-        thumbnail: item.thumbnail || null,
-        thumbnailWidth: item.thumbnailWidth,
-        thumbnailHeight: item.thumbnailHeight,
-        type: item.type || "work",
-        metadata: Array.isArray(item.metadata) && item.metadata.length ? item.metadata : item.summary ? [item.summary] : []
+      fallbackItems.forEach((item) => {
+        if (!item) return;
+        const fallbackKey = normalizeManifestId(item.id || item.href);
+        if (!fallbackKey || manifestRecords.has(fallbackKey)) return;
+        manifestRecords.set(fallbackKey, {
+          id: item.id || item.href || fallbackKey,
+          href: item.href || null,
+          title: item.title || item.href || "",
+          summary: item.summary || "",
+          thumbnail: item.thumbnail || null,
+          thumbnailWidth: item.thumbnailWidth,
+          thumbnailHeight: item.thumbnailHeight,
+          type: item.type || "work",
+          metadata: Array.isArray(item.metadata) && item.metadata.length ? item.metadata : item.summary ? [item.summary] : []
+        });
       });
-    });
+    }
   }
   return order.map((key) => manifestRecords.get(key)).filter(Boolean);
 }
@@ -4711,8 +4744,477 @@ function MdxMap({ children, ...rest }) {
   return /* @__PURE__ */ React35.createElement("div", { "data-canopy-map": "1" }, /* @__PURE__ */ React35.createElement("div", { ...placeholderProps, "aria-live": "polite" }, /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__status" }, "Loading map\u2026")), /* @__PURE__ */ React35.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
-// ui/src/search/MdxSearchResults.jsx
+// ui/src/content/gallery/Gallery.jsx
 import React36 from "react";
+var INLINE_SCRIPT2 = `(() => {
+  if (typeof window === 'undefined') return;
+  if (window.__canopyGalleryBound) return;
+  window.__canopyGalleryBound = true;
+  const focusableSelector =
+    'a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  const raf =
+    (window.requestAnimationFrame && window.requestAnimationFrame.bind(window)) ||
+    function (cb) {
+      return window.setTimeout(cb, 0);
+    };
+  let activeModal = null;
+
+  function isVisible(node) {
+    return !!(node && (node.offsetWidth || node.offsetHeight || node.getClientRects().length));
+  }
+
+  function getFocusable(modal) {
+    if (!modal) return [];
+    return Array.prototype.slice
+      .call(modal.querySelectorAll(focusableSelector))
+      .filter((node) => !node.hasAttribute('disabled') && node.getAttribute('aria-hidden') !== 'true' && isVisible(node));
+  }
+
+  function escapeSelector(value) {
+    if (window.CSS && typeof window.CSS.escape === 'function') {
+      return window.CSS.escape(value);
+    }
+    return value.replace(/"/g, '\\"');
+  }
+
+  function findTrigger(modal) {
+    if (!modal || !modal.id) return null;
+    try {
+      return document.querySelector('[data-canopy-gallery-trigger="' + escapeSelector(modal.id) + '"]');
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function focusInitial(modal) {
+    if (!modal) return;
+    const focusables = getFocusable(modal);
+    const target = focusables[0] || modal;
+    raf(() => {
+      try {
+        target.focus({preventScroll: true});
+      } catch (_) {
+        try {
+          target.focus();
+        } catch (err) {}
+      }
+    });
+  }
+
+  function lockScroll() {
+    document.body && document.body.setAttribute('data-canopy-gallery-locked', '1');
+  }
+
+  function unlockScroll() {
+    document.body && document.body.removeAttribute('data-canopy-gallery-locked');
+  }
+
+  function handleKeydown(event) {
+    if (!activeModal) return;
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.preventDefault();
+      const closeId = activeModal.getAttribute('data-canopy-gallery-close');
+      if (closeId) {
+        const targetHash = '#' + closeId;
+        if (window.location.hash !== targetHash) {
+          window.location.hash = targetHash;
+        } else {
+          window.location.hash = targetHash;
+        }
+      } else {
+        window.location.hash = '';
+      }
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const focusables = getFocusable(activeModal);
+    if (!focusables.length) {
+      event.preventDefault();
+      activeModal.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const current = document.activeElement;
+    if (event.shiftKey) {
+      if (current === first || !activeModal.contains(current)) {
+        event.preventDefault();
+        last.focus();
+      }
+      return;
+    }
+    if (current === last || !activeModal.contains(current)) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function setActiveModal(modal) {
+    if (modal) {
+      if (!activeModal) {
+        lockScroll();
+        document.addEventListener('keydown', handleKeydown, true);
+      } else if (activeModal !== modal) {
+        activeModal.removeAttribute('data-canopy-gallery-active');
+      }
+      activeModal = modal;
+      modal.setAttribute('data-canopy-gallery-active', '1');
+      focusInitial(modal);
+      return;
+    }
+    if (!activeModal) return;
+    const previous = activeModal;
+    activeModal = null;
+    previous.removeAttribute('data-canopy-gallery-active');
+    unlockScroll();
+    document.removeEventListener('keydown', handleKeydown, true);
+    const closeTarget = previous.getAttribute('data-canopy-gallery-close');
+    if (closeTarget) {
+      const closeHash = '#' + closeTarget;
+      if (window.location.hash === closeHash) {
+        try {
+          if (window.history && typeof window.history.replaceState === 'function') {
+            window.history.replaceState('', document.title, window.location.pathname + window.location.search);
+          } else {
+            window.location.hash = '';
+          }
+        } catch (_) {}
+      }
+    }
+    const trigger = findTrigger(previous);
+    if (trigger && typeof trigger.focus === 'function') {
+      raf(() => {
+        try {
+          trigger.focus({preventScroll: true});
+        } catch (_) {
+          try {
+            trigger.focus();
+          } catch (err) {}
+        }
+      });
+    }
+  }
+
+  function modalFromHash() {
+    const id = window.location.hash.replace(/^#/, '');
+    if (!id) return null;
+    const candidate = document.getElementById(id);
+    if (!candidate) return null;
+    return candidate.hasAttribute('data-canopy-gallery-modal') ? candidate : null;
+  }
+
+  function syncFromHash() {
+    const modal = modalFromHash();
+    if (modal) {
+      setActiveModal(modal);
+    } else {
+      setActiveModal(null);
+    }
+  }
+
+  window.addEventListener('hashchange', syncFromHash);
+  window.addEventListener('pageshow', syncFromHash);
+  syncFromHash();
+})()`;
+var galleryInstanceCounter = 0;
+function nextGalleryInstanceId() {
+  galleryInstanceCounter += 1;
+  return `canopy-gallery-${galleryInstanceCounter}`;
+}
+function slugify2(value, fallback) {
+  if (!value) return fallback;
+  const normalized = String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").trim();
+  if (!normalized) return fallback;
+  return normalized;
+}
+function ensureArray2(value) {
+  if (!value && value !== 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function normalizeOrder(value) {
+  const normalized = String(value || "default").toLowerCase();
+  return normalized === "random" ? "random" : "default";
+}
+function shuffleItems(list) {
+  const copy = list.slice();
+  for (let i = copy.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = copy[i];
+    copy[i] = copy[j];
+    copy[j] = temp;
+  }
+  return copy;
+}
+function renderMetaList(meta, className) {
+  const entries = ensureArray2(meta).filter((entry) => entry || entry === 0);
+  if (!entries.length) return null;
+  return /* @__PURE__ */ React36.createElement("ul", { className, role: "list" }, entries.map((entry, index) => /* @__PURE__ */ React36.createElement("li", { key: `meta-${index}` }, entry)));
+}
+function renderPreview(props = {}) {
+  const source = typeof props.media === "string" && props.media || props.thumbnail || props.src || props.image && props.image.src || props.image;
+  if (source) {
+    const alt = props.thumbnailAlt || props.imageAlt || props.alt || props.title || "";
+    const width = props.thumbnailWidth || props.imageWidth || props.width;
+    const height = props.thumbnailHeight || props.imageHeight || props.height;
+    return /* @__PURE__ */ React36.createElement(
+      "img",
+      {
+        src: source,
+        alt,
+        width,
+        height,
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__placeholder", "aria-hidden": "true" });
+}
+function normalizeItem(child, index, galleryId, manifestMap) {
+  var _a;
+  if (!React36.isValidElement(child)) return null;
+  if (child.type !== GalleryItem && ((_a = child.type) == null ? void 0 : _a.displayName) !== "GalleryItem")
+    return null;
+  const props = child.props || {};
+  const manifestValues = Array.isArray(props.referencedManifests) ? props.referencedManifests : props.manifest ? [props.manifest] : Array.isArray(props.manifests) ? props.manifests : [];
+  const manifests = resolveReferencedManifests(manifestValues, manifestMap);
+  const normalizedProps = { ...props };
+  if (!normalizedProps.title) {
+    const manifestWithTitle = manifests.find(
+      (manifest) => manifest && manifest.title
+    );
+    if (manifestWithTitle && manifestWithTitle.title) {
+      normalizedProps.title = manifestWithTitle.title;
+    }
+  }
+  if (!normalizedProps.summary || !normalizedProps.description) {
+    const manifestWithSummary = manifests.find(
+      (manifest) => manifest && manifest.summary
+    );
+    if (manifestWithSummary && manifestWithSummary.summary) {
+      if (!normalizedProps.summary) {
+        normalizedProps.summary = manifestWithSummary.summary;
+      }
+      if (!normalizedProps.description) {
+        normalizedProps.description = manifestWithSummary.summary;
+      }
+    }
+  }
+  if (!normalizedProps.thumbnail && !normalizedProps.media && !normalizedProps.image) {
+    const manifestWithThumb = manifests.find(
+      (manifest) => manifest && manifest.thumbnail
+    );
+    if (manifestWithThumb && manifestWithThumb.thumbnail) {
+      normalizedProps.thumbnail = manifestWithThumb.thumbnail;
+      if (manifestWithThumb.thumbnailWidth != null && normalizedProps.thumbnailWidth == null && normalizedProps.imageWidth == null && normalizedProps.width == null) {
+        normalizedProps.thumbnailWidth = manifestWithThumb.thumbnailWidth;
+      }
+      if (manifestWithThumb.thumbnailHeight != null && normalizedProps.thumbnailHeight == null && normalizedProps.imageHeight == null && normalizedProps.height == null) {
+        normalizedProps.thumbnailHeight = manifestWithThumb.thumbnailHeight;
+      }
+    }
+  }
+  const rawSlug = normalizedProps.slug || normalizedProps.id || normalizedProps.title || `item-${index + 1}`;
+  const slug = slugify2(rawSlug, `item-${index + 1}`);
+  const modalId = `${galleryId}-modal-${slug}-${index + 1}`;
+  const triggerLabel = normalizedProps.triggerLabel || normalizedProps.buttonLabel || normalizedProps.linkLabel || `Open popup for ${normalizedProps.title || `item ${index + 1}`}`;
+  const modalTitleId = `${modalId}-title`;
+  const needsDescriptionId = normalizedProps.popupDescription || normalizedProps.modalDescription || normalizedProps.description || normalizedProps.summary;
+  const modalDescriptionId = needsDescriptionId ? `${modalId}-description` : null;
+  const manifestLinks = manifests.map((manifest) => {
+    if (!manifest) return null;
+    const href = manifest.href || manifest.id || manifest.slug;
+    if (!href) return null;
+    return {
+      id: manifest.id || manifest.slug || href,
+      href,
+      title: manifest.title || manifest.label || href
+    };
+  }).filter(Boolean);
+  return {
+    index,
+    key: child.key != null ? child.key : `${galleryId}-item-${index}`,
+    props: normalizedProps,
+    modalId,
+    slug,
+    modalTitleId,
+    modalDescriptionId,
+    triggerLabel,
+    manifests: manifestLinks
+  };
+}
+function buildCaptionContent(itemProps) {
+  if (itemProps.caption) return itemProps.caption;
+  const kicker = itemProps.kicker || itemProps.label || itemProps.eyebrow;
+  const summary = itemProps.summary || itemProps.description;
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, kicker ? /* @__PURE__ */ React36.createElement("span", { className: "canopy-gallery__kicker" }, kicker) : null, itemProps.title ? /* @__PURE__ */ React36.createElement("span", { className: "canopy-gallery__title-text" }, itemProps.title) : null, summary ? /* @__PURE__ */ React36.createElement("span", { className: "canopy-gallery__summary" }, summary) : null, renderMetaList(
+    itemProps.meta,
+    "canopy-gallery__meta canopy-gallery__meta--caption"
+  ));
+}
+function GalleryModal({ item, total, closeTargetId, prevTarget, nextTarget }) {
+  const {
+    props,
+    modalId,
+    modalTitleId,
+    modalDescriptionId,
+    triggerLabel,
+    index,
+    manifests
+  } = item;
+  const kicker = props.kicker || props.label || props.eyebrow;
+  const summary = props.popupDescription || props.modalDescription || props.description || props.summary || null;
+  const modalTitle = props.popupTitle || props.modalTitle || props.title || `Item ${index + 1}`;
+  const preview = renderPreview(props);
+  return /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      id: modalId,
+      className: "canopy-gallery__modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": modalTitleId,
+      "aria-describedby": modalDescriptionId || void 0,
+      tabIndex: -1,
+      "data-canopy-gallery-modal": "true",
+      "data-canopy-gallery-close": closeTargetId
+    },
+    /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modal-scrim" }, /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modal-panel" }, /* @__PURE__ */ React36.createElement("header", { className: "canopy-gallery__modal-header" }, preview ? /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modal-thumb", "aria-hidden": "true" }, preview) : null, /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modal-text" }, kicker ? /* @__PURE__ */ React36.createElement("p", { className: "canopy-gallery__modal-kicker" }, kicker) : null, /* @__PURE__ */ React36.createElement("h3", { id: modalTitleId, className: "canopy-gallery__modal-title" }, modalTitle), summary ? /* @__PURE__ */ React36.createElement(
+      "p",
+      {
+        id: modalDescriptionId || void 0,
+        className: "canopy-gallery__modal-summary"
+      },
+      summary
+    ) : null, renderMetaList(
+      props.meta,
+      "canopy-gallery__meta canopy-gallery__meta--modal"
+    ))), /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modal-body" }, props.children, manifests && manifests.length ? /* @__PURE__ */ React36.createElement("section", { className: "canopy-gallery__referenced" }, /* @__PURE__ */ React36.createElement("h4", null, "Referenced works"), /* @__PURE__ */ React36.createElement("ul", { role: "list" }, manifests.map((manifest) => /* @__PURE__ */ React36.createElement("li", { key: manifest.id || manifest.href }, /* @__PURE__ */ React36.createElement("a", { href: manifest.href }, manifest.title || manifest.href))))) : null), /* @__PURE__ */ React36.createElement("footer", { className: "canopy-gallery__modal-footer" }, /* @__PURE__ */ React36.createElement(
+      "a",
+      {
+        className: "canopy-gallery__modal-close",
+        href: `#${closeTargetId}`,
+        "aria-label": `Close popup for ${modalTitle}`
+      },
+      "Close"
+    ), total > 1 ? /* @__PURE__ */ React36.createElement(
+      "nav",
+      {
+        className: "canopy-gallery__modal-nav",
+        "aria-label": "Gallery popup navigation"
+      },
+      /* @__PURE__ */ React36.createElement(
+        "a",
+        {
+          className: "canopy-gallery__modal-nav-link canopy-gallery__modal-nav-link--prev",
+          href: `#${prevTarget}`,
+          "aria-label": `Show previous popup before ${modalTitle}`
+        },
+        "Prev"
+      ),
+      /* @__PURE__ */ React36.createElement(
+        "a",
+        {
+          className: "canopy-gallery__modal-nav-link canopy-gallery__modal-nav-link--next",
+          href: `#${nextTarget}`,
+          "aria-label": `Show next popup after ${modalTitle}`
+        },
+        "Next"
+      )
+    ) : null)))
+  );
+}
+function GalleryFigure({ item }) {
+  const { props, modalId, triggerLabel } = item;
+  return /* @__PURE__ */ React36.createElement(
+    "figure",
+    {
+      className: "canopy-gallery__item",
+      "data-gallery-item-index": item.index
+    },
+    /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__media" }, renderPreview(props)),
+    /* @__PURE__ */ React36.createElement("figcaption", { className: "canopy-gallery__caption" }, buildCaptionContent(props)),
+    /* @__PURE__ */ React36.createElement(
+      "a",
+      {
+        className: "canopy-gallery__trigger",
+        href: `#${modalId}`,
+        "aria-haspopup": "dialog",
+        "aria-controls": modalId,
+        "aria-label": triggerLabel,
+        "data-canopy-gallery-trigger": modalId
+      },
+      /* @__PURE__ */ React36.createElement("span", { className: "canopy-gallery__trigger-label" }, triggerLabel)
+    )
+  );
+}
+function GalleryItem() {
+  return null;
+}
+GalleryItem.displayName = "GalleryItem";
+function normalizePopupSize(value) {
+  const normalized = String(value || "full").toLowerCase();
+  return normalized === "medium" ? "medium" : "full";
+}
+function Gallery({
+  children,
+  id,
+  title,
+  description,
+  popupSize = "full",
+  order = "default",
+  className = "",
+  style = {}
+}) {
+  const manifestMap = useReferencedManifestMap();
+  const galleryId = id ? String(id) : nextGalleryInstanceId();
+  const HeadingTag = "h3";
+  const closeTargetId = `${galleryId}-close`;
+  const childArray = React36.Children.toArray(children);
+  const items = childArray.map((child, index) => normalizeItem(child, index, galleryId, manifestMap)).filter(Boolean);
+  if (!items.length) return null;
+  const popupMode = normalizePopupSize(popupSize);
+  const orderMode = normalizeOrder(order);
+  const orderedItems = orderMode === "random" ? shuffleItems(items) : items;
+  const rootClassName = [
+    "canopy-gallery",
+    popupMode === "medium" ? "canopy-gallery--popup-medium" : "canopy-gallery--popup-full",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React36.createElement("section", { className: rootClassName, style, "data-canopy-gallery": "true" }, /* @__PURE__ */ React36.createElement(
+    "div",
+    {
+      id: closeTargetId,
+      className: "canopy-gallery__close-anchor",
+      "aria-hidden": "true",
+      tabIndex: -1
+    }
+  ), (title || description) && /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__header" }, title ? /* @__PURE__ */ React36.createElement(HeadingTag, { className: "canopy-gallery__heading" }, title) : null, description ? /* @__PURE__ */ React36.createElement("p", { className: "canopy-gallery__description" }, description) : null), /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__grid" }, orderedItems.map((item) => /* @__PURE__ */ React36.createElement(GalleryFigure, { key: item.key, item }))), /* @__PURE__ */ React36.createElement("div", { className: "canopy-gallery__modals" }, orderedItems.map((item, index) => {
+    const total = orderedItems.length;
+    const prevIndex = (index - 1 + total) % total;
+    const nextIndex = (index + 1) % total;
+    return /* @__PURE__ */ React36.createElement(
+      GalleryModal,
+      {
+        key: `${item.modalId}-modal`,
+        item,
+        total,
+        closeTargetId,
+        prevTarget: orderedItems[prevIndex].modalId,
+        nextTarget: orderedItems[nextIndex].modalId
+      }
+    );
+  })), /* @__PURE__ */ React36.createElement(
+    "script",
+    {
+      "data-canopy-gallery-script": "true",
+      dangerouslySetInnerHTML: { __html: INLINE_SCRIPT2 }
+    }
+  ));
+}
+Gallery.Item = GalleryItem;
+
+// ui/src/search/MdxSearchResults.jsx
+import React37 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -4720,11 +5222,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React36.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React36.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React37.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React37.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React37 from "react";
+import React38 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -4732,11 +5234,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React37.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React37.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React38.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React38.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React38 from "react";
+import React39 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -4744,11 +5246,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React38.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React38.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React39.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React39.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearch.jsx
-import React39 from "react";
+import React40 from "react";
 function MdxSearch(props = {}) {
   const {
     layout,
@@ -4766,11 +5268,11 @@ function MdxSearch(props = {}) {
     resultsPayload.layout = layout;
   }
   const classes = ["canopy-search", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React39.createElement("section", { className: classes, "data-canopy-search": "1" }, showTabs ? /* @__PURE__ */ React39.createElement(MdxSearchTabs, { ...tabsProps }) : null, showSummary ? /* @__PURE__ */ React39.createElement(SearchSummary, { ...summaryProps }) : null, showResults ? /* @__PURE__ */ React39.createElement(MdxSearchResults, { ...resultsPayload }) : null, children || null);
+  return /* @__PURE__ */ React40.createElement("section", { className: classes, "data-canopy-search": "1" }, showTabs ? /* @__PURE__ */ React40.createElement(MdxSearchTabs, { ...tabsProps }) : null, showSummary ? /* @__PURE__ */ React40.createElement(SearchSummary, { ...summaryProps }) : null, showResults ? /* @__PURE__ */ React40.createElement(MdxSearchResults, { ...resultsPayload }) : null, children || null);
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React40 from "react";
+import React41 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -4786,12 +5288,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__ */ React40.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React40.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React40.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React40.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React40.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React41.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React41.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React41.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React41.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React41.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
 var import_slugify2 = __toESM(require_slugify());
-import React41 from "react";
+import React42 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -4932,7 +5434,7 @@ function MetadataFacetLink(props) {
   const valueSlug = facetSlug ? toValueSlug(text) : "";
   const href = facetSlug && valueSlug ? buildFacetSearchHref(facetSlug, valueSlug) : "";
   if (!href) return text;
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "a",
     {
       href,
@@ -4958,7 +5460,7 @@ function buildFacetCustomValueContent(items, manifest) {
     seen.add(normalized);
     custom.push({
       matchingLabel: item.label,
-      Content: /* @__PURE__ */ React41.createElement(MetadataFacetLink, { facetSlug: facet.slug })
+      Content: /* @__PURE__ */ React42.createElement(MetadataFacetLink, { facetSlug: facet.slug })
     });
   }
   return custom;
@@ -4990,12 +5492,12 @@ function mergeCustomValueContent(userContent, autoContent) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React41.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React42.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React41.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React42.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, customValueContent, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
@@ -5005,7 +5507,7 @@ function Metadata({ manifest, metadata, customValueContent, ...rest }) {
     customValueContent,
     autoCustomContent
   );
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     CloverMetadata,
     {
       metadata: items,
@@ -5019,17 +5521,17 @@ function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React41.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React42.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/iiif/Properties/Id.jsx
-import React42 from "react";
+import React43 from "react";
 function Id({ title = "IIIF Manifest", id, ...props }) {
-  return /* @__PURE__ */ React42.createElement("dl", null, /* @__PURE__ */ React42.createElement("dt", null, title), /* @__PURE__ */ React42.createElement("dd", null, /* @__PURE__ */ React42.createElement("a", { href: id }, id)));
+  return /* @__PURE__ */ React43.createElement("dl", null, /* @__PURE__ */ React43.createElement("dt", null, title), /* @__PURE__ */ React43.createElement("dd", null, /* @__PURE__ */ React43.createElement("a", { href: id }, id)));
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React43 from "react";
+import React44 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -5075,10 +5577,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React43.Children.toArray(children);
-  const codeElement = childArray.find((el) => React43.isValidElement(el));
+  const childArray = React44.Children.toArray(children);
+  const codeElement = childArray.find((el) => React44.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React43.createElement("pre", props);
+    return React44.createElement("pre", props);
   }
   const {
     className = "",
@@ -5093,9 +5595,9 @@ function DocsCodeBlock(props = {}) {
   const highlightSet = parseHighlightAttr(highlightAttr);
   const copyAttr = codeProps["data-copy"];
   const enableCopy = copyAttr !== void 0 ? copyAttr === true || copyAttr === "true" || copyAttr === "" : false;
-  const [copied, setCopied] = React43.useState(false);
-  const buttonRef = React43.useRef(null);
-  const handleCopy = React43.useCallback(async () => {
+  const [copied, setCopied] = React44.useState(false);
+  const buttonRef = React44.useRef(null);
+  const handleCopy = React44.useCallback(async () => {
     const text = trimmedCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -5117,12 +5619,12 @@ function DocsCodeBlock(props = {}) {
       setCopied(false);
     }
   }, [trimmedCode]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (buttonRef.current) {
       buttonRef.current.setAttribute("data-docs-copy-hydrated", "true");
     }
   }, []);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (!buttonRef.current) return;
     if (copied) buttonRef.current.setAttribute("data-docs-copy-active", "true");
     else buttonRef.current.removeAttribute("data-docs-copy-active");
@@ -5185,27 +5687,27 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React43.createElement(
+    return React44.createElement(
       "span",
       {
         key: lineNumber,
         style,
         "data-docs-code-line": line
       },
-      React43.createElement("span", { style: lineContentStyle }, displayLine)
+      React44.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React43.createElement(
+  return React44.createElement(
     "div",
     {
       style: containerStyle,
       "data-docs-code-block": "true"
     },
-    showHeader ? React43.createElement(
+    showHeader ? React44.createElement(
       "div",
       { style: headerStyle },
-      React43.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React43.createElement(
+      React44.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React44.createElement(
         "button",
         {
           ref: buttonRef,
@@ -5216,8 +5718,8 @@ function DocsCodeBlock(props = {}) {
           "data-docs-copy-button": "true",
           style: buttonStyle
         },
-        React43.createElement("span", null, "Copy"),
-        React43.createElement(
+        React44.createElement("span", null, "Copy"),
+        React44.createElement(
           "span",
           {
             "aria-hidden": "true",
@@ -5227,7 +5729,7 @@ function DocsCodeBlock(props = {}) {
         )
       ) : null
     ) : null,
-    enableCopy ? React43.createElement("textarea", {
+    enableCopy ? React44.createElement("textarea", {
       "data-docs-copy-source": "true",
       tabIndex: -1,
       readOnly: true,
@@ -5242,29 +5744,29 @@ function DocsCodeBlock(props = {}) {
         pointerEvents: "none"
       }
     }) : null,
-    React43.createElement(
+    React44.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React43.createElement("code", { style: codeStyle }, lineElements)
+      React44.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
 
 // ui/src/docs/MarkdownTable.jsx
-import React44 from "react";
+import React45 from "react";
 function MarkdownTable({ className = "", ...rest }) {
   const merged = ["markdown-table", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React44.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React44.createElement("table", { className: merged, ...rest }));
+  return /* @__PURE__ */ React45.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React45.createElement("table", { className: merged, ...rest }));
 }
 
 // ui/src/docs/Diagram.jsx
-import React45 from "react";
+import React46 from "react";
 function CanopyDiagram() {
-  return /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React45.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React45.createElement("h3", null, "IIIF Providers"), /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 45 manifests while 5 manifests are directly retrieved as-is via IIIF endpoints."), /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Collection A"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "30 Manifests"), /* @__PURE__ */ React45.createElement("li", null, /* @__PURE__ */ React45.createElement("em", null, "Manuscripts")))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Collection B"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "15 Manifests"), /* @__PURE__ */ React45.createElement("li", null, /* @__PURE__ */ React45.createElement("em", null, "Portraits")))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Manifests (direct)"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "5 Manifests"), /* @__PURE__ */ React45.createElement("li", null, /* @__PURE__ */ React45.createElement("em", null, "Scrapbooks")))))), /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React45.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React45.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy retrieves collections and syncs all manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Automated content"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "50 manifests \u2192 50 work pages"), /* @__PURE__ */ React45.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React45.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React45.createElement("li", null, "Author narratives"), /* @__PURE__ */ React45.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Search index"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React45.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React45.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React45.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React45.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React45.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React45.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Work pages"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "50 generated HTML pages"), /* @__PURE__ */ React45.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React45.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React45.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React45.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React45.createElement("article", null, /* @__PURE__ */ React45.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React45.createElement("ul", null, /* @__PURE__ */ React45.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React45.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React45.createElement("li", null, "Optional annotation dataset"))))));
+  return /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React46.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React46.createElement("h3", null, "IIIF Providers"), /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 45 manifests while 5 manifests are directly retrieved as-is via IIIF endpoints."), /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Collection A"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "30 Manifests"), /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("em", null, "Manuscripts")))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Collection B"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "15 Manifests"), /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("em", null, "Portraits")))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Manifests (direct)"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "5 Manifests"), /* @__PURE__ */ React46.createElement("li", null, /* @__PURE__ */ React46.createElement("em", null, "Scrapbooks")))))), /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React46.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React46.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy retrieves collections and syncs all manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Automated content"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "50 manifests \u2192 50 work pages"), /* @__PURE__ */ React46.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React46.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React46.createElement("li", null, "Author narratives"), /* @__PURE__ */ React46.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Search index"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React46.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React46.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React46.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React46.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React46.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React46.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Work pages"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "50 generated HTML pages"), /* @__PURE__ */ React46.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React46.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React46.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React46.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React46.createElement("article", null, /* @__PURE__ */ React46.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React46.createElement("ul", null, /* @__PURE__ */ React46.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React46.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React46.createElement("li", null, "Optional annotation dataset"))))));
 }
 
 // ui/src/docs/ThemeShowcase.jsx
-import React46 from "react";
+import React47 from "react";
 
 // ../../node_modules/@radix-ui/colors/index.mjs
 var colors_exports = {};
@@ -9116,21 +9618,21 @@ var STEP_MAP = {
   800: 11,
   900: 12
 };
-var Section = ({ title, description, children }) => /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React46.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React46.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
-var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React46.createElement("strong", null, label)), /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React46.createElement(
+var Section = ({ title, description, children }) => /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React47.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React47.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
+var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React47.createElement("strong", null, label)), /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React47.createElement(
   "div",
   {
     key: `${label}-${stop}`,
     className: "canopy-theme-showcase__scale-stop"
   },
-  /* @__PURE__ */ React46.createElement(
+  /* @__PURE__ */ React47.createElement(
     "span",
     {
       className: "canopy-theme-showcase__scale-chip",
       style: { backgroundColor: `var(${prefix}-${stop})` }
     }
   ),
-  /* @__PURE__ */ React46.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
+  /* @__PURE__ */ React47.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
 ))));
 var AVAILABLE = new Set(
   Object.keys(colors_exports).filter(
@@ -9195,9 +9697,9 @@ var PREVIEW_DATA = buildPreviewData();
 function encodeJson(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
-var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
+var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
   const colorValue = getRadixSwatch(name);
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(
     "button",
     {
       key: `${type}-${name}`,
@@ -9208,14 +9710,14 @@ var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React4
       "data-theme-swatch-value": name,
       "aria-pressed": "false"
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       "span",
       {
         className: "canopy-theme-showcase__swatch-chip",
         style: { background: colorValue || "var(--color-gray-200)" }
       }
     ),
-    /* @__PURE__ */ React46.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
+    /* @__PURE__ */ React47.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
   );
 }));
 function ThemeShowcase() {
@@ -9375,7 +9877,7 @@ function ThemeShowcase() {
     .canopy-theme-showcase__swatch-controls { display: none; }
     .canopy-theme-showcase__clear-button { display: none; }
   `;
-  return /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React46.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React47.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React47.createElement(
     "div",
     {
       style: {
@@ -9386,18 +9888,18 @@ function ThemeShowcase() {
         marginBottom: "1rem"
       }
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       Section,
       {
         title: "Appearance",
         description: "Pick the base light or dark mode for the theme preview."
       },
-      /* @__PURE__ */ React46.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
+      /* @__PURE__ */ React47.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
         const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
         const baseClass = "canopy-theme-showcase__appearance-button";
         const isDefault = mode === DEFAULTS.appearance;
         const className = isDefault ? `${baseClass} is-active` : baseClass;
-        return /* @__PURE__ */ React46.createElement(
+        return /* @__PURE__ */ React47.createElement(
           "button",
           {
             key: mode,
@@ -9409,7 +9911,7 @@ function ThemeShowcase() {
         );
       }))
     ),
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       "button",
       {
         type: "button",
@@ -9418,13 +9920,13 @@ function ThemeShowcase() {
       },
       "Reset"
     )
-  ), /* @__PURE__ */ React46.createElement(
+  ), /* @__PURE__ */ React47.createElement(
     Section,
     {
       title: "Color scales",
       description: "Accent and gray ramps from the active theme."
     },
-    /* @__PURE__ */ React46.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React47.createElement(
       ColorScaleRow,
       {
         key: scale.label,
@@ -9432,13 +9934,13 @@ function ThemeShowcase() {
         prefix: scale.prefix
       }
     )))
-  ), /* @__PURE__ */ React46.createElement(
+  ), /* @__PURE__ */ React47.createElement(
     Section,
     {
       title: "Accent color palette options",
       description: "Click a swatch to temporarily override the accent palette."
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       ColorsLabeled,
       {
         colors: accentColors,
@@ -9446,13 +9948,13 @@ function ThemeShowcase() {
         getRadixSwatch
       }
     )
-  ), /* @__PURE__ */ React46.createElement(
+  ), /* @__PURE__ */ React47.createElement(
     Section,
     {
       title: "Gray color palette options",
       description: "Click a swatch to preview the neutral ramp for surfaces and text."
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React47.createElement(
       ColorsLabeled,
       {
         colors: grayColors,
@@ -9460,7 +9962,7 @@ function ThemeShowcase() {
         getRadixSwatch
       }
     )
-  ), /* @__PURE__ */ React46.createElement(
+  ), /* @__PURE__ */ React47.createElement(
     "script",
     {
       type: "application/json",
@@ -9482,6 +9984,8 @@ export {
   Container,
   DocsCodeBlock,
   MarkdownTable as DocsMarkdownTable,
+  Gallery,
+  GalleryItem,
   GoogleAnalytics,
   HelloWorld,
   Id,