@canopy-iiif/app 0.8.6 → 0.9.1

package/ui/dist/server.mjs

@@ -1,41 +1,8 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-// ui/src/iiif/hero-utils.js
-var require_hero_utils = __commonJS({
-  "ui/src/iiif/hero-utils.js"(exports, module) {
-    "use strict";
-    function computeHeroHeightStyle2(height) {
-      const h = typeof height === "number" ? `${height}px` : String(height || "").trim();
-      const val = h || "360px";
-      return { width: "100%", height: val };
-    }
-    module.exports = { computeHeroHeightStyle: computeHeroHeightStyle2 };
-  }
-});
 
 // ui/src/HelloWorld.jsx
 import React from "react";
@@ -198,10 +165,25 @@ function MdxRelatedItems(props) {
   return /* @__PURE__ */ React5.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
-// ui/src/iiif/Hero.jsx
-var import_hero_utils = __toESM(require_hero_utils());
+// ui/src/interstitials/index.js
+var interstitials_exports = {};
+__export(interstitials_exports, {
+  Hero: () => Hero,
+  computeHeroHeightStyle: () => computeHeroHeightStyle
+});
+
+// ui/src/interstitials/Hero.jsx
 import React6 from "react";
 import helpers from "@canopy-iiif/app/lib/components/featured.js";
+
+// ui/src/interstitials/hero-utils.js
+function computeHeroHeightStyle(height) {
+  const h = typeof height === "number" ? `${height}px` : String(height || "").trim();
+  const val = h || "360px";
+  return { width: "100%", height: val };
+}
+
+// ui/src/interstitials/Hero.jsx
 var basePath = (() => {
   try {
     const raw = typeof process !== "undefined" && process && process.env ? String(process.env.CANOPY_BASE_PATH || "") : "";
@@ -221,68 +203,196 @@ function applyBasePath(href) {
   }
   return href;
 }
+function resolveFeaturedItem({ item, index, random }) {
+  if (item) return item;
+  const list = helpers && helpers.readFeaturedFromCacheSync ? helpers.readFeaturedFromCacheSync() : [];
+  if (!list.length) return null;
+  if (typeof index === "number") {
+    const idx = Math.max(0, Math.min(list.length - 1, Math.floor(index)));
+    return list[idx];
+  }
+  if (random === true || random === "true") {
+    const idx = Math.floor(Math.random() * Math.max(1, list.length));
+    return list[idx];
+  }
+  return list[0];
+}
+function normalizeLinks(links) {
+  if (!Array.isArray(links)) return [];
+  return links.map((link) => {
+    if (!link) return null;
+    const href = applyBasePath(link.href || "");
+    const title = link.title ? String(link.title) : "";
+    if (!href || !title) return null;
+    const type = link.type === "secondary" ? "secondary" : "primary";
+    return { href, title, type };
+  }).filter(Boolean);
+}
+function sanitizeRest(rest) {
+  const clone = { ...rest };
+  try {
+    delete clone.random;
+    delete clone.index;
+    delete clone.item;
+    delete clone.links;
+    delete clone.overlay;
+    delete clone.variant;
+    delete clone.background;
+  } catch (_) {
+  }
+  return clone;
+}
+function normalizeBackground(value) {
+  try {
+    const allowed = /* @__PURE__ */ new Set(["theme", "transparent"]);
+    const raw = value == null ? "" : String(value);
+    const normalized = raw.trim().toLowerCase();
+    return allowed.has(normalized) ? normalized : "theme";
+  } catch (_) {
+    return "theme";
+  }
+}
 function Hero({
-  height = 360,
+  height = 520,
   item,
   index,
-  random,
+  random = true,
+  headline,
+  description,
+  links = [],
   className = "",
   style = {},
+  background = "theme",
   ...rest
 }) {
-  let resolved = item;
-  if (!resolved) {
-    const list = helpers && helpers.readFeaturedFromCacheSync ? helpers.readFeaturedFromCacheSync() : [];
-    let idx = 0;
-    if (typeof index === "number") {
-      idx = Math.max(0, Math.min(list.length - 1, Math.floor(index)));
-    } else if (random === true || random === "true") {
-      idx = Math.floor(Math.random() * Math.max(1, list.length));
+  const resolved = resolveFeaturedItem({ item, index, random });
+  const helpersList = helpers && helpers.readFeaturedFromCacheSync ? helpers.readFeaturedFromCacheSync() : [];
+  const slides = [];
+  const pushUnique = (entry) => {
+    if (!entry) return;
+    const key = String(entry.href || entry.id || entry.title || "");
+    const hasKey = slides.some(
+      (item2) => String(item2 && (item2.href || item2.id || item2.title || "")) === key
+    );
+    if (!hasKey) {
+      slides.push(entry);
     }
-    resolved = list[idx] || list[0] || null;
-  }
-  const hStyle = (0, import_hero_utils.computeHeroHeightStyle)(height);
-  const title = resolved && resolved.title || "";
-  const href = resolved && resolved.href || "#";
-  const thumbnail = resolved && resolved.thumbnail || "";
-  const mediaStyles = {
-    position: "relative",
-    ...hStyle,
-    overflow: "hidden",
-    backgroundColor: "var(--color-gray-muted)"
   };
-  const imgStyles = {
-    position: "absolute",
-    inset: 0,
-    width: "100%",
-    height: "100%",
-    objectFit: "cover",
-    objectPosition: "center",
-    filter: "none"
+  if (resolved) pushUnique(resolved);
+  helpersList.forEach(pushUnique);
+  if (!slides.length) return null;
+  let orderedSlides = slides.slice();
+  if (typeof index === "number" && orderedSlides.length > 1) {
+    const clamp = Math.max(
+      0,
+      Math.min(orderedSlides.length - 1, Math.floor(index))
+    );
+    if (clamp > 0) {
+      orderedSlides = orderedSlides.slice(clamp).concat(orderedSlides.slice(0, clamp));
+    }
+  } else if (random === true || random === "true") {
+    const rand = Math.floor(Math.random() * orderedSlides.length);
+    if (rand > 0) {
+      orderedSlides = orderedSlides.slice(rand).concat(orderedSlides.slice(0, rand));
+    }
+  }
+  const heroHeight = computeHeroHeightStyle(height);
+  const heroStyles = { ...style || {} };
+  if (heroHeight && heroHeight.height) {
+    heroStyles["--hero-height"] = heroHeight.height;
+  }
+  const derivedDescription = description ? String(description) : "";
+  const normalizedLinks = normalizeLinks(links);
+  const primarySlide = orderedSlides[0] || null;
+  const overlayTitle = headline || primarySlide && primarySlide.title || "";
+  const defaultLinkHref = applyBasePath(
+    primarySlide && primarySlide.href ? primarySlide.href : "#"
+  );
+  const overlayLinks = normalizedLinks.length ? normalizedLinks : [
+    {
+      href: defaultLinkHref,
+      title: "View work",
+      type: "primary"
+    }
+  ];
+  const normalizedBackground = normalizeBackground(background);
+  const backgroundClassName = normalizedBackground === "transparent" ? "canopy-interstitial--bg-transparent" : "";
+  const containerClassName = [
+    "canopy-interstitial",
+    "canopy-interstitial--hero",
+    backgroundClassName,
+    className
+  ].filter(Boolean).join(" ");
+  const renderSlide = (slide, idx, { showVeil = true, captionVariant = "overlay" } = {}) => {
+    const safeHref = applyBasePath(slide.href || "#");
+    const isStaticCaption = captionVariant === "static";
+    const paneClassName = [
+      "canopy-interstitial__pane",
+      showVeil ? "" : "canopy-interstitial__pane--flat",
+      isStaticCaption ? "canopy-interstitial__pane--static" : ""
+    ].filter(Boolean).join(" ");
+    if (isStaticCaption) {
+      return /* @__PURE__ */ React6.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React6.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React6.createElement(
+        "img",
+        {
+          src: slide.thumbnail,
+          alt: "",
+          "aria-hidden": "true",
+          className: "canopy-interstitial__media canopy-interstitial__media--static",
+          loading: idx === 0 ? "eager" : "lazy"
+        }
+      )) : null, slide.title ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
+    }
+    return /* @__PURE__ */ React6.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React6.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React6.createElement(
+      "img",
+      {
+        src: slide.thumbnail,
+        alt: "",
+        "aria-hidden": "true",
+        className: "canopy-interstitial__media",
+        loading: idx === 0 ? "eager" : "lazy"
+      }
+    ) : null, showVeil ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
   };
-  const sanitizedRest = (() => {
-    const r = { ...rest };
-    try {
-      delete r.random;
-      delete r.index;
-    } catch (_) {
+  const renderSlider = (options = {}) => /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React6.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous slide",
+      className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--prev swiper-button-prev"
     }
-    return r;
-  })();
-  const figureClassName = ["canopy-hero", className].filter(Boolean).join(" ");
-  const figureStyles = { margin: 0, padding: 0, ...style };
-  const safeHref = applyBasePath(href);
-  return /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-hero-link" }, /* @__PURE__ */ React6.createElement("figure", { className: figureClassName, style: figureStyles, ...sanitizedRest }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-hero__media", style: mediaStyles }, thumbnail ? /* @__PURE__ */ React6.createElement("img", { src: thumbnail, alt: "", "aria-hidden": "true", style: imgStyles }) : null), title ? /* @__PURE__ */ React6.createElement("figcaption", null, title) : null));
-}
-
-// ui/src/iiif/FeaturedHero.jsx
-import React7 from "react";
-function FeaturedHero(props = {}) {
-  return /* @__PURE__ */ React7.createElement(Hero, { ...props });
+  ), /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next slide",
+      className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--next swiper-button-next"
+    }
+  )), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
+  const overlayContent = /* @__PURE__ */ React6.createElement(React6.Fragment, null, overlayTitle ? /* @__PURE__ */ React6.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React6.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, overlayLinks.length ? /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__actions" }, overlayLinks.map((link) => /* @__PURE__ */ React6.createElement(
+    "a",
+    {
+      key: `${link.href}-${link.title}`,
+      href: link.href,
+      className: link.type === "secondary" ? "canopy-button canopy-button--secondary" : "canopy-button canopy-button--primary"
+    },
+    link.title
+  ))) : null);
+  const cleanedProps = sanitizeRest(rest);
+  return /* @__PURE__ */ React6.createElement(
+    "section",
+    {
+      className: containerClassName,
+      "data-canopy-hero-slider": "1",
+      style: heroStyles,
+      ...cleanedProps
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React6.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" })))
+  );
 }
 
 // ui/src/layout/SubNavigation.jsx
-import React8 from "react";
+import React7 from "react";
 import navigationHelpers from "@canopy-iiif/app/lib/components/navigation.js";
 function resolveRelativeCandidate(page, current) {
   if (page && typeof page.relativePath === "string" && page.relativePath) return page.relativePath;
@@ -307,14 +417,14 @@ function renderNodes(nodes, parentKey = "node") {
     if (node.isActive) classes.push("is-active");
     const linkClass = classes.join(" ");
     const Tag = node.href ? "a" : "span";
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React7.createElement(
       "li",
       {
         key,
         className: "canopy-sub-navigation__item",
         "data-depth": depth
       },
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React7.createElement(
         Tag,
         {
           className: linkClass,
@@ -323,7 +433,7 @@ function renderNodes(nodes, parentKey = "node") {
         },
         node.title || node.slug
       ),
-      showChildren ? /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
+      showChildren ? /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
     );
   });
 }
@@ -337,12 +447,12 @@ function SubNavigation({
   ariaLabel
 }) {
   const PageContext = navigationHelpers && navigationHelpers.getPageContext ? navigationHelpers.getPageContext() : null;
-  const context = PageContext ? React8.useContext(PageContext) : null;
+  const context = PageContext ? React7.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 = React8.useMemo(() => {
+  const resolvedNavigation = React7.useMemo(() => {
     if (effectiveNavigation && effectiveNavigation.root) return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
     if (!candidate) return effectiveNavigation || null;
@@ -366,11 +476,341 @@ function SubNavigation({
   if (!Object.prototype.hasOwnProperty.call(inlineStyle, "--sub-nav-indent")) {
     inlineStyle["--sub-nav-indent"] = "0.85rem";
   }
-  return /* @__PURE__ */ React8.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
+  return /* @__PURE__ */ React7.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React7.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
 }
 
-// ui/src/search/MdxSearchResults.jsx
+// ui/src/layout/Layout.jsx
 import React9 from "react";
+import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
+
+// ui/src/layout/ContentNavigation.jsx
+import React8 from "react";
+var SCROLL_OFFSET_REM = 1.618;
+function depthIndex(depth) {
+  return Math.max(0, Math.min(5, (depth || 1) - 1));
+}
+function ContentNavigation({
+  items = [],
+  className = "",
+  style = {},
+  heading,
+  headingId,
+  pageTitle,
+  ariaLabel
+}) {
+  const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+  const savedDepthsRef = React8.useRef(null);
+  if ((!items || !items.length) && !headingId) return null;
+  const combinedClassName = ["canopy-sub-navigation canopy-content-navigation", className].filter(Boolean).join(" ");
+  const effectiveHeading = heading || pageTitle || null;
+  const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
+  const getSavedDepth = React8.useCallback(
+    (id, fallback) => {
+      if (!id) return fallback;
+      if (!savedDepthsRef.current) savedDepthsRef.current = /* @__PURE__ */ new Map();
+      const store = savedDepthsRef.current;
+      if (store.has(id)) return store.get(id);
+      store.set(id, fallback);
+      return fallback;
+    },
+    []
+  );
+  const headingEntries = React8.useMemo(() => {
+    const entries = [];
+    const seen = /* @__PURE__ */ new Set();
+    if (headingId) {
+      const topId = String(headingId);
+      entries.push({ id: topId, depth: 1 });
+      seen.add(topId);
+    }
+    const pushNodes = (nodes) => {
+      if (!Array.isArray(nodes)) return;
+      nodes.forEach((node) => {
+        if (!node || !node.id) return;
+        const id = String(node.id);
+        if (seen.has(id)) return;
+        seen.add(id);
+        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        entries.push({ id, depth });
+        if (node.children && node.children.length) pushNodes(node.children);
+      });
+    };
+    pushNodes(items);
+    return entries;
+  }, [headingId, items, getSavedDepth]);
+  const fallbackId = headingEntries.length ? headingEntries[0].id : headingId || null;
+  const [activeId, setActiveId] = React8.useState(fallbackId);
+  const activeIdRef = React8.useRef(activeId);
+  React8.useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+  React8.useEffect(() => {
+    if (!headingEntries.length) return;
+    if (!headingEntries.some((entry) => entry.id === activeIdRef.current)) {
+      const next = headingEntries[0].id;
+      activeIdRef.current = next;
+      setActiveId(next);
+    }
+  }, [headingEntries]);
+  const computeOffsetPx = React8.useCallback(() => {
+    if (!isBrowser) return 0;
+    try {
+      const root = document.documentElement;
+      const fontSize = root ? parseFloat(window.getComputedStyle(root).fontSize || "16") || 16 : 16;
+      return fontSize * SCROLL_OFFSET_REM;
+    } catch (_) {
+      return 0;
+    }
+  }, [isBrowser]);
+  const headingElementsRef = React8.useRef([]);
+  const updateActiveFromElements = React8.useCallback(
+    (elements) => {
+      if (!elements || !elements.length) return;
+      const offset = computeOffsetPx();
+      let nextId = elements[0].id;
+      for (const { id, element } of elements) {
+        const rect = element.getBoundingClientRect();
+        if (rect.top - offset <= 0) {
+          nextId = id;
+        } else {
+          break;
+        }
+      }
+      if (nextId && nextId !== activeIdRef.current) {
+        activeIdRef.current = nextId;
+        setActiveId(nextId);
+      }
+    },
+    [computeOffsetPx]
+  );
+  React8.useEffect(() => {
+    if (!isBrowser) return void 0;
+    const elements = headingEntries.map((entry) => {
+      const element = document.getElementById(entry.id);
+      return element ? { id: entry.id, element } : null;
+    }).filter(Boolean);
+    headingElementsRef.current = elements;
+    updateActiveFromElements(elements);
+    if (!elements.length) return void 0;
+    let ticking = false;
+    const handle = () => {
+      if (!ticking) {
+        ticking = true;
+        window.requestAnimationFrame(() => {
+          updateActiveFromElements(elements);
+          ticking = false;
+        });
+      }
+    };
+    window.addEventListener("scroll", handle, { passive: true });
+    window.addEventListener("resize", handle);
+    return () => {
+      window.removeEventListener("scroll", handle);
+      window.removeEventListener("resize", handle);
+    };
+  }, [headingEntries, isBrowser, updateActiveFromElements]);
+  const handleAnchorClick = React8.useCallback(
+    (event, targetId, options = {}) => {
+      var _a;
+      try {
+        if (event && typeof event.preventDefault === "function") event.preventDefault();
+      } catch (_) {
+      }
+      if (!isBrowser) return;
+      const offset = computeOffsetPx();
+      let top = 0;
+      if (targetId && targetId !== "top" && !options.scrollToTop) {
+        const el = document.getElementById(targetId);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          top = window.scrollY + rect.top - offset;
+        }
+      }
+      if (!Number.isFinite(top) || top < 0 || options.scrollToTop) top = 0;
+      const nextId = targetId && targetId !== "top" ? targetId : ((_a = headingEntries[0]) == null ? void 0 : _a.id) || headingId || null;
+      if (nextId) {
+        activeIdRef.current = nextId;
+        setActiveId(nextId);
+      }
+      try {
+        window.scrollTo({ top, behavior: "smooth" });
+      } catch (_) {
+        window.scrollTo(0, top);
+      }
+    },
+    [computeOffsetPx, headingEntries, headingId, isBrowser]
+  );
+  const renderNodes2 = React8.useCallback(
+    (nodes) => {
+      if (!nodes || !nodes.length) return null;
+      return nodes.map((node) => {
+        if (!node) return null;
+        const id = node.id ? String(node.id) : "";
+        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        const idx = depthIndex(depth);
+        const isActive = id && activeId === id;
+        return /* @__PURE__ */ React8.createElement("li", { key: id || node.title, className: "canopy-sub-navigation__item", "data-depth": idx }, /* @__PURE__ */ React8.createElement(
+          "a",
+          {
+            className: `canopy-sub-navigation__link depth-${idx}${isActive ? " is-active" : ""}`,
+            href: id ? `#${id}` : "#",
+            onClick: (event) => handleAnchorClick(event, id || null),
+            "aria-current": isActive ? "location" : void 0
+          },
+          node.title
+        ), node.children && node.children.length ? /* @__PURE__ */ React8.createElement(
+          "ul",
+          {
+            className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
+            role: "list"
+          },
+          renderNodes2(node.children)
+        ) : null);
+      });
+    },
+    [handleAnchorClick, activeId, getSavedDepth]
+  );
+  const nestedItems = renderNodes2(items);
+  const topLink = headingId ? /* @__PURE__ */ React8.createElement("li", { className: "canopy-sub-navigation__item", "data-depth": 0 }, /* @__PURE__ */ React8.createElement(
+    "a",
+    {
+      className: `canopy-sub-navigation__link depth-0${activeId === headingId ? " is-active" : ""}`,
+      href: `#${headingId}`,
+      onClick: (event) => handleAnchorClick(event, headingId, { scrollToTop: true }),
+      "aria-current": activeId === headingId ? "location" : void 0
+    },
+    effectiveHeading || pageTitle || headingId
+  ), nestedItems ? /* @__PURE__ */ React8.createElement(
+    "ul",
+    {
+      className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
+      role: "list"
+    },
+    nestedItems
+  ) : null) : null;
+  return /* @__PURE__ */ React8.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
+}
+
+// ui/src/layout/Layout.jsx
+function buildHeadingTree(headings) {
+  if (!Array.isArray(headings) || !headings.length) return [];
+  const root = [];
+  const stack = [];
+  headings.forEach((heading) => {
+    if (!heading || typeof heading !== "object") return;
+    const depth = typeof heading.depth === "number" ? heading.depth : heading.level;
+    if (typeof depth !== "number" || depth < 2) return;
+    const entry = {
+      id: heading.id || heading.slug || heading.title,
+      title: heading.title || heading.text || heading.id,
+      depth,
+      children: []
+    };
+    while (stack.length && stack[stack.length - 1].depth >= entry.depth) {
+      stack.pop();
+    }
+    if (!stack.length) {
+      root.push(entry);
+    } else {
+      stack[stack.length - 1].children.push(entry);
+    }
+    stack.push(entry);
+  });
+  return root;
+}
+function buildNavigationAside(sidebar, className) {
+  if (!sidebar) {
+    return /* @__PURE__ */ React9.createElement(SubNavigation, { className });
+  }
+  if (typeof sidebar === "function") {
+    return React9.createElement(sidebar);
+  }
+  return sidebar;
+}
+function Layout({
+  children,
+  sidebar,
+  navigation = true,
+  fluid = false,
+  contentNavigation = true,
+  className = "",
+  contentClassName = "",
+  sidebarClassName = "",
+  contentNavigationClassName = "",
+  ...rest
+}) {
+  const PageContext = navigationHelpers2 && typeof navigationHelpers2.getPageContext === "function" ? navigationHelpers2.getPageContext() : null;
+  const context = PageContext ? React9.useContext(PageContext) : null;
+  const pageHeadings = React9.useMemo(() => {
+    const headings = context && context.page ? context.page.headings : null;
+    return Array.isArray(headings) ? headings : [];
+  }, [context]);
+  const contentHeading = React9.useMemo(() => {
+    const first = pageHeadings.find((heading) => {
+      const depth = heading && (heading.depth || heading.level);
+      return depth === 1;
+    });
+    return first && first.title ? first.title : null;
+  }, [pageHeadings]);
+  const headingAnchorId = React9.useMemo(() => {
+    const first = pageHeadings.find((heading) => {
+      const depth = heading && (heading.depth || heading.level);
+      return depth === 1;
+    });
+    return first && first.id ? first.id : null;
+  }, [pageHeadings]);
+  const headingTree = React9.useMemo(
+    () => buildHeadingTree(pageHeadings),
+    [pageHeadings]
+  );
+  const showLeftColumn = navigation !== false;
+  const hasContentNavigation = navigation !== false && contentNavigation !== false && headingTree.length > 0;
+  const gridClass = (() => {
+    if (showLeftColumn && hasContentNavigation) {
+      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)_14rem] md:items-start md:gap-10";
+    }
+    if (showLeftColumn) {
+      return "md:grid md:grid-cols-[17rem_minmax(0,1fr)] md:items-start md:gap-10";
+    }
+    if (hasContentNavigation) {
+      return "md:grid md:grid-cols-[minmax(0,1fr)_14rem] md:items-start md:gap-10";
+    }
+    return "";
+  })();
+  const containerClassName = [
+    "w-full py-6 getting-started-layout",
+    gridClass,
+    fluid ? "px-4 md:px-8 lg:px-12" : "mx-auto max-w-content px-4",
+    className
+  ].filter(Boolean).join(" ");
+  const leftAsideClassName = [
+    "mt-8 md:mt-0 md:order-1 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-sm text-slate-600",
+    sidebarClassName
+  ].filter(Boolean).join(" ");
+  const contentOrderClass = showLeftColumn ? "md:order-2" : hasContentNavigation ? "md:order-1" : "";
+  const contentClassNames = [
+    "space-y-6",
+    contentOrderClass,
+    contentClassName
+  ].filter(Boolean).join(" ");
+  const contentNavigationAsideClassName = [
+    "hidden md:block md:order-3 mt-8 md:mt-0 md:sticky md:top-24 md:max-h-[calc(100vh-6rem)] md:overflow-y-auto text-sm text-slate-600",
+    contentNavigationClassName
+  ].filter(Boolean).join(" ");
+  const sidebarNode = showLeftColumn ? buildNavigationAside(sidebar, sidebarClassName) : null;
+  return /* @__PURE__ */ React9.createElement("div", { className: containerClassName, ...rest }, showLeftColumn ? /* @__PURE__ */ React9.createElement("aside", { className: leftAsideClassName }, sidebarNode) : null, /* @__PURE__ */ React9.createElement("div", { className: contentClassNames }, children), hasContentNavigation ? /* @__PURE__ */ React9.createElement("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React9.createElement(
+    ContentNavigation,
+    {
+      items: headingTree,
+      heading: contentHeading || void 0,
+      headingId: headingAnchorId || void 0,
+      pageTitle: context && context.page ? context.page.title : void 0
+    }
+  )) : null);
+}
+
+// ui/src/search/MdxSearchResults.jsx
+import React10 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -378,11 +818,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React10 from "react";
+import React11 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -390,11 +830,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React11 from "react";
+import React12 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -402,18 +842,18 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React12.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React12.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React15 from "react";
+import React16 from "react";
 
 // ui/src/Icons.jsx
-import React12 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React12.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+import React13 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
-import React13 from "react";
+import React14 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -476,18 +916,18 @@ function SearchPanelForm(props = {}) {
     clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React13.useMemo(
+  const action = React14.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React13.useId === "function" ? React13.useId() : void 0;
-  const [fallbackId] = React13.useState(
+  const autoId = typeof React14.useId === "function" ? React14.useId() : void 0;
+  const [fallbackId] = React14.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React13.useRef(null);
-  const [hasValue, setHasValue] = React13.useState(false);
-  const focusInput = React13.useCallback(() => {
+  const inputRef = React14.useRef(null);
+  const [hasValue, setHasValue] = React14.useState(false);
+  const focusInput = React14.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -500,7 +940,7 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React13.useCallback(
+  const handlePointerDown = React14.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
@@ -512,23 +952,23 @@ function SearchPanelForm(props = {}) {
     },
     [focusInput]
   );
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React13.useCallback((event) => {
+  const handleInputChange = React14.useCallback((event) => {
     var _a;
     const nextHasValue = Boolean(
       ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim()
     );
     setHasValue(nextHasValue);
   }, []);
-  const handleClear = React13.useCallback((event) => {
+  const handleClear = React14.useCallback((event) => {
   }, []);
-  const handleClearKey = React13.useCallback(
+  const handleClearKey = React14.useCallback(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -537,7 +977,7 @@ function SearchPanelForm(props = {}) {
     },
     [handleClear]
   );
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "form",
     {
       action,
@@ -549,7 +989,7 @@ function SearchPanelForm(props = {}) {
       onPointerDown: handlePointerDown,
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React13.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React13.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React14.createElement(
       "input",
       {
         id: inputId,
@@ -565,7 +1005,7 @@ function SearchPanelForm(props = {}) {
         onInput: handleInputChange
       }
     )),
-    hasValue ? /* @__PURE__ */ React13.createElement(
+    hasValue ? /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "button",
@@ -578,32 +1018,32 @@ function SearchPanelForm(props = {}) {
       },
       "\xD7"
     ) : null,
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React13.createElement("span", null, text),
-      /* @__PURE__ */ React13.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React13.createElement("span", null, "\u2318"), /* @__PURE__ */ React13.createElement("span", null, "K"))
+      /* @__PURE__ */ React14.createElement("span", null, text),
+      /* @__PURE__ */ React14.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React14.createElement("span", null, "\u2318"), /* @__PURE__ */ React14.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React14 from "react";
+import React15 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React14.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React15.createElement("div", { id: "cplist" })
   );
 }
 
@@ -623,11 +1063,11 @@ function MdxSearchFormModal(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React15.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React15.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/search/SearchPanel.jsx
-import React16 from "react";
+import React17 from "react";
 function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -644,11 +1084,11 @@ function SearchPanel(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ 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/iiif/ManifestPrimitives.jsx
-import React17 from "react";
+import React18 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -673,30 +1113,30 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React17.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React17.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React17.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverMetadata, { metadata: items, ...rest });
 }
 function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   const stmt = requiredStatement || manifest && manifest.requiredStatement;
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React17.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React18.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 export {
-  FeaturedHero,
   HelloWorld,
-  Hero,
+  interstitials_exports as Interstitials,
   Label,
+  Layout,
   Metadata,
   MdxRelatedItems as RelatedItems,
   RequiredStatement,