@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/blocks/search.js

@@ -0,0 +1,697 @@
+"use client";
+
+// src/kernel/components/blocks/search.tsx
+import { buttonVariants } from "../ui/button.js";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogDescription,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from "../ui/dialog.js";
+import { Input } from "../ui/input.js";
+import { Kbd } from "../ui/kbd.js";
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressTrack
+} from "../ui/progress.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { formatShortcut } from "@publish.os/nextjs/keyboard-shortcuts";
+import {
+  SearchProvider,
+  useSearchBlock
+} from "@publish.os/nextjs/search";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/search.tsx
+import { Search as SearchIcon } from "lucide-react";
+import NextLink from "next/link";
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SEARCH_ROW_HEIGHT = 58;
+var SEARCH_ROW_WITH_DESCRIPTION_HEIGHT = 72;
+var SEARCH_RESULTS_PADDING = 16;
+var SEARCH_RESULTS_MAX_HEIGHT = 360;
+var SEARCH_RESULT_SNIPPET_LENGTH = 180;
+var searchProgressConfig = {
+  completeDelay: 100,
+  exitDuration: 150,
+  fastPhaseEnd: 25,
+  initialProgress: 5,
+  maxDuration: 5e3,
+  minDuration: 50,
+  targetProgress: 95
+};
+function SearchProgressBar({ className }) {
+  const {
+    state: { isTyping, loading, status }
+  } = useSearchBlock();
+  const [progress, setProgress] = useState(0);
+  const [isExiting, setIsExiting] = useState(false);
+  const animationFrame = useRef(null);
+  const cleanupTimer = useRef(null);
+  const progressRef = useRef(0);
+  const active = loading || status === "building" || status === "stale";
+  const setProgressValue = useCallback((value) => {
+    progressRef.current = value;
+    setProgress(value);
+  }, []);
+  const cleanup = useCallback(() => {
+    if (animationFrame.current !== null) {
+      window.cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = null;
+    }
+    if (cleanupTimer.current) {
+      window.clearTimeout(cleanupTimer.current);
+      cleanupTimer.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (isTyping) {
+      cleanup();
+      setProgressValue(0);
+      setIsExiting(false);
+      return;
+    }
+    if (!active) {
+      if (progressRef.current > 0) {
+        cleanup();
+        setProgressValue(100);
+        cleanupTimer.current = window.setTimeout(() => {
+          setIsExiting(true);
+          cleanupTimer.current = window.setTimeout(() => {
+            setProgressValue(0);
+            setIsExiting(false);
+            cleanupTimer.current = null;
+          }, searchProgressConfig.exitDuration);
+        }, searchProgressConfig.completeDelay);
+      }
+      return;
+    }
+    cleanup();
+    setIsExiting(false);
+    setProgressValue(searchProgressConfig.initialProgress);
+    const start = performance.now();
+    const animate = (now) => {
+      const elapsed = now - start;
+      let progressValue;
+      if (elapsed < searchProgressConfig.minDuration) {
+        progressValue = searchProgressConfig.initialProgress + elapsed / searchProgressConfig.minDuration * (searchProgressConfig.fastPhaseEnd - searchProgressConfig.initialProgress);
+      } else {
+        const remainingProgress = searchProgressConfig.targetProgress - searchProgressConfig.fastPhaseEnd;
+        const normalizedTime = Math.min(
+          1,
+          (elapsed - searchProgressConfig.minDuration) / (searchProgressConfig.maxDuration - searchProgressConfig.minDuration)
+        );
+        const easedTime = 1 - (1 - normalizedTime) ** 3;
+        progressValue = searchProgressConfig.fastPhaseEnd + easedTime * remainingProgress;
+      }
+      setProgressValue(
+        Math.min(searchProgressConfig.targetProgress, progressValue)
+      );
+      animationFrame.current = window.requestAnimationFrame(animate);
+    };
+    animationFrame.current = window.requestAnimationFrame(animate);
+    return cleanup;
+  }, [active, cleanup, isTyping, setProgressValue]);
+  const isVisible = progress > 0;
+  return /* @__PURE__ */ jsx(
+    Progress,
+    {
+      "aria-hidden": !isVisible,
+      className: cn(
+        "pointer-events-none h-[1.5px] overflow-hidden opacity-75 transition-opacity duration-300",
+        isVisible ? "opacity-100" : "opacity-0",
+        className
+      ),
+      value: isVisible ? progress : null,
+      children: /* @__PURE__ */ jsx(ProgressTrack, { className: "h-full rounded-none bg-transparent", children: /* @__PURE__ */ jsx(
+        ProgressIndicator,
+        {
+          className: "h-full w-full rounded-none bg-accent-1",
+          style: {
+            transform: isExiting ? "scaleX(0)" : `scaleX(${Math.max(0, Math.min(100, progress)) / 100})`,
+            transformOrigin: isExiting ? "right" : "left",
+            transition: isExiting ? `transform ${searchProgressConfig.exitDuration}ms cubic-bezier(.18,.66,.89,.35)` : "transform 200ms cubic-bezier(.04,.06,0,.61)"
+          }
+        }
+      ) })
+    }
+  );
+}
+function RootDialogFrame({
+  children,
+  className
+}) {
+  const {
+    actions: { setOpen },
+    meta: { variant },
+    state: { open }
+  } = useSearchBlock();
+  return /* @__PURE__ */ jsx(Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx("div", { className, "data-search-root": "", "data-variant": variant, children }) });
+}
+function Root({ children, className, ...providerProps }) {
+  return /* @__PURE__ */ jsx(SearchProvider, { ...providerProps, children: /* @__PURE__ */ jsx(RootDialogFrame, { className, children }) });
+}
+function Trigger({
+  asChild = false,
+  children,
+  className,
+  icon,
+  placeholder = "Search...",
+  shortcut,
+  shortcutClassName,
+  showIcon = true,
+  showShortcut = true,
+  size = "sm",
+  variant = "outline"
+}) {
+  const {
+    meta: { inputId, shortcut: registeredShortcut },
+    state: { open }
+  } = useSearchBlock();
+  const visibleShortcut = shortcut ?? registeredShortcut;
+  const shortcutTokens = useMemo(
+    () => formatShortcut(visibleShortcut),
+    [visibleShortcut]
+  );
+  if (asChild && children) {
+    return /* @__PURE__ */ jsx(
+      DialogTrigger,
+      {
+        render: cloneElement(children, {
+          "aria-controls": inputId,
+          "aria-expanded": open,
+          className: cn(children.props.className, className)
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    DialogTrigger,
+    {
+      "aria-controls": inputId,
+      "aria-expanded": open,
+      "aria-label": "Open search",
+      className: cn(
+        buttonVariants({ size, variant }),
+        "justify-start gap-2 px-2.5 text-foreground-3",
+        "hover:text-foreground-1",
+        className
+      ),
+      children: [
+        showIcon ? icon ?? /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true", size: 16 }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: placeholder }),
+        showShortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "hidden shrink-0 items-center gap-1 md:inline-flex",
+              shortcutClassName
+            ),
+            children: shortcutTokens.map((token) => /* @__PURE__ */ jsx(Kbd, { size: "xs", children: token }, token))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DialogContent({
+  children,
+  className,
+  description = "Search this site and navigate to a result.",
+  title = "Search"
+}) {
+  const {
+    meta: { variant }
+  } = useSearchBlock();
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogBackdrop, { className: "bg-overlay-background backdrop-blur-[2px]" }),
+    /* @__PURE__ */ jsxs(
+      DialogPopup,
+      {
+        className: cn(
+          "top-[12dvh] flex max-h-[min(42rem,82dvh)] w-[min(92vw,575px)] translate-y-0 flex-col overflow-hidden p-0 shadow-xl",
+          variant === "mobile" && "bottom-auto left-1/2 top-[8dvh] h-auto max-h-[86dvh] w-[min(94vw,575px)] max-w-none -translate-x-1/2 translate-y-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function SearchInputField({
+  className,
+  closeClassName,
+  closeLabel = "ESC",
+  placeholder = "Search docs...",
+  rootClassName,
+  showCloseShortcut = true
+}) {
+  const {
+    actions: { handleInputChange, navigateToResult, setOpen, setSelectedValue },
+    meta: { inputId, inputRef, listId },
+    state: { displayResults, query, selectedValue }
+  } = useSearchBlock();
+  const closeDisplayLabel = typeof closeLabel === "string" ? closeLabel.toUpperCase() : closeLabel;
+  const selectedIndex2 = Math.max(
+    0,
+    displayResults.findIndex((result) => result.id === selectedValue)
+  );
+  const selectedOptionId = displayResults.length > 0 ? resultOptionId(listId, selectedIndex2) : void 0;
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const next = displayResults[Math.min(selectedIndex2 + 1, displayResults.length - 1)];
+      if (next) setSelectedValue(next.id);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const next = displayResults[Math.max(selectedIndex2 - 1, 0)];
+      if (next) setSelectedValue(next.id);
+      return;
+    }
+    if (event.key === "Enter") {
+      const selected = displayResults[selectedIndex2];
+      if (!selected) return;
+      event.preventDefault();
+      navigateToResult(selected);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative rounded-t-[inherit] bg-surface-1", rootClassName),
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-activedescendant": selectedOptionId,
+            "aria-autocomplete": "list",
+            "aria-controls": listId,
+            "aria-expanded": displayResults.length > 0,
+            autoComplete: "off",
+            className: cn(
+              "supports-[caret-color:var(--accent-1)]:caret-(--accent-1)",
+              "h-12 rounded-none border-0 bg-transparent px-4 pr-16 text-sm shadow-none outline-none focus:border-transparent focus-visible:outline-0",
+              className
+            ),
+            id: inputId,
+            onChange: (event) => handleInputChange(event.currentTarget.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            ref: inputRef,
+            role: "combobox",
+            spellCheck: false,
+            type: "text",
+            value: query
+          }
+        ),
+        showCloseShortcut ? /* @__PURE__ */ jsx(
+          DialogClose,
+          {
+            "aria-label": "Close search",
+            className: cn(
+              "absolute right-3 top-1/2 size-auto -translate-y-1/2 bg-transparent p-0 text-foreground-3 hover:bg-transparent hover:text-foreground-1",
+              closeClassName
+            ),
+            children: /* @__PURE__ */ jsx(Kbd, { className: "text-foreground-2", size: "sm", children: closeDisplayLabel })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SearchResults({
+  className,
+  emptyText = "No results found."
+}) {
+  const {
+    actions: { navigateToResult, setOpen, setSelectedValue },
+    meta: { listId, listRef },
+    state: {
+      displayResults,
+      isTyping,
+      loading,
+      message,
+      query,
+      selectedValue,
+      status
+    }
+  } = useSearchBlock();
+  const hasQuery = query.trim().length > 0;
+  const showResults = displayResults.length > 0;
+  const statusMessage = message ?? statusLabel(status);
+  const showStatusPanel = hasQuery && !isTyping && !loading && !showResults && (status === "building" || status === "stale" || status === "error");
+  const showEmptyPanel = hasQuery && !isTyping && !loading && !showResults && !showStatusPanel && status === "ready";
+  const showPanel = showResults || showStatusPanel || showEmptyPanel;
+  const resultRowHeight = displayResults.some(
+    (result) => resultSnippet({ query, result })
+  ) ? SEARCH_ROW_WITH_DESCRIPTION_HEIGHT : SEARCH_ROW_HEIGHT;
+  const fullResultsHeight = displayResults.length * resultRowHeight + SEARCH_RESULTS_PADDING;
+  const resultsAreScrollable = fullResultsHeight > SEARCH_RESULTS_MAX_HEIGHT;
+  const resultsHeight = Math.min(fullResultsHeight, SEARCH_RESULTS_MAX_HEIGHT);
+  const panelHeight = showResults ? resultsHeight : showStatusPanel || showEmptyPanel ? 144 : 0;
+  const containerDuration = showResults ? Math.min(320, 150 + displayResults.length * 18) : 180;
+  useEffect(() => {
+    if (!selectedValue || !showResults) return;
+    const frame = window.requestAnimationFrame(() => {
+      const index = selectedIndex(displayResults, selectedValue);
+      document.getElementById(resultOptionId(listId, index))?.scrollIntoView({ block: "nearest" });
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [displayResults, listId, selectedValue, showResults]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative grid rounded-b-[inherit] bg-surface-1 transition-[grid-template-rows,opacity] ease-[cubic-bezier(0.4,0,0.2,1)] before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-10 before:h-px before:bg-stroke-3 before:transition-opacity motion-reduce:transition-none",
+        showPanel ? "opacity-100" : "opacity-0",
+        showPanel ? "before:opacity-100" : "before:opacity-0",
+        className
+      ),
+      style: {
+        gridTemplateRows: `${panelHeight}px`,
+        transitionDuration: `${containerDuration}ms`
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-hidden", children: [
+        showStatusPanel ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": "polite",
+            className: "flex h-full items-center justify-center px-6 py-10 text-center text-sm",
+            children: /* @__PURE__ */ jsx("p", { className: "max-w-full text-foreground-2", children: statusMessage })
+          }
+        ) : null,
+        showEmptyPanel ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": "polite",
+            className: "flex h-full items-center justify-center px-6 py-10 text-center text-sm",
+            children: /* @__PURE__ */ jsxs("p", { className: "max-w-full text-base text-foreground-2", children: [
+              emptyText.replace(/\.$/, ""),
+              " for",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "inline-block max-w-full truncate align-bottom font-medium text-foreground-1", children: [
+                '"',
+                query.trim(),
+                '"'
+              ] })
+            ] })
+          }
+        ) : null,
+        showResults ? /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            className: "h-full",
+            mask: resultsAreScrollable ? { height: 40, triggerSize: 32 } : false,
+            scrollbar: resultsAreScrollable,
+            variant: "gradient",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-label": "Search results",
+                className: "p-2",
+                id: listId,
+                ref: listRef,
+                role: "listbox",
+                children: displayResults.map((result, index) => {
+                  const snippet = resultSnippet({ query, result });
+                  return /* @__PURE__ */ jsxs(
+                    NextLink,
+                    {
+                      "aria-selected": result.id === selectedValue,
+                      className: cn(
+                        "block min-h-[58px] min-w-0 overflow-hidden rounded-[max(calc(var(--radius-dialog)_-_0.25rem),0px)] px-3 py-2 text-left transition-colors",
+                        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+                        result.id === selectedValue ? "bg-surface-active text-foreground-1" : "text-foreground-2"
+                      ),
+                      href: result.url,
+                      id: resultOptionId(listId, index),
+                      onClick: () => setOpen(false),
+                      onKeyDown: (event) => {
+                        if (event.key !== "Enter") return;
+                        event.preventDefault();
+                        navigateToResult(result);
+                      },
+                      onMouseEnter: () => setSelectedValue(result.id),
+                      onMouseMove: () => setSelectedValue(result.id),
+                      role: "option",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "block truncate break-all text-xs leading-4 text-foreground-3", children: /* @__PURE__ */ jsx(
+                          HighlightedText,
+                          {
+                            text: resultSubtitle(result),
+                            query
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("span", { className: "line-clamp-1 break-all text-sm font-medium", children: /* @__PURE__ */ jsx(HighlightedText, { text: result.title, query }) }),
+                        snippet ? /* @__PURE__ */ jsx("span", { className: "mt-1 line-clamp-2 break-words text-xs leading-4 text-foreground-3", children: /* @__PURE__ */ jsx(HighlightedText, { text: snippet, query }) }) : null
+                      ]
+                    },
+                    result.id
+                  );
+                })
+              }
+            )
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}
+function statusLabel(status) {
+  if (status === "building") return "Building search index...";
+  if (status === "stale") return "Updating search index...";
+  if (status === "error") return "Search is temporarily unavailable";
+  return "Searching...";
+}
+function resultOptionId(listId, index) {
+  return `${listId}-result-${index}`;
+}
+function selectedIndex(results, selectedValue) {
+  return Math.max(
+    0,
+    results.findIndex((result) => result.id === selectedValue)
+  );
+}
+function cleanResultPath(url) {
+  const path = url.split("#")[0]?.replace(/^\/+|\/+$/g, "") ?? "";
+  return path || "/";
+}
+function resultSubtitle(result) {
+  const section = result.meta.section ?? result.meta.group;
+  const path = cleanResultPath(result.meta.path ?? result.url);
+  if (section && path && !path.startsWith(section)) {
+    return `${section} / ${path}`;
+  }
+  return path || section || result.url;
+}
+function normalizedSnippetText(text) {
+  return (text ?? "").replace(/\s+/g, " ").trim();
+}
+function queryMatches(text, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return false;
+  const lower = text.toLowerCase();
+  if (lower.includes(normalizedQuery)) return true;
+  return normalizedQuery.split(/\s+/).filter((term) => term.length > 1).some((term) => lower.includes(term));
+}
+function firstMatchIndex(text, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return -1;
+  const lower = text.toLowerCase();
+  const phraseIndex = lower.indexOf(normalizedQuery);
+  if (phraseIndex >= 0) return phraseIndex;
+  return normalizedQuery.split(/\s+/).filter((term) => term.length > 1).map((term) => lower.indexOf(term)).filter((index) => index >= 0).sort((left, right) => left - right)[0] ?? -1;
+}
+function contextualSnippet({
+  length = SEARCH_RESULT_SNIPPET_LENGTH,
+  query,
+  text
+}) {
+  const normalizedText = normalizedSnippetText(text);
+  if (normalizedText.length <= length) return normalizedText;
+  const matchIndex = firstMatchIndex(normalizedText, query);
+  if (matchIndex < 0) return `${normalizedText.slice(0, length).trimEnd()}...`;
+  const halfLength = Math.floor(length / 2);
+  let start = Math.max(0, matchIndex - halfLength);
+  let end = Math.min(normalizedText.length, start + length);
+  if (end - start < length) {
+    start = Math.max(0, end - length);
+  }
+  if (start > 0) {
+    const nextSpace = normalizedText.indexOf(" ", start);
+    if (nextSpace > start && nextSpace < matchIndex) {
+      start = nextSpace + 1;
+    }
+  }
+  if (end < normalizedText.length) {
+    const previousSpace = normalizedText.lastIndexOf(" ", end);
+    if (previousSpace > matchIndex) {
+      end = previousSpace;
+    }
+  }
+  const prefix = start > 0 ? "... " : "";
+  const suffix = end < normalizedText.length ? " ..." : "";
+  return `${prefix}${normalizedText.slice(start, end).trim()}${suffix}`;
+}
+function resultSnippet({
+  query,
+  result
+}) {
+  const description = normalizedSnippetText(result.meta.description);
+  if (description && queryMatches(description, query)) {
+    return contextualSnippet({ query, text: description });
+  }
+  const excerpt = normalizedSnippetText(result.plainExcerpt);
+  if (excerpt) {
+    return contextualSnippet({ query, text: excerpt });
+  }
+  return description ? contextualSnippet({ query, text: description }) : "";
+}
+function HighlightedText({ query, text }) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return text;
+  const lower = text.toLowerCase();
+  const phraseStart = lower.indexOf(normalizedQuery);
+  const terms = phraseStart >= 0 ? [normalizedQuery] : normalizedQuery.split(/\s+/).filter((term) => term.length > 1);
+  if (terms.length === 0) return text;
+  const ranges = terms.flatMap((term) => {
+    const termRanges = [];
+    let start = lower.indexOf(term);
+    while (start >= 0) {
+      termRanges.push({ end: start + term.length, start });
+      start = lower.indexOf(term, start + term.length);
+    }
+    return termRanges;
+  }).sort((left, right) => left.start - right.start);
+  const mergedRanges = [];
+  for (const range of ranges) {
+    const previous = mergedRanges.at(-1);
+    if (previous && range.start <= previous.end) {
+      previous.end = Math.max(previous.end, range.end);
+    } else {
+      mergedRanges.push({ ...range });
+    }
+  }
+  if (mergedRanges.length === 0) return text;
+  const parts = [];
+  let cursor = 0;
+  for (const range of mergedRanges) {
+    if (range.start > cursor) {
+      parts.push(text.slice(cursor, range.start));
+    }
+    parts.push(
+      /* @__PURE__ */ jsx(
+        "mark",
+        {
+          className: "rounded-[1px] bg-accent-soft text-accent-1",
+          children: text.slice(range.start, range.end)
+        },
+        `${range.start}-${range.end}`
+      )
+    );
+    cursor = range.end;
+  }
+  if (cursor < text.length) {
+    parts.push(text.slice(cursor));
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+function Command({ children, className } = {}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-dialog bg-surface-1 text-foreground-1",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SearchInputField, {}),
+        /* @__PURE__ */ jsx(SearchProgressBar, { className: "absolute inset-x-0 top-12 z-10" }),
+        /* @__PURE__ */ jsx(SearchResults, {})
+      ] })
+    }
+  );
+}
+function DefaultDesktop({ children, ...rootProps }) {
+  return /* @__PURE__ */ jsx(Root, { variant: "desktop", ...rootProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Trigger, {}),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Command, {}) })
+  ] }) });
+}
+function DefaultMobile({ children, ...rootProps }) {
+  return /* @__PURE__ */ jsx(Root, { variant: "mobile", ...rootProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Trigger, { showShortcut: false }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Command, {}) })
+  ] }) });
+}
+var Search = {
+  Command,
+  DefaultDesktop,
+  DefaultMobile,
+  DesktopDialog: DialogContent,
+  Dialog: DialogContent,
+  Input: SearchInputField,
+  MobileDialog: DialogContent,
+  Progress: SearchProgressBar,
+  Results: SearchResults,
+  Root,
+  Trigger
+};
+export {
+  Command,
+  DefaultDesktop,
+  DefaultMobile,
+  DialogContent as Dialog,
+  SearchInputField as Input,
+  SearchProgressBar as Progress,
+  SearchResults as Results,
+  Root,
+  Search,
+  Trigger
+};