fix(showcase/shell-docs): search trigger avoids hydration mismatch + respects input focus

- isMac now starts as null and is only resolved in useEffect, so SSR output matches the first client render; reserve horizontal space on the shortcut pill with a non-breaking-space placeholder (+ suppressHydrationWarning) so ⌘K/Ctrl+K swap-in doesn't reflow the button
- Cmd/Ctrl+K no longer hijacks the browser shortcut when focus is inside an unrelated <input>, <textarea>, <select>, or contenteditable; still toggles when focus is within the search modal itself (data-search-modal boundary)
- Trigger buttons use setOpen((prev) => !prev) so Cmd+K-on-top-of-existing-modal toggles correctly and the hint reflects the true action

Author: jpr5

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

@@ -3,10 +3,20 @@
 import { useState, useEffect } from "react";
 import { SearchModal } from "./search-modal";
 
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+
 export function SearchTrigger({
   iconOnly = false,
 }: { iconOnly?: boolean } = {}) {
-  const [isMac, setIsMac] = useState(true);
+  // 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);
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -18,6 +28,15 @@ export function SearchTrigger({
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
       if ((e.metaKey || e.ctrlKey) && e.key === "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
+        // search modal.
+        const target = e.target as HTMLElement | null;
+        const insideSearchModal =
+          target?.closest?.("[data-search-modal]") != null;
+        if (isEditableTarget(target) && !insideSearchModal) return;
+
         e.preventDefault();
         setOpen((prev) => !prev);
       }
@@ -31,7 +50,7 @@ export function SearchTrigger({
     return (
       <>
         <button
-          onClick={() => setOpen(true)}
+          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"
         >
@@ -57,13 +76,19 @@ export function SearchTrigger({
   return (
     <>
       <button
-        onClick={() => setOpen(true)}
+        onClick={() => setOpen((prev) => !prev)}
         className="flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] px-3 py-1.5 text-xs text-[var(--text-muted)] cursor-pointer hover:border-[var(--text-faint)] transition-colors min-w-[200px]"
       >
         <span>⌕</span>
         <span>Search docs, demos...</span>
-        <span className="ml-auto font-mono text-[10px] border border-[var(--border)] px-1 py-0.5 rounded bg-[var(--bg-surface)]">
-          {isMac ? "⌘K" : "Ctrl+K"}
+        <span
+          className="ml-auto font-mono text-[10px] border border-[var(--border)] px-1 py-0.5 rounded bg-[var(--bg-surface)]"
+          // Reserve horizontal room so the button doesn't reflow when the
+          // shortcut hint appears after hydration.
+          style={{ minWidth: "3.25rem", textAlign: "center" }}
+          suppressHydrationWarning
+        >
+          {isMac === null ? "\u00A0" : isMac ? "⌘K" : "Ctrl+K"}
         </span>
       </button>
       {open && <SearchModalWrapper onClose={() => setOpen(false)} />}
@@ -72,5 +97,9 @@ export function SearchTrigger({
 }
 
 function SearchModalWrapper({ onClose }: { onClose: () => void }) {
-  return <SearchModal onClose={onClose} />;
+  return (
+    <div data-search-modal>
+      <SearchModal onClose={onClose} />
+    </div>
+  );
 }