🎨 Palette: Add accessible clear button to Command Palette search input

.Jules/palette.md

@@ -3,3 +3,7 @@
 ## 2025-05-20 - Accessible Clear Button for Search Inputs
 **Learning:** Adding an `onClear` callback support to shared `Input` components allows easily embedding an accessible clear (`X`) button inside search inputs without breaking layout or padding.
 **Action:** When creating reusable input primitives, build optional clear action slots with dynamic right padding (`pr-9`) and customizable `clearLabel` for screen readers.
+
+## 2025-05-21 - Preserving Input Focus on Clear Button Click
+**Learning:** Adding `onMouseDown={(e) => e.preventDefault()}` to clear buttons inside text inputs prevents mouse clicks from blurring the input element, keeping keyboard focus directly inside the text field so typing can resume seamlessly.
+**Action:** Always attach `onMouseDown={(e) => e.preventDefault()}` to icon buttons nested inside text controls that act as text modifiers.

src/components/CommandPalette.tsx

@@ -435,6 +435,8 @@ export default function CommandPalette() {
             icon={Search}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
+            onClear={query ? () => setQuery("") : undefined}
+            clearLabel="Clear command search"
             onKeyDown={(e) => {
               if (e.key === "Tab") {
                 // Single-focus surface (aria-activedescendant): keep focus on

src/components/ui/Input.tsx

@@ -44,6 +44,7 @@ export default function Input({
         <button
           type="button"
           onClick={onClear}
+          onMouseDown={(e) => e.preventDefault()}
           aria-label={clearLabel}
           className="absolute top-1/2 right-2.5 -translate-y-1/2 rounded-md p-1 text-stone-400 transition-colors hover:bg-surface-2 hover:text-stone-200 focus-visible:outline-2 focus-visible:outline-accent"
         >