KQ-532 · SAVE/MARK
Save Mark
An autosave indicator that tells the truth about time. Unsaved breathes on drift, saving bounces three dots on snap a beat out of phase, saved draws its check with pathLength on flick, and error shakes once on a tween before offering Retry. "Saved just now" relaxes into a live "Saved 2m ago" from a timer that runs only while a save is on screen, and the chip is a polite status region whose spoken text changes on state rather than on every tick; Retry is a real button in the tab order, and under reduced motion nothing bounces or breathes while the check still appears.
KQ-532 · SAVE/MARK
No changes
Autosave · idle · 0 written
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/save-mark
Props
- state
- "idle" | "dirty" | "saving" | "saved" | "error"
- default —
- Which of the five save states to show. Each has its own mark and its own physics.
- savedAt
- number
- default —
- Epoch ms of the last save. Drives the relative time, which ticks from a timer and is never read during render.
- onRetry
- () => void
- default —
- Fires from the Retry action, which appears only in the error state.
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "dirty" | "saving" | "saved" | "error" | — | Which of the five save states to show. Each has its own mark and its own physics. |
| savedAt | number | — | Epoch ms of the last save. Drives the relative time, which ticks from a timer and is never read during render. |
| onRetry | () => void | — | Fires from the Retry action, which appears only in the error state. |