@canopy-iiif/app 1.10.0 → 1.10.3

package/ui/dist/server.mjs

@@ -656,6 +656,7 @@ async function mountImageStory(element, props = {}) {
 // ui/src/iiif/ImageStory.jsx
 var DEFAULT_IMAGE_STORY_HEIGHT = 600;
 var NUMERIC_HEIGHT_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)$/;
+var SIZE_EPSILON = 1;
 function resolveContainerHeight(value) {
   if (typeof value === "number" && Number.isFinite(value)) {
     return `${value}px`;
@@ -706,6 +707,7 @@ var ImageStory = (props = {}) => {
     let mounted = false;
     let resizeObserver = null;
     let pollId = null;
+    let lastKnownSize = null;
     const payload = sanitizeImageStoryProps({
       iiifContent,
       disablePanAndZoom,
@@ -734,12 +736,39 @@ var ImageStory = (props = {}) => {
         pollId = null;
       }
     };
-    const hasUsableSize = () => {
-      if (!node) return false;
+    const measureSize = () => {
+      if (!node) return null;
       const rect = node.getBoundingClientRect();
-      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth;
-      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight;
-      return width > 2 && height2 > 2;
+      const width = (rect == null ? void 0 : rect.width) || node.offsetWidth || node.clientWidth || 0;
+      const height2 = (rect == null ? void 0 : rect.height) || node.offsetHeight || node.clientHeight || 0;
+      return { width, height: height2 };
+    };
+    const hasUsableSize = () => {
+      const size = measureSize();
+      if (!size) return false;
+      const usable = size.width > 2 && size.height > 2;
+      if (usable) {
+        lastKnownSize = size;
+      }
+      return usable;
+    };
+    const hasMeaningfulSizeChange = () => {
+      const size = measureSize();
+      if (!size) return false;
+      if (size.width <= 2 || size.height <= 2) {
+        return true;
+      }
+      if (!lastKnownSize) {
+        lastKnownSize = size;
+        return true;
+      }
+      const widthDelta = Math.abs(size.width - lastKnownSize.width);
+      const heightDelta = Math.abs(size.height - lastKnownSize.height);
+      if (widthDelta > SIZE_EPSILON || heightDelta > SIZE_EPSILON) {
+        lastKnownSize = size;
+        return true;
+      }
+      return false;
     };
     const mountViewer = () => {
       if (!node || mounted || cancelled) return false;
@@ -755,8 +784,9 @@ var ImageStory = (props = {}) => {
       });
       return true;
     };
-    if (!mountViewer()) {
-      if (typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
+    const scheduleWatchers = () => {
+      if (mounted || cancelled) return;
+      if (!resizeObserver && typeof window !== "undefined" && typeof window.ResizeObserver === "function") {
         resizeObserver = new window.ResizeObserver(() => {
           if (mounted || cancelled) return;
           mountViewer();
@@ -775,12 +805,48 @@ var ImageStory = (props = {}) => {
           }
         }, 200);
       };
-      schedulePoll();
+      if (!pollId) {
+        schedulePoll();
+      }
+    };
+    const beginMounting = () => {
+      if (!mountViewer()) {
+        scheduleWatchers();
+      }
+    };
+    const remountViewer = () => {
+      if (cancelled) return;
+      if (mounted) {
+        mounted = false;
+        destroyCleanup();
+      }
+      beginMounting();
+    };
+    beginMounting();
+    const handleGalleryModalChange = (event) => {
+      if (!node || !event || typeof document === "undefined") return;
+      const detail = event.detail || {};
+      if (detail.state !== "open") return;
+      const modal = detail.modal || (detail.modalId ? document.getElementById(detail.modalId) : null);
+      if (!modal || !modal.contains(node)) return;
+      if (!mounted) return;
+      if (hasMeaningfulSizeChange()) {
+        remountViewer();
+      }
+    };
+    if (typeof window !== "undefined" && window.addEventListener) {
+      window.addEventListener("canopy:gallery:modal-change", handleGalleryModalChange);
     }
     return () => {
       cancelled = true;
       disconnectWatchers();
       destroyCleanup();
+      if (typeof window !== "undefined" && window.removeEventListener) {
+        window.removeEventListener(
+          "canopy:gallery:modal-change",
+          handleGalleryModalChange
+        );
+      }
     };
   }, [iiifContent, disablePanAndZoom, pointOfInterestSvgUrl, viewerOptions]);
   return /* @__PURE__ */ React6.createElement(
@@ -4630,6 +4696,15 @@ function ReferencedManifestCard({
 var DAY_MS = 24 * 60 * 60 * 1e3;
 var DEFAULT_TRACK_HEIGHT = 640;
 var MIN_HEIGHT_PER_POINT = 220;
+var SCALE_MODES = {
+  TIME: "time",
+  UNIFORM: "uniform"
+};
+var ALIGN_OPTIONS = {
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right"
+};
 function getThresholdMs(threshold, granularity) {
   const value = Number(threshold);
   if (!Number.isFinite(value) || value <= 0) return 0;
@@ -4819,6 +4894,8 @@ function Timeline({
   locale: localeProp = "en-US",
   height = DEFAULT_TRACK_HEIGHT,
   threshold: thresholdProp = null,
+  scale = SCALE_MODES.TIME,
+  align = ALIGN_OPTIONS.CENTER,
   steps = null,
   points: pointsProp,
   __canopyTimeline: payload = null,
@@ -4853,20 +4930,24 @@ function Timeline({
   );
   const spanStart = effectiveRange.startDate.getTime();
   const span = effectiveRange.span;
+  const scaleValue = scale === SCALE_MODES.UNIFORM ? SCALE_MODES.UNIFORM : SCALE_MODES.TIME;
+  const useUniformSpacing = scaleValue === SCALE_MODES.UNIFORM;
+  const alignValue = align === ALIGN_OPTIONS.LEFT ? ALIGN_OPTIONS.LEFT : align === ALIGN_OPTIONS.RIGHT ? ALIGN_OPTIONS.RIGHT : ALIGN_OPTIONS.CENTER;
+  const enforcedSide = alignValue === ALIGN_OPTIONS.LEFT ? "right" : alignValue === ALIGN_OPTIONS.RIGHT ? "left" : null;
   const pointsWithPosition = React37.useMemo(() => {
     if (!sanitizedPoints.length) return [];
     return sanitizedPoints.map((point, index) => {
       const timestamp = point.meta.timestamp;
       const fallbackProgress = sanitizedPoints.length > 1 ? index / (sanitizedPoints.length - 1) : 0;
-      const progress = Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
-      const side = point.side || (index % 2 === 0 ? "left" : "right");
+      const progress = useUniformSpacing ? fallbackProgress : Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
+      const side = enforcedSide || point.side || (index % 2 === 0 ? "left" : "right");
       return {
         ...point,
         progress,
         side
       };
     });
-  }, [sanitizedPoints, spanStart, span]);
+  }, [sanitizedPoints, spanStart, span, useUniformSpacing, enforcedSide]);
   const [activeId, setActiveId] = React37.useState(
     () => getActivePointId(pointsWithPosition)
   );
@@ -4913,7 +4994,11 @@ function Timeline({
     });
   }, []);
   const trackHeight = resolveTrackHeight(height, pointsWithPosition.length);
-  const containerClasses = ["canopy-timeline", className].filter(Boolean).join(" ");
+  const containerClasses = [
+    "canopy-timeline",
+    alignValue ? `canopy-timeline--align-${alignValue}` : "",
+    className
+  ].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
   function renderPointEntry(point) {
     if (!point) return null;
@@ -5677,6 +5762,23 @@ var INLINE_SCRIPT2 = `(() => {
   const NAV_OPTION_SELECTOR = '[data-canopy-gallery-nav-option]';
   const NAV_ITEM_SELECTOR = '[data-canopy-gallery-nav-item]';
 
+  function emitModalState(modal, state) {
+    if (!modal || typeof window === 'undefined') return;
+    const detail = { modalId: modal.id || '', modal, state };
+    try {
+      const EventCtor = window.CustomEvent || CustomEvent;
+      if (typeof EventCtor === 'function') {
+        window.dispatchEvent(new EventCtor('canopy:gallery:modal-change', { detail }));
+        return;
+      }
+    } catch (_) {}
+    try {
+      const fallback = document.createEvent('CustomEvent');
+      fallback.initCustomEvent('canopy:gallery:modal-change', true, true, detail);
+      window.dispatchEvent(fallback);
+    } catch (_) {}
+  }
+
   function isVisible(node) {
     return !!(node && (node.offsetWidth || node.offsetHeight || node.getClientRects().length));
   }
@@ -5807,6 +5909,7 @@ var INLINE_SCRIPT2 = `(() => {
         lockScroll();
         document.addEventListener('keydown', handleKeydown, true);
       } else if (activeModal !== modal) {
+        emitModalState(activeModal, 'close');
         activeModal.removeAttribute('data-canopy-gallery-active');
       }
       activeModal = modal;
@@ -5815,6 +5918,7 @@ var INLINE_SCRIPT2 = `(() => {
       if (!focusActiveNav(modal)) {
         focusInitial(modal);
       }
+      emitModalState(modal, 'open');
       return;
     }
     if (!activeModal) return;
@@ -5848,6 +5952,7 @@ var INLINE_SCRIPT2 = `(() => {
         }
       });
     }
+    emitModalState(previous, 'close');
   }
 
   function modalFromHash() {
@@ -6306,6 +6411,7 @@ function buildCaptionContent(itemProps) {
   ));
 }
 function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
+  const { getString, formatString } = useLocale();
   const {
     props,
     modalId,
@@ -6318,6 +6424,12 @@ function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
   const kicker = props.kicker || props.label || props.eyebrow;
   const summary = props.popupDescription || props.modalDescription || props.description || props.summary || null;
   const modalTitle = props.popupTitle || props.modalTitle || props.title || `Item ${index + 1}`;
+  const closeButtonText = getString("common.actions.close", "Close");
+  const closeButtonLabel = formatString(
+    "common.phrases.close_content",
+    "Close {content}",
+    { content: modalTitle }
+  );
   return /* @__PURE__ */ React41.createElement(
     "div",
     {
@@ -6339,13 +6451,14 @@ function GalleryModal({ item, closeTargetId, navItems, navGroupName }) {
         groupName: `${navGroupName || "canopy-gallery"}-${modalId}`
       }
     ), /* @__PURE__ */ React41.createElement(
-      "a",
+      Button,
       {
         className: "canopy-gallery__modal-close",
         href: `#${closeTargetId}`,
-        "aria-label": `Close popup for ${modalTitle}`
-      },
-      "X"
+        label: closeButtonText,
+        "aria-label": closeButtonLabel,
+        variant: "secondary"
+      }
     )), /* @__PURE__ */ React41.createElement("div", { className: "canopy-gallery__modal-panel" }, /* @__PURE__ */ React41.createElement(
       "button",
       {