@canopy-iiif/app 0.9.13 → 0.9.15

package/ui/dist/server.mjs

@@ -153,8 +153,45 @@ var Scroll = (props) => {
   return /* @__PURE__ */ React4.createElement(CloverScroll, { ...props });
 };
 
+// ui/src/iiif/Image.jsx
+import React5, { useEffect as useEffect4, useState as useState4 } from "react";
+var Image = (props) => {
+  const [CloverImage, setCloverImage] = useState4(null);
+  useEffect4(() => {
+    let mounted = true;
+    const canUseDom = typeof window !== "undefined" && typeof document !== "undefined";
+    if (canUseDom) {
+      import("@samvera/clover-iiif/image").then((mod) => {
+        if (!mounted) return;
+        const Comp = mod && (mod.default || mod.Image || mod);
+        setCloverImage(() => Comp);
+      }).catch(() => {
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  if (!CloverImage) {
+    let json = "{}";
+    try {
+      json = JSON.stringify(props || {});
+    } catch (_) {
+      json = "{}";
+    }
+    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-image": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
+      "script",
+      {
+        type: "application/json",
+        dangerouslySetInnerHTML: { __html: json }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React5.createElement(CloverImage, { ...props });
+};
+
 // ui/src/iiif/MdxRelatedItems.jsx
-import React5 from "react";
+import React6 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -162,7 +199,7 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React5.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React6.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/interstitials/index.js
@@ -173,7 +210,7 @@ __export(interstitials_exports, {
 });
 
 // ui/src/interstitials/Hero.jsx
-import React6 from "react";
+import React9 from "react";
 import helpers from "@canopy-iiif/app/lib/components/featured.js";
 
 // ui/src/interstitials/hero-utils.js
@@ -183,7 +220,50 @@ function computeHeroHeightStyle(height) {
   return { width: "100%", height: val };
 }
 
+// ui/src/layout/Button.jsx
+import React7 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__ */ React7.createElement(
+    "a",
+    {
+      href,
+      className: classes,
+      target,
+      rel: computedRel,
+      ...rest
+    },
+    content
+  );
+}
+
+// ui/src/layout/ButtonWrapper.jsx
+import React8 from "react";
+function ButtonWrapper({ className = "", children, ...rest }) {
+  const classes = ["canopy-button-group", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React8.createElement("div", { className: classes, ...rest }, children);
+}
+
 // ui/src/interstitials/Hero.jsx
+var HERO_DEFAULT_SIZES_ATTR = "(min-width: 1024px) 1280px, 100vw";
 var basePath = (() => {
   try {
     const raw = typeof process !== "undefined" && process && process.env ? String(process.env.CANOPY_BASE_PATH || "") : "";
@@ -225,7 +305,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) {
@@ -257,6 +338,7 @@ function Hero({
   item,
   index,
   random = true,
+  transition = "fade",
   headline,
   description,
   links = [],
@@ -323,6 +405,15 @@ function Hero({
     backgroundClassName,
     className
   ].filter(Boolean).join(" ");
+  const normalizedTransition = (() => {
+    try {
+      const raw = transition == null ? "" : String(transition);
+      const normalized = raw.trim().toLowerCase();
+      return normalized === "slide" ? "slide" : "fade";
+    } catch (_) {
+      return "fade";
+    }
+  })();
   const renderSlide = (slide, idx, { showVeil = true, captionVariant = "overlay" } = {}) => {
     const safeHref = applyBasePath(slide.href || "#");
     const isStaticCaption = captionVariant === "static";
@@ -331,68 +422,78 @@ function Hero({
       showVeil ? "" : "canopy-interstitial__pane--flat",
       isStaticCaption ? "canopy-interstitial__pane--static" : ""
     ].filter(Boolean).join(" ");
+    const buildImageProps = (className2) => {
+      if (!slide.thumbnail) return null;
+      const props = {
+        src: slide.thumbnail,
+        alt: "",
+        "aria-hidden": true,
+        className: className2,
+        loading: idx === 0 ? "eager" : "lazy"
+      };
+      if (slide.srcset) props.srcSet = slide.srcset;
+      if (slide.srcset)
+        props.sizes = slide.sizes || HERO_DEFAULT_SIZES_ATTR;
+      return props;
+    };
     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__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React9.createElement(
         "img",
         {
-          src: slide.thumbnail,
-          alt: "",
-          "aria-hidden": "true",
-          className: "canopy-interstitial__media canopy-interstitial__media--static",
-          loading: idx === 0 ? "eager" : "lazy"
+          ...buildImageProps(
+            "canopy-interstitial__media canopy-interstitial__media--static"
+          )
         }
-      )) : 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__ */ React9.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React9.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__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement(
       "img",
       {
-        src: slide.thumbnail,
-        alt: "",
-        "aria-hidden": "true",
-        className: "canopy-interstitial__media",
-        loading: idx === 0 ? "eager" : "lazy"
+        ...buildImageProps("canopy-interstitial__media")
       }
-    ) : 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__ */ React9.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React9.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__ */ React9.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React9.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React9.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__ */ React9.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__ */ React9.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
+  const overlayContent = /* @__PURE__ */ React9.createElement(React9.Fragment, null, overlayTitle ? /* @__PURE__ */ React9.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React9.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, overlayLinks.length ? /* @__PURE__ */ React9.createElement(ButtonWrapper, { className: "canopy-interstitial__actions" }, overlayLinks.map((link) => /* @__PURE__ */ React9.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__ */ React9.createElement(
     "section",
     {
       className: containerClassName,
       "data-canopy-hero-slider": "1",
+      "data-transition": normalizedTransition,
       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__ */ React9.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" })))
   );
 }
 
 // ui/src/layout/SubNavigation.jsx
-import React7 from "react";
+import React10 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 +518,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__ */ React10.createElement(
       "li",
       {
         key,
         className: "canopy-sub-navigation__item",
         "data-depth": depth
       },
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React10.createElement(
         Tag,
         {
           className: linkClass,
@@ -433,7 +534,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__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
     );
   });
 }
@@ -447,12 +548,12 @@ function SubNavigation({
   ariaLabel
 }) {
   const PageContext = navigationHelpers && navigationHelpers.getPageContext ? navigationHelpers.getPageContext() : null;
-  const context = PageContext ? React7.useContext(PageContext) : null;
+  const context = PageContext ? React10.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 = React10.useMemo(() => {
     if (effectiveNavigation && effectiveNavigation.root) return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
     if (!candidate) return effectiveNavigation || null;
@@ -476,15 +577,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__ */ React10.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React10.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
 }
 
 // ui/src/layout/Layout.jsx
-import React9 from "react";
+import React12 from "react";
 import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/ContentNavigation.jsx
-import React8 from "react";
+import React11 from "react";
 var SCROLL_OFFSET_REM = 1.618;
 function depthIndex(depth) {
   return Math.max(0, Math.min(5, (depth || 1) - 1));
@@ -499,12 +600,12 @@ function ContentNavigation({
   ariaLabel
 }) {
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-  const savedDepthsRef = React8.useRef(null);
+  const savedDepthsRef = React11.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 = React11.useCallback(
     (id, fallback) => {
       if (!id) return fallback;
       if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
@@ -515,7 +616,7 @@ function ContentNavigation({
     },
     []
   );
-  const headingEntries = React8.useMemo(() => {
+  const headingEntries = React11.useMemo(() => {
     const entries = [];
     const seen = /* @__PURE__ */ new Set();
     if (headingId) {
@@ -539,12 +640,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] = React11.useState(fallbackId);
+  const activeIdRef = React11.useRef(activeId);
+  React11.useEffect(() => {
     activeIdRef.current = activeId;
   }, [activeId]);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!headingEntries.length) return;
     if (!headingEntries.some((entry) => entry.id === activeIdRef.current)) {
       const next = headingEntries[0].id;
@@ -552,7 +653,7 @@ function ContentNavigation({
       setActiveId(next);
     }
   }, [headingEntries]);
-  const computeOffsetPx = React8.useCallback(() => {
+  const computeOffsetPx = React11.useCallback(() => {
     if (!isBrowser) return 0;
     try {
       const root = document.documentElement;
@@ -562,8 +663,8 @@ function ContentNavigation({
       return 0;
     }
   }, [isBrowser]);
-  const headingElementsRef = React8.useRef([]);
-  const updateActiveFromElements = React8.useCallback(
+  const headingElementsRef = React11.useRef([]);
+  const updateActiveFromElements = React11.useCallback(
     (elements) => {
       if (!elements || !elements.length) return;
       const offset = computeOffsetPx();
@@ -583,7 +684,7 @@ function ContentNavigation({
     },
     [computeOffsetPx]
   );
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!isBrowser) return void 0;
     const elements = headingEntries.map((entry) => {
       const element = document.getElementById(entry.id);
@@ -609,7 +710,7 @@ function ContentNavigation({
       window.removeEventListener("resize", handle);
     };
   }, [headingEntries, isBrowser, updateActiveFromElements]);
-  const handleAnchorClick = React8.useCallback(
+  const handleAnchorClick = React11.useCallback(
     (event, targetId, options = {}) => {
       var _a;
       try {
@@ -640,7 +741,7 @@ function ContentNavigation({
     },
     [computeOffsetPx, headingEntries, headingId, isBrowser]
   );
-  const renderNodes2 = React8.useCallback(
+  const renderNodes2 = React11.useCallback(
     (nodes) => {
       if (!nodes || !nodes.length) return null;
       return nodes.map((node) => {
@@ -649,7 +750,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__ */ React11.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React11.createElement(
           "a",
           {
             className: `canopy-sub-navigation__link depth-${idx}${isActive ? " is-active" : ""}`,
@@ -658,7 +759,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__ */ React11.createElement(
           "ul",
           {
             className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -671,7 +772,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__ */ React11.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React11.createElement(
     "a",
     {
       className: `canopy-sub-navigation__link depth-0${activeId === headingId ? " is-active" : ""}`,
@@ -680,7 +781,7 @@ function ContentNavigation({
       "aria-current": activeId === headingId ? "location" : void 0
     },
     effectiveHeading || pageTitle || headingId
-  ), nestedItems ? /* @__PURE__ */ React8.createElement(
+  ), nestedItems ? /* @__PURE__ */ React11.createElement(
     "ul",
     {
       className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -688,7 +789,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__ */ React11.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
 }
 
 // ui/src/layout/Layout.jsx
@@ -720,10 +821,10 @@ function buildHeadingTree(headings) {
 }
 function buildNavigationAside(sidebar, className) {
   if (!sidebar) {
-    return /* @__PURE__ */ React9.createElement(SubNavigation, { className });
+    return /* @__PURE__ */ React12.createElement(SubNavigation, { className });
   }
   if (typeof sidebar === "function") {
-    return React9.createElement(sidebar);
+    return React12.createElement(sidebar);
   }
   return sidebar;
 }
@@ -740,26 +841,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 ? React12.useContext(PageContext) : null;
+  const pageHeadings = React12.useMemo(() => {
     const headings = context && context.page ? context.page.headings : null;
     return Array.isArray(headings) ? headings : [];
   }, [context]);
-  const contentHeading = React9.useMemo(() => {
+  const contentHeading = React12.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 = React12.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 = React12.useMemo(
     () => buildHeadingTree(pageHeadings),
     [pageHeadings]
   );
@@ -798,7 +899,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__ */ React12.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React12.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React12.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React12.createElement("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React12.createElement(
     ContentNavigation,
     {
       items: headingTree,
@@ -810,17 +911,17 @@ function Layout({
 }
 
 // ui/src/layout/CanopyHeader.jsx
-import React16 from "react";
+import React19 from "react";
 
 // ui/src/search/SearchPanel.jsx
-import React13 from "react";
+import React16 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 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 React11 from "react";
+import React14 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -883,18 +984,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React11.useMemo(
+  const action = React14.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React11.useId === "function" ? React11.useId() : void 0;
-  const [fallbackId] = React11.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 = React11.useRef(null);
-  const [hasValue, setHasValue] = React11.useState(false);
-  const focusInput = React11.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;
@@ -907,7 +1008,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React11.useCallback(
+  const handlePointerDown = React14.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -919,23 +1020,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React11.useEffect(() => {
+  React14.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React11.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 = React11.useCallback((event) => {
+  const handleClear = React14.useCallback((event) => {
   }, []);
-  const handleClearKey = React11.useCallback(
+  const handleClearKey = React14.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -944,7 +1045,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "form",
     {
       action,
@@ -956,7 +1057,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__ */ 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,
@@ -972,7 +1073,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React11.createElement(
+    hasValue ? /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "button",
@@ -985,32 +1086,31 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React14.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"))
+      text
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React12 from "react";
+import React15 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React12.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React15.createElement("div", { id: "cplist" })
   );
 }
 
@@ -1031,11 +1131,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__ */ 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/layout/CanopyBrand.jsx
-import React14 from "react";
+import React17 from "react";
 function CanopyBrand(props = {}) {
   const {
     labelId,
@@ -1046,11 +1146,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__ */ React17.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React17.createElement(Logo, null) : null, /* @__PURE__ */ React17.createElement("span", { ...spanProps }, label));
 }
 
 // ui/src/layout/CanopyModal.jsx
-import React15 from "react";
+import React18 from "react";
 function CanopyModal(props = {}) {
   const {
     id,
@@ -1101,7 +1201,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__ */ React18.createElement("div", { ...modalProps }, /* @__PURE__ */ React18.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React18.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React18.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1111,8 +1211,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__ */ React18.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React18.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React18.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React18.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React18.createElement(
     CanopyBrand,
     {
       labelId: resolvedLabelId,
@@ -1316,7 +1416,7 @@ function HeaderScript() {
   });
 })();
   `;
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -1327,7 +1427,9 @@ function HeaderScript() {
 }
 function ensureArray(navLinks) {
   if (!Array.isArray(navLinks)) return [];
-  return navLinks.filter((link) => link && typeof link === "object" && typeof link.href === "string");
+  return navLinks.filter(
+    (link) => link && typeof link === "object" && typeof link.href === "string"
+  );
 }
 function CanopyHeader(props = {}) {
   const {
@@ -1340,59 +1442,98 @@ 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(
-    CanopyBrand,
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    "header",
     {
-      label: title,
-      href: brandHref,
-      className: "canopy-header__brand-link",
-      Logo: SiteLogo
-    }
-  )), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React16.createElement(SearchPanel, { label: searchLabel, hotkey: searchHotkey, placeholder: searchPlaceholder })), /* @__PURE__ */ React16.createElement("nav", { className: "canopy-nav-links canopy-header__desktop-nav", "aria-label": "Primary navigation" }, navLinks.map((link) => /* @__PURE__ */ React16.createElement("a", { key: link.href, href: link.href }, link.label || link.href))), /* @__PURE__ */ React16.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      type: "button",
-      className: "canopy-header__icon-button canopy-header__search-trigger",
-      "aria-label": "Open search",
-      "aria-controls": "canopy-modal-search",
-      "aria-expanded": "false",
-      "data-canopy-header-toggle": "search"
+      className: "canopy-header",
+      "data-mobile-nav": "closed",
+      "data-mobile-search": "closed"
     },
-    /* @__PURE__ */ React16.createElement(
-      "svg",
+    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React19.createElement(
+      CanopyBrand,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        className: "canopy-header__search-icon"
+        label: title,
+        href: brandHref,
+        className: "canopy-header__brand-link",
+        Logo: SiteLogo
+      }
+    )),
+    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React19.createElement(
+      SearchPanel,
+      {
+        label: searchLabel,
+        hotkey: searchHotkey,
+        placeholder: searchPlaceholder
+      }
+    )),
+    /* @__PURE__ */ React19.createElement(
+      "nav",
+      {
+        className: "canopy-nav-links canopy-header__desktop-nav",
+        "aria-label": "Primary navigation"
       },
-      /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-3.8-3.8M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" })
-    )
-  ), /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      type: "button",
-      className: "canopy-header__icon-button canopy-header__menu",
-      "aria-label": "Open navigation",
-      "aria-controls": "canopy-modal-nav",
-      "aria-expanded": "false",
-      "data-canopy-header-toggle": "nav"
-    },
-    /* @__PURE__ */ React16.createElement(
-      "svg",
+      navLinks.map((link) => /* @__PURE__ */ React19.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+    ),
+    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React19.createElement(
+      "button",
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        className: "canopy-header__menu-icon"
+        type: "button",
+        className: "canopy-header__icon-button canopy-header__search-trigger",
+        "aria-label": "Open search",
+        "aria-controls": "canopy-modal-search",
+        "aria-expanded": "false",
+        "data-canopy-header-toggle": "search"
       },
-      /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })
-    )
-  ))), /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React19.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          className: "canopy-header__search-icon"
+        },
+        /* @__PURE__ */ React19.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__ */ React19.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-header__icon-button canopy-header__menu",
+        "aria-label": "Open navigation",
+        "aria-controls": "canopy-modal-nav",
+        "aria-expanded": "false",
+        "data-canopy-header-toggle": "nav"
+      },
+      /* @__PURE__ */ React19.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          strokeWidth: "1.5",
+          stroke: "currentColor",
+          className: "canopy-header__menu-icon"
+        },
+        /* @__PURE__ */ React19.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+          }
+        )
+      )
+    ))
+  ), /* @__PURE__ */ React19.createElement(
     CanopyModal,
     {
       id: "canopy-modal-nav",
@@ -1404,8 +1545,15 @@ 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__ */ React19.createElement(
+      "nav",
+      {
+        className: "canopy-nav-links canopy-modal__nav",
+        "aria-label": "Primary navigation"
+      },
+      navLinks.map((link) => /* @__PURE__ */ React19.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
+    )
+  ), /* @__PURE__ */ React19.createElement(
     CanopyModal,
     {
       id: "canopy-modal-search",
@@ -1418,19 +1566,33 @@ 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__ */ React19.createElement(
+      SearchPanel,
+      {
+        label: searchLabel,
+        hotkey: searchHotkey,
+        placeholder: searchPlaceholder
+      }
+    )
+  ), /* @__PURE__ */ React19.createElement(HeaderScript, null));
 }
 
 // ui/src/layout/CanopyFooter.jsx
-import React17 from "react";
+import React20 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__ */ React20.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React20.createElement("div", { className: "canopy-footer__inner" }, children));
+}
+
+// ui/src/layout/Container.jsx
+import React21 from "react";
+function Container({ className = "", children, ...rest }) {
+  const classes = ["mx-auto", "max-w-content", "w-full", "px-6", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React21.createElement("div", { className: classes, ...rest }, children);
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React18 from "react";
+import React22 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -1438,11 +1600,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__ */ React22.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React22.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React19 from "react";
+import React23 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -1450,11 +1612,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__ */ React23.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React23.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React20 from "react";
+import React24 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -1462,11 +1624,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__ */ React24.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React24.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React21 from "react";
+import React25 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -1482,11 +1644,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__ */ React25.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React25.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React25.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React25.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React25.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React22 from "react";
+import React26 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -1511,28 +1673,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__ */ React26.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__ */ React26.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__ */ React26.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__ */ React26.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React23 from "react";
+import React27 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -1578,10 +1740,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 = React27.Children.toArray(children);
+  const codeElement = childArray.find((el) => React27.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React23.createElement("pre", props);
+    return React27.createElement("pre", props);
   }
   const {
     className = "",
@@ -1596,8 +1758,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] = React27.useState(false);
+  const handleCopy = React27.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -1623,7 +1785,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 +1795,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 +1823,20 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React23.createElement(
+    return React27.createElement(
       "span",
       { key: lineNumber, style },
-      React23.createElement("span", { style: lineContentStyle }, displayLine)
+      React27.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React23.createElement(
+  return React27.createElement(
     "div",
     { style: containerStyle },
-    React23.createElement(
+    React27.createElement(
       "div",
       { style: headerStyle },
-      React23.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React23.createElement(
+      React27.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React27.createElement(
         "button",
         {
           type: "button",
@@ -1692,20 +1855,32 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ),
-    React23.createElement(
+    React27.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React23.createElement("code", { style: codeStyle }, lineElements)
+      React27.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
+
+// ui/src/docs/MarkdownTable.jsx
+import React28 from "react";
+function MarkdownTable({ className = "", ...rest }) {
+  const merged = ["markdown-table", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React28.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React28.createElement("table", { className: merged, ...rest }));
+}
 export {
+  Button,
+  ButtonWrapper,
   CanopyBrand,
   CanopyFooter,
   CanopyHeader,
   CanopyModal,
+  Container,
   DocsCodeBlock,
+  MarkdownTable as DocsMarkdownTable,
   HelloWorld,
+  Image,
   interstitials_exports as Interstitials,
   Label,
   Layout,