KQ-846 · TIME/DIVIDER

Time Divider

A thread that draws a line where the day changes. A divider that mounts because a new message crossed into a new day draws its rule from the centre outward on glide, the layout spring, and its label fades in over the line once it is most of the way out; messages arrive with a four-pixel rise on glide. Nothing inside is focusable: each divider is a separator labelled with its day, so a reader walking the list hears the change where it happens.

KQ-846 · TIME/DIVIDER

Monday
Marta, 16:40. Two vans out of Coldbrook tomorrow, both before eight.
Ines, 16:52. Noted. Basinworks pallets go on the first one.

Idle · 2 messages · 1 day

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/time-divider

Props

messages: TimeDividerMessage[]; default —; The thread in order: id, author, text, at as YYYY-MM-DDTHH:mm, optional mine.
today: string; default —; The current day as YYYY-MM-DD; Today and Yesterday are measured from it.
formatDay: (day: string, today: string) => string; default describeDay; Overrides the divider wording; the default gives Today, Yesterday, a weekday inside the week, and a date beyond it.
onDayCross: (label: string) => void; default —; Fires from an effect when a new day's divider mounts after the first render.
label: string; default "Thread"; Names the thread for assistive technology.

Prop	Type	Default	Description
messages	TimeDividerMessage[]	—	The thread in order: id, author, text, at as YYYY-MM-DDTHH:mm, optional mine.
today	string	—	The current day as YYYY-MM-DD; Today and Yesterday are measured from it.
formatDay	(day: string, today: string) => string	describeDay	Overrides the divider wording; the default gives Today, Yesterday, a weekday inside the week, and a date beyond it.
onDayCross	(label: string) => void	—	Fires from an effect when a new day's divider mounts after the first render.
label	string	"Thread"	Names the thread for assistive technology.