@canopy-iiif/app 0.7.8 → 0.7.10

package/lib/build/verify.js

@@ -0,0 +1,60 @@
+const { fs, path, OUT_DIR } = require('../common');
+const { logLine } = require('./log');
+
+function readFileSafe(p) {
+  try { return fs.readFileSync(p, 'utf8'); } catch (_) { return ''; }
+}
+
+function hasHtmlFiles(dir) {
+  let count = 0;
+  if (!fs.existsSync(dir)) return 0;
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const p = path.join(dir, e.name);
+    if (e.isDirectory()) count += hasHtmlFiles(p);
+    else if (e.isFile() && p.toLowerCase().endsWith('.html')) count++;
+  }
+  return count;
+}
+
+function verifyHomepageElements(outDir) {
+  const idx = path.join(outDir, 'index.html');
+  const html = readFileSafe(idx);
+  const okHero = /class=\"[^\"]*canopy-hero/.test(html) || /<div[^>]+canopy-hero/.test(html);
+  const okCommand = /data-canopy-command=/.test(html);
+  const okCommandTrigger = /data-canopy-command-trigger/.test(html);
+  const okCommandScriptRef = /<script[^>]+canopy-command\.js/.test(html);
+  return { okHero, okCommand, okCommandTrigger, okCommandScriptRef, htmlPath: idx };
+}
+
+function verifyBuildOutput(options = {}) {
+  const outDir = path.resolve(options.outDir || OUT_DIR);
+  logLine("\nVerify build output", "magenta", { bright: true, underscore: true });
+  const total = hasHtmlFiles(outDir);
+  const okAny = total > 0;
+  const indexPath = path.join(outDir, 'index.html');
+  const hasIndex = fs.existsSync(indexPath) && fs.statSync(indexPath).size > 0;
+  const { okHero, okCommand, okCommandTrigger, okCommandScriptRef } = verifyHomepageElements(outDir);
+
+  const ck = (label, ok, extra) => {
+    const status = ok ? '✓' : '✗';
+    logLine(`${status} ${label}${extra ? ` ${extra}` : ''}`, ok ? 'green' : 'red');
+  };
+
+  ck('HTML pages exist', okAny, okAny ? `(${total})` : '');
+  ck('homepage exists', hasIndex, hasIndex ? `(${indexPath})` : '');
+  ck('homepage: Hero present', okHero);
+  ck('homepage: Command present', okCommand);
+  ck('homepage: Command trigger present', okCommandTrigger);
+  ck('homepage: Command script referenced', okCommandScriptRef);
+
+  // Do not fail build on missing SSR trigger; the client runtime injects a default.
+  const ok = okAny && hasIndex && okHero && okCommand && okCommandScriptRef;
+  if (!ok) {
+    const err = new Error('Build verification failed');
+    err.outDir = outDir;
+    throw err;
+  }
+}
+
+module.exports = { verifyBuildOutput };

package/lib/components/featured.js

@@ -0,0 +1,144 @@
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+
+function firstLabelString(label) {
+  if (!label) return 'Untitled';
+  if (typeof label === 'string') return label;
+  try {
+    const keys = Object.keys(label || {});
+    if (!keys.length) return 'Untitled';
+    const arr = label[keys[0]];
+    if (Array.isArray(arr) && arr.length) return String(arr[0]);
+  } catch (_) {}
+  return 'Untitled';
+}
+
+function normalizeIiifId(raw) {
+  try {
+    const s = String(raw || '');
+    if (!/^https?:\/\//i.test(s)) return s;
+    const u = new URL(s);
+    const entries = Array.from(u.searchParams.entries()).sort(
+      (a, b) => a[0].localeCompare(b[0]) || a[1].localeCompare(b[1])
+    );
+    u.search = '';
+    for (const [k, v] of entries) u.searchParams.append(k, v);
+    return u.toString();
+  } catch (_) {
+    return String(raw || '');
+  }
+}
+
+function equalIiifId(a, b) {
+  try {
+    const an = normalizeIiifId(a);
+    const bn = normalizeIiifId(b);
+    if (an === bn) return true;
+    const ua = new URL(an);
+    const ub = new URL(bn);
+    return ua.origin === ub.origin && ua.pathname === ub.pathname;
+  } catch (_) {
+    return String(a || '') === String(b || '');
+  }
+}
+
+function readYaml(p) {
+  try {
+    if (!fs.existsSync(p)) return null;
+    const raw = fs.readFileSync(p, 'utf8');
+    return yaml.load(raw) || null;
+  } catch (_) {
+    return null;
+  }
+}
+
+function readJson(p) {
+  try {
+    if (!fs.existsSync(p)) return null;
+    const raw = fs.readFileSync(p, 'utf8');
+    return JSON.parse(raw);
+  } catch (_) {
+    return null;
+  }
+}
+
+function findSlugByIdFromDiskSync(nid) {
+  try {
+    const dir = path.resolve('.cache/iiif/manifests');
+    if (!fs.existsSync(dir)) return null;
+    const names = fs.readdirSync(dir);
+    for (const name of names) {
+      if (!name || !name.toLowerCase().endsWith('.json')) continue;
+      const fp = path.join(dir, name);
+      try {
+        const obj = readJson(fp);
+        const mid = normalizeIiifId(String((obj && (obj.id || obj['@id'])) || ''));
+        if (mid && equalIiifId(mid, nid)) return name.replace(/\.json$/i, '');
+      } catch (_) {}
+    }
+  } catch (_) {}
+  return null;
+}
+
+function readFeaturedFromCacheSync() {
+  try {
+    const debug = !!process.env.CANOPY_DEBUG_FEATURED;
+    const cfg = readYaml(path.resolve('canopy.yml')) || {};
+    const featured = Array.isArray(cfg && cfg.featured) ? cfg.featured : [];
+    if (!featured.length) return [];
+    const idx = readJson(path.resolve('.cache/iiif/index.json')) || {};
+    const byId = Array.isArray(idx && idx.byId) ? idx.byId : [];
+    const out = [];
+    for (const id of featured) {
+      const nid = normalizeIiifId(id);
+      if (debug) { try { console.log('[featured] id:', id); } catch (_) {} }
+      const entry = byId.find((e) => e && e.type === 'Manifest' && equalIiifId(e.id, nid));
+      const slug = entry && entry.slug ? String(entry.slug) : findSlugByIdFromDiskSync(nid);
+      if (debug) { try { console.log('[featured]  - slug:', slug || '(none)'); } catch (_) {} }
+      if (!slug) continue;
+      const m = readJson(path.resolve('.cache/iiif/manifests', slug + '.json'));
+      if (!m) continue;
+      const rec = {
+        title: firstLabelString(m && m.label),
+        href: path.join('works', slug + '.html').split(path.sep).join('/'),
+        type: 'work',
+      };
+      if (entry && entry.thumbnail) rec.thumbnail = String(entry.thumbnail);
+      if (entry && typeof entry.thumbnailWidth === 'number') rec.thumbnailWidth = entry.thumbnailWidth;
+      if (entry && typeof entry.thumbnailHeight === 'number') rec.thumbnailHeight = entry.thumbnailHeight;
+      if (!rec.thumbnail) {
+        try {
+          const t = m && m.thumbnail;
+          if (Array.isArray(t) && t.length) {
+            const first = t[0] || {};
+            const tid = first.id || first['@id'] || first.url || '';
+            if (tid) rec.thumbnail = String(tid);
+            if (typeof first.width === 'number') rec.thumbnailWidth = first.width;
+            if (typeof first.height === 'number') rec.thumbnailHeight = first.height;
+          } else if (t && typeof t === 'object') {
+            const tid = t.id || t['@id'] || t.url || '';
+            if (tid) rec.thumbnail = String(tid);
+            if (typeof t.width === 'number') rec.thumbnailWidth = t.width;
+            if (typeof t.height === 'number') rec.thumbnailHeight = t.height;
+          }
+        } catch (_) {}
+      }
+      out.push(rec);
+    }
+    if (debug) { try { console.log('[featured] total:', out.length); } catch (_) {} }
+    return out;
+  } catch (_) {
+    return [];
+  }
+}
+
+module.exports = {
+  firstLabelString,
+  normalizeIiifId,
+  equalIiifId,
+  readYaml,
+  readJson,
+  findSlugByIdFromDiskSync,
+  readFeaturedFromCacheSync,
+};

package/lib/search/search-app.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useSyncExternalStore, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { SearchFormUI, SearchResultsUI } from '@canopy-iiif/app/ui';
+import { SearchFormUI, SearchResultsUI, SearchTabsUI } from '@canopy-iiif/app/ui';
 
 // Lightweight IndexedDB utilities (no deps) with graceful fallback
 function hasIDB() {
@@ -133,11 +133,14 @@ function createSearchStore() {
       // Broadcast new index installs to other tabs
       let bc = null;
       try { if (typeof BroadcastChannel !== 'undefined') bc = new BroadcastChannel('canopy-search'); } catch (_) {}
-      // Try to load meta version for cache-busting; fall back to hash of JSON
+      // Try to load meta for cache-busting and tab order; fall back to hash of JSON
       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();
@@ -198,8 +201,22 @@ function createSearchStore() {
       } catch (_) {}
 
       const ts = Array.from(new Set(data.map((r) => String((r && r.type) || 'page'))));
-      const order = ['work', 'docs', 'page'];
+      const order = Array.isArray(tabsOrder) && tabsOrder.length ? tabsOrder : ['work', 'docs', 'page'];
       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); });
+      // Default to configured first tab if no type param present
+      try {
+        const p = new URLSearchParams(location.search);
+        const hasType = p.has('type');
+        if (!hasType) {
+          let def = (order && order.length ? order[0] : 'all');
+          if (!ts.includes(def)) def = ts[0] || 'all';
+          if (def && def !== 'all') {
+            p.set('type', def);
+            history.replaceState(null, '', `${location.pathname}?${p.toString()}`);
+          }
+          set({ type: def });
+        }
+      } catch (_) {}
       set({ index: idx, records: data, types: ts, loading: false });
     } catch (_) { set({ loading: false }); }
   })();
@@ -226,6 +243,10 @@ function ResultsMount(props = {}) {
   const layout = (props && props.layout) || 'grid';
   return <SearchResultsUI results={results} type={type} layout={layout} />;
 }
+function TabsMount() {
+  const { type, setType, types, counts } = useStore();
+  return <SearchTabsUI type={type} onTypeChange={setType} types={types} counts={counts} />;
+}
 function SummaryMount() {
   const { query, type, shown, total } = useStore();
   const text = useMemo(() => {
@@ -263,10 +284,20 @@ function mountAt(selector, Comp) {
 
 if (typeof document !== 'undefined') {
   const run = () => {
+    // Mount tabs (preferred) or full form if present, plus summary/total/results
+    mountAt('[data-canopy-search-tabs]', TabsMount);
     mountAt('[data-canopy-search-form]', FormMount);
     mountAt('[data-canopy-search-results]', ResultsMount);
     mountAt('[data-canopy-search-summary]', SummaryMount);
     mountAt('[data-canopy-search-total]', TotalMount);
+    try {
+      window.addEventListener('canopy:search:setQuery', (ev) => {
+        try {
+          const q = ev && ev.detail && typeof ev.detail.query === 'string' ? ev.detail.query : (document.querySelector('[data-canopy-command-input]')?.value || '');
+          if (typeof q === 'string') store.setQuery(q);
+        } catch (_) {}
+      });
+    } catch (_) {}
   };
   if (document.readyState !== 'loading') run();
   else document.addEventListener('DOMContentLoaded', run, { once: true });

package/lib/search/search.js

@@ -361,10 +361,19 @@ async function buildSearchPage() {
         React.createElement('h1', null, 'Search'),
         React.createElement('div', { id: 'search-root' })
       );
-      const { loadAppWrapper } = require('../build/mdx');
+      const { loadAppWrapper, getMdxProvider, loadUiComponents } = require('../build/mdx');
       const app = await loadAppWrapper();
       const wrappedApp = app && app.App ? React.createElement(app.App, null, content) : content;
-      body = ReactDOMServer.renderToStaticMarkup(wrappedApp);
+      // Ensure MDX components like <SearchPanel /> resolve when rendering App wrapper
+      let page = wrappedApp;
+      try {
+        const MDXProvider = await getMdxProvider();
+        const components = await loadUiComponents();
+        if (MDXProvider && components) {
+          page = React.createElement(MDXProvider, { components }, wrappedApp);
+        }
+      } catch (_) { /* render without provider on failure */ }
+      body = ReactDOMServer.renderToStaticMarkup(page);
       head = app && app.Head ? ReactDOMServer.renderToStaticMarkup(React.createElement(app.Head)) : '';
     }
     const importMap = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -30,7 +30,6 @@
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "charm": "^1.0.2",
-    "cmdk": "^1.1.1",
     "js-yaml": "^4.1.0",
     "react-masonry-css": "^1.0.16",
     "sass": "^1.77.0",

package/ui/dist/index.mjs

@@ -341,12 +341,24 @@ function SearchTotal(props) {
   return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-total": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
-// ui/src/search/SearchForm.jsx
+// ui/src/search/MdxSearchTabs.jsx
 import React12 from "react";
+function MdxSearchTabs(props) {
+  let json = "{}";
+  try {
+    json = JSON.stringify(props || {});
+  } catch (_) {
+    json = "{}";
+  }
+  return /* @__PURE__ */ React12.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React12.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+}
+
+// ui/src/search/SearchForm.jsx
+import React13 from "react";
 function SearchForm({ query, onQueryChange, type = "all", onTypeChange, types = [], counts = {} }) {
   const orderedTypes = Array.isArray(types) ? types : [];
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
-  return /* @__PURE__ */ React12.createElement("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-3" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-3" }, /* @__PURE__ */ React13.createElement(
     "input",
     {
       id: "search-input",
@@ -356,11 +368,11 @@ function SearchForm({ query, onQueryChange, type = "all", onTypeChange, types =
       onChange: (e) => onQueryChange && onQueryChange(e.target.value),
       className: "w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
     }
-  ), /* @__PURE__ */ React12.createElement("div", { role: "tablist", "aria-label": "Search types", className: "flex items-center gap-2 border-b border-slate-200" }, orderedTypes.map((t) => {
+  ), /* @__PURE__ */ React13.createElement("div", { role: "tablist", "aria-label": "Search types", className: "flex items-center gap-2 border-b border-slate-200" }, 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__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       "button",
       {
         key: t,
@@ -379,27 +391,27 @@ function SearchForm({ query, onQueryChange, type = "all", onTypeChange, types =
 }
 
 // ui/src/search/SearchResults.jsx
-import React13 from "react";
+import React14 from "react";
 function SearchResults({
   results = [],
   type = "all",
   layout = "grid"
 }) {
   if (!results.length) {
-    return /* @__PURE__ */ React13.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React13.createElement("em", null, "No results"));
+    return /* @__PURE__ */ React14.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React14.createElement("em", null, "No results"));
   }
   if (layout === "list") {
-    return /* @__PURE__ */ React13.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+    return /* @__PURE__ */ React14.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__ */ React13.createElement(
+      return /* @__PURE__ */ React14.createElement(
         "li",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
-        /* @__PURE__ */ React13.createElement(
+        /* @__PURE__ */ React14.createElement(
           Card,
           {
             href: r.href,
@@ -413,17 +425,17 @@ function SearchResults({
       );
     }));
   }
-  return /* @__PURE__ */ React13.createElement("div", { id: "search-results" }, /* @__PURE__ */ React13.createElement(Grid, null, results.map((r, i) => {
+  return /* @__PURE__ */ React14.createElement("div", { id: "search-results" }, /* @__PURE__ */ React14.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__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       GridItem,
       {
         key: i,
         className: `search-result ${r.type}`,
         "data-thumbnail-aspect-ratio": aspect
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         Card,
         {
           href: r.href,
@@ -438,6 +450,33 @@ function SearchResults({
   })));
 }
 
+// ui/src/search/SearchTabs.jsx
+import React15 from "react";
+function SearchTabs({ type = "all", onTypeChange, types = [], counts = {} }) {
+  const orderedTypes = Array.isArray(types) ? types : [];
+  const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
+  return /* @__PURE__ */ React15.createElement("div", { role: "tablist", "aria-label": "Search types", className: "flex items-center gap-2 border-b border-slate-200" }, 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__ */ React15.createElement(
+      "button",
+      {
+        key: t,
+        role: "tab",
+        "aria-selected": active,
+        type: "button",
+        onClick: () => onTypeChange && onTypeChange(t),
+        className: "px-3 py-1.5 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")
+      },
+      toLabel(t),
+      " (",
+      c,
+      ")"
+    );
+  }));
+}
+
 // ui/src/search/useSearch.js
 import { useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState4 } from "react";
 function useSearch(query, type) {
@@ -508,7 +547,7 @@ function useSearch(query, type) {
 }
 
 // ui/src/search/Search.jsx
-import React14 from "react";
+import React16 from "react";
 function Search(props) {
   let json = "{}";
   try {
@@ -516,7 +555,7 @@ function Search(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React14.createElement("div", { "data-canopy-search": "1", className: "not-prose" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-search": "1", className: "not-prose" }, /* @__PURE__ */ React16.createElement(
     "script",
     {
       type: "application/json",
@@ -526,7 +565,7 @@ function Search(props) {
 }
 
 // ui/src/command/MdxCommandPalette.jsx
-import React15 from "react";
+import React17 from "react";
 function MdxCommandPalette(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -534,145 +573,29 @@ function MdxCommandPalette(props = {}) {
     maxResults = 8,
     groupOrder = ["work", "page"],
     button = true,
-    buttonLabel = "Search"
+    // kept for backward compat; ignored by teaser form
+    buttonLabel = "Search",
+    label,
+    searchPath = "/search"
   } = props || {};
-  const data = { placeholder, hotkey, maxResults, groupOrder };
-  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-command": true }, button && /* @__PURE__ */ React15.createElement(
-    "button",
+  const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
+  const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath };
+  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-command": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React17.createElement("style", null, `.relative[data-canopy-panel-auto='1']:focus-within [data-canopy-command-panel]{display:block}`), /* @__PURE__ */ React17.createElement("form", { action: searchPath, method: "get", role: "search", className: "group flex items-center gap-2 px-2 py-1.5 rounded-lg border border-slate-300 bg-white/95 backdrop-blur text-slate-700 shadow-sm hover:shadow transition w-full focus-within:ring-2 focus-within:ring-brand-500" }, /* @__PURE__ */ React17.createElement("svg", { "aria-hidden": true, viewBox: "0 0 20 20", fill: "none", className: "w-4 h-4 text-slate-500" }, /* @__PURE__ */ React17.createElement("path", { stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m19 19-4-4m-2.5-6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z" })), /* @__PURE__ */ React17.createElement(
+    "input",
     {
-      type: "button",
-      "data-canopy-command-trigger": true,
-      className: "inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-300 text-slate-700 hover:bg-slate-50",
-      "aria-label": "Open search"
-    },
-    /* @__PURE__ */ React15.createElement("span", { "aria-hidden": true }, "\u2318K"),
-    /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, buttonLabel)
-  ), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
-}
-
-// ui/src/command/CommandApp.jsx
-import React16, { useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
-import { Command } from "cmdk";
-function normalize(s) {
-  try {
-    return String(s || "").toLowerCase();
-  } catch (e) {
-    return "";
-  }
-}
-function groupLabel(t) {
-  const type = String(t || "").toLowerCase();
-  if (type === "work") return "Works";
-  if (type === "page") return "Pages";
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-function CommandPaletteApp(props) {
-  const {
-    records = [],
-    loading = false,
-    open: controlledOpen,
-    onOpenChange,
-    onSelect = () => {
-    },
-    config = {}
-  } = props || {};
-  const {
-    placeholder = "Search\u2026",
-    hotkey = "mod+k",
-    maxResults = 8,
-    groupOrder = ["work", "page"],
-    button = true,
-    buttonLabel = "Search"
-  } = config || {};
-  const [open, setOpen] = useState5(!!controlledOpen);
-  useEffect5(() => {
-    if (typeof controlledOpen === "boolean") setOpen(controlledOpen);
-  }, [controlledOpen]);
-  const setOpenBoth = (v) => {
-    setOpen(!!v);
-    if (onOpenChange) onOpenChange(!!v);
-  };
-  const [q, setQ] = useState5("");
-  useEffect5(() => {
-    function handler(e) {
-      try {
-        const hk = String(hotkey || "mod+k").toLowerCase();
-        const isMod = hk.includes("mod+");
-        const key = hk.split("+").pop();
-        if ((isMod ? e.metaKey || e.ctrlKey : true) && e.key.toLowerCase() === String(key || "k")) {
-          e.preventDefault();
-          setOpenBoth(true);
-        }
-      } catch (e2) {
-      }
-    }
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [hotkey]);
-  useEffect5(() => {
-    function onKey(e) {
-      if (e.key === "Escape") setOpenBoth(false);
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, []);
-  const results = useMemo2(() => {
-    if (!q) return [];
-    const qq = normalize(q);
-    const out = [];
-    for (const r of records || []) {
-      const title = String(r && r.title || "");
-      if (!title) continue;
-      if (normalize(title).includes(qq)) out.push(r);
-      if (out.length >= Math.max(1, Number(maxResults) || 8)) break;
-    }
-    return out;
-  }, [q, records, maxResults]);
-  const grouped = useMemo2(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const r of results) {
-      const t = String(r && r.type || "page");
-      if (!map.has(t)) map.set(t, []);
-      map.get(t).push(r);
-    }
-    return map;
-  }, [results]);
-  const onOverlayMouseDown = (e) => {
-    if (e.target === e.currentTarget) setOpenBoth(false);
-  };
-  const onItemSelect = (href) => {
-    try {
-      onSelect(String(href || ""));
-      setOpenBoth(false);
-    } catch (e) {
+      type: "search",
+      name: "q",
+      inputMode: "search",
+      "data-canopy-command-input": true,
+      placeholder,
+      className: "flex-1 bg-transparent outline-none placeholder:text-slate-400 py-0.5 min-w-0",
+      "aria-label": "Search"
     }
-  };
-  return /* @__PURE__ */ React16.createElement("div", { className: "canopy-cmdk" }, button && /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      type: "button",
-      className: "canopy-cmdk__trigger",
-      onClick: () => setOpenBoth(true),
-      "aria-label": "Open search",
-      "data-canopy-command-trigger": true
-    },
-    /* @__PURE__ */ React16.createElement("span", { "aria-hidden": true }, "\u2318K"),
-    /* @__PURE__ */ React16.createElement("span", { className: "sr-only" }, buttonLabel)
-  ), /* @__PURE__ */ React16.createElement(
-    "div",
-    {
-      className: "canopy-cmdk__overlay",
-      "data-open": open ? "1" : "0",
-      onMouseDown: onOverlayMouseDown,
-      style: { display: open ? "flex" : "none" }
-    },
-    /* @__PURE__ */ React16.createElement("div", { className: "canopy-cmdk__panel" }, /* @__PURE__ */ React16.createElement("button", { className: "canopy-cmdk__close", "aria-label": "Close", onClick: () => setOpenBoth(false) }, "\xD7"), /* @__PURE__ */ React16.createElement("div", { className: "canopy-cmdk__inputWrap" }, /* @__PURE__ */ React16.createElement(Command, null, /* @__PURE__ */ React16.createElement(Command.Input, { autoFocus: true, value: q, onValueChange: setQ, placeholder, className: "canopy-cmdk__input" }), /* @__PURE__ */ React16.createElement(Command.List, { className: "canopy-cmdk__list" }, loading && /* @__PURE__ */ React16.createElement(Command.Loading, null, "Hang on\u2026"), /* @__PURE__ */ React16.createElement(Command.Empty, null, "No results found."), (Array.isArray(groupOrder) ? groupOrder : []).map((t) => grouped.has(t) ? /* @__PURE__ */ React16.createElement(Command.Group, { key: t, heading: groupLabel(t) }, grouped.get(t).map((r, i) => /* @__PURE__ */ React16.createElement(Command.Item, { key: t + "-" + i, onSelect: () => onItemSelect(r.href) }, /* @__PURE__ */ React16.createElement("div", { className: "canopy-cmdk__item" }, String(r.type || "") === "work" && r.thumbnail ? /* @__PURE__ */ React16.createElement("img", { className: "canopy-cmdk__thumb", src: r.thumbnail, alt: "" }) : null, /* @__PURE__ */ React16.createElement("span", { className: "canopy-cmdk__title" }, r.title))))) : null), Array.from(grouped.keys()).filter((t) => !(groupOrder || []).includes(t)).map((t) => /* @__PURE__ */ React16.createElement(Command.Group, { key: t, heading: groupLabel(t) }, grouped.get(t).map((r, i) => /* @__PURE__ */ React16.createElement(Command.Item, { key: t + "-x-" + i, onSelect: () => onItemSelect(r.href) }, /* @__PURE__ */ React16.createElement("div", { className: "canopy-cmdk__item" }, String(r.type || "") === "work" && r.thumbnail ? /* @__PURE__ */ React16.createElement("img", { className: "canopy-cmdk__thumb", src: r.thumbnail, alt: "" }) : null, /* @__PURE__ */ React16.createElement("span", { className: "canopy-cmdk__title" }, r.title))))))))))
-  ));
+  ), /* @__PURE__ */ React17.createElement("button", { type: "submit", "data-canopy-command-link": true, className: "inline-flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 bg-slate-50 hover:bg-slate-100 text-slate-700" }, /* @__PURE__ */ React17.createElement("span", null, text))), /* @__PURE__ */ React17.createElement("div", { "data-canopy-command-panel": true, style: { display: "none", position: "absolute", left: 0, right: 0, top: "calc(100% + 4px)", background: "#fff", border: "1px solid #e5e7eb", borderRadius: 8, boxShadow: "0 10px 25px rgba(0,0,0,0.12)", zIndex: 1e3, overflow: "auto", maxHeight: "60vh" } }, /* @__PURE__ */ React17.createElement("div", { id: "cplist" }))), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 export {
   Card,
   MdxCommandPalette as CommandPalette,
-  CommandPaletteApp,
   Fallback,
   Grid,
   GridItem,
@@ -681,9 +604,12 @@ export {
   Search,
   MdxSearchForm as SearchForm,
   SearchForm as SearchFormUI,
+  MdxCommandPalette as SearchPanel,
   MdxSearchResults as SearchResults,
   SearchResults as SearchResultsUI,
   SearchSummary,
+  MdxSearchTabs as SearchTabs,
+  SearchTabs as SearchTabsUI,
   SearchTotal,
   Slider,
   Viewer,