@canopy-iiif/app 0.10.31 → 0.11.0

package/lib/build/dev.js

@@ -3,6 +3,12 @@ const fsp = fs.promises;
 const path = require("path");
 const { spawn, spawnSync } = require("child_process");
 const http = require("http");
+let sass = null;
+try {
+  sass = require("sass");
+} catch (_) {
+  sass = null;
+}
 const {
   CONTENT_DIR,
   OUT_DIR,
@@ -29,6 +35,13 @@ const UI_DIST_DIR = path.resolve(path.join(__dirname, "../../ui/dist"));
 const APP_PACKAGE_ROOT = path.resolve(path.join(__dirname, "..", ".."));
 const APP_LIB_DIR = path.join(APP_PACKAGE_ROOT, "lib");
 const APP_UI_DIR = path.join(APP_PACKAGE_ROOT, "ui");
+let loadUiTheme = null;
+try {
+  const uiTheme = require(path.join(APP_UI_DIR, "theme.js"));
+  if (uiTheme && typeof uiTheme.loadCanopyTheme === "function") {
+    loadUiTheme = uiTheme.loadCanopyTheme;
+  }
+} catch (_) {}
 const APP_WATCH_TARGETS = [
   { dir: APP_LIB_DIR, label: "@canopy-iiif/app/lib" },
   { dir: APP_UI_DIR, label: "@canopy-iiif/app/ui" },
@@ -1025,6 +1038,7 @@ async function dev() {
     );
     const uiStylesDir = path.join(APP_UI_DIR, "styles");
     const uiStylesCss = path.join(uiStylesDir, "index.css");
+    const uiStylesEntry = path.join(uiStylesDir, "index.scss");
     const pluginFiles = [uiPlugin, uiPreset].filter((p) => {
       try {
         return fs.existsSync(p);
@@ -1056,6 +1070,36 @@ async function dev() {
         });
       } catch (_) {}
     }
+    const rebuildUiStyles = () => {
+      if (!sass || !fs.existsSync(uiStylesEntry)) return false;
+      try {
+        const theme = loadUiTheme ? loadUiTheme({ cwd: process.cwd() }) : null;
+        const source = `${
+          theme && theme.sassConfig ? theme.sassConfig : ""
+        }@use 'index';`;
+        const result = sass.compileString(source, {
+          loadPaths: [uiStylesDir],
+          style: "expanded",
+        });
+        let cssOutput = result && result.css ? result.css : "";
+        const themeCss = theme && theme.css ? theme.css.trim() : "";
+        if (themeCss) {
+          cssOutput = `/* canopy-theme */\n${themeCss}\n/* canopy-theme:end */\n${cssOutput}`;
+        }
+        fs.writeFileSync(uiStylesCss, cssOutput, "utf8");
+        console.log(
+          "[tailwind] rebuilt @canopy-iiif/app/ui styles →",
+          prettyPath(uiStylesCss)
+        );
+        return true;
+      } catch (err) {
+        console.warn(
+          "[tailwind] failed to rebuild @canopy-iiif/app/ui styles:",
+          err && err.message ? err.message : err
+        );
+        return false;
+      }
+    };
     const attachCssWatcher = () => {
       if (uiCssWatcherAttached) {
         if (fs.existsSync(uiStylesCss)) return;
@@ -1080,11 +1124,15 @@ async function dev() {
         } catch (_) {}
       }
     };
+    if (fs.existsSync(uiStylesEntry)) rebuildUiStyles();
     attachCssWatcher();
     const handleUiSassChange = () => {
+      const ok = rebuildUiStyles();
       attachCssWatcher();
       scheduleTailwindRestart(
-        "[tailwind] detected @canopy-iiif/app/ui Sass change — restarting Tailwind",
+        ok
+          ? "[tailwind] detected @canopy-iiif/app/ui Sass change — restarting Tailwind"
+          : "[tailwind] Sass compile failed — attempting Tailwind restart",
         "[tailwind] compile after UI Sass change failed"
       );
     };
@@ -1148,16 +1196,66 @@ async function dev() {
     const stylesDir = path.dirname(inputCss);
     if (stylesDir && stylesDir.includes(path.join("app", "styles"))) {
       let cssDebounce = null;
-      try {
-        fs.watch(stylesDir, { persistent: false }, (evt, fn) => {
-          clearTimeout(cssDebounce);
-          cssDebounce = setTimeout(() => {
-            try { onBuildStart(); } catch (_) {}
-            safeCompile("[tailwind] compile after CSS change failed");
-            try { onCssChange(); } catch (_) {}
-          }, 50);
-        });
-      } catch (_) {}
+      const triggerCssRebuild = () => {
+        clearTimeout(cssDebounce);
+        cssDebounce = setTimeout(() => {
+          try { onBuildStart(); } catch (_) {}
+          safeCompile("[tailwind] compile after CSS change failed");
+          try { onCssChange(); } catch (_) {}
+        }, 50);
+      };
+      const shouldHandle = (filename) => {
+        if (!filename) return true;
+        return /\.(css|s[ac]ss)$/i.test(String(filename));
+      };
+      const attachRecursiveWatch = () => {
+        try {
+          fs.watch(
+            stylesDir,
+            { persistent: false, recursive: true },
+            (evt, fn) => {
+              if (!shouldHandle(fn)) return;
+              triggerCssRebuild();
+            }
+          );
+          return true;
+        } catch (_) {
+          return false;
+        }
+      };
+      if (!attachRecursiveWatch()) {
+        const watchers = new Map();
+        function watchDir(dir) {
+          if (watchers.has(dir)) return;
+          try {
+            const watcher = fs.watch(
+              dir,
+              { persistent: false },
+              (evt, fn) => {
+                if (shouldHandle(fn)) triggerCssRebuild();
+                scanDir(dir);
+              }
+            );
+            watchers.set(dir, watcher);
+          } catch (_) {}
+        }
+        function scanDir(dir) {
+          let entries = [];
+          try {
+            entries = fs.readdirSync(dir, { withFileTypes: true });
+          } catch (_) {
+            return;
+          }
+          for (const entry of entries) {
+            if (!entry || !entry.isDirectory()) continue;
+            const next = path.join(dir, entry.name);
+            watchDir(next);
+            scanDir(next);
+          }
+        }
+        watchDir(stylesDir);
+        scanDir(stylesDir);
+      }
     }
   } catch (err) {
     console.error("[tailwind] setup failed:", err && err.message ? err.message : err);

package/lib/build/mdx.js

@@ -821,6 +821,11 @@ async function ensureFacetsRuntime() {
   const entry = `
     function ready(fn){ if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',fn,{once:true}); else fn(); }
     function parseProps(el){ try{ const s=el.querySelector('script[type="application/json"]'); if(s) return JSON.parse(s.textContent||'{}'); }catch(_){ } return {}; }
+    function buildSliderProps(iiifContent, options){
+      const props = { iiifContent };
+      if (options && typeof options === 'object') props.options = options;
+      return props;
+    }
     function rootBase(){
       try {
         var bp = (window && window.CANOPY_BASE_PATH) ? String(window.CANOPY_BASE_PATH) : '';
@@ -851,6 +856,7 @@ async function ensureFacetsRuntime() {
           const topN = Number(props.top || 3) || 3;
           const ver = await getApiVersion();
           const verQ = ver ? ('?v=' + encodeURIComponent(ver)) : '';
+          const sliderOptions = (props && typeof props.sliderOptions === 'object') ? props.sliderOptions : null;
           const res = await fetch(rootBase() + '/api/search/facets.json' + verQ).catch(()=>null);
           if(!res || !res.ok) return;
           const json = await res.json().catch(()=>null);
@@ -873,7 +879,7 @@ async function ensureFacetsRuntime() {
               const wrap = document.createElement('div');
               wrap.setAttribute('data-facet-label', entry.label);
               wrap.setAttribute('class', 'canopy-slider');
-              const ph = makeSliderPlaceholder({ iiifContent: rootBase() + '/api/facet/' + (allow.slug) + '/' + pick.valueSlug + '.json' + verQ });
+              const ph = makeSliderPlaceholder(buildSliderProps(rootBase() + '/api/facet/' + (allow.slug) + '/' + pick.valueSlug + '.json' + verQ, sliderOptions));
               if (ph) wrap.appendChild(ph);
               el.appendChild(wrap);
             });
@@ -887,7 +893,7 @@ async function ensureFacetsRuntime() {
             const wrap = document.createElement('div');
             wrap.setAttribute('data-facet-label', s.label);
             wrap.setAttribute('class', 'canopy-slider');
-            const ph = makeSliderPlaceholder({ iiifContent: rootBase() + '/api/facet/' + s.labelSlug + '/' + s.valueSlug + '.json' + verQ });
+            const ph = makeSliderPlaceholder(buildSliderProps(rootBase() + '/api/facet/' + s.labelSlug + '/' + s.valueSlug + '.json' + verQ, sliderOptions));
             if (ph) wrap.appendChild(ph);
             el.appendChild(wrap);
           });
@@ -949,59 +955,7 @@ async function ensureSliderRuntime() {
   const scriptsDir = path.join(OUT_DIR, "scripts");
   ensureDirSync(scriptsDir);
   const outFile = path.join(scriptsDir, "canopy-slider.js");
-  const entry = `
-    import CloverSlider from '@samvera/clover-iiif/slider';
-    import 'swiper/css';
-    import 'swiper/css/navigation';
-    import 'swiper/css/pagination';
-
-    function ready(fn) {
-      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
-      else fn();
-    }
-    function parseProps(el) {
-      try {
-        const s = el.querySelector('script[type="application/json"]');
-        if (s) return JSON.parse(s.textContent || '{}');
-        const raw = el.getAttribute('data-props') || '{}';
-        return JSON.parse(raw);
-      } catch (_) { return {}; }
-    }
-    function mount(el){
-      try{
-        if (!el || el.getAttribute('data-canopy-slider-mounted')==='1') return;
-        const React = (window && window.React) || null;
-        const ReactDOMClient = (window && window.ReactDOMClient) || null;
-        const createRoot = ReactDOMClient && ReactDOMClient.createRoot;
-        if (!React || !createRoot) return;
-        const props = parseProps(el);
-        const root = createRoot(el);
-        root.render(React.createElement(CloverSlider, props));
-        el.setAttribute('data-canopy-slider-mounted','1');
-      } catch(_){}
-    }
-    function scan(){
-      try{ document.querySelectorAll('[data-canopy-slider]:not([data-canopy-slider-mounted="1"])').forEach(mount); }catch(_){ }
-    }
-    function observe(){
-      try{
-        const obs = new MutationObserver((muts)=>{
-          const toMount = [];
-          for (const m of muts){
-            m.addedNodes && m.addedNodes.forEach((n)=>{
-              if (!(n instanceof Element)) return;
-              if (n.matches && n.matches('[data-canopy-slider]')) toMount.push(n);
-              const inner = n.querySelectorAll ? n.querySelectorAll('[data-canopy-slider]') : [];
-              inner && inner.forEach && inner.forEach((x)=> toMount.push(x));
-            });
-          }
-          if (toMount.length) Promise.resolve().then(()=> toMount.forEach(mount));
-        });
-        obs.observe(document.documentElement || document.body, { childList: true, subtree: true });
-      }catch(_){ }
-    }
-    ready(function(){ scan(); observe(); });
-  `;
+  const entryFile = path.join(__dirname, "../components/slider-runtime-entry.js");
   const reactShim = `
     const React = (typeof window !== 'undefined' && window.React) || {};
     export default React;
@@ -1079,12 +1033,7 @@ async function ensureSliderRuntime() {
   };
   try {
     await esbuild.build({
-      stdin: {
-        contents: entry,
-        resolveDir: process.cwd(),
-        sourcefile: "canopy-slider-entry.js",
-        loader: "js",
-      },
+      entryPoints: [entryFile],
       outfile: outFile,
       platform: "browser",
       format: "iife",

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import CloverSlider from '@samvera/clover-iiif/slider';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { mergeSliderOptions, normalizeSliderOptions } from '../../ui/src/iiif/sliderOptions.js';
+
+function ready(fn) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(el) {
+  try {
+    const script = el.querySelector('script[type="application/json"]');
+    if (script) return JSON.parse(script.textContent || '{}');
+    const raw = el.getAttribute('data-props') || '{}';
+    return JSON.parse(raw);
+  } catch (_) {
+    return {};
+  }
+}
+
+function withDefaults(rawProps) {
+  const props = rawProps && typeof rawProps === 'object' ? rawProps : {};
+  const className = ['canopy-slider', props.className]
+    .filter(Boolean)
+    .join(' ');
+  const mergedOptions = mergeSliderOptions(props.options);
+  return {
+    ...props,
+    className,
+    options: normalizeSliderOptions(mergedOptions),
+  };
+}
+
+function mount(el) {
+  try {
+    if (!el || el.getAttribute('data-canopy-slider-mounted') === '1') return;
+    const props = withDefaults(parseProps(el));
+    const root = createRoot(el);
+    root.render(React.createElement(CloverSlider, props));
+    el.setAttribute('data-canopy-slider-mounted', '1');
+  } catch (_) {}
+}
+
+function scan() {
+  try {
+    document
+      .querySelectorAll('[data-canopy-slider]:not([data-canopy-slider-mounted="1"])')
+      .forEach(mount);
+  } catch (_) {}
+}
+
+function observe() {
+  try {
+    const obs = new MutationObserver((mutations) => {
+      const toMount = [];
+      mutations.forEach((mutation) => {
+        mutation.addedNodes &&
+          mutation.addedNodes.forEach((node) => {
+            if (!(node instanceof Element)) return;
+            if (node.matches && node.matches('[data-canopy-slider]')) toMount.push(node);
+            const inner = node.querySelectorAll
+              ? node.querySelectorAll('[data-canopy-slider]')
+              : [];
+            inner && inner.forEach && inner.forEach((x) => toMount.push(x));
+          });
+      });
+      if (toMount.length) Promise.resolve().then(() => toMount.forEach(mount));
+    });
+    obs.observe(document.documentElement || document.body, {
+      childList: true,
+      subtree: true,
+    });
+  } catch (_) {}
+}
+
+ready(function onReady() {
+  scan();
+  observe();
+});

package/package.json

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

package/ui/dist/index.mjs

@@ -1241,7 +1241,120 @@ var Viewer = (props) => {
 
 // ui/src/iiif/Slider.jsx
 import React17, { useEffect as useEffect3, useState as useState3 } 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] = useState3(null);
   useEffect3(() => {
     let mounted = true;
@@ -1249,7 +1362,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(() => {
@@ -1259,14 +1371,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__ */ React17.createElement("div", { className: "canopy-slider", "data-canopy-slider": "1" }, /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: sliderClassName, "data-canopy-slider": "1" }, /* @__PURE__ */ React17.createElement(
       "script",
       {
         type: "application/json",
@@ -1274,7 +1395,7 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...props, className: "canopy-slider" });
+  return /* @__PURE__ */ React17.createElement(CloverSlider, { ...resolvedProps });
 };
 
 // ui/src/iiif/Scroll.jsx