@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.91

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

@@ -1,418 +1,237 @@
 "use client";
 
-// src/components/block/search.tsx
-import { buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
+// src/modules/search/search-block.tsx
+import { useRender } from "@base-ui/react/use-render";
+import { Button } from "@components/ui/button";
 import {
   Dialog,
   DialogBackdrop,
-  DialogClose,
   DialogDescription,
   DialogPopup,
   DialogPortal,
-  DialogTitle,
-  DialogTrigger
-} from "@publish.os/nextjs/kernel/components/ui/dialog";
-import { Input } from "@publish.os/nextjs/kernel/components/ui/input";
-import { Kbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
+  DialogTitle
+} from "@components/ui/dialog";
 import {
-  Progress,
-  ProgressIndicator,
-  ProgressTrack
-} from "@publish.os/nextjs/kernel/components/ui/progress";
-import { ScrollArea } from "@publish.os/nextjs/kernel/components/ui/scroll-area";
-import { FrameworkSearchIcon as SearchIcon } from "@publish.os/nextjs/kernel/framework-icons";
+  Drawer,
+  DrawerBackdrop,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerViewport,
+  DrawerVirtualKeyboardProvider
+} from "@components/ui/drawer";
+import { Input } from "@components/ui/input";
+import { Kbd as Kbd2 } from "@components/ui/kbd";
+import { ModKey } from "@components/ui/mod-key";
+import { Separator as Separator2 } from "@components/ui/separator";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react/ssr";
 import { formatShortcut } from "@publish.os/nextjs/keyboard-shortcuts";
 import {
-  SearchProvider,
-  useSearchBlock
+  SearchProvider as Root,
+  useSearchBlock as useSearchBlock3
 } from "@publish.os/nextjs/search";
-import { cn } from "@publish.os/nextjs/utils/cn";
-import NextLink from "next/link";
+import { cn as cn3 } from "@publish.os/nextjs/utils/cn";
 import {
-  cloneElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
+  useEffect as useEffect2,
+  useState as useState2
 } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SEARCH_ROW_HEIGHT = 58, SEARCH_ROW_WITH_DESCRIPTION_HEIGHT = 72, SEARCH_RESULTS_PADDING = 16, SEARCH_RESULTS_MAX_HEIGHT = 360, SEARCH_RESULT_SNIPPET_LENGTH = 180, searchProgressConfig = {
-  completeDelay: 100,
-  exitDuration: 150,
-  fastPhaseEnd: 25,
-  initialProgress: 5,
-  maxDuration: 5e3,
-  minDuration: 50,
-  targetProgress: 95
-};
-function SearchProgressBar({ className }) {
-  let {
-    state: { isTyping, loading, status }
-  } = useSearchBlock(), [progress, setProgress] = useState(0), [isExiting, setIsExiting] = useState(!1), animationFrame = useRef(null), cleanupTimer = useRef(null), progressRef = useRef(0), active = loading || status === "building" || status === "stale", setProgressValue = useCallback((value) => {
-    progressRef.current = value, setProgress(value);
-  }, []), cleanup = useCallback(() => {
-    animationFrame.current !== null && (window.cancelAnimationFrame(animationFrame.current), animationFrame.current = null), cleanupTimer.current && (window.clearTimeout(cleanupTimer.current), cleanupTimer.current = null);
-  }, []);
-  useEffect(() => {
-    if (isTyping) {
-      cleanup(), setProgressValue(0), setIsExiting(!1);
-      return;
-    }
-    if (!active) {
-      progressRef.current > 0 && (cleanup(), setProgressValue(100), cleanupTimer.current = window.setTimeout(() => {
-        setIsExiting(!0), cleanupTimer.current = window.setTimeout(() => {
-          setProgressValue(0), setIsExiting(!1), cleanupTimer.current = null;
-        }, searchProgressConfig.exitDuration);
-      }, searchProgressConfig.completeDelay));
-      return;
-    }
-    cleanup(), setIsExiting(!1), setProgressValue(searchProgressConfig.initialProgress);
-    let start = performance.now(), animate = (now) => {
-      let elapsed = now - start, progressValue;
-      if (elapsed < searchProgressConfig.minDuration)
-        progressValue = searchProgressConfig.initialProgress + elapsed / searchProgressConfig.minDuration * (searchProgressConfig.fastPhaseEnd - searchProgressConfig.initialProgress);
-      else {
-        let remainingProgress = searchProgressConfig.targetProgress - searchProgressConfig.fastPhaseEnd, easedTime = 1 - (1 - Math.min(
-          1,
-          (elapsed - searchProgressConfig.minDuration) / (searchProgressConfig.maxDuration - searchProgressConfig.minDuration)
-        )) ** 3;
-        progressValue = searchProgressConfig.fastPhaseEnd + easedTime * remainingProgress;
-      }
-      setProgressValue(
-        Math.min(searchProgressConfig.targetProgress, progressValue)
-      ), animationFrame.current = window.requestAnimationFrame(animate);
-    };
-    return animationFrame.current = window.requestAnimationFrame(animate), cleanup;
-  }, [active, cleanup, isTyping, setProgressValue]);
-  let 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
+
+// src/modules/search/results.tsx
+import { Kbd } from "@components/ui/kbd";
+import {
+  ScrollAreaContent,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport
+} from "@components/ui/scroll-area";
+import { Separator } from "@components/ui/separator";
+import { ArrowElbowDownLeftIcon } from "@phosphor-icons/react/ssr";
+import { useSearchBlock } from "@publish.os/nextjs/search";
+import { cn } from "@publish.os/nextjs/utils/cn";
+import NextLink from "next/link";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "@publish.os/nextjs/jsx-runtime";
+var SEARCH_RESULT_SNIPPET_LENGTH = 180;
+function getSearchPanel({
+  displayResults,
+  isTyping,
+  loading,
+  query,
+  status
 }) {
-  let {
-    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 }) });
+  return query.trim() ? displayResults.length > 0 ? "results" : isTyping || loading ? null : status === "ready" ? "empty" : status === "building" || status === "stale" || status === "error" ? "status" : null : null;
 }
-function Root({ children, className, ...providerProps }) {
-  return /* @__PURE__ */ jsx(SearchProvider, { ...providerProps, children: /* @__PURE__ */ jsx(RootDialogFrame, { className, children }) });
-}
-function Trigger({
-  asChild = !1,
+function SearchResults({
   children,
   className,
-  icon,
-  placeholder = "Search...",
-  shortcut,
-  shortcutClassName,
-  showIcon = !0,
-  showShortcut = !0,
-  size = "sm",
-  variant = "outline"
+  emptyText = "No results found.",
+  itemClassName,
+  ...props
 }) {
   let {
-    meta: { inputId, shortcut: registeredShortcut },
-    state: { open }
-  } = useSearchBlock(), visibleShortcut = shortcut ?? registeredShortcut, shortcutTokens = useMemo(
-    () => formatShortcut(visibleShortcut),
-    [visibleShortcut]
-  );
-  return asChild && children ? /* @__PURE__ */ jsx(
-    DialogTrigger,
-    {
-      render: cloneElement(children, {
-        "aria-controls": inputId,
-        "aria-expanded": open,
-        className: cn(children.props.className, className)
-      })
-    }
-  ) : /* @__PURE__ */ jsxs(
-    DialogTrigger,
+    actions: { navigateToResult, setOpen, setSelectedValue },
+    meta: { listId, listRef },
+    state
+  } = useSearchBlock(), {
+    displayResults,
+    isTyping,
+    loading,
+    message,
+    query,
+    selectedValue,
+    status
+  } = state, hasQuery = query.trim().length > 0, panel = getSearchPanel(state), showResults = panel === "results", settled = hasQuery && !isTyping && !loading, showStatusPanel = panel === "status", showEmptyPanel = panel === "empty";
+  return useEffect(() => {
+    let list = listRef.current;
+    if (!list || !selectedValue || !showResults) return;
+    let win = list.ownerDocument.defaultView;
+    if (!win) return;
+    let frame = win.requestAnimationFrame(() => {
+      let index = selectedIndex(displayResults, selectedValue);
+      list.ownerDocument.getElementById(resultOptionId(listId, index))?.scrollIntoView({ block: "nearest" });
+    });
+    return () => win.cancelAnimationFrame(frame);
+  }, [displayResults, listId, listRef, selectedValue, showResults]), panel ? /* @__PURE__ */ jsxs(
+    ScrollAreaRoot,
     {
-      "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",
+        "flex min-h-0 flex-1 flex-col bg-transparent md:max-h-90",
         className
       ),
+      ...props,
       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"
-}) {
-  let {
-    meta: { variant }
-  } = useSearchBlock();
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogBackdrop, { className: "bg-backdrop 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 = !0
-}) {
-  let {
-    actions: { handleInputChange, navigateToResult, setOpen, setSelectedValue },
-    meta: { inputId, inputRef, listId },
-    state: { displayResults, query, selectedValue }
-  } = useSearchBlock(), closeDisplayLabel = typeof closeLabel == "string" ? closeLabel.toUpperCase() : closeLabel, selectedIndex2 = Math.max(
-    0,
-    displayResults.findIndex((result) => result.id === selectedValue)
-  ), selectedOptionId = displayResults.length > 0 ? resultOptionId(listId, selectedIndex2) : void 0, handleKeyDown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault(), setOpen(!1);
-      return;
-    }
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      let next = displayResults[Math.min(selectedIndex2 + 1, displayResults.length - 1)];
-      next && setSelectedValue(next.id);
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      let next = displayResults[Math.max(selectedIndex2 - 1, 0)];
-      next && setSelectedValue(next.id);
-      return;
-    }
-    if (event.key === "Enter") {
-      let 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(Separator, { className: "absolute inset-x-0 top-0 z-content hidden md:block group-data-[search-presentation=drawer]/search:hidden group-data-[search-presentation=dialog]/search:block" }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: settled && showResults ? `${displayResults.length} search ${displayResults.length === 1 ? "result" : "results"}` : "" }),
+        /* @__PURE__ */ jsx(ScrollAreaViewport, { className: "min-h-0 h-auto max-h-[inherit] flex-1 overscroll-contain", children: /* @__PURE__ */ jsxs(ScrollAreaContent, { children: [
+          showStatusPanel ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-live": "polite",
+              className: "flex min-h-36 items-center justify-center px-6 py-10 text-center text-sm",
+              children: /* @__PURE__ */ jsx("p", { className: "max-w-full text-foreground-2", children: message ?? statusLabel(status) })
+            }
+          ) : null,
+          showEmptyPanel ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-live": "polite",
+              className: "flex min-h-36 items-center justify-center px-6 py-10 text-center text-sm",
+              children: /* @__PURE__ */ jsxs("p", { className: "min-w-0 max-w-full 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,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-label": "Search results",
+              className: showResults ? "space-y-1 p-2" : void 0,
+              id: listId,
+              ref: listRef,
+              role: "listbox",
+              children: showResults ? displayResults.map((result, index) => {
+                let snippet = resultSnippet({ query, result });
+                return /* @__PURE__ */ jsx(
+                  NextLink,
+                  {
+                    "aria-describedby": !children && snippet ? `${resultOptionId(listId, index)}-snippet` : void 0,
+                    "aria-labelledby": children ? void 0 : `${resultOptionId(listId, index)}-title`,
+                    "aria-selected": result.id === selectedValue,
+                    className: cn(
+                      "block min-h-14.5 min-w-0 overflow-hidden rounded-button px-3 py-3 text-start",
+                      "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
+                      result.id === selectedValue ? "bg-surface-active text-foreground-1" : "text-foreground-2",
+                      itemClassName
+                    ),
+                    href: result.url,
+                    id: resultOptionId(listId, index),
+                    onClick: () => setOpen(!1),
+                    onKeyDown: (event) => {
+                      event.key !== "Enter" || event.nativeEvent.isComposing || (event.preventDefault(), navigateToResult(result));
+                    },
+                    onMouseMove: () => {
+                      selectedValue !== result.id && setSelectedValue(result.id);
+                    },
+                    role: "option",
+                    tabIndex: -1,
+                    children: children ? children(result) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "line-clamp-2 wrap-break-word text-base leading-6 font-medium text-foreground-1 md:text-sm md:leading-5",
+                          id: `${resultOptionId(listId, index)}-title`,
+                          children: /* @__PURE__ */ jsx(
+                            HighlightedText,
+                            {
+                              text: result.title,
+                              query
+                            }
+                          )
+                        }
+                      ),
+                      snippet ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "mt-1.5 line-clamp-2 wrap-break-word text-sm leading-5 text-foreground-2",
+                          id: `${resultOptionId(listId, index)}-snippet`,
+                          children: /* @__PURE__ */ jsx(HighlightedText, { text: snippet, query })
+                        }
+                      ) : null
+                    ] })
+                  },
+                  result.id
+                );
+              }) : null
+            }
+          )
+        ] }) }),
         /* @__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: !1,
-            type: "text",
-            value: query
-          }
-        ),
-        showCloseShortcut ? /* @__PURE__ */ jsx(
-          DialogClose,
+          ScrollAreaScrollbar,
           {
-            "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 })
+            className: "absolute inset-y-2 right-0 w-1.5 rounded-scrollbar-thumb bg-transparent p-0",
+            orientation: "vertical",
+            children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
           }
-        ) : null
+        )
       ]
     }
-  );
+  ) : null;
 }
-function SearchResults({
+function SearchFooter({
+  children,
   className,
-  emptyText = "No results found."
+  ...props
 }) {
   let {
-    actions: { navigateToResult, setOpen, setSelectedValue },
-    meta: { listId, listRef },
-    state: {
-      displayResults,
-      isTyping,
-      loading,
-      message,
-      query,
-      selectedValue,
-      status
-    }
-  } = useSearchBlock(), hasQuery = query.trim().length > 0, showResults = displayResults.length > 0, statusMessage = message ?? statusLabel(status), showStatusPanel = hasQuery && !isTyping && !loading && !showResults && (status === "building" || status === "stale" || status === "error"), showEmptyPanel = hasQuery && !isTyping && !loading && !showResults && !showStatusPanel && status === "ready", showPanel = showResults || showStatusPanel || showEmptyPanel, resultRowHeight = displayResults.some(
-    (result) => resultSnippet({ query, result })
-  ) ? SEARCH_ROW_WITH_DESCRIPTION_HEIGHT : SEARCH_ROW_HEIGHT, fullResultsHeight = displayResults.length * resultRowHeight + SEARCH_RESULTS_PADDING, resultsAreScrollable = fullResultsHeight > SEARCH_RESULTS_MAX_HEIGHT, resultsHeight = Math.min(fullResultsHeight, SEARCH_RESULTS_MAX_HEIGHT), panelHeight = showResults ? resultsHeight : showStatusPanel || showEmptyPanel ? 144 : 0, containerDuration = showResults ? Math.min(320, 150 + displayResults.length * 18) : 180;
-  return useEffect(() => {
-    if (!selectedValue || !showResults) return;
-    let frame = window.requestAnimationFrame(() => {
-      let index = selectedIndex(displayResults, selectedValue);
-      document.getElementById(resultOptionId(listId, index))?.scrollIntoView({ block: "nearest" });
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [displayResults, listId, selectedValue, showResults]), /* @__PURE__ */ jsx(
+    state: { displayResults, isTyping, loading, query, status }
+  } = useSearchBlock(), hasResults = displayResults.length > 0, empty = !isTyping && !loading && status === "ready";
+  return !query.trim() || !hasResults && !empty ? null : /* @__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-content 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",
+        "flex shrink-0 items-center gap-2 border-t border-stroke-3 px-4 py-3 text-xs text-foreground-3",
         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 } : !1,
-            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) => {
-                  let 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-stroke",
-                        result.id === selectedValue ? "bg-surface-active text-foreground-1" : "text-foreground-2"
-                      ),
-                      href: result.url,
-                      id: resultOptionId(listId, index),
-                      onClick: () => setOpen(!1),
-                      onKeyDown: (event) => {
-                        event.key === "Enter" && (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
-      ] })
+      ...props,
+      children: children === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "hidden items-center gap-2 md:inline-flex", children: [
+          /* @__PURE__ */ jsx(Kbd, { size: "xs", square: hasResults, children: hasResults ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ArrowElbowDownLeftIcon, { "aria-hidden": "true", size: 12 }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Enter" })
+          ] }) : "Esc" }),
+          /* @__PURE__ */ jsx("span", { children: hasResults ? "Go to page" : "Close search" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "md:hidden", children: hasResults ? "Tap a result to open" : "Swipe down to close" })
+      ] }) : children
     }
   );
 }
@@ -428,22 +247,9 @@ function selectedIndex(results, selectedValue) {
     results.findIndex((result) => result.id === selectedValue)
   );
 }
-function cleanResultPath(url) {
-  return (url.split("#")[0]?.replace(/^\/+|\/+$/g, "") ?? "") || "/";
-}
-function resultSubtitle(result) {
-  let section = result.meta.section ?? result.meta.group, path = cleanResultPath(result.meta.path ?? result.url);
-  return section && path && !path.startsWith(section) ? `${section} / ${path}` : path || section || result.url;
-}
 function normalizedSnippetText(text) {
   return (text ?? "").replace(/\s+/g, " ").trim();
 }
-function queryMatches(text, query) {
-  let normalizedQuery = query.trim().toLowerCase();
-  if (!normalizedQuery) return !1;
-  let lower = text.toLowerCase();
-  return lower.includes(normalizedQuery) ? !0 : normalizedQuery.split(/\s+/).filter((term) => term.length > 1).some((term) => lower.includes(term));
-}
 function firstMatchIndex(text, query) {
   let normalizedQuery = query.trim().toLowerCase();
   if (!normalizedQuery) return -1;
@@ -458,7 +264,7 @@ function contextualSnippet({
   let normalizedText = normalizedSnippetText(text);
   if (normalizedText.length <= length) return normalizedText;
   let matchIndex = firstMatchIndex(normalizedText, query);
-  if (matchIndex < 0) return `${normalizedText.slice(0, length).trimEnd()}...`;
+  if (matchIndex < 0) return `${normalizedText.slice(0, length).trimEnd()}\u2026`;
   let halfLength = Math.floor(length / 2), start = Math.max(0, matchIndex - halfLength), end = Math.min(normalizedText.length, start + length);
   if (end - start < length && (start = Math.max(0, end - length)), start > 0) {
     let nextSpace = normalizedText.indexOf(" ", start);
@@ -468,7 +274,7 @@ function contextualSnippet({
     let previousSpace = normalizedText.lastIndexOf(" ", end);
     previousSpace > matchIndex && (end = previousSpace);
   }
-  let prefix = start > 0 ? "... " : "", suffix = end < normalizedText.length ? " ..." : "";
+  let prefix = start > 0 ? "\u2026 " : "", suffix = end < normalizedText.length ? " \u2026" : "";
   return `${prefix}${normalizedText.slice(start, end).trim()}${suffix}`;
 }
 function resultSnippet({
@@ -476,10 +282,10 @@ function resultSnippet({
   result
 }) {
   let description = normalizedSnippetText(result.meta.description);
-  if (description && queryMatches(description, query))
+  if (description)
     return contextualSnippet({ query, text: description });
   let excerpt = normalizedSnippetText(result.plainExcerpt);
-  return excerpt ? contextualSnippet({ query, text: excerpt }) : description ? contextualSnippet({ query, text: description }) : "";
+  return excerpt ? contextualSnippet({ query, text: excerpt }) : "";
 }
 function HighlightedText({ query, text }) {
   let normalizedQuery = query.trim().toLowerCase();
@@ -503,7 +309,7 @@ function HighlightedText({ query, text }) {
       /* @__PURE__ */ jsx(
         "mark",
         {
-          className: "rounded-[1px] bg-accent-2 text-accent-1",
+          className: "rounded-[min(var(--theme-radius),2px)] bg-accent-1/15 text-accent-1",
           children: text.slice(range.start, range.end)
         },
         `${range.start}-${range.end}`
@@ -511,52 +317,372 @@ function HighlightedText({ query, text }) {
     ), cursor = range.end;
   return cursor < text.length && parts.push(text.slice(cursor)), /* @__PURE__ */ jsx(Fragment, { children: parts });
 }
-function Command({ children, className } = {}) {
-  return /* @__PURE__ */ jsx(
-    "div",
+
+// src/modules/search/search-progress.tsx
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressTrack
+} from "@components/ui/progress";
+import { useSearchBlock as useSearchBlock2 } from "@publish.os/nextjs/search";
+import { cn as cn2 } from "@publish.os/nextjs/utils/cn";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx as jsx2 } from "@publish.os/nextjs/jsx-runtime";
+var INITIAL_PROGRESS = 5, FAST_PHASE_END = 25, TARGET_PROGRESS = 95, FAST_DURATION = 50, MAX_DURATION = 5e3, COMPLETE_DURATION = 200, EXIT_DURATION = 150;
+function SearchProgressBar({ className }) {
+  let {
+    meta: { inputRef, triggerRef },
+    state: { isTyping, loading, open, query, status }
+  } = useSearchBlock2(), enabled = open && !!query.trim(), active = enabled && (isTyping || loading || status === "building" || status === "stale"), [progress, setProgress] = useState(active ? INITIAL_PROGRESS : 0), [isExiting, setIsExiting] = useState(!1), progressRef = useRef(progress);
+  useLayoutEffect(() => {
+    let win = inputRef.current?.ownerDocument.defaultView ?? triggerRef.current?.ownerDocument.defaultView ?? window, frame = null, timer = null, updateProgress = (value) => {
+      progressRef.current = value, setProgress(value);
+    };
+    if (!enabled)
+      updateProgress(0), setIsExiting(!1);
+    else if (active)
+      if (setIsExiting(!1), updateProgress(INITIAL_PROGRESS), win.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        updateProgress(FAST_PHASE_END);
+      else {
+        let start = win.performance.now(), animate = (now) => {
+          let elapsed = Math.max(0, now - start), normalizedTime = Math.min(
+            1,
+            Math.max(0, elapsed - FAST_DURATION) / (MAX_DURATION - FAST_DURATION)
+          );
+          updateProgress(
+            elapsed < FAST_DURATION ? INITIAL_PROGRESS + elapsed / FAST_DURATION * (FAST_PHASE_END - INITIAL_PROGRESS) : FAST_PHASE_END + (1 - (1 - normalizedTime) ** 3) * (TARGET_PROGRESS - FAST_PHASE_END)
+          ), normalizedTime < 1 && (frame = win.requestAnimationFrame(animate));
+        };
+        frame = win.requestAnimationFrame(animate);
+      }
+    else progressRef.current > 0 && (updateProgress(100), timer = win.setTimeout(() => {
+      setIsExiting(!0), timer = win.setTimeout(() => {
+        updateProgress(0), setIsExiting(!1);
+      }, EXIT_DURATION);
+    }, COMPLETE_DURATION));
+    return () => {
+      frame !== null && win.cancelAnimationFrame(frame), timer !== null && win.clearTimeout(timer);
+    };
+  }, [active, enabled, inputRef, triggerRef]);
+  let visible = enabled && progress > 0, phase = visible ? isExiting ? "exiting" : active ? "loading" : "complete" : "idle";
+  return /* @__PURE__ */ jsx2(
+    Progress,
     {
-      className: cn(
-        "relative overflow-hidden rounded-dialog bg-surface-1 text-foreground-1",
+      "aria-label": "Searching",
+      "aria-hidden": !visible,
+      className: cn2(
+        "pointer-events-none h-px shrink-0 overflow-hidden transition-opacity duration-100",
+        visible ? "opacity-100" : "opacity-0",
         className
       ),
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SearchInputField, {}),
-        /* @__PURE__ */ jsx(SearchProgressBar, { className: "absolute inset-x-0 top-12 z-content" }),
-        /* @__PURE__ */ jsx(SearchResults, {})
-      ] })
+      "data-state": phase,
+      value: null,
+      children: /* @__PURE__ */ jsx2(ProgressTrack, { className: "h-full rounded-none bg-transparent", children: /* @__PURE__ */ jsx2(
+        ProgressIndicator,
+        {
+          className: "animate-search-progress h-full w-full rounded-none",
+          "data-state": phase,
+          style: {
+            width: "100%",
+            "--search-progress": progress / 100
+          }
+        }
+      ) })
     }
   );
 }
-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, {}) })
-  ] }) });
+
+// src/modules/search/search-block.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "@publish.os/nextjs/jsx-runtime";
+function Trigger({
+  children,
+  className,
+  icon = /* @__PURE__ */ jsx3(MagnifyingGlassIcon, { "aria-hidden": "true", size: 16 }),
+  placeholder = "Search",
+  ref,
+  render,
+  shortcutClassName,
+  size = "sm",
+  variant = "outline",
+  ...props
+}) {
+  let {
+    actions: { setOpen },
+    meta: { popupId, shortcut: registeredShortcut, triggerRef },
+    state: { open }
+  } = useSearchBlock3();
+  return useRender({
+    defaultTagName: "button",
+    render: render ?? /* @__PURE__ */ jsx3(Button, { size, variant }),
+    ref: [triggerRef, ref ?? null],
+    state: { open },
+    props: {
+      ...props,
+      "aria-controls": open ? popupId : void 0,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-label": props["aria-label"] ?? placeholder,
+      className: cn3("md:min-w-32", className),
+      onClick: (event) => {
+        props.onClick?.(event), event.defaultPrevented || (triggerRef.current = event.currentTarget, setOpen(!0));
+      },
+      children: children ?? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        icon,
+        /* @__PURE__ */ jsx3("span", { className: "hidden min-w-0 flex-1 truncate text-start leading-none md:inline", children: placeholder }),
+        registeredShortcut ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn3(
+              "hidden shrink-0 items-center gap-1 md:inline-flex",
+              shortcutClassName
+            ),
+            children: /* @__PURE__ */ jsx3(SearchShortcutHint, { shortcut: registeredShortcut })
+          }
+        ) : null
+      ] })
+    }
+  });
+}
+function SearchShortcutHint({ shortcut }) {
+  let [tokens, setTokens] = useState2(null);
+  return useEffect2(() => {
+    setTokens(formatShortcut(shortcut));
+  }, [shortcut]), shortcut.toLowerCase() === "mod+k" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(ModKey, { size: "xs" }),
+    /* @__PURE__ */ jsx3(Kbd2, { size: "xs", children: "K" })
+  ] }) : (tokens ?? ["Ctrl", "K"]).map((token) => /* @__PURE__ */ jsx3(
+    Kbd2,
+    {
+      className: tokens === null ? "invisible" : void 0,
+      size: "xs",
+      children: token
+    },
+    token
+  ));
 }
-function DefaultMobile({ children, ...rootProps }) {
-  return /* @__PURE__ */ jsx(Root, { variant: "mobile", ...rootProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Trigger, { showShortcut: !1 }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Command, {}) })
+function DialogContent({
+  children,
+  className,
+  container,
+  description = "Search this site and navigate to a result.",
+  mobileQuery = "(max-width: 767px)",
+  title = "Search"
+}) {
+  let {
+    actions: { setOpen },
+    meta: { inputRef, popupId, triggerRef },
+    state: { open }
+  } = useSearchBlock3(), [mobile, setMobile] = useState2(!1);
+  return useEffect2(() => {
+    let media = (triggerRef.current?.ownerDocument.defaultView ?? window).matchMedia(mobileQuery), update = () => setMobile(media.matches);
+    return update(), media.addEventListener("change", update), () => media.removeEventListener("change", update);
+  }, [mobileQuery, triggerRef]), mobile ? /* @__PURE__ */ jsx3(Drawer, { onOpenChange: setOpen, open, swipeDirection: "down", children: /* @__PURE__ */ jsx3(DrawerVirtualKeyboardProvider, { children: /* @__PURE__ */ jsxs2(DrawerPortal, { container, children: [
+    /* @__PURE__ */ jsx3(DrawerBackdrop, { className: "animate-search-backdrop bg-backdrop" }),
+    /* @__PURE__ */ jsx3(DrawerViewport, { children: /* @__PURE__ */ jsxs2(
+      DrawerPopup,
+      {
+        "aria-label": title,
+        "data-search-presentation": "drawer",
+        id: popupId,
+        initialFocus: inputRef,
+        finalFocus: triggerRef,
+        className: cn3(
+          "group/search animate-search-drawer inset-x-0 top-auto bottom-(--drawer-keyboard-inset,0px) flex h-[min(94dvh,52rem)] max-h-[calc(100dvh-var(--drawer-keyboard-inset,0)-env(safe-area-inset-top))] w-full max-w-none flex-col overflow-hidden rounded-t-dialog border-0 bg-surface-1 p-0 pb-[env(safe-area-inset-bottom)] text-foreground-1 border-shadow-1 overscroll-contain",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(DrawerTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx3(DrawerDescription, { className: "sr-only", children: description }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto mt-2 h-1.5 w-10 shrink-0 rounded-scrollbar-thumb bg-stroke-2"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "flex min-h-0 flex-1 flex-col", children: children === void 0 ? /* @__PURE__ */ jsx3(Command, {}) : children })
+        ]
+      }
+    ) })
+  ] }) }) }) : /* @__PURE__ */ jsx3(Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxs2(DialogPortal, { container, children: [
+    /* @__PURE__ */ jsx3(DialogBackdrop, { className: "animate-search-backdrop bg-dialog-backdrop" }),
+    /* @__PURE__ */ jsxs2(
+      DialogPopup,
+      {
+        "data-search-presentation": "dialog",
+        id: popupId,
+        initialFocus: inputRef,
+        finalFocus: triggerRef,
+        className: cn3(
+          "group/search animate-search-dialog top-[12dvh] flex max-h-[min(42rem,82dvh)] w-[min(92vw,575px)] -translate-x-1/2 translate-y-0 flex-col overflow-hidden border-0 p-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(DialogTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx3(DialogDescription, { className: "sr-only", children: description }),
+          children === void 0 ? /* @__PURE__ */ jsx3(Command, {}) : children
+        ]
+      }
+    )
   ] }) });
 }
-var Search = {
-  Command,
-  DefaultDesktop,
-  DefaultMobile,
-  DesktopDialog: DialogContent,
-  Dialog: DialogContent,
-  Input: SearchInputField,
-  MobileDialog: DialogContent,
-  Progress: SearchProgressBar,
-  Results: SearchResults,
-  Root,
-  Trigger
-};
+function SearchInputField({
+  className,
+  closeClassName,
+  closeLabel = "ESC",
+  icon = /* @__PURE__ */ jsx3(MagnifyingGlassIcon, { "aria-hidden": "true", size: 20, weight: "light" }),
+  onChange,
+  onKeyDown,
+  placeholder = "Search\u2026",
+  ref,
+  rootClassName,
+  showCloseShortcut = !0,
+  ...props
+}) {
+  let {
+    actions: { handleInputChange, navigateToResult, setOpen, setSelectedValue },
+    meta: { inputId, inputRef, listId },
+    state: { displayResults, query, selectedValue }
+  } = useSearchBlock3(), selectedIndex2 = Math.max(
+    0,
+    displayResults.findIndex((result) => result.id === selectedValue)
+  ), selectedOptionId = displayResults.length > 0 ? resultOptionId(listId, selectedIndex2) : void 0, handleKeyDown = (event) => {
+    if (onKeyDown?.(event), !(event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229)) {
+      if (event.key === "Escape") {
+        event.preventDefault(), setOpen(!1);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        let next = displayResults[Math.min(selectedIndex2 + 1, displayResults.length - 1)];
+        next && setSelectedValue(next.id);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        let next = displayResults[Math.max(selectedIndex2 - 1, 0)];
+        next && setSelectedValue(next.id);
+        return;
+      }
+      if (event.key === "Enter") {
+        let selected = displayResults[selectedIndex2];
+        if (!selected) return;
+        event.preventDefault(), navigateToResult(selected);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn3("relative shrink-0 bg-transparent", rootClassName), children: [
+    icon ? /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-foreground-3/50",
+        children: icon
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(
+      Input,
+      {
+        ...props,
+        "aria-activedescendant": selectedOptionId,
+        "aria-autocomplete": "list",
+        "aria-controls": listId,
+        "aria-expanded": displayResults.length > 0,
+        autoComplete: "off",
+        "aria-label": props["aria-label"] ?? "Search this site",
+        className: cn3(
+          "supports-[caret-color:var(--accent-1)]:caret-(--accent-1)",
+          "h-14 rounded-none border-0 bg-transparent px-4 text-base shadow-none focus:border-transparent focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-stroke",
+          icon && "pl-12",
+          showCloseShortcut && "md:pr-16",
+          className
+        ),
+        id: inputId,
+        name: "search",
+        onChange: (event) => {
+          onChange?.(event), event.defaultPrevented || handleInputChange(event.currentTarget.value);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder,
+        ref: (node) => {
+          if (inputRef.current = node, typeof ref == "function") {
+            let cleanup = ref(node);
+            if (typeof cleanup == "function")
+              return () => {
+                inputRef.current = null, cleanup();
+              };
+          } else ref && (ref.current = node);
+        },
+        role: "combobox",
+        spellCheck: !1,
+        type: "text",
+        value: query
+      }
+    ),
+    showCloseShortcut ? /* @__PURE__ */ jsx3(
+      "button",
+      {
+        "aria-label": "Close search",
+        className: cn3(
+          "absolute right-4 top-1/2 hidden -translate-y-1/2 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:size-10 before:-translate-1/2 before:content-[''] active:translate-y-[calc(-50%_+_1px)] md:inline-flex",
+          closeClassName
+        ),
+        onClick: () => setOpen(!1),
+        type: "button",
+        children: /* @__PURE__ */ jsx3(Kbd2, { size: "xs", children: closeLabel })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(Separator2, { className: "absolute inset-x-0 bottom-0 z-content md:hidden group-data-[search-presentation=drawer]/search:block group-data-[search-presentation=dialog]/search:hidden" })
+  ] });
+}
+function Command({ children, className, ...props } = {}) {
+  let { state } = useSearchBlock3();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn3(
+        // The popup owns the fill; opaque children would cover its inset edge.
+        "relative flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent text-foreground-1",
+        className
+      ),
+      ...props,
+      children: children === void 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(SearchInputField, {}),
+        /* @__PURE__ */ jsx3(SearchProgressBar, { className: "absolute inset-x-0 top-14 z-content -translate-y-full" }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "animate-search-results grid min-h-0 flex-1",
+            "data-expanded": getSearchPanel(state) !== null,
+            children: /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-col overflow-hidden", children: [
+              /* @__PURE__ */ jsx3(SearchResults, {}),
+              /* @__PURE__ */ jsx3(SearchFooter, {})
+            ] })
+          }
+        )
+      ] }) : children
+    }
+  );
+}
+function Search(props) {
+  return /* @__PURE__ */ jsxs2(Root, { ...props, children: [
+    /* @__PURE__ */ jsx3(Trigger, {}),
+    /* @__PURE__ */ jsx3(DialogContent, {})
+  ] });
+}
+Search.Root = Root;
+Search.Trigger = Trigger;
+Search.Dialog = DialogContent;
+Search.Command = Command;
+Search.Input = SearchInputField;
+Search.Progress = SearchProgressBar;
+Search.Results = SearchResults;
+Search.Footer = SearchFooter;
 export {
   Command,
-  DefaultDesktop,
-  DefaultMobile,
   DialogContent as Dialog,
+  SearchFooter as Footer,
   SearchInputField as Input,
   SearchProgressBar as Progress,
   SearchResults as Results,