@canopy-iiif/app 1.5.14 → 1.5.16

package/ui/dist/server.mjs

@@ -891,7 +891,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
       "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(
+    /* @__PURE__ */ React10.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React10.createElement("div", { className: "canopy-nav-tree__link-wrapper" }, /* @__PURE__ */ React10.createElement(
       Tag,
       {
         className: classes.join(" "),
@@ -901,7 +901,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
       },
       node.title || node.slug,
       isRoadmap ? /* @__PURE__ */ React10.createElement("span", { className: "canopy-nav-tree__badge" }, "Roadmap") : null
-    ), allowToggle ? /* @__PURE__ */ React10.createElement(
+    )), allowToggle ? /* @__PURE__ */ React10.createElement(
       "button",
       {
         type: "button",
@@ -921,7 +921,14 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
           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(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M5 9l7 7 7-7"
+          }
+        )
       ),
       /* @__PURE__ */ React10.createElement("span", { className: "sr-only" }, toggleLabel)
     ) : null),
@@ -966,7 +973,14 @@ function NavigationTree({
       ...rest
     },
     heading ? /* @__PURE__ */ React10.createElement("div", { className: headingClassName }, heading) : null,
-    /* @__PURE__ */ React10.createElement(NavigationTreeList, { nodes, depth: includeRoot ? -1 : 0, parentKey })
+    /* @__PURE__ */ React10.createElement(
+      NavigationTreeList,
+      {
+        nodes,
+        depth: includeRoot ? -1 : 0,
+        parentKey
+      }
+    )
   );
 }
 
@@ -1047,12 +1061,14 @@ import navigationHelpers3 from "@canopy-iiif/app/lib/components/navigation.js";
 import React12 from "react";
 var SCROLL_OFFSET_REM = 1.618;
 var MAX_HEADING_DEPTH = 3;
-function depthIndex(depth) {
-  return Math.max(0, Math.min(5, (depth || 1) - 1));
-}
 function resolveDepth(value, fallback = 1) {
   return Math.max(1, typeof value === "number" ? value : fallback);
 }
+function buildNodeKey(id, parentKey, index) {
+  const base = id ? String(id) : `section-${parentKey || "root"}-${index}`;
+  const sanitized = base.replace(/[^a-zA-Z0-9_-]/g, "-");
+  return `${parentKey || "section"}-${sanitized || index}`;
+}
 function ContentNavigation({
   items = [],
   className = "",
@@ -1076,17 +1092,16 @@ function ContentNavigation({
   ].filter(Boolean).join(" ");
   const effectiveHeading = heading || pageTitle || null;
   const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
-  const getSavedDepth = React12.useCallback(
-    (id, fallback) => {
-      if (!id) return fallback;
-      if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
-      const store = savedDepthsRef.current;
-      if (store.has(id)) return store.get(id);
-      store.set(id, fallback);
-      return fallback;
-    },
-    []
-  );
+  const toggleSrLabel = isExpanded ? "Hide section navigation" : "Show section navigation";
+  const toggleStateClass = isExpanded ? "is-expanded" : "is-collapsed";
+  const getSavedDepth = React12.useCallback((id, fallback) => {
+    if (!id) return fallback;
+    if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
+    const store = savedDepthsRef.current;
+    if (store.has(id)) return store.get(id);
+    store.set(id, fallback);
+    return fallback;
+  }, []);
   const headingEntries = React12.useMemo(() => {
     const entries = [];
     const seen = /* @__PURE__ */ new Set();
@@ -1118,6 +1133,9 @@ function ContentNavigation({
   const [activeId, setActiveId] = React12.useState(fallbackId);
   const activeIdRef = React12.useRef(activeId);
   React12.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && activeIdRef.current !== activeId) {
+      console.log("[ContentNavigation] activeId changed:", activeId);
+    }
     activeIdRef.current = activeId;
   }, [activeId]);
   React12.useEffect(() => {
@@ -1143,16 +1161,28 @@ function ContentNavigation({
     (elements) => {
       if (!elements || !elements.length) return;
       const offset = computeOffsetPx();
-      let nextId = elements[0].id;
-      for (const { id, element } of elements) {
+      const viewportLimit = typeof window !== "undefined" && window.innerHeight ? window.innerHeight * 0.5 : 0;
+      let fallbackId2 = elements[0].id;
+      let bestId = fallbackId2;
+      let bestDistance = Number.POSITIVE_INFINITY;
+      elements.forEach(({ id, element }) => {
+        if (!element || !id) return;
         const rect = element.getBoundingClientRect();
-        if (rect.top - offset <= 0) {
-          nextId = id;
-        } else {
-          break;
+        const relativeTop = rect.top - offset;
+        if (viewportLimit > 0 && relativeTop < -viewportLimit) {
+          return;
         }
-      }
+        const distance = Math.abs(relativeTop);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          bestId = id;
+        }
+      });
+      const nextId = bestId || fallbackId2;
       if (nextId && nextId !== activeIdRef.current) {
+        if (process.env.NODE_ENV !== "production") {
+          console.log("[ContentNavigation] updateActive ->", nextId);
+        }
         activeIdRef.current = nextId;
         setActiveId(nextId);
       }
@@ -1173,6 +1203,13 @@ function ContentNavigation({
       if (!ticking) {
         ticking = true;
         window.requestAnimationFrame(() => {
+          if (process.env.NODE_ENV !== "production") {
+            console.log(
+              "[ContentNavigation] scroll event",
+              window.scrollY,
+              window.innerHeight
+            );
+          }
           updateActiveFromElements(elements);
           ticking = false;
         });
@@ -1189,7 +1226,8 @@ function ContentNavigation({
     (event, targetId, options = {}) => {
       var _a;
       try {
-        if (event && typeof event.preventDefault === "function") event.preventDefault();
+        if (event && typeof event.preventDefault === "function")
+          event.preventDefault();
       } catch (_) {
       }
       if (!isBrowser) return;
@@ -1216,10 +1254,10 @@ function ContentNavigation({
     },
     [computeOffsetPx, headingEntries, headingId, isBrowser]
   );
-  const renderNodes = React12.useCallback(
-    (nodes) => {
-      if (!nodes || !nodes.length) return null;
-      return nodes.map((node) => {
+  const navTreeRoot = React12.useMemo(() => {
+    function mapNodes(nodes2, parentKey = "section") {
+      if (!Array.isArray(nodes2) || !nodes2.length) return [];
+      return nodes2.map((node, index) => {
         if (!node) return null;
         const id = node.id ? String(node.id) : "";
         const depth = resolveDepth(
@@ -1227,48 +1265,34 @@ function ContentNavigation({
           getSavedDepth(id, 2)
         );
         if (depth > MAX_HEADING_DEPTH) return null;
-        const idx = depthIndex(depth);
+        const key = buildNodeKey(
+          id || node.title || `section-${index}`,
+          parentKey,
+          index
+        );
+        const href = id ? `#${id}` : "#";
+        const childNodes = mapNodes(node.children || [], key);
         const isActive = id && activeId === id;
-        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" : ""}`,
-            href: id ? `#${id}` : "#",
-            onClick: (event) => handleAnchorClick(event, id || null),
-            "aria-current": isActive ? "location" : void 0
-          },
-          node.title
-        ), childNodes ? /* @__PURE__ */ React12.createElement(
-          "ul",
-          {
-            className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
-            role: "list"
-          },
-          childNodes
-        ) : null);
-      });
-    },
-    [handleAnchorClick, activeId, getSavedDepth]
-  );
-  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" : ""}`,
-      href: `#${headingId}`,
-      onClick: (event) => handleAnchorClick(event, headingId, { scrollToTop: true }),
-      "aria-current": activeId === headingId ? "location" : void 0
-    },
-    effectiveHeading || pageTitle || headingId
-  ), nestedItems ? /* @__PURE__ */ React12.createElement(
-    "ul",
-    {
-      className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
-      role: "list"
-    },
-    nestedItems
-  ) : null) : null;
+        const hasActiveChild = childNodes.some(
+          (child) => child && child.isActive
+        );
+        return {
+          slug: key,
+          title: node.title || node.text || id || `Section ${index + 1}`,
+          href,
+          children: childNodes,
+          isActive: Boolean(isActive),
+          isExpanded: isActive || hasActiveChild
+        };
+      }).filter(Boolean);
+    }
+    const nodes = mapNodes(items, "section");
+    return {
+      slug: "content-nav-root",
+      title: effectiveHeading || pageTitle || "On this page",
+      children: nodes
+    };
+  }, [items, effectiveHeading, pageTitle, activeId, getSavedDepth]);
   return /* @__PURE__ */ React12.createElement(
     "nav",
     {
@@ -1281,20 +1305,101 @@ function ContentNavigation({
       "button",
       {
         type: "button",
-        className: "canopy-content-navigation__toggle",
+        className: `canopy-content-navigation__toggle ${toggleStateClass}`,
         "aria-expanded": isExpanded,
-        "aria-label": isExpanded ? "Hide section navigation" : "Show section navigation",
-        title: isExpanded ? "Hide section navigation" : "Show section navigation",
+        "aria-label": toggleSrLabel,
+        title: toggleSrLabel,
         onClick: handleToggle,
         "data-canopy-content-nav-toggle": "true",
         "data-show-label": "Show",
         "data-hide-label": "Hide",
-        "data-show-full-label": "Show section navigation",
-        "data-hide-full-label": "Hide section navigation"
+        "data-show-full-label": "Show content navigation",
+        "data-hide-full-label": "Hide content navigation"
       },
-      isExpanded ? "Hide" : "Show"
+      /* @__PURE__ */ React12.createElement(
+        "span",
+        {
+          className: "canopy-content-navigation__toggle-icon",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React12.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "ionicon",
+            viewBox: "0 0 512 512"
+          },
+          /* @__PURE__ */ React12.createElement(
+            "path",
+            {
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "50",
+              d: "M160 144h288M160 256h288M160 368h288"
+            }
+          ),
+          /* @__PURE__ */ React12.createElement(
+            "circle",
+            {
+              cx: "80",
+              cy: "144",
+              r: "16",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "32"
+            }
+          ),
+          /* @__PURE__ */ React12.createElement(
+            "circle",
+            {
+              cx: "80",
+              cy: "256",
+              r: "16",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "32"
+            }
+          ),
+          /* @__PURE__ */ React12.createElement(
+            "circle",
+            {
+              cx: "80",
+              cy: "368",
+              r: "16",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "32"
+            }
+          )
+        )
+      ),
+      /* @__PURE__ */ React12.createElement(
+        "span",
+        {
+          className: "canopy-content-navigation__toggle-label",
+          "data-canopy-content-nav-toggle-label": "true"
+        },
+        /* @__PURE__ */ React12.createElement("span", { className: "sr-only" }, toggleSrLabel)
+      ),
+      /* @__PURE__ */ React12.createElement("span", { className: "sr-only", "data-canopy-content-nav-toggle-sr": "true" }, toggleSrLabel)
     ),
-    /* @__PURE__ */ React12.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
+    /* @__PURE__ */ React12.createElement(
+      NavigationTree,
+      {
+        root: navTreeRoot,
+        includeRoot: false,
+        parentKey: "content-nav",
+        className: "canopy-sub-navigation__tree canopy-content-navigation__tree"
+      }
+    )
   );
 }
 
@@ -1384,18 +1489,219 @@ function ContentNavigationScript() {
     var layout = root.closest('.canopy-layout');
     if (layout) layout.classList.toggle('canopy-layout--content-nav-collapsed', isCollapsed);
     var nav = root.querySelector('[data-canopy-content-nav]');
-    if (nav) nav.classList.toggle('canopy-content-navigation--collapsed', isCollapsed);
+    if (nav) {
+      nav.classList.toggle('canopy-content-navigation--collapsed', isCollapsed);
+      nav.classList.toggle('canopy-content-navigation--expanded', !isCollapsed);
+      nav.setAttribute('data-expanded', isCollapsed ? 'false' : 'true');
+    }
     var toggle = root.querySelector('[data-canopy-content-nav-toggle]');
     if (toggle) {
       var showLabel = toggle.getAttribute('data-show-label') || 'Show';
       var hideLabel = toggle.getAttribute('data-hide-label') || 'Hide';
       var showFull = toggle.getAttribute('data-show-full-label') || 'Show section navigation';
       var hideFull = toggle.getAttribute('data-hide-full-label') || 'Hide section navigation';
-      toggle.textContent = isCollapsed ? showLabel : hideLabel;
+      var labelNode = toggle.querySelector('[data-canopy-content-nav-toggle-label]');
+      var srNode = toggle.querySelector('[data-canopy-content-nav-toggle-sr]');
       toggle.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
       toggle.setAttribute('aria-label', isCollapsed ? showFull : hideFull);
       toggle.setAttribute('title', isCollapsed ? showFull : hideFull);
+      toggle.classList.toggle('is-collapsed', isCollapsed);
+      toggle.classList.toggle('is-expanded', !isCollapsed);
+      if (!labelNode) {
+        toggle.textContent = isCollapsed ? showLabel : hideLabel;
+      }
+      if (srNode) {
+        srNode.textContent = isCollapsed ? showFull : hideFull;
+      }
     }
+    if (root.__canopyContentNavSync) {
+      try {
+        root.__canopyContentNavSync();
+      } catch (_) {}
+    }
+  }
+
+  function setupFloatingState(root) {
+    if (!root || typeof IntersectionObserver !== 'function') return;
+    if (root.__canopyContentNavFloating) return;
+    var sentinel = root.querySelector('[data-canopy-content-nav-sentinel]');
+    var placeholder = root.querySelector('[data-canopy-content-nav-placeholder]');
+    var nav = root.querySelector('[data-canopy-content-nav]');
+    if (!sentinel || !nav) return;
+    root.__canopyContentNavFloating = true;
+
+    function syncPosition() {
+      try {
+        var rect = root.getBoundingClientRect();
+        nav.style.setProperty('--canopy-content-nav-fixed-right', '1.618rem');
+        nav.style.setProperty('--canopy-content-nav-fixed-width', rect.width + 'px');
+        if (placeholder) placeholder.style.width = rect.width + 'px';
+      } catch (_) {}
+    }
+
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var stuck = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+        nav.classList.toggle('canopy-content-navigation--floating', stuck);
+        nav.setAttribute('data-stuck', stuck ? 'true' : 'false');
+        if (placeholder) {
+          placeholder.style.height = stuck ? nav.offsetHeight + 'px' : '0px';
+        }
+      });
+    });
+
+    observer.observe(sentinel);
+    syncPosition();
+    var handleResize = function () {
+      syncPosition();
+    };
+    window.addEventListener('resize', handleResize);
+    root.__canopyContentNavCleanup = function () {
+      observer.disconnect();
+      window.removeEventListener('resize', handleResize);
+    };
+    root.__canopyContentNavSync = syncPosition;
+  }
+
+  function computeOffsetPx() {
+    try {
+      var root = document.documentElement;
+      var size = root ? parseFloat(window.getComputedStyle(root).fontSize || '16') || 16 : 16;
+      return size * 1.618;
+    } catch (error) {
+      return 0;
+    }
+  }
+
+  function setupActiveHeadingWatcher(root) {
+    if (!root || root.__canopyContentNavActive) return;
+    var nav = root.querySelector('[data-canopy-content-nav]');
+    if (!nav) return;
+    var linkNodes = Array.prototype.slice.call(
+      nav.querySelectorAll('.canopy-nav-tree__link[href^="#"]')
+    );
+    var entries = linkNodes
+      .map(function (link) {
+        if (!link || !link.getAttribute) return null;
+        var href = link.getAttribute('href') || '';
+        if (!href || href.charAt(0) !== '#') return null;
+        var id = href.slice(1);
+        if (!id) return null;
+        var target = document.getElementById(id);
+        if (!target) return null;
+        return {
+          id: id,
+          link: link,
+          target: target,
+          item: link.closest('[data-canopy-nav-item]') || null,
+        };
+      })
+      .filter(Boolean);
+    if (!entries.length) return;
+    root.__canopyContentNavActive = true;
+    var activeId = null;
+
+    function expandParents(link) {
+      var parent = link ? link.closest('[data-canopy-nav-item]') : null;
+      while (parent) {
+        parent.setAttribute('data-expanded', 'true');
+        var toggle = parent.querySelector('[data-canopy-nav-item-toggle]');
+        if (toggle) {
+          toggle.setAttribute('aria-expanded', 'true');
+          var targetId = toggle.getAttribute('data-canopy-nav-item-toggle');
+          if (targetId) {
+            var panel = document.getElementById(targetId);
+            if (panel) {
+              panel.hidden = false;
+              panel.removeAttribute('hidden');
+              panel.setAttribute('aria-hidden', 'false');
+            }
+          }
+        }
+        parent = parent.parentElement
+          ? parent.parentElement.closest('[data-canopy-nav-item]')
+          : null;
+      }
+    }
+
+    function applyActive(id) {
+      if (!id || activeId === id) return;
+      activeId = id;
+      var activeParents = new Set();
+      entries.forEach(function (entry) {
+        var isActive = entry.id === id;
+        entry.link.classList.toggle('is-active', isActive);
+        if (entry.item) entry.item.classList.toggle('is-active', isActive);
+        if (isActive) {
+          expandParents(entry.link);
+          var parent = entry.link.closest('[data-canopy-nav-item]');
+          while (parent) {
+            activeParents.add(parent);
+            parent = parent.parentElement
+              ? parent.parentElement.closest('[data-canopy-nav-item]')
+              : null;
+          }
+        }
+      });
+      entries.forEach(function (entry) {
+        var item = entry.item;
+        if (!item) return;
+        if (!activeParents.has(item) && entry.id !== id) {
+          item.setAttribute('data-expanded', 'false');
+          var toggle = item.querySelector('[data-canopy-nav-item-toggle]');
+          if (toggle) {
+            toggle.setAttribute('aria-expanded', 'false');
+            var targetId = toggle.getAttribute('data-canopy-nav-item-toggle');
+            if (targetId) {
+              var panel = document.getElementById(targetId);
+              if (panel) {
+                panel.hidden = true;
+                panel.setAttribute('hidden', '');
+                panel.setAttribute('aria-hidden', 'true');
+              }
+            }
+          }
+        }
+      });
+    }
+
+    function updateActive() {
+      var offset = computeOffsetPx();
+      var baseFont = 16;
+      try {
+        var root = document.documentElement;
+        baseFont = parseFloat(window.getComputedStyle(root).fontSize || '16') || 16;
+      } catch (_) {}
+      var proximityLimit = baseFont * 5;
+      var fallbackId = entries[0].id;
+      var bestId = fallbackId;
+      var bestDistance = Number.POSITIVE_INFINITY;
+      entries.forEach(function (entry) {
+        if (!entry || !entry.target) return;
+        var rect = entry.target.getBoundingClientRect();
+        var relativeTop = rect.top - offset;
+        if (relativeTop < -proximityLimit) return;
+        var distance = Math.abs(relativeTop);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          bestId = entry.id;
+        }
+      });
+      applyActive(bestId || fallbackId);
+    }
+
+    updateActive();
+    var ticking = false;
+    function handle() {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(function () {
+        updateActive();
+        ticking = false;
+      });
+    }
+    window.addEventListener('scroll', handle, { passive: true });
+    window.addEventListener('resize', handle);
   }
 
   ready(function () {
@@ -1405,7 +1711,16 @@ function ContentNavigationScript() {
     if (!roots.length) return;
     var stored = getStored();
     var collapsed = true;
-    if (stored === '0' || stored === 'false') {
+    var isDesktop = false;
+    try {
+      var bp = window.getComputedStyle(document.documentElement).getPropertyValue('--canopy-desktop-breakpoint') || '70rem';
+      isDesktop = window.matchMedia('(min-width: ' + bp.trim() + ')').matches;
+    } catch (_) {
+      isDesktop = false;
+    }
+    if (!isDesktop) {
+      collapsed = true;
+    } else if (stored === '0' || stored === 'false') {
       collapsed = false;
     } else if (stored === '1' || stored === 'true') {
       collapsed = true;
@@ -1429,6 +1744,11 @@ function ContentNavigationScript() {
         sync(!collapsed);
       });
     });
+
+    roots.forEach(function (root) {
+      setupFloatingState(root);
+      setupActiveHeadingWatcher(root);
+    });
   });
 })();
   `;
@@ -1497,6 +1817,13 @@ function Layout({
       className: contentNavigationAsideClassName,
       "data-canopy-content-nav-root": "true"
     },
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        "data-canopy-content-nav-sentinel": "true",
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ React13.createElement(
       ContentNavigation,
       {
@@ -1505,6 +1832,13 @@ function Layout({
         headingId: headingAnchorId || void 0,
         pageTitle: context && context.page ? context.page.title : void 0
       }
+    ),
+    /* @__PURE__ */ React13.createElement(
+      "div",
+      {
+        "data-canopy-content-nav-placeholder": "true",
+        "aria-hidden": "true"
+      }
     )
   ), /* @__PURE__ */ React13.createElement(ContentNavigationScript, null)) : null);
 }
@@ -2132,7 +2466,7 @@ function getSharedRoot() {
 function getSafePageContext() {
   const root = getSharedRoot();
   if (root && root[CONTEXT_KEY]) return root[CONTEXT_KEY];
-  const ctx = React20.createContext({ navigation: null, page: null });
+  const ctx = React20.createContext({ navigation: null, page: null, site: null });
   if (root) root[CONTEXT_KEY] = ctx;
   return ctx;
 }
@@ -2199,13 +2533,18 @@ function CanopyHeader(props = {}) {
     searchHotkey = "mod+k",
     searchPlaceholder = "Search\u2026",
     brandHref = "/",
-    title = "Canopy IIIF",
+    title: titleProp,
     logo: SiteLogo
   } = props;
   const navLinks = ensureArray(navLinksProp);
   const PageContext = getSafePageContext();
   const context = React20.useContext(PageContext);
   const contextNavigation = context && context.navigation ? context.navigation : null;
+  const contextSite = context && context.site ? context.site : null;
+  const contextSiteTitle = contextSite && typeof contextSite.title === "string" ? contextSite.title.trim() : "";
+  const defaultHeaderTitle = contextSiteTitle || "Site title";
+  const normalizedTitleProp = typeof titleProp === "string" ? titleProp.trim() : "";
+  const resolvedTitle = normalizedTitleProp || defaultHeaderTitle;
   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 : "");
@@ -2234,7 +2573,7 @@ function CanopyHeader(props = {}) {
     /* @__PURE__ */ React20.createElement("div", { className: "canopy-header__brand" }, /* @__PURE__ */ React20.createElement(
       CanopyBrand,
       {
-        label: title,
+        label: resolvedTitle,
         href: brandHref,
         className: "canopy-header__brand-link",
         Logo: SiteLogo
@@ -2329,7 +2668,7 @@ function CanopyHeader(props = {}) {
       id: "canopy-modal-nav",
       variant: "nav",
       labelledBy: "canopy-modal-nav-label",
-      label: title,
+      label: resolvedTitle,
       logo: SiteLogo,
       href: brandHref,
       closeLabel: "Close navigation",
@@ -2424,7 +2763,7 @@ function CanopyHeader(props = {}) {
       id: "canopy-modal-search",
       variant: "search",
       labelledBy: "canopy-modal-search-label",
-      label: title,
+      label: resolvedTitle,
       logo: SiteLogo,
       href: brandHref,
       closeLabel: "Close search",