KQ-949 · ERROR/PIN
Error Pin
A rail down the right edge of a log stands for the whole file: every error line puts a pin on it at its own share of the length, and a thumb tracks the visible slice from motion values written in the scroll handler, so scrolling never re-renders the list. A pin that arrives while you watch pops in on snap rather than recoil, because an error is not a landing to celebrate; pressing one scrolls the box to that line and washes the row on a three-keyframe tween. The pins are buttons under a roving tabindex.
KQ-949 · ERROR/PIN
gate-relay · 3 errors
- 09:41:02infogate-relay listening, 7 workers
- 09:41:03infohold 4471 accepted
- 09:41:04warnqueue depth 40, shedding reads
- 09:41:05infohold 4472 accepted
- 09:41:06errorhold 4473 rejected, ledger closed
- 09:41:07infohold 4474 accepted
- 09:41:08infoworker 3 recycled
- 09:41:09warnqueue depth 61
- 09:41:10infohold 4475 accepted
- 09:41:12errorhold 4476 rejected, ledger closed
- 09:41:13infoworker 5 recycled
- 09:41:14infohold 4477 accepted
- 09:41:15errorupstream timeout after 2.0 s
3 errors · no pin pressed yet
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/error-pin
Props
- lines
- PinLine[]
- default —
- The log in order; every line at level "error" puts a pin on the rail.
- activeId / defaultActiveId
- string | null
- default null
- Controlled or initial pinned error the rail treats as current.
- onActiveChange
- (id: string | null) => void
- default —
- Fires from the press that made a pin current.
- onJump
- (id: string, index: number) => void
- default —
- Fires when a pin is activated, with its position among the errors.
- maxHeight
- number
- default 208
- The scroller's height in pixels; the log scrolls inside it, never the page.
- label
- string
- default "Log"
- Names the scrollable log for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | PinLine[] | — | The log in order; every line at level "error" puts a pin on the rail. |
| activeId / defaultActiveId | string | null | null | Controlled or initial pinned error the rail treats as current. |
| onActiveChange | (id: string | null) => void | — | Fires from the press that made a pin current. |
| onJump | (id: string, index: number) => void | — | Fires when a pin is activated, with its position among the errors. |
| maxHeight | number | 208 | The scroller's height in pixels; the log scrolls inside it, never the page. |
| label | string | "Log" | Names the scrollable log for assistive technology. |