@dreamlake/dockit 0.1.1

package/dist/components/SearchPalette.js

@@ -0,0 +1,678 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { defaultResults, searchPages } from "../lib/pagefind-search.js";
+import { useMediaQuery } from "../lib/use-media-query.js";
+import { useSearchResize, SearchResizeHandles } from "./SearchResize.js";
+import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+const PAL_MAX_W = 860;
+const PAL_GUTTER = 24;
+const PAL_INSET = `max(${PAL_GUTTER}px, calc((100vw - ${PAL_MAX_W}px) / 2))`;
+const PAL_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+const PAL_MS = 280;
+function SearchPalette({ open, onClose, query }) {
+  const [showHidden] = useHiddenToggle();
+  const [active, setActive] = useState(0);
+  const [splitPx, setSplitPx] = useState(() => {
+    if (typeof window === "undefined") return 360;
+    const stored = Number(localStorage.getItem("palette-split"));
+    return Number.isFinite(stored) && stored > 0 ? stored : 360;
+  });
+  const draggingRef = useRef(false);
+  const [gripY, setGripY] = useState(null);
+  const isNarrowInset = useMediaQuery("(max-width: 767px)");
+  const isSingleCol = useMediaQuery("(max-width: 639px)");
+  const [hits, setHits] = useState(defaultResults);
+  const totalChars = hits.reduce((sum, h) => sum + h.title.length + (h.snippet?.length || 0) + (h.description?.length || 0), 0);
+  const { panelH, effectiveH, isResizing, startResize, resetHeight } = useSearchResize(hits.length, totalChars);
+  const prevQueryRef = useRef("");
+  const prevOrderRef = useRef([]);
+  useEffect(() => {
+    let cancelled = false;
+    searchPages(query, 30, showHidden).then((results) => {
+      if (cancelled) return;
+      const prevQ = prevQueryRef.current;
+      const isExtending = query.length > prevQ.length && query.toLowerCase().startsWith(prevQ.toLowerCase()) && prevQ.length > 0;
+      if (isExtending && prevOrderRef.current.length > 0) {
+        const resultMap = new Map(results.map((r) => [r.path, r]));
+        const stable = [];
+        for (const path of prevOrderRef.current) {
+          const r = resultMap.get(path);
+          if (r) {
+            stable.push(r);
+            resultMap.delete(path);
+          }
+        }
+        const fresh = [...resultMap.values()].sort((a, b) => b.score - a.score);
+        for (const r of fresh) {
+          const insertIdx = stable.findIndex((s) => r.score > s.score);
+          if (insertIdx >= 0) stable.splice(insertIdx, 0, r);
+          else stable.push(r);
+        }
+        prevOrderRef.current = stable.map((r) => r.path);
+        prevQueryRef.current = query;
+        setHits(stable);
+      } else {
+        prevOrderRef.current = results.map((r) => r.path);
+        prevQueryRef.current = query;
+        setHits(results);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [query, showHidden]);
+  const previewBodyRef = useRef(null);
+  const [pageHtml, setPageHtml] = useState("");
+  const pageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const activePath = hits[active]?.path;
+  useEffect(() => {
+    if (!activePath || isSingleCol) {
+      setPageHtml("");
+      return;
+    }
+    const cached = pageCacheRef.current.get(activePath);
+    if (cached !== void 0) {
+      setPageHtml(cached);
+      return;
+    }
+    setPageHtml("");
+    let cancelled = false;
+    fetch(activePath).then((r) => r.ok ? r.text() : "").then((html) => {
+      if (cancelled) return;
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      const main = doc.querySelector("[data-pagefind-body]");
+      main?.querySelectorAll("[data-pagefind-ignore], script, style").forEach((el) => el.remove());
+      const h1 = main?.querySelector("h1");
+      h1?.remove();
+      main?.querySelectorAll("h2, h3").forEach((el) => {
+        el.removeAttribute("style");
+        el.removeAttribute("class");
+      });
+      const content = main?.innerHTML ?? "";
+      pageCacheRef.current.set(activePath, content);
+      setPageHtml(content);
+    }).catch(() => {
+      if (!cancelled) setPageHtml("");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [active, activePath, isSingleCol]);
+  useEffect(() => {
+    if (!open) return;
+    setActive(0);
+  }, [open]);
+  useEffect(() => setActive(0), [query]);
+  useEffect(() => {
+    const el = previewBodyRef.current;
+    if (!el) return;
+    requestAnimationFrame(() => {
+      const mark = el.querySelector("mark");
+      if (mark) mark.scrollIntoView({ block: "center", behavior: "instant" });
+      else el.scrollTop = 0;
+    });
+  }, [activePath, query]);
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((a) => Math.min(a + 1, Math.max(hits.length - 1, 0)));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((a) => Math.max(a - 1, 0));
+      } else if (e.key === "Enter") {
+        const hit = hits[active];
+        if (hit) window.location.href = hit.path;
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, hits, active]);
+  useEffect(() => {
+    function onMove(e) {
+      if (!draggingRef.current) return;
+      const dlg = document.querySelector("[data-palette-panel]");
+      if (!dlg) return;
+      const rect = dlg.getBoundingClientRect();
+      const x = Math.max(200, Math.min(e.clientX - rect.left, rect.width - 200));
+      setSplitPx(x);
+      setGripY(Math.max(0, Math.min(e.clientY - rect.top, rect.height)));
+    }
+    function onUp() {
+      if (draggingRef.current) {
+        draggingRef.current = false;
+        setGripY(null);
+        localStorage.setItem("palette-split", String(splitPx));
+      }
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [splitPx]);
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      let raf2 = 0;
+      const raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setVisible(true));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        if (raf2) cancelAnimationFrame(raf2);
+      };
+    }
+    setVisible(false);
+    const t = window.setTimeout(() => setMounted(false), PAL_MS + 40);
+    return () => window.clearTimeout(t);
+  }, [open]);
+  if (!mounted) return null;
+  const previewHit = hits[active];
+  function highlight(text, q) {
+    if (!q) return text;
+    const lc = text.toLowerCase();
+    const lq = q.toLowerCase();
+    const out = [];
+    let from = 0;
+    let key = 0;
+    while (true) {
+      const idx = lc.indexOf(lq, from);
+      if (idx < 0) {
+        out.push(text.slice(from));
+        break;
+      }
+      if (idx > from) out.push(text.slice(from, idx));
+      out.push(
+        /* @__PURE__ */ jsx(
+          "mark",
+          {
+            style: {
+              background: "color-mix(in srgb, var(--color-doc-template-accent) 18%, transparent)",
+              color: "var(--color-doc-template-ink)",
+              opacity: 1,
+              fontWeight: 600,
+              borderRadius: 2,
+              padding: "0 1px"
+            },
+            children: text.slice(idx, idx + q.length)
+          },
+          `m${key++}`
+        )
+      );
+      from = idx + q.length;
+    }
+    return out;
+  }
+  function highlightHtml(html, q) {
+    if (!q.trim()) return html;
+    const ql = q.trim().toLowerCase();
+    return html.split(/(<[^>]*>)/g).map((part, i) => {
+      if (i % 2 === 1) return part;
+      const lc = part.toLowerCase();
+      if (!lc.includes(ql)) return part;
+      let result = "";
+      let last = 0;
+      while (true) {
+        const idx = lc.indexOf(ql, last);
+        if (idx < 0) break;
+        result += part.slice(last, idx);
+        result += `<mark>${part.slice(idx, idx + q.trim().length)}</mark>`;
+        last = idx + q.trim().length;
+      }
+      return result + part.slice(last);
+    }).join("");
+  }
+  const backdropStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 40,
+    background: "color-mix(in srgb, #000 28%, transparent)",
+    backdropFilter: "blur(6px) saturate(105%)",
+    WebkitBackdropFilter: "blur(6px) saturate(105%)",
+    opacity: visible ? 1 : 0,
+    pointerEvents: visible ? "auto" : "none",
+    transition: `opacity ${PAL_MS}ms ease`
+  };
+  const panelStyle = {
+    position: "fixed",
+    top: 40,
+    left: isNarrowInset ? 12 : PAL_INSET,
+    right: isNarrowInset ? 12 : PAL_INSET,
+    zIndex: 49,
+    background: "var(--color-doc-template-bg)",
+    border: "1px solid var(--color-doc-template-faint)",
+    borderRadius: 16,
+    boxShadow: "0 24px 60px rgb(0 0 0 / 0.18), 0 6px 18px rgb(0 0 0 / 0.06)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    opacity: visible ? 1 : 0,
+    pointerEvents: visible ? "auto" : "none",
+    transform: visible ? "translateY(0)" : "translateY(-8px)",
+    ...panelH != null ? { height: visible ? panelH : 0 } : {},
+    maxHeight: visible ? effectiveH : 0,
+    transformOrigin: "top center",
+    transition: isResizing ? "none" : `opacity ${PAL_MS}ms ${PAL_EASE}, transform ${PAL_MS}ms ${PAL_EASE}, max-height ${PAL_MS}ms ${PAL_EASE}${panelH != null ? `, height ${PAL_MS}ms ${PAL_EASE}` : ""}`
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: backdropStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { "data-palette-panel": true, role: "dialog", "aria-modal": "true", "aria-label": "Search", style: panelStyle, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid flex-1",
+          style: {
+            gridTemplateColumns: isSingleCol ? "1fr" : `${splitPx}px 1fr`,
+            minHeight: 0,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "ul",
+              {
+                className: "m-0 overflow-y-auto list-none select-none",
+                style: {
+                  padding: 6,
+                  borderRight: isSingleCol ? "0" : "1px solid var(--color-doc-template-faint)",
+                  background: "color-mix(in srgb, var(--color-doc-template-panel) 35%, var(--color-doc-template-bg))"
+                },
+                children: [
+                  hits.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-doc-template-muted", style: { padding: "8px 10px", fontSize: 13 }, children: "No matches." }),
+                  hits.map((hit, i) => /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      onMouseEnter: () => setActive(i),
+                      onClick: () => {
+                        window.location.href = hit.path;
+                      },
+                      className: i === active ? "flex items-center gap-2.5 cursor-pointer bg-doc-template-selected text-doc-template-ink" : "flex items-center gap-2.5 cursor-pointer text-doc-template-ink",
+                      style: {
+                        padding: "4px 10px",
+                        borderRadius: 10,
+                        fontFamily: "var(--font-doc-template-ui)",
+                        fontSize: 13,
+                        transition: "background 0.1s ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: i === active ? "inline-flex items-center justify-center text-doc-template-accent shrink-0" : "inline-flex items-center justify-center text-doc-template-muted shrink-0",
+                            style: {
+                              width: 24,
+                              height: 24,
+                              borderRadius: 5,
+                              background: i === active ? "var(--color-doc-template-accent-soft)" : "var(--color-doc-template-chip)"
+                            },
+                            children: /* @__PURE__ */ jsxs(
+                              "svg",
+                              {
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                "aria-hidden": true,
+                                style: { width: 13, height: 13 },
+                                children: [
+                                  /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                                  /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "flex flex-col min-w-0 flex-1", style: { gap: isSingleCol ? 1 : 2 }, children: isSingleCol ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              className: "text-doc-template-ink",
+                              style: {
+                                fontWeight: 500,
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis"
+                              },
+                              children: [
+                                hit.section && /* @__PURE__ */ jsxs(
+                                  "span",
+                                  {
+                                    className: "text-doc-template-muted uppercase",
+                                    style: {
+                                      fontFamily: "var(--font-doc-template-mono)",
+                                      fontSize: 9.5,
+                                      fontWeight: 500,
+                                      letterSpacing: "0.04em"
+                                    },
+                                    children: [
+                                      hit.section,
+                                      /* @__PURE__ */ jsx("span", { style: { margin: "0 3px", opacity: 0.5 }, children: "/" })
+                                    ]
+                                  }
+                                ),
+                                highlight(hit.title, query)
+                              ]
+                            }
+                          ),
+                          hit.snippet && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: "var(--font-doc-template-ui)",
+                                fontSize: 12,
+                                lineHeight: 1.45,
+                                color: "color-mix(in srgb, var(--color-doc-template-ink) 55%, transparent)",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                display: "-webkit-box",
+                                WebkitLineClamp: 2,
+                                WebkitBoxOrient: "vertical"
+                              },
+                              children: highlight(hit.snippet, query)
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "text-doc-template-ink",
+                              style: {
+                                fontWeight: 500,
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis"
+                              },
+                              children: highlight(hit.title, query)
+                            }
+                          ),
+                          hit.section && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "text-doc-template-muted uppercase",
+                              style: {
+                                fontFamily: "var(--font-doc-template-mono)",
+                                fontSize: 9.5,
+                                fontWeight: 500,
+                                letterSpacing: "0.04em",
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis"
+                              },
+                              children: hit.section
+                            }
+                          ),
+                          query.trim() && (hit.excerptHtml || hit.snippet) && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "pagefind-excerpt",
+                              style: {
+                                fontFamily: "var(--font-doc-template-ui)",
+                                fontSize: 11.5,
+                                lineHeight: 1.4,
+                                color: "color-mix(in srgb, var(--color-doc-template-ink) 55%, transparent)",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                display: "-webkit-box",
+                                WebkitLineClamp: 2,
+                                WebkitBoxOrient: "vertical"
+                              },
+                              ...hit.excerptHtml ? { dangerouslySetInnerHTML: { __html: hit.excerptHtml } } : { children: highlight(hit.snippet, query) }
+                            }
+                          )
+                        ] }) })
+                      ]
+                    },
+                    hit.path
+                  ))
+                ]
+              }
+            ),
+            !isSingleCol && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                onMouseDown: (e) => {
+                  draggingRef.current = true;
+                  const dlg = e.currentTarget.closest("[data-palette-panel]");
+                  if (dlg) {
+                    const rect = dlg.getBoundingClientRect();
+                    setGripY(Math.max(0, Math.min(e.clientY - rect.top, rect.height)));
+                  }
+                },
+                onDoubleClick: () => {
+                  setSplitPx(360);
+                  localStorage.setItem("palette-split", "360");
+                },
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: `calc(${splitPx}px - 4px)`,
+                  width: 8,
+                  cursor: "col-resize",
+                  zIndex: 2
+                },
+                children: gripY != null && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: "50%",
+                      top: gripY,
+                      transform: "translate(-50%, -50%)",
+                      width: 3,
+                      height: 28,
+                      borderRadius: 2,
+                      background: "var(--color-doc-template-muted)"
+                    }
+                  }
+                )
+              }
+            ),
+            !isSingleCol && /* @__PURE__ */ jsx(
+              "aside",
+              {
+                className: "overflow-y-auto flex flex-col",
+                style: {
+                  background: "color-mix(in srgb, var(--color-doc-template-panel) 60%, transparent)",
+                  minHeight: 280
+                },
+                children: previewHit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { style: { padding: "14px 18px 0" }, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "text-doc-template-muted uppercase",
+                        style: {
+                          fontFamily: "var(--font-doc-template-mono)",
+                          fontSize: 9.5,
+                          fontWeight: 500,
+                          letterSpacing: "0.05em",
+                          marginBottom: 6
+                        },
+                        children: previewHit.section || "—"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: "text-doc-template-ink",
+                        style: {
+                          margin: "0 0 12px",
+                          fontFamily: "var(--font-doc-template-ui)",
+                          fontSize: 16,
+                          fontWeight: 600,
+                          letterSpacing: "-0.012em",
+                          lineHeight: 1.25
+                        },
+                        children: highlight(previewHit.title, query)
+                      }
+                    )
+                  ] }),
+                  query.trim() && previewHit.subResults.length > 0 ? /* @__PURE__ */ jsx("div", { ref: previewBodyRef, className: "flex-1 overflow-y-auto pagefind-excerpt", style: { padding: "0 18px 14px" }, children: previewHit.subResults.map((sr, idx) => {
+                    const multi = previewHit.subResults.length > 1;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: "10px 0",
+                          borderTop: idx > 0 ? "1px solid var(--color-doc-template-faint)" : "none"
+                        },
+                        children: [
+                          sr.title && sr.title !== previewHit.title && /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "text-doc-template-muted",
+                              style: {
+                                fontFamily: "var(--font-doc-template-mono)",
+                                fontSize: 10,
+                                fontWeight: 600,
+                                letterSpacing: "0.02em",
+                                marginBottom: 6,
+                                opacity: 0.7
+                              },
+                              children: [
+                                "# ",
+                                sr.title
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: "var(--font-doc-template-ui)",
+                                fontSize: 12.5,
+                                lineHeight: 1.6,
+                                color: "color-mix(in srgb, var(--color-doc-template-ink) 70%, transparent)",
+                                ...multi ? {
+                                  overflow: "hidden",
+                                  display: "-webkit-box",
+                                  WebkitLineClamp: 5,
+                                  WebkitBoxOrient: "vertical"
+                                } : {}
+                              },
+                              dangerouslySetInnerHTML: { __html: sr.excerptHtml }
+                            }
+                          )
+                        ]
+                      },
+                      idx
+                    );
+                  }) }) : pageHtml ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: previewBodyRef,
+                      className: "flex-1 overflow-y-auto preview-body pagefind-excerpt",
+                      style: { padding: "0 18px 14px" },
+                      dangerouslySetInnerHTML: {
+                        __html: query.trim() ? highlightHtml(pageHtml, query) : pageHtml
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: previewBodyRef,
+                      className: "flex-1 overflow-y-auto",
+                      style: {
+                        padding: "0 18px 14px",
+                        fontFamily: "var(--font-doc-template-ui)",
+                        fontSize: 12.5,
+                        lineHeight: 1.6,
+                        color: "color-mix(in srgb, var(--color-doc-template-ink) 70%, transparent)"
+                      },
+                      children: query.trim() && previewHit.snippet ? highlight(previewHit.snippet, query) : previewHit.description || ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "text-doc-template-muted",
+                      style: {
+                        fontFamily: "var(--font-doc-template-mono)",
+                        fontSize: 10,
+                        fontWeight: 500,
+                        padding: "10px 18px",
+                        marginTop: "auto",
+                        opacity: 0.7,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: previewHit.path
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx("p", { className: "text-doc-template-muted", style: { padding: "18px", fontSize: 13 }, children: "Select a result to preview." })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center text-doc-template-muted",
+          style: {
+            gap: 14,
+            padding: "9px 14px",
+            borderTop: "1px solid var(--color-doc-template-faint)",
+            fontFamily: "var(--font-doc-template-mono)",
+            fontSize: 10,
+            fontWeight: 500,
+            background: "color-mix(in srgb, var(--color-doc-template-panel) 50%, transparent)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(FootKey, { children: [
+              /* @__PURE__ */ jsx(FootKbd, { children: "↑" }),
+              /* @__PURE__ */ jsx(FootKbd, { children: "↓" }),
+              /* @__PURE__ */ jsx("span", { children: "navigate" })
+            ] }),
+            /* @__PURE__ */ jsxs(FootKey, { children: [
+              /* @__PURE__ */ jsx(FootKbd, { children: "↵" }),
+              /* @__PURE__ */ jsx("span", { children: "open" })
+            ] }),
+            /* @__PURE__ */ jsxs(FootKey, { children: [
+              /* @__PURE__ */ jsx(FootKbd, { children: "esc" }),
+              /* @__PURE__ */ jsx("span", { children: "close" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+            /* @__PURE__ */ jsx("span", { style: { opacity: 0.8 }, children: "Search · Dreamlake docs" })
+          ]
+        }
+      ),
+      !isNarrowInset && /* @__PURE__ */ jsx(SearchResizeHandles, { startResize, resetHeight })
+    ] })
+  ] });
+}
+function FootKey({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", style: { gap: 5 }, children });
+}
+function FootKbd({ children }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      style: {
+        fontFamily: "var(--font-doc-template-mono)",
+        fontSize: 9.5,
+        background: "var(--color-doc-template-bg)",
+        border: "1px solid var(--color-doc-template-faint)",
+        borderRadius: 3,
+        padding: "1px 4px",
+        color: "var(--color-doc-template-ink)",
+        minWidth: 14,
+        textAlign: "center"
+      },
+      children
+    }
+  );
+}
+export {
+  SearchPalette
+};

package/dist/components/SearchResize.d.ts

@@ -0,0 +1,11 @@
+export declare function useSearchResize(hitCount: number, totalChars: number): {
+    panelH: number | null;
+    effectiveH: number;
+    isResizing: boolean;
+    startResize: (edge: "bottom" | "corner", e: React.MouseEvent) => void;
+    resetHeight: () => void;
+};
+export declare function SearchResizeHandles({ startResize, resetHeight }: {
+    startResize: (edge: 'bottom' | 'corner', e: React.MouseEvent) => void;
+    resetHeight: () => void;
+}): import("react").JSX.Element;