KQ-624 · FILL/TAPE

Fill Tape

Time and sales printed downward: the newest fill mounts at the foot of the tape from a step below on snap while the rows above glide up a line, and at capacity the top row collapses out on the exit ease as the column, measured by a ResizeObserver, settles to its new height. Holding is honest rather than cosmetic — hover, focus or the Hold button freezes the rows you were reading and counts arrivals into a waiting chip instead of dropping them, and the session volume freezes with them and rolls up through the whole backlog on release. Rows are list items whose labels speak the side in words, and Hold is a real aria-pressed button reachable by Tab.

KQ-624 · FILL/TAPE

BSN/USD

No fills yet

0 fills · 0 BSN · Running

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/fill-tape

Props

fills: Fill[]; default —; The tape, oldest first. `time` is already printed by the producer, so no clock is read here.
capacity: number; default 7; Rows kept on screen; older ones collapse off the top.
symbol: string; default "BSN/USD"; The pair the tape is for; names the list for assistive technology.
sizeUnit: string; default "BSN"; Unit printed after sizes and spoken in row labels.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns money into its printed string. The default pins an explicit locale so server and client agree.
formatSize: (size: number) => string; default Intl.NumberFormat("en-US"); Turns a size into its printed string.
held / defaultHeld: boolean; default false; Controlled or initial latch on the Hold control; hover and focus hold transiently on top of it.
onHeldChange: (held: boolean) => void; default —; Fires from the press or key that toggled the latch.
onPausedChange: (paused: boolean, waiting: number) => void; default —; Fires from the effect that observed the effective hold — latch, hover or focus — and again as the backlog grows.
onVolumeSettle: (volume: number, fills: number) => void; default —; Fires from the effect that observed the printed volume change, never during render.
emptyLabel: string; default "No fills yet"; The line the tape shows before its first print.

Prop	Type	Default	Description
fills	Fill[]	—	The tape, oldest first. `time` is already printed by the producer, so no clock is read here.
capacity	number	7	Rows kept on screen; older ones collapse off the top.
symbol	string	"BSN/USD"	The pair the tape is for; names the list for assistive technology.
sizeUnit	string	"BSN"	Unit printed after sizes and spoken in row labels.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns money into its printed string. The default pins an explicit locale so server and client agree.
formatSize	(size: number) => string	Intl.NumberFormat("en-US")	Turns a size into its printed string.
held / defaultHeld	boolean	false	Controlled or initial latch on the Hold control; hover and focus hold transiently on top of it.
onHeldChange	(held: boolean) => void	—	Fires from the press or key that toggled the latch.
onPausedChange	(paused: boolean, waiting: number) => void	—	Fires from the effect that observed the effective hold — latch, hover or focus — and again as the backlog grows.
onVolumeSettle	(volume: number, fills: number) => void	—	Fires from the effect that observed the printed volume change, never during render.
emptyLabel	string	"No fills yet"	The line the tape shows before its first print.