@canopy-iiif/app 1.4.12 → 1.4.13

package/package.json

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

package/ui/dist/server.mjs

@@ -3946,12 +3946,12 @@ function DocsCodeBlock(props = {}) {
     fontWeight: 700,
     background: "var(--color-accent-100)",
     borderBottom: "1px solid var(--color-accent-200)",
-    color: "var(--color-accent-900)"
+    color: "var(--color-gray-900)"
   };
   const preStyle = {
     margin: 0,
     background: "var(--color-accent-100)",
-    color: "var(--color-accent-700)",
+    color: "var(--color-accent-800)",
     lineHeight: 1.55,
     padding: "1rem 0",
     overflowX: "auto"
@@ -3992,12 +3992,11 @@ function DocsCodeBlock(props = {}) {
           type: "button",
           onClick: handleCopy,
           style: {
-            border: "1px solid var(--color-accent-300, #bfdbfe)",
+            border: "1px solid var(--color-accent-200, )",
             borderRadius: "6px",
             padding: "0.2rem 0.55rem",
             fontSize: "0.7rem",
             fontWeight: 500,
-            background: "color-mix(in srgb, var(--color-accent-100, #e0f2ff) 55%, #ffffff)",
             color: "var(--color-accent-700, #1d4ed8)",
             cursor: "pointer"
           }
@@ -7904,108 +7903,6 @@ function normalizeAppearance(raw) {
   if (!raw) return "light";
   return String(raw).trim().toLowerCase() === "dark" ? "dark" : "light";
 }
-function darkenHex(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 factor = 1 - amount;
-  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 adjustSaturation(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);
-  let r = (num >> 16 & 255) / 255;
-  let g = (num >> 8 & 255) / 255;
-  let b = (num & 255) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      default:
-        h = (r - g) / d + 4;
-    }
-    h /= 6;
-  }
-  const delta = Number(amount);
-  if (!Number.isFinite(delta) || delta === 0) return hex;
-  s = Math.max(0, Math.min(1, s + delta));
-  const hueToRgb = (p, q, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p + (q - p) * 6 * t;
-    if (t < 1 / 2) return q;
-    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-  };
-  let rOut;
-  let gOut;
-  let bOut;
-  if (s === 0) {
-    rOut = gOut = bOut = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    rOut = hueToRgb(p, q, h + 1 / 3);
-    gOut = hueToRgb(p, q, h);
-    bOut = hueToRgb(p, q, h - 1 / 3);
-  }
-  const toHex = (value) => Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, "0");
-  return `#${toHex(rOut)}${toHex(gOut)}${toHex(bOut)}`;
-}
-function mixHexColors(colorA, colorB, amount = 0.5) {
-  const normalize = (hex) => hex && /^[0-9a-fA-F]{6}$/.test(hex.replace("#", "")) ? hex.replace("#", "") : null;
-  const first = normalize(colorA);
-  const second = normalize(colorB);
-  if (!first || !second) return colorA || colorB || null;
-  const a = parseInt(first, 16);
-  const b = parseInt(second, 16);
-  const clampAmount = Math.max(0, Math.min(1, Number(amount) || 0));
-  const mixChannel = (shift) => Math.round(
-    (a >> shift & 255) + ((b >> shift & 255) - (a >> shift & 255)) * clampAmount
-  );
-  const toHex = (value) => value.toString(16).padStart(2, "0");
-  const r = mixChannel(16);
-  const g = mixChannel(8);
-  const bl = mixChannel(0);
-  return `#${toHex(r)}${toHex(g)}${toHex(bl)}`;
-}
-function normalizeDarkenAmount(raw) {
-  const value = Number(raw);
-  if (!Number.isFinite(value)) return null;
-  return Math.min(0.95, Math.max(0, value));
-}
 function resolveRadixPalette(name, appearance) {
   if (!name || !AVAILABLE.has(name)) return null;
   const paletteKey = appearance === "dark" ? `${name}Dark` : name;
@@ -8020,7 +7917,6 @@ function toTailwindScale(name, options = {}) {
   const palette = resolveRadixPalette(name, appearance);
   if (!palette) return null;
   const scale = {};
-  const darken900Amount = normalizeDarkenAmount(options.darken900Amount);
   for (const lvl of LEVELS) {
     const radixStep = STEP_MAP[lvl];
     const key = `${name}${radixStep}`;
@@ -8028,20 +7924,6 @@ function toTailwindScale(name, options = {}) {
     if (!value) return null;
     scale[lvl] = value;
   }
-  const saturate700 = options.saturate700 !== false;
-  if (scale["700"]) {
-    let adjusted = appearance === "dark" ? lightenHex(scale["700"], 0.15) : darkenHex(scale["700"], 0.15);
-    if (saturate700) adjusted = adjustSaturation(adjusted, 0.15);
-    scale["700"] = adjusted;
-  }
-  const darkestKey = `${name}${STEP_MAP["900"]}`;
-  if (scale["800"] && palette[darkestKey]) {
-    const amount = darken900Amount != null ? darken900Amount : 0.25;
-    scale["900"] = appearance === "dark" ? lightenHex(palette[darkestKey], amount) : darkenHex(palette[darkestKey], amount);
-  }
-  if (scale["800"] && scale["900"]) {
-    scale["800"] = mixHexColors(scale["800"], scale["900"], 0.65);
-  }
   return scale;
 }
 function buildPreviewData() {
@@ -8110,10 +7992,6 @@ function ThemeShowcase() {
   const styles = `
     .canopy-theme-showcase {
       margin: 2.618rem 0;
-      padding: 1.5rem;
-      border: 1px solid color-mix(in srgb, var(--color-gray-400) 40%, transparent);
-      border-radius: 0.85rem;
-      background: color-mix(in srgb, var(--color-gray-50) 78%, transparent);
     }
     .canopy-theme-showcase__appearance-buttons {
       display: inline-flex;
@@ -8228,7 +8106,8 @@ function ThemeShowcase() {
       align-items: center;
       gap: 0.35rem;
       cursor: pointer;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease background 0.2s ease, color 0.2s ease;
+      font-weight: 300;
     }
     .canopy-theme-showcase__swatch:focus-visible {
       outline: 2px solid var(--color-accent-default);
@@ -8237,6 +8116,14 @@ function ThemeShowcase() {
     .canopy-theme-showcase__swatch[data-swatch-active="true"] {
       border-color: var(--color-accent-default);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-200) 70%, transparent);
+      background: linear-gradient(135deg, var(--color-accent-50), var(--color-accent-100));
+      color: var(--color-gray-900);
+      font-weight: 400;
+    }
+    .canopy-theme-showcase__swatch[data-swatch-active="true"][data-theme-swatch-type="gray"]  {
+      border-color: var(--color-gray-default);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+      background: linear-gradient(135deg, var(--color-gray-50), var(--color-gray-100));
     }
     .canopy-theme-showcase__swatch-chip {
       width: 100%;
@@ -8244,45 +8131,56 @@ function ThemeShowcase() {
       border-radius: 0.5rem;
     }
     .canopy-theme-showcase__swatch-label {
-      font-size: 0.8333rem;
+      font-size: 0.9222rem;
       margin-top: 0.1rem;
-      font-weight: 500;
-      text-transform: capitalize;
     }
     .canopy-theme-showcase__swatch-controls { display: none; }
     .canopy-theme-showcase__clear-button { display: none; }
   `;
-  return /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React43.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem", marginBottom: "1rem" } }, /* @__PURE__ */ React43.createElement(
-    Section,
+  return /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase", "data-theme-showcase": true }, /* @__PURE__ */ React43.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React43.createElement(
+    "div",
     {
-      title: "Appearance",
-      description: "Pick the base light or dark mode for the theme preview."
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: "1rem",
+        marginBottom: "1rem"
+      }
     },
-    /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
-      const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
-      const baseClass = "canopy-theme-showcase__appearance-button";
-      const isDefault = mode === DEFAULTS.appearance;
-      const className = isDefault ? `${baseClass} is-active` : baseClass;
-      return /* @__PURE__ */ React43.createElement(
-        "button",
-        {
-          key: mode,
-          type: "button",
-          className,
-          "data-theme-appearance": mode
-        },
-        label
-      );
-    }))
+    /* @__PURE__ */ React43.createElement(
+      Section,
+      {
+        title: "Appearance",
+        description: "Pick the base light or dark mode for the theme preview."
+      },
+      /* @__PURE__ */ React43.createElement("div", { className: "canopy-theme-showcase__appearance-buttons" }, ["light", "dark"].map((mode) => {
+        const label = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`;
+        const baseClass = "canopy-theme-showcase__appearance-button";
+        const isDefault = mode === DEFAULTS.appearance;
+        const className = isDefault ? `${baseClass} is-active` : baseClass;
+        return /* @__PURE__ */ React43.createElement(
+          "button",
+          {
+            key: mode,
+            type: "button",
+            className,
+            "data-theme-appearance": mode
+          },
+          label
+        );
+      }))
+    ),
+    /* @__PURE__ */ React43.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-theme-showcase__reset",
+        "data-theme-reset": true
+      },
+      "Reset"
+    )
   ), /* @__PURE__ */ React43.createElement(
-    "button",
-    {
-      type: "button",
-      className: "canopy-theme-showcase__reset",
-      "data-theme-reset": true
-    },
-    "Reset"
-  )), /* @__PURE__ */ React43.createElement(
     Section,
     {
       title: "Color scales",
@@ -8302,14 +8200,28 @@ function ThemeShowcase() {
       title: "Accent color palette options",
       description: "Click a swatch to temporarily override the accent palette."
     },
-    /* @__PURE__ */ React43.createElement(ColorsLabeled, { colors: accentColors, type: "accent", getRadixSwatch })
+    /* @__PURE__ */ React43.createElement(
+      ColorsLabeled,
+      {
+        colors: accentColors,
+        type: "accent",
+        getRadixSwatch
+      }
+    )
   ), /* @__PURE__ */ React43.createElement(
     Section,
     {
       title: "Gray color palette options",
       description: "Click a swatch to preview the neutral ramp for surfaces and text."
     },
-    /* @__PURE__ */ React43.createElement(ColorsLabeled, { colors: grayColors, type: "gray", getRadixSwatch })
+    /* @__PURE__ */ React43.createElement(
+      ColorsLabeled,
+      {
+        colors: grayColors,
+        type: "gray",
+        getRadixSwatch
+      }
+    )
   ), /* @__PURE__ */ React43.createElement(
     "script",
     {