@canopy-iiif/app 0.10.5 → 0.10.7

package/ui/dist/server.mjs

@@ -179,13 +179,38 @@ var Image = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-image": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
-      "script",
+    const {
+      height = `600px`,
+      backgroundColor = `var(--color-gray-200)`,
+      caption
+    } = props || {};
+    return /* @__PURE__ */ React5.createElement(
+      "figure",
       {
-        type: "application/json",
-        dangerouslySetInnerHTML: { __html: json }
-      }
-    ));
+        style: {
+          margin: `1.618rem 0 2.618rem`
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          "data-canopy-image": "1",
+          style: {
+            height,
+            backgroundColor,
+            borderRadius: `0.25rem`
+          }
+        },
+        /* @__PURE__ */ React5.createElement(
+          "script",
+          {
+            type: "application/json",
+            dangerouslySetInnerHTML: { __html: json }
+          }
+        )
+      ),
+      caption && /* @__PURE__ */ React5.createElement("figcaption", null, caption)
+    );
   }
   return /* @__PURE__ */ React5.createElement(CloverImage, { ...props });
 };
@@ -587,9 +612,13 @@ import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
 // ui/src/layout/ContentNavigation.jsx
 import React11 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 ContentNavigation({
   items = [],
   className = "",
@@ -602,7 +631,11 @@ function ContentNavigation({
   const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
   const savedDepthsRef = React11.useRef(null);
   if ((!items || !items.length) && !headingId) return null;
-  const combinedClassName = ["canopy-sub-navigation canopy-content-navigation", className].filter(Boolean).join(" ");
+  const combinedClassName = [
+    "canopy-sub-navigation canopy-content-navigation",
+    "canopy-content-navigation--collapsed",
+    className
+  ].filter(Boolean).join(" ");
   const effectiveHeading = heading || pageTitle || null;
   const navLabel = ariaLabel || (effectiveHeading ? `${effectiveHeading} navigation` : "Section navigation");
   const getSavedDepth = React11.useCallback(
@@ -631,7 +664,11 @@ function ContentNavigation({
         const id = String(node.id);
         if (seen.has(id)) return;
         seen.add(id);
-        const depth = node.depth || node.level || getSavedDepth(id, 2);
+        const depth = resolveDepth(
+          typeof node.depth === "number" ? node.depth : node.level,
+          getSavedDepth(id, 2)
+        );
+        if (depth > MAX_HEADING_DEPTH) return;
         entries.push({ id, depth });
         if (node.children && node.children.length) pushNodes(node.children);
       });
@@ -747,9 +784,14 @@ function ContentNavigation({
       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 depth = resolveDepth(
+          typeof node.depth === "number" ? node.depth : node.level,
+          getSavedDepth(id, 2)
+        );
+        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(
           "a",
           {
@@ -759,19 +801,19 @@ function ContentNavigation({
             "aria-current": isActive ? "location" : void 0
           },
           node.title
-        ), node.children && node.children.length ? /* @__PURE__ */ React11.createElement(
+        ), childNodes ? /* @__PURE__ */ React11.createElement(
           "ul",
           {
             className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
             role: "list"
           },
-          renderNodes2(node.children)
+          childNodes
         ) : null);
       });
     },
     [handleAnchorClick, activeId, getSavedDepth]
   );
-  const nestedItems = renderNodes2(items);
+  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(
     "a",
     {
@@ -789,7 +831,32 @@ function ContentNavigation({
     },
     nestedItems
   ) : null) : null;
-  return /* @__PURE__ */ React11.createElement("nav", { className: combinedClassName, style, "aria-label": navLabel }, /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems));
+  return /* @__PURE__ */ React11.createElement(
+    "nav",
+    {
+      className: combinedClassName,
+      style,
+      "aria-label": navLabel,
+      "data-canopy-content-nav": "true"
+    },
+    /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-content-navigation__toggle",
+        "aria-expanded": "false",
+        "aria-label": "Show section navigation",
+        title: "Show section navigation",
+        "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"
+      },
+      "Show"
+    ),
+    /* @__PURE__ */ React11.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, topLink || nestedItems)
+  );
 }
 
 // ui/src/layout/Layout.jsx
@@ -828,6 +895,106 @@ function buildNavigationAside(sidebar, className) {
   }
   return sidebar;
 }
+function ContentNavigationScript() {
+  const code = `
+(function () {
+  if (typeof window === 'undefined') return;
+  if (window.__CANOPY_CONTENT_NAV_READY__) return;
+  window.__CANOPY_CONTENT_NAV_READY__ = true;
+  var STORAGE_KEY = 'canopy_content_nav_collapsed';
+  var storage = null;
+  try {
+    storage = window.localStorage;
+  } catch (error) {
+    storage = null;
+  }
+
+  function setStored(value) {
+    if (!storage) return;
+    try {
+      if (value == null) {
+        storage.removeItem(STORAGE_KEY);
+      } else {
+        storage.setItem(STORAGE_KEY, value);
+      }
+    } catch (error) {}
+  }
+
+  function getStored() {
+    if (!storage) return null;
+    try {
+      return storage.getItem(STORAGE_KEY);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function ready(fn) {
+    if (!fn) return;
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', fn, { once: true });
+    } else {
+      fn();
+    }
+  }
+
+  function applyState(root, collapsed) {
+    if (!root) return;
+    var isCollapsed = !!collapsed;
+    root.classList.toggle('is-collapsed', isCollapsed);
+    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);
+    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;
+      toggle.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
+      toggle.setAttribute('aria-label', isCollapsed ? showFull : hideFull);
+      toggle.setAttribute('title', isCollapsed ? showFull : hideFull);
+    }
+  }
+
+  ready(function () {
+    var roots = Array.prototype.slice.call(
+      document.querySelectorAll('[data-canopy-content-nav-root]')
+    );
+    if (!roots.length) return;
+    var stored = getStored();
+    var collapsed = true;
+    if (stored === '0' || stored === 'false') {
+      collapsed = false;
+    } else if (stored === '1' || stored === 'true') {
+      collapsed = true;
+    }
+
+    function sync(next) {
+      collapsed = !!next;
+      roots.forEach(function (root) {
+        applyState(root, collapsed);
+      });
+      setStored(collapsed ? '1' : '0');
+    }
+
+    sync(collapsed);
+
+    roots.forEach(function (root) {
+      var toggle = root.querySelector('[data-canopy-content-nav-toggle]');
+      if (!toggle) return;
+      toggle.addEventListener('click', function (event) {
+        event.preventDefault();
+        sync(!collapsed);
+      });
+    });
+  });
+})();
+  `;
+  return /* @__PURE__ */ React12.createElement("script", { dangerouslySetInnerHTML: { __html: code } });
+}
 function Layout({
   children,
   sidebar,
@@ -866,44 +1033,41 @@ function Layout({
   );
   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";
-    }
+  const containerClassName = (() => {
+    const classes = ["canopy-layout"];
+    classes.push(fluid ? "canopy-layout--fluid" : "canopy-layout--fixed");
+    if (showLeftColumn) classes.push("canopy-layout--with-sidebar");
     if (hasContentNavigation) {
-      return "md:grid md:grid-cols-[minmax(0,1fr)_14rem] md:items-start md:gap-10";
+      classes.push("canopy-layout--with-content-nav");
+      classes.push("canopy-layout--content-nav-collapsed");
     }
-    return "";
+    if (className) classes.push(className);
+    return classes.join(" ");
   })();
-  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-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 leftAsideClassName = ["canopy-layout__sidebar", sidebarClassName].filter(Boolean).join(" ");
+  const contentClassNames = ["canopy-layout__content", 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-slate-600",
+    "canopy-layout__content-nav",
+    "is-collapsed",
     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("aside", { className: contentNavigationAsideClassName }, /* @__PURE__ */ React12.createElement(
-    ContentNavigation,
+  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(
+    "aside",
     {
-      items: headingTree,
-      heading: contentHeading || void 0,
-      headingId: headingAnchorId || void 0,
-      pageTitle: context && context.page ? context.page.title : void 0
-    }
-  )) : null);
+      className: contentNavigationAsideClassName,
+      "data-canopy-content-nav-root": "true"
+    },
+    /* @__PURE__ */ React12.createElement(
+      ContentNavigation,
+      {
+        items: headingTree,
+        heading: contentHeading || void 0,
+        headingId: headingAnchorId || void 0,
+        pageTitle: context && context.page ? context.page.title : void 0
+      }
+    )
+  ), /* @__PURE__ */ React12.createElement(ContentNavigationScript, null)) : null);
 }
 
 // ui/src/layout/CanopyHeader.jsx