KQ-779 · PAGE/PIN

Page Pin

Pinned to the page it came from. A procedural preview of the source draws a scroller of sheets under a header that reads the page with rolling digits; choosing a citation pin animates the scroller to its page on glide, the page number rolls on snap as sheets pass, and when the scroll settles a wash wipes across the cited lines on the enter ease. The pins are a radio group with a roving tabindex, and the scroller is a focusable region the keyboard scrolls natively.

KQ-779 · PAGE/PIN

Basinworks quarterly letterp.of 24

Page 1 of 24 · nothing pinned

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/page-pin

Props

title: string; default —; The document's name in the header.
pageCount: number; default —; How many sheets the preview draws.
citations: PagePinCitation[]; default —; The pinned claims: an id, a label, the page and the first and last line cited.
value / defaultValue: string | null; default null; The chosen citation id, controlled or initial.
onValueChange: (id: string) => void; default —; Fires when a pin is chosen.
onPageChange: (page: number) => void; default —; Fires when the page under the header changes, by pin or by hand.
linesPerPage: number; default 12; Bars drawn per sheet.
label: string; default —; Names the preview region for assistive technology.

Prop	Type	Default	Description
title	string	—	The document's name in the header.
pageCount	number	—	How many sheets the preview draws.
citations	PagePinCitation[]	—	The pinned claims: an id, a label, the page and the first and last line cited.
value / defaultValue	string \| null	null	The chosen citation id, controlled or initial.
onValueChange	(id: string) => void	—	Fires when a pin is chosen.
onPageChange	(page: number) => void	—	Fires when the page under the header changes, by pin or by hand.
linesPerPage	number	12	Bars drawn per sheet.
label	string	—	Names the preview region for assistive technology.