@canopy-iiif/app 1.5.9 → 1.5.11

package/ui/dist/server.mjs

@@ -843,52 +843,140 @@ function Hero({
 }
 
 // ui/src/layout/SubNavigation.jsx
-import React10 from "react";
+import React11 from "react";
 import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
-function resolveRelativeCandidate(page, current) {
-  if (page && typeof page.relativePath === "string" && page.relativePath)
-    return page.relativePath;
-  if (page && typeof page.slug === "string" && page.slug) return page.slug;
-  if (typeof current === "string" && current) return current;
-  return "";
+
+// ui/src/layout/NavigationTree.jsx
+import React10 from "react";
+function normalizeDepth(depth) {
+  if (typeof depth !== "number") return 0;
+  return Math.max(0, Math.min(5, depth));
 }
-function renderNodes(nodes, parentKey = "node") {
+function NavigationTreeList({ nodes, depth, parentKey }) {
   if (!Array.isArray(nodes) || !nodes.length) return null;
-  return nodes.map((node, index) => {
-    if (!node) return null;
-    const key = node.slug || node.relativePath || `${parentKey}-${index}`;
-    const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-    const showChildren = hasChildren && (node.isExpanded || node.depth === 0);
-    const depth = typeof node.depth === "number" ? Math.max(0, node.depth) : 0;
-    const depthClass = `depth-${Math.min(depth, 5)}`;
-    const isRoadmap = !!node.isRoadmap;
-    const isInteractive = !!(node.href && !isRoadmap);
-    const classes = ["canopy-sub-navigation__link", depthClass];
-    if (!node.href && !isRoadmap) classes.push("is-label");
-    if (isRoadmap) classes.push("is-disabled");
-    if (node.isActive) classes.push("is-active");
-    const linkClass = classes.join(" ");
-    const Tag = isInteractive ? "a" : "span";
-    const badge = isRoadmap ? /* @__PURE__ */ React10.createElement("span", { className: "canopy-sub-navigation__badge" }, "Roadmap") : null;
-    return /* @__PURE__ */ React10.createElement("li", { key, className: "canopy-sub-navigation__item", "data-depth": depth }, /* @__PURE__ */ React10.createElement(
+  const listClasses = ["canopy-nav-tree__list"];
+  if (depth > 0) listClasses.push("canopy-nav-tree__list--nested");
+  return /* @__PURE__ */ React10.createElement("ul", { className: listClasses.join(" "), role: "list" }, nodes.map((node, index) => /* @__PURE__ */ React10.createElement(
+    NavigationTreeItem,
+    {
+      key: node.slug || node.href || node.title || `${parentKey}-${index}`,
+      node,
+      depth,
+      nodeKey: `${parentKey}-${index}`
+    }
+  )));
+}
+function NavigationTreeItem({ node, depth, nodeKey }) {
+  if (!node) return null;
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isRoadmap = !!node.isRoadmap;
+  const isInteractive = !!(node.href && !isRoadmap);
+  const Tag = isInteractive ? "a" : "span";
+  const depthClass = `depth-${normalizeDepth(depth + 1)}`;
+  const classes = ["canopy-nav-tree__link", depthClass];
+  if (!isInteractive && !isRoadmap) classes.push("is-label");
+  if (isRoadmap) classes.push("is-disabled");
+  if (node.isActive) classes.push("is-active");
+  const isRootLevel = depth < 0;
+  const panelId = hasChildren ? `canopy-section-${nodeKey}` : null;
+  const allowToggle = hasChildren && !isRootLevel;
+  const defaultExpanded = allowToggle ? !!node.isExpanded : true;
+  const toggleLabel = node.title ? `Toggle ${node.title} menu` : "Toggle section menu";
+  return /* @__PURE__ */ React10.createElement(
+    "li",
+    {
+      className: "canopy-nav-tree__item",
+      "data-depth": depth,
+      "data-canopy-nav-item": allowToggle ? "true" : void 0,
+      "data-expanded": allowToggle ? defaultExpanded ? "true" : "false" : void 0,
+      "data-default-expanded": allowToggle && defaultExpanded ? "true" : void 0
+    },
+    /* @__PURE__ */ React10.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React10.createElement(
       Tag,
       {
-        className: linkClass,
+        className: classes.join(" "),
         href: isInteractive ? node.href : void 0,
         "aria-current": node.isActive ? "page" : void 0,
         tabIndex: isInteractive ? void 0 : -1
       },
       node.title || node.slug,
-      badge
-    ), showChildren ? /* @__PURE__ */ React10.createElement(
-      "ul",
+      isRoadmap ? /* @__PURE__ */ React10.createElement("span", { className: "canopy-nav-tree__badge" }, "Roadmap") : null
+    ), allowToggle ? /* @__PURE__ */ React10.createElement(
+      "button",
       {
-        className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
-        role: "list"
+        type: "button",
+        className: "canopy-nav-tree__toggle",
+        "aria-expanded": defaultExpanded ? "true" : "false",
+        "aria-controls": panelId || void 0,
+        "aria-label": toggleLabel,
+        "data-canopy-nav-item-toggle": panelId || void 0
       },
-      renderNodes(node.children, key)
-    ) : null);
-  });
+      /* @__PURE__ */ React10.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          className: "canopy-nav-tree__toggle-icon"
+        },
+        /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 9l7 7 7-7" })
+      ),
+      /* @__PURE__ */ React10.createElement("span", { className: "sr-only" }, toggleLabel)
+    ) : null),
+    hasChildren ? /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        id: panelId || void 0,
+        className: "canopy-nav-tree__children",
+        "aria-hidden": allowToggle ? defaultExpanded ? "false" : "true" : "false",
+        hidden: allowToggle ? !defaultExpanded : void 0
+      },
+      /* @__PURE__ */ React10.createElement(
+        NavigationTreeList,
+        {
+          nodes: node.children,
+          depth: depth + 1,
+          parentKey: nodeKey
+        }
+      )
+    ) : null
+  );
+}
+function NavigationTree({
+  root,
+  className = "",
+  parentKey = "nav",
+  includeRoot = false,
+  heading,
+  headingClassName = "canopy-nav-tree__heading",
+  component: Component = "div",
+  ...rest
+}) {
+  if (!root) return null;
+  const nodes = includeRoot ? [root] : root.children;
+  if (!Array.isArray(nodes) || !nodes.length) return null;
+  const combinedClassName = ["canopy-nav-tree", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React10.createElement(
+    Component,
+    {
+      className: combinedClassName,
+      "data-canopy-nav-tree": "true",
+      ...rest
+    },
+    heading ? /* @__PURE__ */ React10.createElement("div", { className: headingClassName }, heading) : null,
+    /* @__PURE__ */ React10.createElement(NavigationTreeList, { nodes, depth: includeRoot ? -1 : 0, parentKey })
+  );
+}
+
+// ui/src/layout/SubNavigation.jsx
+function resolveRelativeCandidate(page, current) {
+  if (page && typeof page.relativePath === "string" && page.relativePath)
+    return page.relativePath;
+  if (page && typeof page.slug === "string" && page.slug) return page.slug;
+  if (typeof current === "string" && current) return current;
+  return "";
 }
 function SubNavigation({
   navigation: navigationProp,
@@ -900,12 +988,12 @@ function SubNavigation({
   ariaLabel
 }) {
   const PageContext = navigationHelpers2 && navigationHelpers2.getPageContext ? navigationHelpers2.getPageContext() : null;
-  const context = PageContext ? React10.useContext(PageContext) : null;
+  const context = PageContext ? React11.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 = React10.useMemo(() => {
+  const resolvedNavigation = React11.useMemo(() => {
     if (effectiveNavigation && effectiveNavigation.root)
       return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
@@ -930,24 +1018,33 @@ function SubNavigation({
   if (!Object.prototype.hasOwnProperty.call(inlineStyle, "--sub-nav-indent")) {
     inlineStyle["--sub-nav-indent"] = "0.85rem";
   }
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.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"))
+    /* @__PURE__ */ React11.createElement(
+      NavigationTree,
+      {
+        root: rootNode,
+        includeRoot: true,
+        component: "div",
+        className: "canopy-sub-navigation__tree",
+        parentKey: rootNode.slug || "root",
+        heading: finalHeading || void 0
+      }
+    )
   );
 }
 
 // ui/src/layout/Layout.jsx
-import React12 from "react";
+import React13 from "react";
 import navigationHelpers3 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/ContentNavigation.jsx
-import React11 from "react";
+import React12 from "react";
 var SCROLL_OFFSET_REM = 1.618;
 var MAX_HEADING_DEPTH = 3;
 function depthIndex(depth) {
@@ -966,9 +1063,9 @@ function ContentNavigation({
   ariaLabel
 }) {
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-  const savedDepthsRef = React11.useRef(null);
-  const [isExpanded, setIsExpanded] = React11.useState(false);
-  const handleToggle = React11.useCallback(() => {
+  const savedDepthsRef = React12.useRef(null);
+  const [isExpanded, setIsExpanded] = React12.useState(false);
+  const handleToggle = React12.useCallback(() => {
     setIsExpanded((prev) => !prev);
   }, []);
   if ((!items || !items.length) && !headingId) return null;
@@ -979,7 +1076,7 @@ function ContentNavigation({
   ].filter(Boolean).join(" ");
   const effectiveHeading = heading || pageTitle || null;
   const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
-  const getSavedDepth = React11.useCallback(
+  const getSavedDepth = React12.useCallback(
     (id, fallback) => {
       if (!id) return fallback;
       if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
@@ -990,7 +1087,7 @@ function ContentNavigation({
     },
     []
   );
-  const headingEntries = React11.useMemo(() => {
+  const headingEntries = React12.useMemo(() => {
     const entries = [];
     const seen = /* @__PURE__ */ new Set();
     if (headingId) {
@@ -1018,12 +1115,12 @@ function ContentNavigation({
     return entries;
   }, [headingId, items, getSavedDepth]);
   const fallbackId = headingEntries.length ? headingEntries[0].id : headingId || null;
-  const [activeId, setActiveId] = React11.useState(fallbackId);
-  const activeIdRef = React11.useRef(activeId);
-  React11.useEffect(() => {
+  const [activeId, setActiveId] = React12.useState(fallbackId);
+  const activeIdRef = React12.useRef(activeId);
+  React12.useEffect(() => {
     activeIdRef.current = activeId;
   }, [activeId]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!headingEntries.length) return;
     if (!headingEntries.some((entry) => entry.id === activeIdRef.current)) {
       const next = headingEntries[0].id;
@@ -1031,7 +1128,7 @@ function ContentNavigation({
       setActiveId(next);
     }
   }, [headingEntries]);
-  const computeOffsetPx = React11.useCallback(() => {
+  const computeOffsetPx = React12.useCallback(() => {
     if (!isBrowser) return 0;
     try {
       const root = document.documentElement;
@@ -1041,8 +1138,8 @@ function ContentNavigation({
       return 0;
     }
   }, [isBrowser]);
-  const headingElementsRef = React11.useRef([]);
-  const updateActiveFromElements = React11.useCallback(
+  const headingElementsRef = React12.useRef([]);
+  const updateActiveFromElements = React12.useCallback(
     (elements) => {
       if (!elements || !elements.length) return;
       const offset = computeOffsetPx();
@@ -1062,7 +1159,7 @@ function ContentNavigation({
     },
     [computeOffsetPx]
   );
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!isBrowser) return void 0;
     const elements = headingEntries.map((entry) => {
       const element = document.getElementById(entry.id);
@@ -1088,7 +1185,7 @@ function ContentNavigation({
       window.removeEventListener("resize", handle);
     };
   }, [headingEntries, isBrowser, updateActiveFromElements]);
-  const handleAnchorClick = React11.useCallback(
+  const handleAnchorClick = React12.useCallback(
     (event, targetId, options = {}) => {
       var _a;
       try {
@@ -1119,7 +1216,7 @@ function ContentNavigation({
     },
     [computeOffsetPx, headingEntries, headingId, isBrowser]
   );
-  const renderNodes2 = React11.useCallback(
+  const renderNodes = React12.useCallback(
     (nodes) => {
       if (!nodes || !nodes.length) return null;
       return nodes.map((node) => {
@@ -1132,8 +1229,8 @@ function ContentNavigation({
         if (depth > MAX_HEADING_DEPTH) return null;
         const idx = depthIndex(depth);
         const isActive = id && activeId === id;
-        const childNodes = depth < MAX_HEADING_DEPTH ? renderNodes2(node.children) : null;
-        return /* @__PURE__ */ React11.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React11.createElement(
+        const childNodes = depth < MAX_HEADING_DEPTH ? renderNodes(node.children) : null;
+        return /* @__PURE__ */ React12.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React12.createElement(
           "a",
           {
             className: `canopy-sub-navigation__link depth-${idx}${isActive ? " is-active" : ""}`,
@@ -1142,7 +1239,7 @@ function ContentNavigation({
             "aria-current": isActive ? "location" : void 0
           },
           node.title
-        ), childNodes ? /* @__PURE__ */ React11.createElement(
+        ), childNodes ? /* @__PURE__ */ React12.createElement(
           "ul",
           {
             className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -1154,8 +1251,8 @@ function ContentNavigation({
     },
     [handleAnchorClick, activeId, getSavedDepth]
   );
-  const nestedItems = React11.useMemo(() => renderNodes2(items), [items, renderNodes2]);
-  const topLink = headingId ? /* @__PURE__ */ React11.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React11.createElement(
+  const nestedItems = React12.useMemo(() => renderNodes(items), [items, renderNodes]);
+  const topLink = headingId ? /* @__PURE__ */ React12.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React12.createElement(
     "a",
     {
       className: `canopy-sub-navigation__link depth-0${activeId === headingId ? " is-active" : ""}`,
@@ -1164,7 +1261,7 @@ function ContentNavigation({
       "aria-current": activeId === headingId ? "location" : void 0
     },
     effectiveHeading || pageTitle || headingId
-  ), nestedItems ? /* @__PURE__ */ React11.createElement(
+  ), nestedItems ? /* @__PURE__ */ React12.createElement(
     "ul",
     {
       className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
@@ -1172,7 +1269,7 @@ function ContentNavigation({
     },
     nestedItems
   ) : null) : null;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "nav",
     {
       className: combinedClassName,
@@ -1180,7 +1277,7 @@ function ContentNavigation({
       "aria-label": navLabel,
       "data-canopy-content-nav": "true"
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       "button",
       {
         type: "button",
@@ -1197,7 +1294,7 @@ function ContentNavigation({
       },
       isExpanded ? "Hide" : "Show"
     ),
-    /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
+    /* @__PURE__ */ React12.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
   );
 }
 
@@ -1230,10 +1327,10 @@ function buildHeadingTree(headings) {
 }
 function buildNavigationAside(sidebar, className) {
   if (!sidebar) {
-    return /* @__PURE__ */ React12.createElement(SubNavigation, { className });
+    return /* @__PURE__ */ React13.createElement(SubNavigation, { className });
   }
   if (typeof sidebar === "function") {
-    return React12.createElement(sidebar);
+    return React13.createElement(sidebar);
   }
   return sidebar;
 }
@@ -1335,7 +1432,7 @@ function ContentNavigationScript() {
   });
 })();
   `;
-  return /* @__PURE__ */ React12.createElement("script", { dangerouslySetInnerHTML: { __html: code } });
+  return /* @__PURE__ */ React13.createElement("script", { dangerouslySetInnerHTML: { __html: code } });
 }
 function Layout({
   children,
@@ -1350,26 +1447,26 @@ function Layout({
   ...rest
 }) {
   const PageContext = navigationHelpers3 && typeof navigationHelpers3.getPageContext === "function" ? navigationHelpers3.getPageContext() : null;
-  const context = PageContext ? React12.useContext(PageContext) : null;
-  const pageHeadings = React12.useMemo(() => {
+  const context = PageContext ? React13.useContext(PageContext) : null;
+  const pageHeadings = React13.useMemo(() => {
     const headings = context && context.page ? context.page.headings : null;
     return Array.isArray(headings) ? headings : [];
   }, [context]);
-  const contentHeading = React12.useMemo(() => {
+  const contentHeading = React13.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 = React12.useMemo(() => {
+  const headingAnchorId = React13.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 = React12.useMemo(
+  const headingTree = React13.useMemo(
     () => buildHeadingTree(pageHeadings),
     [pageHeadings]
   );
@@ -1394,13 +1491,13 @@ function Layout({
     contentNavigationClassName
   ].filter(Boolean).join(" ");
   const sidebarNode = showLeftColumn ? buildNavigationAside(sidebar, sidebarClassName) : null;
-  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(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React13.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React13.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
     "aside",
     {
       className: contentNavigationAsideClassName,
       "data-canopy-content-nav-root": "true"
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       ContentNavigation,
       {
         items: headingTree,
@@ -1409,21 +1506,21 @@ function Layout({
         pageTitle: context && context.page ? context.page.title : void 0
       }
     )
-  ), /* @__PURE__ */ React12.createElement(ContentNavigationScript, null)) : null);
+  ), /* @__PURE__ */ React13.createElement(ContentNavigationScript, null)) : null);
 }
 
 // ui/src/layout/CanopyHeader.jsx
-import React19 from "react";
+import React20 from "react";
 
 // ui/src/search/SearchPanel.jsx
-import React16 from "react";
+import React17 from "react";
 
 // ui/src/Icons.jsx
-import React13 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false", ...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" }));
+import React14 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false", ...props }, /* @__PURE__ */ React14.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 React14 from "react";
+import React15 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -1486,18 +1583,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React14.useMemo(
+  const action = React15.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React14.useId === "function" ? React14.useId() : void 0;
-  const [fallbackId] = React14.useState(
+  const autoId = typeof React15.useId === "function" ? React15.useId() : void 0;
+  const [fallbackId] = React15.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React14.useRef(null);
-  const [hasValue, setHasValue] = React14.useState(false);
-  const focusInput = React14.useCallback(() => {
+  const inputRef = React15.useRef(null);
+  const [hasValue, setHasValue] = React15.useState(false);
+  const focusInput = React15.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -1510,7 +1607,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React14.useCallback(
+  const handlePointerDown = React15.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -1522,23 +1619,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React14.useCallback((event) => {
+  const handleInputChange = React15.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 = React14.useCallback((event) => {
+  const handleClear = React15.useCallback((event) => {
   }, []);
-  const handleClearKey = React14.useCallback(
+  const handleClearKey = React15.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -1547,7 +1644,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "form",
     {
       action,
@@ -1559,7 +1656,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, "Search"), /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React15.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, "Search"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         id: inputId,
@@ -1574,7 +1671,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React14.createElement(
+    hasValue ? /* @__PURE__ */ React15.createElement(
       "button",
       {
         type: "button",
@@ -1587,7 +1684,7 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement(
       "button",
       {
         type: "submit",
@@ -1600,11 +1697,11 @@ function SearchPanelForm(props = {}) {
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React15 from "react";
+import React16 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", "is-empty", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
@@ -1612,7 +1709,7 @@ function SearchPanelTeaserResults(props = {}) {
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React15.createElement("div", { id: "cplist", className: "canopy-search-teaser__list" })
+    /* @__PURE__ */ React16.createElement("div", { id: "cplist", className: "canopy-search-teaser__list" })
   );
 }
 
@@ -1633,11 +1730,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__ */ 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) } }));
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/layout/CanopyBrand.jsx
-import React17 from "react";
+import React18 from "react";
 function CanopyBrand(props = {}) {
   const {
     labelId,
@@ -1648,11 +1745,11 @@ function CanopyBrand(props = {}) {
   } = props || {};
   const spanProps = labelId ? { id: labelId } : {};
   const classes = ["canopy-logo", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React17.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React17.createElement(Logo, null) : null, /* @__PURE__ */ React17.createElement("span", { ...spanProps }, label));
+  return /* @__PURE__ */ React18.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React18.createElement(Logo, null) : null, /* @__PURE__ */ React18.createElement("span", { ...spanProps }, label));
 }
 
 // ui/src/layout/CanopyModal.jsx
-import React18 from "react";
+import React19 from "react";
 function CanopyModal(props = {}) {
   const {
     id,
@@ -1703,7 +1800,7 @@ function CanopyModal(props = {}) {
   if (padded) bodyClasses.push("canopy-modal__body--padded");
   if (bodyClassName) bodyClasses.push(bodyClassName);
   const bodyClassNameValue = bodyClasses.join(" ");
-  return /* @__PURE__ */ React18.createElement("div", { ...modalProps }, /* @__PURE__ */ React18.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React18.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { ...modalProps }, /* @__PURE__ */ React19.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React19.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React19.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1713,8 +1810,8 @@ function CanopyModal(props = {}) {
       strokeWidth: "1.5",
       className: "canopy-modal__close-icon"
     },
-    /* @__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(
+    /* @__PURE__ */ React19.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React19.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React19.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React19.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React19.createElement(
     CanopyBrand,
     {
       labelId: resolvedLabelId,
@@ -1736,11 +1833,24 @@ function HeaderScript() {
   var body = doc.body;
   var root = doc.documentElement;
 
+  function desktopBreakpointQuery() {
+    if (typeof window === 'undefined') return '(min-width: 70rem)';
+    try {
+      var styles = window.getComputedStyle ? window.getComputedStyle(root) : null;
+      var value = styles ? styles.getPropertyValue('--canopy-desktop-breakpoint') : '';
+      if (typeof value === 'string') value = value.trim();
+      if (!value) value = '70rem';
+      return '(min-width: ' + value + ')';
+    } catch (error) {
+      return '(min-width: 70rem)';
+    }
+  }
+
   function ready(fn) {
     if (doc.readyState === 'loading') {
       doc.addEventListener('DOMContentLoaded', fn, { once: true });
     } else {
-      fn();
+      fn(); 
     }
   }
 
@@ -1750,6 +1860,8 @@ function HeaderScript() {
 
     var NAV_ATTR = 'data-mobile-nav';
     var SEARCH_ATTR = 'data-mobile-search';
+    var NAV_ITEM_ATTR = 'data-canopy-nav-item';
+    var NAV_ITEM_TOGGLE_ATTR = 'data-canopy-nav-item-toggle';
 
     function modalFor(type) {
       return doc.querySelector('[data-canopy-modal="' + type + '"]');
@@ -1831,6 +1943,51 @@ function HeaderScript() {
       });
     }
 
+    function forEachNavTree(scope, fn) {
+      if (typeof fn !== 'function') return;
+      var rootNode = scope || doc;
+      var trees = rootNode.querySelectorAll('[data-canopy-nav-tree]');
+      each(trees, function (tree) {
+        fn(tree);
+      });
+    }
+
+    function resetNavItemToggles(scope) {
+      forEachNavTree(scope, function (tree) {
+        var toggles = tree.querySelectorAll('[' + NAV_ITEM_TOGGLE_ATTR + ']');
+        each(toggles, function (btn) {
+          btn.setAttribute('aria-expanded', 'false');
+          var targetId = btn.getAttribute(NAV_ITEM_TOGGLE_ATTR);
+          var panel = targetId ? doc.getElementById(targetId) : null;
+          var parent = btn.closest('[' + NAV_ITEM_ATTR + ']');
+          if (panel) {
+            panel.hidden = true;
+            panel.setAttribute('aria-hidden', 'true');
+            panel.setAttribute('hidden', '');
+          }
+          if (parent) parent.setAttribute('data-expanded', 'false');
+        });
+      });
+    }
+
+    function applyDefaultNavItemState(scope) {
+      forEachNavTree(scope, function (tree) {
+        var defaults = tree.querySelectorAll('[data-default-expanded="true"]');
+        each(defaults, function (item) {
+          var toggle = item.querySelector('[' + NAV_ITEM_TOGGLE_ATTR + ']');
+          var targetId = toggle ? toggle.getAttribute(NAV_ITEM_TOGGLE_ATTR) : null;
+          var panel = targetId ? doc.getElementById(targetId) : null;
+          item.setAttribute('data-expanded', 'true');
+          if (toggle) toggle.setAttribute('aria-expanded', 'true');
+          if (panel) {
+            panel.hidden = false;
+            panel.removeAttribute('hidden');
+            panel.setAttribute('aria-hidden', 'false');
+          }
+        });
+      });
+    }
+
     function setState(type, next) {
       if (type === 'nav') header.setAttribute(NAV_ATTR, next);
       if (type === 'search') header.setAttribute(SEARCH_ATTR, next);
@@ -1838,6 +1995,13 @@ function HeaderScript() {
       var navOpen = header.getAttribute(NAV_ATTR) === 'open';
       var searchOpen = header.getAttribute(SEARCH_ATTR) === 'open';
       lockScroll(navOpen || searchOpen);
+      if (type === 'nav') {
+        if (next !== 'open') {
+          resetNavItemToggles(modalFor('nav'));
+        } else {
+          applyDefaultNavItemState(modalFor('nav'));
+        }
+      }
     }
 
     function toggle(type, force) {
@@ -1850,6 +2014,35 @@ function HeaderScript() {
       if (type === 'nav' && shouldOpen) focusNavMenu();
     }
 
+    function setupNavItemToggles() {
+      var toggles = doc.querySelectorAll('[' + NAV_ITEM_TOGGLE_ATTR + ']');
+      each(toggles, function (btn) {
+        if (btn.__canopyNavReady) return;
+        btn.__canopyNavReady = true;
+        btn.addEventListener('click', function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          var targetId = btn.getAttribute(NAV_ITEM_TOGGLE_ATTR);
+          if (!targetId) return;
+          var panel = doc.getElementById(targetId);
+          var parent = btn.closest('[' + NAV_ITEM_ATTR + ']');
+          var expanded = btn.getAttribute('aria-expanded') === 'true';
+          var next = !expanded;
+          btn.setAttribute('aria-expanded', next ? 'true' : 'false');
+          if (panel) {
+            panel.hidden = !next;
+            panel.setAttribute('aria-hidden', next ? 'false' : 'true');
+            if (next) {
+              panel.removeAttribute('hidden');
+            } else {
+              panel.setAttribute('hidden', '');
+            }
+          }
+          if (parent) parent.setAttribute('data-expanded', next ? 'true' : 'false');
+        });
+      });
+    }
+
     each(header.querySelectorAll('[data-canopy-header-toggle]'), function (btn) {
       btn.addEventListener('click', function (event) {
         event.preventDefault();
@@ -1897,7 +2090,7 @@ function HeaderScript() {
       toggle('search', false);
     });
 
-    var mq = window.matchMedia('(min-width: 48rem)');
+    var mq = window.matchMedia(desktopBreakpointQuery());
     function syncDesktopState() {
       if (mq.matches) {
         setState('nav', 'closed');
@@ -1914,11 +2107,13 @@ function HeaderScript() {
       mq.addListener(syncDesktopState);
     }
 
+    setupNavItemToggles();
+    applyDefaultNavItemState(null);
     syncDesktopState();
   });
 })();
   `;
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -1937,7 +2132,7 @@ function getSharedRoot() {
 function getSafePageContext() {
   const root = getSharedRoot();
   if (root && root[CONTEXT_KEY]) return root[CONTEXT_KEY];
-  const ctx = React19.createContext({ navigation: null, page: null });
+  const ctx = React20.createContext({ navigation: null, page: null });
   if (root) root[CONTEXT_KEY] = ctx;
   return ctx;
 }
@@ -1947,29 +2142,55 @@ function ensureArray(navLinks) {
     (link) => link && typeof link === "object" && typeof link.href === "string"
   );
 }
-function SectionNavList({ root }) {
-  if (!root || !Array.isArray(root.children) || !root.children.length) return null;
-  return /* @__PURE__ */ React19.createElement("ul", { className: "canopy-modal__section-list", role: "list" }, root.children.map((node) => /* @__PURE__ */ React19.createElement(SectionNavItem, { key: node.slug || node.href || node.title, node, depth: 0 })));
-}
-function SectionNavItem({ node, depth }) {
-  if (!node) return null;
-  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-  const Tag = node.href ? "a" : "span";
-  const classes = [
-    "canopy-modal__section-link",
-    `depth-${Math.min(5, Math.max(0, depth + 1))}`
-  ];
-  if (!node.href) classes.push("is-label");
-  if (node.isActive) classes.push("is-active");
-  return /* @__PURE__ */ React19.createElement("li", { className: "canopy-modal__section-item", "data-depth": depth }, /* @__PURE__ */ React19.createElement(
-    Tag,
-    {
-      className: classes.join(" "),
-      href: node.href || void 0,
-      "aria-current": node.isActive ? "page" : void 0
-    },
-    node.title || node.slug
-  ), hasChildren ? /* @__PURE__ */ React19.createElement("ul", { className: "canopy-modal__section-list canopy-modal__section-list--nested", role: "list" }, node.children.map((child) => /* @__PURE__ */ React19.createElement(SectionNavItem, { key: child.slug || child.href || child.title, node: child, depth: depth + 1 }))) : null);
+function normalizeHref(href) {
+  if (typeof href !== "string") return "";
+  let next = href.trim();
+  if (!next) return "";
+  try {
+    const parsed = new URL(next, "https://canopy.local");
+    next = parsed.pathname || "/";
+  } catch (_) {
+    next = next.replace(/[?#].*$/, "");
+  }
+  next = next.replace(/[?#].*$/, "");
+  if (next.length > 1) {
+    next = next.replace(/\/+$/, "");
+  }
+  if (!next) return "/";
+  return next;
+}
+function doesLinkMatchSection(linkHref, sectionNavigation) {
+  if (!sectionNavigation || !sectionNavigation.root || !linkHref) return false;
+  const normalizedLink = normalizeHref(linkHref);
+  if (!normalizedLink) return false;
+  const root = sectionNavigation.root;
+  if (typeof root.href === "string" && normalizeHref(root.href) === normalizedLink) {
+    return true;
+  }
+  if (root.slug) {
+    const slugPath = normalizeHref(`/${root.slug}`);
+    if (slugPath && normalizedLink === slugPath) {
+      return true;
+    }
+  }
+  return false;
+}
+function rootSegmentFromHref(href) {
+  const normalized = normalizeHref(href);
+  if (!normalized || normalized === "/") return "";
+  const trimmed = normalized.replace(/^\/+/, "");
+  return trimmed.split("/")[0] || "";
+}
+function getLinkNavigationData(link, navigationRoots, sectionNavigation) {
+  if (!link || typeof link.href !== "string") return null;
+  const segment = rootSegmentFromHref(link.href);
+  if (navigationRoots && segment && navigationRoots[segment]) {
+    return navigationRoots[segment];
+  }
+  if (sectionNavigation && doesLinkMatchSection(link.href, sectionNavigation)) {
+    return sectionNavigation;
+  }
+  return null;
 }
 function CanopyHeader(props = {}) {
   const {
@@ -1983,20 +2204,34 @@ function CanopyHeader(props = {}) {
   } = props;
   const navLinks = ensureArray(navLinksProp);
   const PageContext = getSafePageContext();
-  const context = React19.useContext(PageContext);
-  const sectionNavigation = context && context.navigation && context.navigation.root ? context.navigation : null;
+  const context = React20.useContext(PageContext);
+  const contextNavigation = context && context.navigation ? context.navigation : null;
+  const sectionNavigation = contextNavigation && contextNavigation.root ? contextNavigation : null;
+  const navigationRoots = contextNavigation && contextNavigation.allRoots ? contextNavigation.allRoots : null;
   const sectionHeading = sectionNavigation && sectionNavigation.title || (sectionNavigation && sectionNavigation.root ? sectionNavigation.root.title : "");
   const hasSectionNav = !!(sectionNavigation && sectionNavigation.root && Array.isArray(sectionNavigation.root.children) && sectionNavigation.root.children.length);
   const sectionLabel = sectionHeading ? `More in ${sectionHeading}` : "More in this section";
   const sectionAriaLabel = sectionHeading ? `${sectionHeading} section navigation` : "Section navigation";
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  const defaultSectionLabel = sectionLabel;
+  const defaultSectionAriaLabel = sectionAriaLabel;
+  const shouldAttachSectionNav = (link) => {
+    const navData = getLinkNavigationData(
+      link,
+      navigationRoots,
+      sectionNavigation
+    );
+    const rootNode = navData && navData.root;
+    return !!(rootNode && Array.isArray(rootNode.children) && rootNode.children.length);
+  };
+  const hasIntegratedSectionNav = navLinks.some(shouldAttachSectionNav);
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     "header",
     {
       className: "canopy-header",
       "data-mobile-nav": "closed",
       "data-mobile-search": "closed"
     },
-    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React20.createElement(
       CanopyBrand,
       {
         label: title,
@@ -2005,7 +2240,7 @@ function CanopyHeader(props = {}) {
         Logo: SiteLogo
       }
     )),
-    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("div", { className: "canopy-header__desktop-search" }, /* @__PURE__ */ React20.createElement(
       SearchPanel,
       {
         label: searchLabel,
@@ -2013,13 +2248,13 @@ function CanopyHeader(props = {}) {
         placeholder: searchPlaceholder
       }
     )),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       "nav",
       {
         className: "canopy-nav-links canopy-header__desktop-nav",
         "aria-label": "Primary navigation"
       },
-      navLinks.map((link) => /* @__PURE__ */ React19.createElement(
+      navLinks.map((link) => /* @__PURE__ */ React20.createElement(
         "a",
         {
           key: link.href,
@@ -2029,7 +2264,7 @@ function CanopyHeader(props = {}) {
         link.label || link.href
       ))
     ),
-    /* @__PURE__ */ React19.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("div", { className: "canopy-header__actions" }, /* @__PURE__ */ React20.createElement(
       "button",
       {
         type: "button",
@@ -2039,7 +2274,7 @@ function CanopyHeader(props = {}) {
         "aria-expanded": "false",
         "data-canopy-header-toggle": "search"
       },
-      /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React20.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -2049,7 +2284,7 @@ function CanopyHeader(props = {}) {
           strokeWidth: "1.5",
           className: "canopy-header__search-icon"
         },
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React20.createElement(
           "path",
           {
             strokeLinecap: "round",
@@ -2058,7 +2293,7 @@ function CanopyHeader(props = {}) {
           }
         )
       )
-    ), /* @__PURE__ */ React19.createElement(
+    ), /* @__PURE__ */ React20.createElement(
       "button",
       {
         type: "button",
@@ -2068,7 +2303,7 @@ function CanopyHeader(props = {}) {
         "aria-expanded": "false",
         "data-canopy-header-toggle": "nav"
       },
-      /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React20.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -2078,7 +2313,7 @@ function CanopyHeader(props = {}) {
           stroke: "currentColor",
           className: "canopy-header__menu-icon"
         },
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React20.createElement(
           "path",
           {
             strokeLinecap: "round",
@@ -2088,7 +2323,7 @@ function CanopyHeader(props = {}) {
         )
       )
     ))
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     CanopyModal,
     {
       id: "canopy-modal-nav",
@@ -2100,32 +2335,90 @@ function CanopyHeader(props = {}) {
       closeLabel: "Close navigation",
       closeDataAttr: "nav"
     },
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.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,
-          "aria-current": link.isActive ? "page" : void 0
-        },
-        link.label || link.href
-      ))
+      /* @__PURE__ */ React20.createElement("ul", { className: "canopy-modal__nav-list", role: "list" }, navLinks.map((link, index) => {
+        const navData = getLinkNavigationData(
+          link,
+          navigationRoots,
+          sectionNavigation
+        );
+        const navRoot = navData && navData.root ? navData.root : null;
+        const hasChildren = !!(navRoot && Array.isArray(navRoot.children) && navRoot.children.length);
+        const nestedId = hasChildren ? `canopy-modal-section-${index}` : null;
+        const toggleLabel = link.label ? `Toggle ${link.label} menu` : "Toggle section menu";
+        const defaultExpanded = hasChildren && !!navRoot.isExpanded;
+        return /* @__PURE__ */ React20.createElement(
+          "li",
+          {
+            className: "canopy-modal__nav-item",
+            key: link.href,
+            "data-canopy-nav-item": hasChildren ? "true" : void 0,
+            "data-expanded": defaultExpanded ? "true" : "false",
+            "data-default-expanded": defaultExpanded ? "true" : void 0
+          },
+          /* @__PURE__ */ React20.createElement("div", { className: "canopy-modal__nav-row" }, /* @__PURE__ */ React20.createElement("a", { href: link.href }, link.label || link.href), hasChildren ? /* @__PURE__ */ React20.createElement(
+            "button",
+            {
+              type: "button",
+              className: "canopy-modal__nav-toggle",
+              "aria-expanded": defaultExpanded ? "true" : "false",
+              "aria-controls": nestedId || void 0,
+              "aria-label": toggleLabel,
+              "data-canopy-nav-item-toggle": nestedId || void 0
+            },
+            /* @__PURE__ */ React20.createElement(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                className: "canopy-modal__nav-toggle-icon"
+              },
+              /* @__PURE__ */ React20.createElement(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M5 9l7 7 7-7"
+                }
+              )
+            ),
+            /* @__PURE__ */ React20.createElement("span", { className: "sr-only" }, toggleLabel)
+          ) : null),
+          hasChildren ? /* @__PURE__ */ React20.createElement(
+            NavigationTree,
+            {
+              root: navRoot,
+              parentKey: navData && navData.rootSegment ? navData.rootSegment : `root-${index}`,
+              component: "div",
+              className: "canopy-modal__section-nav canopy-modal__section-nav--nested",
+              "aria-label": navData && navData.title ? `${navData.title} section navigation` : defaultSectionAriaLabel,
+              "aria-hidden": defaultExpanded ? "false" : "true",
+              hidden: !defaultExpanded,
+              id: nestedId || void 0
+            }
+          ) : null
+        );
+      }))
     ),
-    hasSectionNav ? /* @__PURE__ */ React19.createElement(
-      "nav",
+    hasSectionNav && !hasIntegratedSectionNav ? /* @__PURE__ */ React20.createElement(
+      NavigationTree,
       {
+        root: sectionNavigation.root,
+        component: "nav",
         className: "canopy-modal__section-nav",
-        "aria-label": sectionAriaLabel
-      },
-      /* @__PURE__ */ React19.createElement("div", { className: "canopy-modal__section-label" }, sectionLabel),
-      /* @__PURE__ */ React19.createElement(SectionNavList, { root: sectionNavigation.root })
+        "aria-label": defaultSectionAriaLabel,
+        parentKey: "fallback-nav"
+      }
     ) : null
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     CanopyModal,
     {
       id: "canopy-modal-search",
@@ -2138,7 +2431,7 @@ function CanopyHeader(props = {}) {
       closeDataAttr: "search",
       bodyClassName: "canopy-modal__body--search"
     },
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       SearchPanel,
       {
         label: searchLabel,
@@ -2146,18 +2439,18 @@ function CanopyHeader(props = {}) {
         placeholder: searchPlaceholder
       }
     )
-  ), /* @__PURE__ */ React19.createElement(HeaderScript, null));
+  ), /* @__PURE__ */ React20.createElement(HeaderScript, null));
 }
 
 // ui/src/layout/CanopyFooter.jsx
-import React20 from "react";
+import React21 from "react";
 function CanopyFooter({ className = "", children }) {
   const footerClassName = ["canopy-footer", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React20.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React20.createElement("div", { className: "canopy-footer__inner" }, children));
+  return /* @__PURE__ */ React21.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React21.createElement("div", { className: "canopy-footer__inner" }, children));
 }
 
 // ui/src/layout/TeaserCard.jsx
-import React21 from "react";
+import React22 from "react";
 function TeaserCard({
   href = "",
   title = "",
@@ -2178,7 +2471,7 @@ function TeaserCard({
   ].filter(Boolean).join(" ");
   const showThumb = type === "work" && thumbnail;
   const metaLine = (Array.isArray(metadata) && metadata.length ? metadata.filter(Boolean) : summary ? [summary] : []).filter(Boolean).slice(0, 2).join(" \u2022 ");
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     Tag,
     {
       className: classes,
@@ -2186,7 +2479,7 @@ function TeaserCard({
       "data-canopy-item": href ? "" : void 0,
       ...rest
     },
-    showThumb ? /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-teaser__thumb" }, /* @__PURE__ */ React21.createElement(
+    showThumb ? /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-teaser__thumb" }, /* @__PURE__ */ React22.createElement(
       "img",
       {
         src: thumbnail,
@@ -2196,12 +2489,12 @@ function TeaserCard({
         className: "canopy-search-teaser__thumb-img"
       }
     )) : null,
-    /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-teaser__text" }, /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-teaser__title" }, title || href || "Untitled"), metaLine ? /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-teaser__meta" }, metaLine) : null)
+    /* @__PURE__ */ React22.createElement("div", { className: "canopy-search-teaser__text" }, /* @__PURE__ */ React22.createElement("span", { className: "canopy-search-teaser__title" }, title || href || "Untitled"), metaLine ? /* @__PURE__ */ React22.createElement("span", { className: "canopy-search-teaser__meta" }, metaLine) : null)
   );
 }
 
 // ui/src/layout/GoogleAnalytics.jsx
-import React22 from "react";
+import React23 from "react";
 var GA_HOST = "https://www.googletagmanager.com/gtag/js";
 function GoogleAnalytics({ id }) {
   if (!id) return null;
@@ -2211,11 +2504,11 @@ function GoogleAnalytics({ id }) {
     gtag('js', new Date());
     gtag('config', '${id}');
   `;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("script", { async: true, src: `${GA_HOST}?id=${encodeURIComponent(id)}` }), /* @__PURE__ */ React22.createElement("script", { dangerouslySetInnerHTML: { __html: inlineConfig } }));
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("script", { async: true, src: `${GA_HOST}?id=${encodeURIComponent(id)}` }), /* @__PURE__ */ React23.createElement("script", { dangerouslySetInnerHTML: { __html: inlineConfig } }));
 }
 
 // ui/src/layout/Container.jsx
-import React23 from "react";
+import React24 from "react";
 function Container({
   className = "",
   variant = "content",
@@ -2224,7 +2517,7 @@ function Container({
 }) {
   const variantClass = variant === "wide" ? "max-w-wide" : "max-w-content";
   const classes = ["mx-auto", variantClass, "w-full", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     "div",
     {
       className: classes,
@@ -2236,7 +2529,7 @@ function Container({
 }
 
 // ui/src/layout/Card.jsx
-import React24, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
+import React25, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
 var DEFAULT_CARD_ASPECT_RATIO = 4 / 3;
 function Card({
   href,
@@ -2300,8 +2593,8 @@ function Card({
   const hasDimensions = Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0;
   const ratio = hasAspectRatio ? Number(aspectRatio) : hasDimensions ? w / h : src ? DEFAULT_CARD_ASPECT_RATIO : void 0;
   const paddingPercent = ratio ? 100 / ratio : 100;
-  const caption = /* @__PURE__ */ React24.createElement("figcaption", null, title && /* @__PURE__ */ React24.createElement("span", null, title), subtitle && /* @__PURE__ */ React24.createElement("span", null, subtitle), children);
-  return /* @__PURE__ */ React24.createElement(
+  const caption = /* @__PURE__ */ React25.createElement("figcaption", null, title && /* @__PURE__ */ React25.createElement("span", null, title), subtitle && /* @__PURE__ */ React25.createElement("span", null, subtitle), children);
+  return /* @__PURE__ */ React25.createElement(
     "a",
     {
       href,
@@ -2313,13 +2606,13 @@ function Card({
       "data-image-loaded": imageLoaded ? "true" : "false",
       ...rest
     },
-    /* @__PURE__ */ React24.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React25.createElement(
       "div",
       {
         className: "canopy-card-media",
         style: { "--canopy-card-padding": `${paddingPercent}%` }
       },
-      inView ? /* @__PURE__ */ React24.createElement(
+      inView ? /* @__PURE__ */ React25.createElement(
         "img",
         {
           src,
@@ -2330,7 +2623,7 @@ function Card({
           onError: () => setImageLoaded(true)
         }
       ) : null
-    ) : /* @__PURE__ */ React24.createElement(
+    ) : /* @__PURE__ */ React25.createElement(
       "img",
       {
         src,
@@ -2346,13 +2639,13 @@ function Card({
 }
 
 // ui/src/content/ReferencedItems.jsx
-import React25 from "react";
+import React26 from "react";
 import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
 function useReferencedItems(itemsProp) {
   if (Array.isArray(itemsProp)) return itemsProp;
   const PageContext = navigationHelpers4 && typeof navigationHelpers4.getPageContext === "function" ? navigationHelpers4.getPageContext() : null;
   if (!PageContext) return [];
-  const context = React25.useContext(PageContext);
+  const context = React26.useContext(PageContext);
   const items = context && context.page ? context.page.referencedItems : null;
   return Array.isArray(items) ? items : [];
 }
@@ -2372,13 +2665,13 @@ function ReferencedItems({
       "referenced-items--empty",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React25.createElement("div", { className: emptyClass, ...rest }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel);
+    return /* @__PURE__ */ React26.createElement("div", { className: emptyClass, ...rest }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel);
   }
   const containerClassName = ["referenced-items", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React25.createElement("section", { className: containerClassName, ...rest }, children, /* @__PURE__ */ React25.createElement("div", { className: "referenced-items__grid", role: "list" }, items.map((item) => {
+  return /* @__PURE__ */ React26.createElement("section", { className: containerClassName, ...rest }, children, /* @__PURE__ */ React26.createElement("div", { className: "referenced-items__grid", role: "list" }, items.map((item) => {
     if (!item) return null;
     const key = item.href || item.slug || item.id;
-    return /* @__PURE__ */ React25.createElement("div", { className: "referenced-items__item", role: "listitem", key }, /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React26.createElement("div", { className: "referenced-items__item", role: "listitem", key }, /* @__PURE__ */ React26.createElement(
       Card,
       {
         href: item.href,
@@ -2395,7 +2688,7 @@ function ReferencedItems({
 }
 
 // ui/src/content/References.jsx
-import React26 from "react";
+import React27 from "react";
 import navigationHelpers5 from "@canopy-iiif/app/lib/components/navigation.js";
 import referenced from "@canopy-iiif/app/lib/components/referenced.js";
 function getPageContext() {
@@ -2426,7 +2719,7 @@ function References({
   ...rest
 }) {
   const PageContext = getPageContext();
-  const context = PageContext ? React26.useContext(PageContext) : null;
+  const context = PageContext ? React27.useContext(PageContext) : null;
   const contextPage = context && context.page ? context.page : null;
   const manifestId = id || contextPage && contextPage.manifestId || "";
   const contextReferences = !id && contextPage && Array.isArray(contextPage.referencedBy) ? contextPage.referencedBy : null;
@@ -2435,11 +2728,11 @@ function References({
   const entries = references && references.length ? references : null;
   if (!entries || !entries.length) return null;
   const containerClass = ["references", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React26.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React26.createElement("div", { className: "references__group" }, /* @__PURE__ */ React26.createElement("dt", null, title), entries.map((entry) => /* @__PURE__ */ React26.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React26.createElement("a", { href: entry.href }, entry.title || entry.href)))));
+  return /* @__PURE__ */ React27.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React27.createElement("div", { className: "references__group" }, /* @__PURE__ */ React27.createElement("dt", null, title), entries.map((entry) => /* @__PURE__ */ React27.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React27.createElement("a", { href: entry.href }, entry.title || entry.href)))));
 }
 
 // ui/src/content/Bibliography.jsx
-import React27 from "react";
+import React28 from "react";
 import bibliography from "@canopy-iiif/app/lib/components/bibliography.js";
 function resolveHeadingTag(tag, fallback) {
   if (typeof tag === "string" && tag.trim()) return tag;
@@ -2449,7 +2742,7 @@ function resolveHeadingTag(tag, fallback) {
 function NoteBody({ note }) {
   if (!note) return null;
   if (note.html) {
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(
       "div",
       {
         className: "bibliography__note-body",
@@ -2458,7 +2751,7 @@ function NoteBody({ note }) {
     );
   }
   if (note.text) {
-    return /* @__PURE__ */ React27.createElement("div", { className: "bibliography__note-body" }, note.text);
+    return /* @__PURE__ */ React28.createElement("div", { className: "bibliography__note-body" }, note.text);
   }
   return null;
 }
@@ -2476,22 +2769,22 @@ function Bibliography({
   if (!entries.length) return null;
   const PageHeadingTag = resolveHeadingTag(pageHeadingTag, "h3");
   const rootClass = ["bibliography", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React27.createElement("section", { className: rootClass }, /* @__PURE__ */ React27.createElement("div", { className: "bibliography__pages" }, entries.map((entry) => {
+  return /* @__PURE__ */ React28.createElement("section", { className: rootClass }, /* @__PURE__ */ React28.createElement("div", { className: "bibliography__pages" }, entries.map((entry) => {
     const key = entry.href || entry.relativePath || entry.title;
     const pageTitle = entry.title || entry.href;
-    return /* @__PURE__ */ React27.createElement("article", { key, className: "bibliography__page" }, /* @__PURE__ */ React27.createElement("header", { className: "bibliography__page-header" }, pageTitle ? /* @__PURE__ */ React27.createElement(PageHeadingTag, { className: "bibliography__page-title" }, pageTitle) : null, entry.href ? /* @__PURE__ */ React27.createElement("a", { className: "bibliography__page-link", href: entry.href }, entry.href) : null), /* @__PURE__ */ React27.createElement("ol", { className: "bibliography__notes" }, (entry.footnotes || []).map((note, idx) => {
+    return /* @__PURE__ */ React28.createElement("article", { key, className: "bibliography__page" }, /* @__PURE__ */ React28.createElement("header", { className: "bibliography__page-header" }, pageTitle ? /* @__PURE__ */ React28.createElement(PageHeadingTag, { className: "bibliography__page-title" }, pageTitle) : null, entry.href ? /* @__PURE__ */ React28.createElement("a", { className: "bibliography__page-link", href: entry.href }, entry.href) : null), /* @__PURE__ */ React28.createElement("ol", { className: "bibliography__notes" }, (entry.footnotes || []).map((note, idx) => {
       const noteKey = `${key || "entry"}-${note.identifier || idx}`;
-      return /* @__PURE__ */ React27.createElement("li", { key: noteKey, className: "bibliography__note" }, note.identifier ? /* @__PURE__ */ React27.createElement("span", { className: "bibliography__note-label" }, note.identifier) : null, /* @__PURE__ */ React27.createElement(NoteBody, { note }));
+      return /* @__PURE__ */ React28.createElement("li", { key: noteKey, className: "bibliography__note" }, note.identifier ? /* @__PURE__ */ React28.createElement("span", { className: "bibliography__note-label" }, note.identifier) : null, /* @__PURE__ */ React28.createElement(NoteBody, { note }));
     })));
   })));
 }
 
 // ui/src/content/timeline/MdxTimeline.jsx
-import React31 from "react";
+import React32 from "react";
 import ReactDOMServer from "react-dom/server";
 
 // ui/src/content/timeline/Timeline.jsx
-import React29 from "react";
+import React30 from "react";
 
 // ui/src/content/timeline/date-utils.js
 var FALLBACK_LOCALE = (() => {
@@ -2652,7 +2945,7 @@ function clampProgress(value) {
 }
 
 // ui/src/layout/ReferencedManifestCard.jsx
-import React28 from "react";
+import React29 from "react";
 function normalizeMetadata(metadata, summary) {
   if (Array.isArray(metadata) && metadata.length) {
     return metadata.filter(Boolean);
@@ -2686,7 +2979,7 @@ function ReferencedManifestCard({
     "canopy-referenced-manifest-card",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     TeaserCard,
     {
       href: resolvedHref || void 0,
@@ -2868,14 +3161,14 @@ function TimelineConnector({ side, isActive, highlight }) {
     "canopy-timeline__connector-dot",
     highlight || isActive ? "is-active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React29.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React29.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("span", { className: dotClasses }), /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__connector-line" })));
+  return /* @__PURE__ */ React30.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React30.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("span", { className: dotClasses }), /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__connector-line" })));
 }
 function renderResourceSection(point) {
   if (!point) return null;
   const manifestCards = Array.isArray(point.manifests) ? point.manifests.filter(Boolean) : [];
   const legacyResources = Array.isArray(point.resources) ? point.resources.filter(Boolean) : [];
   if (!manifestCards.length && !legacyResources.length) return null;
-  return /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React29.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React29.createElement(ReferencedManifestCard, { manifest }))), legacyResources.map((resource, idx) => /* @__PURE__ */ React29.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React30.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React30.createElement(ReferencedManifestCard, { manifest }))), legacyResources.map((resource, idx) => /* @__PURE__ */ React30.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React30.createElement(
     TeaserCard,
     {
       href: resource.href,
@@ -2900,26 +3193,26 @@ function Timeline({
   ...rest
 }) {
   const payloadPoints = payload && Array.isArray(payload.points) ? payload.points : null;
-  const rawPoints = React29.useMemo(() => {
+  const rawPoints = React30.useMemo(() => {
     if (Array.isArray(pointsProp) && pointsProp.length) return pointsProp;
     if (payloadPoints && payloadPoints.length) return payloadPoints;
     return [];
   }, [pointsProp, payloadPoints]);
-  const sanitizedPoints = React29.useMemo(
+  const sanitizedPoints = React30.useMemo(
     () => sanitizePoints(rawPoints),
     [rawPoints]
   );
   const localeValue = payload && payload.locale ? payload.locale : localeProp;
-  const baseLocale = React29.useMemo(
+  const baseLocale = React30.useMemo(
     () => createLocale(localeValue),
     [localeValue]
   );
   const rangeInput = payload && payload.range ? payload.range : rangeProp || {};
-  const rangeOverrides = React29.useMemo(
+  const rangeOverrides = React30.useMemo(
     () => deriveRangeOverrides(sanitizedPoints, rangeInput),
     [sanitizedPoints, rangeInput]
   );
-  const effectiveRange = React29.useMemo(
+  const effectiveRange = React30.useMemo(
     () => normalizeRange({
       ...rangeOverrides,
       locale: baseLocale
@@ -2928,7 +3221,7 @@ function Timeline({
   );
   const spanStart = effectiveRange.startDate.getTime();
   const span = effectiveRange.span;
-  const pointsWithPosition = React29.useMemo(() => {
+  const pointsWithPosition = React30.useMemo(() => {
     if (!sanitizedPoints.length) return [];
     return sanitizedPoints.map((point, index) => {
       const timestamp = point.meta.timestamp;
@@ -2942,29 +3235,29 @@ function Timeline({
       };
     });
   }, [sanitizedPoints, spanStart, span]);
-  const [activeId, setActiveId] = React29.useState(
+  const [activeId, setActiveId] = React30.useState(
     () => getActivePointId(pointsWithPosition)
   );
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     setActiveId(getActivePointId(pointsWithPosition));
   }, [pointsWithPosition]);
   const thresholdValue = typeof thresholdProp === "number" ? thresholdProp : payload && payload.threshold != null ? payload.threshold : null;
   const stepsValue = typeof steps === "number" ? Number(steps) : payload && typeof payload.steps === "number" ? Number(payload.steps) : null;
-  const thresholdMs = React29.useMemo(
+  const thresholdMs = React30.useMemo(
     () => getThresholdMs(thresholdValue, effectiveRange.granularity),
     [thresholdValue, effectiveRange.granularity]
   );
-  const groupedEntries = React29.useMemo(
+  const groupedEntries = React30.useMemo(
     () => buildGroupedEntries(pointsWithPosition, thresholdMs, {
       granularity: effectiveRange.granularity,
       locale: baseLocale
     }),
     [pointsWithPosition, thresholdMs, effectiveRange.granularity, baseLocale]
   );
-  const [expandedGroupIds, setExpandedGroupIds] = React29.useState(
+  const [expandedGroupIds, setExpandedGroupIds] = React30.useState(
     () => /* @__PURE__ */ new Set()
   );
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     setExpandedGroupIds((prev) => {
       if (!prev || prev.size === 0) return prev;
       const validIds = new Set(
@@ -2979,7 +3272,7 @@ function Timeline({
       return changed ? next : prev;
     });
   }, [groupedEntries]);
-  const toggleGroup = React29.useCallback((groupId) => {
+  const toggleGroup = React30.useCallback((groupId) => {
     setExpandedGroupIds((prev) => {
       const next = new Set(prev || []);
       if (next.has(groupId)) next.delete(groupId);
@@ -3002,7 +3295,7 @@ function Timeline({
       point.id === activeId ? "is-active" : "",
       point.highlight ? "is-highlighted" : ""
     ].filter(Boolean).join(" ");
-    const connector = /* @__PURE__ */ React29.createElement(
+    const connector = /* @__PURE__ */ React30.createElement(
       TimelineConnector,
       {
         side: point.side,
@@ -3010,9 +3303,9 @@ function Timeline({
         highlight: point.highlight
       }
     );
-    const body = /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
+    const body = /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
     const resourceSection = renderResourceSection(point);
-    return /* @__PURE__ */ React29.createElement(
+    return /* @__PURE__ */ React30.createElement(
       "div",
       {
         key: point.id,
@@ -3020,7 +3313,7 @@ function Timeline({
         style: wrapperStyle,
         role: "listitem"
       },
-      point.side === "left" ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", { className: cardClasses }, body, resourceSection), connector) : /* @__PURE__ */ React29.createElement(React29.Fragment, null, connector, /* @__PURE__ */ React29.createElement("div", { className: cardClasses }, body, resourceSection))
+      point.side === "left" ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("div", { className: cardClasses }, body, resourceSection), connector) : /* @__PURE__ */ React30.createElement(React30.Fragment, null, connector, /* @__PURE__ */ React30.createElement("div", { className: cardClasses }, body, resourceSection))
     );
   }
   function renderGroupEntry(entry) {
@@ -3031,7 +3324,7 @@ function Timeline({
     const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point) => point.id === activeId);
-    const connector = /* @__PURE__ */ React29.createElement(
+    const connector = /* @__PURE__ */ React30.createElement(
       TimelineConnector,
       {
         side: entry.side,
@@ -3045,7 +3338,7 @@ function Timeline({
       hasActivePoint ? "is-active" : ""
     ].filter(Boolean).join(" ");
     const countLabel = `${entry.count} event${entry.count > 1 ? "s" : ""}`;
-    const header = /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React29.createElement(
+    const header = /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React30.createElement(
       "button",
       {
         type: "button",
@@ -3055,7 +3348,7 @@ function Timeline({
       },
       isExpanded ? "Hide details" : "Show details"
     ));
-    const groupPoints = isExpanded ? /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__group-points" }, entry.points.map((point) => /* @__PURE__ */ React29.createElement(
+    const groupPoints = isExpanded ? /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__group-points" }, entry.points.map((point) => /* @__PURE__ */ React30.createElement(
       "button",
       {
         key: point.id,
@@ -3066,11 +3359,11 @@ function Timeline({
         ].filter(Boolean).join(" "),
         onClick: () => setActiveId(point.id)
       },
-      /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
-      /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
+      /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
+      /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
     ))) : null;
-    const groupCard = /* @__PURE__ */ React29.createElement("div", { className: groupClasses }, header, groupPoints);
-    return /* @__PURE__ */ React29.createElement(
+    const groupCard = /* @__PURE__ */ React30.createElement("div", { className: groupClasses }, header, groupPoints);
+    return /* @__PURE__ */ React30.createElement(
       "div",
       {
         key: entry.id,
@@ -3078,17 +3371,17 @@ function Timeline({
         style: wrapperStyle,
         role: "listitem"
       },
-      entry.side === "left" ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, groupCard, connector) : /* @__PURE__ */ React29.createElement(React29.Fragment, null, connector, groupCard)
+      entry.side === "left" ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, groupCard, connector) : /* @__PURE__ */ React30.createElement(React30.Fragment, null, connector, groupCard)
     );
   }
-  return /* @__PURE__ */ React29.createElement("section", { className: containerClasses, ...rest }, title ? /* @__PURE__ */ React29.createElement("h2", { className: "canopy-timeline__title" }, title) : null, description ? /* @__PURE__ */ React29.createElement("p", { className: "canopy-timeline__description" }, description) : null, rangeLabel ? /* @__PURE__ */ React29.createElement("p", { className: "canopy-timeline__range", "aria-live": "polite" }, rangeLabel) : null, /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__body" }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement("section", { className: containerClasses, ...rest }, title ? /* @__PURE__ */ React30.createElement("h2", { className: "canopy-timeline__title" }, title) : null, description ? /* @__PURE__ */ React30.createElement("p", { className: "canopy-timeline__description" }, description) : null, rangeLabel ? /* @__PURE__ */ React30.createElement("p", { className: "canopy-timeline__range", "aria-live": "polite" }, rangeLabel) : null, /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__body" }, /* @__PURE__ */ React30.createElement(
     "div",
     {
       className: "canopy-timeline__list",
       role: "list",
       style: { minHeight: trackHeight }
     },
-    /* @__PURE__ */ React29.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
+    /* @__PURE__ */ React30.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
     renderSteps(stepsValue, effectiveRange),
     groupedEntries.map((entry) => {
       if (entry.type === "group") return renderGroupEntry(entry);
@@ -3103,7 +3396,7 @@ function renderSteps(stepSize, range) {
   const markers = [];
   if (startYear < endYear) {
     markers.push(
-      /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(
         "span",
         {
           key: "timeline-step-start",
@@ -3111,12 +3404,12 @@ function renderSteps(stepSize, range) {
           style: { top: "0%" },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-label" }, startYear)
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-label" }, startYear)
       )
     );
     markers.push(
-      /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(
         "span",
         {
           key: "timeline-step-end",
@@ -3124,8 +3417,8 @@ function renderSteps(stepSize, range) {
           style: { top: "100%" },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-label" }, endYear)
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-label" }, endYear)
       )
     );
   }
@@ -3135,7 +3428,7 @@ function renderSteps(stepSize, range) {
     const progress = (timestamp - range.startDate.getTime()) / range.span;
     if (progress <= 0 || progress >= 1) continue;
     markers.push(
-      /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React30.createElement(
         "span",
         {
           key: `timeline-step-${year}`,
@@ -3143,8 +3436,8 @@ function renderSteps(stepSize, range) {
           style: { top: `calc(${progress * 100}% - 0.5px)` },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React29.createElement("span", { className: "canopy-timeline__step-label" }, year)
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React30.createElement("span", { className: "canopy-timeline__step-label" }, year)
       )
     );
   }
@@ -3158,7 +3451,7 @@ function TimelinePoint() {
 TimelinePoint.displayName = "TimelinePoint";
 
 // ui/src/utils/manifestReferences.js
-import React30 from "react";
+import React31 from "react";
 import navigationHelpers6 from "@canopy-iiif/app/lib/components/navigation.js";
 function normalizeManifestId(raw) {
   if (!raw) return "";
@@ -3175,13 +3468,13 @@ function normalizeManifestId(raw) {
     return String(raw || "").trim();
   }
 }
-var PageContextFallback = React30.createContext(null);
+var PageContextFallback = React31.createContext(null);
 function useReferencedManifestMap() {
   var _a, _b;
   const PageContext = ((_b = (_a = navigationHelpers6) == null ? void 0 : _a.getPageContext) == null ? void 0 : _b.call(_a)) || PageContextFallback;
-  const pageContext = React30.useContext(PageContext);
+  const pageContext = React31.useContext(PageContext);
   const referencedItems = pageContext && pageContext.page && Array.isArray(pageContext.page.referencedItems) ? pageContext.page.referencedItems : [];
-  return React30.useMemo(() => {
+  return React31.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     referencedItems.forEach((item) => {
       if (!item) return;
@@ -3236,7 +3529,7 @@ function normalizeResource(resource, index) {
 }
 function normalizePoint(child, index, options) {
   var _a, _b, _c, _d, _e, _f;
-  if (!React31.isValidElement(child)) return null;
+  if (!React32.isValidElement(child)) return null;
   if (child.type !== TimelinePoint && ((_a = child.type) == null ? void 0 : _a.displayName) !== "TimelinePoint")
     return null;
   const props = child.props || {};
@@ -3252,7 +3545,7 @@ function normalizePoint(child, index, options) {
   try {
     if (props.children) {
       detailsHtml = ReactDOMServer.renderToStaticMarkup(
-        React31.createElement(React31.Fragment, null, props.children)
+        React32.createElement(React32.Fragment, null, props.children)
       );
     }
   } catch (_) {
@@ -3301,7 +3594,7 @@ function MdxTimeline({ children, ...rest }) {
   const localeObj = createLocale(localeValue);
   const localeBase = typeof localeObj === "string" ? localeObj : localeObj.baseName || "en-US";
   const manifestMap = useReferencedManifestMap();
-  const childArray = React31.Children.toArray(children);
+  const childArray = React32.Children.toArray(children);
   const points = childArray.map(
     (child, index) => normalizePoint(child, index, {
       range: rest.range || {},
@@ -3317,7 +3610,7 @@ function MdxTimeline({ children, ...rest }) {
     steps: rest.steps != null ? rest.steps : null
   };
   const json = serializeForScript(serializeProps(rest, payload, localeBase));
-  return /* @__PURE__ */ React31.createElement("div", { "data-canopy-timeline": "1" }, /* @__PURE__ */ React31.createElement(Timeline, { ...rest, __canopyTimeline: payload }), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement("div", { "data-canopy-timeline": "1" }, /* @__PURE__ */ React32.createElement(Timeline, { ...rest, __canopyTimeline: payload }), /* @__PURE__ */ React32.createElement(
     "script",
     {
       type: "application/json",
@@ -3327,7 +3620,7 @@ function MdxTimeline({ children, ...rest }) {
 }
 
 // ui/src/content/map/MdxMap.jsx
-import React32 from "react";
+import React33 from "react";
 import ReactDOMServer2 from "react-dom/server";
 
 // ui/src/content/map/MapPoint.jsx
@@ -3354,7 +3647,7 @@ function renderDetailsHtml(children) {
   if (!children) return "";
   try {
     return ReactDOMServer2.renderToStaticMarkup(
-      React32.createElement(React32.Fragment, null, children)
+      React33.createElement(React33.Fragment, null, children)
     );
   } catch (_) {
     return "";
@@ -3362,7 +3655,7 @@ function renderDetailsHtml(children) {
 }
 function normalizeCustomPoint(child, index, manifestMap) {
   var _a;
-  if (!React32.isValidElement(child)) return null;
+  if (!React33.isValidElement(child)) return null;
   if (child.type !== MapPoint && ((_a = child.type) == null ? void 0 : _a.displayName) !== "MapPoint") return null;
   const coords = normalizeCoordinates(child.props || {});
   if (!coords) return null;
@@ -3407,7 +3700,7 @@ function normalizeCustomPoint(child, index, manifestMap) {
   };
 }
 function normalizeCustomPoints(children, manifestMap) {
-  return React32.Children.toArray(children).map((child, index) => normalizeCustomPoint(child, index, manifestMap)).filter(Boolean);
+  return React33.Children.toArray(children).map((child, index) => normalizeCustomPoint(child, index, manifestMap)).filter(Boolean);
 }
 function normalizeHeight(value) {
   if (value == null) return "600px";
@@ -3545,11 +3838,11 @@ function MdxMap({ children, ...rest }) {
   if (placeholderClass) placeholderProps.className = placeholderClass;
   if (rest.id) placeholderProps.id = rest.id;
   if (rest.style) placeholderProps.style = rest.style;
-  return /* @__PURE__ */ React32.createElement("div", { "data-canopy-map": "1" }, /* @__PURE__ */ React32.createElement("div", { ...placeholderProps, "aria-live": "polite" }, /* @__PURE__ */ React32.createElement("div", { className: "canopy-map__status" }, "Loading map\u2026")), /* @__PURE__ */ React32.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React33.createElement("div", { "data-canopy-map": "1" }, /* @__PURE__ */ React33.createElement("div", { ...placeholderProps, "aria-live": "polite" }, /* @__PURE__ */ React33.createElement("div", { className: "canopy-map__status" }, "Loading map\u2026")), /* @__PURE__ */ React33.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React33 from "react";
+import React34 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -3557,11 +3850,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React33.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React33.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React34.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React34.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React34 from "react";
+import React35 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -3569,11 +3862,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React34.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React34.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React35.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React35.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React35 from "react";
+import React36 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -3581,11 +3874,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React35.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React35.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React36.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React36.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearch.jsx
-import React36 from "react";
+import React37 from "react";
 function MdxSearch(props = {}) {
   const {
     layout,
@@ -3603,11 +3896,11 @@ function MdxSearch(props = {}) {
     resultsPayload.layout = layout;
   }
   const classes = ["canopy-search", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React36.createElement("section", { className: classes, "data-canopy-search": "1" }, showTabs ? /* @__PURE__ */ React36.createElement(MdxSearchTabs, { ...tabsProps }) : null, showSummary ? /* @__PURE__ */ React36.createElement(SearchSummary, { ...summaryProps }) : null, showResults ? /* @__PURE__ */ React36.createElement(MdxSearchResults, { ...resultsPayload }) : null, children || null);
+  return /* @__PURE__ */ React37.createElement("section", { className: classes, "data-canopy-search": "1" }, showTabs ? /* @__PURE__ */ React37.createElement(MdxSearchTabs, { ...tabsProps }) : null, showSummary ? /* @__PURE__ */ React37.createElement(SearchSummary, { ...summaryProps }) : null, showResults ? /* @__PURE__ */ React37.createElement(MdxSearchResults, { ...resultsPayload }) : null, children || null);
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React37 from "react";
+import React38 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -3623,12 +3916,12 @@ function MdxSearchFormModal(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React37.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React37.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React37.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React37.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React37.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React38.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React38.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React38.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React38.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React38.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
 var import_slugify = __toESM(require_slugify());
-import React38 from "react";
+import React39 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -3769,7 +4062,7 @@ function MetadataFacetLink(props) {
   const valueSlug = facetSlug ? toValueSlug(text) : "";
   const href = facetSlug && valueSlug ? buildFacetSearchHref(facetSlug, valueSlug) : "";
   if (!href) return text;
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "a",
     {
       href,
@@ -3795,7 +4088,7 @@ function buildFacetCustomValueContent(items, manifest) {
     seen.add(normalized);
     custom.push({
       matchingLabel: item.label,
-      Content: /* @__PURE__ */ React38.createElement(MetadataFacetLink, { facetSlug: facet.slug })
+      Content: /* @__PURE__ */ React39.createElement(MetadataFacetLink, { facetSlug: facet.slug })
     });
   }
   return custom;
@@ -3827,12 +4120,12 @@ function mergeCustomValueContent(userContent, autoContent) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React38.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React39.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React38.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React39.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, customValueContent, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
@@ -3842,7 +4135,7 @@ function Metadata({ manifest, metadata, customValueContent, ...rest }) {
     customValueContent,
     autoCustomContent
   );
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     CloverMetadata,
     {
       metadata: items,
@@ -3856,17 +4149,17 @@ function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React39.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/iiif/Properties/Id.jsx
-import React39 from "react";
+import React40 from "react";
 function Id({ title = "IIIF Manifest", id, ...props }) {
-  return /* @__PURE__ */ React39.createElement("dl", null, /* @__PURE__ */ React39.createElement("dt", null, title), /* @__PURE__ */ React39.createElement("dd", null, /* @__PURE__ */ React39.createElement("a", { href: id }, id)));
+  return /* @__PURE__ */ React40.createElement("dl", null, /* @__PURE__ */ React40.createElement("dt", null, title), /* @__PURE__ */ React40.createElement("dd", null, /* @__PURE__ */ React40.createElement("a", { href: id }, id)));
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React40 from "react";
+import React41 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -3912,10 +4205,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React40.Children.toArray(children);
-  const codeElement = childArray.find((el) => React40.isValidElement(el));
+  const childArray = React41.Children.toArray(children);
+  const codeElement = childArray.find((el) => React41.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React40.createElement("pre", props);
+    return React41.createElement("pre", props);
   }
   const {
     className = "",
@@ -3930,8 +4223,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] = React40.useState(false);
-  const handleCopy = React40.useCallback(async () => {
+  const [copied, setCopied] = React41.useState(false);
+  const handleCopy = React41.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -3996,20 +4289,20 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React40.createElement(
+    return React41.createElement(
       "span",
       { key: lineNumber, style },
-      React40.createElement("span", { style: lineContentStyle }, displayLine)
+      React41.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React40.createElement(
+  return React41.createElement(
     "div",
     { style: containerStyle },
-    showHeader ? React40.createElement(
+    showHeader ? React41.createElement(
       "div",
       { style: headerStyle },
-      React40.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React40.createElement(
+      React41.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React41.createElement(
         "button",
         {
           type: "button",
@@ -4029,29 +4322,29 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ) : null,
-    React40.createElement(
+    React41.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React40.createElement("code", { style: codeStyle }, lineElements)
+      React41.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
 
 // ui/src/docs/MarkdownTable.jsx
-import React41 from "react";
+import React42 from "react";
 function MarkdownTable({ className = "", ...rest }) {
   const merged = ["markdown-table", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React41.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React41.createElement("table", { className: merged, ...rest }));
+  return /* @__PURE__ */ React42.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React42.createElement("table", { className: merged, ...rest }));
 }
 
 // ui/src/docs/Diagram.jsx
-import React42 from "react";
+import React43 from "react";
 function CanopyDiagram() {
-  return /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React42.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Collection A"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React42.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React42.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Collection B"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React42.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React42.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React42.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Automated content"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React42.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React42.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React42.createElement("li", null, "Author narratives"), /* @__PURE__ */ React42.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Search index"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React42.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React42.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React42.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React42.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React42.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React42.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Work pages"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React42.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React42.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React42.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React42.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React42.createElement("article", null, /* @__PURE__ */ React42.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React42.createElement("ul", null, /* @__PURE__ */ React42.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React42.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React42.createElement("li", null, "Optional annotation dataset"))))));
+  return /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React43.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React43.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Collection A"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React43.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React43.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Collection B"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React43.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React43.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React43.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React43.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Automated content"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React43.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React43.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React43.createElement("li", null, "Author narratives"), /* @__PURE__ */ React43.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Search index"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React43.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React43.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React43.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React43.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React43.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React43.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Work pages"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React43.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React43.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React43.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React43.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React43.createElement("article", null, /* @__PURE__ */ React43.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React43.createElement("ul", null, /* @__PURE__ */ React43.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React43.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React43.createElement("li", null, "Optional annotation dataset"))))));
 }
 
 // ui/src/docs/ThemeShowcase.jsx
-import React43 from "react";
+import React44 from "react";
 
 // ../../node_modules/@radix-ui/colors/index.mjs
 var colors_exports = {};
@@ -7903,21 +8196,21 @@ var STEP_MAP = {
   800: 11,
   900: 12
 };
-var Section = ({ title, description, children }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React43.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React43.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
-var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React43.createElement("strong", null, label)), /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React43.createElement(
+var Section = ({ title, description, children }) => /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React44.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React44.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
+var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React44.createElement("strong", null, label)), /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React44.createElement(
   "div",
   {
     key: `${label}-${stop}`,
     className: "canopy-theme-showcase__scale-stop"
   },
-  /* @__PURE__ */ React43.createElement(
+  /* @__PURE__ */ React44.createElement(
     "span",
     {
       className: "canopy-theme-showcase__scale-chip",
       style: { backgroundColor: `var(${prefix}-${stop})` }
     }
   ),
-  /* @__PURE__ */ React43.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
+  /* @__PURE__ */ React44.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
 ))));
 var AVAILABLE = new Set(
   Object.keys(colors_exports).filter(
@@ -7982,9 +8275,9 @@ var PREVIEW_DATA = buildPreviewData();
 function encodeJson(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c");
 }
-var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
+var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
   const colorValue = getRadixSwatch(name);
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "button",
     {
       key: `${type}-${name}`,
@@ -7995,14 +8288,14 @@ var ColorsLabeled = ({ colors, type, getRadixSwatch }) => /* @__PURE__ */ React4
       "data-theme-swatch-value": name,
       "aria-pressed": "false"
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "span",
       {
         className: "canopy-theme-showcase__swatch-chip",
         style: { background: colorValue || "var(--color-gray-200)" }
       }
     ),
-    /* @__PURE__ */ React43.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
+    /* @__PURE__ */ React44.createElement("span", { className: "canopy-theme-showcase__swatch-label" }, name)
   );
 }));
 function ThemeShowcase() {
@@ -8162,7 +8455,7 @@ function ThemeShowcase() {
     .canopy-theme-showcase__swatch-controls { display: none; }
     .canopy-theme-showcase__clear-button { display: none; }
   `;
-  return /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React43.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React44.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React44.createElement(
     "div",
     {
       style: {
@@ -8173,18 +8466,18 @@ function ThemeShowcase() {
         marginBottom: "1rem"
       }
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       Section,
       {
         title: "Appearance",
         description: "Pick the base light or dark mode for the theme preview."
       },
-      /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
+      /* @__PURE__ */ React44.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
         const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
         const baseClass = "canopy-theme-showcase__appearance-button";
         const isDefault = mode === DEFAULTS.appearance;
         const className = isDefault ? `${baseClass} is-active` : baseClass;
-        return /* @__PURE__ */ React43.createElement(
+        return /* @__PURE__ */ React44.createElement(
           "button",
           {
             key: mode,
@@ -8196,7 +8489,7 @@ function ThemeShowcase() {
         );
       }))
     ),
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "button",
       {
         type: "button",
@@ -8205,13 +8498,13 @@ function ThemeShowcase() {
       },
       "Reset"
     )
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     Section,
     {
       title: "Color scales",
       description: "Accent and gray ramps from the active theme."
     },
-    /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React44.createElement(
       ColorScaleRow,
       {
         key: scale.label,
@@ -8219,13 +8512,13 @@ function ThemeShowcase() {
         prefix: scale.prefix
       }
     )))
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     Section,
     {
       title: "Accent color palette options",
       description: "Click a swatch to temporarily override the accent palette."
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       ColorsLabeled,
       {
         colors: accentColors,
@@ -8233,13 +8526,13 @@ function ThemeShowcase() {
         getRadixSwatch
       }
     )
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     Section,
     {
       title: "Gray color palette options",
       description: "Click a swatch to preview the neutral ramp for surfaces and text."
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       ColorsLabeled,
       {
         colors: grayColors,
@@ -8247,7 +8540,7 @@ function ThemeShowcase() {
         getRadixSwatch
       }
     )
-  ), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     "script",
     {
       type: "application/json",