@canopy-iiif/app 0.10.12 → 0.10.14

package/lib/build/dev.js

@@ -9,7 +9,7 @@ const {
   ASSETS_DIR,
   ensureDirSync,
 } = require("../common");
-function resolveTailwindCli() {
+  function resolveTailwindCli() {
   const bin = path.join(
     process.cwd(),
     "node_modules",
@@ -40,6 +40,14 @@ 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;
@@ -896,6 +904,7 @@ async function dev() {
       }
       throw new Error("[tailwind] Initial Tailwind build failed.");
     }
+    stripTailwindThemeLayer(outputCss);
     console.log(
       `[tailwind] initial build ok (${fileSizeKb(outputCss)} KB) →`,
       prettyPath(outputCss)
@@ -920,6 +929,7 @@ async function dev() {
       cssWatcherAttached = true;
       try {
         fs.watch(outputCss, { persistent: false }, () => {
+          stripTailwindThemeLayer(outputCss);
           if (!unmuted) {
             unmuted = true;
             console.log(
@@ -946,6 +956,7 @@ async function dev() {
         }
         throw new Error("[tailwind] On-demand Tailwind compile failed.");
       }
+      stripTailwindThemeLayer(outputCss);
       console.log(
         `[tailwind] compiled (${fileSizeKb(outputCss)} KB) →`,
         prettyPath(outputCss)

package/lib/build/styles.js

@@ -143,6 +143,14 @@ async function ensureStyles() {
     } 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 (_) {}
+  }
+
   const shouldInjectTheme = !(hasAppCss && configPath);
 
   if (configPath && (inputCss || generatedInput)) {
@@ -154,6 +162,7 @@ async function ensureStyles() {
     });
     if (ok) {
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return; // Tailwind compiled CSS
     }
   }
@@ -170,6 +179,7 @@ async function ensureStyles() {
     if (!isTailwindSource(customAppCss)) {
       await fsp.copyFile(customAppCss, dest);
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return;
     }
   }
@@ -177,6 +187,7 @@ async function ensureStyles() {
     if (!isTailwindSource(customContentCss)) {
       await fsp.copyFile(customContentCss, dest);
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return;
     }
   }
@@ -184,6 +195,7 @@ async function ensureStyles() {
   const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
   await fsp.writeFile(dest, css, "utf8");
   injectThemeTokens(dest);
+  stripTailwindThemeLayer(dest);
 }
 
 module.exports = { ensureStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.10.12",
+  "version": "0.10.14",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -12,6 +12,7 @@
     "./ui": "./ui/dist/index.mjs",
     "./ui/server": "./ui/dist/server.mjs",
     "./ui/styles/index.css": "./ui/styles/index.css",
+    "./ui/styles/runtime.css": "./ui/styles/runtime.css",
     "./ui/canopy-iiif-plugin": "./ui/tailwind-canopy-iiif-plugin.js",
     "./ui/canopy-iiif-preset": "./ui/tailwind-canopy-iiif-preset.js",
     "./ui/tailwind-config": {

package/ui/dist/server.mjs

@@ -1897,7 +1897,7 @@ var baseLineStyle = {
   boxSizing: "border-box"
 };
 var highlightBaseStyle = {
-  background: "linear-gradient(to right, var(--color-brand-200, #bfdbfe), var(--color-brand-100, #bfdbfe))"
+  background: "linear-gradient(to right, var(--color-accent-200, #bfdbfe), var(--color-accent-100, #bfdbfe))"
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
@@ -1946,7 +1946,7 @@ function DocsCodeBlock(props = {}) {
     borderRadius: "12px",
     overflow: "hidden",
     margin: "1.5rem 0",
-    background: "var(--color-brand-100)",
+    background: "var(--color-accent-100)",
     fontFamily: "var(--font-mono)",
     fontSize: "0.85rem"
   };
@@ -1956,14 +1956,14 @@ function DocsCodeBlock(props = {}) {
     justifyContent: "space-between",
     padding: "1rem 1.25rem",
     fontWeight: 700,
-    background: "var(--color-brand-100)",
-    borderBottom: "1px solid var(--color-brand-200)",
-    color: "var(--color-brand-900)"
+    background: "var(--color-accent-100)",
+    borderBottom: "1px solid var(--color-accent-200)",
+    color: "var(--color-accent-900)"
   };
   const preStyle = {
     margin: 0,
-    background: "var(--color-brand-100)",
-    color: "var(--color-brand-800)",
+    background: "var(--color-accent-100)",
+    color: "var(--color-accent-800)",
     lineHeight: 1.55,
     padding: "1rem 0",
     overflowX: "auto"
@@ -2003,13 +2003,13 @@ function DocsCodeBlock(props = {}) {
           type: "button",
           onClick: handleCopy,
           style: {
-            border: "1px solid var(--color-brand-300, #bfdbfe)",
+            border: "1px solid var(--color-accent-300, #bfdbfe)",
             borderRadius: "6px",
             padding: "0.2rem 0.55rem",
             fontSize: "0.7rem",
             fontWeight: 500,
-            background: "color-mix(in srgb, var(--color-brand-100, #e0f2ff) 55%, #ffffff)",
-            color: "var(--color-brand-700, #1d4ed8)",
+            background: "color-mix(in srgb, var(--color-accent-100, #e0f2ff) 55%, #ffffff)",
+            color: "var(--color-accent-700, #1d4ed8)",
             cursor: "pointer"
           }
         },