Skip to content
Aristeia
UI Elements & ComponentsHectorelement

Command Palette Craft

Retrieval without leaving the keyboard — grouped, scored, with recent-first ordering held in sessionStorage.

Built here · no external address

Hector: Solid, honourable, high-craft work.

Exhibit case

The component itself, in every state it can hold.

Arming the exhibit…

Why it matters

An archive that cannot be typed into is a brochure. The palette is the second navigation, not a gimmick.

Key techniques

  • ⌘K / Ctrl-K global chord.
  • Grouped entries, chambers, techniques, actions.
  • sessionStorage for recent-first ordering.

What to steal

The transferable part.

Put actions next to destinations. Toggle reduced motion and export belong beside chambers.

What not to copy

Context-specific or costly.

Do not trap focus without Escape. Do not invent a second search language.

Inclusion rationale

Athena's clinical intelligence applied to the whole building.

Technical register

Performance

cmdk filters in memory over the prebuilt index — no network.

Mobile

Full-viewport dialog; 44px rows; no hover-only hints.

Accessibility

Dialog label, listbox semantics, focus return on close.

Study next

Related entries

AthenaRoving FocusA grouped control that takes one tab stop and moves internally by arrow key, with the active tabindex reported live.AthenaField Validation StatesOne field in four designed states, with a live instance whose validation waits until the user has actually said something.AsclepiusReduced Motion ContractOne honest global switch — system preference plus user override — that every animation layer already reads.AthenaWeighted PressA button whose six states were designed together, with an asymmetric press that gives the control apparent mass.