@canopy-iiif/app 0.9.13 → 0.9.14

package/ui/dist/server.mjs

@@ -173,7 +173,7 @@ __export(interstitials_exports, {
 });
 
 // ui/src/interstitials/Hero.jsx
-import React6 from "react";
+import React8 from "react";
 import helpers from "@canopy-iiif/app/lib/components/featured.js";
 
 // ui/src/interstitials/hero-utils.js
@@ -183,6 +183,48 @@ function computeHeroHeightStyle(height) {
   return { width: "100%", height: val };
 }
 
+// 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/interstitials/Hero.jsx
 var basePath = (() => {
   try {
@@ -225,7 +267,8 @@ function normalizeLinks(links) {
     const title = link.title ? String(link.title) : "";
     if (!href || !title) return null;
     const type = link.type === "secondary" ? "secondary" : "primary";
-    return { href, title, type };
+    const target = link.target ? String(link.target) : void 0;
+    return { href, title, type, target };
   }).filter(Boolean);
 }
 function sanitizeRest(rest) {
@@ -332,7 +375,7 @@ function Hero({
       isStaticCaption ? "canopy-interstitial__pane--static" : ""
     ].filter(Boolean).join(" ");
     if (isStaticCaption) {
-      return /* @__PURE__ */ React6.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React6.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React8.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React8.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React8.createElement(
         "img",
         {
           src: slide.thumbnail,
@@ -341,9 +384,9 @@ function Hero({
           className: "canopy-interstitial__media canopy-interstitial__media--static",
           loading: idx === 0 ? "eager" : "lazy"
         }
-      )) : null, slide.title ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
+      )) : null, slide.title ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React8.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
     }
-    return /* @__PURE__ */ React6.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React6.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React8.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React8.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React8.createElement(
       "img",
       {
         src: slide.thumbnail,
@@ -352,34 +395,35 @@ function Hero({
         className: "canopy-interstitial__media",
         loading: idx === 0 ? "eager" : "lazy"
       }
-    ) : null, showVeil ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
+    ) : null, showVeil ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React8.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
   };
-  const renderSlider = (options = {}) => /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React6.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React6.createElement(
+  const renderSlider = (options = {}) => /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React8.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
       "aria-label": "Previous slide",
       className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--prev swiper-button-prev"
     }
-  ), /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     "button",
     {
       type: "button",
       "aria-label": "Next slide",
       className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--next swiper-button-next"
     }
-  )), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
-  const overlayContent = /* @__PURE__ */ React6.createElement(React6.Fragment, null, overlayTitle ? /* @__PURE__ */ React6.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React6.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, overlayLinks.length ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__actions" }, overlayLinks.map((link) => /* @__PURE__ */ React6.createElement(
-    "a",
+  )), /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
+  const overlayContent = /* @__PURE__ */ React8.createElement(React8.Fragment, null, overlayTitle ? /* @__PURE__ */ React8.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React8.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, overlayLinks.length ? /* @__PURE__ */ React8.createElement(ButtonWrapper, { className: "canopy-interstitial__actions" }, overlayLinks.map((link) => /* @__PURE__ */ React8.createElement(
+    Button,
     {
       key: `${link.href}-${link.title}`,
       href: link.href,
-      className: link.type === "secondary" ? "canopy-button canopy-button--secondary" : "canopy-button canopy-button--primary"
-    },
-    link.title
+      label: link.title,
+      variant: link.type,
+      target: link.target
+    }
   ))) : null);
   const cleanedProps = sanitizeRest(rest);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React8.createElement(
     "section",
     {
       className: containerClassName,
@@ -387,12 +431,12 @@ function Hero({
       style: heroStyles,
       ...cleanedProps
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" })))
+    /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React8.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" })))
   );
 }
 
 // ui/src/layout/SubNavigation.jsx
-import React7 from "react";
+import React9 from "react";
 import navigationHelpers from "@canopy-iiif/app/lib/components/navigation.js";
 function resolveRelativeCandidate(page, current) {
   if (page && typeof page.relativePath === "string" && page.relativePath) return page.relativePath;
@@ -417,14 +461,14 @@ function renderNodes(nodes, parentKey = "node") {
     if (node.isActive) classes.push("is-active");
     const linkClass = classes.join(" ");
     const Tag = node.href ? "a" : "span";
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "li",
       {
         key,
         className: "canopy-sub-navigation__item",
         "data-depth": depth
       },
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React9.createElement(
         Tag,
         {
           className: linkClass,
@@ -433,7 +477,7 @@ function renderNodes(nodes, parentKey = "node") {
         },
         node.title || node.slug
       ),
-      showChildren ? /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
+      showChildren ? /* @__PURE__ */ React9.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
     );
   });
 }
@@ -447,12 +491,12 @@ function SubNavigation({
   ariaLabel
 }) {
   const PageContext = navigationHelpers && navigationHelpers.getPageContext ? navigationHelpers.getPageContext() : null;
-  const context = PageContext ? React7.useContext(PageContext) : null;
+  const context = PageContext ? React9.useContext(PageContext) : null;
   const contextNavigation = context && context.navigation ? context.navigation : null;
   const contextPage = context && context.page ? context.page : null;
   const effectiveNavigation = navigationProp || contextNavigation;
   const effectivePage = page || contextPage;
-  const resolvedNavigation = React7.useMemo(() => {
+  const resolvedNavigation = React9.useMemo(() => {
     if (effectiveNavigation && effectiveNavigation.root) return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
     if (!candidate) return effectiveNavigation || null;
@@ -476,15 +520,15 @@ function SubNavigation({
   if (!Object.prototype.hasOwnProperty.call(inlineStyle, "--sub-nav-indent")) {
     inlineStyle["--sub-nav-indent"] = "0.85rem";
   }
-  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")));
+  return /* @__PURE__ */ React9.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React9.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
 }
 
 // ui/src/layout/Layout.jsx
-import React9 from "react";
+import React11 from "react";
 import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/ContentNavigation.jsx
-import React8 from "react";
+import React10 from "react";
 var SCROLL_OFFSET_REM = 1.618;
 function depthIndex(depth) {
   return Math.max(0, Math.min(5, (depth || 1) - 1));
@@ -499,12 +543,12 @@ function ContentNavigation({
   ariaLabel
 }) {
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-  const savedDepthsRef = React8.useRef(null);
+  const savedDepthsRef = React10.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(
+  const getSavedDepth = React10.useCallback(
     (id, fallback) => {
       if (!id) return fallback;
       if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
@@ -515,7 +559,7 @@ function ContentNavigation({
     },
     []
   );
-  const headingEntries = React8.useMemo(() => {
+  const headingEntries = React10.useMemo(() => {
     const entries = [];
     const seen = /* @__PURE__ */ new Set();
     if (headingId) {
@@ -539,12 +583,12 @@ function ContentNavigation({
     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(() => {
+  const [activeId, setActiveId] = React10.useState(fallbackId);
+  const activeIdRef = React10.useRef(activeId);
+  React10.useEffect(() => {
     activeIdRef.current = activeId;
   }, [activeId]);
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!headingEntries.length) return;
     if (!headingEntries.some((entry) => entry.id === activeIdRef.current)) {
       const next = headingEntries[0].id;
@@ -552,7 +596,7 @@ function ContentNavigation({
       setActiveId(next);
     }
   }, [headingEntries]);
-  const computeOffsetPx = React8.useCallback(() => {
+  const computeOffsetPx = React10.useCallback(() => {
     if (!isBrowser) return 0;
     try {
       const root = document.documentElement;
@@ -562,8 +606,8 @@ function ContentNavigation({
       return 0;
     }
   }, [isBrowser]);
-  const headingElementsRef = React8.useRef([]);
-  const updateActiveFromElements = React8.useCallback(
+  const headingElementsRef = React10.useRef([]);
+  const updateActiveFromElements = React10.useCallback(
     (elements) => {
       if (!elements || !elements.length) return;
       const offset = computeOffsetPx();
@@ -583,7 +627,7 @@ function ContentNavigation({
     },
     [computeOffsetPx]
   );
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (!isBrowser) return void 0;
     const elements = headingEntries.map((entry) => {
       const element = document.getElementById(entry.id);
@@ -609,7 +653,7 @@ function ContentNavigation({
       window.removeEventListener("resize", handle);
     };
   }, [headingEntries, isBrowser, updateActiveFromElements]);
-  const handleAnchorClick = React8.useCallback(
+  const handleAnchorClick = React10.useCallback(
     (event, targetId, options = {}) => {
       var _a;
       try {
@@ -640,7 +684,7 @@ function ContentNavigation({
     },
     [computeOffsetPx, headingEntries, headingId, isBrowser]
   );
-  const renderNodes2 = React8.useCallback(
+  const renderNodes2 = React10.useCallback(
     (nodes) => {
       if (!nodes || !nodes.length) return null;
       return nodes.map((node) => {
@@ -649,7 +693,7 @@ function ContentNavigation({
         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(
+        return /* @__PURE__ */ React10.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React10.createElement(
           "a",
           {
             className: `canopy-sub-navigation__link depth-${idx}${isActive ? " is-active" : ""}`,
@@ -658,7 +702,7 @@ function ContentNavigation({
             "aria-current": isActive ? "location" : void 0
           },
           node.title
-        ), node.children && node.children.length ? /* @__PURE__ */ React8.createElement(
+        ), node.children && node.children.length ? /* @__PURE__ */ React10.createElement(
           "ul",
           {
             className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -671,7 +715,7 @@ function ContentNavigation({
     [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(
+  const topLink = headingId ? /* @__PURE__ */ React10.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React10.createElement(
     "a",
     {
       className: `canopy-sub-navigation__link depth-0${activeId === headingId ? " is-active" : ""}`,
@@ -680,7 +724,7 @@ function ContentNavigation({
       "aria-current": activeId === headingId ? "location" : void 0
     },
     effectiveHeading || pageTitle || headingId
-  ), nestedItems ? /* @__PURE__ */ React8.createElement(
+  ), nestedItems ? /* @__PURE__ */ React10.createElement(
     "ul",
     {
       className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -688,7 +732,7 @@ function ContentNavigation({
     },
     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));
+  return /* @__PURE__ */ React10.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
 }
 
 // ui/src/layout/Layout.jsx
@@ -720,10 +764,10 @@ function buildHeadingTree(headings) {
 }
 function buildNavigationAside(sidebar, className) {
   if (!sidebar) {
-    return /* @__PURE__ */ React9.createElement(SubNavigation, { className });
+    return /* @__PURE__ */ React11.createElement(SubNavigation, { className });
   }
   if (typeof sidebar === "function") {
-    return React9.createElement(sidebar);
+    return React11.createElement(sidebar);
   }
   return sidebar;
 }
@@ -740,26 +784,26 @@ function Layout({
   ...rest
 }) {
   const PageContext = navigationHelpers2 && typeof navigationHelpers2.getPageContext === "function" ? navigationHelpers2.getPageContext() : null;
-  const context = PageContext ? React9.useContext(PageContext) : null;
-  const pageHeadings = React9.useMemo(() => {
+  const context = PageContext ? React11.useContext(PageContext) : null;
+  const pageHeadings = React11.useMemo(() => {
     const headings = context && context.page ? context.page.headings : null;
     return Array.isArray(headings) ? headings : [];
   }, [context]);
-  const contentHeading = React9.useMemo(() => {
+  const contentHeading = React11.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 headingAnchorId = React11.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(
+  const headingTree = React11.useMemo(
     () => buildHeadingTree(pageHeadings),
     [pageHeadings]
   );
@@ -798,7 +842,7 @@ function Layout({
     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(
+  return /* @__PURE__ */ React11.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React11.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React11.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React11.createElement("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React11.createElement(
     ContentNavigation,
     {
       items: headingTree,
@@ -810,17 +854,17 @@ function Layout({
 }
 
 // ui/src/layout/CanopyHeader.jsx
-import React16 from "react";
+import React18 from "react";
 
 // ui/src/search/SearchPanel.jsx
-import React13 from "react";
+import React15 from "react";
 
 // ui/src/Icons.jsx
-import React10 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React10.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React10.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+import React12 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React12.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 React11 from "react";
+import React13 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -883,18 +927,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React11.useMemo(
+  const action = React13.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React11.useId === "function" ? React11.useId() : void 0;
-  const [fallbackId] = React11.useState(
+  const autoId = typeof React13.useId === "function" ? React13.useId() : void 0;
+  const [fallbackId] = React13.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React11.useRef(null);
-  const [hasValue, setHasValue] = React11.useState(false);
-  const focusInput = React11.useCallback(() => {
+  const inputRef = React13.useRef(null);
+  const [hasValue, setHasValue] = React13.useState(false);
+  const focusInput = React13.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -907,7 +951,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React11.useCallback(
+  const handlePointerDown = React13.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -919,23 +963,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React11.useCallback((event) => {
+  const handleInputChange = React13.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 = React11.useCallback((event) => {
+  const handleClear = React13.useCallback((event) => {
   }, []);
-  const handleClearKey = React11.useCallback(
+  const handleClearKey = React13.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -944,7 +988,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "form",
     {
       action,
@@ -956,7 +1000,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React11.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React11.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React13.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React13.createElement(
       "input",
       {
         id: inputId,
@@ -972,7 +1016,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React11.createElement(
+    hasValue ? /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "button",
@@ -985,32 +1029,32 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React11.createElement("span", null, text),
-      /* @__PURE__ */ React11.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React11.createElement("span", null, "\u2318"), /* @__PURE__ */ React11.createElement("span", null, "K"))
+      /* @__PURE__ */ React13.createElement("span", null, text),
+      /* @__PURE__ */ React13.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React13.createElement("span", null, "\u2318"), /* @__PURE__ */ React13.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React12 from "react";
+import React14 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React12.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React14.createElement("div", { id: "cplist" })
   );
 }
 
@@ -1031,11 +1075,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__ */ React13.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React13.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React13.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React13.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React13.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  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) } }));
 }
 
 // ui/src/layout/CanopyBrand.jsx
-import React14 from "react";
+import React16 from "react";
 function CanopyBrand(props = {}) {
   const {
     labelId,
@@ -1046,11 +1090,11 @@ function CanopyBrand(props = {}) {
   } = props || {};
   const spanProps = labelId ? { id: labelId } : {};
   const classes = ["canopy-logo", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React14.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React14.createElement(Logo, null) : null, /* @__PURE__ */ React14.createElement("span", { ...spanProps }, label));
+  return /* @__PURE__ */ React16.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React16.createElement(Logo, null) : null, /* @__PURE__ */ React16.createElement("span", { ...spanProps }, label));
 }
 
 // ui/src/layout/CanopyModal.jsx
-import React15 from "react";
+import React17 from "react";
 function CanopyModal(props = {}) {
   const {
     id,
@@ -1101,7 +1145,7 @@ function CanopyModal(props = {}) {
   if (padded) bodyClasses.push("canopy-modal__body--padded");
   if (bodyClassName) bodyClasses.push(bodyClassName);
   const bodyClassNameValue = bodyClasses.join(" ");
-  return /* @__PURE__ */ React15.createElement("div", { ...modalProps }, /* @__PURE__ */ React15.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React15.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { ...modalProps }, /* @__PURE__ */ React17.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React17.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React17.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1111,8 +1155,8 @@ function CanopyModal(props = {}) {
       strokeWidth: "1.5",
       className: "canopy-modal__close-icon"
     },
-    /* @__PURE__ */ React15.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
-  ), /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React15.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React15.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React17.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React17.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React17.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React17.createElement(
     CanopyBrand,
     {
       labelId: resolvedLabelId,
@@ -1316,7 +1360,7 @@ function HeaderScript() {
   });
 })();
   `;
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -1340,7 +1384,7 @@ function CanopyHeader(props = {}) {
     logo: SiteLogo
   } = props;
   const navLinks = ensureArray(navLinksProp);
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("header", { className: "canopy-header", "data-mobile-nav": "closed", "data-mobile-search": "closed" }, /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("header", { className: "canopy-header", "data-mobile-nav": "closed", "data-mobile-search": "closed" }, /* @__PURE__ */ React18.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React18.createElement(
     CanopyBrand,
     {
       label: title,
@@ -1348,7 +1392,7 @@ function CanopyHeader(props = {}) {
       className: "canopy-header__brand-link",
       Logo: SiteLogo
     }
-  )), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React16.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })), /* @__PURE__ */ React16.createElement("nav", { className: "canopy-nav-links canopy-header__desktop-nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.href, href: link.href }, link.label || link.href))), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React16.createElement(
+  )), /* @__PURE__ */ React18.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React18.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })), /* @__PURE__ */ React18.createElement("nav", { className: "canopy-nav-links canopy-header__desktop-nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React18.createElement("a", { key: link.href, href: link.href }, link.label || link.href))), /* @__PURE__ */ React18.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React18.createElement(
     "button",
     {
       type: "button",
@@ -1358,7 +1402,7 @@ function CanopyHeader(props = {}) {
       "aria-expanded": "false",
       "data-canopy-header-toggle": "search"
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1368,9 +1412,9 @@ function CanopyHeader(props = {}) {
         strokeWidth: "1.5",
         className: "canopy-header__search-icon"
       },
-      /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-3.8-3.8M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" })
+      /* @__PURE__ */ React18.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-3.8-3.8M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" })
     )
-  ), /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React18.createElement(
     "button",
     {
       type: "button",
@@ -1380,7 +1424,7 @@ function CanopyHeader(props = {}) {
       "aria-expanded": "false",
       "data-canopy-header-toggle": "nav"
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1390,9 +1434,9 @@ function CanopyHeader(props = {}) {
         stroke: "currentColor",
         className: "canopy-header__menu-icon"
       },
-      /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
+      /* @__PURE__ */ React18.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
     )
-  ))), /* @__PURE__ */ React16.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     CanopyModal,
     {
       id: "canopy-modal-nav",
@@ -1404,8 +1448,8 @@ function CanopyHeader(props = {}) {
       closeLabel: "Close navigation",
       closeDataAttr: "nav"
     },
-    /* @__PURE__ */ React16.createElement("nav", { className: "canopy-nav-links canopy-modal__nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.href, href: link.href }, link.label || link.href)))
-  ), /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement("nav", { className: "canopy-nav-links canopy-modal__nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React18.createElement("a", { key: link.href, href: link.href }, link.label || link.href)))
+  ), /* @__PURE__ */ React18.createElement(
     CanopyModal,
     {
       id: "canopy-modal-search",
@@ -1418,19 +1462,26 @@ function CanopyHeader(props = {}) {
       closeDataAttr: "search",
       bodyClassName: "canopy-modal__body--search"
     },
-    /* @__PURE__ */ React16.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })
-  ), /* @__PURE__ */ React16.createElement(HeaderScript, null));
+    /* @__PURE__ */ React18.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })
+  ), /* @__PURE__ */ React18.createElement(HeaderScript, null));
 }
 
 // ui/src/layout/CanopyFooter.jsx
-import React17 from "react";
+import React19 from "react";
 function CanopyFooter({ className = "", children }) {
   const footerClassName = ["canopy-footer", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React17.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React17.createElement("div", { className: "canopy-footer__inner" }, children));
+  return /* @__PURE__ */ React19.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React19.createElement("div", { className: "canopy-footer__inner" }, children));
+}
+
+// ui/src/layout/Container.jsx
+import React20 from "react";
+function Container({ className = "", children, ...rest }) {
+  const classes = ["mx-auto", "max-w-content", "w-full", "px-6", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React20.createElement("div", { className: classes, ...rest }, children);
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React18 from "react";
+import React21 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -1438,11 +1489,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React18.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 React19 from "react";
+import React22 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -1450,11 +1501,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React19.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React19.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 React20 from "react";
+import React23 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -1462,11 +1513,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React20.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React20.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-form/MdxSearchFormModal.jsx
-import React21 from "react";
+import React24 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -1482,11 +1533,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__ */ React21.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React21.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React21.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React21.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React24.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React24.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React24.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React24.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React24.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React22 from "react";
+import React25 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -1511,28 +1562,28 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React22.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React25.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React22.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React25.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React22.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React25.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__ */ React22.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React25.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React23 from "react";
+import React26 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -1578,10 +1629,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React23.Children.toArray(children);
-  const codeElement = childArray.find((el) => React23.isValidElement(el));
+  const childArray = React26.Children.toArray(children);
+  const codeElement = childArray.find((el) => React26.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React23.createElement("pre", props);
+    return React26.createElement("pre", props);
   }
   const {
     className = "",
@@ -1596,8 +1647,8 @@ 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] = React23.useState(false);
-  const handleCopy = React23.useCallback(async () => {
+  const [copied, setCopied] = React26.useState(false);
+  const handleCopy = React26.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -1623,7 +1674,7 @@ function DocsCodeBlock(props = {}) {
     borderRadius: "12px",
     overflow: "hidden",
     margin: "1.5rem 0",
-    background: "var(--color-brand-100, #e0f2ff)",
+    background: "var(--color-brand-100)",
     fontFamily: "var(--font-mono)",
     fontSize: "0.85rem"
   };
@@ -1633,13 +1684,14 @@ function DocsCodeBlock(props = {}) {
     justifyContent: "space-between",
     padding: "1rem 1.25rem",
     fontWeight: 700,
-    background: "var(--color-brand-200, #dbeafe)",
+    background: "var(--color-brand-100)",
+    borderBottom: "1px solid var(--color-brand-200)",
     color: "var(--color-brand-900)"
   };
   const preStyle = {
     margin: 0,
-    background: "var(--color-brand-100, #e0f2ff)",
-    color: "var(--color-brand-800, #1f2d5c)",
+    background: "var(--color-brand-100)",
+    color: "var(--color-brand-800)",
     lineHeight: 1.55,
     padding: "1rem 0",
     overflowX: "auto"
@@ -1660,20 +1712,20 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React23.createElement(
+    return React26.createElement(
       "span",
       { key: lineNumber, style },
-      React23.createElement("span", { style: lineContentStyle }, displayLine)
+      React26.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React23.createElement(
+  return React26.createElement(
     "div",
     { style: containerStyle },
-    React23.createElement(
+    React26.createElement(
       "div",
       { style: headerStyle },
-      React23.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React23.createElement(
+      React26.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React26.createElement(
         "button",
         {
           type: "button",
@@ -1692,19 +1744,30 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ),
-    React23.createElement(
+    React26.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React23.createElement("code", { style: codeStyle }, lineElements)
+      React26.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
+
+// ui/src/docs/MarkdownTable.jsx
+import React27 from "react";
+function MarkdownTable({ className = "", ...rest }) {
+  const merged = ["markdown-table", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React27.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React27.createElement("table", { className: merged, ...rest }));
+}
 export {
+  Button,
+  ButtonWrapper,
   CanopyBrand,
   CanopyFooter,
   CanopyHeader,
   CanopyModal,
+  Container,
   DocsCodeBlock,
+  MarkdownTable as DocsMarkdownTable,
   HelloWorld,
   interstitials_exports as Interstitials,
   Label,