@canopy-iiif/app 1.10.4 → 1.10.5

package/ui/dist/server.mjs

@@ -4692,6 +4692,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 max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  const delta = max - min;
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      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 angle = rotations[i] != null ? rotations[i] : 360 / (needed + 1) * (i + 1);
+    const rotatedHue = rotateHue(baseHsl.h, angle);
+    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 _a, _b, _c;
+  if (!entry) return "";
+  const value = (_c = (_b = (_a = entry.id) != null ? _a : entry.value) != null ? _b : entry.key) != null ? _c : entry.slug;
+  return normalizeText(value);
+}
+function normalizeKeyLabel(entry) {
+  var _a, _b, _c;
+  if (!entry) return "";
+  const label = (_c = (_b = (_a = entry.label) != null ? _a : 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;
@@ -4829,6 +5037,7 @@ function sanitizePoints(points) {
         label: meta.label || "",
         timestamp: Number.isFinite(timestamp) ? timestamp : null
       },
+      keyValue: point.keyValue ? String(point.keyValue).trim() : "",
       manifests,
       resources
     };
@@ -4859,7 +5068,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"
@@ -4868,7 +5077,8 @@ function TimelineConnector({ side, isActive, highlight }) {
     "canopy-timeline__connector-dot",
     highlight || isActive ? "is-active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React37.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React37.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("span", { className: dotClasses }), /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__connector-line" })));
+  const connectorStyle = color ? { "--canopy-timeline-point-color": color } : void 0;
+  return /* @__PURE__ */ React37.createElement("span", { className: connectorClasses, "aria-hidden": "true", style: connectorStyle }, side === "left" ? /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React37.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement("span", { className: dotClasses }), /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__connector-line" })));
 }
 function renderResourceSection(point) {
   if (!point) return null;
@@ -4898,6 +5108,9 @@ function Timeline({
   align = ALIGN_OPTIONS.CENTER,
   steps = null,
   points: pointsProp,
+  keyConfig = [],
+  timelineKey = [],
+  legend = [],
   __canopyTimeline: payload = null,
   ...rest
 }) {
@@ -4911,6 +5124,35 @@ function Timeline({
     () => sanitizePoints(rawPoints),
     [rawPoints]
   );
+  const resolvedKeyInput = React37.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 = React37.useMemo(
+    () => normalizeKeyLegendEntries(resolvedKeyInput),
+    [resolvedKeyInput]
+  );
+  const timelineKeyData = React37.useMemo(
+    () => buildKeyLegend(normalizedLegendConfig),
+    [normalizedLegendConfig]
+  );
+  const timelineKeyGroups = timelineKeyData.groups;
+  const timelineKeyLookup = timelineKeyData.lookup;
+  const getLegendMeta = React37.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 = React37.useMemo(
     () => createLocale(localeValue),
@@ -4941,13 +5183,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 || point.side || (index % 2 === 0 ? "left" : "right");
+      const keyMeta = point.keyValue ? getLegendMeta(point.keyValue) : null;
       return {
         ...point,
         progress,
-        side
+        side,
+        keyMeta
       };
     });
-  }, [sanitizedPoints, spanStart, span, useUniformSpacing, enforcedSide]);
+  }, [
+    sanitizedPoints,
+    spanStart,
+    span,
+    useUniformSpacing,
+    enforcedSide,
+    getLegendMeta
+  ]);
   const [activeId, setActiveId] = React37.useState(
     () => getActivePointId(pointsWithPosition)
   );
@@ -5000,6 +5251,7 @@ function Timeline({
     className
   ].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
+  const hasKeyLegend = timelineKeyGroups.length > 0;
   function renderPointEntry(point) {
     if (!point) return null;
     const wrapperClasses = [
@@ -5012,12 +5264,14 @@ function Timeline({
       point.id === activeId ? "is-active" : "",
       point.highlight ? "is-highlighted" : ""
     ].filter(Boolean).join(" ");
+    const pointColor = point.keyMeta && point.keyMeta.color ? point.keyMeta.color : null;
     const connector = /* @__PURE__ */ React37.createElement(
       TimelineConnector,
       {
         side: point.side,
         isActive: point.id === activeId,
-        highlight: point.highlight
+        highlight: point.highlight,
+        color: pointColor
       }
     );
     const body = /* @__PURE__ */ React37.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
@@ -5041,12 +5295,24 @@ function Timeline({
     const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point) => point.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(
+        (point) => point && point.keyValue === firstPoint.keyValue
+      );
+      if (!sameKey) return null;
+      return firstPoint.keyMeta || getLegendMeta(firstPoint.keyValue);
+    })();
+    const groupColor = groupKeyMeta && groupKeyMeta.color ? groupKeyMeta.color : null;
     const connector = /* @__PURE__ */ React37.createElement(
       TimelineConnector,
       {
         side: entry.side,
         isActive: hasActivePoint,
-        highlight: hasActivePoint
+        highlight: hasActivePoint,
+        color: groupColor
       }
     );
     const groupClasses = [
@@ -5104,7 +5370,22 @@ function Timeline({
       if (entry.type === "group") return renderGroupEntry(entry);
       return renderPointEntry(entry.point);
     })
-  )));
+  )), hasKeyLegend ? /* @__PURE__ */ React37.createElement("div", { className: "canopy-timeline__key", "aria-label": "Timeline key" }, /* @__PURE__ */ React37.createElement("ul", { className: "canopy-timeline__key-list" }, timelineKeyGroups.map((group) => /* @__PURE__ */ React37.createElement(
+    "li",
+    {
+      key: group.keyValue || group.label,
+      className: "canopy-timeline__key-item"
+    },
+    /* @__PURE__ */ React37.createElement(
+      "span",
+      {
+        className: "canopy-timeline__key-dot",
+        "aria-hidden": "true",
+        style: { backgroundColor: group.color || void 0 }
+      }
+    ),
+    /* @__PURE__ */ React37.createElement("span", { className: "canopy-timeline__key-label" }, group.label)
+  )))) : null);
 }
 function renderSteps(stepSize, range) {
   if (!Number.isFinite(stepSize) || stepSize <= 0 || !range) return null;
@@ -5327,6 +5608,14 @@ function resolveReferencedManifests(ids, manifestMap) {
 }
 
 // ui/src/content/timeline/MdxTimeline.jsx
+function normalizeReactKey(value) {
+  if (value == null) return "";
+  const str = String(value);
+  if (/^\.[0-9]+$/.test(str)) return "";
+  if (str.startsWith(".$")) return str.slice(2);
+  if (str.startsWith(".")) return str.slice(1);
+  return str;
+}
 function normalizeResource(resource, index) {
   if (!resource) return null;
   const href = resource.href || resource.id || "";
@@ -5341,14 +5630,17 @@ function normalizeResource(resource, index) {
   };
 }
 function normalizePoint(child, index, options) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   if (!React39.isValidElement(child)) return null;
   if (child.type !== TimelinePoint && ((_a = child.type) == null ? void 0 : _a.displayName) !== "TimelinePoint")
     return null;
   const props = child.props || {};
   const id = props.id || `timeline-point-${index}`;
+  const normalizedNodeKey = normalizeReactKey(child.key);
+  const keyValueProp = (_f = (_e = (_d = (_c = (_b = props.timelineKey) != null ? _b : props.pointKey) != null ? _c : props.keyValue) != null ? _d : props.group) != null ? _e : props.category) != null ? _f : null;
+  const normalizedKeyValue = keyValueProp != null && keyValueProp !== "" ? String(keyValueProp).trim() : normalizedNodeKey;
   const granularity = props.precision || props.granularity || options && options.range && options.range.granularity || "year";
-  const value = (_f = (_e = (_d = (_c = (_b = props.date) != null ? _b : props.value) != null ? _c : props.timestamp) != null ? _d : props.year) != null ? _e : props.label) != null ? _f : props.title;
+  const value = (_k = (_j = (_i = (_h = (_g = props.date) != null ? _g : props.value) != null ? _h : props.timestamp) != null ? _i : props.year) != null ? _j : props.label) != null ? _k : props.title;
   const meta = buildPointMetadata({
     value,
     granularity,
@@ -5380,7 +5672,8 @@ function normalizePoint(child, index, options) {
     },
     detailsHtml,
     resources,
-    manifests
+    manifests,
+    keyValue: normalizedKeyValue
   };
 }
 function serializeProps(props, payload, locale) {
@@ -5449,7 +5742,7 @@ function normalizeNumber(value) {
   const num = Number(value);
   return Number.isFinite(num) ? num : null;
 }
-function normalizeReactKey(value) {
+function normalizeReactKey2(value) {
   if (value == null) return "";
   const str = String(value);
   if (/^\.[0-9]+$/.test(str)) return "";
@@ -5474,7 +5767,7 @@ function renderDetailsHtml(children) {
     return "";
   }
 }
-function normalizeKeyLabel(value) {
+function normalizeKeyLabel2(value) {
   if (value == null) return "";
   try {
     const label = String(value).trim();
@@ -5514,9 +5807,9 @@ function normalizeCustomPoint(child, index, manifestMap) {
   let thumbnailWidth = normalizeNumber(props.thumbnailWidth);
   let thumbnailHeight = normalizeNumber(props.thumbnailHeight);
   const rawNodeKey = child && child.key != null ? child.key : null;
-  const normalizedNodeKey = normalizeReactKey(rawNodeKey);
+  const normalizedNodeKey = normalizeReactKey2(rawNodeKey);
   const keyValue = props.mapKey || props.group || props.key || normalizedNodeKey;
-  const keyLabelFromProps = normalizeKeyLabel(props.keyLabel || props.legend || props.groupLabel);
+  const keyLabelFromProps = normalizeKeyLabel2(props.keyLabel || props.legend || props.groupLabel);
   const detailsHtml = renderDetailsHtml(props.children);
   const manifestValues = Array.isArray(props.referencedManifests) ? props.referencedManifests : props.manifest ? [props.manifest] : Array.isArray(props.manifests) ? props.manifests : [];
   const manifests = resolveReferencedManifests(manifestValues, manifestMap);