KQ-2120 · SIGIL/PALETTE

Sigil Palette

A command menu where the first character sets the mode — > commands, @ people, # projects, / files: the symbol you type lands in the glyph slot and morphs into that mode's icon on springs.snap, four strokes of nine points interpolated and rebuilt every frame while it slides in from where it was typed, as the field retints toward the mode's colour, the caret follows and the results cross-fade to the mode's own list while its measured height glides on springs.glide. Backspace on an empty query morphs the icon back into the magnifier and Tab morphs icon to icon through the modes, starting from the in-between shape when interrupted. Every mode has its own recents, loading rows and empty state (most offer to create), and under 34rem the mode hints become a chip row.

KQ-2120 · SIGIL/PALETTE

mode everything

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/sigil-palette

Props

glyphStyle: "line" | "tile" | "keycap"; default "line"; How the glyph at the start of the field is drawn: a bare stroke in the mode colour, on a filled tile of the mode's pigment, or on a key with the mode colour on its lip.
tint: number; default 12; How strongly the field takes the mode's colour, in percent.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The base hue every mode's colour is turned from. A name or any CSS colour.
modes: SigilMode[]; default defaultSigilModes; The modes in Tab order: { id, sigil, label, icon, placeholder, hint, hue, createVerb?, empty? }.
items: SigilItem[]; default defaultSigilItems; Everything that can be found, each in its mode: { id, mode, label, detail?, keywords?, shortcut?, presence?, updated? }.
recent: string[]; default defaultSigilRecent; Ids shown under Recent while the field is empty, newest first.
mode / defaultMode: string; default — / "all"; "all" or a mode id, controlled or initial.
onModeChange: (mode: string) => void; default —; Fires from the key, Tab or click that changed the mode.
query / defaultQuery: string; default — / ""; The query without the symbol, controlled or initial.
onQueryChange: (query: string) => void; default —; Fires with every keystroke's new query.
onSelect: (item: SigilItem, mode: string) => void; default —; A result was chosen, with the mode it was found in.
onCreate: (mode: string, query: string) => void; default —; The create row was chosen, with its mode and the query.
loadingModes: string[]; default []; Modes whose results are still arriving: skeleton rows.
status: "ready" | "loading" | "error"; default "ready"; Whether anything has arrived: a message with Try again on error.
onRetry: () => void; default —; Try again after an error.
now: number; default defaultSigilNow; The time file ages are read from, in ms.
maxResults: number; default 8; Most results listed for a query.
placeholder: string; default "Search Coldbrook…"; The field's placeholder with no mode.
label: string; default "Search Coldbrook"; The field's accessible name with no mode.
onDismiss: () => void; default —; Escape with nothing to clear and no mode. Without it Escape is left to the page.
className: string; default —; Classes for the outer container.

Prop	Type	Default	Description
glyphStyle	"line" \| "tile" \| "keycap"	"line"	How the glyph at the start of the field is drawn: a bare stroke in the mode colour, on a filled tile of the mode's pigment, or on a key with the mode colour on its lip.
tint	number	12	How strongly the field takes the mode's colour, in percent.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The base hue every mode's colour is turned from. A name or any CSS colour.
modes	SigilMode[]	defaultSigilModes	The modes in Tab order: { id, sigil, label, icon, placeholder, hint, hue, createVerb?, empty? }.
items	SigilItem[]	defaultSigilItems	Everything that can be found, each in its mode: { id, mode, label, detail?, keywords?, shortcut?, presence?, updated? }.
recent	string[]	defaultSigilRecent	Ids shown under Recent while the field is empty, newest first.
mode / defaultMode	string	— / "all"	"all" or a mode id, controlled or initial.
onModeChange	(mode: string) => void	—	Fires from the key, Tab or click that changed the mode.
query / defaultQuery	string	— / ""	The query without the symbol, controlled or initial.
onQueryChange	(query: string) => void	—	Fires with every keystroke's new query.
onSelect	(item: SigilItem, mode: string) => void	—	A result was chosen, with the mode it was found in.
onCreate	(mode: string, query: string) => void	—	The create row was chosen, with its mode and the query.
loadingModes	string[]	[]	Modes whose results are still arriving: skeleton rows.
status	"ready" \| "loading" \| "error"	"ready"	Whether anything has arrived: a message with Try again on error.
onRetry	() => void	—	Try again after an error.
now	number	defaultSigilNow	The time file ages are read from, in ms.
maxResults	number	8	Most results listed for a query.
placeholder	string	"Search Coldbrook…"	The field's placeholder with no mode.
label	string	"Search Coldbrook"	The field's accessible name with no mode.
onDismiss	() => void	—	Escape with nothing to clear and no mode. Without it Escape is left to the page.
className	string	—	Classes for the outer container.