KQ-865 · REPLY/THREAD/LINE
Reply Line
A thread that shows what a reply answers. Pointing at a reply, or walking to it with the arrow keys, draws a measured connector from its own edge up to its parent — one path of a fixed command count whose pathLength runs 0 to 1 on glide — while the answered message lifts four pixels on snap and takes a hairline ring. Leaving fades the line on the exit ease, and Enter on a reply moves focus to the message it answers.
Point at a reply, or walk the thread with the arrow keys.
- Marta07:12
Gate B is clear from eight. Two pallets for the Basinworks run.
- Ines07:19
The loose crate never got a label.
- You07:24
Docket says 41 kilos.
- Rui07:31
Waylight Pay wants it signed for by ten.
- Rui07:44
I can take the second pallet out at eight sharp.
- Marta07:51
Then Ines writes the label while you load.
no line · 3 replies · 0 jumps
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/reply-thread-line
Props
- messages
- LineMessage[]
- default —
- The thread, oldest first; replyTo names the message a reply answers.
- activeId / defaultActiveId
- string | null
- default null
- Controlled or initial id of the reply whose line is drawn.
- onActiveChange
- (id: string | null) => void
- default —
- Fires from hover, focus, blur and Escape.
- onJumpToParent
- (parentId: string, replyId: string) => void
- default —
- Fires when Enter on a reply moves focus to the message it answers.
- label
- string
- default —
- Names the thread list for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | LineMessage[] | — | The thread, oldest first; replyTo names the message a reply answers. |
| activeId / defaultActiveId | string | null | null | Controlled or initial id of the reply whose line is drawn. |
| onActiveChange | (id: string | null) => void | — | Fires from hover, focus, blur and Escape. |
| onJumpToParent | (parentId: string, replyId: string) => void | — | Fires when Enter on a reply moves focus to the message it answers. |
| label | string | — | Names the thread list for assistive technology. |