KQ-950 · CONTEXT/LINES

Context Lines

A search result that opens its neighbourhood. Pressing a matched line reveals the lines above and below: a ResizeObserver measures each side and both wrappers glide to their own heights, while the lines cascade outward from the match — nearest neighbour first, the ones above arriving from overhead and the ones below from under. A spinbutton sets how many lines each side shows, growing or trimming both wrappers on the same glide while the count rolls on snap, and the before block hangs from its bottom edge so trimming takes the far lines rather than the neighbours.

KQ-950 · CONTEXT/LINES

ledger-api · hold_id · 3 hits

1. 116ledger=coldbrook locked seq=99120
2. 117claim start amount=48.20 CBK
1. 119write ok seq=99121 dur=8ms
2. 120gate-relay ack latency=812ms
1. 202ledger=coldbrook window closed
2. 203reject queued for retry
1. 205retry in 30s attempt=1
2. 206metric holds.rejected +1
1. 375retry attempt=2 seq=99244
2. 376write ok seq=99245 dur=11ms
1. 378gate-relay ack latency=210ms
2. 379batch=118 closed holds=12

3 matches · 1 open · context ±2 · 7 lines

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/context-lines

Props

matches: ContextMatch[]; default —; The results: id, line number, text, and the surrounding before and after arrays.
openIds / defaultOpenIds: string[]; default []; Controlled or initial ids of the opened matches.
onOpenChange: (ids: string[]) => void; default —; Fires from the press that opened or folded a match.
context / defaultContext: number; default 2; Controlled or initial number of lines shown on each side.
onContextChange: (context: number) => void; default —; Fires from the step that changed the count.
maxContext: number; default 4; The stepper's ceiling; the supplied arrays cap it further.
query: string; default —; The matched term, marked inside the matched line.
label: string; default "Matches"; Names the list of matches for assistive technology.

Prop	Type	Default	Description
matches	ContextMatch[]	—	The results: id, line number, text, and the surrounding before and after arrays.
openIds / defaultOpenIds	string[]	[]	Controlled or initial ids of the opened matches.
onOpenChange	(ids: string[]) => void	—	Fires from the press that opened or folded a match.
context / defaultContext	number	2	Controlled or initial number of lines shown on each side.
onContextChange	(context: number) => void	—	Fires from the step that changed the count.
maxContext	number	4	The stepper's ceiling; the supplied arrays cap it further.
query	string	—	The matched term, marked inside the matched line.
label	string	"Matches"	Names the list of matches for assistive technology.