@canopy-iiif/app 0.8.4 → 0.8.6

package/lib/build/mdx.js

@@ -358,6 +358,7 @@ async function ensureClientRuntime() {
   const outFile = path.join(scriptsDir, "canopy-viewer.js");
   const entry = `
     import CloverViewer from '@samvera/clover-iiif/viewer';
+    import CloverScroll from '@samvera/clover-iiif/scroll';
 
     function ready(fn) {
       if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn, { once: true });
@@ -373,22 +374,29 @@ async function ensureClientRuntime() {
       } catch (_) { return {}; }
     }
 
-    ready(function() {
+    function mountAll(selector, Component) {
       try {
-        const nodes = document.querySelectorAll('[data-canopy-viewer]');
-        if (!nodes || !nodes.length) return;
+        const nodes = document.querySelectorAll(selector);
+        if (!nodes || !nodes.length || !Component) return;
+        const React = (window && window.React) || null;
+        const ReactDOMClient = (window && window.ReactDOMClient) || null;
+        const createRoot = ReactDOMClient && ReactDOMClient.createRoot;
+        if (!React || !createRoot) return;
         for (const el of nodes) {
           try {
+            if (el.__canopyHydrated) continue;
             const props = parseProps(el);
-            const React = (window && window.React) || null;
-            const ReactDOMClient = (window && window.ReactDOMClient) || null;
-            const createRoot = ReactDOMClient && ReactDOMClient.createRoot;
-            if (!React || !createRoot) continue;
             const root = createRoot(el);
-            root.render(React.createElement(CloverViewer, props));
+            root.render(React.createElement(Component, props));
+            el.__canopyHydrated = true;
           } catch (_) { /* skip */ }
         }
       } catch (_) { /* no-op */ }
+    }
+
+    ready(function() {
+      mountAll('[data-canopy-viewer]', CloverViewer);
+      mountAll('[data-canopy-scroll]', CloverScroll);
     });
   `;
   const reactShim = `

package/lib/build/pages.js

@@ -59,7 +59,8 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
     mergedProps.navigation = navData;
   }
   const { body, head } = await mdx.compileMdxFile(filePath, outPath, null, mergedProps);
-  const needsHydrateViewer = body.includes('data-canopy-viewer');
+  const needsHydrateViewer =
+    body.includes('data-canopy-viewer') || body.includes('data-canopy-scroll');
   const needsHydrateSlider = body.includes('data-canopy-slider');
   const needsSearchForm = true; // search form runtime is global
   const needsFacets = body.includes('data-canopy-related-items');

package/lib/build/styles.js

@@ -97,6 +97,52 @@ async function ensureStyles() {
     }
   }
 
+  function injectThemeTokens(targetPath) {
+    try {
+      const { loadCanopyTheme } = require("@canopy-iiif/app/ui/theme");
+      const theme = loadCanopyTheme();
+      const themeCss = theme && theme.css ? theme.css.trim() : "";
+      if (!themeCss) return;
+
+      let existing = "";
+      try {
+        existing = fs.readFileSync(targetPath, "utf8");
+      } catch (_) {}
+
+      const marker = "/* canopy-theme */";
+      const markerEnd = "/* canopy-theme:end */";
+      const markerRegex = new RegExp(`${marker}[\\s\\S]*?${markerEnd}\\n?`, "g");
+      const sanitized = existing.replace(markerRegex, "");
+
+      const layerRegex = /@layer properties\{([\s\S]*?)\}(?=@|$)/;
+      const match = layerRegex.exec(sanitized);
+      let before = sanitized;
+      let after = "";
+      let customRulesBlock = "";
+
+      if (match) {
+        before = sanitized.slice(0, match.index);
+        after = sanitized.slice(match.index + match[0].length);
+        const layerBody = match[1] || "";
+        const boundaryMatch = /}\s*:/.exec(layerBody);
+        if (boundaryMatch) {
+          const start = boundaryMatch.index + boundaryMatch[0].length - 1;
+          const customSegment = layerBody.slice(start).trim();
+          if (customSegment) {
+            const normalized = customSegment.endsWith("}")
+              ? customSegment
+              : `${customSegment}}`;
+            customRulesBlock = `@layer properties {\n  ${normalized}\n}\n`;
+          }
+        }
+      }
+
+      const themeBlock = `${marker}\n${themeCss}\n${markerEnd}\n`;
+      const next = `${before}${themeBlock}${customRulesBlock}${after}`;
+      fs.writeFileSync(targetPath, next, "utf8");
+    } catch (_) {}
+  }
+
   if (configPath && (inputCss || generatedInput)) {
     const ok = buildTailwindCli({
       input: inputCss || generatedInput,
@@ -104,7 +150,10 @@ async function ensureStyles() {
       config: configPath,
       minify: true,
     });
-    if (ok) return; // Tailwind compiled CSS
+    if (ok) {
+      injectThemeTokens(dest);
+      return; // Tailwind compiled CSS
+    }
   }
 
   function isTailwindSource(p) {
@@ -118,18 +167,21 @@ async function ensureStyles() {
   if (fs.existsSync(customAppCss)) {
     if (!isTailwindSource(customAppCss)) {
       await fsp.copyFile(customAppCss, dest);
+      injectThemeTokens(dest);
       return;
     }
   }
   if (fs.existsSync(customContentCss)) {
     if (!isTailwindSource(customContentCss)) {
       await fsp.copyFile(customContentCss, dest);
+      injectThemeTokens(dest);
       return;
     }
   }
 
   const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
   await fsp.writeFile(dest, css, "utf8");
+  injectThemeTokens(dest);
 }
 
 module.exports = { ensureStyles };

package/lib/common.js

@@ -8,6 +8,23 @@ const CACHE_DIR = path.resolve('.cache/mdx');
 const ASSETS_DIR = path.resolve('assets');
 
 const BASE_PATH = String(process.env.CANOPY_BASE_PATH || '').replace(/\/$/, '');
+let cachedAppearance = null;
+
+function resolveThemeAppearance() {
+  if (cachedAppearance) return cachedAppearance;
+  cachedAppearance = 'light';
+  try {
+    const { loadCanopyTheme } = require('@canopy-iiif/app/ui/theme');
+    if (typeof loadCanopyTheme === 'function') {
+      const theme = loadCanopyTheme();
+      const appearance = theme && theme.appearance ? String(theme.appearance) : '';
+      if (appearance.toLowerCase() === 'dark') {
+        cachedAppearance = 'dark';
+      }
+    }
+  } catch (_) {}
+  return cachedAppearance;
+}
 
 function readYamlConfigBaseUrl() {
   try {
@@ -51,7 +68,9 @@ function htmlShell({ title, body, cssHref, scriptHref, headExtra }) {
   const scriptTag = scriptHref ? `<script defer src="${scriptHref}"></script>` : '';
   const extra = headExtra ? String(headExtra) : '';
   const cssTag = cssHref ? `<link rel="stylesheet" href="${cssHref}">` : '';
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${title}</title>${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
+  const appearance = resolveThemeAppearance();
+  const htmlClass = appearance === 'dark' ? ' class="dark"' : '';
+  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${title}</title>${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
 }
 
 function withBase(href) {
@@ -111,16 +130,19 @@ function absoluteUrl(p) {
   }
 }
 
-// Apply BASE_PATH to any absolute href/src attributes found in an HTML string.
+// Apply BASE_PATH to key URL-bearing attributes (href/src/action/formaction) in an HTML string.
 function applyBaseToHtml(html) {
   if (!BASE_PATH) return html;
   try {
     const out = String(html || '');
-    const normalizedBase = BASE_PATH.startsWith('/')
-      ? BASE_PATH.replace(/\/$/, '')
-      : `/${BASE_PATH.replace(/\/$/, '')}`;
+    const baseRaw = BASE_PATH.startsWith('/') ? BASE_PATH : `/${BASE_PATH}`;
+    const normalizedBase = baseRaw.replace(/\/$/, '');
     if (!normalizedBase || normalizedBase === '/') return out;
-    const pattern = /(href|src)=(['"])(\/(?!\/)[^'"\s]*)\2/g;
+
+    const attrPattern = '(?:href|src|action|formaction)';
+    const pathPattern = "\\/(?!\\/)[^'\"\\s<]*";
+    const pattern = new RegExp(`(${attrPattern})=(["'])((${pathPattern}))\\2`, 'g');
+
     return out.replace(pattern, (match, attr, quote, path) => {
       if (path === normalizedBase || path.startsWith(`${normalizedBase}/`)) {
         return match;

package/lib/search/search-app.jsx

@@ -6,6 +6,49 @@ import {
   SearchFiltersDialog,
 } from "@canopy-iiif/app/ui";
 
+function readBasePath() {
+  const normalize = (val) => {
+    const raw = typeof val === "string" ? val.trim() : "";
+    if (!raw) return "";
+    const withLead = raw.startsWith("/") ? raw : `/${raw}`;
+    return withLead.replace(/\/+$/, "");
+  };
+  try {
+    if (typeof window !== "undefined" && window.CANOPY_BASE_PATH != null) {
+      const fromWindow = normalize(window.CANOPY_BASE_PATH);
+      if (fromWindow) return fromWindow;
+    }
+  } catch (_) {}
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.CANOPY_BASE_PATH != null) {
+      const fromGlobal = normalize(globalThis.CANOPY_BASE_PATH);
+      if (fromGlobal) return fromGlobal;
+    }
+  } catch (_) {}
+  try {
+    if (typeof process !== "undefined" && process.env && process.env.CANOPY_BASE_PATH) {
+      const fromEnv = normalize(process.env.CANOPY_BASE_PATH);
+      if (fromEnv) return fromEnv;
+    }
+  } catch (_) {}
+  return "";
+}
+
+function withBasePath(href) {
+  try {
+    const raw = typeof href === "string" ? href.trim() : "";
+    if (!raw) return href;
+    if (/^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(raw)) return raw;
+    if (!raw.startsWith("/")) return raw;
+    const base = readBasePath();
+    if (!base || base === "/") return raw;
+    if (raw === base || raw.startsWith(`${base}/`)) return raw;
+    return `${base}${raw}`;
+  } catch (_) {
+    return href;
+  }
+}
+
 // Lightweight IndexedDB utilities (no deps) with defensive guards
 function hasIDB() {
   try {
@@ -116,6 +159,7 @@ function createSearchStore() {
     facetsDocsMap: {},
     filters: {},
     activeFilterCount: 0,
+    annotationsEnabled: false,
   };
   const listeners = new Set();
   function notify() {
@@ -209,22 +253,34 @@ function createSearchStore() {
         counts = {};
       }
 
-      results =
-        type === "all"
-          ? base
-          : base.filter(
-              (r) => String(r.type).toLowerCase() === String(type).toLowerCase()
-            );
-      if (shouldFilterWorks && allowed) {
-        results = results.filter((r) => allowed.has(r && r.__docIndex));
-      }
+      const annotationMatches = base.filter((r) => r && r.annotation);
+      if (annotationMatches.length)
+        counts.annotation = annotationMatches.length;
 
-      if (type !== "all") {
-        try {
-          totalForType = records.filter(
-            (r) => String(r.type).toLowerCase() === String(type).toLowerCase()
-          ).length;
-        } catch (_) {}
+      const typeLower = String(type).toLowerCase();
+      if (typeLower === "annotation") {
+        results = annotationMatches.map((r) => ({
+          ...r,
+          type: "annotation",
+          originalType: r ? r.type : undefined,
+        }));
+        totalForType = annotationMatches.length;
+      } else {
+        results =
+          typeLower === "all"
+            ? base
+            : base.filter((r) => String(r.type).toLowerCase() === typeLower);
+        if (shouldFilterWorks && allowed) {
+          results = results.filter((r) => allowed.has(r && r.__docIndex));
+        }
+
+        if (typeLower !== "all") {
+          try {
+            totalForType = records.filter(
+              (r) => String(r.type).toLowerCase() === typeLower
+            ).length;
+          } catch (_) {}
+        }
       }
     }
     const {facetsDocsMap: _fMap, ...publicState} = state;
@@ -390,6 +446,7 @@ function createSearchStore() {
       // Try to load meta for cache-busting and tab order; fall back to hash of JSON
       let version = "";
       let tabsOrder = [];
+      let annotationsAssetPath = "";
       try {
         const meta = await fetch("./api/index.json")
           .then((r) => (r && r.ok ? r.json() : null))
@@ -403,11 +460,17 @@ function createSearchStore() {
             ? meta.search.tabs.order
             : [];
         tabsOrder = ord.map((s) => String(s)).filter(Boolean);
+        const annotationsAsset =
+          meta &&
+          meta.search &&
+          meta.search.assets &&
+          meta.search.assets.annotations;
+        if (annotationsAsset && annotationsAsset.path) {
+          annotationsAssetPath = String(annotationsAsset.path);
+        }
       } catch (_) {}
-      const res = await fetch(
-        "./api/search-index.json" +
-          (version ? `?v=${encodeURIComponent(version)}` : "")
-      );
+      const suffix = version ? `?v=${encodeURIComponent(version)}` : "";
+      const res = await fetch(`./api/search-index.json${suffix}`);
       const text = await res.text();
       const parsed = (() => {
         try {
@@ -416,16 +479,89 @@ function createSearchStore() {
           return [];
         }
       })();
-      const rawData = Array.isArray(parsed)
+      const indexRecords = Array.isArray(parsed)
         ? parsed
         : parsed && parsed.records
         ? parsed.records
         : [];
-      const data = rawData.map((rec, i) => ({...(rec || {}), __docIndex: i}));
+
+      let displayRecords = [];
+      try {
+        const displayRes = await fetch(`./api/search-records.json${suffix}`);
+        if (displayRes && displayRes.ok) {
+          const displayJson = await displayRes.json().catch(() => []);
+          displayRecords = Array.isArray(displayJson)
+            ? displayJson
+            : displayJson && Array.isArray(displayJson.records)
+            ? displayJson.records
+            : [];
+        }
+      } catch (_) {}
+
+      const displayMap = new Map();
+      displayRecords.forEach((rec) => {
+        if (!rec || typeof rec !== "object") return;
+        const key = rec.id ? String(rec.id) : rec.href ? String(rec.href) : "";
+        if (!key) return;
+        displayMap.set(key, rec);
+      });
+
+      let annotationsRecords = [];
+      if (annotationsAssetPath) {
+        try {
+          const annotationsUrl = `./api/${annotationsAssetPath.replace(/^\/+/, '')}` + (version ? `?v=${encodeURIComponent(version)}` : "");
+          const annotationsRes = await fetch(annotationsUrl);
+          if (annotationsRes && annotationsRes.ok) {
+            const annotationsJson = await annotationsRes.json().catch(() => []);
+            annotationsRecords = Array.isArray(annotationsJson)
+              ? annotationsJson
+              : annotationsJson && Array.isArray(annotationsJson.records)
+              ? annotationsJson.records
+              : [];
+          }
+        } catch (_) {}
+      }
+
+      const annotationsMap = new Map();
+      annotationsRecords.forEach((rec, idx) => {
+        if (!rec || typeof rec !== "object") return;
+        const key = rec.id ? String(rec.id) : String(idx);
+        const text = rec.annotation ? String(rec.annotation) : rec.text ? String(rec.text) : "";
+        if (!key || !text) return;
+        annotationsMap.set(key, text);
+      });
+
+      const data = indexRecords.map((rec, i) => {
+        const key = rec && rec.id ? String(rec.id) : String(i);
+        const display = key ? displayMap.get(key) : null;
+        const merged = { ...(display || {}), ...(rec || {}), __docIndex: i };
+        if (!merged.id && key) merged.id = key;
+        if (!merged.href && display && display.href) merged.href = String(display.href);
+        if (merged.href) merged.href = withBasePath(merged.href);
+        if (!merged.title) merged.title = merged.href || "";
+        if (!Array.isArray(merged.metadata)) {
+          const meta = Array.isArray(rec && rec.metadata) ? rec.metadata : [];
+          merged.metadata = meta;
+        }
+        if (annotationsMap.has(key) && !merged.annotation)
+          merged.annotation = annotationsMap.get(key);
+        return merged;
+      });
       if (!version)
         version = (parsed && parsed.version) || (await sha256Hex(text));
 
       const idx = new Flex.Index({tokenize: "forward"});
+      const collectSearchText = (rec) => {
+        const parts = [];
+        if (rec && rec.title) parts.push(String(rec.title));
+        const metadata = Array.isArray(rec && rec.metadata) ? rec.metadata : [];
+        for (const value of metadata) {
+          if (value) parts.push(String(value));
+        }
+        if (rec && rec.summary) parts.push(String(rec.summary));
+        if (rec && rec.annotation) parts.push(String(rec.annotation));
+        return parts.join(" ").trim();
+      };
       let hydrated = false;
       const t0 =
         typeof performance !== "undefined" && performance.now
@@ -455,7 +591,8 @@ function createSearchStore() {
       if (!hydrated) {
         data.forEach((rec, i) => {
           try {
-            idx.add(i, rec && rec.title ? String(rec.title) : "");
+            const payload = collectSearchText(rec);
+            idx.add(i, payload);
           } catch (_) {}
         });
         try {
@@ -521,6 +658,8 @@ function createSearchStore() {
       const ts = Array.from(
         new Set(data.map((r) => String((r && r.type) || "page")))
       );
+      if (annotationsRecords.length && !ts.includes("annotation"))
+        ts.push("annotation");
       const order =
         Array.isArray(tabsOrder) && tabsOrder.length
           ? tabsOrder
@@ -548,7 +687,13 @@ function createSearchStore() {
           set({type: def});
         }
       } catch (_) {}
-      set({index: idx, records: data, types: ts, loading: false});
+      set({
+        index: idx,
+        records: data,
+        types: ts,
+        loading: false,
+        annotationsEnabled: annotationsRecords.length > 0,
+      });
       await hydrateFacets();
     } catch (_) {
       set({loading: false});
@@ -609,10 +754,17 @@ function useStore() {
 }
 
 function ResultsMount(props = {}) {
-  const {results, type, loading} = useStore();
+  const {results, type, loading, query} = useStore();
   if (loading) return <div className="text-slate-600">Loading…</div>;
   const layout = (props && props.layout) || "grid";
-  return <SearchResultsUI results={results} type={type} layout={layout} />;
+  return (
+    <SearchResultsUI
+      results={results}
+      type={type}
+      layout={layout}
+      query={query}
+    />
+  );
 }
 function TabsMount() {
   const {

package/lib/search/search-form-runtime.js

@@ -79,17 +79,99 @@ async function loadRecords() {
       try {
         const base = rootBase();
         let version = '';
+        let annotationsAssetPath = '';
         try {
           const meta = await fetch(`${base}/api/index.json`).then((r) => (r && r.ok ? r.json() : null)).catch(() => null);
           if (meta && typeof meta.version === 'string') version = meta.version;
+          const annotationsAsset =
+            meta &&
+            meta.search &&
+            meta.search.assets &&
+            meta.search.assets.annotations;
+          if (annotationsAsset && annotationsAsset.path) {
+            annotationsAssetPath = String(annotationsAsset.path);
+          }
         } catch (_) {}
         const suffix = version ? `?v=${encodeURIComponent(version)}` : '';
-        const response = await fetch(`${base}/api/search-index.json${suffix}`).catch(() => null);
-        if (!response || !response.ok) return [];
-        const json = await response.json().catch(() => []);
-        if (Array.isArray(json)) return json;
-        if (json && Array.isArray(json.records)) return json.records;
-        return [];
+        const indexUrl = `${base}/api/search-index.json${suffix}`;
+        const recordsUrl = `${base}/api/search-records.json${suffix}`;
+        const [indexRes, displayRes] = await Promise.all([
+          fetch(indexUrl).catch(() => null),
+          fetch(recordsUrl).catch(() => null),
+        ]);
+        let indexRecords = [];
+        if (indexRes && indexRes.ok) {
+          try {
+            const raw = await indexRes.json();
+            indexRecords = Array.isArray(raw)
+              ? raw
+              : raw && Array.isArray(raw.records)
+              ? raw.records
+              : [];
+          } catch (_) {
+            indexRecords = [];
+          }
+        }
+        let displayRecords = [];
+        if (displayRes && displayRes.ok) {
+          try {
+            const raw = await displayRes.json();
+            displayRecords = Array.isArray(raw)
+              ? raw
+              : raw && Array.isArray(raw.records)
+              ? raw.records
+              : [];
+          } catch (_) {
+            displayRecords = [];
+          }
+        }
+        let annotationsRecords = [];
+        if (annotationsAssetPath) {
+          try {
+            const annotationsUrl = `${base}/api/${annotationsAssetPath.replace(/^\/+/, '')}${suffix}`;
+            const annotationsRes = await fetch(annotationsUrl).catch(() => null);
+            if (annotationsRes && annotationsRes.ok) {
+              const raw = await annotationsRes.json().catch(() => []);
+              annotationsRecords = Array.isArray(raw)
+                ? raw
+                : raw && Array.isArray(raw.records)
+                ? raw.records
+                : [];
+            }
+          } catch (_) {}
+        }
+        if (!indexRecords.length && displayRecords.length) {
+          return displayRecords;
+        }
+        const displayMap = new Map();
+        displayRecords.forEach((rec) => {
+          if (!rec || typeof rec !== 'object') return;
+          const key = rec.id ? String(rec.id) : rec.href ? String(rec.href) : '';
+          if (!key) return;
+          displayMap.set(key, rec);
+        });
+        const annotationsMap = new Map();
+        annotationsRecords.forEach((rec, idx) => {
+          if (!rec || typeof rec !== 'object') return;
+          const key = rec.id ? String(rec.id) : String(idx);
+          const text = rec.annotation ? String(rec.annotation) : rec.text ? String(rec.text) : '';
+          if (!key || !text) return;
+          annotationsMap.set(key, text);
+        });
+        return indexRecords.map((rec, idx) => {
+          const key = rec && rec.id ? String(rec.id) : String(idx);
+          const display = key ? displayMap.get(key) : null;
+          const merged = { ...(display || {}), ...(rec || {}) };
+          if (!merged.id && key) merged.id = key;
+          if (!merged.href && display && display.href) merged.href = String(display.href);
+          if (!Array.isArray(merged.metadata)) {
+            const meta = Array.isArray(rec && rec.metadata) ? rec.metadata : [];
+            merged.metadata = meta;
+          }
+          if (annotationsMap.has(key) && !merged.annotation)
+            merged.annotation = annotationsMap.get(key);
+          return merged;
+        });
       } catch (_) {
         return [];
       }
@@ -129,22 +211,43 @@ function renderList(list, records, groupOrder) {
     header.style.cssText = 'padding:6px 12px;font-weight:600;color:#374151';
     list.appendChild(header);
     const entries = groups.get(key) || [];
-    entries.forEach((record, index) => {
-      const item = document.createElement('div');
+    entries.forEach((record) => {
+      const href = withBase(String(record && record.href || ''));
+      const item = document.createElement('a');
       item.setAttribute('data-canopy-item', '');
+      item.href = href;
       item.tabIndex = 0;
-      item.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;outline:none;';
+      item.className = 'canopy-card canopy-card--teaser';
+      item.style.cssText = 'display:flex;gap:12px;padding:8px 12px;text-decoration:none;color:#030712;border-radius:8px;align-items:center;outline:none;';
+
       const showThumb = String(record && record.type || '') === 'work' && record && record.thumbnail;
       if (showThumb) {
+        const media = document.createElement('div');
+        media.style.cssText = 'flex:0 0 48px;height:48px;border-radius:6px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center;';
         const img = document.createElement('img');
         img.src = record.thumbnail;
         img.alt = '';
-        img.style.cssText = 'width:40px;height:40px;object-fit:cover;border-radius:4px';
-        item.appendChild(img);
+        img.loading = 'lazy';
+        img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
+        media.appendChild(img);
+        item.appendChild(media);
+      }
+
+      const textWrap = document.createElement('div');
+      textWrap.style.cssText = 'display:flex;flex-direction:column;gap:2px;min-width:0;';
+      const title = document.createElement('span');
+      title.textContent = record.title || record.href || '';
+      title.style.cssText = 'font-weight:600;font-size:0.95rem;line-height:1.3;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+      textWrap.appendChild(title);
+      const meta = Array.isArray(record && record.metadata) ? record.metadata : [];
+      if (meta.length) {
+        const metaLine = document.createElement('span');
+        metaLine.textContent = meta.slice(0, 2).join(' • ');
+        metaLine.style.cssText = 'font-size:0.8rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+        textWrap.appendChild(metaLine);
       }
-      const span = document.createElement('span');
-      span.textContent = record.title || record.href || '';
-      item.appendChild(span);
+      item.appendChild(textWrap);
+
       item.onmouseenter = () => { item.style.background = '#f8fafc'; };
       item.onmouseleave = () => { item.style.background = 'transparent'; };
       item.onfocus = () => {
@@ -152,9 +255,6 @@ function renderList(list, records, groupOrder) {
         try { item.scrollIntoView({ block: 'nearest' }); } catch (_) {}
       };
       item.onblur = () => { item.style.background = 'transparent'; };
-      item.onclick = () => {
-        try { window.location.href = withBase(String(record.href || '')); } catch (_) {}
-      };
       list.appendChild(item);
     });
   });
@@ -278,8 +378,15 @@ async function attachSearchForm(host) {
       for (let i = 0; i < records.length; i += 1) {
         const record = records[i];
         const title = String(record && record.title || '');
-        if (!title) continue;
-        if (toLower(title).includes(q)) out.push(record);
+        const parts = [toLower(title)];
+        const metadata = Array.isArray(record && record.metadata) ? record.metadata : [];
+        for (const value of metadata) {
+          parts.push(toLower(value));
+        }
+        if (record && record.summary) parts.push(toLower(record.summary));
+        if (record && record.annotation) parts.push(toLower(record.annotation));
+        const haystack = parts.join(' ');
+        if (haystack.includes(q)) out.push(record);
         if (out.length >= maxResults) break;
       }
       render(out);