@canopy-iiif/app 0.9.0 → 0.9.2

package/ui/dist/server.mjs

@@ -479,8 +479,338 @@ function SubNavigation({
   return /* @__PURE__ */ React7.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React7.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
 }
 
-// ui/src/search/MdxSearchResults.jsx
+// ui/src/layout/Layout.jsx
+import React9 from "react";
+import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
+
+// ui/src/layout/ContentNavigation.jsx
 import React8 from "react";
+var SCROLL_OFFSET_REM = 1.618;
+function depthIndex(depth) {
+  return Math.max(0, Math.min(5, (depth || 1) - 1));
+}
+function ContentNavigation({
+  items = [],
+  className = "",
+  style = {},
+  heading,
+  headingId,
+  pageTitle,
+  ariaLabel
+}) {
+  const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+  const savedDepthsRef = React8.useRef(null);
+  if ((!items || !items.length) && !headingId) return null;
+  const combinedClassName = ["canopy-sub-navigation canopy-content-navigation", className].filter(Boolean).join(" ");
+  const effectiveHeading = heading || pageTitle || null;
+  const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
+  const getSavedDepth = React8.useCallback(
+    (id, fallback) => {
+      if (!id) return fallback;
+      if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
+      const store = savedDepthsRef.current;
+      if (store.has(id)) return store.get(id);
+      store.set(id, fallback);
+      return fallback;
+    },
+    []
+  );
+  const headingEntries = React8.useMemo(() => {
+    const entries = [];
+    const seen = /* @__PURE__ */ new Set();
+    if (headingId) {
+      const topId = String(headingId);
+      entries.push({ id: topId, depth: 1 });
+      seen.add(topId);
+    }
+    const pushNodes = (nodes) => {
+      if (!Array.isArray(nodes)) return;
+      nodes.forEach((node) => {
+        if (!node || !node.id) return;
+        const id = String(node.id);
+        if (seen.has(id)) return;
+        seen.add(id);
+        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        entries.push({ id, depth });
+        if (node.children && node.children.length) pushNodes(node.children);
+      });
+    };
+    pushNodes(items);
+    return entries;
+  }, [headingId, items, getSavedDepth]);
+  const fallbackId = headingEntries.length ? headingEntries[0].id : headingId || null;
+  const [activeId, setActiveId] = React8.useState(fallbackId);
+  const activeIdRef = React8.useRef(activeId);
+  React8.useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+  React8.useEffect(() => {
+    if (!headingEntries.length) return;
+    if (!headingEntries.some((entry) => entry.id === activeIdRef.current)) {
+      const next = headingEntries[0].id;
+      activeIdRef.current = next;
+      setActiveId(next);
+    }
+  }, [headingEntries]);
+  const computeOffsetPx = React8.useCallback(() => {
+    if (!isBrowser) return 0;
+    try {
+      const root = document.documentElement;
+      const fontSize = root ? parseFloat(window.getComputedStyle(root).fontSize || "16") || 16 : 16;
+      return fontSize * SCROLL_OFFSET_REM;
+    } catch (_) {
+      return 0;
+    }
+  }, [isBrowser]);
+  const headingElementsRef = React8.useRef([]);
+  const updateActiveFromElements = React8.useCallback(
+    (elements) => {
+      if (!elements || !elements.length) return;
+      const offset = computeOffsetPx();
+      let nextId = elements[0].id;
+      for (const { id, element } of elements) {
+        const rect = element.getBoundingClientRect();
+        if (rect.top - offset <= 0) {
+          nextId = id;
+        } else {
+          break;
+        }
+      }
+      if (nextId && nextId !== activeIdRef.current) {
+        activeIdRef.current = nextId;
+        setActiveId(nextId);
+      }
+    },
+    [computeOffsetPx]
+  );
+  React8.useEffect(() => {
+    if (!isBrowser) return void 0;
+    const elements = headingEntries.map((entry) => {
+      const element = document.getElementById(entry.id);
+      return element ? { id: entry.id, element } : null;
+    }).filter(Boolean);
+    headingElementsRef.current = elements;
+    updateActiveFromElements(elements);
+    if (!elements.length) return void 0;
+    let ticking = false;
+    const handle = () => {
+      if (!ticking) {
+        ticking = true;
+        window.requestAnimationFrame(() => {
+          updateActiveFromElements(elements);
+          ticking = false;
+        });
+      }
+    };
+    window.addEventListener("scroll", handle, { passive: true });
+    window.addEventListener("resize", handle);
+    return () => {
+      window.removeEventListener("scroll", handle);
+      window.removeEventListener("resize", handle);
+    };
+  }, [headingEntries, isBrowser, updateActiveFromElements]);
+  const handleAnchorClick = React8.useCallback(
+    (event, targetId, options = {}) => {
+      var _a;
+      try {
+        if (event && typeof event.preventDefault === "function") event.preventDefault();
+      } catch (_) {
+      }
+      if (!isBrowser) return;
+      const offset = computeOffsetPx();
+      let top = 0;
+      if (targetId && targetId !== "top" && !options.scrollToTop) {
+        const el = document.getElementById(targetId);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          top = window.scrollY + rect.top - offset;
+        }
+      }
+      if (!Number.isFinite(top) || top < 0 || options.scrollToTop) top = 0;
+      const nextId = targetId && targetId !== "top" ? targetId : ((_a = headingEntries[0]) == null ? void 0 : _a.id) || headingId || null;
+      if (nextId) {
+        activeIdRef.current = nextId;
+        setActiveId(nextId);
+      }
+      try {
+        window.scrollTo({ top, behavior: "smooth" });
+      } catch (_) {
+        window.scrollTo(0, top);
+      }
+    },
+    [computeOffsetPx, headingEntries, headingId, isBrowser]
+  );
+  const renderNodes2 = React8.useCallback(
+    (nodes) => {
+      if (!nodes || !nodes.length) return null;
+      return nodes.map((node) => {
+        if (!node) return null;
+        const id = node.id ? String(node.id) : "";
+        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        const idx = depthIndex(depth);
+        const isActive = id && activeId === id;
+        return /* @__PURE__ */ React8.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React8.createElement(
+          "a",
+          {
+            className: `canopy-sub-navigation__link depth-${idx}${isActive ? " is-active" : ""}`,
+            href: id ? `#${id}` : "#",
+            onClick: (event) => handleAnchorClick(event, id || null),
+            "aria-current": isActive ? "location" : void 0
+          },
+          node.title
+        ), node.children && node.children.length ? /* @__PURE__ */ React8.createElement(
+          "ul",
+          {
+            className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
+            role: "list"
+          },
+          renderNodes2(node.children)
+        ) : null);
+      });
+    },
+    [handleAnchorClick, activeId, getSavedDepth]
+  );
+  const nestedItems = renderNodes2(items);
+  const topLink = headingId ? /* @__PURE__ */ React8.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React8.createElement(
+    "a",
+    {
+      className: `canopy-sub-navigation__link depth-0${activeId === headingId ? " is-active" : ""}`,
+      href: `#${headingId}`,
+      onClick: (event) => handleAnchorClick(event, headingId, { scrollToTop: true }),
+      "aria-current": activeId === headingId ? "location" : void 0
+    },
+    effectiveHeading || pageTitle || headingId
+  ), nestedItems ? /* @__PURE__ */ React8.createElement(
+    "ul",
+    {
+      className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
+      role: "list"
+    },
+    nestedItems
+  ) : null) : null;
+  return /* @__PURE__ */ React8.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
+}
+
+// ui/src/layout/Layout.jsx
+function buildHeadingTree(headings) {
+  if (!Array.isArray(headings) || !headings.length) return [];
+  const root = [];
+  const stack = [];
+  headings.forEach((heading) => {
+    if (!heading || typeof heading !== "object") return;
+    const depth = typeof heading.depth === "number" ? heading.depth : heading.level;
+    if (typeof depth !== "number" || depth < 2) return;
+    const entry = {
+      id: heading.id || heading.slug || heading.title,
+      title: heading.title || heading.text || heading.id,
+      depth,
+      children: []
+    };
+    while (stack.length && stack[stack.length - 1].depth >= entry.depth) {
+      stack.pop();
+    }
+    if (!stack.length) {
+      root.push(entry);
+    } else {
+      stack[stack.length - 1].children.push(entry);
+    }
+    stack.push(entry);
+  });
+  return root;
+}
+function buildNavigationAside(sidebar, className) {
+  if (!sidebar) {
+    return /* @__PURE__ */ React9.createElement(SubNavigation, { className });
+  }
+  if (typeof sidebar === "function") {
+    return React9.createElement(sidebar);
+  }
+  return sidebar;
+}
+function Layout({
+  children,
+  sidebar,
+  navigation = true,
+  fluid = false,
+  contentNavigation = true,
+  className = "",
+  contentClassName = "",
+  sidebarClassName = "",
+  contentNavigationClassName = "",
+  ...rest
+}) {
+  const PageContext = navigationHelpers2 && typeof navigationHelpers2.getPageContext === "function" ? navigationHelpers2.getPageContext() : null;
+  const context = PageContext ? React9.useContext(PageContext) : null;
+  const pageHeadings = React9.useMemo(() => {
+    const headings = context && context.page ? context.page.headings : null;
+    return Array.isArray(headings) ? headings : [];
+  }, [context]);
+  const contentHeading = React9.useMemo(() => {
+    const first = pageHeadings.find((heading) => {
+      const depth = heading && (heading.depth || heading.level);
+      return depth === 1;
+    });
+    return first && first.title ? first.title : null;
+  }, [pageHeadings]);
+  const headingAnchorId = React9.useMemo(() => {
+    const first = pageHeadings.find((heading) => {
+      const depth = heading && (heading.depth || heading.level);
+      return depth === 1;
+    });
+    return first && first.id ? first.id : null;
+  }, [pageHeadings]);
+  const headingTree = React9.useMemo(
+    () => buildHeadingTree(pageHeadings),
+    [pageHeadings]
+  );
+  const showLeftColumn = navigation !== false;
+  const hasContentNavigation = navigation !== false && contentNavigation !== false && headingTree.length > 0;
+  const gridClass = (() => {
+    if (showLeftColumn && hasContentNavigation) {
+      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)_14rem] md:items-start md:gap-10";
+    }
+    if (showLeftColumn) {
+      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)] md:items-start md:gap-10";
+    }
+    if (hasContentNavigation) {
+      return "md:grid md:grid-cols-[minmax(0,1fr)_14rem] md:items-start md:gap-10";
+    }
+    return "";
+  })();
+  const containerClassName = [
+    "w-full py-6 getting-started-layout",
+    gridClass,
+    fluid ? "px-4 md:px-8 lg:px-12" : "mx-auto max-w-content px-4",
+    className
+  ].filter(Boolean).join(" ");
+  const leftAsideClassName = [
+    "mt-8 md:mt-0 md:order-1 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-sm text-slate-600",
+    sidebarClassName
+  ].filter(Boolean).join(" ");
+  const contentOrderClass = showLeftColumn ? "md:order-2" : hasContentNavigation ? "md:order-1" : "";
+  const contentClassNames = [
+    "space-y-6",
+    contentOrderClass,
+    contentClassName
+  ].filter(Boolean).join(" ");
+  const contentNavigationAsideClassName = [
+    "hidden md:block md:order-3 mt-8 md:mt-0 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-sm text-slate-600",
+    contentNavigationClassName
+  ].filter(Boolean).join(" ");
+  const sidebarNode = showLeftColumn ? buildNavigationAside(sidebar, sidebarClassName) : null;
+  return /* @__PURE__ */ React9.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React9.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React9.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React9.createElement("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React9.createElement(
+    ContentNavigation,
+    {
+      items: headingTree,
+      heading: contentHeading || void 0,
+      headingId: headingAnchorId || void 0,
+      pageTitle: context && context.page ? context.page.title : void 0
+    }
+  )) : null);
+}
+
+// ui/src/search/MdxSearchResults.jsx
+import React10 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -488,11 +818,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React9 from "react";
+import React11 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -500,11 +830,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React10 from "react";
+import React12 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -512,18 +842,18 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React12.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React12.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React14 from "react";
+import React16 from "react";
 
 // ui/src/Icons.jsx
-import React11 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React11.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 React13 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
-import React12 from "react";
+import React14 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -586,18 +916,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React12.useMemo(
+  const action = React14.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React12.useId === "function" ? React12.useId() : void 0;
-  const [fallbackId] = React12.useState(
+  const autoId = typeof React14.useId === "function" ? React14.useId() : void 0;
+  const [fallbackId] = React14.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React12.useRef(null);
-  const [hasValue, setHasValue] = React12.useState(false);
-  const focusInput = React12.useCallback(() => {
+  const inputRef = React14.useRef(null);
+  const [hasValue, setHasValue] = React14.useState(false);
+  const focusInput = React14.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -610,7 +940,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React12.useCallback(
+  const handlePointerDown = React14.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -622,23 +952,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React12.useCallback((event) => {
+  const handleInputChange = React14.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 = React12.useCallback((event) => {
+  const handleClear = React14.useCallback((event) => {
   }, []);
-  const handleClearKey = React12.useCallback(
+  const handleClearKey = React14.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -647,7 +977,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "form",
     {
       action,
@@ -659,7 +989,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React12.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React12.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement(
       "input",
       {
         id: inputId,
@@ -675,7 +1005,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React12.createElement(
+    hasValue ? /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "button",
@@ -688,32 +1018,32 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React12.createElement("span", null, text),
-      /* @__PURE__ */ React12.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React12.createElement("span", null, "\u2318"), /* @__PURE__ */ React12.createElement("span", null, "K"))
+      /* @__PURE__ */ React14.createElement("span", null, text),
+      /* @__PURE__ */ React14.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React14.createElement("span", null, "\u2318"), /* @__PURE__ */ React14.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React13 from "react";
+import React15 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React13.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React15.createElement("div", { id: "cplist" })
   );
 }
 
@@ -733,11 +1063,11 @@ 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__ */ React14.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React14.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React14.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React14.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React14.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/search/SearchPanel.jsx
-import React15 from "react";
+import React17 from "react";
 function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -754,11 +1084,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__ */ React15.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React15.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React15.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React16 from "react";
+import React18 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -783,29 +1113,30 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React16.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React16.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React16.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverMetadata, { metadata: items, ...rest });
 }
 function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   const stmt = requiredStatement || manifest && manifest.requiredStatement;
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 export {
   HelloWorld,
   interstitials_exports as Interstitials,
   Label,
+  Layout,
   Metadata,
   MdxRelatedItems as RelatedItems,
   RequiredStatement,