# paletteController

> The browser half of the command palette: filters the server-rendered commands by title and keywords, moves the active row, opens nested pages, fills Recent, and binds the palette's toggle key and every command's own key.

```ts
import { paletteController } from "@sdxc/ui/app";
```

Wires the palette `<dialog>` the host sits in, for as long as the host stays mounted.

## Signature

```ts
paletteController(options: PaletteController.Options): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `PaletteController.Options` | The toggle key, the copy it announces with, and where recents come from. |

## Examples

```tsx
<div hidden mix={[paletteController({ shortcut: "mod+k", open: "Open command menu", results: "{count} results", recent: [] })]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### PALETTE_RECENT_LIMIT

How many recent commands the palette offers before anything is typed.

#### Signature

```ts
const PALETTE_RECENT_LIMIT = 5
```

### PALETTE_ITEM_ATTRIBUTE

Marks each row with its command's id, which `recent` and the remembered list name.

#### Signature

```ts
const PALETTE_ITEM_ATTRIBUTE = "data-palette-item"
```

### PALETTE_CONTROL_ATTRIBUTE

Marks the link or button a row presses.

#### Signature

```ts
const PALETTE_CONTROL_ATTRIBUTE = "data-palette-control"
```

### PALETTE_GOTO_ATTRIBUTE

Names the page a row's control opens instead of acting.

#### Signature

```ts
const PALETTE_GOTO_ATTRIBUTE = "data-palette-goto"
```

### PALETTE_PAGE_ATTRIBUTE

Marks a page of commands with its id.

#### Signature

```ts
const PALETTE_PAGE_ATTRIBUTE = "data-palette-page"
```

### PALETTE_CLONE_ATTRIBUTE

Marks a row the island copied into the Recent group.

#### Signature

```ts
const PALETTE_CLONE_ATTRIBUTE = "data-palette-clone"
```

### PALETTE_HINT_ATTRIBUTE

Marks a shortcut hint with the combo it prints, so the island reprints it per platform.

#### Signature

```ts
const PALETTE_HINT_ATTRIBUTE = "data-shortcut-hint"
```

### foldSearchText

Lower-cases text and strips its accents, so "cafe" finds "Café" and "Équipe" finds "equipe".

#### Signature

```ts
foldSearchText(value: string): string
```

Returns: The folded text.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `value` | `string` | Text to fold. |

### PaletteController.Options

Plain data only, since the options cross into the browser with the palette's island.

#### Signature

```ts
type PaletteController.Options = {
		/** The combo that toggles the palette. */
		shortcut: string;
		/** The help-sheet label of that combo. */
		open: string;
		/** The announced result count, with `{count}` replaced. */
		results: string;
		/** Ids of commands the server offers under Recent. */
		recent: string[];
		/** The `localStorage` key commands run from the palette are remembered under. */
		remember?: string;
	}
```