@canopy-iiif/app 1.6.20 → 1.6.22

package/lib/build/dev.js

@@ -15,6 +15,10 @@ const {
   ASSETS_DIR,
   ensureDirSync,
 } = require("../common");
+const {
+  injectThemeTokens,
+  stripTailwindThemeLayer,
+} = require("./styles");
 const APP_COMPONENTS_DIR = path.join(process.cwd(), "app", "components");
 
 function resolveTailwindCli() {
@@ -60,14 +64,6 @@ const HAS_APP_WORKSPACE = (() => {
     return false;
   }
 })();
-
-function stripTailwindThemeLayer(targetPath) {
-  try {
-    const raw = fs.readFileSync(targetPath, "utf8");
-    const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
-    if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
-  } catch (_) {}
-}
 let pendingModuleReload = false;
 let building = false;
 let buildAgain = false;
@@ -992,6 +988,7 @@ async function dev() {
       }
       throw new Error("[tailwind] Initial Tailwind build failed.");
     }
+    injectThemeTokens(outputCss);
     stripTailwindThemeLayer(outputCss);
     console.log(
       `[tailwind] initial build ok (${fileSizeKb(outputCss)} KB) →`,
@@ -1017,6 +1014,7 @@ async function dev() {
       cssWatcherAttached = true;
       try {
         fs.watch(outputCss, { persistent: false }, () => {
+          injectThemeTokens(outputCss);
           stripTailwindThemeLayer(outputCss);
           if (!unmuted) {
             unmuted = true;
@@ -1044,6 +1042,7 @@ async function dev() {
         }
         throw new Error("[tailwind] On-demand Tailwind compile failed.");
       }
+      injectThemeTokens(outputCss);
       stripTailwindThemeLayer(outputCss);
       console.log(
         `[tailwind] compiled (${fileSizeKb(outputCss)} KB) →`,

package/lib/build/iiif.js

@@ -15,6 +15,7 @@ const {
   canopyBodyClassForType,
   readSiteMetadata,
   readPrimaryNavigation,
+  withBase,
 } = require("../common");
 const {resolveCanopyConfigPath} = require("../config-path");
 const mdx = require("./mdx");
@@ -2033,15 +2034,10 @@ async function buildIiifCollectionPages(CONFIG) {
         try {
           let components = {};
           try {
-            components = await import("@canopy-iiif/app/ui/server");
+            components = await mdx.loadUiComponents();
           } catch (_) {
-            try {
-              components = await import("@canopy-iiif/app/ui");
-            } catch (_) {
-              components = {};
-            }
+            components = {};
           }
-          const {withBase} = require("../common");
           const Anchor = function A(props) {
             let {href = "", ...rest} = props || {};
             href = withBase(href);
@@ -2056,8 +2052,7 @@ async function buildIiifCollectionPages(CONFIG) {
           } catch (_) {
             MDXProvider = null;
           }
-          const {loadAppWrapper} = require("./mdx");
-          const app = await loadAppWrapper();
+          const app = await mdx.loadAppWrapper();
 
           let heroMedia = null;
           try {
@@ -2174,6 +2169,9 @@ async function buildIiifCollectionPages(CONFIG) {
           const needsTimeline = body.includes("data-canopy-timeline");
           const needsMap = body.includes("data-canopy-map");
           const needsSearchForm = body.includes("data-canopy-search-form");
+          const needsCustomClients = body.includes(
+            "data-canopy-client-component",
+          );
           const needsHydrate =
             body.includes("data-canopy-hydrate") ||
             needsHydrateViewer ||
@@ -2213,11 +2211,39 @@ async function buildIiifCollectionPages(CONFIG) {
           const searchFormRel = needsSearchForm
             ? relativeRuntimeScript(outPath, "canopy-search-form.js", true)
             : null;
+          let customClientRel = null;
+          if (needsCustomClients) {
+            try {
+              await mdx.ensureCustomClientRuntime();
+              const customAbs = path.join(
+                OUT_DIR,
+                "scripts",
+                "canopy-custom-components.js",
+              );
+              let rel = path
+                .relative(path.dirname(outPath), customAbs)
+                .split(path.sep)
+                .join("/");
+              try {
+                const st = fs.statSync(customAbs);
+                rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`;
+              } catch (_) {}
+              customClientRel = rel;
+            } catch (e) {
+              try {
+                console.warn(
+                  "[canopy][mdx] failed to build custom client runtime:",
+                  e && e.message ? e.message : e,
+                );
+              } catch (_) {}
+            }
+          }
 
           const moduleScriptRels = [];
           if (viewerRel) moduleScriptRels.push(viewerRel);
           if (sliderRel) moduleScriptRels.push(sliderRel);
           if (imageStoryRel) moduleScriptRels.push(imageStoryRel);
+          if (customClientRel) moduleScriptRels.push(customClientRel);
           const primaryClassicScripts = [];
           if (heroRel) primaryClassicScripts.push(heroRel);
           if (relatedRel) primaryClassicScripts.push(relatedRel);
@@ -2238,7 +2264,8 @@ async function buildIiifCollectionPages(CONFIG) {
             needsHydrateViewer ||
             needsRelated ||
             needsTimeline ||
-            needsMap
+            needsMap ||
+            (customClientRel && needsCustomClients)
           );
           let vendorTag = "";
           if (needsReact) {

package/lib/build/mdx.js

@@ -1904,6 +1904,7 @@ module.exports = {
   compileMdxToComponent,
   loadCustomLayout,
   loadAppWrapper,
+  loadUiComponents,
   ensureClientRuntime,
   ensureSliderRuntime,
   ensureTimelineRuntime,

package/lib/build/styles.js

@@ -7,6 +7,49 @@ const {
   ensureDirSync,
 } = require("../common");
 
+function resolveTailwindCli() {
+  const localBin = path.join(
+    process.cwd(),
+    "node_modules",
+    ".bin",
+    process.platform === "win32" ? "tailwindcss.cmd" : "tailwindcss"
+  );
+  if (fs.existsSync(localBin)) return {cmd: localBin, args: []};
+  return {cmd: "tailwindcss", args: []};
+}
+
+function injectThemeTokens(targetPath) {
+  try {
+    const {loadCanopyTheme} = require("@canopy-iiif/app/ui/theme");
+    const theme = loadCanopyTheme();
+    const themeCss = theme && theme.css ? theme.css.trim() : "";
+    if (!themeCss) return;
+
+    let existing = "";
+    try {
+      existing = fs.readFileSync(targetPath, "utf8");
+    } catch (_) {}
+
+    const marker = "/* canopy-theme */";
+    const markerEnd = "/* canopy-theme:end */";
+    const markerRegex = new RegExp(`${marker}[\\s\\S]*?${markerEnd}\\n?`, "g");
+    const sanitized = existing.replace(markerRegex, "").replace(/\s+$/, "");
+
+    const themeBlock = `${marker}\n${themeCss}\n${markerEnd}\n`;
+    const separator = sanitized ? "\n" : "";
+    const next = `${sanitized}${separator}${themeBlock}`;
+    fs.writeFileSync(targetPath, next, "utf8");
+  } catch (_) {}
+}
+
+function stripTailwindThemeLayer(targetPath) {
+  try {
+    const raw = fs.readFileSync(targetPath, "utf8");
+    const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
+    if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
+  } catch (_) {}
+}
+
 async function ensureStyles() {
   const stylesDir = path.join(OUT_DIR, "styles");
   const dest = path.join(stylesDir, "styles.css");
@@ -69,16 +112,6 @@ async function ensureStyles() {
     }
   }
 
-  function resolveTailwindCli() {
-  const localBin = path.join(
-    process.cwd(),
-    "node_modules",
-    ".bin",
-    process.platform === "win32" ? "tailwindcss.cmd" : "tailwindcss"
-  );
-  if (fs.existsSync(localBin)) return { cmd: localBin, args: [] };
-  return { cmd: 'tailwindcss', args: [] };
-}
   function buildTailwindCli({ input, output, config, minify = true }) {
     try {
       const cli = resolveTailwindCli();
@@ -97,38 +130,6 @@ async function ensureStyles() {
     }
   }
 
-  function injectThemeTokens(targetPath) {
-    try {
-      const { loadCanopyTheme } = require("@canopy-iiif/app/ui/theme");
-      const theme = loadCanopyTheme();
-      const themeCss = theme && theme.css ? theme.css.trim() : "";
-      if (!themeCss) return;
-
-      let existing = "";
-      try {
-        existing = fs.readFileSync(targetPath, "utf8");
-      } catch (_) {}
-
-      const marker = "/* canopy-theme */";
-      const markerEnd = "/* canopy-theme:end */";
-      const markerRegex = new RegExp(`${marker}[\\s\\S]*?${markerEnd}\\n?`, "g");
-      const sanitized = existing.replace(markerRegex, "").replace(/\s+$/, "");
-
-      const themeBlock = `${marker}\n${themeCss}\n${markerEnd}\n`;
-      const separator = sanitized ? "\n" : "";
-      const next = `${sanitized}${separator}${themeBlock}`;
-      fs.writeFileSync(targetPath, next, "utf8");
-    } catch (_) {}
-  }
-
-  function stripTailwindThemeLayer(targetPath) {
-    try {
-      const raw = fs.readFileSync(targetPath, "utf8");
-      const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
-      if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
-    } catch (_) {}
-  }
-
   if (configPath && (inputCss || generatedInput)) {
     const ok = buildTailwindCli({
       input: inputCss || generatedInput,
@@ -174,4 +175,8 @@ async function ensureStyles() {
   stripTailwindThemeLayer(dest);
 }
 
-module.exports = { ensureStyles };
+module.exports = {
+  ensureStyles,
+  injectThemeTokens,
+  stripTailwindThemeLayer,
+};

package/package.json

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

package/ui/dist/index.mjs

@@ -2065,13 +2065,31 @@ async function mountImageStory(element, props = {}) {
 }
 
 // ui/src/iiif/ImageStory.jsx
+var DEFAULT_IMAGE_STORY_HEIGHT = 600;
+var NUMERIC_HEIGHT_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)$/;
+function resolveContainerHeight(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return `${DEFAULT_IMAGE_STORY_HEIGHT}px`;
+    }
+    if (NUMERIC_HEIGHT_PATTERN.test(trimmed)) {
+      return `${trimmed}px`;
+    }
+    return trimmed;
+  }
+  return `${DEFAULT_IMAGE_STORY_HEIGHT}px`;
+}
 var ImageStory = (props = {}) => {
   const {
     iiifContent,
     disablePanAndZoom,
     pointOfInterestSvgUrl,
     viewerOptions,
-    height = 600,
+    height = DEFAULT_IMAGE_STORY_HEIGHT,
     className,
     style,
     ...rest
@@ -2080,6 +2098,9 @@ var ImageStory = (props = {}) => {
   const resolvedClassName = useMemo2(() => {
     return ["canopy-image-story", className].filter(Boolean).join(" ");
   }, [className]);
+  const resolvedHeight = useMemo2(() => {
+    return resolveContainerHeight(height);
+  }, [height]);
   const serializedProps = useMemo2(() => {
     return serializeImageStoryProps({
       iiifContent,
@@ -2125,7 +2146,7 @@ var ImageStory = (props = {}) => {
       "data-canopy-image-story": "1",
       style: {
         width: "100%",
-        height: typeof height === "number" ? `${height}px` : height,
+        height: resolvedHeight,
         ...style || {}
       },
       ...rest