KQ-843 · EDIT/TRACE

Edit Trace

A message that keeps its previous versions. When a new version lands the text wipes in over the old on a clip-path tween and an Edited mark pops in on flick; pressing the mark unfolds every previous version beneath the bubble with measured height on glide, each with a strike that draws left to right on the same spring, while the current text replays its wipe over the last one. The mark is a button with aria-expanded, previous versions are del elements in a real list, Escape folds the trace and returns focus, and a status region speaks each edit once.

KQ-843 · EDIT/TRACE

Marta
Refund window is 14 days.
14:02

Version 1 of 3 · not edited · trace folded

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/edit-trace

Props

versions: EditVersion[]; default —; Oldest first, each with text and a formatted time; the last entry is what the message says now. A single entry means never edited and no mark.
author: string; default "You"; Sender name printed above the bubble.
open / defaultOpen: boolean; default false; Controlled or initial trace state; it only shows once there is a previous version.
onOpenChange: (open: boolean) => void; default —; Fires from the mark or from Escape with the new trace state.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
versions	EditVersion[]	—	Oldest first, each with text and a formatted time; the last entry is what the message says now. A single entry means never edited and no mark.
author	string	"You"	Sender name printed above the bubble.
open / defaultOpen	boolean	false	Controlled or initial trace state; it only shows once there is a previous version.
onOpenChange	(open: boolean) => void	—	Fires from the mark or from Escape with the new trace state.
label	string	"Thread"	Names the thread list for assistive technology.