KQ-874 · STATUS/LINE

Status Line

A custom status under a name that types itself out from an effect with cleanup, holding where it stands while the tab is hidden, with a caret blinking beside the last character until it settles. Clearing wipes the line away left to right on an animated clipPath, and because the exiting node keeps the text it last drew the wipe erases the real sentence. An expiry ring drains on glide toward each remaining fraction the parent reports, rounded before it reaches the attribute, and the measured frame means no status reserves no room.

KQ-874 · STATUS/LINE

Rui BaptistaColdbrook dispatch

Rui Baptista — no status

Install

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

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

Props

name: string; default —; The person the status belongs to; drawn as initials and spoken with the clear control.
roleLabel: string; default —; A quiet second line under the name ("Coldbrook dispatch").
status: string | null; default null; The custom line. A new value types itself; null wipes the old one away.
expiry: { label: string; remaining: number; total: number }; default —; Ring plus printed remainder; the label is already formatted, and no clock is read.
typeSpeed: number; default 26; Milliseconds per character while typing.
clearLabel: string; default "Clear"; Copy for the clear control.
onClear: () => void; default —; Fires from the Clear control and from Escape; set status to null here.
onSettle: (text: string) => void; default —; Fires once when the line finishes typing.
onExpire: () => void; default —; Fires from an effect when expiry.remaining reaches zero.

Prop	Type	Default	Description
name	string	—	The person the status belongs to; drawn as initials and spoken with the clear control.
roleLabel	string	—	A quiet second line under the name ("Coldbrook dispatch").
status	string \| null	null	The custom line. A new value types itself; null wipes the old one away.
expiry	{ label: string; remaining: number; total: number }	—	Ring plus printed remainder; the label is already formatted, and no clock is read.
typeSpeed	number	26	Milliseconds per character while typing.
clearLabel	string	"Clear"	Copy for the clear control.
onClear	() => void	—	Fires from the Clear control and from Escape; set status to null here.
onSettle	(text: string) => void	—	Fires once when the line finishes typing.
onExpire	() => void	—	Fires from an effect when expiry.remaining reaches zero.