@canopy-iiif/app 0.12.4 → 0.12.6

package/ui/dist/server.mjs

@@ -2062,8 +2062,51 @@ function CanopyFooter({ className = "", children }) {
   return /* @__PURE__ */ React20.createElement("footer", { className: footerClassName }, /* @__PURE__ */ React20.createElement("div", { className: "canopy-footer__inner" }, children));
 }
 
-// ui/src/layout/Container.jsx
+// ui/src/layout/TeaserCard.jsx
 import React21 from "react";
+function TeaserCard({
+  href = "",
+  title = "",
+  metadata = [],
+  summary = "",
+  thumbnail = null,
+  type = "work",
+  className = "",
+  ...rest
+}) {
+  const Tag = href ? "a" : "div";
+  const classes = [
+    "canopy-card",
+    "canopy-card--teaser",
+    "canopy-search-teaser__item",
+    "canopy-teaser-card",
+    className
+  ].filter(Boolean).join(" ");
+  const showThumb = type === "work" && thumbnail;
+  const metaLine = (Array.isArray(metadata) && metadata.length ? metadata.filter(Boolean) : summary ? [summary] : []).filter(Boolean).slice(0, 2).join(" \u2022 ");
+  return /* @__PURE__ */ React21.createElement(
+    Tag,
+    {
+      className: classes,
+      href: href || void 0,
+      "data-canopy-item": href ? "" : void 0,
+      ...rest
+    },
+    showThumb ? /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-teaser__thumb" }, /* @__PURE__ */ React21.createElement(
+      "img",
+      {
+        src: thumbnail,
+        alt: "",
+        loading: "lazy",
+        className: "canopy-search-teaser__thumb-img"
+      }
+    )) : null,
+    /* @__PURE__ */ React21.createElement("div", { className: "canopy-search-teaser__text" }, /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-teaser__title" }, title || href || "Untitled"), metaLine ? /* @__PURE__ */ React21.createElement("span", { className: "canopy-search-teaser__meta" }, metaLine) : null)
+  );
+}
+
+// ui/src/layout/Container.jsx
+import React22 from "react";
 function Container({
   className = "",
   variant = "content",
@@ -2072,7 +2115,7 @@ function Container({
 }) {
   const variantClass = variant === "wide" ? "max-w-wide" : "max-w-content";
   const classes = ["mx-auto", variantClass, "w-full", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     "div",
     {
       className: classes,
@@ -2084,11 +2127,11 @@ function Container({
 }
 
 // ui/src/content/ReferencedItems.jsx
-import React23 from "react";
+import React24 from "react";
 import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/Card.jsx
-import React22, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
+import React23, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
 function Card({
   href,
   src,
@@ -2146,8 +2189,8 @@ function Card({
   const h = Number(imgHeight);
   const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;
   const paddingPercent = ratio ? 100 / ratio : 100;
-  const caption = /* @__PURE__ */ React22.createElement("figcaption", null, title && /* @__PURE__ */ React22.createElement("span", null, title), subtitle && /* @__PURE__ */ React22.createElement("span", null, subtitle), children);
-  return /* @__PURE__ */ React22.createElement(
+  const caption = /* @__PURE__ */ React23.createElement("figcaption", null, title && /* @__PURE__ */ React23.createElement("span", null, title), subtitle && /* @__PURE__ */ React23.createElement("span", null, subtitle), children);
+  return /* @__PURE__ */ React23.createElement(
     "a",
     {
       href,
@@ -2159,13 +2202,13 @@ function Card({
       "data-image-loaded": imageLoaded ? "true" : "false",
       ...rest
     },
-    /* @__PURE__ */ React22.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React23.createElement(
       "div",
       {
         className: "canopy-card-media",
         style: { "--canopy-card-padding": `${paddingPercent}%` }
       },
-      inView ? /* @__PURE__ */ React22.createElement(
+      inView ? /* @__PURE__ */ React23.createElement(
         "img",
         {
           src,
@@ -2175,7 +2218,7 @@ function Card({
           onError: () => setImageLoaded(true)
         }
       ) : null
-    ) : /* @__PURE__ */ React22.createElement(
+    ) : /* @__PURE__ */ React23.createElement(
       "img",
       {
         src,
@@ -2194,7 +2237,7 @@ function useReferencedItems(itemsProp) {
   if (Array.isArray(itemsProp)) return itemsProp;
   const PageContext = navigationHelpers4 && typeof navigationHelpers4.getPageContext === "function" ? navigationHelpers4.getPageContext() : null;
   if (!PageContext) return [];
-  const context = React23.useContext(PageContext);
+  const context = React24.useContext(PageContext);
   const items = context && context.page ? context.page.referencedItems : null;
   return Array.isArray(items) ? items : [];
 }
@@ -2214,13 +2257,13 @@ function ReferencedItems({
       "referenced-items--empty",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React23.createElement("div", { className: emptyClass, ...rest }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel);
+    return /* @__PURE__ */ React24.createElement("div", { className: emptyClass, ...rest }, typeof emptyLabel === "function" ? emptyLabel() : emptyLabel);
   }
   const containerClassName = ["referenced-items", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React23.createElement("section", { className: containerClassName, ...rest }, children, /* @__PURE__ */ React23.createElement("div", { className: "referenced-items__grid", role: "list" }, items.map((item) => {
+  return /* @__PURE__ */ React24.createElement("section", { className: containerClassName, ...rest }, children, /* @__PURE__ */ React24.createElement("div", { className: "referenced-items__grid", role: "list" }, items.map((item) => {
     if (!item) return null;
     const key = item.href || item.slug || item.id;
-    return /* @__PURE__ */ React23.createElement("div", { className: "referenced-items__item", role: "listitem", key }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React24.createElement("div", { className: "referenced-items__item", role: "listitem", key }, /* @__PURE__ */ React24.createElement(
       Card,
       {
         href: item.href,
@@ -2237,7 +2280,7 @@ function ReferencedItems({
 }
 
 // ui/src/content/References.jsx
-import React24 from "react";
+import React25 from "react";
 import navigationHelpers5 from "@canopy-iiif/app/lib/components/navigation.js";
 function getPageContext() {
   if (!navigationHelpers5 || typeof navigationHelpers5.getPageContext !== "function") {
@@ -2267,7 +2310,7 @@ function References({
   ...rest
 }) {
   const PageContext = getPageContext();
-  const context = PageContext ? React24.useContext(PageContext) : null;
+  const context = PageContext ? React25.useContext(PageContext) : null;
   const contextPage = context && context.page ? context.page : null;
   const manifestId = id || contextPage && contextPage.manifestId || "";
   const contextReferences = !id && contextPage && Array.isArray(contextPage.referencedBy) ? contextPage.referencedBy : null;
@@ -2276,11 +2319,808 @@ function References({
   const entries = references && references.length ? references : null;
   if (!entries || !entries.length) return null;
   const containerClass = ["references", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React24.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React24.createElement("div", { className: "references__group" }, /* @__PURE__ */ React24.createElement("dt", null, title), entries.map((entry) => /* @__PURE__ */ React24.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React24.createElement("a", { href: entry.href }, entry.title || entry.href)))));
+  return /* @__PURE__ */ React25.createElement("dl", { className: containerClass, ...rest }, /* @__PURE__ */ React25.createElement("div", { className: "references__group" }, /* @__PURE__ */ React25.createElement("dt", null, title), entries.map((entry) => /* @__PURE__ */ React25.createElement("dd", { key: entry.href, className: "references__item" }, /* @__PURE__ */ React25.createElement("a", { href: entry.href }, entry.title || entry.href)))));
+}
+
+// ui/src/content/timeline/MdxTimeline.jsx
+import React27 from "react";
+import ReactDOMServer from "react-dom/server";
+
+// ui/src/content/timeline/Timeline.jsx
+import React26 from "react";
+
+// ui/src/content/timeline/date-utils.js
+var FALLBACK_LOCALE = (() => {
+  try {
+    return new Intl.Locale("en-US");
+  } catch (_) {
+    return "en-US";
+  }
+})();
+function createLocale(localeValue) {
+  if (!localeValue) return FALLBACK_LOCALE;
+  if (typeof Intl !== "undefined" && localeValue instanceof Intl.Locale)
+    return localeValue;
+  try {
+    return new Intl.Locale(localeValue);
+  } catch (_) {
+    return FALLBACK_LOCALE;
+  }
+}
+function parseMonthIndex(name = "", locale = FALLBACK_LOCALE) {
+  const localeId = typeof locale === "string" ? locale : locale && locale.baseName ? locale.baseName : "en-US";
+  const normalized = String(name || "").trim().toLocaleLowerCase(localeId);
+  if (!normalized) return 0;
+  const months = [
+    "january",
+    "february",
+    "march",
+    "april",
+    "may",
+    "june",
+    "july",
+    "august",
+    "september",
+    "october",
+    "november",
+    "december"
+  ];
+  const idx = months.indexOf(normalized);
+  return idx === -1 ? 0 : idx;
+}
+function parseStructuredInput(value) {
+  if (!value || typeof value !== "object") return null;
+  const { year, month, day } = value;
+  if (!Number.isFinite(Number(year))) return null;
+  const y = Number(year);
+  const m = Number.isFinite(Number(month)) ? Number(month) - 1 : 0;
+  const d = Number.isFinite(Number(day)) ? Number(day) : 1;
+  return new Date(Date.UTC(y, Math.max(0, Math.min(11, m)), Math.max(1, Math.min(31, d))));
+}
+function createDateFromInput(value, { locale } = {}) {
+  const loc = createLocale(locale);
+  if (value instanceof Date) return new Date(value.getTime());
+  if (Number.isFinite(Number(value))) {
+    const year = Number(value);
+    return new Date(Date.UTC(year, 0, 1));
+  }
+  if (value && typeof value === "object") {
+    const structured = parseStructuredInput(value);
+    if (structured) return structured;
+  }
+  const text = typeof value === "string" ? value.trim() : "";
+  if (!text) return null;
+  const isoYear = text.match(/^(\d{4})$/);
+  if (isoYear) {
+    return new Date(Date.UTC(Number(isoYear[1]), 0, 1));
+  }
+  const isoYearMonth = text.match(/^(\d{4})-(\d{2})$/);
+  if (isoYearMonth) {
+    return new Date(
+      Date.UTC(Number(isoYearMonth[1]), Number(isoYearMonth[2]) - 1, 1)
+    );
+  }
+  const isoDate = text.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (isoDate) {
+    return new Date(
+      Date.UTC(
+        Number(isoDate[1]),
+        Number(isoDate[2]) - 1,
+        Number(isoDate[3])
+      )
+    );
+  }
+  const monthDayYear = text.match(/^([A-Za-z]+)\s+(\d{1,2})(?:,)?\s*(\d{4})$/);
+  if (monthDayYear) {
+    const month = parseMonthIndex(monthDayYear[1], loc);
+    const day = Number(monthDayYear[2]);
+    const year = Number(monthDayYear[3]);
+    return new Date(Date.UTC(year, month, day));
+  }
+  const monthYear = text.match(/^([A-Za-z]+)\s+(\d{4})$/);
+  if (monthYear) {
+    const month = parseMonthIndex(monthYear[1], loc);
+    const year = Number(monthYear[2]);
+    return new Date(Date.UTC(year, month, 1));
+  }
+  const fallback = new Date(text);
+  if (!Number.isNaN(fallback.getTime())) return fallback;
+  const alt = new Date(Date.parse(text));
+  if (!Number.isNaN(alt.getTime())) return alt;
+  return null;
+}
+function formatDateLabel(date, { granularity = "day", locale } = {}) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return "";
+  const loc = createLocale(locale);
+  const baseName = typeof loc === "string" ? loc : loc.baseName || "en-US";
+  const options = { year: "numeric" };
+  if (granularity === "month" || granularity === "day") {
+    options.month = "long";
+  }
+  if (granularity === "day") {
+    options.day = "numeric";
+  }
+  options.timeZone = "UTC";
+  try {
+    const formatter = new Intl.DateTimeFormat(baseName, options);
+    return formatter.format(date);
+  } catch (_) {
+    return date.toISOString().slice(0, 10);
+  }
+}
+function normalizeRange(range = {}) {
+  const { start, end, granularity = "year", locale } = range || {};
+  const loc = createLocale(locale);
+  const startDate = createDateFromInput(start || /* @__PURE__ */ new Date(), { locale: loc }) || new Date(Date.UTC(0, 0, 1));
+  let endDate = createDateFromInput(end, { locale: loc });
+  if (!endDate) {
+    const copy = new Date(startDate.getTime());
+    copy.setUTCFullYear(copy.getUTCFullYear() + 1);
+    endDate = copy;
+  }
+  if (endDate <= startDate) {
+    const nextDay = new Date(startDate.getTime());
+    nextDay.setUTCDate(nextDay.getUTCDate() + 1);
+    endDate = nextDay;
+  }
+  const span = Math.max(1, endDate - startDate);
+  return {
+    startDate,
+    endDate,
+    span,
+    granularity: granularity === "month" || granularity === "day" ? granularity : "year",
+    locale: loc
+  };
+}
+function buildPointMetadata({ value, granularity, locale }) {
+  const date = createDateFromInput(value, { locale });
+  return {
+    date,
+    label: formatDateLabel(date, { granularity, locale }),
+    timestamp: date ? date.getTime() : null
+  };
+}
+function clampProgress(value) {
+  if (!Number.isFinite(value)) return 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return 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;
+  if (granularity === "day") return value * DAY_MS;
+  if (granularity === "month") return value * 30 * DAY_MS;
+  return value * 365 * DAY_MS;
+}
+function buildGroupedEntries(points, thresholdMs, options) {
+  if (!Array.isArray(points) || !points.length) return [];
+  if (!thresholdMs) return points.map((point) => ({ type: "point", point }));
+  const entries = [];
+  let currentGroup = null;
+  let groupCounter = 0;
+  function flush() {
+    if (!currentGroup) return;
+    if (currentGroup.points.length > 1) {
+      const firstPoint = currentGroup.points[0];
+      entries.push({
+        type: "group",
+        id: `canopy-timeline-group-${groupCounter}-${currentGroup.start}`,
+        points: currentGroup.points,
+        progress: firstPoint.progress,
+        side: firstPoint.side,
+        label: formatGroupLabel(currentGroup.start, currentGroup.end, options),
+        count: currentGroup.points.length
+      });
+      groupCounter += 1;
+    } else {
+      entries.push({ type: "point", point: currentGroup.points[0] });
+    }
+    currentGroup = null;
+  }
+  points.forEach((point) => {
+    const timestamp = point && point.meta ? point.meta.timestamp : null;
+    if (!Number.isFinite(timestamp)) {
+      flush();
+      if (point) entries.push({ type: "point", point });
+      return;
+    }
+    if (!currentGroup) {
+      currentGroup = {
+        points: [point],
+        start: timestamp,
+        end: timestamp,
+        last: timestamp
+      };
+      return;
+    }
+    const diff = Math.abs(timestamp - currentGroup.last);
+    if (diff <= thresholdMs) {
+      currentGroup.points.push(point);
+      currentGroup.last = timestamp;
+      if (timestamp < currentGroup.start) currentGroup.start = timestamp;
+      if (timestamp > currentGroup.end) currentGroup.end = timestamp;
+    } else {
+      flush();
+      currentGroup = {
+        points: [point],
+        start: timestamp,
+        end: timestamp,
+        last: timestamp
+      };
+    }
+  });
+  flush();
+  return entries;
+}
+function formatGroupLabel(startTs, endTs, options) {
+  if (!Number.isFinite(startTs) || !Number.isFinite(endTs)) return "";
+  const startLabel = formatDateLabel(new Date(startTs), options);
+  const endLabel = formatDateLabel(new Date(endTs), options);
+  if (!startLabel || !endLabel) return "";
+  return startLabel === endLabel ? startLabel : `${startLabel} \u2013 ${endLabel}`;
+}
+function deriveRangeOverrides(points, range) {
+  const timestamps = points.map((point) => point && point.meta ? point.meta.timestamp : null).filter((timestamp) => Number.isFinite(timestamp));
+  if (!timestamps.length) return range || {};
+  const earliest = Math.min(...timestamps);
+  const latest = Math.max(...timestamps);
+  return {
+    ...range,
+    start: range && range.start ? range.start : new Date(earliest),
+    end: range && range.end ? range.end : new Date(latest)
+  };
+}
+function getActivePointId(points) {
+  const highlighted = points.find((point) => point && point.highlight);
+  if (highlighted) return highlighted.id;
+  return points.length ? points[0].id : null;
+}
+function formatRangeLabel(rangeInfo) {
+  if (!rangeInfo) return "";
+  const startLabel = formatDateLabel(rangeInfo.startDate, {
+    granularity: rangeInfo.granularity,
+    locale: rangeInfo.locale
+  });
+  const endLabel = formatDateLabel(rangeInfo.endDate, {
+    granularity: rangeInfo.granularity,
+    locale: rangeInfo.locale
+  });
+  if (!startLabel || !endLabel) return "";
+  if (startLabel === endLabel) return startLabel;
+  return `${startLabel} \u2013 ${endLabel}`;
+}
+function sanitizePoints(points) {
+  if (!Array.isArray(points)) return [];
+  return points.map((point, index) => {
+    if (!point) return null;
+    const meta = point.meta || {};
+    const timestamp = Number(meta.timestamp);
+    const manifests = Array.isArray(point.manifests) ? point.manifests.map((manifest) => manifest ? { ...manifest } : null).filter(Boolean) : [];
+    const resources = Array.isArray(point.resources) ? point.resources.filter(Boolean) : [];
+    return {
+      ...point,
+      id: point.id || `timeline-point-${index}`,
+      title: point.title || point.label || `Point ${index + 1}`,
+      summary: point.summary || point.description || "",
+      detailsHtml: point.detailsHtml || "",
+      highlight: !!point.highlight,
+      side: point.side === "left" || point.side === "right" ? point.side : null,
+      meta: {
+        label: meta.label || "",
+        timestamp: Number.isFinite(timestamp) ? timestamp : null
+      },
+      manifests,
+      resources
+    };
+  }).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",
+    side === "left" ? "canopy-timeline__connector--left" : "canopy-timeline__connector--right"
+  ].filter(Boolean).join(" ");
+  const dotClasses = [
+    "canopy-timeline__connector-dot",
+    highlight || isActive ? "is-active" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React26.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React26.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("span", { className: dotClasses }), /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__connector-line" })));
+}
+function renderResourceSection(point) {
+  if (!point) return null;
+  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("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,
+      title: manifest.title || manifest.href,
+      summary: manifest.summary,
+      metadata: Array.isArray(manifest.metadata) && manifest.metadata.length ? manifest.metadata : manifest.summary ? [manifest.summary] : [],
+      thumbnail: manifest.thumbnail,
+      type: manifest.type || "work"
+    }
+  ))), legacyResources.map((resource, idx) => /* @__PURE__ */ React26.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React26.createElement(
+    TeaserCard,
+    {
+      href: resource.href,
+      title: resource.label || resource.title || resource.href,
+      summary: resource.summary,
+      thumbnail: resource.thumbnail,
+      type: resource.type || "resource"
+    }
+  )))));
+}
+function Timeline({
+  className = "",
+  title,
+  description,
+  range: rangeProp,
+  locale: localeProp = "en-US",
+  height = DEFAULT_TRACK_HEIGHT,
+  threshold: thresholdProp = null,
+  steps = null,
+  points: pointsProp,
+  __canopyTimeline: payload = null,
+  ...rest
+}) {
+  const payloadPoints = payload && Array.isArray(payload.points) ? payload.points : null;
+  const rawPoints = React26.useMemo(() => {
+    if (Array.isArray(pointsProp) && pointsProp.length) return pointsProp;
+    if (payloadPoints && payloadPoints.length) return payloadPoints;
+    return [];
+  }, [pointsProp, payloadPoints]);
+  const sanitizedPoints = React26.useMemo(
+    () => sanitizePoints(rawPoints),
+    [rawPoints]
+  );
+  const localeValue = payload && payload.locale ? payload.locale : localeProp;
+  const baseLocale = React26.useMemo(
+    () => createLocale(localeValue),
+    [localeValue]
+  );
+  const rangeInput = payload && payload.range ? payload.range : rangeProp || {};
+  const rangeOverrides = React26.useMemo(
+    () => deriveRangeOverrides(sanitizedPoints, rangeInput),
+    [sanitizedPoints, rangeInput]
+  );
+  const effectiveRange = React26.useMemo(
+    () => normalizeRange({
+      ...rangeOverrides,
+      locale: baseLocale
+    }),
+    [rangeOverrides, baseLocale]
+  );
+  const spanStart = effectiveRange.startDate.getTime();
+  const span = effectiveRange.span;
+  const pointsWithPosition = React26.useMemo(() => {
+    if (!sanitizedPoints.length) return [];
+    return sanitizedPoints.map((point, index) => {
+      const timestamp = point.meta.timestamp;
+      const fallbackProgress = sanitizedPoints.length > 1 ? index / (sanitizedPoints.length - 1) : 0;
+      const progress = Number.isFinite(timestamp) ? clampProgress((timestamp - spanStart) / span) : fallbackProgress;
+      const side = point.side || (index % 2 === 0 ? "left" : "right");
+      return {
+        ...point,
+        progress,
+        side
+      };
+    });
+  }, [sanitizedPoints, spanStart, span]);
+  const [activeId, setActiveId] = React26.useState(
+    () => getActivePointId(pointsWithPosition)
+  );
+  React26.useEffect(() => {
+    setActiveId(getActivePointId(pointsWithPosition));
+  }, [pointsWithPosition]);
+  const thresholdValue = typeof thresholdProp === "number" ? thresholdProp : payload && payload.threshold != null ? payload.threshold : null;
+  const stepsValue = typeof steps === "number" ? Number(steps) : payload && typeof payload.steps === "number" ? Number(payload.steps) : null;
+  const thresholdMs = React26.useMemo(
+    () => getThresholdMs(thresholdValue, effectiveRange.granularity),
+    [thresholdValue, effectiveRange.granularity]
+  );
+  const groupedEntries = React26.useMemo(
+    () => buildGroupedEntries(pointsWithPosition, thresholdMs, {
+      granularity: effectiveRange.granularity,
+      locale: baseLocale
+    }),
+    [pointsWithPosition, thresholdMs, effectiveRange.granularity, baseLocale]
+  );
+  const [expandedGroupIds, setExpandedGroupIds] = React26.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  React26.useEffect(() => {
+    setExpandedGroupIds((prev) => {
+      if (!prev || prev.size === 0) return prev;
+      const validIds = new Set(
+        groupedEntries.filter((entry) => entry.type === "group").map((entry) => entry.id)
+      );
+      const next = /* @__PURE__ */ new Set();
+      let changed = false;
+      prev.forEach((id) => {
+        if (validIds.has(id)) next.add(id);
+        else changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [groupedEntries]);
+  const toggleGroup = React26.useCallback((groupId) => {
+    setExpandedGroupIds((prev) => {
+      const next = new Set(prev || []);
+      if (next.has(groupId)) next.delete(groupId);
+      else next.add(groupId);
+      return next;
+    });
+  }, []);
+  const trackHeight = resolveTrackHeight(height, pointsWithPosition.length);
+  const containerClasses = ["canopy-timeline", className].filter(Boolean).join(" ");
+  const rangeLabel = formatRangeLabel(effectiveRange);
+  function renderPointEntry(point) {
+    if (!point) return null;
+    const wrapperClasses = [
+      "canopy-timeline__point-wrapper",
+      point.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
+    ].filter(Boolean).join(" ");
+    const wrapperStyle = { top: `${point.progress * 100}%` };
+    const cardClasses = [
+      "canopy-timeline__point",
+      point.id === activeId ? "is-active" : "",
+      point.highlight ? "is-highlighted" : ""
+    ].filter(Boolean).join(" ");
+    const connector = /* @__PURE__ */ React26.createElement(
+      TimelineConnector,
+      {
+        side: point.side,
+        isActive: point.id === activeId,
+        highlight: point.highlight
+      }
+    );
+    const body = /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
+    const resourceSection = renderResourceSection(point);
+    return /* @__PURE__ */ React26.createElement(
+      "div",
+      {
+        key: point.id,
+        className: wrapperClasses,
+        style: wrapperStyle,
+        role: "listitem"
+      },
+      point.side === "left" ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("div", { className: cardClasses }, body, resourceSection), connector) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, connector, /* @__PURE__ */ React26.createElement("div", { className: cardClasses }, body, resourceSection))
+    );
+  }
+  function renderGroupEntry(entry) {
+    const wrapperClasses = [
+      "canopy-timeline__point-wrapper",
+      entry.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
+    ].filter(Boolean).join(" ");
+    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(
+      TimelineConnector,
+      {
+        side: entry.side,
+        isActive: hasActivePoint,
+        highlight: hasActivePoint
+      }
+    );
+    const groupClasses = [
+      "canopy-timeline__group",
+      isExpanded ? "is-expanded" : "",
+      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__point-date" }, entry.label), /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React26.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-timeline__group-toggle",
+        "aria-expanded": isExpanded ? "true" : "false",
+        onClick: () => toggleGroup(entry.id)
+      },
+      isExpanded ? "Hide details" : "Show details"
+    ));
+    const groupPoints = isExpanded ? /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__group-points" }, entry.points.map((point) => /* @__PURE__ */ React26.createElement(
+      "button",
+      {
+        key: point.id,
+        type: "button",
+        className: [
+          "canopy-timeline__group-point",
+          point.id === activeId ? "is-active" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => setActiveId(point.id)
+      },
+      /* @__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);
+    return /* @__PURE__ */ React26.createElement(
+      "div",
+      {
+        key: entry.id,
+        className: wrapperClasses,
+        style: wrapperStyle,
+        role: "listitem"
+      },
+      entry.side === "left" ? /* @__PURE__ */ React26.createElement(React26.Fragment, null, groupCard, connector) : /* @__PURE__ */ React26.createElement(React26.Fragment, null, connector, groupCard)
+    );
+  }
+  return /* @__PURE__ */ React26.createElement("section", { className: containerClasses, ...rest }, title ? /* @__PURE__ */ React26.createElement("h2", { className: "canopy-timeline__title" }, title) : null, description ? /* @__PURE__ */ React26.createElement("p", { className: "canopy-timeline__description" }, description) : null, rangeLabel ? /* @__PURE__ */ React26.createElement("p", { className: "canopy-timeline__range", "aria-live": "polite" }, rangeLabel) : null, /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__body" }, /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      className: "canopy-timeline__list",
+      role: "list",
+      style: { minHeight: trackHeight }
+    },
+    /* @__PURE__ */ React26.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
+    renderSteps(stepsValue, effectiveRange),
+    groupedEntries.map((entry) => {
+      if (entry.type === "group") return renderGroupEntry(entry);
+      return renderPointEntry(entry.point);
+    })
+  )));
+}
+function renderSteps(stepSize, range) {
+  if (!Number.isFinite(stepSize) || stepSize <= 0 || !range) return null;
+  const startYear = range.startDate.getUTCFullYear();
+  const endYear = range.endDate.getUTCFullYear();
+  const markers = [];
+  if (startYear < endYear) {
+    markers.push(
+      /* @__PURE__ */ React26.createElement(
+        "span",
+        {
+          key: "timeline-step-start",
+          className: "canopy-timeline__step canopy-timeline__step--start",
+          style: { top: "0%" },
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-label" }, startYear)
+      )
+    );
+    markers.push(
+      /* @__PURE__ */ React26.createElement(
+        "span",
+        {
+          key: "timeline-step-end",
+          className: "canopy-timeline__step canopy-timeline__step--end",
+          style: { top: "100%" },
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-label" }, endYear)
+      )
+    );
+  }
+  const baseYear = Math.ceil(startYear / stepSize) * stepSize;
+  for (let year = baseYear; year <= endYear; year += stepSize) {
+    const timestamp = Date.UTC(year, 0, 1);
+    const progress = (timestamp - range.startDate.getTime()) / range.span;
+    if (progress <= 0 || progress >= 1) continue;
+    markers.push(
+      /* @__PURE__ */ React26.createElement(
+        "span",
+        {
+          key: `timeline-step-${year}`,
+          className: "canopy-timeline__step",
+          style: { top: `calc(${progress * 100}% - 0.5px)` },
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React26.createElement("span", { className: "canopy-timeline__step-label" }, year)
+      )
+    );
+  }
+  return markers.length ? markers : null;
+}
+
+// ui/src/content/timeline/TimelinePoint.jsx
+function TimelinePoint() {
+  return null;
+}
+TimelinePoint.displayName = "TimelinePoint";
+
+// ui/src/content/timeline/MdxTimeline.jsx
+import navigationHelpers6 from "@canopy-iiif/app/lib/components/navigation.js";
+function normalizeManifestId(raw) {
+  if (!raw) return "";
+  try {
+    const url = new URL(String(raw));
+    url.hash = "";
+    const params = Array.from(url.searchParams.entries()).sort(
+      (a, b) => a[0].localeCompare(b[0]) || a[1].localeCompare(b[1])
+    );
+    url.search = "";
+    params.forEach(([key, value]) => url.searchParams.append(key, value));
+    return url.toString();
+  } catch (_) {
+    return String(raw || "").trim();
+  }
+}
+var PageContextFallback = React27.createContext(null);
+function useReferencedManifestMap() {
+  var _a, _b;
+  const PageContext = ((_b = (_a = navigationHelpers6) == null ? void 0 : _a.getPageContext) == null ? void 0 : _b.call(_a)) || PageContextFallback;
+  const pageContext = React27.useContext(PageContext);
+  const referencedItems = pageContext && pageContext.page && Array.isArray(pageContext.page.referencedItems) ? pageContext.page.referencedItems : [];
+  return React27.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    referencedItems.forEach((item) => {
+      if (!item) return;
+      const id = item.id || item.href;
+      if (!id) return;
+      const normalized = normalizeManifestId(id);
+      map.set(normalized, item);
+      map.set(String(id), item);
+    });
+    return map;
+  }, [referencedItems]);
+}
+function normalizeResource(resource, index) {
+  if (!resource) return null;
+  const href = resource.href || resource.id || "";
+  const label = resource.label || resource.title || href || `Resource ${index + 1}`;
+  return {
+    id: resource.id || href || `timeline-resource-${index}`,
+    href,
+    label,
+    type: resource.type || "IIIF",
+    thumbnail: resource.thumbnail || null,
+    summary: resource.summary || null
+  };
+}
+function normalizePoint(child, index, options) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!React27.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 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 meta = buildPointMetadata({
+    value,
+    granularity,
+    locale: options.locale
+  });
+  let detailsHtml = "";
+  try {
+    if (props.children) {
+      detailsHtml = ReactDOMServer.renderToStaticMarkup(
+        React27.createElement(React27.Fragment, null, props.children)
+      );
+    }
+  } catch (_) {
+    detailsHtml = "";
+  }
+  const resources = Array.isArray(props.iiifResources) ? props.iiifResources.map(normalizeResource).filter(Boolean) : [];
+  const manifestValues = Array.isArray(props.referencedManifests) ? props.referencedManifests : props.manifest ? [props.manifest] : Array.isArray(props.manifests) ? props.manifests : [];
+  const manifests = resolveManifestReferences(manifestValues, options.manifestMap);
+  return {
+    id,
+    title: props.title || props.label || `Point ${index + 1}`,
+    summary: props.summary || props.description || "",
+    description: props.description || "",
+    highlight: props.highlight === true || props.highlight === "true",
+    side: props.side || props.align || props.alignment || null,
+    meta: {
+      label: meta.label,
+      timestamp: meta.timestamp
+    },
+    detailsHtml,
+    resources,
+    manifests
+  };
+}
+function resolveManifestReferences(ids, manifestMap) {
+  if (!Array.isArray(ids) || !ids.length || !manifestMap) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  ids.forEach((value) => {
+    if (!value) return;
+    const normalized = normalizeManifestId(value);
+    if (!normalized || seen.has(normalized)) return;
+    seen.add(normalized);
+    const record = manifestMap.get(normalized);
+    if (!record) return;
+    out.push({
+      id: record.id || value,
+      href: record.href || null,
+      title: record.title || record.href || value,
+      summary: record.summary || "",
+      thumbnail: record.thumbnail || null,
+      thumbnailWidth: record.thumbnailWidth,
+      thumbnailHeight: record.thumbnailHeight,
+      type: record.type || "work",
+      metadata: Array.isArray(record.metadata) && record.metadata.length ? record.metadata : record.summary ? [record.summary] : []
+    });
+  });
+  return out;
+}
+function serializeProps(props, payload, locale) {
+  const clone = {};
+  Object.keys(props || {}).forEach((key) => {
+    if (key === "children") return;
+    const value = props[key];
+    if (typeof value === "function" || typeof value === "symbol") return;
+    clone[key] = value;
+  });
+  clone.locale = locale;
+  clone.__canopyTimeline = payload;
+  return clone;
+}
+function serializeForScript(data) {
+  try {
+    return JSON.stringify(data).replace(/</g, "\\u003c");
+  } catch (_) {
+    return "{}";
+  }
+}
+function MdxTimeline({ children, ...rest }) {
+  const localeValue = rest.locale || "en-US";
+  const localeObj = createLocale(localeValue);
+  const localeBase = typeof localeObj === "string" ? localeObj : localeObj.baseName || "en-US";
+  const manifestMap = useReferencedManifestMap();
+  const childArray = React27.Children.toArray(children);
+  const points = childArray.map(
+    (child, index) => normalizePoint(child, index, {
+      range: rest.range || {},
+      locale: localeObj,
+      manifestMap
+    })
+  ).filter(Boolean);
+  const payload = {
+    points,
+    locale: localeBase,
+    range: rest.range || null,
+    threshold: rest.threshold != null ? rest.threshold : null,
+    steps: rest.steps != null ? rest.steps : null
+  };
+  const json = serializeForScript(serializeProps(rest, payload, localeBase));
+  return /* @__PURE__ */ React27.createElement("div", { "data-canopy-timeline": "1" }, /* @__PURE__ */ React27.createElement(Timeline, { ...rest, __canopyTimeline: payload }), /* @__PURE__ */ React27.createElement(
+    "script",
+    {
+      type: "application/json",
+      dangerouslySetInnerHTML: { __html: json }
+    }
+  ));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React25 from "react";
+import React28 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -2288,11 +3128,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React25.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React25.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React28.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React28.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React26 from "react";
+import React29 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -2300,11 +3140,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React26.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React26.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React29.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React29.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React27 from "react";
+import React30 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -2312,11 +3152,11 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React27.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React27.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React30.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React30.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React28 from "react";
+import React31 from "react";
 function MdxSearchFormModal(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -2332,11 +3172,11 @@ function MdxSearchFormModal(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React28.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React28.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React28.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React28.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React28.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React31.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React31.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React31.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React31.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React31.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React29 from "react";
+import React32 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -2361,28 +3201,28 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React29.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React32.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React29.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React32.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React29.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React32.createElement(CloverMetadata, { metadata: items, ...rest });
 }
 function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   const stmt = requiredStatement || manifest && manifest.requiredStatement;
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React29.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React32.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 
 // ui/src/docs/CodeBlock.jsx
-import React30 from "react";
+import React33 from "react";
 function parseHighlightAttr(attr) {
   if (!attr) return /* @__PURE__ */ new Set();
   const cleaned = String(attr || "").trim();
@@ -2428,10 +3268,10 @@ var highlightBaseStyle = {
 };
 function DocsCodeBlock(props = {}) {
   const { children, ...rest } = props;
-  const childArray = React30.Children.toArray(children);
-  const codeElement = childArray.find((el) => React30.isValidElement(el));
+  const childArray = React33.Children.toArray(children);
+  const codeElement = childArray.find((el) => React33.isValidElement(el));
   if (!codeElement || !codeElement.props) {
-    return React30.createElement("pre", props);
+    return React33.createElement("pre", props);
   }
   const {
     className = "",
@@ -2446,8 +3286,8 @@ function DocsCodeBlock(props = {}) {
   const highlightSet = parseHighlightAttr(highlightAttr);
   const copyAttr = codeProps["data-copy"];
   const enableCopy = copyAttr !== void 0 ? copyAttr === true || copyAttr === "true" || copyAttr === "" : false;
-  const [copied, setCopied] = React30.useState(false);
-  const handleCopy = React30.useCallback(async () => {
+  const [copied, setCopied] = React33.useState(false);
+  const handleCopy = React33.useCallback(async () => {
     const text = rawCode;
     try {
       if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
@@ -2512,20 +3352,20 @@ function DocsCodeBlock(props = {}) {
     const highlight = highlightSet.has(lineNumber);
     const style = highlight ? { ...baseLineStyle, ...highlightBaseStyle } : baseLineStyle;
     const displayLine = line === "" ? " " : line;
-    return React30.createElement(
+    return React33.createElement(
       "span",
       { key: lineNumber, style },
-      React30.createElement("span", { style: lineContentStyle }, displayLine)
+      React33.createElement("span", { style: lineContentStyle }, displayLine)
     );
   });
-  return React30.createElement(
+  return React33.createElement(
     "div",
     { style: containerStyle },
-    showHeader ? React30.createElement(
+    showHeader ? React33.createElement(
       "div",
       { style: headerStyle },
-      React30.createElement("span", null, showFilename ? filename : null),
-      enableCopy ? React30.createElement(
+      React33.createElement("span", null, showFilename ? filename : null),
+      enableCopy ? React33.createElement(
         "button",
         {
           type: "button",
@@ -2544,29 +3384,29 @@ function DocsCodeBlock(props = {}) {
         copied ? "Copied" : "Copy"
       ) : null
     ) : null,
-    React30.createElement(
+    React33.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },
-      React30.createElement("code", { style: codeStyle }, lineElements)
+      React33.createElement("code", { style: codeStyle }, lineElements)
     )
   );
 }
 
 // ui/src/docs/MarkdownTable.jsx
-import React31 from "react";
+import React34 from "react";
 function MarkdownTable({ className = "", ...rest }) {
   const merged = ["markdown-table", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React31.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React31.createElement("table", { className: merged, ...rest }));
+  return /* @__PURE__ */ React34.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React34.createElement("table", { className: merged, ...rest }));
 }
 
 // ui/src/docs/Diagram.jsx
-import React32 from "react";
+import React35 from "react";
 function CanopyDiagram() {
-  return /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React32.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React32.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Collection A"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React32.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React32.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Collection B"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React32.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React32.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React32.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React32.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Automated content"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React32.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React32.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React32.createElement("li", null, "Author narratives & tours"), /* @__PURE__ */ React32.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Search index"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React32.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React32.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React32.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React32.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React32.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React32.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Work pages"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React32.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React32.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React32.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React32.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React32.createElement("article", null, /* @__PURE__ */ React32.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React32.createElement("ul", null, /* @__PURE__ */ React32.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React32.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React32.createElement("li", null, "Optional annotation dataset"))))));
+  return /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram" }, /* @__PURE__ */ React35.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--collections" }, /* @__PURE__ */ React35.createElement("h3", null, "IIIF Collection(s)"), /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__section-summary" }, "Source collections contribute 105 total manifests that Canopy retrieves as-is via IIIF endpoints."), /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Collection A"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "70 Manifests"), /* @__PURE__ */ React35.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React35.createElement("li", null, "Textual Annotations"))), /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Collection B"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "35 Manifests"), /* @__PURE__ */ React35.createElement("li", null, "IIIF Images + A/V"), /* @__PURE__ */ React35.createElement("li", null, "Textual Annotations"))))), /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React35.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--build" }, /* @__PURE__ */ React35.createElement("h3", null, "Canopy Build Process"), /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__section-summary" }, "Canopy syncs manifests, page content, and annotations before bundling the site."), /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Automated content"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "105 manifests \u2192 105 work pages"), /* @__PURE__ */ React35.createElement("li", null, "One page per manifest"), /* @__PURE__ */ React35.createElement("li", null, "Customize page layout"))), /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Contextual content"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "Markdown & MDX pages"), /* @__PURE__ */ React35.createElement("li", null, "Author narratives & tours"), /* @__PURE__ */ React35.createElement("li", null, "Reference manifests inline"))), /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Search index"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "Combines works + pages"), /* @__PURE__ */ React35.createElement("li", null, "Customize result layout"), /* @__PURE__ */ React35.createElement("li", null, "Optional annotations"))))), /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__arrow-line" }), /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__arrow-head" })), /* @__PURE__ */ React35.createElement("section", { className: "canopy-diagram__section canopy-diagram__section--output" }, /* @__PURE__ */ React35.createElement("h3", null, "Static Digital Project"), /* @__PURE__ */ React35.createElement("span", { className: "canopy-diagram__section-summary" }, "The output is a lightweight bundle of HTML, CSS, JS, and JSON assets that can deploy anywhere."), /* @__PURE__ */ React35.createElement("div", { className: "canopy-diagram__grid" }, /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Work pages"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "105 generated HTML pages"), /* @__PURE__ */ React35.createElement("li", null, "Each links back to source manifests"), /* @__PURE__ */ React35.createElement("li", null, "Styled with Canopy components"))), /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Custom pages"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "Markdown & MDX-authored content"), /* @__PURE__ */ React35.createElement("li", null, "Reusable layouts for narratives"), /* @__PURE__ */ React35.createElement("li", null, "Embed IIIF media & interstitials"))), /* @__PURE__ */ React35.createElement("article", null, /* @__PURE__ */ React35.createElement("h4", null, "Search bundle"), /* @__PURE__ */ React35.createElement("ul", null, /* @__PURE__ */ React35.createElement("li", null, "Static FlexSearch index"), /* @__PURE__ */ React35.createElement("li", null, "Works + pages share records"), /* @__PURE__ */ React35.createElement("li", null, "Optional annotation dataset"))))));
 }
 
 // ui/src/docs/ThemeShowcase.jsx
-import React33 from "react";
+import React36 from "react";
 
 // ../../node_modules/@radix-ui/colors/index.mjs
 var colors_exports = {};
@@ -6399,21 +7239,21 @@ var ACCENT_COLOR_NAMES = [
   "sky"
 ];
 var GRAY_COLOR_NAMES = ["gray", "mauve", "slate", "sage", "olive", "sand"];
-var Section = ({ title, description, children }) => /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React33.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React33.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
-var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React33.createElement("strong", null, label)), /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React33.createElement(
+var Section = ({ title, description, children }) => /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__section" }, /* @__PURE__ */ React36.createElement("h3", { className: "canopy-theme-showcase__section-title" }, title), description ? /* @__PURE__ */ React36.createElement("p", { className: "canopy-theme-showcase__section-description" }, description) : null, children);
+var ColorScaleRow = ({ label, prefix }) => /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__scale-row" }, /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__scale-label" }, /* @__PURE__ */ React36.createElement("strong", null, label)), /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__scale-track" }, COLOR_STOPS.map((stop) => /* @__PURE__ */ React36.createElement(
   "div",
   {
     key: `${label}-${stop}`,
     className: "canopy-theme-showcase__scale-stop"
   },
-  /* @__PURE__ */ React33.createElement(
+  /* @__PURE__ */ React36.createElement(
     "span",
     {
       className: "canopy-theme-showcase__scale-chip",
       style: { backgroundColor: `var(${prefix}-${stop})` }
     }
   ),
-  /* @__PURE__ */ React33.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
+  /* @__PURE__ */ React36.createElement("span", { className: "canopy-theme-showcase__scale-token" }, stop)
 ))));
 function ThemeShowcase() {
   const accentColors = ACCENT_COLOR_NAMES;
@@ -6424,15 +7264,15 @@ function ThemeShowcase() {
     if (!scale) return null;
     return scale[`${name}9`] || Object.values(scale)[8];
   };
-  const ColorsLabeled = ({ colors }) => /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
+  const ColorsLabeled = ({ colors }) => /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__swatch-grid" }, colors.map((name) => {
     const colorValue = getRadixSwatch(name);
-    return /* @__PURE__ */ React33.createElement("div", { key: name, className: "canopy-theme-showcase__swatch" }, /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React36.createElement("div", { key: name, className: "canopy-theme-showcase__swatch" }, /* @__PURE__ */ React36.createElement(
       "div",
       {
         className: "canopy-theme-showcase__swatch-chip",
         style: { background: colorValue || "var(--color-gray-200)" }
       }
-    ), /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase__swatch-label" }, name));
+    ), /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase__swatch-label" }, name));
   }));
   const styles = `
     .canopy-theme-showcase__section {
@@ -6516,13 +7356,13 @@ function ThemeShowcase() {
       font-weight: 300;
     }
   `;
-  return /* @__PURE__ */ React33.createElement("div", { className: "canopy-theme-showcase" }, /* @__PURE__ */ React33.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React36.createElement("div", { className: "canopy-theme-showcase" }, /* @__PURE__ */ React36.createElement("style", { dangerouslySetInnerHTML: { __html: styles } }), /* @__PURE__ */ React36.createElement(
     Section,
     {
       title: "Color scales",
       description: "Accent and gray ramps from the active theme."
     },
-    /* @__PURE__ */ React33.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React36.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } }, COLOR_SCALES.map((scale) => /* @__PURE__ */ React36.createElement(
       ColorScaleRow,
       {
         key: scale.label,
@@ -6530,20 +7370,20 @@ function ThemeShowcase() {
         prefix: scale.prefix
       }
     )))
-  ), /* @__PURE__ */ React33.createElement(
+  ), /* @__PURE__ */ React36.createElement(
     Section,
     {
       title: "Accent palette options",
       description: "All accent color families available via Radix Themes."
     },
-    /* @__PURE__ */ React33.createElement(ColorsLabeled, { colors: accentColors })
-  ), /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React36.createElement(ColorsLabeled, { colors: accentColors })
+  ), /* @__PURE__ */ React36.createElement(
     Section,
     {
       title: "Gray palette options",
       description: "Neutral ramps you can assign via the theme block."
     },
-    /* @__PURE__ */ React33.createElement(ColorsLabeled, { colors: grayColors })
+    /* @__PURE__ */ React36.createElement(ColorsLabeled, { colors: grayColors })
   ));
 }
 export {
@@ -6578,7 +7418,10 @@ export {
   Slider,
   SubNavigation,
   Summary,
+  TeaserCard,
   ThemeShowcase,
+  MdxTimeline as Timeline,
+  TimelinePoint,
   Viewer
 };
 //# sourceMappingURL=server.mjs.map