# Command Palette # Command Palette
Relevant source files The following files were used as context for generating this wiki page: - [src/lib/components/CommandPalette.svelte](src/lib/components/CommandPalette.svelte) - [src/lib/components/ui/button/button.svelte](src/lib/components/ui/button/button.svelte) - [src/lib/components/ui/input/input-chrome.ts](src/lib/components/ui/input/input-chrome.ts) - [src/lib/components/ui/input/input.svelte](src/lib/components/ui/input/input.svelte) - [src/lib/components/ui/kbd/index.ts](src/lib/components/ui/kbd/index.ts) - [src/lib/components/ui/kbd/kbd.svelte](src/lib/components/ui/kbd/kbd.svelte) - [src/lib/components/ui/sidebar/sidebar-inset.svelte](src/lib/components/ui/sidebar/sidebar-inset.svelte) - [src/lib/components/ui/sidebar/sidebar-provider.svelte](src/lib/components/ui/sidebar/sidebar-provider.svelte)
The Command Palette is a central navigation and utility interface that provides quick access to application modules, settings, and tools via a keyboard-driven search interface. It is implemented in `CommandPalette.svelte` and integrates with the global application shell to provide a consistent shortcut-first experience. ### Technical Overview The component uses `bits-ui` for the underlying accessible command menu primitives [src/lib/components/CommandPalette.svelte:4-4](). It functions as a detached panel: while the search input remains part of the top bar layout, the results list overlays the page content using absolute positioning and a high z-index [src/lib/components/CommandPalette.svelte:185-192](). #### Data Flow and Activation The palette is activated via global keyboard listeners or direct interaction with the input field. | Activation Method | Logic / Trigger | | :--- | :--- | | **Shortcut (Cmd/Ctrl + K)** | Toggles the `open` state [src/lib/components/CommandPalette.svelte:55-59](). | | **Shortcut (Alt + \)** | Toggles `open` if the focus is not in an editable field [src/lib/components/CommandPalette.svelte:61-73](). | | **Direct Input** | Typing in the input field automatically sets `open = true` [src/lib/components/CommandPalette.svelte:175-177](). | | **Pointer Interaction** | Clicking the input field sets `open = true` [src/lib/components/CommandPalette.svelte:178-180](). | #### Component Logic Bridge The following diagram maps user interactions and OS-level detection to the internal state management of the component. **Diagram: Activation and OS Logic** ```mermaid graph TD subgraph "Natural Language Space" "User presses Ctrl+K" "User types in search" "User clicks outside" "Mac vs Windows UI" end subgraph "Code Entity Space [src/lib/components/CommandPalette.svelte]" "onGlobalKeydown"["onGlobalKeydown()"] "isAppleOs"["isAppleOs()"] "onDocPointerDown"["onDocPointerDown()"] "openState"["$state open"] "syncOverflow"["syncCommandListOverflow()"] end "User presses Ctrl+K" --> "onGlobalKeydown" "User types in search" --> "openState" "User clicks outside" --> "onDocPointerDown" "Mac vs Windows UI" --> "isAppleOs" "onGlobalKeydown" -- "sets" --> "openState" "onDocPointerDown" -- "closes" --> "openState" "openState" -- "triggers effect" --> "syncOverflow" ``` Sources: [src/lib/components/CommandPalette.svelte:34-116]() ### Search Interface & Commands The interface is divided into the persistent **Search Input** and the **Command List**. #### Search Input The input field mimics the styling of standard UI inputs via `inputControlHoverClasses` [src/lib/components/ui/input/input-chrome.ts:5-6](). It includes visual indicators for the current platform's shortcuts using the `Kbd` component [src/lib/components/CommandPalette.svelte:151-160](). #### Available Commands Commands are grouped into logical sections within the `Command.List`. | Group | Commands | Target / Action | | :--- | :--- | :--- | | **Suggestions** | Calendar, Calculator | Utility tools [src/lib/components/CommandPalette.svelte:206-225]() | | **Settings** | Profile, Billing, Settings | User/System configuration [src/lib/components/CommandPalette.svelte:227-248]() | | **Theme** | Light, Dark, System | UI Appearance [src/lib/components/CommandPalette.svelte:250-264]() | ### Implementation Details #### Scroll and Overflow Management Because the palette uses a custom detached panel, it must manually manage scroll behavior to avoid double scrollbars or clipped content. The `syncCommandListOverflow` function calculates if the `scrollHeight` exceeds the `clientHeight` (plus a 2px tolerance) to toggle `overflow-y` between `auto` and `hidden` [src/lib/components/CommandPalette.svelte:26-32](). This is handled reactively via a `ResizeObserver` [src/lib/components/CommandPalette.svelte:99-102](). #### Keyboard Shortcut Display (Kbd Component) The `Kbd` component [src/lib/components/ui/kbd/kbd.svelte:1-35]() is used extensively within the palette to show keybindings. It supports three sizes: * `key`: Standard single character keys (e.g., "K") [src/lib/components/ui/kbd/kbd.svelte:8-8](). * `modifier`: Longer text for keys like "Ctrl" or "Shift" [src/lib/components/ui/kbd/kbd.svelte:9-9](). * `icon`: Used for glyphs like the Command symbol (⌘) [src/lib/components/ui/kbd/kbd.svelte:10-10](). **Diagram: UI Component Hierarchy** ```mermaid graph BT subgraph "Internal Components" K["Kbd.svelte"] CI["Command.Input (bits-ui)"] CL["Command.List (bits-ui)"] end subgraph "CommandPalette.svelte [src/lib/components/CommandPalette.svelte]" R["Command.Root"] W["svelte:window (Global Listeners)"] end K --> R CI --> R CL --> R W -- "Triggers" --> R ``` Sources: [src/lib/components/CommandPalette.svelte:122-201](), [src/lib/components/ui/kbd/kbd.svelte:1-35]() ### Integration with Shell The `CommandPalette` is designed to be placed within the `AppTopbar` or a similar global header. It maintains its own focus management; when opened, it automatically focuses the input field using a Svelte `$effect` and `tick()` to ensure the DOM is ready [src/lib/components/CommandPalette.svelte:76-80](). Sources: * `src/lib/components/CommandPalette.svelte` * `src/lib/components/ui/kbd/kbd.svelte` * `src/lib/components/ui/input/input-chrome.ts` ---