KQ-658 · NONCE/LINE

Nonce Line

An account's outgoing transactions on one rail in nonce order, where a missing number draws as a dashed slot that breathes on a three-keyframe opacity tween and everything behind it reads as blocked. While the gap stands, the rail carries a break so the blocked tail visibly sits further along than it should; filling the slot collapses that break on glide and slides every transaction behind it forward. The rail is an ordered list with a roving tabindex — Left and Right step, Home and End jump, Enter and Space select or fill — and every tile's label spells its state out in words.

KQ-658 · NONCE/LINE

Basin outboxGap at 43

Nonce 44 · 0x0c19bfa2 · 120.00 BSN · waiting on 43

Nonce 44 blocked

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/nonce-line

Props

items: NonceItem[]; default —; The transactions: nonce, hash, status, amount and an optional payee. Order does not matter; the line sorts by nonce and draws the missing numbers itself.
value / defaultValue: number; default —; Controlled or initial focused nonce; defaults to the lowest on the rail.
onValueChange: (nonce: number) => void; default —; Fires from the click or key press that moved the selection.
onFill: (nonce: number) => void; default —; Fires from the press on a gap slot; the host inserts the missing transaction.
format: (value: number) => string; default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); Formats every amount on the rail and in the detail line. The default pins an explicit locale so server and client agree.
asset: string; default "BSN"; Ticker printed after each amount.
fillLabel: string; default "Fill"; Word inside a gap slot.
label: React.ReactNode; default —; Visible list label; omit it and pass aria-label to label the rail invisibly.

Prop	Type	Default	Description
items	NonceItem[]	—	The transactions: nonce, hash, status, amount and an optional payee. Order does not matter; the line sorts by nonce and draws the missing numbers itself.
value / defaultValue	number	—	Controlled or initial focused nonce; defaults to the lowest on the rail.
onValueChange	(nonce: number) => void	—	Fires from the click or key press that moved the selection.
onFill	(nonce: number) => void	—	Fires from the press on a gap slot; the host inserts the missing transaction.
format	(value: number) => string	Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })	Formats every amount on the rail and in the detail line. The default pins an explicit locale so server and client agree.
asset	string	"BSN"	Ticker printed after each amount.
fillLabel	string	"Fill"	Word inside a gap slot.
label	React.ReactNode	—	Visible list label; omit it and pass aria-label to label the rail invisibly.