KQ-666 · ROUTE/SPLIT

Route Split

One trade drawn as the several roads it takes: each leg is a curve whose stroke width is its share, and the amount travels along it as a dash flowing on a linear ease. A changed split re-lays the widths on glide, and pinning a road lands its label chip on snap. The legend is the accessible surface — real buttons on a roving tabindex where Up and Down step, Home and End jump, Enter pins the reading so the pointer can leave, and Escape unpins.

KQ-666 · ROUTE/SPLIT

Basinworks Exchange12,000BSN

BSN

FRN

Route all roads — 3 legs · 12,000 BSN

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/route-split

Props

legs: RouteLeg[]; default —; { id, venue, share } per road, in draw order; shares are weights and are normalised.
amount: number; default —; The total being routed; each road carries amount × share.
from: string; default —; Source ticker, printed in the left pill.
to: string; default —; Destination ticker, printed in the right pill.
format: (value: number) => string; default Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }); Formats every amount, in the legend and in the spoken sentences.
value / defaultValue: string | null; default null; Controlled or initial pinned leg; hover and focus preview on top of it without changing it.
onValueChange: (id: string | null) => void; default —; Fires from the press or the Escape that changed the pin.
onActiveChange: (id: string | null) => void; default —; Fires whenever the read leg changes, by hover, focus or pin.
flowing: boolean; default true; Runs the dash flow; ignored under reduced motion and paused while the document is hidden.
height: number; default 104; Diagram height in px; the width is fluid and measured with a ResizeObserver.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
legs	RouteLeg[]	—	{ id, venue, share } per road, in draw order; shares are weights and are normalised.
amount	number	—	The total being routed; each road carries amount × share.
from	string	—	Source ticker, printed in the left pill.
to	string	—	Destination ticker, printed in the right pill.
format	(value: number) => string	Intl.NumberFormat("en-US", { maximumFractionDigits: 0 })	Formats every amount, in the legend and in the spoken sentences.
value / defaultValue	string \| null	null	Controlled or initial pinned leg; hover and focus preview on top of it without changing it.
onValueChange	(id: string \| null) => void	—	Fires from the press or the Escape that changed the pin.
onActiveChange	(id: string \| null) => void	—	Fires whenever the read leg changes, by hover, focus or pin.
flowing	boolean	true	Runs the dash flow; ignored under reduced motion and paused while the document is hidden.
height	number	104	Diagram height in px; the width is fluid and measured with a ResizeObserver.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.