@canopy-iiif/app 0.10.17 → 0.10.19

package/ui/dist/server.mjs

@@ -1766,8 +1766,204 @@ function Container({
   );
 }
 
+// ui/src/content/ReferencedItems.jsx
+import React23 from "react";
+import navigationHelpers3 from "@canopy-iiif/app/lib/components/navigation.js";
+
+// ui/src/layout/Card.jsx
+import React22, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
+function Card({
+  href,
+  src,
+  alt,
+  title,
+  subtitle,
+  // Optional intrinsic dimensions or aspect ratio to compute a responsive height
+  imgWidth,
+  imgHeight,
+  aspectRatio,
+  className,
+  style,
+  children,
+  lazy = true,
+  ...rest
+}) {
+  const containerRef = useRef(null);
+  const [inView, setInView] = useState5(!lazy);
+  const [imageLoaded, setImageLoaded] = useState5(!lazy);
+  useEffect5(() => {
+    if (!lazy) return;
+    if (!containerRef.current) return;
+    if (typeof IntersectionObserver !== "function") {
+      setInView(true);
+      return;
+    }
+    const el = containerRef.current;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setInView(true);
+            try {
+              obs.unobserve(el);
+            } catch (_) {
+            }
+            break;
+          }
+        }
+      },
+      { root: null, rootMargin: "100px", threshold: 0.1 }
+    );
+    try {
+      obs.observe(el);
+    } catch (_) {
+    }
+    return () => {
+      try {
+        obs.disconnect();
+      } catch (_) {
+      }
+    };
+  }, [lazy]);
+  const w = Number(imgWidth);
+  const h = Number(imgHeight);
+  const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;
+  const paddingPercent = ratio ? 100 / ratio : 100;
+  const caption = /* @__PURE__ */ React22.createElement("figcaption", null, title && /* @__PURE__ */ React22.createElement("span", null, title), subtitle && /* @__PURE__ */ React22.createElement("span", null, subtitle), children);
+  return /* @__PURE__ */ React22.createElement(
+    "a",
+    {
+      href,
+      className: ["canopy-card", className].filter(Boolean).join(" "),
+      style,
+      ref: containerRef,
+      "data-aspect-ratio": ratio,
+      "data-in-view": inView ? "true" : "false",
+      "data-image-loaded": imageLoaded ? "true" : "false",
+      ...rest
+    },
+    /* @__PURE__ */ React22.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React22.createElement(
+      "div",
+      {
+        className: "canopy-card-media",
+        style: { "--canopy-card-padding": `${paddingPercent}%` }
+      },
+      inView ? /* @__PURE__ */ React22.createElement(
+        "img",
+        {
+          src,
+          alt: alt || title || "",
+          loading: "lazy",
+          onLoad: () => setImageLoaded(true),
+          onError: () => setImageLoaded(true)
+        }
+      ) : null
+    ) : /* @__PURE__ */ React22.createElement(
+      "img",
+      {
+        src,
+        alt: alt || title || "",
+        loading: "lazy",
+        onLoad: () => setImageLoaded(true),
+        onError: () => setImageLoaded(true),
+        className: "canopy-card-image"
+      }
+    ) : null, caption)
+  );
+}
+
+// ui/src/content/ReferencedItems.jsx
+function useReferencedItems(itemsProp) {
+  if (Array.isArray(itemsProp)) return itemsProp;
+  const PageContext = navigationHelpers3 && typeof navigationHelpers3.getPageContext === "function" ? navigationHelpers3.getPageContext() : null;
+  if (!PageContext) return [];
+  const context = React23.useContext(PageContext);
+  const items = context && context.page ? context.page.referencedItems : null;
+  return Array.isArray(items) ? items : [];
+}
+function ReferencedItems({
+  items: itemsProp,
+  emptyLabel = null,
+  className = "",
+  children,
+  ...rest
+}) {
+  const items = useReferencedItems(itemsProp);
+  const hasItems = items.length > 0;
+  if (!hasItems) {
+    if (!emptyLabel) return null;
+    const emptyClass = [
+      "referenced-items",
+      "referenced-items--empty",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ React23.createElement("div", { className: emptyClass, ...rest }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel);
+  }
+  const containerClassName = ["referenced-items", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React23.createElement("section", { className: containerClassName, ...rest }, children, /* @__PURE__ */ React23.createElement("div", { className: "referenced-items__grid", role: "list" }, items.map((item) => {
+    if (!item) return null;
+    const key = item.href || item.slug || item.id;
+    return /* @__PURE__ */ React23.createElement("div", { className: "referenced-items__item", role: "listitem", key }, /* @__PURE__ */ React23.createElement(
+      Card,
+      {
+        href: item.href,
+        src: item.thumbnail,
+        imgWidth: item.thumbnailWidth,
+        imgHeight: item.thumbnailHeight,
+        title: item.title,
+        subtitle: item.summary,
+        className: "referenced-items__card",
+        lazy: false
+      }
+    ));
+  })));
+}
+
+// ui/src/content/References.jsx
+import React24 from "react";
+import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
+function getPageContext() {
+  if (!navigationHelpers4 || typeof navigationHelpers4.getPageContext !== "function") {
+    return null;
+  }
+  try {
+    return navigationHelpers4.getPageContext();
+  } catch (_) {
+    return null;
+  }
+}
+function resolveReferences(manifestId, contextList) {
+  if (contextList && contextList.length) return contextList;
+  if (!manifestId) return [];
+  try {
+    return referenced.getReferencesForManifest(manifestId);
+  } catch (_) {
+    return [];
+  }
+}
+function References({
+  id = "",
+  title = "Referenced by",
+  emptyLabel = null,
+  className = "",
+  children,
+  ...rest
+}) {
+  const PageContext = getPageContext();
+  const context = PageContext ? React24.useContext(PageContext) : null;
+  const contextPage = context && context.page ? context.page : null;
+  const manifestId = id || contextPage && contextPage.manifestId || "";
+  const contextReferences = !id && contextPage && Array.isArray(contextPage.referencedBy) ? contextPage.referencedBy : null;
+  const references = resolveReferences(manifestId, contextReferences);
+  if (!manifestId) return null;
+  const containerClass = ["references", className].filter(Boolean).join(" ");
+  const list = references.length ? references : null;
+  const entries = list && list.length ? list : null;
+  return /* @__PURE__ */ React24.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React24.createElement("div", { className: "references__group" }, /* @__PURE__ */ React24.createElement("dt", null, title), entries ? entries.map((entry) => /* @__PURE__ */ React24.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React24.createElement("a", { href: entry.href }, entry.title || entry.href))) : emptyLabel ? /* @__PURE__ */ React24.createElement("dd", { className: "references__empty" }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel) : null));
+}
+
 // ui/src/search/MdxSearchResults.jsx
-import React22 from "react";
+import React25 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -1775,11 +1971,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React22.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React22.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React25.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React25.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React23 from "react";
+import React26 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -1787,11 +1983,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React23.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React23.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React26.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React26.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React24 from "react";
+import React27 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -1799,11 +1995,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React24.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React24.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React27.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React27.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React25 from "react";
+import React28 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -1819,11 +2015,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__ */ React25.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React25.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React25.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React25.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React25.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React28.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React28.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React28.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React28.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React28.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React26 from "react";
+import React29 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -1848,28 +2044,28 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React26.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React29.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React26.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React29.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React26.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React29.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__ */ React26.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React29.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React27 from "react";
+import React30 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -1915,10 +2111,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React27.Children.toArray(children);
-  const codeElement = childArray.find((el) => React27.isValidElement(el));
+  const childArray = React30.Children.toArray(children);
+  const codeElement = childArray.find((el) => React30.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React27.createElement("pre", props);
+    return React30.createElement("pre", props);
   }
   const {
     className = "",
@@ -1933,8 +2129,8 @@ function DocsCodeBlock(props = {}) {
   const highlightSet = parseHighlightAttr(highlightAttr);
   const copyAttr = codeProps["data-copy"];
   const enableCopy = copyAttr !== void 0 ? copyAttr === true || copyAttr === "true" || copyAttr === "" : false;
-  const [copied, setCopied] = React27.useState(false);
-  const handleCopy = React27.useCallback(async () => {
+  const [copied, setCopied] = React30.useState(false);
+  const handleCopy = React30.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -1998,20 +2194,20 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React27.createElement(
+    return React30.createElement(
       "span",
       { key: lineNumber, style },
-      React27.createElement("span", { style: lineContentStyle }, displayLine)
+      React30.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React27.createElement(
+  return React30.createElement(
     "div",
     { style: containerStyle },
-    React27.createElement(
+    React30.createElement(
       "div",
       { style: headerStyle },
-      React27.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React27.createElement(
+      React30.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React30.createElement(
         "button",
         {
           type: "button",
@@ -2030,19 +2226,19 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ),
-    React27.createElement(
+    React30.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React27.createElement("code", { style: codeStyle }, lineElements)
+      React30.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
 
 // ui/src/docs/MarkdownTable.jsx
-import React28 from "react";
+import React31 from "react";
 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 }));
+  return /* @__PURE__ */ React31.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React31.createElement("table", { className: merged, ...rest }));
 }
 export {
   Button,
@@ -2060,6 +2256,8 @@ export {
   Label,
   Layout,
   Metadata,
+  ReferencedItems,
+  References,
   MdxRelatedItems as RelatedItems,
   RequiredStatement,
   Scroll,