@canopy-iiif/app 1.11.0 → 1.11.2

package/lib/AGENTS.md

@@ -60,6 +60,7 @@ Logbook Template
 
 Logbook
 -------
+- 2026-04-26 / mat: Added local file path support to the manifest fetch worker in `build/iiif.js`. Previously, the worker branched on `https?://` and `file://` and SKIPped everything else; relative paths (e.g., `assets/iiif/example.json`) were silently dropped. Added a third branch that catches any value with no URI scheme (regex: no `[scheme]:` prefix) and routes it through `readJsonFromUri()`, which already resolves relative paths against `process.cwd()`. Collection-root URIs were already handled correctly via `readJsonFromUri()`; only the manifest worker needed the fix.
 - 2025-09-26 / chatgpt: Hardened runtime bundlers to throw when esbuild or source compilation fails and required `content/works/_layout.mdx`; build now aborts instead of silently writing placeholder assets.
 - 2025-09-26 / chatgpt: Replaced the legacy command runtime stub with an esbuild-bundled runtime (`search/search-form-runtime.js`); `prepareSearchFormRuntime()` now builds `site/scripts/canopy-search-form.js` and fails if esbuild is missing.
 - 2025-09-27 / chatgpt: Documented Tailwind token flow in `app/styles/tailwind.config.mts`, compiled UI Sass variables during config load, and exposed `stylesheetHref`/`Stylesheet` helpers via `@canopy-iiif/app/head` so `_app.mdx` can reference the generated CSS directly.

package/lib/components/hero-slider-runtime.js

@@ -1,9 +1,4 @@
-import Swiper from 'swiper';
-import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
-import 'swiper/css/effect-fade';
+import EmblaCarousel from 'embla-carousel';
 
 function ready(fn) {
   if (typeof document === 'undefined') return;
@@ -16,61 +11,85 @@ function ready(fn) {
 
 function initSlider(host) {
   if (!host || host.__canopyHeroBound) return;
-  const slider = host.querySelector('.canopy-interstitial__slider');
-  if (!slider) return;
-  const prev = host.querySelector('.canopy-interstitial__nav-btn--prev');
-  const next = host.querySelector('.canopy-interstitial__nav-btn--next');
-  const pagination = host.querySelector('.canopy-interstitial__pagination');
-  const transitionAttr = (host.getAttribute && host.getAttribute('data-transition')) || 'fade';
-  const transition = transitionAttr && transitionAttr.toLowerCase() === 'slide' ? 'slide' : 'fade';
+  const viewport = host.querySelector('.canopy-interstitial__slider');
+  if (!viewport) return;
 
-  try {
-    const baseModules = [Navigation, Pagination, Autoplay];
-    if (transition === 'fade') baseModules.push(EffectFade);
-    const swiperInstance = new Swiper(slider, {
-      modules: baseModules,
-      loop: true,
-      slidesPerView: 1,
-      effect: transition,
-      fadeEffect: transition === 'fade' ? { crossFade: true } : undefined,
-      navigation: {
-        prevEl: prev || undefined,
-        nextEl: next || undefined,
-      },
-      pagination: {
-        el: pagination || undefined,
-        clickable: true,
-      },
-      autoplay: {
-        delay: 6000,
-        disableOnInteraction: false,
-      },
-    });
+  const slides = Array.from(viewport.querySelectorAll('.canopy-interstitial__slide'));
+  if (slides.length <= 1) {
     host.__canopyHeroBound = true;
-    host.__canopyHeroSwiper = swiperInstance;
-  } catch (error) {
-    try {
-      console.warn('[canopy][hero] failed to initialise slider', error);
-    } catch (_) {}
+    return;
   }
+
+  const paginationEl = host.querySelector('.canopy-interstitial__pagination');
+  const prevBtn = host.querySelector('.canopy-interstitial__nav-btn--prev');
+  const nextBtn = host.querySelector('.canopy-interstitial__nav-btn--next');
+
+  // Live region for screen-reader slide announcements
+  const liveEl = document.createElement('div');
+  liveEl.setAttribute('aria-live', 'polite');
+  liveEl.setAttribute('aria-atomic', 'true');
+  liveEl.className = 'canopy-interstitial__sr-live';
+  host.appendChild(liveEl);
+
+  const embla = EmblaCarousel(viewport, { loop: true, duration: 0 });
+
+  const announce = (idx) => {
+    liveEl.textContent = `Slide ${idx + 1} of ${slides.length}`;
+  };
+
+  if (paginationEl) {
+    slides.forEach((_, i) => {
+      const dot = document.createElement('button');
+      dot.type = 'button';
+      dot.className =
+        'canopy-interstitial__dot' +
+        (i === 0 ? ' canopy-interstitial__dot--active' : '');
+      dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
+      dot.setAttribute('aria-current', i === 0 ? 'true' : 'false');
+      dot.addEventListener('click', () => embla.scrollTo(i));
+      paginationEl.appendChild(dot);
+    });
+
+    embla.on('select', () => {
+      const idx = embla.selectedScrollSnap();
+      announce(idx);
+      paginationEl.querySelectorAll('.canopy-interstitial__dot').forEach((dot, i) => {
+        const active = i === idx;
+        dot.classList.toggle('canopy-interstitial__dot--active', active);
+        dot.setAttribute('aria-current', active ? 'true' : 'false');
+      });
+    });
+  }
+
+  if (prevBtn) prevBtn.addEventListener('click', () => embla.scrollPrev());
+  if (nextBtn) nextBtn.addEventListener('click', () => embla.scrollNext());
+
+  let timer = setInterval(() => embla.scrollNext(), 6000);
+  const stopAutoplay = () => { clearInterval(timer); timer = null; };
+  const startAutoplay = () => { if (!timer) timer = setInterval(() => embla.scrollNext(), 6000); };
+
+  embla.on('pointerDown', stopAutoplay);
+  embla.on('pointerUp', startAutoplay);
+
+  host.__canopyHeroBound = true;
 }
 
 function observeHosts() {
   try {
-    const observer = new MutationObserver((mutations) => {
+    new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         mutation.addedNodes &&
           mutation.addedNodes.forEach((node) => {
             if (!(node instanceof Element)) return;
-            if (node.matches && node.matches('[data-canopy-hero-slider]')) initSlider(node);
+            if (node.matches && node.matches('[data-canopy-hero-slider]'))
+              initSlider(node);
             const inner = node.querySelectorAll
               ? node.querySelectorAll('[data-canopy-hero-slider]')
               : [];
             inner && inner.forEach && inner.forEach((el) => initSlider(el));
           });
       });
-    });
-    observer.observe(document.documentElement || document.body, {
+    }).observe(document.documentElement || document.body, {
       childList: true,
       subtree: true,
     });
@@ -79,7 +98,6 @@ function observeHosts() {
 
 ready(() => {
   if (typeof document === 'undefined') return;
-  const hosts = document.querySelectorAll('[data-canopy-hero-slider]');
-  hosts.forEach((host) => initSlider(host));
+  document.querySelectorAll('[data-canopy-hero-slider]').forEach((host) => initSlider(host));
   observeHosts();
 });

package/lib/components/slider-runtime-entry.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
 import {
   mergeSliderOptions,
   normalizeSliderOptions,

package/package.json

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

package/ui/dist/server.mjs

@@ -1182,7 +1182,6 @@ function Hero({
   item,
   index,
   random = true,
-  transition = "fade",
   headline,
   description,
   links = [],
@@ -1308,15 +1307,6 @@ function Hero({
     backgroundClassName,
     className
   ].filter(Boolean).join(" ");
-  const normalizedTransition = (() => {
-    try {
-      const raw = transition == null ? "" : String(transition);
-      const normalized = raw.trim().toLowerCase();
-      return normalized === "slide" ? "slide" : "fade";
-    } catch (_) {
-      return "fade";
-    }
-  })();
   const renderSlide = (slide, idx, { showVeil = true, captionVariant = "overlay" } = {}) => {
     const safeHref = applyBasePath(slide.href || "#");
     const isStaticCaption = captionVariant === "static";
@@ -1351,38 +1341,68 @@ function Hero({
       );
     };
     if (isStaticCaption) {
-      return /* @__PURE__ */ React12.createElement("div", { className: "swiper-slide", key: safeHref || idx }, wrapWithLink(
-        /* @__PURE__ */ React12.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React12.createElement(
-          "img",
-          {
-            ...buildImageProps(
-              "canopy-interstitial__media canopy-interstitial__media--static"
-            )
-          }
-        )) : null, slide.title ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React12.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
-      ));
+      return /* @__PURE__ */ React12.createElement(
+        "div",
+        {
+          className: "canopy-interstitial__slide",
+          key: safeHref || idx,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": `${idx + 1} of ${orderedSlides.length}`
+        },
+        wrapWithLink(
+          /* @__PURE__ */ React12.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__media-frame" }, /* @__PURE__ */ React12.createElement(
+            "img",
+            {
+              ...buildImageProps(
+                "canopy-interstitial__media canopy-interstitial__media--static"
+              )
+            }
+          )) : null, slide.title ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__caption canopy-interstitial__caption--static" }, /* @__PURE__ */ React12.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
+        )
+      );
     }
-    return /* @__PURE__ */ React12.createElement("div", { className: "swiper-slide", key: safeHref || idx }, wrapWithLink(
-      /* @__PURE__ */ React12.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React12.createElement("img", { ...buildImageProps("canopy-interstitial__media") }) : null, showVeil ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React12.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
-    ));
+    return /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        className: "canopy-interstitial__slide",
+        key: safeHref || idx,
+        role: "group",
+        "aria-roledescription": "slide",
+        "aria-label": `${idx + 1} of ${orderedSlides.length}`
+      },
+      wrapWithLink(
+        /* @__PURE__ */ React12.createElement("article", { className: paneClassName }, slide.thumbnail ? /* @__PURE__ */ React12.createElement("img", { ...buildImageProps("canopy-interstitial__media") }) : null, showVeil ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__veil", "aria-hidden": "true" }) : null, slide.title ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__caption" }, /* @__PURE__ */ React12.createElement("span", { className: "canopy-interstitial__caption-link" }, slide.title)) : null)
+      )
+    );
   };
-  const renderSlider = (options = {}) => /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__slider swiper" }, /* @__PURE__ */ React12.createElement("div", { className: "swiper-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))), /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React12.createElement(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Previous slide",
-      className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--prev swiper-button-prev"
-    },
-    /* @__PURE__ */ React12.createElement(PrevArrowIcon, null)
-  ), /* @__PURE__ */ React12.createElement(
-    "button",
+  const renderSlider = (options = {}) => /* @__PURE__ */ React12.createElement(
+    "div",
     {
-      type: "button",
-      "aria-label": "Next slide",
-      className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--next swiper-button-next"
+      className: "canopy-interstitial__slider",
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": overlayTitle || "Featured content"
     },
-    /* @__PURE__ */ React12.createElement(NextArrowIcon, null)
-  )), /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__pagination swiper-pagination" }));
+    /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__slide-wrapper" }, orderedSlides.map((slide, idx) => renderSlide(slide, idx, options))),
+    /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__nav" }, /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous slide",
+        className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--prev"
+      },
+      /* @__PURE__ */ React12.createElement(PrevArrowIcon, null)
+    ), /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Next slide",
+        className: "canopy-interstitial__nav-btn canopy-interstitial__nav-btn--next"
+      },
+      /* @__PURE__ */ React12.createElement(NextArrowIcon, null)
+    ))
+  );
   const overlayContent = /* @__PURE__ */ React12.createElement(React12.Fragment, null, overlayTitle ? /* @__PURE__ */ React12.createElement("h1", { className: "canopy-interstitial__headline" }, overlayTitle) : null, derivedDescription ? /* @__PURE__ */ React12.createElement("p", { className: "canopy-interstitial__description" }, derivedDescription) : null, finalOverlayLinks.length ? /* @__PURE__ */ React12.createElement(ButtonWrapper, { className: "canopy-interstitial__actions" }, finalOverlayLinks.map((link) => /* @__PURE__ */ React12.createElement(
     Button,
     {
@@ -1401,11 +1421,10 @@ function Hero({
   };
   if (!isBreadcrumbVariant) {
     sectionProps["data-canopy-hero-slider"] = "1";
-    sectionProps["data-transition"] = normalizedTransition;
   } else {
     sectionProps["data-canopy-hero-variant"] = "breadcrumb";
   }
-  return /* @__PURE__ */ React12.createElement("section", { ...sectionProps }, isBreadcrumbVariant ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__layout canopy-interstitial__layout--breadcrumb" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__body" }, breadcrumbNode, overlayContent))) : /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" }))));
+  return /* @__PURE__ */ React12.createElement("section", { ...sectionProps }, isBreadcrumbVariant ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__layout canopy-interstitial__layout--breadcrumb" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__body" }, breadcrumbNode, overlayContent))) : /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" }), /* @__PURE__ */ React12.createElement("div", { className: "canopy-interstitial__pagination" }))));
 }
 
 // ui/src/layout/SubNavigation.jsx