@canopy-iiif/app 0.8.5 → 0.9.0

package/ui/styles/index.css

@@ -11,7 +11,7 @@
   --color-brand-600: #3358d4;
   --color-brand-700: #3a5bc7;
   --color-brand-800: #1f2d5c;
-  --color-brand-900: #1a264e;
+  --color-brand-900: #172245;
   --color-brand-default: #3358d4;
   --color-gray-50: #fcfcfd;
   --color-gray-100: #f0f0f3;
@@ -22,15 +22,15 @@
   --color-gray-600: #80838d;
   --color-gray-700: #60646c;
   --color-gray-800: #1c2024;
-  --color-gray-900: #181b1f;
-  --color-gray-default: #181b1f;
+  --color-gray-900: #111316;
+  --color-gray-default: #111316;
   --color-gray-muted: #80838d;
   --colors-accent: #3358d4 !important;
   --colors-accentAlt: #1f2d5c !important;
   --colors-accentMuted: #8da4ef !important;
-  --colors-primary: #181b1f !important;
-  --colors-primaryAlt: #181b1f !important;
-  --colors-primaryMuted: #181b1f !important;
+  --colors-primary: #111316 !important;
+  --colors-primaryAlt: #111316 !important;
+  --colors-primaryMuted: #111316 !important;
   --colors-secondary: #fcfcfd !important;
   --colors-secondaryAlt: #fcfcfd !important;
   --colors-secondaryMuted: #fcfcfd !important;
@@ -47,7 +47,7 @@
   --color-brand-600: #3358d4;
   --color-brand-700: #3a5bc7;
   --color-brand-800: #1f2d5c;
-  --color-brand-900: #1a264e;
+  --color-brand-900: #172245;
   --color-brand-default: #3358d4;
   --color-gray-50: #fcfcfd;
   --color-gray-100: #f0f0f3;
@@ -58,15 +58,15 @@
   --color-gray-600: #80838d;
   --color-gray-700: #60646c;
   --color-gray-800: #1c2024;
-  --color-gray-900: #181b1f;
-  --color-gray-default: #181b1f;
+  --color-gray-900: #111316;
+  --color-gray-default: #111316;
   --color-gray-muted: #80838d;
   --colors-accent: #3358d4 !important;
   --colors-accentAlt: #1f2d5c !important;
   --colors-accentMuted: #8da4ef !important;
-  --colors-primary: #181b1f !important;
-  --colors-primaryAlt: #181b1f !important;
-  --colors-primaryMuted: #181b1f !important;
+  --colors-primary: #111316 !important;
+  --colors-primaryAlt: #111316 !important;
+  --colors-primaryMuted: #111316 !important;
   --colors-secondary: #fcfcfd !important;
   --colors-secondaryAlt: #fcfcfd !important;
   --colors-secondaryMuted: #fcfcfd !important;
@@ -130,6 +130,38 @@ h2 {
   font-weight: 400;
 }
 
+.canopy-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.55rem 1.4rem;
+  border-radius: 9999px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.canopy-button--primary {
+  background-color: var(--color-brand-600, #4f46e5);
+  color: var(--color-gray-50, #f9fafb);
+  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
+}
+.canopy-button--primary:hover, .canopy-button--primary:focus-visible {
+  background-color: var(--color-brand-700, #4338ca);
+  color: var(--color-gray-50, #f9fafb);
+}
+.canopy-button--secondary {
+  border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
+  color: color-mix(in srgb, var(--color-gray-900, #0f172a) 92%, transparent);
+  background-color: transparent;
+}
+.canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
+  border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 65%, transparent);
+  background-color: color-mix(in srgb, var(--color-brand-200, #c7d2fe) 25%, transparent);
+  color: var(--color-brand-700, #4338ca);
+}
+
 /* Canopy Card component styles */
 .canopy-card, .canopy-annotation-card {
   display: block;
@@ -280,27 +312,337 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
   text-decoration: underline;
 }
 
-.canopy-hero {
+.canopy-interstitial {
+  position: relative;
+  width: 100%;
+  isolation: isolate;
+  margin-bottom: 2.618rem;
+}
+.canopy-interstitial--hero {
+  --hero-height: 520px;
+  --hero-bg-start: var(--color-brand-50);
+  --hero-bg-end: var(--color-brand-200);
+  --hero-caption-link: var(--color-brand-700);
+  --hero-dot-bg: var(--color-brand-300);
+  --hero-dot-active-bg: var(--color-brand-700);
+  background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
+  min-height: var(--hero-height);
+}
+.canopy-interstitial--hero .canopy-interstitial__overlay,
+.canopy-interstitial--hero .canopy-interstitial__pane::before,
+.canopy-interstitial--hero .canopy-interstitial__pane::after,
+.canopy-interstitial--hero .canopy-interstitial__veil {
+  display: none;
+}
+.canopy-interstitial--hero .canopy-interstitial__layout {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--hero-height);
+  width: 100%;
+  overflow: hidden;
+}
+.canopy-interstitial--hero .canopy-interstitial__panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
+  box-sizing: border-box;
+  min-width: 0;
+  background: transparent;
+}
+.canopy-interstitial--hero .canopy-interstitial__body {
+  align-items: flex-start;
+  text-align: left;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  gap: 1.5rem;
+}
+.canopy-interstitial--hero .canopy-interstitial__actions {
+  justify-content: flex-start;
+}
+.canopy-interstitial--hero .canopy-interstitial__media-group {
+  flex: 1;
+  position: relative;
+  min-height: var(--hero-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
+  background: transparent;
+}
+.canopy-interstitial--hero .canopy-interstitial__caption {
+  position: static;
+  margin: 1.5rem auto 0;
+  padding: 0 0.5rem;
+  text-align: center;
+}
+.canopy-interstitial--hero .canopy-interstitial__panel,
+.canopy-interstitial--hero .canopy-interstitial__media-group {
+  width: 50%;
+}
+.canopy-interstitial--hero .canopy-interstitial__pagination {
+  position: static;
+  transform: none;
+  justify-content: center;
+  margin-top: 1.618rem;
+  padding-bottom: 2px;
+}
+@media (max-width: 63.9375rem) {
+  .canopy-interstitial--hero .canopy-interstitial__panel,
+  .canopy-interstitial--hero .canopy-interstitial__media-group {
+    width: 100%;
+  }
+}
+@media (min-width: 48rem) {
+  .canopy-interstitial--hero .canopy-interstitial__layout {
+    flex-direction: row;
+  }
+}
+@media (min-width: 64rem) {
+  .canopy-interstitial--hero .canopy-interstitial__body .canopy-interstitial__headline {
+    font-size: 3rem;
+  }
+}
+.canopy-interstitial__slider {
+  position: relative;
+  width: 100%;
+  min-height: var(--hero-height);
+  overflow: hidden;
+}
+.canopy-interstitial__slider .swiper-wrapper {
+  display: flex;
+  transition-property: transform;
+}
+.canopy-interstitial__slider .swiper-slide {
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+.canopy-interstitial__pane {
+  position: relative;
+  width: 100%;
+  min-height: var(--hero-height);
+  overflow: hidden;
+  background-color: color-mix(in srgb, var(--hero-bg-start) 65%, transparent);
+}
+.canopy-interstitial__pane::before, .canopy-interstitial__pane::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  display: none;
+}
+.canopy-interstitial__pane--flat::before, .canopy-interstitial__pane--flat::after {
+  display: none;
+}
+.canopy-interstitial__pane--static {
+  display: flex;
+  flex-direction: column;
+  height: var(--hero-height);
+  background-color: transparent;
+}
+.canopy-interstitial__media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 0;
+}
+.canopy-interstitial__media-frame {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  border-radius: clamp(1.5rem, 2vw, 2rem);
+}
+.canopy-interstitial__media--static {
+  position: static;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.canopy-interstitial__veil {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  display: none;
+}
+.canopy-interstitial__overlay {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1.75rem;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--hero-bg-start) 85%, transparent) 0%, color-mix(in srgb, var(--hero-bg-end) 70%, transparent) 100%);
+}
+.canopy-interstitial__body {
+  position: relative;
+  z-index: 3;
+  max-width: 48rem;
+  margin: 0 auto;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  text-align: center;
+  pointer-events: auto;
+}
+.canopy-interstitial__headline {
   margin: 0;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.08;
+  letter-spacing: -0.01em;
 }
-.canopy-hero figcaption {
+.canopy-interstitial__description {
   margin: 0;
-  padding: 1rem 0 0;
+  max-width: 42rem;
   font-size: 1rem;
-  text-align: right;
+  line-height: 1.7;
+  color: color-mix(in srgb, currentColor 82%, transparent);
+}
+.canopy-interstitial__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+}
+.canopy-interstitial__caption {
+  position: absolute;
+  bottom: 1.75rem;
+  right: 2rem;
+  z-index: 3;
+  font-size: 0.8333rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--hero-caption-color);
+}
+.canopy-interstitial__caption--static {
+  position: static;
+  margin: 1.5rem auto 0;
+  text-align: center;
+  color: var(--hero-caption-color);
+}
+.canopy-interstitial__caption-link {
+  color: var(--hero-caption-link);
+  text-decoration: underline;
+  text-underline-offset: 0.35em;
+  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+.canopy-interstitial__caption-link:hover, .canopy-interstitial__caption-link:focus-visible {
+  color: var(--hero-caption-link);
+  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+.canopy-interstitial__nav {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+}
+.canopy-interstitial__nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 55%, transparent);
+  background-color: color-mix(in srgb, var(--color-gray-100, #f1f5f9) 65%, transparent);
+  backdrop-filter: blur(6px);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  color: var(--colors-primary);
+}
+.canopy-interstitial__nav-btn::after {
+  content: "";
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 7px;
+  transform: rotate(135deg);
+}
+.canopy-interstitial__nav-btn--prev {
+  left: 1.5rem;
+}
+.canopy-interstitial__nav-btn--next {
+  right: 1.5rem;
+}
+.canopy-interstitial__nav-btn--next::after {
+  transform: rotate(-45deg);
+}
+.canopy-interstitial__nav-btn:hover, .canopy-interstitial__nav-btn:focus-visible {
+  background-color: color-mix(in srgb, var(--color-brand-200) 55%, transparent);
+  border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 70%, transparent);
+  color: var(--color-brand-700, #4338ca);
+}
+.canopy-interstitial__pagination {
+  position: absolute;
+  z-index: 4;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.4rem;
+}
+.canopy-interstitial__pagination .swiper-pagination-bullet {
+  display: inline-block;
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 9999px;
+  background-color: var(--hero-dot-bg);
+  opacity: 1;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+.canopy-interstitial__pagination .swiper-pagination-bullet-active {
+  transform: scale(1.35);
+  background-color: var(--hero-dot-active-bg);
 }
 
-.canopy-hero-link {
-  display: block;
-  color: inherit;
-  text-decoration: none;
+.canopy-interstitial--hero.canopy-interstitial--bg-transparent {
+  background: none;
 }
 
-.canopy-hero__media {
-  position: relative;
+.canopy-interstitial--hero.canopy-interstitial--bg-transparent .canopy-interstitial__overlay {
+  background: none;
 }
 
+@media (min-width: 40rem) {
+  .canopy-interstitial__body {
+    padding-inline: 2.75rem;
+  }
+  .canopy-interstitial__headline {
+    font-size: 3rem;
+  }
+  .canopy-interstitial__description {
+    font-size: 1.0625rem;
+  }
+}
+@media (min-width: 64rem) {
+  .canopy-interstitial__body {
+    padding-inline: 4rem;
+  }
+}
 .canopy-search-form-shell {
   --search-form-label-padding-x: 0.75rem;
   --search-form-label-padding-y: 0.625rem;

package/ui/theme.js

@@ -36,7 +36,10 @@ function loadSassVariableTokens() {
     }
     return {map: vars, css};
   } catch (error) {
-    debugLog("failed to compile Sass variables", error && error.message ? error.message : error);
+    debugLog(
+      "failed to compile Sass variables",
+      error && error.message ? error.message : error
+    );
     return {map: {}, css: ""};
   }
 }
@@ -126,6 +129,26 @@ function darkenHex(hex, amount = 0.15) {
   return `#${toHex(r * factor)}${toHex(g * factor)}${toHex(b * factor)}`;
 }
 
+function lightenHex(hex, amount = 0.15) {
+  if (!hex) return hex;
+  const normalized = hex.replace("#", "");
+  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex;
+  const num = parseInt(normalized, 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+  const toHex = (value) => clamp(value).toString(16).padStart(2, "0");
+  const adjust = (value) => value + (255 - value) * amount;
+  return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
+}
+
+function normalizeDarkenAmount(raw) {
+  const value = Number(raw);
+  if (!Number.isFinite(value)) return null;
+  return Math.min(0.95, Math.max(0, value));
+}
+
 function toTailwindScale(name, options = {}) {
   if (!name || !AVAILABLE.has(name)) return null;
   const appearance = normalizeAppearance(options.appearance);
@@ -133,6 +156,7 @@ function toTailwindScale(name, options = {}) {
   if (!palette) return null;
   const prefix = name;
   const scale = {};
+  const darken900Amount = normalizeDarkenAmount(options.darken900Amount);
   for (const lvl of LEVELS) {
     const radixStep = STEP_MAP[lvl];
     const key = `${prefix}${radixStep}`;
@@ -142,7 +166,11 @@ function toTailwindScale(name, options = {}) {
   }
   const darkestKey = `${prefix}${STEP_MAP["900"]}`;
   if (scale["800"] && palette[darkestKey]) {
-    scale["900"] = darkenHex(palette[darkestKey], 0.15);
+    const amount = darken900Amount != null ? darken900Amount : 0.25;
+    scale["900"] =
+      appearance === "dark"
+        ? lightenHex(palette[darkestKey], amount)
+        : darkenHex(palette[darkestKey], amount);
   }
   return scale;
 }
@@ -226,17 +254,25 @@ function loadCanopyTheme(options = {}) {
   }
 
   let grayName = normalizePaletteName(grayRequested);
-  let grayScale = grayName ? toTailwindScale(grayName, {appearance}) : null;
+  let grayScale = grayName
+    ? toTailwindScale(grayName, {appearance, darken900Amount: 0.4})
+    : null;
   let grayFallback = false;
   if (!grayScale) {
     grayFallback = true;
     grayName = DEFAULT_GRAY;
-    grayScale = toTailwindScale(DEFAULT_GRAY, {appearance});
+    grayScale = toTailwindScale(DEFAULT_GRAY, {
+      appearance,
+      darken900Amount: 0.4,
+    });
   }
 
   const sassTokens = loadSassVariableTokens();
   const dynamicVars = buildVariablesMap(accentScale, grayScale, {appearance});
-  const mergedVars = {...(sassTokens && sassTokens.map ? sassTokens.map : {}), ...dynamicVars};
+  const mergedVars = {
+    ...(sassTokens && sassTokens.map ? sassTokens.map : {}),
+    ...dynamicVars,
+  };
   const css = variablesToCss(mergedVars);
   const sassConfig = buildSassConfig(accentScale, grayScale);
 

package/lib/build/verify.js

@@ -1,60 +0,0 @@
-const { fs, path, OUT_DIR } = require('../common');
-const { logLine } = require('./log');
-
-function readFileSafe(p) {
-  try { return fs.readFileSync(p, 'utf8'); } catch (_) { return ''; }
-}
-
-function hasHtmlFiles(dir) {
-  let count = 0;
-  if (!fs.existsSync(dir)) return 0;
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  for (const e of entries) {
-    const p = path.join(dir, e.name);
-    if (e.isDirectory()) count += hasHtmlFiles(p);
-    else if (e.isFile() && p.toLowerCase().endsWith('.html')) count++;
-  }
-  return count;
-}
-
-function verifyHomepageElements(outDir) {
-  const idx = path.join(outDir, 'index.html');
-  const html = readFileSafe(idx);
-  const okHero = /class=\"[^\"]*canopy-hero/.test(html) || /<div[^>]+canopy-hero/.test(html);
-  const okSearchForm = /data-canopy-search-form=/.test(html);
-  const okSearchFormTrigger = /data-canopy-search-form-trigger/.test(html);
-  const okSearchFormScriptRef = /<script[^>]+canopy-search-form\.js/.test(html);
-  return { okHero, okSearchForm, okSearchFormTrigger, okSearchFormScriptRef, htmlPath: idx };
-}
-
-function verifyBuildOutput(options = {}) {
-  const outDir = path.resolve(options.outDir || OUT_DIR);
-  logLine("\nVerify build output", "magenta", { bright: true, underscore: true });
-  const total = hasHtmlFiles(outDir);
-  const okAny = total > 0;
-  const indexPath = path.join(outDir, 'index.html');
-  const hasIndex = fs.existsSync(indexPath) && fs.statSync(indexPath).size > 0;
-  const { okHero, okSearchForm, okSearchFormTrigger, okSearchFormScriptRef } = verifyHomepageElements(outDir);
-
-  const ck = (label, ok, extra) => {
-    const status = ok ? '✓' : '✗';
-    logLine(`${status} ${label}${extra ? ` ${extra}` : ''}`, ok ? 'green' : 'red');
-  };
-
-  ck('HTML pages exist', okAny, okAny ? `(${total})` : '');
-  ck('homepage exists', hasIndex, hasIndex ? `(${indexPath})` : '');
-  ck('homepage: Hero present', okHero);
-  ck('homepage: Search form present', okSearchForm);
-  ck('homepage: Search form trigger present', okSearchFormTrigger);
-  ck('homepage: Search form script referenced', okSearchFormScriptRef);
-
-  // Do not fail build on missing SSR trigger; the client runtime injects a default.
-  const ok = okAny && hasIndex && okHero && okSearchForm && okSearchFormScriptRef;
-  if (!ok) {
-    const err = new Error('Build verification failed');
-    err.outDir = outDir;
-    throw err;
-  }
-}
-
-module.exports = { verifyBuildOutput };

package/ui/styles/components/_hero.scss

@@ -1,21 +0,0 @@
-.canopy-hero {
-    padding: 0;
-    margin: 0;
-
-    figcaption {
-        margin: 0;
-        padding: 1rem 0 0;
-        font-size: 1rem;
-        text-align: right;
-    }
-}
-
-.canopy-hero-link {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-}
-
-.canopy-hero__media {
-    position: relative;
-}