KQ-776 · SOURCE/MAP
Source Map
Which sources fed which paragraph, drawn rather than footnoted. An overlay measures the answer's paragraphs and its source cards with a ResizeObserver and draws a curve from each paragraph to every source it draws on, self-drawing on glide in a cascade. Hovering or focusing a paragraph lights its lines and cards on a fast opacity tween and fades the rest; pressing pins the highlight, Up and Down walk the paragraphs, Home and End jump, and Escape unpins.
KQ-776 · SOURCE/MAP
Why deposits rose3 sources
- Draws on Basinworks quarterly letter
- Draws on Basinworks quarterly letter, Savings rates
- Draws on Branch survey
- Basinworks quarterly letterbasinworks.exampleFeeds paragraphs 1, 2
- Savings ratescoldbrook.exampleFeeds paragraph 2
- Branch surveyfieldline.exampleFeeds paragraph 3
Hover or press a paragraph
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/source-map
Props
- paragraphs
- SourceMapParagraph[]
- default —
- The answer's paragraphs; each names the source ids it draws on.
- sources
- SourceMapSource[]
- default —
- The source cards, in column order, with a label and a domain.
- value / defaultValue
- string | null
- default null
- The pinned paragraph id, controlled or initial.
- onValueChange
- (id: string | null) => void
- default —
- Fires when a paragraph is pinned or unpinned.
- onActiveChange
- (id: string | null) => void
- default —
- Fires when the highlighted paragraph changes by hover, focus or pin.
- label
- string
- default —
- Names the map for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| paragraphs | SourceMapParagraph[] | — | The answer's paragraphs; each names the source ids it draws on. |
| sources | SourceMapSource[] | — | The source cards, in column order, with a label and a domain. |
| value / defaultValue | string | null | null | The pinned paragraph id, controlled or initial. |
| onValueChange | (id: string | null) => void | — | Fires when a paragraph is pinned or unpinned. |
| onActiveChange | (id: string | null) => void | — | Fires when the highlighted paragraph changes by hover, focus or pin. |
| label | string | — | Names the map for assistive technology. |