KQ-944 · SEARCH/HIGHLIGHT

Search Highlight

A search field over a log, and the log lights up under it. Every match becomes a mark whose wash sweeps in from its left edge by its own background size — never a transform, so the text is not scaled — on snap, staggered by cascade so a screenful lights inside the choreography budget; the current match is ringed and seated into view by its own offset. The counter rolls a digit at a time and shares one grid cell with the pattern error, and Enter steps forward, Shift+Enter back, Escape clears.

KQ-944 · SEARCH/HIGHLIGHT

Search gate log

Info, dock-worker, 11:02:04. batch 4471 picked up by shard 2
Debug, gate-relay, 11:02:06. lease renewed, ttl 30s
Warn, dock-worker, 11:02:09. retry 1 of 3 for batch 4471
Info, gate-relay, 11:02:11. handshake accepted from dock-2
Debug, dock-worker, 11:02:13. shard 2 backlog 18 items
Warn, dock-worker, 11:02:15. retry 2 of 3 for batch 4471
Error, dock-worker, 11:02:18. batch 4471 dropped after 3 retries
Info, gate-relay, 11:02:20. north run clear
Debug, gate-relay, 11:02:22. peer dock-2 answered in 12ms
Info, dock-worker, 11:02:24. batch 4482 picked up by shard 1
Debug, dock-worker, 11:02:27. shard 1 backlog 4 items
Warn, gate-relay, 11:02:29. queue depth 212, above the mark
Info, dock-worker, 11:02:31. batch 4482 drained in 412ms
Debug, gate-relay, 11:02:34. backoff window 400ms
Error, gate-relay, 11:02:36. handshake refused by dock-2
Info, gate-relay, 11:02:39. retry window opens in 2s

No matches · plain

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/search-highlight

Props

lines: SearchLine[]; default —; The buffer, oldest first; matches are found in each line's text.
query / defaultQuery: string; default ""; Controlled or initial query.
onQueryChange: (query: string) => void; default —; Fires from every keystroke and from the Escape clear.
regex / defaultRegex: boolean; default false; Controlled or initial regular-expression mode.
onRegexChange: (regex: boolean) => void; default —; Fires from the pattern chip.
onMatchesChange: (count: number) => void; default —; Fires when the number of matches changes.
onIndexChange: (index: number) => void; default —; Fires when the cursor steps; -1 when there is nothing to step to.
onAnnounce: (sentence: string) => void; default —; The sentence the polite region just spoke.
maxHeight: number; default 216; Scroll ceiling for the log box, in px.
label: string; default "Search log"; Names the search field.

Prop	Type	Default	Description
lines	SearchLine[]	—	The buffer, oldest first; matches are found in each line's text.
query / defaultQuery	string	""	Controlled or initial query.
onQueryChange	(query: string) => void	—	Fires from every keystroke and from the Escape clear.
regex / defaultRegex	boolean	false	Controlled or initial regular-expression mode.
onRegexChange	(regex: boolean) => void	—	Fires from the pattern chip.
onMatchesChange	(count: number) => void	—	Fires when the number of matches changes.
onIndexChange	(index: number) => void	—	Fires when the cursor steps; -1 when there is nothing to step to.
onAnnounce	(sentence: string) => void	—	The sentence the polite region just spoke.
maxHeight	number	216	Scroll ceiling for the log box, in px.
label	string	"Search log"	Names the search field.