@canopy-iiif/app 0.7.14 → 0.7.17

package/lib/head.js

@@ -0,0 +1,21 @@
+const React = require('react');
+const { withBase, rootRelativeHref } = require('./common');
+
+const DEFAULT_STYLESHEET_PATH = '/styles/styles.css';
+
+function stylesheetHref(href = DEFAULT_STYLESHEET_PATH) {
+  const normalized = rootRelativeHref(href || DEFAULT_STYLESHEET_PATH);
+  return withBase(normalized);
+}
+
+function Stylesheet(props = {}) {
+  const { href = DEFAULT_STYLESHEET_PATH, rel = 'stylesheet', ...rest } = props;
+  const resolved = stylesheetHref(href);
+  return React.createElement('link', { rel, href: resolved, ...rest });
+}
+
+module.exports = {
+  stylesheetHref,
+  Stylesheet,
+  DEFAULT_STYLESHEET_PATH,
+};

package/lib/index.js

@@ -1,4 +1,8 @@
+const { stylesheetHref, Stylesheet } = require('./head');
+
 module.exports = {
   build: require('./build/build').build,
-  dev: require('./build/dev').dev
+  dev: require('./build/dev').dev,
+  stylesheetHref,
+  Stylesheet,
 };

package/lib/search/command-runtime.js

@@ -0,0 +1,370 @@
+function ready(fn) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(el) {
+  try {
+    const script = el.querySelector('script[type="application/json"]');
+    if (script) return JSON.parse(script.textContent || '{}');
+  } catch (_) {}
+  return {};
+}
+
+function toLower(val) {
+  try {
+    return String(val || '').toLowerCase();
+  } catch (_) {
+    return '';
+  }
+}
+
+function getBasePath() {
+  try {
+    const raw = (window && window.CANOPY_BASE_PATH) ? String(window.CANOPY_BASE_PATH) : '';
+    if (!raw) return '';
+    return raw.endsWith('/') ? raw.slice(0, -1) : raw;
+  } catch (_) {
+    return '';
+  }
+}
+
+function withBase(href) {
+  try {
+    let raw = href == null ? '' : String(href);
+    raw = raw.trim();
+    if (!raw) return raw;
+    const basePath = getBasePath();
+    if (!basePath) {
+      if (/^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith('//') || raw.startsWith('#') || raw.startsWith('?')) {
+        return raw;
+      }
+      let cleaned = raw.replace(/^\/+/, '');
+      while (cleaned.startsWith('./')) cleaned = cleaned.slice(2);
+      while (cleaned.startsWith('../')) cleaned = cleaned.slice(3);
+      if (!cleaned) return '/';
+      return '/' + cleaned;
+    }
+    if (/^https?:/i.test(raw)) return raw;
+    const cleaned = raw.replace(/^\/+/, '');
+    return `${basePath}/${cleaned}`;
+  } catch (_) {
+    return href;
+  }
+}
+
+function rootBase() {
+  return getBasePath();
+}
+
+function isOnSearchPage() {
+  try {
+    const base = rootBase();
+    let path = String(location.pathname || '');
+    if (base && path.startsWith(base)) path = path.slice(base.length);
+    if (path.endsWith('/')) path = path.slice(0, -1);
+    return path === '/search';
+  } catch (_) {
+    return false;
+  }
+}
+
+let recordsPromise = null;
+async function loadRecords() {
+  if (!recordsPromise) {
+    recordsPromise = (async () => {
+      try {
+        const base = rootBase();
+        let version = '';
+        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;
+        } 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 [];
+      } catch (_) {
+        return [];
+      }
+    })();
+  }
+  return recordsPromise;
+}
+
+function groupLabel(type) {
+  if (type === 'work') return 'Works';
+  if (type === 'page') return 'Pages';
+  return type.charAt(0).toUpperCase() + type.slice(1);
+}
+
+function getItems(list) {
+  try {
+    return Array.prototype.slice.call(list.querySelectorAll('[data-canopy-item]'));
+  } catch (_) {
+    return [];
+  }
+}
+
+function renderList(list, records, groupOrder) {
+  list.innerHTML = '';
+  if (!records.length) return;
+  const groups = new Map();
+  records.forEach((record) => {
+    const type = String(record && record.type || 'page');
+    if (!groups.has(type)) groups.set(type, []);
+    groups.get(type).push(record);
+  });
+  const desiredOrder = Array.isArray(groupOrder) ? groupOrder : [];
+  const orderedKeys = [...desiredOrder.filter((key) => groups.has(key)), ...Array.from(groups.keys()).filter((key) => !desiredOrder.includes(key))];
+  orderedKeys.forEach((key) => {
+    const header = document.createElement('div');
+    header.textContent = groupLabel(key);
+    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');
+      item.setAttribute('data-canopy-item', '');
+      item.tabIndex = 0;
+      item.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;outline:none;';
+      const showThumb = String(record && record.type || '') === 'work' && record && record.thumbnail;
+      if (showThumb) {
+        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);
+      }
+      const span = document.createElement('span');
+      span.textContent = record.title || record.href || '';
+      item.appendChild(span);
+      item.onmouseenter = () => { item.style.background = '#f8fafc'; };
+      item.onmouseleave = () => { item.style.background = 'transparent'; };
+      item.onfocus = () => {
+        item.style.background = '#eef2ff';
+        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);
+    });
+  });
+}
+
+function focusFirst(list) {
+  const items = getItems(list);
+  if (!items.length) return;
+  items[0].focus();
+}
+
+function focusLast(list, resetTarget) {
+  const items = getItems(list);
+  if (!items.length) {
+    if (resetTarget && resetTarget.focus) resetTarget.focus();
+    return;
+  }
+  items[items.length - 1].focus();
+}
+
+function bindKeyboardNavigation({ input, list, panel }) {
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      panel.style.display = 'block';
+      focusFirst(list);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      panel.style.display = 'block';
+      focusLast(list, input);
+    }
+  });
+
+  list.addEventListener('keydown', (event) => {
+    const current = event.target && event.target.closest && event.target.closest('[data-canopy-item]');
+    if (!current) return;
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const items = getItems(list);
+      const idx = items.indexOf(current);
+      const next = items[Math.min(items.length - 1, idx + 1)] || current;
+      next.focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const items = getItems(list);
+      const idx = items.indexOf(current);
+      if (idx <= 0) {
+        input && input.focus && input.focus();
+      } else {
+        const prev = items[idx - 1];
+        ;(prev || current).focus();
+      }
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      try { current.click(); } catch (_) {}
+    } else if (event.key === 'Escape') {
+      panel.style.display = 'none';
+      try { input && input.focus && input.focus(); } catch (_) {}
+    }
+  });
+}
+
+async function attachCommand(host) {
+  const config = parseProps(host) || {};
+  const maxResults = Number(config.maxResults || 8) || 8;
+  const groupOrder = Array.isArray(config.groupOrder) ? config.groupOrder : ['work', 'page'];
+  const hotkey = typeof config.hotkey === 'string' ? config.hotkey : '';
+  const onSearchPage = isOnSearchPage();
+
+  const panel = (() => {
+    try { return host.querySelector('[data-canopy-command-panel]'); } catch (_) { return null; }
+  })();
+  if (!panel) return;
+
+  if (!onSearchPage) {
+    try {
+      const wrapper = host.querySelector('.relative');
+      if (wrapper) wrapper.setAttribute('data-canopy-panel-auto', '1');
+    } catch (_) {}
+  }
+
+  if (onSearchPage) panel.style.display = 'none';
+
+  const list = (() => {
+    try { return panel.querySelector('#cplist'); } catch (_) { return null; }
+  })();
+  if (!list) return;
+
+  const input = (() => {
+    try { return host.querySelector('[data-canopy-command-input]'); } catch (_) { return null; }
+  })();
+  if (!input) return;
+
+  try {
+    const params = new URLSearchParams(location.search || '');
+    const qp = params.get('q');
+    if (qp) input.value = qp;
+  } catch (_) {}
+
+  const records = await loadRecords();
+
+  function render(items) {
+    list.innerHTML = '';
+    if (!items.length) {
+      panel.style.display = onSearchPage ? 'none' : 'block';
+      return;
+    }
+    renderList(list, items, groupOrder);
+    panel.style.display = 'block';
+  }
+
+  function filterAndShow(query) {
+    try {
+      const q = toLower(query);
+      if (!q) {
+        list.innerHTML = '';
+        panel.style.display = onSearchPage ? 'none' : 'block';
+        return;
+      }
+      const out = [];
+      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);
+        if (out.length >= maxResults) break;
+      }
+      render(out);
+    } catch (_) {}
+  }
+
+  input.addEventListener('input', () => {
+    if (onSearchPage) {
+      try {
+        const ev = new CustomEvent('canopy:search:setQuery', { detail: { query: input.value || '' } });
+        window.dispatchEvent(ev);
+      } catch (_) {}
+      return;
+    }
+    filterAndShow(input.value || '');
+  });
+
+  bindKeyboardNavigation({ input, list, panel });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      panel.style.display = 'none';
+    }
+  });
+
+  document.addEventListener('mousedown', (event) => {
+    try {
+      if (!panel.contains(event.target) && !host.contains(event.target)) {
+        panel.style.display = 'none';
+      }
+    } catch (_) {}
+  });
+
+  if (hotkey) {
+    document.addEventListener('keydown', (event) => {
+      try {
+        const want = hotkey.toLowerCase();
+        if (!want) return;
+        const isMod = event.metaKey || event.ctrlKey;
+        const isCmd = (want === 'mod+k' || want === 'cmd+k' || want === 'ctrl+k') && (event.key === 'k' || event.key === 'K');
+        if (isCmd && isMod) {
+          event.preventDefault();
+          if (onSearchPage) {
+            try { window.dispatchEvent(new CustomEvent('canopy:search:setQuery', { detail: { hotkey: true } })); } catch (_) {}
+            return;
+          }
+          panel.style.display = 'block';
+          if (input && input.focus) input.focus();
+          filterAndShow(input && input.value || '');
+        }
+      } catch (_) {}
+    });
+  }
+
+  function openPanel() {
+    if (onSearchPage) {
+      try { window.dispatchEvent(new CustomEvent('canopy:search:setQuery', { detail: {} })); } catch (_) {}
+      return;
+    }
+    panel.style.display = 'block';
+    if (input && input.focus) input.focus();
+    filterAndShow(input && input.value || '');
+  }
+
+  host.addEventListener('click', (event) => {
+    const trigger = event.target && event.target.closest && event.target.closest('[data-canopy-command-trigger]');
+    if (trigger) {
+      event.preventDefault();
+      openPanel();
+    }
+  });
+
+  try {
+    input.addEventListener('focus', () => { openPanel(); });
+  } catch (_) {}
+}
+
+ready(() => {
+  const hosts = Array.from(document.querySelectorAll('[data-canopy-command]'));
+  if (!hosts.length) return;
+  hosts.forEach((host) => {
+    attachCommand(host).catch((err) => {
+      try {
+        console.warn('[canopy][command] failed to initialise', err && (err.message || err));
+      } catch (_) {}
+    });
+  });
+});

package/lib/search/search-app.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useSyncExternalStore, useState } from 'react
 import { createRoot } from 'react-dom/client';
 import { SearchResultsUI, SearchTabsUI } from '@canopy-iiif/app/ui';
 
-// Lightweight IndexedDB utilities (no deps) with graceful fallback
+// Lightweight IndexedDB utilities (no deps) with defensive guards
 function hasIDB() {
   try { return typeof indexedDB !== 'undefined'; } catch (_) { return false; }
 }
@@ -70,7 +70,7 @@ async function sha256Hex(str) {
       return Array.from(new Uint8Array(digest)).map((b) => b.toString(16).padStart(2, '0')).join('');
     }
   } catch (_) {}
-  // Fallback: simple non-crypto hash
+  // Defensive: simple non-crypto hash when Web Crypto is unavailable
   try {
     let h = 5381; for (let i = 0; i < str.length; i++) h = ((h << 5) + h) ^ str.charCodeAt(i);
     return (h >>> 0).toString(16);

package/lib/search/search.js

@@ -3,199 +3,12 @@ const ReactDOMServer = require('react-dom/server');
 const crypto = require('crypto');
 const { path, withBase, rootRelativeHref, ensureDirSync, OUT_DIR, htmlShell, fsp } = require('../common');
 
-const FALLBACK_SEARCH_APP = `import React, { useEffect, useMemo, useSyncExternalStore, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { SearchResultsUI } from '@canopy-iiif/app/ui';
-
-function hasIDB(){ try { return typeof indexedDB !== 'undefined'; } catch (_) { return false; } }
-function idbOpen(){ return new Promise((resolve)=>{ if(!hasIDB()) return resolve(null); try{ const req = indexedDB.open('canopy-search',1); req.onupgradeneeded=()=>{ const db=req.result; if(!db.objectStoreNames.contains('indexes')) db.createObjectStore('indexes',{keyPath:'version'}); }; req.onsuccess=()=>resolve(req.result); req.onerror=()=>resolve(null);}catch(_){ resolve(null);} }); }
-async function idbGet(store,key){ const db = await idbOpen(); if(!db) return null; return new Promise((resolve)=>{ try{ const tx=db.transaction(store,'readonly'); const st=tx.objectStore(store); const req=st.get(key); req.onsuccess=()=>resolve(req.result||null); req.onerror=()=>resolve(null);}catch(_){ resolve(null);} }); }
-async function idbPut(store,value){ const db = await idbOpen(); if(!db) return false; return new Promise((resolve)=>{ try{ const tx=db.transaction(store,'readwrite'); const st=tx.objectStore(store); st.put(value); tx.oncomplete=()=>resolve(true); tx.onerror=()=>resolve(false);}catch(_){ resolve(false);} }); }
-async function idbPruneOld(store,keep){ const db=await idbOpen(); if(!db) return false; return new Promise((resolve)=>{ try{ const tx=db.transaction(store,'readwrite'); const st=tx.objectStore(store); const req=st.getAllKeys(); req.onsuccess=()=>{ try{ (req.result||[]).forEach((k)=>{ if(k!==keep) st.delete(k); }); }catch(_){} resolve(true); }; req.onerror=()=>resolve(false);}catch(_){ resolve(false);} }); }
-async function sha256Hex(str){ try{ if(typeof crypto!=='undefined' && crypto.subtle){ const data=new TextEncoder().encode(str); const d=await crypto.subtle.digest('SHA-256',data); return Array.from(new Uint8Array(d)).map((b)=>b.toString(16).padStart(2,'0')).join(''); } }catch(_){} try{ let h=5381; for(let i=0;i<str.length;i++) h=((h<<5)+h)^str.charCodeAt(i); return (h>>>0).toString(16); }catch(_){ return String(str&&str.length?str.length:0); }}
-
-function createSearchStore() {
-  let state = {
-    query: new URLSearchParams(location.search).get('q') || '',
-    type: new URLSearchParams(location.search).get('type') || 'all',
-    loading: true,
-    records: [],
-    types: [],
-    index: null,
-    counts: {},
-  };
-  const listeners = new Set();
-  function notify() { listeners.forEach((fn) => { try { fn(); } catch (_) {} }); }
-  // Keep a memoized snapshot so getSnapshot returns stable references
-  let snapshot = null;
-  function recomputeSnapshot() {
-    const { index, records, query, type } = state;
-    let base = [];
-    let results = [];
-    let totalForType = Array.isArray(records) ? records.length : 0;
-    let counts = {};
-    if (records && records.length) {
-      if (!query) {
-        base = records;
-      } else {
-        try { const ids = index && index.search(query, { limit: 200 }) || []; base = ids.map((i) => records[i]).filter(Boolean); } catch (_) { base = []; }
-      }
-      try {
-        counts = base.reduce((acc, r) => { const t = String((r && r.type) || 'page').toLowerCase(); acc[t] = (acc[t] || 0) + 1; return acc; }, {});
-      } catch (_) { counts = {}; }
-      results = type === 'all' ? base : base.filter((r) => String(r.type).toLowerCase() === String(type).toLowerCase());
-      if (type !== 'all') {
-        try { totalForType = records.filter((r) => String(r.type).toLowerCase() === String(type).toLowerCase()).length; } catch (_) {}
-      }
-    }
-    snapshot = { ...state, results, total: totalForType, shown: results.length, counts };
-  }
-  function set(partial) { state = { ...state, ...partial }; recomputeSnapshot(); notify(); }
-  function subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); }
-  function getSnapshot() { return snapshot; }
-  // Initialize snapshot
-  recomputeSnapshot();
-  // init
-  (async () => {
-    try {
-      const DEBUG = (() => { try { const p = new URLSearchParams(location.search); return p.has('searchDebug') || localStorage.CANOPY_SEARCH_DEBUG === '1'; } catch (_) { return false; } })();
-      const Flex = (window && window.FlexSearch) || (await import('flexsearch')).default;
-      // Broadcast new index installs to other tabs
-      let bc = null; try { if (typeof BroadcastChannel !== 'undefined') bc = new BroadcastChannel('canopy-search'); } catch (_) {}
-      // Try to get a meta version and search config from ./api/index.json for cache-busting and tabs
-      let version = '';
-      let tabsOrder = [];
-      try {
-        const meta = await fetch('./api/index.json').then((r)=>r&&r.ok?r.json():null).catch(()=>null);
-        if (meta && typeof meta.version === 'string') version = meta.version;
-        const ord = meta && meta.search && meta.search.tabs && Array.isArray(meta.search.tabs.order) ? meta.search.tabs.order : [];
-        tabsOrder = ord.map((s)=>String(s)).filter(Boolean);
-      } catch (_) {}
-      const res = await fetch('./api/search-index.json' + (version ? ('?v=' + encodeURIComponent(version)) : ''));
-      const text = await res.text();
-      const parsed = (() => { try { return JSON.parse(text); } catch { return []; } })();
-      const data = Array.isArray(parsed) ? parsed : (parsed && parsed.records ? parsed.records : []);
-      if (!version) version = (parsed && parsed.version) || (await sha256Hex(text));
-
-      const idx = new Flex.Index({ tokenize: 'forward' });
-      let hydrated = false;
-      const t0 = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
-      try {
-        const cached = await idbGet('indexes', version);
-        if (cached && cached.exportData) {
-          try {
-            const dataObj = cached.exportData || {};
-            for (const k in dataObj) {
-              if (Object.prototype.hasOwnProperty.call(dataObj, k)) {
-                try { idx.import(k, dataObj[k]); } catch (_) {}
-              }
-            }
-            hydrated = true;
-          } catch (_) {}
-        }
-      } catch (_) {}
-      if (!hydrated) {
-        data.forEach((rec, i) => { try { idx.add(i, rec && rec.title ? String(rec.title) : ''); } catch (_) {} });
-        try {
-          const dump = {};
-          try { await idx.export((key, val) => { dump[key] = val; }); } catch (_) {}
-          await idbPut('indexes', { version, exportData: dump, ts: Date.now() });
-          await idbPruneOld('indexes', version);
-          try { if (bc) bc.postMessage({ type: 'search-index-installed', version }); } catch (_) {}
-        } catch (_) {}
-        if (DEBUG) {
-          const t1 = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
-          // eslint-disable-next-line no-console
-          console.info('[Search] Index built in ' + Math.round(t1 - t0) + 'ms (records=' + data.length + ') v=' + String(version).slice(0,8));
-        }
-      } else if (DEBUG) {
-        const t1 = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
-        // eslint-disable-next-line no-console
-        console.info('[Search] Index imported from IndexedDB in ' + Math.round(t1 - t0) + 'ms v=' + String(version).slice(0,8));
-      }
-      // Optional: debug-listen for install events from other tabs
-      try { if (bc && DEBUG) { bc.onmessage = (ev) => { try { const msg = ev && ev.data; if (msg && msg.type === 'search-index-installed' && msg.version && msg.version !== version) console.info('[Search] Another tab installed version ' + String(msg.version).slice(0,8)); } catch (_) {} }; } } catch (_) {}
-
-      const ts = Array.from(new Set(data.map((r) => String((r && r.type) || 'page'))));
-      const order = Array.isArray(tabsOrder) && tabsOrder.length ? tabsOrder : ['work', 'docs', 'page'];
-      // Sort types using configured order; unknown types appended alphabetically
-      ts.sort((a, b) => { const ia = order.indexOf(a); const ib = order.indexOf(b); return (ia<0?99:ia)-(ib<0?99:ib) || a.localeCompare(b); });
-      // Determine default type from config when no explicit type is present in URL
-      let defaultType = (Array.isArray(order) && order.length ? order[0] : 'all');
-      try {
-        const p = new URLSearchParams(location.search);
-        const hasTypeParam = p.has('type');
-        if (!hasTypeParam) {
-          // If default type is not present in available types, fall back to first available
-          if (!ts.includes(defaultType)) defaultType = ts[0] || 'all';
-          if (defaultType && defaultType !== 'all') {
-            p.set('type', defaultType);
-            // Avoid nested template literals inside fallback string; use concatenation
-            history.replaceState(null, '', (location.pathname + '?' + p.toString()));
-          }
-          set({ type: defaultType });
-        }
-      } catch (_) {}
-      set({ index: idx, records: data, types: ts, loading: false });
-    } catch (_) { set({ loading: false }); }
-  })();
-  // API
-  function setQuery(q) { set({ query: q }); const u = new URL(location.href); u.searchParams.set('q', q); history.replaceState(null, '', u); }
-  function setType(t) { set({ type: t }); const u = new URL(location.href); u.searchParams.set('type', t); history.replaceState(null, '', u); }
-  return { subscribe, getSnapshot, setQuery, setType };
-}
-
-const store = typeof window !== 'undefined' ? createSearchStore() : null;
-
-function useStore() {
-  const snap = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
-  return { ...snap, setQuery: store.setQuery, setType: store.setType };
-}
-
-function ResultsMount() {
-  const { results, type, loading } = useStore();
-  if (loading) return <div className=\"text-slate-600\">Loading…</div>;
-  return <SearchResultsUI results={results} type={type} />;
-}
-function SummaryMount() {
-  const { query, type, shown, total } = useStore();
-  const text = useMemo(() => {
-    if (!query) return \`Showing \${shown} of \${total} items\`;
-    return \`Found \${shown} of \${total} in \${type === 'all' ? 'all types' : type} for \"\${query}\"\`;
-  }, [query, type, shown, total]);
-  return <div className=\"text-sm text-slate-600\">{text}</div>;
-}
- 
-
-function mountAt(selector, Comp) {
-  const nodes = document.querySelectorAll(selector);
-  nodes.forEach((n) => {
-    try {
-      const root = createRoot(n);
-      root.render(<Comp />);
-    } catch (e) {
-      try { console.error('[Search] mount error at', selector, e && e.message ? e.message : e); } catch (_) {}
-    }
-  });
-}
-
-if (typeof document !== 'undefined') {
-  const run = () => {
-    mountAt('[data-canopy-search-results]', ResultsMount);
-    mountAt('[data-canopy-search-summary]', SummaryMount);
-    
-  };
-  if (document.readyState !== 'loading') run();
-  else document.addEventListener('DOMContentLoaded', run, { once: true });
-}
-`;
-
 async function ensureSearchRuntime() {
   const { fs, path } = require('../common');
   ensureDirSync(OUT_DIR);
   let esbuild = null;
   try { esbuild = require('../../ui/node_modules/esbuild'); } catch (_) { try { esbuild = require('esbuild'); } catch (_) {} }
-  if (!esbuild) { console.warn('Search: skipped bundling (no esbuild)'); return; }
+  if (!esbuild) throw new Error('Search runtime bundling requires esbuild. Install dependencies before building.');
   const entry = path.join(__dirname, 'search-app.jsx');
   const scriptsDir = path.join(OUT_DIR, 'scripts');
   ensureDirSync(scriptsDir);
@@ -337,7 +150,6 @@ async function buildSearchPage() {
     head = rendered && rendered.head ? rendered.head : '';
     if (!body) throw new Error('Search: content/search/_layout.mdx produced empty output');
     const importMap = '';
-    const cssRel = path.relative(path.dirname(outPath), path.join(OUT_DIR, 'styles', 'styles.css')).split(path.sep).join('/');
     const jsAbs = path.join(OUT_DIR, 'scripts', 'search.js');
     let jsRel = path.relative(path.dirname(outPath), jsAbs).split(path.sep).join('/');
     let v = '';
@@ -353,7 +165,14 @@ async function buildSearchPage() {
       return rel;
     }
     const vendorTags = `<script src="${verRel(vendorReactAbs)}"></script><script src="${verRel(vendorFlexAbs)}"></script><script src="${verRel(vendorCommandAbs)}"></script>`;
-    let html = htmlShell({ title: 'Search', body, cssHref: cssRel || 'styles.css', scriptHref: jsRel, headExtra: vendorTags + head + importMap });
+    let headExtra = vendorTags + head + importMap;
+    try {
+      const { BASE_PATH } = require('../common');
+      if (BASE_PATH) {
+        headExtra = `<script>window.CANOPY_BASE_PATH=${JSON.stringify(BASE_PATH)}</script>` + headExtra;
+      }
+    } catch (_) {}
+    let html = htmlShell({ title: 'Search', body, cssHref: null, scriptHref: jsRel, headExtra });
     try { html = require('./common').applyBaseToHtml(html); } catch (_) {}
     await fsp.writeFile(outPath, html, 'utf8');
     console.log('Search: Built', path.relative(process.cwd(), outPath));
@@ -363,7 +182,9 @@ async function buildSearchPage() {
   }
 }
 
-function toSafeString(val, fallback = '') { try { return String(val == null ? fallback : val); } catch (_) { return fallback; } }
+function toSafeString(val, defaultValue = '') {
+  try { return String(val == null ? defaultValue : val); } catch (_) { return defaultValue; }
+}
 function sanitizeRecord(r) {
   const title = toSafeString(r && r.title, '');
   const hrefRaw = toSafeString(r && r.href, '');