# XWUICommandPalette

A Spotlight-style command palette toggled by a keyboard shortcut (defaults to Ctrl/⌘+K, configurable via `hotkey`) with live filtering and arrow-key navigation. Apps populate it at runtime by calling `register()` / `registerMany()` with commands that carry a `title`, optional `section` and `hint`, and an `onRun` callback, then drive it with `open()`, `close()`, and `toggle()`.

## Basic Usage

Mounts a palette and registers two File commands; press Ctrl/⌘+K to open it.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Mount a palette and register a couple of commands, opened with Ctrl/⌘+K.
```

## Custom Hotkey

Overrides the default shortcut with `hotkey: "ctrl+/"` and customizes the placeholder and empty-state text.

```example
file: examples/CustomHotkey.ts
html: examples/CustomHotkey.html
title: Custom Hotkey
description: Replace Ctrl+K with Ctrl+/ and customize placeholder and empty text.
```

## Programmatic Open

Opens the palette from an app-supplied button by calling the public `open()` method.

```example
file: examples/ProgrammaticOpen.ts
html: examples/ProgrammaticOpen.html
title: Programmatic Open
description: Drive the palette from your own button using the public open() API.
```

## Sectioned Commands

Registers commands grouped under `section` labels (File / Edit / View) and opens immediately via `autoOpen`. Consecutive commands sharing a `section` render under one group header; each command's `hint` (e.g. "Ctrl+O") shows as a trailing badge and its `icon` (raw SVG markup) as a leading glyph.

```example
file: examples/SectionedCommands.ts
html: examples/SectionedCommands.html
title: Sectioned Commands
description: Commands grouped by section for clearer scanning, auto-opened on mount.
```

## Inline Command Menu

`mode: "inline"` mounts the palette permanently into its own container instead of a full-screen backdrop - no dimming, full width, no hotkey listener. Useful for showcasing a command menu directly in a page (e.g. a docs/marketing card) rather than only behind Ctrl/⌘+K. Combine with `showSearchIcon` for a leading search glyph; `footer` accepts `false` (no footer) or a custom string in place of the default keyboard-hint row.

```example
file: examples/InlineEmbed.ts
html: examples/InlineEmbed.html
title: Inline Command Menu
description: A permanently-embedded command menu with a search icon, grouped sections, and per-command icons/hints.
```

```api
```