@canopy-iiif/app 1.4.0 → 1.4.2

package/package.json

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

package/ui/dist/index.mjs

@@ -2075,7 +2075,7 @@ function CanopyDiagram() {
 }
 
 // ui/src/content/timeline/Timeline.jsx
-import React33 from "react";
+import React34 from "react";
 
 // ui/src/content/timeline/date-utils.js
 var FALLBACK_LOCALE = (() => {
@@ -2227,6 +2227,56 @@ function clampProgress(value) {
   return value;
 }
 
+// ui/src/layout/ReferencedManifestCard.jsx
+import React33 from "react";
+function normalizeMetadata(metadata, summary) {
+  if (Array.isArray(metadata) && metadata.length) {
+    return metadata.filter(Boolean);
+  }
+  if (summary) return [summary];
+  return [];
+}
+function ReferencedManifestCard({
+  manifest = null,
+  href,
+  title,
+  summary,
+  metadata,
+  thumbnail,
+  type,
+  className = "",
+  ...rest
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const record = manifest || {};
+  const resolvedHref = (_a = href != null ? href : record.href) != null ? _a : "";
+  const resolvedTitle = (_c = (_b = title != null ? title : record.title) != null ? _b : record.href) != null ? _c : "";
+  const resolvedSummary = (_d = summary != null ? summary : record.summary) != null ? _d : "";
+  const resolvedMetadata = normalizeMetadata(
+    metadata != null ? metadata : record.metadata,
+    resolvedSummary
+  );
+  const resolvedThumbnail = (_e = thumbnail != null ? thumbnail : record.thumbnail) != null ? _e : null;
+  const resolvedType = (_f = type != null ? type : record.type) != null ? _f : "work";
+  const classes = [
+    "canopy-referenced-manifest-card",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React33.createElement(
+    TeaserCard,
+    {
+      href: resolvedHref || void 0,
+      title: resolvedTitle || resolvedHref || "",
+      summary: resolvedSummary,
+      metadata: resolvedMetadata,
+      thumbnail: resolvedThumbnail,
+      type: resolvedType,
+      className: classes,
+      ...rest
+    }
+  );
+}
+
 // ui/src/content/timeline/Timeline.jsx
 var DAY_MS = 24 * 60 * 60 * 1e3;
 var DEFAULT_TRACK_HEIGHT = 640;
@@ -2394,24 +2444,14 @@ function TimelineConnector({ side, isActive, highlight }) {
     "canopy-timeline__connector-dot",
     highlight || isActive ? "is-active" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React33.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React33.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("span", { className: dotClasses }), /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__connector-line" })));
+  return /* @__PURE__ */ React34.createElement("span", { className: connectorClasses, "aria-hidden": "true" }, side === "left" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__connector-line" }), /* @__PURE__ */ React34.createElement("span", { className: dotClasses })) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("span", { className: dotClasses }), /* @__PURE__ */ React34.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__ */ React33.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React33.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React33.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__ */ React33.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React34.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React34.createElement(ReferencedManifestCard, { manifest }))), legacyResources.map((resource, idx) => /* @__PURE__ */ React34.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React34.createElement(
     TeaserCard,
     {
       href: resource.href,
@@ -2436,26 +2476,26 @@ function Timeline({
   ...rest
 }) {
   const payloadPoints = payload && Array.isArray(payload.points) ? payload.points : null;
-  const rawPoints = React33.useMemo(() => {
+  const rawPoints = React34.useMemo(() => {
     if (Array.isArray(pointsProp) && pointsProp.length) return pointsProp;
     if (payloadPoints && payloadPoints.length) return payloadPoints;
     return [];
   }, [pointsProp, payloadPoints]);
-  const sanitizedPoints = React33.useMemo(
+  const sanitizedPoints = React34.useMemo(
     () => sanitizePoints(rawPoints),
     [rawPoints]
   );
   const localeValue = payload && payload.locale ? payload.locale : localeProp;
-  const baseLocale = React33.useMemo(
+  const baseLocale = React34.useMemo(
     () => createLocale(localeValue),
     [localeValue]
   );
   const rangeInput = payload && payload.range ? payload.range : rangeProp || {};
-  const rangeOverrides = React33.useMemo(
+  const rangeOverrides = React34.useMemo(
     () => deriveRangeOverrides(sanitizedPoints, rangeInput),
     [sanitizedPoints, rangeInput]
   );
-  const effectiveRange = React33.useMemo(
+  const effectiveRange = React34.useMemo(
     () => normalizeRange({
       ...rangeOverrides,
       locale: baseLocale
@@ -2464,7 +2504,7 @@ function Timeline({
   );
   const spanStart = effectiveRange.startDate.getTime();
   const span = effectiveRange.span;
-  const pointsWithPosition = React33.useMemo(() => {
+  const pointsWithPosition = React34.useMemo(() => {
     if (!sanitizedPoints.length) return [];
     return sanitizedPoints.map((point, index) => {
       const timestamp = point.meta.timestamp;
@@ -2478,29 +2518,29 @@ function Timeline({
       };
     });
   }, [sanitizedPoints, spanStart, span]);
-  const [activeId, setActiveId] = React33.useState(
+  const [activeId, setActiveId] = React34.useState(
     () => getActivePointId(pointsWithPosition)
   );
-  React33.useEffect(() => {
+  React34.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 = React33.useMemo(
+  const thresholdMs = React34.useMemo(
     () => getThresholdMs(thresholdValue, effectiveRange.granularity),
     [thresholdValue, effectiveRange.granularity]
   );
-  const groupedEntries = React33.useMemo(
+  const groupedEntries = React34.useMemo(
     () => buildGroupedEntries(pointsWithPosition, thresholdMs, {
       granularity: effectiveRange.granularity,
       locale: baseLocale
     }),
     [pointsWithPosition, thresholdMs, effectiveRange.granularity, baseLocale]
   );
-  const [expandedGroupIds, setExpandedGroupIds] = React33.useState(
+  const [expandedGroupIds, setExpandedGroupIds] = React34.useState(
     () => /* @__PURE__ */ new Set()
   );
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     setExpandedGroupIds((prev) => {
       if (!prev || prev.size === 0) return prev;
       const validIds = new Set(
@@ -2515,7 +2555,7 @@ function Timeline({
       return changed ? next : prev;
     });
   }, [groupedEntries]);
-  const toggleGroup = React33.useCallback((groupId) => {
+  const toggleGroup = React34.useCallback((groupId) => {
     setExpandedGroupIds((prev) => {
       const next = new Set(prev || []);
       if (next.has(groupId)) next.delete(groupId);
@@ -2538,7 +2578,7 @@ function Timeline({
       point.id === activeId ? "is-active" : "",
       point.highlight ? "is-highlighted" : ""
     ].filter(Boolean).join(" ");
-    const connector = /* @__PURE__ */ React33.createElement(
+    const connector = /* @__PURE__ */ React34.createElement(
       TimelineConnector,
       {
         side: point.side,
@@ -2546,9 +2586,9 @@ function Timeline({
         highlight: point.highlight
       }
     );
-    const body = /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
+    const body = /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__point-body" }, /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label), /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__point-title" }, point.title), point.summary ? /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__point-summary" }, point.summary) : null);
     const resourceSection = renderResourceSection(point);
-    return /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React34.createElement(
       "div",
       {
         key: point.id,
@@ -2556,7 +2596,7 @@ function Timeline({
         style: wrapperStyle,
         role: "listitem"
       },
-      point.side === "left" ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", { className: cardClasses }, body, resourceSection), connector) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, connector, /* @__PURE__ */ React33.createElement("div", { className: cardClasses }, body, resourceSection))
+      point.side === "left" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", { className: cardClasses }, body, resourceSection), connector) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, connector, /* @__PURE__ */ React34.createElement("div", { className: cardClasses }, body, resourceSection))
     );
   }
   function renderGroupEntry(entry) {
@@ -2567,7 +2607,7 @@ function Timeline({
     const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point) => point.id === activeId);
-    const connector = /* @__PURE__ */ React33.createElement(
+    const connector = /* @__PURE__ */ React34.createElement(
       TimelineConnector,
       {
         side: entry.side,
@@ -2581,7 +2621,7 @@ function Timeline({
       hasActivePoint ? "is-active" : ""
     ].filter(Boolean).join(" ");
     const countLabel = `${entry.count} event${entry.count > 1 ? "s" : ""}`;
-    const header = /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React33.createElement(
+    const header = /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React34.createElement(
       "button",
       {
         type: "button",
@@ -2591,7 +2631,7 @@ function Timeline({
       },
       isExpanded ? "Hide details" : "Show details"
     ));
-    const groupPoints = isExpanded ? /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__group-points" }, entry.points.map((point) => /* @__PURE__ */ React33.createElement(
+    const groupPoints = isExpanded ? /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__group-points" }, entry.points.map((point) => /* @__PURE__ */ React34.createElement(
       "button",
       {
         key: point.id,
@@ -2602,11 +2642,11 @@ function Timeline({
         ].filter(Boolean).join(" "),
         onClick: () => setActiveId(point.id)
       },
-      /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
-      /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
+      /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
+      /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
     ))) : null;
-    const groupCard = /* @__PURE__ */ React33.createElement("div", { className: groupClasses }, header, groupPoints);
-    return /* @__PURE__ */ React33.createElement(
+    const groupCard = /* @__PURE__ */ React34.createElement("div", { className: groupClasses }, header, groupPoints);
+    return /* @__PURE__ */ React34.createElement(
       "div",
       {
         key: entry.id,
@@ -2614,17 +2654,17 @@ function Timeline({
         style: wrapperStyle,
         role: "listitem"
       },
-      entry.side === "left" ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, groupCard, connector) : /* @__PURE__ */ React33.createElement(React33.Fragment, null, connector, groupCard)
+      entry.side === "left" ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, groupCard, connector) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, connector, groupCard)
     );
   }
-  return /* @__PURE__ */ React33.createElement("section", { className: containerClasses, ...rest }, title ? /* @__PURE__ */ React33.createElement("h2", { className: "canopy-timeline__title" }, title) : null, description ? /* @__PURE__ */ React33.createElement("p", { className: "canopy-timeline__description" }, description) : null, rangeLabel ? /* @__PURE__ */ React33.createElement("p", { className: "canopy-timeline__range", "aria-live": "polite" }, rangeLabel) : null, /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__body" }, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement("section", { className: containerClasses, ...rest }, title ? /* @__PURE__ */ React34.createElement("h2", { className: "canopy-timeline__title" }, title) : null, description ? /* @__PURE__ */ React34.createElement("p", { className: "canopy-timeline__description" }, description) : null, rangeLabel ? /* @__PURE__ */ React34.createElement("p", { className: "canopy-timeline__range", "aria-live": "polite" }, rangeLabel) : null, /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__body" }, /* @__PURE__ */ React34.createElement(
     "div",
     {
       className: "canopy-timeline__list",
       role: "list",
       style: { minHeight: trackHeight }
     },
-    /* @__PURE__ */ React33.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
+    /* @__PURE__ */ React34.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
     renderSteps(stepsValue, effectiveRange),
     groupedEntries.map((entry) => {
       if (entry.type === "group") return renderGroupEntry(entry);
@@ -2639,7 +2679,7 @@ function renderSteps(stepSize, range) {
   const markers = [];
   if (startYear < endYear) {
     markers.push(
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement(
         "span",
         {
           key: "timeline-step-start",
@@ -2647,12 +2687,12 @@ function renderSteps(stepSize, range) {
           style: { top: "0%" },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-label" }, startYear)
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-label" }, startYear)
       )
     );
     markers.push(
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement(
         "span",
         {
           key: "timeline-step-end",
@@ -2660,8 +2700,8 @@ function renderSteps(stepSize, range) {
           style: { top: "100%" },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-label" }, endYear)
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-label" }, endYear)
       )
     );
   }
@@ -2671,7 +2711,7 @@ function renderSteps(stepSize, range) {
     const progress = (timestamp - range.startDate.getTime()) / range.span;
     if (progress <= 0 || progress >= 1) continue;
     markers.push(
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React34.createElement(
         "span",
         {
           key: `timeline-step-${year}`,
@@ -2679,8 +2719,8 @@ function renderSteps(stepSize, range) {
           style: { top: `calc(${progress * 100}% - 0.5px)` },
           "aria-hidden": "true"
         },
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-line" }),
-        /* @__PURE__ */ React33.createElement("span", { className: "canopy-timeline__step-label" }, year)
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-line" }),
+        /* @__PURE__ */ React34.createElement("span", { className: "canopy-timeline__step-label" }, year)
       )
     );
   }
@@ -2694,7 +2734,8 @@ function TimelinePoint() {
 TimelinePoint.displayName = "TimelinePoint";
 
 // ui/src/content/map/Map.jsx
-import React34 from "react";
+import React35 from "react";
+import { createRoot } from "react-dom/client";
 var DEFAULT_TILE_LAYERS = [
   {
     name: "OpenStreetMap",
@@ -2947,35 +2988,72 @@ function escapeHtml(value) {
   if (value == null) return "";
   return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function renderPopup(marker) {
-  if (!marker) return "";
+function MapPopupContent({ marker }) {
+  if (!marker) return null;
   const title = marker.title || marker.manifestTitle || "";
   const summary = marker.summary || marker.manifestSummary || "";
   const href = marker.href ? withBasePath(marker.href) : "";
   const thumbnail = marker.thumbnail || "";
   const thumbWidth = marker.thumbnailWidth;
   const thumbHeight = marker.thumbnailHeight;
-  const chunks = ['<div class="canopy-map__popup">'];
-  if (thumbnail) {
-    const sizeAttrs = [];
-    if (typeof thumbWidth === "number" && thumbWidth > 0) sizeAttrs.push(`width="${thumbWidth}"`);
-    if (typeof thumbHeight === "number" && thumbHeight > 0) sizeAttrs.push(`height="${thumbHeight}"`);
-    chunks.push(
-      `<div class="canopy-map__popup-media"><img src="${escapeHtml(thumbnail)}" alt="" loading="lazy" ${sizeAttrs.join(" ")} /></div>`
-    );
-  }
-  chunks.push('<div class="canopy-map__popup-body">');
-  if (title) {
-    const heading = href ? `<a href="${escapeHtml(href)}" class="canopy-map__popup-title">${escapeHtml(title)}</a>` : `<span class="canopy-map__popup-title">${escapeHtml(title)}</span>`;
-    chunks.push(heading);
-  }
-  if (summary) chunks.push(`<p class="canopy-map__popup-summary">${escapeHtml(summary)}</p>`);
-  if (marker.detailsHtml) chunks.push(`<div class="canopy-map__popup-details">${marker.detailsHtml}</div>`);
-  if (!summary && !marker.detailsHtml && href && !title) {
-    chunks.push(`<a href="${escapeHtml(href)}" class="canopy-map__popup-link">View item</a>`);
+  const manifestLinks = Array.isArray(marker.manifests) ? marker.manifests.filter((entry) => entry && (entry.href || entry.title)) : [];
+  const normalizedManifests = manifestLinks.map((manifest) => ({
+    ...manifest,
+    href: manifest.href ? withBasePath(manifest.href) : manifest.href || ""
+  }));
+  return /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__popup" }, thumbnail ? /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__popup-media" }, /* @__PURE__ */ React35.createElement(
+    "img",
+    {
+      src: thumbnail,
+      alt: "",
+      loading: "lazy",
+      width: typeof thumbWidth === "number" && thumbWidth > 0 ? thumbWidth : void 0,
+      height: typeof thumbHeight === "number" && thumbHeight > 0 ? thumbHeight : void 0
+    }
+  )) : null, /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__popup-body" }, title ? href ? /* @__PURE__ */ React35.createElement("a", { href, className: "canopy-map__popup-title" }, title) : /* @__PURE__ */ React35.createElement("span", { className: "canopy-map__popup-title" }, title) : null, summary ? /* @__PURE__ */ React35.createElement("p", { className: "canopy-map__popup-summary" }, summary) : null, marker.detailsHtml ? /* @__PURE__ */ React35.createElement(
+    "div",
+    {
+      className: "canopy-map__popup-details",
+      dangerouslySetInnerHTML: { __html: marker.detailsHtml }
+    }
+  ) : null, !summary && !marker.detailsHtml && href && !title ? /* @__PURE__ */ React35.createElement("a", { href, className: "canopy-map__popup-link" }, "View item") : null, normalizedManifests.length ? /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__popup-manifests" }, /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__popup-manifests-list" }, normalizedManifests.map((manifest, index) => /* @__PURE__ */ React35.createElement(
+    "div",
+    {
+      key: manifest.id || manifest.href || `manifest-${index}`,
+      className: "canopy-map__popup-manifests-item"
+    },
+    /* @__PURE__ */ React35.createElement(ReferencedManifestCard, { manifest })
+  )))) : null));
+}
+function renderPopup(marker) {
+  if (!marker || typeof document === "undefined") return null;
+  const container = document.createElement("div");
+  let root = null;
+  try {
+    root = createRoot(container);
+    root.render(/* @__PURE__ */ React35.createElement(MapPopupContent, { marker }));
+  } catch (error) {
+    if (root) {
+      try {
+        root.unmount();
+      } catch (_) {
+      }
+      root = null;
+    }
+    const fallbackTitle = marker.title || marker.summary || marker.href || "Location";
+    container.innerHTML = `<div class="canopy-map__popup"><div class="canopy-map__popup-body"><span class="canopy-map__popup-title">${escapeHtml(fallbackTitle)}</span></div></div>`;
   }
-  chunks.push("</div></div>");
-  return chunks.join("");
+  return {
+    element: container,
+    destroy() {
+      if (!root) return;
+      try {
+        root.unmount();
+      } catch (_) {
+      }
+      root = null;
+    }
+  };
 }
 function normalizeCustomMarkers(points) {
   if (!Array.isArray(points)) return [];
@@ -2995,6 +3073,7 @@ function normalizeCustomMarkers(points) {
       thumbnail: point.thumbnail || "",
       thumbnailWidth: point.thumbnailWidth,
       thumbnailHeight: point.thumbnailHeight,
+      manifests: Array.isArray(point.manifests) ? point.manifests : [],
       type: "custom"
     };
   }).filter(Boolean);
@@ -3072,26 +3151,26 @@ function Map2({
   defaultCenter = null,
   defaultZoom = null
 } = {}) {
-  const containerRef = React34.useRef(null);
-  const mapRef = React34.useRef(null);
-  const layerRef = React34.useRef(null);
-  const [leafletLib, setLeafletLib] = React34.useState(() => resolveGlobalLeaflet());
-  const [leafletError, setLeafletError] = React34.useState(null);
+  const containerRef = React35.useRef(null);
+  const mapRef = React35.useRef(null);
+  const layerRef = React35.useRef(null);
+  const [leafletLib, setLeafletLib] = React35.useState(() => resolveGlobalLeaflet());
+  const [leafletError, setLeafletError] = React35.useState(null);
   const datasetInfo = navDataset && typeof navDataset === "object" ? navDataset : null;
   const datasetHref = datasetInfo && datasetInfo.href || "/api/navplace.json";
   const datasetVersion = datasetInfo && datasetInfo.version;
   const datasetHasFeatures = !!(datasetInfo && datasetInfo.hasFeatures);
-  const [navState, setNavState] = React34.useState(() => ({
+  const [navState, setNavState] = React35.useState(() => ({
     loading: false,
     error: null,
     markers: []
   }));
-  const [iiifTargets, setIiifTargets] = React34.useState(() => ({
+  const [iiifTargets, setIiifTargets] = React35.useState(() => ({
     loading: false,
     error: null,
     keys: []
   }));
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (!iiifContent) {
       setIiifTargets({ loading: false, error: null, keys: [] });
       return;
@@ -3139,7 +3218,7 @@ function Map2({
   const navTargets = iiifTargets.keys || [];
   const navTargetsKey = navTargets.join("|");
   const shouldFetchNav = datasetHasFeatures && navTargets.length > 0;
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (!shouldFetchNav) {
       setNavState({ loading: false, error: null, markers: [] });
       return void 0;
@@ -3171,7 +3250,7 @@ function Map2({
       cancelled = true;
     };
   }, [datasetHref, datasetVersion, navTargetsKey, shouldFetchNav]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (leafletLib) return;
     let cancelled = false;
     waitForLeaflet().then((lib) => {
@@ -3183,7 +3262,7 @@ function Map2({
       cancelled = true;
     };
   }, [leafletLib]);
-  const navMatchMap = React34.useMemo(() => {
+  const navMatchMap = React35.useMemo(() => {
     const matchMap = createMarkerMap();
     (navState.markers || []).forEach((marker) => {
       if (!marker || !Array.isArray(marker.matchKeys)) return;
@@ -3194,7 +3273,7 @@ function Map2({
     });
     return matchMap;
   }, [navState.markers]);
-  const normalizedCustom = React34.useMemo(() => {
+  const normalizedCustom = React35.useMemo(() => {
     return normalizeCustomMarkers(customPoints).map((point) => {
       if (!point || point.thumbnail || !point.href) return point;
       const match = navMatchMap.get(normalizeKey(point.href));
@@ -3209,11 +3288,11 @@ function Map2({
       };
     });
   }, [customPoints, navMatchMap]);
-  const allMarkers = React34.useMemo(() => {
+  const allMarkers = React35.useMemo(() => {
     return [...navState.markers || [], ...normalizedCustom];
   }, [navState.markers, normalizedCustom]);
-  const clusterOptions = React34.useMemo(() => buildClusterOptions(leafletLib), [leafletLib]);
-  React34.useEffect(() => {
+  const clusterOptions = React35.useMemo(() => buildClusterOptions(leafletLib), [leafletLib]);
+  React35.useEffect(() => {
     if (!containerRef.current || mapRef.current || !leafletLib) return void 0;
     const map = leafletLib.map(containerRef.current, {
       zoomControl: true,
@@ -3251,7 +3330,7 @@ function Map2({
       layerRef.current = null;
     };
   }, [tileLayers, scrollWheelZoom, cluster, clusterOptions, leafletLib]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     const map = mapRef.current;
     const layer = layerRef.current;
     if (!map || !layer || !leafletLib) return;
@@ -3267,11 +3346,33 @@ function Map2({
       const icon = buildMarkerIcon(marker, leafletLib);
       const leafletMarker = leafletLib.marker(latlng, icon ? { icon } : void 0);
       const popup = renderPopup(marker);
-      if (popup) {
+      if (popup && popup.element) {
         try {
-          leafletMarker.bindPopup(popup);
+          leafletMarker.bindPopup(popup.element);
+          if (typeof popup.destroy === "function") {
+            let disposed = false;
+            const cleanup = () => {
+              if (disposed) return;
+              disposed = true;
+              try {
+                leafletMarker.off("popupclose", cleanup);
+                leafletMarker.off("popupremove", cleanup);
+                leafletMarker.off("remove", cleanup);
+              } catch (_) {
+              }
+              popup.destroy();
+            };
+            leafletMarker.on("popupclose", cleanup);
+            leafletMarker.on("popupremove", cleanup);
+            leafletMarker.on("remove", cleanup);
+          }
         } catch (_) {
+          if (typeof popup.destroy === "function") {
+            popup.destroy();
+          }
         }
+      } else if (popup && typeof popup.destroy === "function") {
+        popup.destroy();
       }
       try {
         layer.addLayer(leafletMarker);
@@ -3327,14 +3428,14 @@ function Map2({
   ].filter(Boolean).join(" ");
   const statusLabel = leafletError ? leafletError.message || "Failed to load map library" : !leafletLib ? "Loading map\u2026" : iiifTargets.error ? iiifTargets.error : datasetUnavailable ? "Map data is unavailable for this site." : navState.error ? navState.error : isLoadingMarkers ? "Loading map data\u2026" : !iiifContent && !hasCustomPoints ? "Add iiifContent or MapPoint markers to populate this map." : !hasMarkers ? "No map locations available." : "";
   const showStatus = Boolean(statusLabel);
-  return /* @__PURE__ */ React34.createElement("div", { className: rootClass, id: id || void 0, style: style || void 0 }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement("div", { className: rootClass, id: id || void 0, style: style || void 0 }, /* @__PURE__ */ React35.createElement(
     "div",
     {
       ref: containerRef,
       className: "canopy-map__canvas",
       style: { height: height || "600px" }
     }
-  ), showStatus ? /* @__PURE__ */ React34.createElement("div", { className: "canopy-map__status", "aria-live": "polite" }, statusLabel) : null);
+  ), showStatus ? /* @__PURE__ */ React35.createElement("div", { className: "canopy-map__status", "aria-live": "polite" }, statusLabel) : null);
 }
 
 // ui/src/content/map/MapPoint.jsx