@canopy-iiif/app 0.10.19 → 0.10.21

package/ui/dist/index.mjs

@@ -106,69 +106,186 @@ function Card({
   );
 }
 
-// ui/src/layout/TextCard.jsx
+// ui/src/layout/ArticleCard.jsx
 import React3, { useMemo } from "react";
 function escapeRegExp(str = "") {
   return String(str).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
 }
-function buildSnippet({ text = "", query = "", maxLength = 240 }) {
+function buildSnippet({ text = "", query = "", maxLength = 360 }) {
   const clean = String(text || "").replace(/\s+/g, " ").trim();
   if (!clean) return "";
+  const safeMax = Math.max(60, Number(maxLength) || 360);
   const term = String(query || "").trim();
   if (!term)
-    return clean.length > maxLength ? clean.slice(0, maxLength) + "\u2026" : clean;
+    return clean.length > safeMax ? clean.slice(0, safeMax).trimEnd() + "\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;
+  if (idx === -1)
+    return clean.length > safeMax ? clean.slice(0, safeMax).trimEnd() + "\u2026" : clean;
+  const padding = Math.max(0, Math.floor((safeMax - term.length) / 2));
+  let start = Math.max(0, idx - padding);
+  let end = start + safeMax;
+  if (end > clean.length) {
+    end = clean.length;
+    start = Math.max(0, end - safeMax);
   }
-  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);
+  let snippet = clean.slice(start, end).trim();
   if (start > 0) snippet = "\u2026" + snippet;
   if (end < clean.length) snippet = snippet + "\u2026";
   return snippet;
 }
-function highlightSnippet(snippet, query) {
-  if (!query) return snippet;
+function highlightTextNode(text, query, keyPrefix = "") {
+  if (!query) return text;
   const term = String(query).trim();
-  if (!term) return snippet;
-  const parts = String(snippet).split(
-    new RegExp(`(${escapeRegExp(term)})`, "gi")
-  );
+  if (!term) return text;
+  const regex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+  const parts = String(text).split(regex);
   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)
-  );
+  return parts.map((part, idx) => {
+    if (!part) return null;
+    if (part.toLowerCase() === termLower) {
+      return /* @__PURE__ */ React3.createElement("mark", { key: `${keyPrefix}-${idx}` }, part);
+    }
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, { key: `${keyPrefix}-${idx}` }, part);
+  });
+}
+function tokenizeInlineMarkdown(input = "") {
+  const tokens = [];
+  let text = input;
+  while (text.length) {
+    if (text.startsWith("\n")) {
+      tokens.push({ type: "break" });
+      text = text.slice(1);
+      continue;
+    }
+    if (text.startsWith("**")) {
+      const closing = text.indexOf("**", 2);
+      if (closing !== -1) {
+        const inner = text.slice(2, closing);
+        tokens.push({ type: "strong", children: tokenizeInlineMarkdown(inner) });
+        text = text.slice(closing + 2);
+        continue;
+      }
+    }
+    if (text.startsWith("__")) {
+      const closing = text.indexOf("__", 2);
+      if (closing !== -1) {
+        const inner = text.slice(2, closing);
+        tokens.push({ type: "strong", children: tokenizeInlineMarkdown(inner) });
+        text = text.slice(closing + 2);
+        continue;
+      }
+    }
+    if (text.startsWith("*")) {
+      if (!text.startsWith("**")) {
+        const closing = text.indexOf("*", 1);
+        if (closing !== -1) {
+          const inner = text.slice(1, closing);
+          tokens.push({ type: "em", children: tokenizeInlineMarkdown(inner) });
+          text = text.slice(closing + 1);
+          continue;
+        }
+      }
+    }
+    if (text.startsWith("_")) {
+      if (!text.startsWith("__")) {
+        const closing = text.indexOf("_", 1);
+        if (closing !== -1) {
+          const inner = text.slice(1, closing);
+          tokens.push({ type: "em", children: tokenizeInlineMarkdown(inner) });
+          text = text.slice(closing + 1);
+          continue;
+        }
+      }
+    }
+    if (text.startsWith("`")) {
+      const closing = text.indexOf("`", 1);
+      if (closing !== -1) {
+        const inner = text.slice(1, closing);
+        tokens.push({ type: "code", value: inner });
+        text = text.slice(closing + 1);
+        continue;
+      }
+    }
+    if (text.startsWith("[")) {
+      const endLabel = text.indexOf("]");
+      const startHref = endLabel !== -1 ? text.indexOf("(", endLabel) : -1;
+      const endHref = startHref !== -1 ? text.indexOf(")", startHref) : -1;
+      if (endLabel !== -1 && startHref === endLabel + 1 && endHref !== -1) {
+        const label = text.slice(1, endLabel);
+        const href = text.slice(startHref + 1, endHref);
+        tokens.push({
+          type: "link",
+          href,
+          children: tokenizeInlineMarkdown(label)
+        });
+        text = text.slice(endHref + 1);
+        continue;
+      }
+    }
+    const specials = ["**", "__", "*", "_", "`", "[", "\n"];
+    const nextIndex = specials.map((needle) => needle === "\n" ? text.indexOf("\n") : text.indexOf(needle)).filter((idx) => idx > 0).reduce((min, idx) => min === -1 || idx < min ? idx : min, -1);
+    if (nextIndex === -1) {
+      tokens.push({ type: "text", value: text });
+      break;
+    }
+    tokens.push({ type: "text", value: text.slice(0, nextIndex) });
+    text = text.slice(nextIndex);
+  }
+  return tokens;
+}
+function renderMarkdownTokens(tokens, query, keyPrefix = "token") {
+  return tokens.map((token, idx) => {
+    const key = `${keyPrefix}-${idx}`;
+    switch (token.type) {
+      case "strong":
+        return /* @__PURE__ */ React3.createElement("strong", { key }, renderMarkdownTokens(token.children || [], query, key));
+      case "em":
+        return /* @__PURE__ */ React3.createElement("em", { key }, renderMarkdownTokens(token.children || [], query, key));
+      case "code":
+        return /* @__PURE__ */ React3.createElement("code", { key }, token.value);
+      case "link":
+        return /* @__PURE__ */ React3.createElement("a", { key, href: token.href, target: "_blank", rel: "noreferrer" }, renderMarkdownTokens(token.children || [], query, key));
+      case "break":
+        return /* @__PURE__ */ React3.createElement("br", { key });
+      case "text":
+      default:
+        return /* @__PURE__ */ React3.createElement(React3.Fragment, { key }, highlightTextNode(token.value || "", query, key));
+    }
+  });
 }
-function TextCard({
+function formatDisplayUrl(href = "") {
+  try {
+    const url = new URL(href, href.startsWith("http") ? void 0 : "http://example.com");
+    if (!href.startsWith("http")) return href;
+    const displayPath = url.pathname.replace(/\/$/, "");
+    return `${url.host}${displayPath}${url.search}`.replace(/\/$/, "");
+  } catch (_) {
+    return href;
+  }
+}
+function ArticleCard({
   href = "#",
   title = "Untitled",
   annotation = "",
   summary = "",
+  summaryMarkdown = "",
   metadata = [],
   query = ""
 }) {
-  const snippetSource = annotation || summary;
+  const snippetSource = summaryMarkdown || annotation || summary;
   const snippet = useMemo(
     () => buildSnippet({ text: snippetSource, query }),
     [snippetSource, query]
   );
-  const highlighted = useMemo(
-    () => highlightSnippet(snippet, query),
-    [snippet, query]
+  const snippetTokens = useMemo(
+    () => tokenizeInlineMarkdown(snippet),
+    [snippet]
   );
   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));
+  const displayUrl = useMemo(() => formatDisplayUrl(href), [href]);
+  return /* @__PURE__ */ React3.createElement("a", { href, className: "canopy-article-card" }, /* @__PURE__ */ React3.createElement("article", null, displayUrl ? /* @__PURE__ */ React3.createElement("p", { className: "canopy-article-card__url" }, displayUrl) : null, /* @__PURE__ */ React3.createElement("h3", null, title), snippet ? /* @__PURE__ */ React3.createElement("p", { className: "canopy-article-card__snippet" }, renderMarkdownTokens(snippetTokens, query)) : null, metaList.length ? /* @__PURE__ */ React3.createElement("ul", { className: "canopy-article-card__meta" }, metaList.slice(0, 3).map((item, idx) => /* @__PURE__ */ React3.createElement("li", { key: `${item}-${idx}` }, item))) : null));
 }
 
 // ui/src/layout/Grid.jsx
@@ -1221,71 +1338,103 @@ function MdxSearchTabs(props) {
 
 // ui/src/search/SearchResults.jsx
 import React24 from "react";
+function DefaultArticleTemplate({ record, query }) {
+  if (!record) return null;
+  const metadata = Array.isArray(record.metadata) ? record.metadata : [];
+  return /* @__PURE__ */ React24.createElement(
+    ArticleCard,
+    {
+      href: record.href,
+      title: record.title || record.href || "Untitled",
+      annotation: record.annotation,
+      summary: record.summary || record.summaryValue || "",
+      summaryMarkdown: record.summaryMarkdown || record.summary || record.summaryValue || "",
+      metadata,
+      query
+    }
+  );
+}
+function DefaultFigureTemplate({ record, thumbnailAspectRatio }) {
+  if (!record) return null;
+  const hasDims = Number.isFinite(Number(record.thumbnailWidth)) && Number(record.thumbnailWidth) > 0 && Number.isFinite(Number(record.thumbnailHeight)) && Number(record.thumbnailHeight) > 0;
+  const aspect = Number.isFinite(Number(thumbnailAspectRatio)) && Number(thumbnailAspectRatio) > 0 ? Number(thumbnailAspectRatio) : hasDims ? Number(record.thumbnailWidth) / Number(record.thumbnailHeight) : void 0;
+  return /* @__PURE__ */ React24.createElement(
+    Card,
+    {
+      href: record.href,
+      title: record.title || record.href,
+      src: record.type === "work" ? record.thumbnail : void 0,
+      imgWidth: record.thumbnailWidth,
+      imgHeight: record.thumbnailHeight,
+      aspectRatio: aspect
+    }
+  );
+}
 function SearchResults({
   results = [],
   type = "all",
   layout = "grid",
-  query = ""
+  query = "",
+  templates = {},
+  variant = "auto"
 }) {
   if (!results.length) {
     return /* @__PURE__ */ React24.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React24.createElement("em", null, "No results"));
   }
   const normalizedType = String(type || "all").toLowerCase();
+  const normalizedVariant = variant === "figure" || variant === "article" ? variant : "auto";
   const isAnnotationView = normalizedType === "annotation";
+  const FigureTemplate = templates && templates.figure ? templates.figure : DefaultFigureTemplate;
+  const ArticleTemplate = templates && templates.article ? templates.article : DefaultArticleTemplate;
   if (isAnnotationView) {
     return /* @__PURE__ */ React24.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
       if (!r) return null;
-      return renderTextCard(r, r.id || i);
+      return /* @__PURE__ */ React24.createElement(
+        ArticleTemplate,
+        {
+          key: r.id || i,
+          record: r,
+          query,
+          layout
+        }
+      );
     }));
   }
-  const renderTextCard = (record, key) => {
-    if (!record) return null;
-    return /* @__PURE__ */ React24.createElement(
-      TextCard,
-      {
-        key,
-        href: record.href,
-        title: record.title || record.href || "Untitled",
-        annotation: record.annotation,
-        summary: record.summary || record.summaryValue || "",
-        metadata: Array.isArray(record.metadata) ? record.metadata : [],
-        query
-      }
-    );
-  };
   const isWorkRecord = (record) => String(record && record.type).toLowerCase() === "work";
-  const shouldRenderAsTextCard = (record) => !isWorkRecord(record) || normalizedType !== "work";
+  const shouldRenderAsArticle = (record) => {
+    if (normalizedVariant === "article") return true;
+    if (normalizedVariant === "figure") return false;
+    return !isWorkRecord(record) || normalizedType !== "work";
+  };
   if (layout === "list") {
-    return /* @__PURE__ */ React24.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
-      if (shouldRenderAsTextCard(r)) {
-        return /* @__PURE__ */ React24.createElement("li", { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+    return /* @__PURE__ */ React24.createElement("div", { id: "search-results", className: "space-y-6" }, results.map((r, i) => {
+      if (shouldRenderAsArticle(r)) {
+        return /* @__PURE__ */ React24.createElement("div", { key: i, className: `search-result ${r && r.type}` }, /* @__PURE__ */ React24.createElement(ArticleTemplate, { record: r, query, layout }));
       }
       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__ */ React24.createElement(
-        "li",
+        "div",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
         /* @__PURE__ */ React24.createElement(
-          Card,
+          FigureTemplate,
           {
-            href: r.href,
-            title: r.title || r.href,
-            src: r.type === "work" ? r.thumbnail : void 0,
-            imgWidth: r.thumbnailWidth,
-            imgHeight: r.thumbnailHeight,
-            aspectRatio: aspect
+            record: r,
+            query,
+            layout,
+            thumbnailAspectRatio: aspect
           }
         )
       );
     }));
   }
   return /* @__PURE__ */ React24.createElement("div", { id: "search-results" }, /* @__PURE__ */ React24.createElement(Grid, null, results.map((r, i) => {
-    if (shouldRenderAsTextCard(r)) {
-      return /* @__PURE__ */ React24.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+    if (shouldRenderAsArticle(r)) {
+      return /* @__PURE__ */ React24.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, /* @__PURE__ */ React24.createElement(ArticleTemplate, { record: r, query, layout }));
     }
     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;
@@ -1297,14 +1446,12 @@ function SearchResults({
         "data-thumbnail-aspect-ratio": aspect
       },
       /* @__PURE__ */ React24.createElement(
-        Card,
+        FigureTemplate,
         {
-          href: r.href,
-          title: r.title || r.href,
-          src: r.type === "work" ? r.thumbnail : void 0,
-          imgWidth: r.thumbnailWidth,
-          imgHeight: r.thumbnailHeight,
-          aspectRatio: aspect
+          record: r,
+          query,
+          layout,
+          thumbnailAspectRatio: aspect
         }
       )
     );
@@ -1574,6 +1721,7 @@ function MarkdownTable({ className = "", ...rest }) {
   return /* @__PURE__ */ React28.createElement("div", { className: "markdown-table__frame" }, /* @__PURE__ */ React28.createElement("table", { className: merged, ...rest }));
 }
 export {
+  ArticleCard,
   Button,
   ButtonWrapper,
   CanopyBrand,
@@ -1600,7 +1748,6 @@ export {
   MdxSearchTabs as SearchTabs,
   SearchTabs as SearchTabsUI,
   Slider,
-  TextCard,
   Viewer
 };
 //# sourceMappingURL=index.mjs.map