fix: replace default FumaDocs search component with custom search (CopilotKit#5050)

## Summary
- Disabled Fumadocs search in `showcase/shell-docs` so Cmd/Ctrl+K no
longer opens the built-in dialog.
- Centralized the custom search modal behind a single app-level
provider/event bridge so desktop and mobile triggers share one instance.
- Kept the custom search button and hotkey behavior intact, including
Escape to close.

## Testing
- `npm run typecheck` in `showcase/shell-docs` passed.
- `npm run lint` in `showcase/shell-docs` passed with pre-existing
warnings only.
- Verified locally in the in-app browser that Cmd+K opens one custom
search modal, Escape closes it, and no Fumadocs search dialog appears.

Author: tylerslaton

showcase/shell-docs/src/app/layout.tsx

@@ -6,6 +6,7 @@ import { AnalyticsClient } from "@/components/analytics-client";
 import { Banners } from "@/components/banners";
 import { BrandNav } from "@/components/brand-nav";
 import { FrameworkProvider } from "@/components/framework-provider";
+import { ShellSearchProvider } from "@/components/search-trigger";
 import { PostHogProvider } from "@/lib/providers/posthog-provider";
 import { ScarfPixel } from "@/lib/providers/scarf-pixel";
 import { getIntegrations } from "@/lib/registry";
@@ -162,24 +163,27 @@ export default function RootLayout({
          */}
         <PostHogProvider>
           <FrameworkProvider knownFrameworks={knownFrameworks}>
-            {/* RootProvider supplies Fumadocs's theme provider (next-themes)
-             * and the search-dialog context, which DocsLayout and other
-             * fumadocs-ui components read from. We keep BrandNav + Banners
-             * outside DocsLayout so chrome remains shell-docs's own. */}
-            <RootProvider theme={{ enabled: true, defaultTheme: "system" }}>
-              {/* Body is a fixed-height (100vh) flex column with hidden
-               * overflow (see globals.css). Banner + nav sit naturally
-               * at the top; <main> takes the remaining height and is
-               * the horizontal flex row that hosts sidebar + the
-               * scrolling `.docs-content-wrapper`. No sticky positioning
-               * is needed — chrome stays put because it's outside the
-               * scroll container. Mirrors canonical `#nd-home-layout`
-               * (margin: 0 4px; xl: 0 8px 8px 8px). */}
-              <Banners />
-              <BrandNav />
-              <main className="flex flex-1 min-h-0 overflow-hidden mx-1 md:mx-[22px] mt-2 md:mt-6 mb-2 md:mb-3">
-                {children}
-              </main>
+            {/* RootProvider supplies Fumadocs's theme provider (next-themes).
+             * Search is handled exclusively by shell-docs's SearchTrigger. */}
+            <RootProvider
+              theme={{ enabled: true, defaultTheme: "system" }}
+              search={{ enabled: false }}
+            >
+              <ShellSearchProvider>
+                {/* Body is a fixed-height (100vh) flex column with hidden
+                 * overflow (see globals.css). Banner + nav sit naturally
+                 * at the top; <main> takes the remaining height and is
+                 * the horizontal flex row that hosts sidebar + the
+                 * scrolling `.docs-content-wrapper`. No sticky positioning
+                 * is needed — chrome stays put because it's outside the
+                 * scroll container. Mirrors canonical `#nd-home-layout`
+                 * (margin: 0 4px; xl: 0 8px 8px 8px). */}
+                <Banners />
+                <BrandNav />
+                <main className="flex flex-1 min-h-0 overflow-hidden mx-1 md:mx-[22px] mt-2 md:mt-6 mb-2 md:mb-3">
+                  {children}
+                </main>
+              </ShellSearchProvider>
             </RootProvider>
           </FrameworkProvider>
         </PostHogProvider>

showcase/shell-docs/src/components/search-trigger.tsx

@@ -1,10 +1,13 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { Command, Search } from "lucide-react";
 import { SearchModal } from "./search-modal";
 
+const TOGGLE_SEARCH_EVENT = "shell-docs:toggle-search";
+
 function isEditableTarget(target: EventTarget | null): boolean {
   if (!target || !(target instanceof HTMLElement)) return false;
   const tag = target.tagName;
@@ -13,23 +16,14 @@ function isEditableTarget(target: EventTarget | null): boolean {
   return false;
 }
 
-export function SearchTrigger({
-  iconOnly = false,
-}: { iconOnly?: boolean } = {}) {
-  // Start as null so SSR output matches the initial client render; resolve
-  // after mount to avoid hydration mismatch flashing ⌘K → Ctrl+K on non-Mac.
-  const [isMac, setIsMac] = useState<boolean | null>(null);
+export function ShellSearchProvider({ children }: { children: ReactNode }) {
   const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const mac =
-      typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
-    setIsMac(mac);
-  }, []);
+  const closeSearch = useCallback(() => setOpen(false), []);
+  const toggleSearch = useCallback(() => setOpen((prev) => !prev), []);
 
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
         // Don't hijack Cmd/Ctrl+K when the user is typing in an unrelated
         // input / textarea / contenteditable — only steal the shortcut when
         // focus is outside an editable element or already inside our own
@@ -40,26 +34,55 @@ export function SearchTrigger({
         if (isEditableTarget(target) && !insideSearchModal) return;
 
         e.preventDefault();
-        setOpen((prev) => !prev);
+        e.stopPropagation();
+        toggleSearch();
       }
-      if (e.key === "Escape") setOpen(false);
+      if (e.key === "Escape") closeSearch();
     }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
+
+    document.addEventListener("keydown", onKeyDown, { capture: true });
+    window.addEventListener(TOGGLE_SEARCH_EVENT, toggleSearch);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, { capture: true });
+      window.removeEventListener(TOGGLE_SEARCH_EVENT, toggleSearch);
+    };
+  }, [closeSearch, toggleSearch]);
+
+  return (
+    <>
+      {children}
+      {open && <SearchModalWrapper onClose={closeSearch} />}
+    </>
+  );
+}
+
+function toggleShellSearch() {
+  window.dispatchEvent(new Event(TOGGLE_SEARCH_EVENT));
+}
+
+export function SearchTrigger({
+  iconOnly = false,
+}: { iconOnly?: boolean } = {}) {
+  // Start as null so SSR output matches the initial client render; resolve
+  // after mount to avoid hydration mismatch flashing ⌘K → Ctrl+K on non-Mac.
+  const [isMac, setIsMac] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const mac =
+      typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
+    setIsMac(mac);
   }, []);
 
   if (iconOnly) {
     return (
-      <>
-        <button
-          onClick={() => setOpen((prev) => !prev)}
-          className="flex items-center justify-center w-8 h-8 rounded-md text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] transition-colors cursor-pointer"
-          aria-label="Search"
-        >
-          <Search className="h-4 w-4" aria-hidden="true" />
-        </button>
-        {open && <SearchModalWrapper onClose={() => setOpen(false)} />}
-      </>
+      <button
+        onClick={toggleShellSearch}
+        className="flex items-center justify-center w-8 h-8 rounded-md text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] transition-colors cursor-pointer"
+        aria-label="Search"
+      >
+        <Search className="h-4 w-4" aria-hidden="true" />
+      </button>
     );
   }
 
@@ -68,7 +91,7 @@ export function SearchTrigger({
   return (
     <>
       <button
-        onClick={() => setOpen((prev) => !prev)}
+        onClick={toggleShellSearch}
         aria-label="Search"
         className="lg:min-w-[250px] xl:min-w-[300px] flex gap-2 items-center px-3 h-10 rounded-xl cursor-pointer border border-[var(--border)] bg-[var(--bg-elevated)]/70 text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--bg-surface)] transition-colors shadow-[0_1px_0_rgba(1,5,7,0.03)]"
       >
@@ -96,7 +119,6 @@ export function SearchTrigger({
           )}
         </span>
       </button>
-      {open && <SearchModalWrapper onClose={() => setOpen(false)} />}
     </>
   );
 }