KQ-772 · SOURCE/STACK
Source Stack
Every source in one stack behind the answer: the front card shows in full and the others tuck behind it with only their title strips peeking out. Hovering or focusing a citation previews its card — y, scale and stacking order are derived from each card's rank and glide to their new values while the others tuck back — and pressing a citation, a strip, or an arrow key selects it so it stays in front; the stack's height is measured so a taller card glides rather than jumps. The strips carry a roving tabindex: Tab lands on the selected strip, the arrow keys move the selection, Home and End jump, Enter or Space selects.
The shipyard is on schedule: hull 14 floated out inside its window and the crews are back to plan. The risk is the cranes, and there are only two float-out tides left this year.
Hull 14 left the dry dock on 28 August, six days inside the window the yard gave the bank in June.
coldbrook.example · 1 of 4
Front 1 of 4 · Coldbrook yard notes
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/source-stack
Props
- text
- string
- default —
- The answer; a [n] mark cites sources[n - 1].
- sources
- StackSource[]
- default —
- Sources in citation order: id, title, site and excerpt.
- value / defaultValue
- string
- default the first source
- The id of the card kept in front; controlled or initial.
- onValueChange
- (id: string) => void
- default —
- Fires from the press or arrow key that selected a source.
- onPreviewChange
- (id: string | null) => void
- default —
- Fires when hover or focus previews a card, and null when the preview ends.
- label
- string
- default —
- Names the answer region for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The answer; a [n] mark cites sources[n - 1]. |
| sources | StackSource[] | — | Sources in citation order: id, title, site and excerpt. |
| value / defaultValue | string | the first source | The id of the card kept in front; controlled or initial. |
| onValueChange | (id: string) => void | — | Fires from the press or arrow key that selected a source. |
| onPreviewChange | (id: string | null) => void | — | Fires when hover or focus previews a card, and null when the preview ends. |
| label | string | — | Names the answer region for assistive technology. |