@canopy-iiif/app 0.10.24 → 0.10.26

package/lib/page-context.js

@@ -1,14 +1,24 @@
 const React = require('react');
 
-let PageContext = null;
+const CONTEXT_KEY =
+  typeof Symbol === 'function' ? Symbol.for('__CANOPY_PAGE_CONTEXT__') : '__CANOPY_PAGE_CONTEXT__';
+
+function getGlobalRoot() {
+  if (typeof globalThis !== 'undefined') return globalThis;
+  if (typeof global !== 'undefined') return global;
+  if (typeof window !== 'undefined') return window;
+  return {};
+}
 
 function getPageContext() {
-  if (!PageContext) {
-    PageContext = React.createContext({ navigation: null, page: null });
-  }
-  return PageContext;
+  const root = getGlobalRoot();
+  if (root[CONTEXT_KEY]) return root[CONTEXT_KEY];
+  const ctx = React.createContext({ navigation: null, page: null });
+  root[CONTEXT_KEY] = ctx;
+  return ctx;
 }
 
 module.exports = {
   getPageContext,
+  CONTEXT_KEY,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.10.24",
+  "version": "0.10.26",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -958,12 +958,50 @@ function HeaderScript() {
     }
   );
 }
+var CONTEXT_KEY = typeof Symbol === "function" ? Symbol.for("__CANOPY_PAGE_CONTEXT__") : "__CANOPY_PAGE_CONTEXT__";
+function getSharedRoot() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof window !== "undefined") return window;
+  if (typeof global !== "undefined") return global;
+  return null;
+}
+function getSafePageContext() {
+  const root = getSharedRoot();
+  if (root && root[CONTEXT_KEY]) return root[CONTEXT_KEY];
+  const ctx = React14.createContext({ navigation: null, page: null });
+  if (root) root[CONTEXT_KEY] = ctx;
+  return ctx;
+}
 function ensureArray(navLinks) {
   if (!Array.isArray(navLinks)) return [];
   return navLinks.filter(
     (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__ */ React14.createElement("ul", { className: "canopy-modal__section-list", role: "list" }, root.children.map((node) => /* @__PURE__ */ React14.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__ */ React14.createElement("li", { className: "canopy-modal__section-item", "data-depth": depth }, /* @__PURE__ */ React14.createElement(
+    Tag,
+    {
+      className: classes.join(" "),
+      href: node.href || void 0,
+      "aria-current": node.isActive ? "page" : void 0
+    },
+    node.title || node.slug
+  ), hasChildren ? /* @__PURE__ */ React14.createElement("ul", { className: "canopy-modal__section-list canopy-modal__section-list--nested", role: "list" }, node.children.map((child) => /* @__PURE__ */ React14.createElement(SectionNavItem, { key: child.slug || child.href || child.title, node: child, depth: depth + 1 }))) : null);
+}
 function CanopyHeader(props = {}) {
   const {
     navigation: navLinksProp,
@@ -975,6 +1013,13 @@ function CanopyHeader(props = {}) {
     logo: SiteLogo
   } = props;
   const navLinks = ensureArray(navLinksProp);
+  const PageContext = getSafePageContext();
+  const context = React14.useContext(PageContext);
+  const sectionNavigation = context && context.navigation && context.navigation.root ? context.navigation : 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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
     "header",
     {
@@ -1085,7 +1130,16 @@ function CanopyHeader(props = {}) {
         "aria-label": "Primary navigation"
       },
       navLinks.map((link) => /* @__PURE__ */ React14.createElement("a", { key: link.href, href: link.href }, link.label || link.href))
-    )
+    ),
+    hasSectionNav ? /* @__PURE__ */ React14.createElement(
+      "nav",
+      {
+        className: "canopy-modal__section-nav",
+        "aria-label": sectionAriaLabel
+      },
+      /* @__PURE__ */ React14.createElement("div", { className: "canopy-modal__section-label" }, sectionLabel),
+      /* @__PURE__ */ React14.createElement(SectionNavList, { root: sectionNavigation.root })
+    ) : null
   ), /* @__PURE__ */ React14.createElement(
     CanopyModal,
     {
@@ -1212,7 +1266,7 @@ var Slider = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React17.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: "canopy-slider", "data-canopy-slider": "1" }, /* @__PURE__ */ React17.createElement(
       "script",
       {
         type: "application/json",
@@ -1220,7 +1274,7 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...props });
+  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...props, className: "canopy-slider" });
 };
 
 // ui/src/iiif/Scroll.jsx
@@ -1325,7 +1379,13 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React20.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React20.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React20.createElement("div", { "data-canopy-related-items": "1" }, /* @__PURE__ */ React20.createElement(
+    "script",
+    {
+      type: "application/json",
+      dangerouslySetInnerHTML: { __html: json }
+    }
+  ));
 }
 
 // ui/src/search/MdxSearchResults.jsx
@@ -1488,7 +1548,7 @@ function SearchResults({
 }
 
 // ui/src/search/SearchTabs.jsx
-import React25 from "react";
+import React25, { useRef as useRef2, useState as useState6, useEffect as useEffect6 } from "react";
 function SearchTabs({
   type = "all",
   onTypeChange,
@@ -1503,13 +1563,62 @@ function SearchTabs({
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
   const hasFilters = typeof onOpenFilters === "function";
   const filterBadge = activeFilterCount > 0 ? ` (${activeFilterCount})` : "";
+  const [itemBoundingBox, setItemBoundingBox] = useState6(null);
+  const [wrapperBoundingBox, setWrapperBoundingBox] = useState6(null);
+  const [highlightedTab, setHighlightedTab] = useState6(null);
+  const [isHoveredFromNull, setIsHoveredFromNull] = useState6(true);
+  const wrapperRef = useRef2(null);
+  const highlightRef = useRef2(null);
+  const repositionHighlight = (e, tabKey) => {
+    if (!tabKey || !wrapperRef.current) return;
+    const item = e.currentTarget;
+    setItemBoundingBox(item.getBoundingClientRect());
+    setWrapperBoundingBox(wrapperRef.current.getBoundingClientRect());
+    setIsHoveredFromNull(!highlightedTab);
+    setHighlightedTab(tabKey);
+  };
+  const resetHighlight = () => {
+    setHighlightedTab(null);
+  };
+  useEffect6(() => {
+    if (!wrapperRef.current) return;
+    const activeButton = wrapperRef.current.querySelector(
+      `button[data-tab-value="${type}"]`
+    );
+    if (!activeButton) return;
+    const itemBox = activeButton.getBoundingClientRect();
+    const wrapperBox = wrapperRef.current.getBoundingClientRect();
+    setItemBoundingBox(itemBox);
+    setWrapperBoundingBox(wrapperBox);
+    setIsHoveredFromNull(true);
+    setHighlightedTab(type);
+  }, [type]);
+  let highlightStyles = {};
+  if (itemBoundingBox && wrapperBoundingBox) {
+    highlightStyles = {
+      opacity: highlightedTab ? 1 : 0,
+      transform: `translateX(${itemBoundingBox.left - wrapperBoundingBox.left}px)`,
+      transitionDuration: isHoveredFromNull ? "0ms" : "200ms",
+      width: `${itemBoundingBox.width}px`
+    };
+  }
   return /* @__PURE__ */ React25.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React25.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": "Search types",
-      className: "canopy-search-tabs"
+      className: "canopy-search-tabs",
+      ref: wrapperRef,
+      onMouseLeave: resetHighlight
     },
+    /* @__PURE__ */ React25.createElement(
+      "div",
+      {
+        ref: highlightRef,
+        className: "canopy-search-tabs__highlight",
+        style: highlightStyles
+      }
+    ),
     orderedTypes.map((t) => {
       const active = String(type).toLowerCase() === String(t).toLowerCase();
       const cRaw = counts && Object.prototype.hasOwnProperty.call(counts, t) ? counts[t] : void 0;
@@ -1521,7 +1630,10 @@ function SearchTabs({
           role: "tab",
           "aria-selected": active,
           type: "button",
-          onClick: () => onTypeChange && onTypeChange(t)
+          "data-tab-value": t,
+          onClick: () => onTypeChange && onTypeChange(t),
+          onMouseOver: (e) => repositionHighlight(e, t),
+          className: `canopy-search-tab ${active ? "is-active" : ""}`
         },
         toLabel(t),
         " (",
@@ -1749,11 +1861,18 @@ function MarkdownTable({ className = "", ...rest }) {
   const merged = ["markdown-table", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ React28.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React28.createElement("table", { className: merged, ...rest }));
 }
+
+// ui/src/docs/Diagram.jsx
+import React29 from "react";
+function CanopyDiagram() {
+  return /* @__PURE__ */ React29.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React29.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React29.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 170 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React29.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Collection A"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React29.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React29.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Collection B"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React29.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React29.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React29.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React29.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React29.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, authored pages, and annotations before bundling data for the static site."), /* @__PURE__ */ React29.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Automated content"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React29.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React29.createElement("li", null, "Customize layout per work"))), /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React29.createElement("li", null, "Author narratives & tours"), /* @__PURE__ */ React29.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Search index"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React29.createElement("li", null, "FlexSearch powered"), /* @__PURE__ */ React29.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React29.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React29.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React29.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React29.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React29.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__ */ React29.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Work pages"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React29.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React29.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React29.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React29.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React29.createElement("article", null, /* @__PURE__ */ React29.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React29.createElement("ul", null, /* @__PURE__ */ React29.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React29.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React29.createElement("li", null, "Optional annotation dataset"))))));
+}
 export {
   ArticleCard,
   Button,
   ButtonWrapper,
   CanopyBrand,
+  CanopyDiagram,
   CanopyFooter,
   CanopyHeader,
   CanopyModal,