KQ-771 · CITE/MARK
Cite Mark
A citation number that knows its source. Hovering or focusing a mark lifts it on flick and opens its source card in a measured slot under the paragraph, anchored beneath the mark on snap; pressing pins it, and the card travels on glide from under the mark into the margin rail where pinned sources stack in citation order. Marks are real buttons with an always-mounted description, so Tab reaches each one, Enter or Space pins, and Escape hides or unpins.
North basin's output dipped in the second quarter because two cranes were out at once, and the second took nine more days to return than the first. The crews absorbed the gap as overrun rather than lost shifts.
Idle · 3 sources · none pinned
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/cite-mark
Props
- text
- string
- default —
- The answer; a [n] mark cites sources[n - 1].
- sources
- CiteSource[]
- default —
- Sources in citation order: id, title, site, excerpt and an optional formatted date.
- pinned / defaultPinned
- string[]
- default []
- Source ids pinned to the margin rail; controlled or initial.
- onPinnedChange
- (ids: string[]) => void
- default —
- Fires from the press that pinned or unpinned a source.
- onHoverChange
- (id: string | null) => void
- default —
- Fires when hover or focus shows or hides a source card.
- 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 | CiteSource[] | — | Sources in citation order: id, title, site, excerpt and an optional formatted date. |
| pinned / defaultPinned | string[] | [] | Source ids pinned to the margin rail; controlled or initial. |
| onPinnedChange | (ids: string[]) => void | — | Fires from the press that pinned or unpinned a source. |
| onHoverChange | (id: string | null) => void | — | Fires when hover or focus shows or hides a source card. |
| label | string | — | Names the answer region for assistive technology. |