# `lr-checkpoint` - **Import** `import '@aceshooting/lyra-ui/components/lr-checkpoint.js';` (stable tag alias; registers the tag) - **Class** `LyraCheckpoint`, also available unregistered from `@aceshooting/lyra-ui/components/conversation/checkpoint/checkpoint.class.js` - **Family** `components/conversation/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 10 parts, 1 custom property — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-checkpoint` An inline conversation restore point: a labeled marker between messages whose Restore affordance confirms inline, then hands the host a `lr-restore` event. This component persists and restores nothing itself — host state in, events out. Not a handoff or plain rule (`lr-handoff-divider`/`lr-divider`); not branch navigation across regenerated variants (`lr-branch-picker`); not recorded-run playback (`lr-sequence-playback`). **Properties:** `checkpointId: string = ''` (attribute `checkpoint-id`) — opaque id echoed in the `lr-restore` event detail. `label: string = ''` — checkpoint name; the localized `checkpointLabel` fallback renders while empty. `timestamp?: LyraTimestamp` (`Date | string | number`, attribute: false) — optional creation time, rendered as ``, default `hour:minute` in `effectiveLocale`; invalid strings are treated as unset. `formatTimestamp?: (date: Date) => string` (attribute: false) — overrides the default rendering. `restorable: boolean = true` — when `false`, renders a plain marker with no button. `confirmRestore: boolean = true` (attribute `confirm-restore`) — gates the event behind an inline confirm step; a string-aware converter parses `confirm-restore="false"` correctly from plain HTML. `restoring: boolean = false` (reflected) — host-set busy state: the Restore button becomes `aria-disabled="true"` with a spinner beside the localized "Restoring…" text. **Slots:** default — optional supplemental content under the marker row (e.g. what changed since this point). **Events:** `lr-restore` — `detail: { checkpointId, label }`; fired on Restore activation, after the inline confirm when `confirmRestore` is on. Not cancelable. **Methods:** `click()` forwards to the current Restore action only when restoration is available. The confirm prompt names both Confirm and Cancel through `aria-describedby`; Escape/cancel restores focus transactionally, and a same-turn controlled change that removes confirmation never lets a stale focus continuation win. **CSS parts:** `base` (`role="group"`), `line` (each of the two flanking rules), `icon` (bookmark glyph), `label`, `timestamp`, `restore-button` (only while `restorable`), `confirm-group`, `confirm-prompt`, `confirm-button`, `cancel-button`. **Themeable custom properties:** `--lr-checkpoint-spin-duration` (default `var(--lr-transition-ambient)`, the library's compound duration/timing-function token for infinite "still alive" motion) — the restoring spinner's rotation cycle. Because that value carries a timing function as well as a duration, it can only be spliced into the `animation` shorthand, never assigned to `animation-duration` alone. The spinner stops outright under `prefers-reduced-motion: reduce`. ```html ```