@canopy-iiif/app 0.10.31 → 0.11.0

package/ui/dist/server.mjs

@@ -80,7 +80,120 @@ var Viewer = (props) => {
 
 // ui/src/iiif/Slider.jsx
 import React3, { useEffect as useEffect2, useState as useState2 } from "react";
-var Slider = (props) => {
+
+// ui/src/iiif/sliderOptions.js
+var UNIT_TOKEN = "__canopySliderUnit";
+var UNIT_REM = "rem";
+var DEFAULT_FONT_SIZE = 16;
+var cachedRootFontSize = null;
+var sliderOptions = {
+  breakpoints: {
+    400: {
+      slidesPerView: 2,
+      spaceBetween: rem(1)
+    },
+    640: {
+      slidesPerView: 3,
+      spaceBetween: rem(1.618)
+    },
+    1024: {
+      slidesPerView: 4,
+      spaceBetween: rem(1.618)
+    }
+  }
+};
+function rem(value) {
+  const numeric = typeof value === "number" ? value : parseFloat(value);
+  return {
+    [UNIT_TOKEN]: UNIT_REM,
+    value: Number.isFinite(numeric) ? numeric : 0
+  };
+}
+function cloneBreakpoints(source) {
+  if (!source || typeof source !== "object") return void 0;
+  const clone = {};
+  Object.entries(source).forEach(([key, entry]) => {
+    clone[key] = entry && typeof entry === "object" ? { ...entry } : {};
+  });
+  return clone;
+}
+function cloneOptions(options = {}) {
+  const clone = { ...options };
+  if (options.breakpoints && typeof options.breakpoints === "object") {
+    clone.breakpoints = cloneBreakpoints(options.breakpoints);
+  }
+  return clone;
+}
+function mergeSliderOptions(overrides) {
+  const base = cloneOptions(sliderOptions);
+  const incoming = cloneOptions(overrides || {});
+  const merged = {
+    ...base,
+    ...incoming
+  };
+  if (base.breakpoints || incoming.breakpoints) {
+    merged.breakpoints = {
+      ...base.breakpoints || {},
+      ...incoming.breakpoints || {}
+    };
+  }
+  return merged;
+}
+function hasBrowserEnv() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function measureRootFontSize() {
+  if (!hasBrowserEnv()) return DEFAULT_FONT_SIZE;
+  if (cachedRootFontSize !== null) return cachedRootFontSize;
+  let size = DEFAULT_FONT_SIZE;
+  try {
+    const root = window.document && window.document.documentElement;
+    if (root && window.getComputedStyle) {
+      const computed = window.getComputedStyle(root).fontSize;
+      const parsed = parseFloat(computed);
+      if (Number.isFinite(parsed)) size = parsed;
+    }
+  } catch (_) {
+    size = DEFAULT_FONT_SIZE;
+  }
+  cachedRootFontSize = size;
+  return size;
+}
+function convertSpacing(value) {
+  if (!hasBrowserEnv()) return value;
+  if (value && typeof value === "object" && value[UNIT_TOKEN] === UNIT_REM) {
+    const remValue = typeof value.value === "number" ? value.value : parseFloat(value.value);
+    if (!Number.isFinite(remValue)) return value;
+    return remValue * measureRootFontSize();
+  }
+  return value;
+}
+function normalizeBreakpoints(breakpoints) {
+  if (!breakpoints || typeof breakpoints !== "object") return breakpoints;
+  const normalized = {};
+  Object.entries(breakpoints).forEach(([key, entry]) => {
+    const clone = entry && typeof entry === "object" ? { ...entry } : {};
+    if (Object.prototype.hasOwnProperty.call(clone, "spaceBetween")) {
+      clone.spaceBetween = convertSpacing(clone.spaceBetween);
+    }
+    normalized[key] = clone;
+  });
+  return normalized;
+}
+function normalizeSliderOptions(options) {
+  const clone = cloneOptions(options || {});
+  if (!hasBrowserEnv()) return clone;
+  if (Object.prototype.hasOwnProperty.call(clone, "spaceBetween")) {
+    clone.spaceBetween = convertSpacing(clone.spaceBetween);
+  }
+  if (clone.breakpoints) {
+    clone.breakpoints = normalizeBreakpoints(clone.breakpoints);
+  }
+  return clone;
+}
+
+// ui/src/iiif/Slider.jsx
+var Slider = (props = {}) => {
   const [CloverSlider, setCloverSlider] = useState2(null);
   useEffect2(() => {
     let mounted = true;
@@ -88,7 +201,6 @@ var Slider = (props) => {
     if (canUseDom) {
       import("@samvera/clover-iiif/slider").then((mod) => {
         if (!mounted) return;
-        console.log(mod);
         const Comp = mod && (mod.default || mod.Slider || mod);
         setCloverSlider(() => Comp);
       }).catch(() => {
@@ -98,14 +210,23 @@ var Slider = (props) => {
       mounted = false;
     };
   }, []);
+  const { className, ...rest } = props || {};
+  const sliderClassName = ["canopy-slider", className].filter(Boolean).join(" ");
+  const mergedOptions = mergeSliderOptions(rest.options);
+  const normalizedOptions = normalizeSliderOptions(mergedOptions);
+  const resolvedProps = {
+    ...rest,
+    className: sliderClassName,
+    options: normalizedOptions
+  };
   if (!CloverSlider) {
     let json = "{}";
     try {
-      json = JSON.stringify(props || {});
+      json = JSON.stringify(resolvedProps || {});
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React3.createElement("div", { className: "canopy-slider", "data-canopy-slider": "1" }, /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React3.createElement("div", { className: sliderClassName, "data-canopy-slider": "1" }, /* @__PURE__ */ React3.createElement(
       "script",
       {
         type: "application/json",
@@ -113,7 +234,7 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React3.createElement(CloverSlider, { ...props, className: "canopy-slider" });
+  return /* @__PURE__ */ React3.createElement(CloverSlider, { ...resolvedProps });
 };
 
 // ui/src/iiif/Scroll.jsx
@@ -295,6 +416,40 @@ function ButtonWrapper({
 }
 
 // ui/src/interstitials/Hero.jsx
+var NavIconBase = ({ children, ...rest }) => /* @__PURE__ */ React9.createElement(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...rest
+  },
+  children
+);
+var PrevArrowIcon = (props) => /* @__PURE__ */ React9.createElement(NavIconBase, { ...props }, /* @__PURE__ */ React9.createElement(
+  "path",
+  {
+    d: "M10.5 3L5.5 8L10.5 13",
+    stroke: "currentColor",
+    strokeWidth: "1.618",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var NextArrowIcon = (props) => /* @__PURE__ */ React9.createElement(NavIconBase, { ...props }, /* @__PURE__ */ React9.createElement(
+  "path",
+  {
+    d: "M5.5 3L10.5 8L5.5 13",
+    stroke: "currentColor",
+    strokeWidth: "1.618",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
 var HERO_DEFAULT_SIZES_ATTR = "(min-width: 1024px) 1280px, 100vw";
 var basePath = (() => {
   try {
@@ -365,6 +520,15 @@ function normalizeBackground(value) {
     return "theme";
   }
 }
+function normalizeVariant(value) {
+  try {
+    const raw = value == null ? "" : String(value);
+    const normalized = raw.trim().toLowerCase();
+    return normalized === "text" ? "text" : "featured";
+  } catch (_) {
+    return "featured";
+  }
+}
 function Hero({
   height = 520,
   item,
@@ -377,47 +541,56 @@ function Hero({
   className = "",
   style = {},
   background = "theme",
+  variant = "featured",
   ...rest
 }) {
-  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);
-    }
-  };
-  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 normalizedVariant = normalizeVariant(variant);
+  const isTextVariant = normalizedVariant === "text";
+  let orderedSlides = [];
+  if (!isTextVariant) {
+    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);
+      }
+    };
+    if (resolved) pushUnique(resolved);
+    helpersList.forEach(pushUnique);
+    if (!slides.length) return null;
+    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) {
+  if (heroHeight && heroHeight.height && !isTextVariant) {
     heroStyles["--hero-height"] = heroHeight.height;
   }
+  if (isTextVariant) {
+    heroStyles["--hero-height"] = "auto";
+  }
   const derivedDescription = description ? String(description) : "";
   const normalizedLinks = normalizeLinks(links);
-  const primarySlide = orderedSlides[0] || null;
+  const primarySlide = !isTextVariant ? orderedSlides[0] || null : null;
   const overlayTitle = headline || primarySlide && primarySlide.title || "";
   const defaultLinkHref = applyBasePath(
     primarySlide && primarySlide.href ? primarySlide.href : "#"
@@ -428,12 +601,15 @@ function Hero({
       title: "View work",
       type: "primary"
     }
-  ];
+  ].filter(Boolean);
+  const finalOverlayLinks = isTextVariant ? normalizedLinks : overlayLinks;
   const normalizedBackground = normalizeBackground(background);
   const backgroundClassName = normalizedBackground === "transparent" ? "canopy-interstitial--bg-transparent" : "";
+  const variantClassName = isTextVariant ? "canopy-interstitial--hero-text" : "canopy-interstitial--hero-featured";
   const containerClassName = [
     "canopy-interstitial",
     "canopy-interstitial--hero",
+    variantClassName,
     backgroundClassName,
     className
   ].filter(Boolean).join(" ");
@@ -464,26 +640,36 @@ function Hero({
         loading: idx === 0 ? "eager" : "lazy"
       };
       if (slide.srcset) props.srcSet = slide.srcset;
-      if (slide.srcset)
-        props.sizes = slide.sizes || HERO_DEFAULT_SIZES_ATTR;
+      if (slide.srcset) props.sizes = slide.sizes || HERO_DEFAULT_SIZES_ATTR;
       return props;
     };
-    if (isStaticCaption) {
-      return /* @__PURE__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React9.createElement(
-        "img",
+    const wrapWithLink = (node) => {
+      if (!safeHref) return node;
+      return /* @__PURE__ */ React9.createElement(
+        "a",
         {
-          ...buildImageProps(
-            "canopy-interstitial__media canopy-interstitial__media--static"
-          )
-        }
-      )) : null, slide.title ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React9.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
+          href: safeHref,
+          className: "canopy-interstitial__slide-link",
+          "aria-label": slide.title || void 0
+        },
+        node
+      );
+    };
+    if (isStaticCaption) {
+      return /* @__PURE__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, wrapWithLink(
+        /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React9.createElement(
+          "img",
+          {
+            ...buildImageProps(
+              "canopy-interstitial__media canopy-interstitial__media--static"
+            )
+          }
+        )) : null, slide.title ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React9.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
+      ));
     }
-    return /* @__PURE__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement(
-      "img",
-      {
-        ...buildImageProps("canopy-interstitial__media")
-      }
-    ) : null, showVeil ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React9.createElement("a", { href: safeHref, className: "canopy-interstitial__caption-link" }, slide.title)) : null));
+    return /* @__PURE__ */ React9.createElement("div", { className: "swiper-slide", key: safeHref || idx }, wrapWithLink(
+      /* @__PURE__ */ React9.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React9.createElement("img", { ...buildImageProps("canopy-interstitial__media") }) : null, showVeil ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React9.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
+    ));
   };
   const renderSlider = (options = {}) => /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React9.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React9.createElement(
     "button",
@@ -491,16 +677,18 @@ function Hero({
       type: "button",
       "aria-label": "Previous slide",
       className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--prev swiper-button-prev"
-    }
+    },
+    /* @__PURE__ */ React9.createElement(PrevArrowIcon, null)
   ), /* @__PURE__ */ React9.createElement(
     "button",
     {
       type: "button",
       "aria-label": "Next slide",
       className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--next swiper-button-next"
-    }
+    },
+    /* @__PURE__ */ React9.createElement(NextArrowIcon, null)
   )), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
-  const overlayContent = /* @__PURE__ */ React9.createElement(React9.Fragment, null, overlayTitle ? /* @__PURE__ */ React9.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React9.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, overlayLinks.length ? /* @__PURE__ */ React9.createElement(ButtonWrapper, { className: "canopy-interstitial__actions" }, overlayLinks.map((link) => /* @__PURE__ */ React9.createElement(
+  const overlayContent = /* @__PURE__ */ React9.createElement(React9.Fragment, null, overlayTitle ? /* @__PURE__ */ React9.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React9.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, finalOverlayLinks.length ? /* @__PURE__ */ React9.createElement(ButtonWrapper, { className: "canopy-interstitial__actions" }, finalOverlayLinks.map((link) => /* @__PURE__ */ React9.createElement(
     Button,
     {
       key: `${link.href}-${link.title}`,
@@ -511,17 +699,18 @@ function Hero({
     }
   ))) : null);
   const cleanedProps = sanitizeRest(rest);
-  return /* @__PURE__ */ React9.createElement(
-    "section",
-    {
-      className: containerClassName,
-      "data-canopy-hero-slider": "1",
-      "data-transition": normalizedTransition,
-      style: heroStyles,
-      ...cleanedProps
-    },
-    /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" })))
-  );
+  const sectionProps = {
+    className: containerClassName,
+    style: heroStyles,
+    ...cleanedProps
+  };
+  if (!isTextVariant) {
+    sectionProps["data-canopy-hero-slider"] = "1";
+    sectionProps["data-transition"] = normalizedTransition;
+  } else {
+    sectionProps["data-canopy-hero-variant"] = "text";
+  }
+  return /* @__PURE__ */ React9.createElement("section", { ...sectionProps }, isTextVariant ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout canopy-interstitial__layout--text" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent))) : /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" }))));
 }
 
 // ui/src/layout/SubNavigation.jsx