@canopy-iiif/app 0.10.30 → 0.10.32

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 {
@@ -464,26 +619,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,14 +656,16 @@ 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(
     Button,