KQ-883 · LINK/UNFURL

Link Unfurl

A pasted link that unfolds its preview inside the bubble. While the host reports "fetching" a skeleton the shape of the card mounts in the fold, which glides open to that measured height on glide while a highlight sweeps across on a linear tween; the card then cross-fades in over the skeleton from distances.step on snap, both stacked in one grid cell so the fold never collapses between them. Removing folds it back to zero on glide, the thumbnail is drawn from a seed rather than loaded, and the card is a button so a sweep cannot navigate away.

KQ-883 · LINK/UNFURL

Dock power is out again — status page says the same.
https://basinworks.example/status/quay-4
Ines11:07

no preview

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/link-unfurl

Props

url: string; default —; The address in the bubble, and the thing being previewed.
text: string; default —; What was typed before the link.
from: "me" | "peer"; default "peer"; Which side the bubble takes.
state: "idle" | "fetching" | "ready" | "none"; default "idle"; The fold's state, owned by the host.
preview: LinkPreview; default —; Title, description, invented domain and the seed that draws the thumbnail.
onOpen: (url: string) => void; default —; Fires from the preview card.
onRemove: () => void; default —; Fires from the card's remove control; set state back to "idle".
onRetry: () => void; default —; Fires from Retry when no preview could be had.
onUnfurled: () => void; default —; Fires once, when the card has finished opening.
time: string; default —; Printed under the bubble, already formatted.
peerName: string; default "Them"; Names the sender under the bubble.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
url	string	—	The address in the bubble, and the thing being previewed.
text	string	—	What was typed before the link.
from	"me" \| "peer"	"peer"	Which side the bubble takes.
state	"idle" \| "fetching" \| "ready" \| "none"	"idle"	The fold's state, owned by the host.
preview	LinkPreview	—	Title, description, invented domain and the seed that draws the thumbnail.
onOpen	(url: string) => void	—	Fires from the preview card.
onRemove	() => void	—	Fires from the card's remove control; set state back to "idle".
onRetry	() => void	—	Fires from Retry when no preview could be had.
onUnfurled	() => void	—	Fires once, when the card has finished opening.
time	string	—	Printed under the bubble, already formatted.
peerName	string	"Them"	Names the sender under the bubble.
label	string	—	Names the thread list for assistive technology.