@canopy-iiif/app 0.8.3 → 0.8.5

package/ui/dist/index.mjs

@@ -104,11 +104,76 @@ function Card({
   );
 }
 
+// ui/src/layout/AnnotationCard.jsx
+import React3, { useMemo } from "react";
+function escapeRegExp(str = "") {
+  return String(str).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+}
+function buildSnippet({ text = "", query = "", maxLength = 240 }) {
+  const clean = String(text || "").replace(/\s+/g, " ").trim();
+  if (!clean) return "";
+  const term = String(query || "").trim();
+  if (!term)
+    return clean.length > maxLength ? clean.slice(0, maxLength) + "\u2026" : clean;
+  const lower = clean.toLowerCase();
+  const termLower = term.toLowerCase();
+  const idx = lower.indexOf(termLower);
+  if (idx === -1) {
+    return clean.length > maxLength ? clean.slice(0, maxLength) + "\u2026" : clean;
+  }
+  const context = Math.max(0, maxLength / 2);
+  const start = Math.max(0, idx - context);
+  const end = Math.min(clean.length, idx + term.length + context);
+  let snippet = clean.slice(start, end);
+  if (start > 0) snippet = "\u2026" + snippet;
+  if (end < clean.length) snippet = snippet + "\u2026";
+  return snippet;
+}
+function highlightSnippet(snippet, query) {
+  if (!query) return snippet;
+  const term = String(query).trim();
+  if (!term) return snippet;
+  const parts = String(snippet).split(
+    new RegExp(`(${escapeRegExp(term)})`, "gi")
+  );
+  const termLower = term.toLowerCase();
+  return parts.map(
+    (part, idx) => part.toLowerCase() === termLower ? /* @__PURE__ */ React3.createElement("mark", { key: idx }, part) : /* @__PURE__ */ React3.createElement(React3.Fragment, { key: idx }, part)
+  );
+}
+function AnnotationCard({
+  href = "#",
+  title = "Untitled",
+  annotation = "",
+  summary = "",
+  metadata = [],
+  query = ""
+}) {
+  const snippetSource = annotation || summary;
+  const snippet = useMemo(
+    () => buildSnippet({ text: snippetSource, query }),
+    [snippetSource, query]
+  );
+  const highlighted = useMemo(
+    () => highlightSnippet(snippet, query),
+    [snippet, query]
+  );
+  const metaList = Array.isArray(metadata) ? metadata.map((m) => String(m || "")).filter(Boolean) : [];
+  return /* @__PURE__ */ React3.createElement("a", { href }, /* @__PURE__ */ React3.createElement("article", { className: "canopy-annotation-card" }, /* @__PURE__ */ React3.createElement("h3", null, title), snippet ? /* @__PURE__ */ React3.createElement("p", { className: "mt-2 text-sm leading-relaxed text-slate-700" }, highlighted) : null, metaList.length ? /* @__PURE__ */ React3.createElement("ul", { className: "mt-3 flex flex-wrap gap-2 text-xs text-slate-500" }, metaList.slice(0, 4).map((item, idx) => /* @__PURE__ */ React3.createElement(
+    "li",
+    {
+      key: `${item}-${idx}`,
+      className: "rounded-full border border-slate-200 bg-slate-50 px-2 py-1"
+    },
+    item
+  ))) : null));
+}
+
 // ui/src/layout/Grid.jsx
 import Masonry from "react-masonry-css";
-import React3 from "react";
+import React4 from "react";
 function GridItem({ children, className = "", style = {}, ...rest }) {
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "div",
     {
       className: `canopy-grid-item ${className}`.trim(),
@@ -120,7 +185,7 @@ function GridItem({ children, className = "", style = {}, ...rest }) {
 }
 function Grid({
   breakpointCols,
-  gap = "2rem",
+  gap = "1.618rem",
   paddingY = "0",
   className = "",
   style = {},
@@ -136,7 +201,7 @@ function Grid({
     640: 2
   };
   const vars = { "--grid-gap": gap, "--grid-padding-y": paddingY };
-  return /* @__PURE__ */ React3.createElement("div", { className: "canopy-grid-wrap" }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: "canopy-grid-wrap" }, /* @__PURE__ */ React4.createElement(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -148,7 +213,7 @@ function Grid({
           `
       }
     }
-  ), /* @__PURE__ */ React3.createElement(
+  ), /* @__PURE__ */ React4.createElement(
     Masonry,
     {
       breakpointCols: cols,
@@ -162,7 +227,7 @@ function Grid({
 }
 
 // ui/src/iiif/Viewer.jsx
-import React4, { useEffect as useEffect2, useState as useState2 } from "react";
+import React5, { useEffect as useEffect2, useState as useState2 } from "react";
 var DEFAULT_VIEWER_OPTIONS = {
   showDownload: false,
   showIIIFBadge: false,
@@ -218,7 +283,7 @@ var Viewer = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React4.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
       "script",
       {
         type: "application/json",
@@ -226,11 +291,11 @@ var Viewer = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React4.createElement(CloverViewer, { ...props, options: mergedOptions });
+  return /* @__PURE__ */ React5.createElement(CloverViewer, { ...props, options: mergedOptions });
 };
 
 // ui/src/iiif/Slider.jsx
-import React5, { useEffect as useEffect3, useState as useState3 } from "react";
+import React6, { useEffect as useEffect3, useState as useState3 } from "react";
 var Slider = (props) => {
   const [CloverSlider, setCloverSlider] = useState3(null);
   useEffect3(() => {
@@ -256,7 +321,7 @@ var Slider = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement(
       "script",
       {
         type: "application/json",
@@ -264,11 +329,11 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React5.createElement(CloverSlider, { ...props });
+  return /* @__PURE__ */ React6.createElement(CloverSlider, { ...props });
 };
 
 // ui/src/iiif/MdxRelatedItems.jsx
-import React6 from "react";
+import React7 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -276,11 +341,11 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React6.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React7.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React7.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React7 from "react";
+import React8 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -288,11 +353,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React7.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React7.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React8 from "react";
+import React9 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -300,11 +365,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React9 from "react";
+import React10 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -312,31 +377,50 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchResults.jsx
-import React10 from "react";
+import React11 from "react";
 function SearchResults({
   results = [],
   type = "all",
-  layout = "grid"
+  layout = "grid",
+  query = ""
 }) {
   if (!results.length) {
-    return /* @__PURE__ */ React10.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React10.createElement("em", null, "No results"));
+    return /* @__PURE__ */ React11.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React11.createElement("em", null, "No results"));
+  }
+  const isAnnotationView = String(type).toLowerCase() === "annotation";
+  if (isAnnotationView) {
+    return /* @__PURE__ */ React11.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
+      if (!r || !r.annotation) return null;
+      return /* @__PURE__ */ React11.createElement(
+        AnnotationCard,
+        {
+          key: r.id || i,
+          href: r.href,
+          title: r.title || r.href || "Untitled",
+          annotation: r.annotation,
+          summary: r.summary,
+          metadata: Array.isArray(r.metadata) ? r.metadata : [],
+          query
+        }
+      );
+    }));
   }
   if (layout === "list") {
-    return /* @__PURE__ */ React10.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+    return /* @__PURE__ */ React11.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
       const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
       const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(
         "li",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
-        /* @__PURE__ */ React10.createElement(
+        /* @__PURE__ */ React11.createElement(
           Card,
           {
             href: r.href,
@@ -350,17 +434,17 @@ function SearchResults({
       );
     }));
   }
-  return /* @__PURE__ */ React10.createElement("div", { id: "search-results" }, /* @__PURE__ */ React10.createElement(Grid, null, results.map((r, i) => {
+  return /* @__PURE__ */ React11.createElement("div", { id: "search-results" }, /* @__PURE__ */ React11.createElement(Grid, null, results.map((r, i) => {
     const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
     const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
-    return /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React11.createElement(
       GridItem,
       {
         key: i,
         className: `search-result ${r.type}`,
         "data-thumbnail-aspect-ratio": aspect
       },
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(
         Card,
         {
           href: r.href,
@@ -376,7 +460,7 @@ function SearchResults({
 }
 
 // ui/src/search/SearchTabs.jsx
-import React11 from "react";
+import React12 from "react";
 function SearchTabs({
   type = "all",
   onTypeChange,
@@ -391,26 +475,25 @@ function SearchTabs({
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
   const hasFilters = typeof onOpenFilters === "function";
   const filterBadge = activeFilterCount > 0 ? ` (${activeFilterCount})` : "";
-  return /* @__PURE__ */ React11.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-1" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React12.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": "Search types",
-      className: "flex items-center gap-2"
+      className: "canopy-search-tabs"
     },
     orderedTypes.map((t) => {
       const active = String(type).toLowerCase() === String(t).toLowerCase();
       const cRaw = counts && Object.prototype.hasOwnProperty.call(counts, t) ? counts[t] : void 0;
       const c = Number.isFinite(Number(cRaw)) ? Number(cRaw) : 0;
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         "button",
         {
           key: t,
           role: "tab",
           "aria-selected": active,
           type: "button",
-          onClick: () => onTypeChange && onTypeChange(t),
-          className: "px-3 py-2 text-sm rounded-t-md border-b-2 -mb-px transition-colors " + (active ? "border-brand-600 text-brand-700" : "border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300")
+          onClick: () => onTypeChange && onTypeChange(t)
         },
         toLabel(t),
         " (",
@@ -418,7 +501,7 @@ function SearchTabs({
         ")"
       );
     })
-  ), hasFilters ? /* @__PURE__ */ React11.createElement(
+  ), hasFilters ? /* @__PURE__ */ React12.createElement(
     "button",
     {
       type: "button",
@@ -426,12 +509,12 @@ function SearchTabs({
       "aria-expanded": filtersOpen ? "true" : "false",
       className: "inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:border-brand-200 hover:bg-brand-50 hover:text-brand-700"
     },
-    /* @__PURE__ */ React11.createElement("span", null, filtersLabel, filterBadge)
+    /* @__PURE__ */ React12.createElement("span", null, filtersLabel, filterBadge)
   ) : null);
 }
 
 // ui/src/search/SearchFiltersDialog.jsx
-import React12 from "react";
+import React13 from "react";
 function toArray(input) {
   if (!input) return [];
   if (Array.isArray(input)) return input;
@@ -470,20 +553,20 @@ function FacetSection({ facet, selected, onToggle }) {
   const selectedValues = selected.get(String(slug)) || /* @__PURE__ */ new Set();
   const checkboxId = (valueSlug) => `filter-${slug}-${valueSlug}`;
   const hasSelection = selectedValues.size > 0;
-  const [quickQuery, setQuickQuery] = React12.useState("");
+  const [quickQuery, setQuickQuery] = React13.useState("");
   const hasQuery = quickQuery.trim().length > 0;
-  const filteredValues = React12.useMemo(
+  const filteredValues = React13.useMemo(
     () => facetMatches(values, quickQuery),
     [values, quickQuery]
   );
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "details",
     {
       className: "canopy-search-filters__facet",
       open: hasSelection
     },
-    /* @__PURE__ */ React12.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React12.createElement("span", null, label), /* @__PURE__ */ React12.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
-    /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement("summary", { className: "canopy-search-filters__facet-summary" }, /* @__PURE__ */ React13.createElement("span", null, label), /* @__PURE__ */ React13.createElement("span", { className: "canopy-search-filters__facet-count" }, values.length)),
+    /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters__facet-content" }, /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters__quick" }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "search",
@@ -493,7 +576,7 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-input",
         "aria-label": `Filter ${label} values`
       }
-    ), quickQuery ? /* @__PURE__ */ React12.createElement(
+    ), quickQuery ? /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "button",
@@ -501,11 +584,11 @@ function FacetSection({ facet, selected, onToggle }) {
         className: "canopy-search-filters__quick-clear"
       },
       "Clear"
-    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React12.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React12.createElement("ul", { className: "canopy-search-filters__facet-list" }, filteredValues.map((entry) => {
+    ) : null), hasQuery && !filteredValues.length ? /* @__PURE__ */ React13.createElement("p", { className: "canopy-search-filters__facet-notice" }, "No matches found.") : null, /* @__PURE__ */ React13.createElement("ul", { className: "canopy-search-filters__facet-list" }, filteredValues.map((entry) => {
       const valueSlug = String(entry.slug || entry.value || "");
       const isChecked = selectedValues.has(valueSlug);
       const inputId = checkboxId(valueSlug);
-      return /* @__PURE__ */ React12.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.createElement("li", { key: valueSlug, className: "canopy-search-filters__facet-item" }, /* @__PURE__ */ React13.createElement(
         "input",
         {
           id: inputId,
@@ -517,15 +600,15 @@ function FacetSection({ facet, selected, onToggle }) {
             if (onToggle) onToggle(slug, valueSlug, nextChecked);
           }
         }
-      ), /* @__PURE__ */ React12.createElement(
+      ), /* @__PURE__ */ React13.createElement(
         "label",
         {
           htmlFor: inputId,
           className: "canopy-search-filters__facet-label"
         },
-        /* @__PURE__ */ React12.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React12.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
+        /* @__PURE__ */ React13.createElement("span", null, entry.value, " ", Number.isFinite(entry.doc_count) ? /* @__PURE__ */ React13.createElement("span", { className: "canopy-search-filters__facet-count" }, "(", entry.doc_count, ")") : null)
       ));
-    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React12.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
+    }), !filteredValues.length && !hasQuery ? /* @__PURE__ */ React13.createElement("li", { className: "canopy-search-filters__facet-empty" }, "No values available.") : null))
   );
 }
 function SearchFiltersDialog(props = {}) {
@@ -545,7 +628,7 @@ function SearchFiltersDialog(props = {}) {
     0
   );
   if (!open) return null;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       role: "dialog",
@@ -556,7 +639,7 @@ function SearchFiltersDialog(props = {}) {
           onOpenChange(false);
       }
     },
-    /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters" }, /* @__PURE__ */ React12.createElement("header", { className: "canopy-search-filters__header" }, /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("h2", { className: "canopy-search-filters__title" }, title), /* @__PURE__ */ React12.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitle)), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters" }, /* @__PURE__ */ React13.createElement("header", { className: "canopy-search-filters__header" }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("h2", { className: "canopy-search-filters__title" }, title), /* @__PURE__ */ React13.createElement("p", { className: "canopy-search-filters__subtitle" }, subtitle)), /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "button",
@@ -564,7 +647,7 @@ function SearchFiltersDialog(props = {}) {
         className: "canopy-search-filters__close"
       },
       "Close"
-    )), /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React12.createElement(
+    )), /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters__body" }, Array.isArray(facets) && facets.length ? /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters__facets" }, facets.map((facet) => /* @__PURE__ */ React13.createElement(
       FacetSection,
       {
         key: facet.slug || facet.label,
@@ -572,7 +655,7 @@ function SearchFiltersDialog(props = {}) {
         selected: selectedMap,
         onToggle
       }
-    ))) : /* @__PURE__ */ React12.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")), /* @__PURE__ */ React12.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React12.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React12.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React12.createElement(
+    ))) : /* @__PURE__ */ React13.createElement("p", { className: "canopy-search-filters__empty" }, "No filters are available for this collection.")), /* @__PURE__ */ React13.createElement("footer", { className: "canopy-search-filters__footer" }, /* @__PURE__ */ React13.createElement("div", null, activeCount ? `${activeCount} filter${activeCount === 1 ? "" : "s"} applied` : "No filters applied"), /* @__PURE__ */ React13.createElement("div", { className: "canopy-search-filters__footer-actions" }, /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "button",
@@ -583,7 +666,7 @@ function SearchFiltersDialog(props = {}) {
         className: "canopy-search-filters__button canopy-search-filters__button--secondary"
       },
       "Clear all"
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "button",
@@ -596,14 +679,14 @@ function SearchFiltersDialog(props = {}) {
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React16 from "react";
+import React17 from "react";
 
 // ui/src/Icons.jsx
-import React13 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+import React14 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React14.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React14.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
-import React14 from "react";
+import React15 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -662,21 +745,22 @@ function SearchPanelForm(props = {}) {
     buttonLabel = "Search",
     label,
     searchPath = "/search",
-    inputId: inputIdProp
+    inputId: inputIdProp,
+    clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React14.useMemo(
+  const action = React15.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React14.useId === "function" ? React14.useId() : void 0;
-  const [fallbackId] = React14.useState(
+  const autoId = typeof React15.useId === "function" ? React15.useId() : void 0;
+  const [fallbackId] = React15.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React14.useRef(null);
-  const [hasValue, setHasValue] = React14.useState(false);
-  const focusInput = React14.useCallback(() => {
+  const inputRef = React15.useRef(null);
+  const [hasValue, setHasValue] = React15.useState(false);
+  const focusInput = React15.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -689,30 +773,44 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React14.useCallback(
+  const handlePointerDown = React15.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
         if (target.closest("[data-canopy-search-form-trigger]")) return;
+        if (target.closest("[data-canopy-search-form-clear]")) return;
       }
       event.preventDefault();
       focusInput();
     },
     [focusInput]
   );
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React14.useCallback((event) => {
+  const handleInputChange = React15.useCallback((event) => {
     var _a;
-    const nextHasValue = Boolean(((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim());
+    const nextHasValue = Boolean(
+      ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim()
+    );
     setHasValue(nextHasValue);
   }, []);
-  return /* @__PURE__ */ React14.createElement(
+  const handleClear = React15.useCallback((event) => {
+  }, []);
+  const handleClearKey = React15.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClear(event);
+      }
+    },
+    [handleClear]
+  );
+  return /* @__PURE__ */ React15.createElement(
     "form",
     {
       action,
@@ -722,59 +820,63 @@ function SearchPanelForm(props = {}) {
       spellCheck: "false",
       className: "canopy-search-form canopy-search-form-shell",
       onPointerDown: handlePointerDown,
-      "data-placeholder": placeholder || "",
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React14.createElement(
-      "label",
+    /* @__PURE__ */ React15.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React15.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React15.createElement(
+      "input",
       {
-        htmlFor: inputId,
-        className: "canopy-search-form__label"
+        id: inputId,
+        type: "search",
+        name: "q",
+        inputMode: "search",
+        "data-canopy-search-form-input": true,
+        placeholder,
+        className: "canopy-search-form__input",
+        "aria-label": "Search",
+        ref: inputRef,
+        onChange: handleInputChange,
+        onInput: handleInputChange
+      }
+    )),
+    hasValue ? /* @__PURE__ */ React15.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-search-form__clear",
+        onClick: handleClear,
+        onPointerDown: (event) => event.stopPropagation(),
+        onKeyDown: handleClearKey,
+        "aria-label": clearLabel,
+        "data-canopy-search-form-clear": true
       },
-      /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }),
-      /* @__PURE__ */ React14.createElement(
-        "input",
-        {
-          id: inputId,
-          type: "search",
-          name: "q",
-          inputMode: "search",
-          "data-canopy-search-form-input": true,
-          placeholder,
-          className: "canopy-search-form__input",
-          "aria-label": "Search",
-          ref: inputRef,
-          onChange: handleInputChange,
-          onInput: handleInputChange
-        }
-      )
-    ),
-    /* @__PURE__ */ React14.createElement(
+      "\xD7"
+    ) : null,
+    /* @__PURE__ */ React15.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React14.createElement("span", null, text),
-      /* @__PURE__ */ React14.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React14.createElement("span", null, "\u2318"), /* @__PURE__ */ React14.createElement("span", null, "K"))
+      /* @__PURE__ */ React15.createElement("span", null, text),
+      /* @__PURE__ */ React15.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React15.createElement("span", null, "\u2318"), /* @__PURE__ */ React15.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React15 from "react";
+import React16 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React15.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React16.createElement("div", { id: "cplist" })
   );
 }
 
@@ -794,11 +896,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__ */ React16.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/search/SearchPanel.jsx
-import React17 from "react";
+import React18 from "react";
 function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -815,9 +917,10 @@ function SearchPanel(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__ */ React17.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React18.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React18.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React18.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React18.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React18.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 export {
+  AnnotationCard,
   Card,
   Grid,
   GridItem,