@canopy-iiif/app 1.10.3 → 1.10.5

package/package.json

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

package/ui/dist/index.mjs

@@ -4172,7 +4172,7 @@ var init_rgb_hex = __esm({
 });
 
 // ../../node_modules/@allmaps/stdlib/dist/color.js
-function hexToRgb(hex) {
+function hexToRgb2(hex) {
   return hexRgb(hex, { format: "array" }).slice(0, 3);
 }
 function hexToOpaqueRgba(hex) {
@@ -4181,7 +4181,7 @@ function hexToOpaqueRgba(hex) {
   return color;
 }
 function hexToFractionalRgb(hex) {
-  return hexToRgb(hex).map((c) => c / 255);
+  return hexToRgb2(hex).map((c) => c / 255);
 }
 function hexToFractionalOpaqueRgba(hex) {
   return hexToOpaqueRgba(hex).map((c) => c / 255);
@@ -46543,6 +46543,214 @@ function ReferencedManifestCard({
   );
 }
 
+// ui/src/utils/keyLegend.js
+var DEFAULT_ACCENT_HEX = "#2563eb";
+function normalizeHex(value) {
+  if (!value) return "";
+  let input = String(value).trim();
+  if (!input) return "";
+  if (input.startsWith("var(")) return input;
+  if (/^#[0-9a-f]{3}$/i.test(input)) {
+    return "#" + input.replace(/^#/, "").split("").map((ch) => ch + ch).join("").toLowerCase();
+  }
+  if (/^#[0-9a-f]{6}$/i.test(input)) return input.toLowerCase();
+  return "";
+}
+function hexToRgb(hex) {
+  if (!hex) return null;
+  const normalized = normalizeHex(hex);
+  if (!normalized || normalized.startsWith("var(")) return null;
+  const int = parseInt(normalized.slice(1), 16);
+  if (Number.isNaN(int)) return null;
+  return {
+    r: int >> 16 & 255,
+    g: int >> 8 & 255,
+    b: int & 255
+  };
+}
+function rgbToHsl({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max2 = Math.max(rn, gn, bn);
+  const min2 = Math.min(rn, gn, bn);
+  let h = 0;
+  let s = 0;
+  const l = (max2 + min2) / 2;
+  const delta = max2 - min2;
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max2 - min2) : delta / (max2 + min2);
+    switch (max2) {
+      case rn:
+        h = (gn - bn) / delta + (gn < bn ? 6 : 0);
+        break;
+      case gn:
+        h = (bn - rn) / delta + 2;
+        break;
+      case bn:
+        h = (rn - gn) / delta + 4;
+        break;
+      default:
+        break;
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToHex(h, s, l) {
+  const sat = s / 100;
+  const light = l / 100;
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const hh = h / 60;
+  const x = c * (1 - Math.abs(hh % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hh >= 0 && hh < 1) {
+    r = c;
+    g = x;
+  } else if (hh >= 1 && hh < 2) {
+    r = x;
+    g = c;
+  } else if (hh >= 2 && hh < 3) {
+    g = c;
+    b = x;
+  } else if (hh >= 3 && hh < 4) {
+    g = x;
+    b = c;
+  } else if (hh >= 4 && hh < 5) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const m = light - c / 2;
+  const rn = Math.round((r + m) * 255);
+  const gn = Math.round((g + m) * 255);
+  const bn = Math.round((b + m) * 255);
+  const toHex = (value) => value.toString(16).padStart(2, "0");
+  return `#${toHex(rn)}${toHex(gn)}${toHex(bn)}`;
+}
+function rotateHue(baseHue, degrees) {
+  return (baseHue + degrees + 360) % 360;
+}
+function resolveAccentHex() {
+  let value = "";
+  try {
+    if (typeof window !== "undefined") {
+      const styles = window.getComputedStyle(document.documentElement);
+      value = styles.getPropertyValue("--color-accent-default");
+    }
+  } catch (_) {
+  }
+  const normalized = normalizeHex(value);
+  return normalized && !normalized.startsWith("var(") ? normalized : DEFAULT_ACCENT_HEX;
+}
+function generateLegendColors(count) {
+  if (!count || count <= 0) return [];
+  const colors = [];
+  const baseHex = resolveAccentHex();
+  const accentVar = `var(--color-accent-default, ${baseHex})`;
+  colors.push(accentVar);
+  if (count === 1) return colors;
+  const rgb = hexToRgb(baseHex);
+  const baseHsl = rgb ? rgbToHsl(rgb) : { h: 220, s: 85, l: 56 };
+  const rotations = [180, 120, -120, 60, -60, 90, -90, 30, -30];
+  const needed = count - 1;
+  for (let i = 0; i < needed; i += 1) {
+    const angle2 = rotations[i] != null ? rotations[i] : 360 / (needed + 1) * (i + 1);
+    const rotatedHue = rotateHue(baseHsl.h, angle2);
+    const hex = hslToHex(rotatedHue, baseHsl.s, baseHsl.l);
+    colors.push(hex);
+  }
+  return colors;
+}
+function createLookupStore() {
+  try {
+    if (typeof globalThis !== "undefined" && typeof globalThis.Map === "function") {
+      return new globalThis.Map();
+    }
+  } catch (_) {
+  }
+  try {
+    if (typeof window !== "undefined" && typeof window.Map === "function") {
+      return new window.Map();
+    }
+  } catch (_) {
+  }
+  const store = /* @__PURE__ */ Object.create(null);
+  return {
+    has(key) {
+      return Object.prototype.hasOwnProperty.call(store, key);
+    },
+    get(key) {
+      return store[key];
+    },
+    set(key, value) {
+      store[key] = value;
+      return this;
+    }
+  };
+}
+function normalizeText(value) {
+  if (value == null) return "";
+  try {
+    return String(value).trim();
+  } catch (_) {
+    return "";
+  }
+}
+function normalizeKeyValue(entry) {
+  var _a2, _b, _c;
+  if (!entry) return "";
+  const value = (_c = (_b = (_a2 = entry.id) != null ? _a2 : entry.value) != null ? _b : entry.key) != null ? _c : entry.slug;
+  return normalizeText(value);
+}
+function normalizeKeyLabel(entry) {
+  var _a2, _b, _c;
+  if (!entry) return "";
+  const label = (_c = (_b = (_a2 = entry.label) != null ? _a2 : entry.name) != null ? _b : entry.title) != null ? _c : entry.text;
+  return normalizeText(label);
+}
+function normalizeKeyLegendEntries(entries, options = {}) {
+  if (!Array.isArray(entries)) return [];
+  const resolveVariant = typeof options.resolveVariant === "function" ? options.resolveVariant : null;
+  const variantProp = options.variantProp || "variant";
+  return entries.map((entry) => {
+    if (!entry) return null;
+    const keyValue = normalizeKeyValue(entry);
+    const label = normalizeKeyLabel(entry);
+    if (!keyValue || !label) return null;
+    const normalized = {
+      keyValue,
+      label
+    };
+    if (resolveVariant) {
+      const variant = resolveVariant(entry);
+      if (variant) normalized[variantProp] = variant;
+    }
+    return normalized;
+  }).filter(Boolean);
+}
+function buildKeyLegend(entries) {
+  if (!Array.isArray(entries) || !entries.length) {
+    return { groups: [], lookup: null };
+  }
+  const lookup = createLookupStore();
+  const palette = generateLegendColors(entries.length);
+  const groups = entries.map((entry, index) => {
+    const color = palette[index] || palette[0] || DEFAULT_ACCENT_HEX;
+    const group = {
+      ...entry,
+      color
+    };
+    lookup.set(entry.keyValue, group);
+    return group;
+  });
+  return { groups, lookup };
+}
+
 // ui/src/content/timeline/Timeline.jsx
 var DAY_MS = 24 * 60 * 60 * 1e3;
 var DEFAULT_TRACK_HEIGHT = 640;
@@ -46680,6 +46888,7 @@ function sanitizePoints(points) {
         label: meta.label || "",
         timestamp: Number.isFinite(timestamp) ? timestamp : null
       },
+      keyValue: point2.keyValue ? String(point2.keyValue).trim() : "",
       manifests,
       resources
     };
@@ -46710,7 +46919,7 @@ function resolveTrackHeight(height, pointCount) {
   }
   return fallback;
 }
-function TimelineConnector({ side, isActive, highlight }) {
+function TimelineConnector({ side, isActive, highlight, color }) {
   const connectorClasses = [
     "canopy-timeline__connector",
     side === "left" ? "canopy-timeline__connector--left" : "canopy-timeline__connector--right"
@@ -46719,7 +46928,8 @@ function TimelineConnector({ side, isActive, highlight }) {
     "canopy-timeline__connector-dot",
     highlight || isActive ? "is-active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React41.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React41.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("span", { className: dotClasses }), /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__connector-line" })));
+  const connectorStyle = color ? { "--canopy-timeline-point-color": color } : void 0;
+  return /* @__PURE__ */ React41.createElement("span", { className: connectorClasses, "aria-hidden": "true", style: connectorStyle }, side === "left" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React41.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("span", { className: dotClasses }), /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__connector-line" })));
 }
 function renderResourceSection(point2) {
   if (!point2) return null;
@@ -46749,6 +46959,9 @@ function Timeline({
   align = ALIGN_OPTIONS.CENTER,
   steps = null,
   points: pointsProp,
+  keyConfig = [],
+  timelineKey = [],
+  legend = [],
   __canopyTimeline: payload = null,
   ...rest
 }) {
@@ -46762,6 +46975,35 @@ function Timeline({
     () => sanitizePoints(rawPoints),
     [rawPoints]
   );
+  const resolvedKeyInput = React41.useMemo(() => {
+    if (Array.isArray(keyConfig) && keyConfig.length) return keyConfig;
+    if (Array.isArray(timelineKey) && timelineKey.length) return timelineKey;
+    if (Array.isArray(legend) && legend.length) return legend;
+    return [];
+  }, [keyConfig, timelineKey, legend]);
+  const normalizedLegendConfig = React41.useMemo(
+    () => normalizeKeyLegendEntries(resolvedKeyInput),
+    [resolvedKeyInput]
+  );
+  const timelineKeyData = React41.useMemo(
+    () => buildKeyLegend(normalizedLegendConfig),
+    [normalizedLegendConfig]
+  );
+  const timelineKeyGroups = timelineKeyData.groups;
+  const timelineKeyLookup = timelineKeyData.lookup;
+  const getLegendMeta = React41.useCallback(
+    (value) => {
+      if (!value || !timelineKeyLookup || typeof timelineKeyLookup.get !== "function") {
+        return null;
+      }
+      try {
+        return timelineKeyLookup.get(value) || null;
+      } catch (_) {
+        return null;
+      }
+    },
+    [timelineKeyLookup]
+  );
   const localeValue = payload && payload.locale ? payload.locale : localeProp;
   const baseLocale = React41.useMemo(
     () => createLocale(localeValue),
@@ -46792,13 +47034,22 @@ function Timeline({
       const fallbackProgress = sanitizedPoints.length > 1 ? index / (sanitizedPoints.length - 1) : 0;
       const progress = useUniformSpacing ? fallbackProgress : Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
       const side = enforcedSide || point2.side || (index % 2 === 0 ? "left" : "right");
+      const keyMeta = point2.keyValue ? getLegendMeta(point2.keyValue) : null;
       return {
         ...point2,
         progress,
-        side
+        side,
+        keyMeta
       };
     });
-  }, [sanitizedPoints, spanStart, span, useUniformSpacing, enforcedSide]);
+  }, [
+    sanitizedPoints,
+    spanStart,
+    span,
+    useUniformSpacing,
+    enforcedSide,
+    getLegendMeta
+  ]);
   const [activeId, setActiveId] = React41.useState(
     () => getActivePointId(pointsWithPosition)
   );
@@ -46851,6 +47102,7 @@ function Timeline({
     className
   ].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
+  const hasKeyLegend = timelineKeyGroups.length > 0;
   function renderPointEntry(point2) {
     if (!point2) return null;
     const wrapperClasses = [
@@ -46863,12 +47115,14 @@ function Timeline({
       point2.id === activeId ? "is-active" : "",
       point2.highlight ? "is-highlighted" : ""
     ].filter(Boolean).join(" ");
+    const pointColor = point2.keyMeta && point2.keyMeta.color ? point2.keyMeta.color : null;
     const connector = /* @__PURE__ */ React41.createElement(
       TimelineConnector,
       {
         side: point2.side,
         isActive: point2.id === activeId,
-        highlight: point2.highlight
+        highlight: point2.highlight,
+        color: pointColor
       }
     );
     const body = /* @__PURE__ */ React41.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__point-date" }, point2.meta.label), /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__point-title" }, point2.title), point2.summary ? /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__point-summary" }, point2.summary) : null);
@@ -46892,12 +47146,24 @@ function Timeline({
     const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point2) => point2.id === activeId);
+    const groupKeyMeta = (() => {
+      if (!entry.points || !entry.points.length) return null;
+      const firstPoint = entry.points[0];
+      if (!firstPoint || !firstPoint.keyValue) return null;
+      const sameKey = entry.points.every(
+        (point2) => point2 && point2.keyValue === firstPoint.keyValue
+      );
+      if (!sameKey) return null;
+      return firstPoint.keyMeta || getLegendMeta(firstPoint.keyValue);
+    })();
+    const groupColor = groupKeyMeta && groupKeyMeta.color ? groupKeyMeta.color : null;
     const connector = /* @__PURE__ */ React41.createElement(
       TimelineConnector,
       {
         side: entry.side,
         isActive: hasActivePoint,
-        highlight: hasActivePoint
+        highlight: hasActivePoint,
+        color: groupColor
       }
     );
     const groupClasses = [
@@ -46955,7 +47221,22 @@ function Timeline({
       if (entry.type === "group") return renderGroupEntry(entry);
       return renderPointEntry(entry.point);
     })
-  )));
+  )), hasKeyLegend ? /* @__PURE__ */ React41.createElement("div", { className: "canopy-timeline__key", "aria-label": "Timeline key" }, /* @__PURE__ */ React41.createElement("ul", { className: "canopy-timeline__key-list" }, timelineKeyGroups.map((group) => /* @__PURE__ */ React41.createElement(
+    "li",
+    {
+      key: group.keyValue || group.label,
+      className: "canopy-timeline__key-item"
+    },
+    /* @__PURE__ */ React41.createElement(
+      "span",
+      {
+        className: "canopy-timeline__key-dot",
+        "aria-hidden": "true",
+        style: { backgroundColor: group.color || void 0 }
+      }
+    ),
+    /* @__PURE__ */ React41.createElement("span", { className: "canopy-timeline__key-label" }, group.label)
+  )))) : null);
 }
 function renderSteps(stepSize, range) {
   if (!Number.isFinite(stepSize) || stepSize <= 0 || !range) return null;
@@ -47034,7 +47315,6 @@ var TRANSPARENT_TILE_URL = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAA
 var CUSTOM_MARKER_SIZE = 40;
 var CUSTOM_MARKER_RADIUS = CUSTOM_MARKER_SIZE / 2;
 var CUSTOM_MARKER_POPUP_OFFSET = -CUSTOM_MARKER_RADIUS + 6;
-var DEFAULT_ACCENT_HEX = "#2563eb";
 function resolveGlobalLeaflet() {
   try {
     if (typeof globalThis !== "undefined" && globalThis.L) return globalThis.L;
@@ -47167,126 +47447,6 @@ function createMarkerMap() {
     }
   };
 }
-function normalizeHex(value) {
-  if (!value) return "";
-  let input = String(value).trim();
-  if (!input) return "";
-  if (input.startsWith("var(")) return input;
-  if (/^#[0-9a-f]{3}$/i.test(input)) {
-    return input.replace(/^#/, "").split("").map((ch) => ch + ch).join("").replace(/^/, "#");
-  }
-  if (/^#[0-9a-f]{6}$/i.test(input)) return input;
-  return "";
-}
-function hexToRgb2(hex) {
-  if (!hex) return null;
-  const normalized = normalizeHex(hex);
-  if (!normalized) return null;
-  const int = parseInt(normalized.slice(1), 16);
-  return {
-    r: int >> 16 & 255,
-    g: int >> 8 & 255,
-    b: int & 255
-  };
-}
-function rgbToHsl({ r, g, b }) {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const max2 = Math.max(rn, gn, bn);
-  const min2 = Math.min(rn, gn, bn);
-  let h = 0;
-  let s = 0;
-  const l = (max2 + min2) / 2;
-  const delta = max2 - min2;
-  if (delta !== 0) {
-    s = l > 0.5 ? delta / (2 - max2 - min2) : delta / (max2 + min2);
-    switch (max2) {
-      case rn:
-        h = (gn - bn) / delta + (gn < bn ? 6 : 0);
-        break;
-      case gn:
-        h = (bn - rn) / delta + 2;
-        break;
-      case bn:
-        h = (rn - gn) / delta + 4;
-        break;
-      default:
-        break;
-    }
-    h /= 6;
-  }
-  return { h: h * 360, s: s * 100, l: l * 100 };
-}
-function hslToHex(h, s, l) {
-  const sat = s / 100;
-  const light = l / 100;
-  const c = (1 - Math.abs(2 * light - 1)) * sat;
-  const hh = h / 60;
-  const x = c * (1 - Math.abs(hh % 2 - 1));
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (hh >= 0 && hh < 1) {
-    r = c;
-    g = x;
-  } else if (hh >= 1 && hh < 2) {
-    r = x;
-    g = c;
-  } else if (hh >= 2 && hh < 3) {
-    g = c;
-    b = x;
-  } else if (hh >= 3 && hh < 4) {
-    g = x;
-    b = c;
-  } else if (hh >= 4 && hh < 5) {
-    r = x;
-    b = c;
-  } else {
-    r = c;
-    b = x;
-  }
-  const m = light - c / 2;
-  const rn = Math.round((r + m) * 255);
-  const gn = Math.round((g + m) * 255);
-  const bn = Math.round((b + m) * 255);
-  const toHex = (value) => value.toString(16).padStart(2, "0");
-  return `#${toHex(rn)}${toHex(gn)}${toHex(bn)}`;
-}
-function rotateHue(baseHue, degrees) {
-  return (baseHue + degrees + 360) % 360;
-}
-function resolveAccentHex() {
-  let value = "";
-  try {
-    if (typeof window !== "undefined") {
-      const styles = window.getComputedStyle(document.documentElement);
-      value = styles.getPropertyValue("--color-accent-default");
-    }
-  } catch (_) {
-  }
-  const normalized = normalizeHex(value);
-  return normalized || DEFAULT_ACCENT_HEX;
-}
-function generateLegendColors(count) {
-  if (!count || count <= 0) return [];
-  const colors = [];
-  const baseHex = resolveAccentHex();
-  const accentVar = `var(--color-accent-default, ${baseHex})`;
-  colors.push(accentVar);
-  if (count === 1) return colors;
-  const rgb = hexToRgb2(baseHex);
-  const baseHsl = rgb ? rgbToHsl(rgb) : { h: 220, s: 85, l: 56 };
-  const rotations = [180, 120, -120, 60, -60, 90, -90, 30, -30];
-  const needed = count - 1;
-  for (let i = 0; i < needed; i += 1) {
-    const angle2 = rotations[i] != null ? rotations[i] : 360 / (needed + 1) * (i + 1);
-    const rotatedHue = rotateHue(baseHsl.h, angle2);
-    const hex = hslToHex(rotatedHue, baseHsl.s, baseHsl.l);
-    colors.push(hex);
-  }
-  return colors;
-}
 function readIiifType(resource) {
   if (!resource) return "";
   const raw = resource.type || resource["@type"];
@@ -47816,43 +47976,19 @@ function Map3({
     if (Array.isArray(legend) && legend.length) return legend;
     return [];
   }, [keyConfig, mapKey, legend]);
-  const normalizedLegendConfig = React42.useMemo(() => {
-    if (!Array.isArray(resolvedKeyInput) || !resolvedKeyInput.length) return [];
-    return resolvedKeyInput.map((entry) => {
-      if (!entry) return null;
-      const value = entry.id || entry.value || entry.key;
-      const label = entry.label || entry.name || entry.title;
-      if (!value || !label) return null;
-      return {
-        keyValue: String(value).trim(),
-        label: String(label).trim(),
-        markerType: normalizeMarkerVariant(
-          entry.markerType || entry.type || entry.variant
-        )
-      };
-    }).filter(Boolean);
-  }, [resolvedKeyInput]);
-  const markerKeyData = React42.useMemo(() => {
-    if (!normalizedLegendConfig.length) return { groups: [], metaMap: null };
-    const metaMap = createMarkerMap();
-    const palette = generateLegendColors(normalizedLegendConfig.length);
-    const groups = normalizedLegendConfig.map((entry, index) => {
-      const color = palette[index] || palette[0] || DEFAULT_ACCENT_HEX;
-      metaMap.set(entry.keyValue, {
-        color,
-        markerType: entry.markerType || null
-      });
-      return {
-        keyValue: entry.keyValue,
-        label: entry.label,
-        color,
-        markerType: entry.markerType || null
-      };
-    });
-    return { groups, metaMap };
-  }, [normalizedLegendConfig]);
+  const normalizedLegendConfig = React42.useMemo(
+    () => normalizeKeyLegendEntries(resolvedKeyInput, {
+      resolveVariant: (entry) => normalizeMarkerVariant(entry.markerType || entry.type || entry.variant),
+      variantProp: "markerType"
+    }),
+    [resolvedKeyInput]
+  );
+  const markerKeyData = React42.useMemo(
+    () => buildKeyLegend(normalizedLegendConfig),
+    [normalizedLegendConfig]
+  );
   const markerKeyGroups = markerKeyData.groups;
-  const markerKeyMetaMap = markerKeyData.metaMap;
+  const markerKeyMetaMap = markerKeyData.lookup;
   const clusterOptions = React42.useMemo(
     () => buildClusterOptions(leafletLib, typeof maxClusterRadius === "number" ? maxClusterRadius : null),
     [leafletLib, maxClusterRadius]
@@ -48472,6 +48608,55 @@ var INLINE_SCRIPT = `(() => {
     emitModalState(previous, 'close');
   }
 
+  function closeModalFromBackground(modal) {
+    if (!modal) return;
+    const closeId = modal.getAttribute('data-canopy-gallery-close');
+    const targetHash = closeId ? '#' + closeId : '';
+    if (targetHash) {
+      if (window.location.hash === targetHash) {
+        try {
+          window.location.hash = targetHash;
+        } catch (_) {}
+      } else {
+        window.location.hash = targetHash;
+      }
+    } else {
+      window.location.hash = '';
+    }
+  }
+
+  function shouldCloseFromBackground(event, modal) {
+    if (!event || !modal) return false;
+    const target = event.target;
+    if (!target) return false;
+    const panel = modal.querySelector('.canopy-gallery__modal-panel');
+    if (panel && panel.contains(target)) return false;
+    const actions = modal.querySelector('.canopy-gallery__modal-actions');
+    if (actions && actions.contains(target)) return false;
+    if (target === modal) return true;
+    const scrim = modal.querySelector('.canopy-gallery__modal-scrim');
+    if (scrim && scrim.contains(target)) return true;
+    return false;
+  }
+
+  function bindModalDismissal(modal) {
+    if (!modal || modal.getAttribute('data-canopy-gallery-dismiss-bound') === '1') {
+      return;
+    }
+    modal.setAttribute('data-canopy-gallery-dismiss-bound', '1');
+    modal.addEventListener('click', function (event) {
+      if (!shouldCloseFromBackground(event, modal)) return;
+      event.preventDefault();
+      closeModalFromBackground(modal);
+    });
+  }
+
+  function bindModalDismissals() {
+    const modals = document.querySelectorAll('[data-canopy-gallery-modal]');
+    if (!modals || !modals.length) return;
+    Array.prototype.forEach.call(modals, bindModalDismissal);
+  }
+
   function modalFromHash() {
     const id = window.location.hash.replace(/^#/, '');
     if (!id) return null;
@@ -48755,10 +48940,12 @@ var INLINE_SCRIPT = `(() => {
   window.addEventListener('pageshow', function () {
     syncFromHash();
     bindGalleryNavs();
+    bindModalDismissals();
     refreshGalleryNavs({reveal: true});
   });
   syncFromHash();
   bindGalleryNavs();
+  bindModalDismissals();
   refreshGalleryNavs({reveal: true});
 })()`;
 var galleryInstanceCounter = 0;
@@ -49126,7 +49313,7 @@ function GalleryItem() {
 GalleryItem.displayName = "GalleryItem";
 function normalizePopupSize(value) {
   const normalized = String(value || "full").toLowerCase();
-  return normalized === "medium" ? "medium" : "full";
+  return normalized === "window" ? "window" : "full";
 }
 function Gallery({
   children,
@@ -49150,7 +49337,7 @@ function Gallery({
   const orderedItems = orderMode === "random" ? shuffleItems(items) : items;
   const rootClassName = [
     "canopy-gallery",
-    popupMode === "medium" ? "canopy-gallery--popup-medium" : "canopy-gallery--popup-full",
+    popupMode === "window" ? "canopy-gallery--popup-window" : "canopy-gallery--popup-full",
     className
   ].filter(Boolean).join(" ");
   const navGroupName = `${galleryId}-nav`;