KQ-869 · STAR/MARK

Star Mark

A star, a folded corner, and the list that keeps them. Pressing a message's star grows a solid star out of the outline on recoil — two visible bounces, the one thing here that celebrates — while the bubble takes a corner mark scaling from its own corner on flick and the saved list gains the message, sliding in from 16px on glide with the newest save at the top. Unsaving reverses all three on the exit ease, and the panel's height comes from a ResizeObserver bound to its content so it is only ever as tall as what it holds.

KQ-869 · STAR/MARK

Rui Baptista14:46
Basinworks want the yard paperwork signed before the pallets move.
Ines Moreau15:02
Waylight Pay reference for the fee is 4471-CB — put it on the sheet.
Marta Ferreira15:11
I can cover Friday's run if dock three is free before ten.

Saved1

1 saved · last Rui 14:46

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/star-mark

Props

messages: StarMessage[]; default —; The thread, oldest first; each carries an id, author, text and formatted time.
value / defaultValue: string[]; default []; Controlled or initial saved ids, most recently saved first.
onValueChange: (ids: string[]) => void; default —; Fires from a star press or Space with the next saved set.
onSaveChange: (id: string, saved: boolean) => void; default —; Fires with the message that changed and its new state.
onJump: (id: string) => void; default —; Fires when a saved row sends focus back to its message.
savedLabel: string; default "Saved"; Names the saved list and heads it, beside the count.
emptyLabel: string; default "Nothing saved yet"; The panel's designed zero state, shown rather than reserved.
label: string; default "Thread"; Names the thread list for assistive technology.

Prop	Type	Default	Description
messages	StarMessage[]	—	The thread, oldest first; each carries an id, author, text and formatted time.
value / defaultValue	string[]	[]	Controlled or initial saved ids, most recently saved first.
onValueChange	(ids: string[]) => void	—	Fires from a star press or Space with the next saved set.
onSaveChange	(id: string, saved: boolean) => void	—	Fires with the message that changed and its new state.
onJump	(id: string) => void	—	Fires when a saved row sends focus back to its message.
savedLabel	string	"Saved"	Names the saved list and heads it, beside the count.
emptyLabel	string	"Nothing saved yet"	The panel's designed zero state, shown rather than reserved.
label	string	"Thread"	Names the thread list for assistive technology.