KQ-848 · LONG/FOLD

Long Fold

A thread where a long message arrives folded. Any bubble taller than lines line boxes clamps to exactly that many, fades its last line out in the bubble's own colour and offers a read-more; unfolding joins the folded height to the measured one on glide while the fade lifts on a tween and the chevron turns on snap. Folding back runs the same spring in reverse and, if the bubble's top has scrolled away, glides the box to it at the same time, so the message you closed stays under your eye.

KQ-848 · LONG/FOLD

Ines, 16:58.
Before you go, where are we with payouts?
Marta, 17:02.
Handover for the night shift. Batch 4471 cleared at 08:58 after the signer clock drift. Both signers are on the rack A sync unit now and the rack B unit is tagged for replacement; do not move them back. Two smaller batches went out on their own. Coldbrook Bank confirmed receipt of all three at 09:15 and the confirmation ids are in the incident doc. Open items: the drift alarm is set at five seconds but has not fired in anger yet, so the first real alert pages whoever is on. The refund queue is running an hour behind because it waited on 4471; it should catch up by midnight without help. If Basinworks calls about the short pallet, that is dispatch, not us, and Ines has already rung them. Anything else, ring me before eleven.
Ines, 17:05.
Got it. I'll watch the refund queue.
Marta, 17:06.
Thanks. Off now.

Folded · Marta 17:02 · 4 lines

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/long-fold

Props

messages: FoldMessage[]; default —; The thread in order: id, author, text with newlines kept, at as HH:mm, optional mine.
lines: number; default 4; Lines shown while folded; a message that fits shows no control.
open / defaultOpen: string[]; default []; Controlled or initial ids of unfolded messages.
onOpenChange: (id: string, open: boolean) => void; default —; Fires from the press that folds or unfolds a message.
moreLabel: string; default "Read more"; Disclosure copy while folded.
lessLabel: string; default "Show less"; Disclosure copy while open.
label: string; default "Thread"; Names the scroll region for assistive technology.

Prop	Type	Default	Description
messages	FoldMessage[]	—	The thread in order: id, author, text with newlines kept, at as HH:mm, optional mine.
lines	number	4	Lines shown while folded; a message that fits shows no control.
open / defaultOpen	string[]	[]	Controlled or initial ids of unfolded messages.
onOpenChange	(id: string, open: boolean) => void	—	Fires from the press that folds or unfolds a message.
moreLabel	string	"Read more"	Disclosure copy while folded.
lessLabel	string	"Show less"	Disclosure copy while open.
label	string	"Thread"	Names the scroll region for assistive technology.