@canopy-iiif/app 0.9.14 → 0.10.0

package/lib/AGENTS.md

@@ -64,6 +64,7 @@ Logbook
 - 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.
 - 2025-09-27 / chatgpt: Expanded search indexing to harvest MDX pages (respecting frontmatter/layout types), injected BASE_PATH hydration data into search.html, and reworked `mdx.extractTitle()` so generated records surface real headings instead of `Untitled`.
+- 2025-10-19 / chatgpt: Embedded the Tailwind preset/plugin in a packaged config so dev/build fall back automatically; removed `app/styles/tailwind.config.*` from the default app and switched the public stylesheet to Tailwind’s CSS-first (`@import 'tailwindcss'; @theme { ... }`) workflow.
 
 Verification Commands
 ---------------------

package/lib/build/build.js

@@ -76,6 +76,7 @@ async function build(options = {}) {
   // so SSR interstitials can resolve items even if they are not part of
   // the traversed collection or when IIIF build is skipped during incremental rebuilds.
   try { await iiif.ensureFeaturedInCache(CONFIG); } catch (_) {}
+  try { await iiif.rebuildManifestIndexFromCache(); } catch (_) {}
 
   /**
    * Build contextual MDX content from the content directory.

package/lib/build/dev.js

@@ -816,17 +816,30 @@ async function dev() {
       "tailwind.config.mts",
       "tailwind.config.ts",
     ].map((n) => path.join(appStylesDir, n));
-    const configPath = [...twConfigsApp, ...twConfigsRoot].find((p) => {
+    let configPath = [...twConfigsApp, ...twConfigsRoot].find((p) => {
       try {
         return fs.existsSync(p);
       } catch (_) {
         return false;
       }
     });
+    const fallbackConfig = (() => {
+      try {
+        return require.resolve("@canopy-iiif/app/ui/tailwind-default-config");
+      } catch (_) {
+        return null;
+      }
+    })();
     if (!configPath) {
-      throw new Error(
-        "[tailwind] Missing Tailwind config. Expected app/styles/tailwind.config.{js,cjs,mjs,mts,ts} or a root-level Tailwind config."
-      );
+      configPath = fallbackConfig;
+      if (configPath) {
+        console.log(
+          "[tailwind] no local config found — using the built-in Canopy config"
+        );
+      }
+    }
+    if (!configPath) {
+      throw new Error("[tailwind] Unable to resolve a Tailwind config file.");
     }
     const inputCandidates = [
       path.join(appStylesDir, "index.css"),

package/lib/build/iiif.js

@@ -15,6 +15,13 @@ const {
 } = require("../common");
 const mdx = require("./mdx");
 const {log, logLine, logResponse} = require("./log");
+const {
+  getThumbnail,
+  getRepresentativeImage,
+  buildIiifImageUrlFromService,
+  findPrimaryCanvasImage,
+  buildIiifImageSrcset,
+} = require("../iiif/thumbnail");
 
 const IIIF_CACHE_DIR = path.resolve(".cache/iiif");
 const IIIF_CACHE_MANIFESTS_DIR = path.join(IIIF_CACHE_DIR, "manifests");
@@ -35,6 +42,8 @@ const IIIF_CACHE_INDEX_MANIFESTS = path.join(
 const DEFAULT_THUMBNAIL_SIZE = 400;
 const DEFAULT_CHUNK_SIZE = 20;
 const DEFAULT_FETCH_CONCURRENCY = 5;
+const HERO_THUMBNAIL_SIZE = 800;
+const HERO_IMAGE_SIZES_ATTR = "(min-width: 1024px) 1280px, 100vw";
 
 function resolvePositiveInteger(value, fallback) {
   const num = Number(value);
@@ -98,6 +107,20 @@ function normalizeMetadataLabel(label) {
   return trimmed.toLowerCase();
 }
 
+function resolveParentFromPartOf(resource) {
+  try {
+    const partOf = resource && resource.partOf;
+    if (!partOf) return "";
+    const arr = Array.isArray(partOf) ? partOf : [partOf];
+    for (const entry of arr) {
+      if (!entry) continue;
+      const id = entry.id || entry["@id"];
+      if (id) return String(id);
+    }
+  } catch (_) {}
+  return "";
+}
+
 function extractSummaryValues(manifest) {
   const values = [];
   try {
@@ -586,10 +609,8 @@ async function ensureFeaturedInCache(cfg) {
       ? CONFIG.featured
       : [];
     if (!featured.length) return;
-    const {getThumbnail, getRepresentativeImage} = require("../iiif/thumbnail");
     const {size: thumbSize, unsafe: unsafeThumbs} =
       resolveThumbnailPreferences();
-    const HERO_THUMBNAIL_SIZE = 1200;
     for (const rawId of featured) {
       const id = normalizeIiifId(String(rawId || ""));
       if (!id) continue;
@@ -651,22 +672,69 @@ async function ensureFeaturedInCache(cfg) {
             HERO_THUMBNAIL_SIZE,
             true
           );
-          if (heroRep && heroRep.id) {
-            const nextHero = String(heroRep.id);
+          const canvasImage = findPrimaryCanvasImage(manifest);
+          const heroService =
+            (canvasImage && canvasImage.service) ||
+            (heroRep && heroRep.service);
+          const preferredHeroThumbnail = buildIiifImageUrlFromService(
+            heroService,
+            HERO_THUMBNAIL_SIZE
+          );
+          const heroSrcset = buildIiifImageSrcset(heroService);
+          const heroFallbackId = (() => {
+            if (canvasImage && canvasImage.id) return String(canvasImage.id);
+            if (heroRep && heroRep.id) return String(heroRep.id);
+            return "";
+          })();
+          const heroWidth = (() => {
+            if (canvasImage && typeof canvasImage.width === "number") {
+              return canvasImage.width;
+            }
+            if (heroRep && typeof heroRep.width === "number") {
+              return heroRep.width;
+            }
+            return undefined;
+          })();
+          const heroHeight = (() => {
+            if (canvasImage && typeof canvasImage.height === "number") {
+              return canvasImage.height;
+            }
+            if (heroRep && typeof heroRep.height === "number") {
+              return heroRep.height;
+            }
+            return undefined;
+          })();
+          if (preferredHeroThumbnail || heroFallbackId) {
+            const nextHero = preferredHeroThumbnail || heroFallbackId;
             if (entry.heroThumbnail !== nextHero) {
               entry.heroThumbnail = nextHero;
               touched = true;
             }
-            if (typeof heroRep.width === "number") {
-              if (entry.heroThumbnailWidth !== heroRep.width) touched = true;
-              entry.heroThumbnailWidth = heroRep.width;
+            if (heroSrcset) {
+              if (entry.heroThumbnailSrcset !== heroSrcset) touched = true;
+              entry.heroThumbnailSrcset = heroSrcset;
+              if (entry.heroThumbnailSizes !== HERO_IMAGE_SIZES_ATTR) touched = true;
+              entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
+            } else {
+              if (entry.heroThumbnailSrcset !== undefined) {
+                delete entry.heroThumbnailSrcset;
+                touched = true;
+              }
+              if (entry.heroThumbnailSizes !== undefined) {
+                delete entry.heroThumbnailSizes;
+                touched = true;
+              }
+            }
+            if (typeof heroWidth === "number") {
+              if (entry.heroThumbnailWidth !== heroWidth) touched = true;
+              entry.heroThumbnailWidth = heroWidth;
             } else if (entry.heroThumbnailWidth !== undefined) {
               delete entry.heroThumbnailWidth;
               touched = true;
             }
-            if (typeof heroRep.height === "number") {
-              if (entry.heroThumbnailHeight !== heroRep.height) touched = true;
-              entry.heroThumbnailHeight = heroRep.height;
+            if (typeof heroHeight === "number") {
+              if (entry.heroThumbnailHeight !== heroHeight) touched = true;
+              entry.heroThumbnailHeight = heroHeight;
             } else if (entry.heroThumbnailHeight !== undefined) {
               delete entry.heroThumbnailHeight;
               touched = true;
@@ -810,6 +878,158 @@ async function saveCachedCollection(collection, id, parentId) {
   } catch (_) {}
 }
 
+async function rebuildManifestIndexFromCache() {
+  try {
+    const previous = await loadManifestIndex();
+    const previousEntries = Array.isArray(previous.byId) ? previous.byId : [];
+    const priorMap = new Map();
+    for (const entry of previousEntries) {
+      if (!entry || !entry.id) continue;
+      const type = entry.type || "Manifest";
+      const key = `${type}:${normalizeIiifId(entry.id)}`;
+      priorMap.set(key, entry);
+    }
+    const nextIndex = {
+      byId: [],
+      collection: previous.collection || null,
+    };
+    const collectionFiles = fs.existsSync(IIIF_CACHE_COLLECTIONS_DIR)
+      ? (await fsp.readdir(IIIF_CACHE_COLLECTIONS_DIR))
+          .filter((name) => name && name.toLowerCase().endsWith(".json"))
+          .sort()
+      : [];
+    const manifestFiles = fs.existsSync(IIIF_CACHE_MANIFESTS_DIR)
+      ? (await fsp.readdir(IIIF_CACHE_MANIFESTS_DIR))
+          .filter((name) => name && name.toLowerCase().endsWith(".json"))
+          .sort()
+      : [];
+    const {size: thumbSize, unsafe: unsafeThumbs} =
+      resolveThumbnailPreferences();
+
+    for (const name of collectionFiles) {
+      const slug = name.replace(/\.json$/i, "");
+      const fp = path.join(IIIF_CACHE_COLLECTIONS_DIR, name);
+      let data = null;
+      try {
+        data = await readJson(fp);
+      } catch (_) {
+        data = null;
+      }
+      if (!data) continue;
+      const id = data.id || data["@id"];
+      if (!id) continue;
+      const nid = normalizeIiifId(String(id));
+      const key = `Collection:${nid}`;
+      const fallback = priorMap.get(key) || {};
+      const parent = resolveParentFromPartOf(data) || fallback.parent || "";
+      nextIndex.byId.push({
+        id: String(nid),
+        type: "Collection",
+        slug,
+        parent,
+      });
+    }
+
+    for (const name of manifestFiles) {
+      const slug = name.replace(/\.json$/i, "");
+      const fp = path.join(IIIF_CACHE_MANIFESTS_DIR, name);
+      let manifest = null;
+      try {
+        manifest = await readJson(fp);
+      } catch (_) {
+        manifest = null;
+      }
+      if (!manifest) continue;
+      const id = manifest.id || manifest["@id"];
+      if (!id) continue;
+      const nid = normalizeIiifId(String(id));
+      MEMO_ID_TO_SLUG.set(String(id), slug);
+      const key = `Manifest:${nid}`;
+      const fallback = priorMap.get(key) || {};
+      const parent = resolveParentFromPartOf(manifest) || fallback.parent || "";
+      const entry = {
+        id: String(nid),
+        type: "Manifest",
+        slug,
+        parent,
+      };
+      try {
+        const thumb = await getThumbnail(manifest, thumbSize, unsafeThumbs);
+        if (thumb && thumb.url) {
+          entry.thumbnail = String(thumb.url);
+          if (typeof thumb.width === "number") entry.thumbnailWidth = thumb.width;
+          if (typeof thumb.height === "number") entry.thumbnailHeight = thumb.height;
+        }
+      } catch (_) {}
+      try {
+        const heroSource = (() => {
+          if (manifest && manifest.thumbnail) {
+            const clone = {...manifest};
+            try {
+              delete clone.thumbnail;
+            } catch (_) {
+              clone.thumbnail = undefined;
+            }
+            return clone;
+          }
+          return manifest;
+        })();
+        const heroRep = await getRepresentativeImage(
+          heroSource || manifest,
+          HERO_THUMBNAIL_SIZE,
+          true
+        );
+        const canvasImage = findPrimaryCanvasImage(manifest);
+        const heroService =
+          (canvasImage && canvasImage.service) ||
+          (heroRep && heroRep.service);
+        const preferredHero = buildIiifImageUrlFromService(
+          heroService,
+          HERO_THUMBNAIL_SIZE
+        );
+        const heroFallbackId = (() => {
+          if (canvasImage && canvasImage.id) return String(canvasImage.id);
+          if (heroRep && heroRep.id) return String(heroRep.id);
+          return "";
+        })();
+        const heroWidth = (() => {
+          if (canvasImage && typeof canvasImage.width === "number")
+            return canvasImage.width;
+          if (heroRep && typeof heroRep.width === "number") return heroRep.width;
+          return undefined;
+        })();
+        const heroHeight = (() => {
+          if (canvasImage && typeof canvasImage.height === "number")
+            return canvasImage.height;
+          if (heroRep && typeof heroRep.height === "number")
+            return heroRep.height;
+          return undefined;
+        })();
+        if (preferredHero || heroFallbackId) {
+          entry.heroThumbnail = preferredHero || heroFallbackId;
+          if (typeof heroWidth === "number") entry.heroThumbnailWidth = heroWidth;
+          if (typeof heroHeight === "number") entry.heroThumbnailHeight = heroHeight;
+          const heroSrcset = buildIiifImageSrcset(heroService);
+          if (heroSrcset) {
+            entry.heroThumbnailSrcset = heroSrcset;
+            entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
+          }
+        }
+      } catch (_) {}
+      nextIndex.byId.push(entry);
+    }
+
+    await saveManifestIndex(nextIndex);
+    try {
+      logLine("✓ Rebuilt IIIF cache index", "cyan");
+    } catch (_) {}
+  } catch (err) {
+    try {
+      logLine("! Skipped IIIF index rebuild", "yellow");
+    } catch (_) {}
+  }
+}
+
 async function loadConfig() {
   const cfgPath = path.resolve("canopy.yml");
   if (!fs.existsSync(cfgPath)) return {};
@@ -1155,7 +1375,9 @@ async function buildIiifCollectionPages(CONFIG) {
                 )
               : "";
           const needsHydrateViewer =
-            body.includes("data-canopy-viewer") || body.includes("data-canopy-scroll");
+            body.includes("data-canopy-viewer") ||
+            body.includes("data-canopy-scroll") ||
+            body.includes("data-canopy-image");
           const needsRelated = body.includes("data-canopy-related-items");
           const needsHeroSlider = body.includes("data-canopy-hero-slider");
           const needsSearchForm = body.includes("data-canopy-search-form");
@@ -1281,7 +1503,6 @@ async function buildIiifCollectionPages(CONFIG) {
           let thumbWidth = undefined;
           let thumbHeight = undefined;
           try {
-            const {getThumbnail} = require("../iiif/thumbnail");
             const t = await getThumbnail(manifest, thumbSize, unsafeThumbs);
             if (t && t.url) {
               thumbUrl = String(t.url);
@@ -1382,6 +1603,7 @@ module.exports = {
   loadCachedManifestById,
   saveCachedManifest,
   ensureFeaturedInCache,
+  rebuildManifestIndexFromCache,
 };
 
 // Debug: list collections cache after traversal

package/lib/build/mdx.js

@@ -525,6 +525,7 @@ async function ensureClientRuntime() {
   const entry = `
     import CloverViewer from '@samvera/clover-iiif/viewer';
     import CloverScroll from '@samvera/clover-iiif/scroll';
+    import CloverImage from '@samvera/clover-iiif/image';
 
     function ready(fn) {
       if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
@@ -563,6 +564,7 @@ async function ensureClientRuntime() {
     ready(function() {
       mountAll('[data-canopy-viewer]', CloverViewer);
       mountAll('[data-canopy-scroll]', CloverScroll);
+      mountAll('[data-canopy-image]', CloverImage);
     });
   `;
   const reactShim = `

package/lib/build/pages.js

@@ -66,7 +66,9 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   }
   const { body, head } = await mdx.compileMdxFile(filePath, outPath, null, mergedProps);
   const needsHydrateViewer =
-    body.includes('data-canopy-viewer') || body.includes('data-canopy-scroll');
+    body.includes('data-canopy-viewer') ||
+    body.includes('data-canopy-scroll') ||
+    body.includes('data-canopy-image');
   const needsHydrateSlider = body.includes('data-canopy-slider');
   const needsHeroSlider = body.includes('data-canopy-hero-slider');
   const needsSearchForm = true; // search form runtime is global
@@ -80,6 +82,9 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   const heroRel = needsHeroSlider
     ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-hero-slider.js')).split(path.sep).join('/')
     : null;
+  const heroCssRel = needsHeroSlider
+    ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-hero-slider.css')).split(path.sep).join('/')
+    : null;
   const facetsRel = needsFacets
     ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-related-items.js')).split(path.sep).join('/')
     : null;
@@ -118,6 +123,17 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   if (viewerRel && jsRel !== viewerRel) extraScripts.push(`<script defer src="${viewerRel}"></script>`);
   if (sliderRel && jsRel !== sliderRel) extraScripts.push(`<script defer src="${sliderRel}"></script>`);
   if (searchFormRel && jsRel !== searchFormRel) extraScripts.push(`<script defer src="${searchFormRel}"></script>`);
+  const extraStyles = [];
+  if (heroCssRel) {
+    let rel = heroCssRel;
+    try {
+      const heroCssAbs = path.join(OUT_DIR, 'scripts', 'canopy-hero-slider.css');
+      const st = fs.statSync(heroCssAbs);
+      rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`;
+    } catch (_) {}
+    extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
+  }
+  if (extraStyles.length) headExtra = extraStyles.join('') + headExtra;
   if (extraScripts.length) headExtra = extraScripts.join('') + headExtra;
   const html = htmlShell({ title, body, cssHref: null, scriptHref: jsRel, headExtra: vendorTag + headExtra });
   const { applyBaseToHtml } = require('../common');

package/lib/build/styles.js

@@ -39,13 +39,9 @@ async function ensureStyles() {
   });
   if (!configPath) {
     try {
-      const { CACHE_DIR } = require("../common");
-      const genDir = path.join(CACHE_DIR, "tailwind");
-      ensureDirSync(genDir);
-      const genCfg = path.join(genDir, "tailwind.config.js");
-      const cfg = `module.exports = {\n  presets: [require('@canopy-iiif/app/ui/canopy-iiif-preset')],\n  content: [\n    './content/**/*.{mdx,html}',\n    './site/**/*.html',\n    './site/**/*.js',\n    './packages/app/ui/**/*.{js,jsx,ts,tsx}',\n    './packages/app/lib/iiif/components/**/*.{js,jsx}',\n  ],\n  theme: { extend: {} },\n  plugins: [require('@canopy-iiif/app/ui/canopy-iiif-plugin')],\n};\n`;
-      fs.writeFileSync(genCfg, cfg, "utf8");
-      configPath = genCfg;
+      configPath = require.resolve(
+        "@canopy-iiif/app/ui/tailwind-default-config"
+      );
     } catch (_) {
       configPath = null;
     }
@@ -64,7 +60,7 @@ async function ensureStyles() {
       const genDir = path.join(CACHE_DIR, "tailwind");
       ensureDirSync(genDir);
       generatedInput = path.join(genDir, "index.css");
-      const css = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
+      const css = `@import 'tailwindcss';\n`;
       fs.writeFileSync(generatedInput, css, "utf8");
     } catch (_) {
       generatedInput = null;

package/lib/components/featured.js

@@ -117,6 +117,12 @@ function readFeaturedFromCacheSync() {
         } else if (typeof entry.thumbnailHeight === 'number') {
           rec.thumbnailHeight = entry.thumbnailHeight;
         }
+        if (entry && entry.heroThumbnailSrcset) {
+          rec.srcset = String(entry.heroThumbnailSrcset);
+        }
+        if (entry && entry.heroThumbnailSizes) {
+          rec.sizes = String(entry.heroThumbnailSizes);
+        }
       } else {
         if (entry && entry.thumbnail) rec.thumbnail = String(entry.thumbnail);
         if (entry && typeof entry.thumbnailWidth === 'number') rec.thumbnailWidth = entry.thumbnailWidth;

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

@@ -1,8 +1,9 @@
 import Swiper from 'swiper';
-import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
+import 'swiper/css/effect-fade';
 
 function ready(fn) {
   if (typeof document === 'undefined') return;
@@ -20,12 +21,18 @@ function initSlider(host) {
   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';
 
   try {
+    const baseModules = [Navigation, Pagination, Autoplay];
+    if (transition === 'fade') baseModules.push(EffectFade);
     const swiperInstance = new Swiper(slider, {
-      modules: [Navigation, Pagination, Autoplay],
+      modules: baseModules,
       loop: true,
       slidesPerView: 1,
+      effect: transition,
+      fadeEffect: transition === 'fade' ? { crossFade: true } : undefined,
       navigation: {
         prevEl: prev || undefined,
         nextEl: next || undefined,