@canopy-iiif/app 0.12.5 → 0.12.6

package/ui/dist/server.mjs

@@ -2489,6 +2489,8 @@ function clampProgress(value) {
 
 // ui/src/content/timeline/Timeline.jsx
 var DAY_MS = 24 * 60 * 60 * 1e3;
+var DEFAULT_TRACK_HEIGHT = 640;
+var MIN_HEIGHT_PER_POINT = 220;
 function getThresholdMs(threshold, granularity) {
   const value = Number(threshold);
   if (!Number.isFinite(value) || value <= 0) return 0;
@@ -2618,6 +2620,31 @@ function sanitizePoints(points) {
     };
   }).filter(Boolean);
 }
+function resolveTrackHeight(height, pointCount) {
+  const minimumPx = Math.max(
+    DEFAULT_TRACK_HEIGHT,
+    pointCount * MIN_HEIGHT_PER_POINT
+  );
+  const fallback = `${minimumPx}px`;
+  if (height == null) return fallback;
+  if (typeof height === "number") {
+    const numeric = Number(height);
+    if (Number.isFinite(numeric)) {
+      return `${Math.max(numeric, pointCount * MIN_HEIGHT_PER_POINT)}px`;
+    }
+    return fallback;
+  }
+  if (typeof height === "string") {
+    const trimmed = height.trim();
+    if (!trimmed) return fallback;
+    const numeric = Number(trimmed);
+    if (Number.isFinite(numeric)) {
+      return `${Math.max(numeric, pointCount * MIN_HEIGHT_PER_POINT)}px`;
+    }
+    return trimmed;
+  }
+  return fallback;
+}
 function TimelineConnector({ side, isActive, highlight }) {
   const connectorClasses = [
     "canopy-timeline__connector",
@@ -2634,7 +2661,7 @@ function renderResourceSection(point) {
   const manifestCards = Array.isArray(point.manifests) ? point.manifests.filter(Boolean) : [];
   const legacyResources = Array.isArray(point.resources) ? point.resources.filter(Boolean) : [];
   if (!manifestCards.length && !legacyResources.length) return null;
-  return /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React26.createElement("ul", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React26.createElement("li", { key: manifest.id || manifest.href }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React26.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React26.createElement(
     TeaserCard,
     {
       href: manifest.href,
@@ -2644,7 +2671,7 @@ function renderResourceSection(point) {
       thumbnail: manifest.thumbnail,
       type: manifest.type || "work"
     }
-  ))), legacyResources.map((resource, idx) => /* @__PURE__ */ React26.createElement("li", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React26.createElement(
+  ))), legacyResources.map((resource, idx) => /* @__PURE__ */ React26.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React26.createElement(
     TeaserCard,
     {
       href: resource.href,
@@ -2661,7 +2688,7 @@ function Timeline({
   description,
   range: rangeProp,
   locale: localeProp = "en-US",
-  height = 640,
+  height = DEFAULT_TRACK_HEIGHT,
   threshold: thresholdProp = null,
   steps = null,
   points: pointsProp,
@@ -2679,7 +2706,10 @@ function Timeline({
     [rawPoints]
   );
   const localeValue = payload && payload.locale ? payload.locale : localeProp;
-  const baseLocale = React26.useMemo(() => createLocale(localeValue), [localeValue]);
+  const baseLocale = React26.useMemo(
+    () => createLocale(localeValue),
+    [localeValue]
+  );
   const rangeInput = payload && payload.range ? payload.range : rangeProp || {};
   const rangeOverrides = React26.useMemo(
     () => deriveRangeOverrides(sanitizedPoints, rangeInput),
@@ -2727,7 +2757,9 @@ function Timeline({
     }),
     [pointsWithPosition, thresholdMs, effectiveRange.granularity, baseLocale]
   );
-  const [expandedGroupIds, setExpandedGroupIds] = React26.useState(() => /* @__PURE__ */ new Set());
+  const [expandedGroupIds, setExpandedGroupIds] = React26.useState(
+    () => /* @__PURE__ */ new Set()
+  );
   React26.useEffect(() => {
     setExpandedGroupIds((prev) => {
       if (!prev || prev.size === 0) return prev;
@@ -2751,8 +2783,7 @@ function Timeline({
       return next;
     });
   }, []);
-  const resolvedHeight = Number.isFinite(Number(height)) ? Number(height) : 640;
-  const trackHeight = Math.max(resolvedHeight, pointsWithPosition.length * 220);
+  const trackHeight = resolveTrackHeight(height, pointsWithPosition.length);
   const containerClasses = ["canopy-timeline", className].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
   function renderPointEntry(point) {
@@ -2761,7 +2792,7 @@ function Timeline({
       "canopy-timeline__point-wrapper",
       point.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
     ].filter(Boolean).join(" ");
-    const wrapperStyle = { top: `calc(${point.progress * 100}% - 1rem)` };
+    const wrapperStyle = { top: `${point.progress * 100}%` };
     const cardClasses = [
       "canopy-timeline__point",
       point.id === activeId ? "is-active" : "",
@@ -2793,7 +2824,7 @@ function Timeline({
       "canopy-timeline__point-wrapper",
       entry.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
     ].filter(Boolean).join(" ");
-    const wrapperStyle = { top: `calc(${entry.progress * 100}% - 1rem)` };
+    const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point) => point.id === activeId);
     const connector = /* @__PURE__ */ React26.createElement(
@@ -2810,7 +2841,7 @@ function Timeline({
       hasActivePoint ? "is-active" : ""
     ].filter(Boolean).join(" ");
     const countLabel = `${entry.count} event${entry.count > 1 ? "s" : ""}`;
-    const header = /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-count" }, countLabel), /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-range" }, entry.label)), /* @__PURE__ */ React26.createElement(
+    const header = /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React26.createElement(
       "button",
       {
         type: "button",
@@ -2831,7 +2862,7 @@ function Timeline({
         ].filter(Boolean).join(" "),
         onClick: () => setActiveId(point.id)
       },
-      /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-point-date" }, point.meta.label),
+      /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
       /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
     ))) : null;
     const groupCard = /* @__PURE__ */ React26.createElement("div", { className: groupClasses }, header, groupPoints);
@@ -2851,7 +2882,7 @@ function Timeline({
     {
       className: "canopy-timeline__list",
       role: "list",
-      style: { minHeight: `${trackHeight}px` }
+      style: { minHeight: trackHeight }
     },
     /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
     renderSteps(stepsValue, effectiveRange),
@@ -2872,7 +2903,7 @@ function renderSteps(stepSize, range) {
         "span",
         {
           key: "timeline-step-start",
-          className: "canopy-timeline__step canopy-timeline__step--edge",
+          className: "canopy-timeline__step canopy-timeline__step--start",
           style: { top: "0%" },
           "aria-hidden": "true"
         },
@@ -2885,8 +2916,8 @@ function renderSteps(stepSize, range) {
         "span",
         {
           key: "timeline-step-end",
-          className: "canopy-timeline__step canopy-timeline__step--edge",
-          style: { top: "calc(100% - 1px)" },
+          className: "canopy-timeline__step canopy-timeline__step--end",
+          style: { top: "100%" },
           "aria-hidden": "true"
         },
         /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-line" }),