@canopy-iiif/app 0.7.14 → 0.7.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.7.14",
+  "version": "0.7.17",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -14,7 +14,8 @@
     "./ui/styles/index.css": "./ui/styles/index.css",
     "./ui/canopy-iiif-plugin": "./ui/tailwind-canopy-iiif-plugin.js",
     "./ui/canopy-iiif-preset": "./ui/tailwind-canopy-iiif-preset.js",
-    "./lib/components/*": "./lib/components/*"
+    "./lib/components/*": "./lib/components/*",
+    "./head": "./lib/head.js"
   },
   "files": [
     "lib/**",
@@ -38,7 +39,13 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "esbuild": "^0.21.4"

package/ui/dist/index.mjs

@@ -1,25 +1,11 @@
-// ui/src/Fallback.jsx
-import React from "react";
-function Fallback({ name, ...props }) {
-  const style = {
-    padding: "0.75rem 1rem",
-    border: "1px dashed #d1d5db",
-    color: "#6b7280",
-    borderRadius: 6,
-    background: "#f9fafb",
-    fontSize: 14
-  };
-  return /* @__PURE__ */ React.createElement("div", { style, "data-fallback-component": name || "Unknown" }, /* @__PURE__ */ React.createElement("strong", null, name || "Unknown component"), " not available in UI.");
-}
-
 // ui/src/HelloWorld.jsx
-import React2 from "react";
+import React from "react";
 var HelloWorld = () => {
-  return /* @__PURE__ */ React2.createElement("div", null, "Hello, World!");
+  return /* @__PURE__ */ React.createElement("div", null, "Hello, World!");
 };
 
 // ui/src/layout/Card.jsx
-import React3, { useEffect, useRef, useState } from "react";
+import React2, { useEffect, useRef, useState } from "react";
 function Card({
   href,
   src,
@@ -75,8 +61,8 @@ function Card({
   const h = Number(imgHeight);
   const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;
   const paddingPercent = ratio ? 100 / ratio : 100;
-  const caption = /* @__PURE__ */ React3.createElement("figcaption", null, title && /* @__PURE__ */ React3.createElement("span", null, title), subtitle && /* @__PURE__ */ React3.createElement("span", null, subtitle), children);
-  return /* @__PURE__ */ React3.createElement(
+  const caption = /* @__PURE__ */ React2.createElement("figcaption", null, title && /* @__PURE__ */ React2.createElement("span", null, title), subtitle && /* @__PURE__ */ React2.createElement("span", null, subtitle), children);
+  return /* @__PURE__ */ React2.createElement(
     "a",
     {
       href,
@@ -88,13 +74,13 @@ function Card({
       "data-image-loaded": imageLoaded ? "true" : "false",
       ...rest
     },
-    /* @__PURE__ */ React3.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React2.createElement("figure", null, src ? ratio ? /* @__PURE__ */ React2.createElement(
       "div",
       {
         className: "canopy-card-media",
         style: { "--canopy-card-padding": `${paddingPercent}%` }
       },
-      inView ? /* @__PURE__ */ React3.createElement(
+      inView ? /* @__PURE__ */ React2.createElement(
         "img",
         {
           src,
@@ -104,7 +90,7 @@ function Card({
           onError: () => setImageLoaded(true)
         }
       ) : null
-    ) : /* @__PURE__ */ React3.createElement(
+    ) : /* @__PURE__ */ React2.createElement(
       "img",
       {
         src,
@@ -120,9 +106,9 @@ function Card({
 
 // ui/src/layout/Grid.jsx
 import Masonry from "react-masonry-css";
-import React4 from "react";
+import React3 from "react";
 function GridItem({ children, className = "", style = {}, ...rest }) {
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: `canopy-grid-item ${className}`.trim(),
@@ -150,7 +136,7 @@ function Grid({
     640: 2
   };
   const vars = { "--grid-gap": gap, "--grid-padding-y": paddingY };
-  return /* @__PURE__ */ React4.createElement("div", { className: "canopy-grid-wrap" }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: "canopy-grid-wrap" }, /* @__PURE__ */ React3.createElement(
     "style",
     {
       dangerouslySetInnerHTML: {
@@ -162,7 +148,7 @@ function Grid({
           `
       }
     }
-  ), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     Masonry,
     {
       breakpointCols: cols,
@@ -176,7 +162,7 @@ function Grid({
 }
 
 // ui/src/iiif/Viewer.jsx
-import React5, { useEffect as useEffect2, useState as useState2 } from "react";
+import React4, { useEffect as useEffect2, useState as useState2 } from "react";
 var DEFAULT_VIEWER_OPTIONS = {
   showDownload: false,
   showIIIFBadge: false,
@@ -232,7 +218,7 @@ var Viewer = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React4.createElement("div", { "data-canopy-viewer": "1", className: "not-prose" }, /* @__PURE__ */ React4.createElement(
       "script",
       {
         type: "application/json",
@@ -240,11 +226,11 @@ var Viewer = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React5.createElement(CloverViewer, { ...props, options: mergedOptions });
+  return /* @__PURE__ */ React4.createElement(CloverViewer, { ...props, options: mergedOptions });
 };
 
 // ui/src/iiif/Slider.jsx
-import React6, { useEffect as useEffect3, useState as useState3 } from "react";
+import React5, { useEffect as useEffect3, useState as useState3 } from "react";
 var Slider = (props) => {
   const [CloverSlider, setCloverSlider] = useState3(null);
   useEffect3(() => {
@@ -270,7 +256,7 @@ var Slider = (props) => {
     } catch (_) {
       json = "{}";
     }
-    return /* @__PURE__ */ React6.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React5.createElement("div", { "data-canopy-slider": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement(
       "script",
       {
         type: "application/json",
@@ -278,11 +264,11 @@ var Slider = (props) => {
       }
     ));
   }
-  return /* @__PURE__ */ React6.createElement(CloverSlider, { ...props });
+  return /* @__PURE__ */ React5.createElement(CloverSlider, { ...props });
 };
 
 // ui/src/iiif/MdxRelatedItems.jsx
-import React7 from "react";
+import React6 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -290,11 +276,11 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React7.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React7.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React6.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React6.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React8 from "react";
+import React7 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -302,11 +288,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React7.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React7.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React9 from "react";
+import React8 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -314,11 +300,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React10 from "react";
+import React9 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -326,31 +312,31 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchResults.jsx
-import React11 from "react";
+import React10 from "react";
 function SearchResults({
   results = [],
   type = "all",
   layout = "grid"
 }) {
   if (!results.length) {
-    return /* @__PURE__ */ React11.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React11.createElement("em", null, "No results"));
+    return /* @__PURE__ */ React10.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React10.createElement("em", null, "No results"));
   }
   if (layout === "list") {
-    return /* @__PURE__ */ React11.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+    return /* @__PURE__ */ React10.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__ */ React11.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "li",
         {
           key: i,
           className: `search-result ${r.type}`,
           "data-thumbnail-aspect-ratio": aspect
         },
-        /* @__PURE__ */ React11.createElement(
+        /* @__PURE__ */ React10.createElement(
           Card,
           {
             href: r.href,
@@ -364,17 +350,17 @@ function SearchResults({
       );
     }));
   }
-  return /* @__PURE__ */ React11.createElement("div", { id: "search-results" }, /* @__PURE__ */ React11.createElement(Grid, null, results.map((r, i) => {
+  return /* @__PURE__ */ React10.createElement("div", { id: "search-results" }, /* @__PURE__ */ React10.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__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(
       GridItem,
       {
         key: i,
         className: `search-result ${r.type}`,
         "data-thumbnail-aspect-ratio": aspect
       },
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React10.createElement(
         Card,
         {
           href: r.href,
@@ -390,15 +376,15 @@ function SearchResults({
 }
 
 // ui/src/search/SearchTabs.jsx
-import React12 from "react";
+import React11 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__ */ React12.createElement("div", { role: "tablist", "aria-label": "Search types", className: "flex items-center gap-2 border-b border-slate-200" }, orderedTypes.map((t) => {
+  return /* @__PURE__ */ React11.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__ */ React11.createElement(
       "button",
       {
         key: t,
@@ -406,7 +392,7 @@ function SearchTabs({ type = "all", onTypeChange, types = [], counts = {} }) {
         "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")
+        className: "px-3 py-2 text-sm rounded-t-md border-b-2 -mb-px transition-colors " + (active ? "border-brand-600 text-brand-700" : "border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300")
       },
       toLabel(t),
       " (",
@@ -417,14 +403,14 @@ function SearchTabs({ type = "all", onTypeChange, types = [], counts = {} }) {
 }
 
 // ui/src/command/MdxCommandPalette.jsx
-import React16 from "react";
+import React15 from "react";
 
 // ui/src/Icons.jsx
-import React13 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React13.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React13.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+import React12 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React12.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
-import React14 from "react";
+import React13 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -482,14 +468,42 @@ function SearchPanelForm(props = {}) {
     placeholder = "Search\u2026",
     buttonLabel = "Search",
     label,
-    searchPath = "/search"
+    searchPath = "/search",
+    inputId: inputIdProp
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React14.useMemo(
+  const action = React13.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  return /* @__PURE__ */ React14.createElement(
+  const autoId = typeof React13.useId === "function" ? React13.useId() : void 0;
+  const [fallbackId] = React13.useState(
+    () => `canopy-cmdk-${Math.random().toString(36).slice(2, 10)}`
+  );
+  const inputId = inputIdProp || autoId || fallbackId;
+  const inputRef = React13.useRef(null);
+  const focusInput = React13.useCallback(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    if (document.activeElement === el) return;
+    try {
+      el.focus({ preventScroll: true });
+    } catch (_) {
+      try {
+        el.focus();
+      } catch (_2) {
+      }
+    }
+  }, []);
+  const handlePointerDown = React13.useCallback((event) => {
+    const target = event.target;
+    if (target && typeof target.closest === "function") {
+      if (target.closest("[data-canopy-command-trigger]")) return;
+    }
+    event.preventDefault();
+    focusInput();
+  }, [focusInput]);
+  return /* @__PURE__ */ React13.createElement(
     "form",
     {
       action,
@@ -497,35 +511,47 @@ function SearchPanelForm(props = {}) {
       role: "search",
       autoComplete: "off",
       spellCheck: "false",
-      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"
+      className: "group flex items-center gap-2 rounded-lg border border-slate-300 text-slate-700 shadow-sm transition w-full focus-within:ring-2 focus-within:ring-brand-500 canopy-cmdk-form",
+      onPointerDown: handlePointerDown,
+      "data-placeholder": placeholder || ""
     },
-    /* @__PURE__ */ React14.createElement(MagnifyingGlassIcon, { className: "w-5 h-5 text-slate-400 group-focus-within:text-brand-500" }),
-    /* @__PURE__ */ React14.createElement(
-      "input",
+    /* @__PURE__ */ React13.createElement(
+      "label",
       {
-        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"
-      }
+        htmlFor: inputId,
+        className: "flex items-center gap-2 flex-1 min-w-0 cursor-text canopy-cmdk-label"
+      },
+      /* @__PURE__ */ React13.createElement(MagnifyingGlassIcon, { className: "w-5 h-5 text-slate-400 group-focus-within:text-brand-500 pointer-events-none" }),
+      /* @__PURE__ */ React13.createElement(
+        "input",
+        {
+          id: inputId,
+          type: "search",
+          name: "q",
+          inputMode: "search",
+          "data-canopy-command-input": true,
+          placeholder,
+          className: "flex-1 bg-transparent outline-none placeholder:text-slate-400 py-1 min-w-0",
+          "aria-label": "Search",
+          ref: inputRef
+        }
+      )
     ),
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React13.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"
+        type: "button",
+        "data-canopy-command-trigger": true,
+        className: "inline-flex items-center gap-2 rounded-md border border-transparent bg-brand px-2 py-1 text-sm font-medium text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2"
       },
-      /* @__PURE__ */ React14.createElement("span", null, text)
+      /* @__PURE__ */ React13.createElement("span", null, text),
+      /* @__PURE__ */ React13.createElement("span", { "aria-hidden": true, className: "hidden sm:inline-flex items-center gap-1 text-xs font-semibold canopy-cmdk-shortcut" }, /* @__PURE__ */ React13.createElement("span", null, "\u2318"), /* @__PURE__ */ React13.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React15 from "react";
+import React14 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style } = props || {};
   const baseStyle = {
@@ -542,7 +568,7 @@ function SearchPanelTeaserResults(props = {}) {
     overflow: "auto",
     maxHeight: "60vh"
   };
-  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-command-panel": true, style: { ...baseStyle, ...style || {} } }, /* @__PURE__ */ React15.createElement("div", { id: "cplist" }));
+  return /* @__PURE__ */ React14.createElement("div", { "data-canopy-command-panel": true, style: { ...baseStyle, ...style || {} } }, /* @__PURE__ */ React14.createElement("div", { id: "cplist" }));
 }
 
 // ui/src/command/MdxCommandPalette.jsx
@@ -561,17 +587,17 @@ function MdxCommandPalette(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-command": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement("style", null, `.relative[data-canopy-panel-auto='1']:focus-within [data-canopy-command-panel]{display:block}`), /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-command": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React15.createElement("style", null, `.relative[data-canopy-panel-auto='1']:focus-within [data-canopy-command-panel]{display:block}`), /* @__PURE__ */ React15.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React15.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/search/SearchPanel.jsx
-import React17 from "react";
+import React16 from "react";
 function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
     hotkey = "mod+k",
     maxResults = 8,
-    groupOrder = ["work", "page"],
+    groupOrder = ["work", "docs", "page"],
     // Kept for backward compat; form always renders submit
     button = true,
     // eslint-disable-line no-unused-vars
@@ -582,12 +608,11 @@ function SearchPanel(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React17.createElement("div", { "data-canopy-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(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React17.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React17.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-command": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement("style", null, `.relative[data-canopy-panel-auto='1']:focus-within [data-canopy-command-panel]{display:block}`), /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 export {
   Card,
   MdxCommandPalette as CommandPalette,
-  Fallback,
   Grid,
   GridItem,
   HelloWorld,