A scoped entity-search overlay — a sibling to the command palette, but for navigating to records rather than firing actions. Set entities + scopes; it filters client-side, shows per-scope counts, highlights matches, groups by scope, and emits events the consumer handles.
Stablewcimport '@esa/ecology/esa-entity-search';
Preview
Data is set as properties in a script. Open with the button or /. Try a query (e.g. “ri”) to see counts + highlighting; Tab cycles scopes; ⌘/Ctrl + Enter fires show-all.
The searchable records, set as a property. Each: { id, title, subtitle?, scope, icon?, url?, meta? }. Filtered client-side.
scopes
EsaSearchScope[]
[]
Facets to narrow by. Each: { id, label, icon? }. An implicit "All" facet is prepended.
recent
EsaSearchEntity[]
[]
Shown when the query is empty and the "All" facet is active.
rowActions
EsaSearchRowAction[]
[]
Per-row secondary actions (e.g. Impersonate). Each: { id, label, icon?, scopes? }. scopes restricts which rows show it.
open
boolean
false
Reflected open state.
placeholder
string
'Search…'
Input placeholder.
allLabel
string
'All'
Label for the implicit all-scopes facet.
hotkey
'' | 'mod+k' | 'slash'
''
Built-in open shortcut. 'mod+k' = Cmd/Ctrl+K toggle; 'slash' = '/' opens (ignored while typing in a field).
Events
Event
Type
Default
Description
select
{ entity }
—
A row was chosen (click or Enter). The consumer navigates (e.g. to entity.url).
scope-change
{ scope }
—
The active facet changed. scope is '' for All.
show-all
{ query, scope }
—
Cmd/Ctrl+Enter — "see all results". The consumer routes to a full results page.
row-action
{ action, entity }
—
A per-row action button was clicked. action is the EsaSearchRowAction id.
Methods
Prop
Type
Default
Description
show()
method
—
Opens, clears the query + scope, focuses the input.
close()
method
—
Closes the overlay.
toggle()
method
—
Toggles open state.
Accessibility
The overlay is role="dialog"; results are role="listbox" / role="option" with aria-selected; facets are a role="tablist".
ArrowUp / ArrowDown move the active row (wrapping across groups), Enter selects, Esc closes, Tab / Shift+Tab cycle facets.
The input is focused automatically on open.
Theming surface
Every public token this component reads, extracted from its source at build time.
The Resolves to column walks each token's real lineage —
component → semantic → primitive → raw value — so you
can see exactly where re-pointing it lands. A spoke re-skins by overriding these in
its theme-<slug>.css; component internals are never edited. No
hook for what you need? File it with /request-lego.