Checkpoints

Checkpoint scrubber for a coding session: each jump runs a rewind glitch over the code, and changed lines get a green bar.

View as Markdown

<hf-rewind>· loading

Trydrag the head to “Start” and back.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-rewind>

Props

labelremounts

<HfRewind label="Checkpoints" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-rewind

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-rewind.json

Usage

import { HfRewind } from "@/components/lumesec/hf-rewind";

export function Example() {
  return (
    <HfRewind />
  );
}

Behaviour

Scrub back through a session. Each jump runs a rewind glitch over the code before it swaps, and lines that changed get a green bar.

API reference

Attributes

labelReact proplabelTypestringDefaultCheckpoints

Heading text. Read once on connect.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

previewReact proponPreviewDetail{ index: number, name: string }

Fires when the head moves to another checkpoint by drag, click or key.

restoreReact proponRestoreDetail{ index: number, name: string }

Fires when Restore is pressed, including on the latest checkpoint.

Keyboard

Keys	Action
ArrowLeft / ArrowRight	Previous or next checkpoint.
Home / End	First or latest checkpoint.

Accessibility

The timeline is focusable with role="slider", aria-label="Checkpoint", aria-valuemin="0", aria-valuemax="4", aria-valuenow and the checkpoint name as aria-valuetext.
The code pane is an aria-live="polite" region, so the code is announced after each jump.
Restore is a native button; its result message is not a live region.
The head, glitch and change bars are drawn on an aria-hidden canvas.
Reduced motion: the code swaps at once without the glitch and the head jumps instead of springing; the green change bars remain.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-mono, --ui-muted and --ui-surface.

Notes

Built-in demo data: five checkpoints of one function (Start, Expiry, Rotate, Skew, Audit). It starts on the latest.
The component does not restore anything; restore reports the chosen checkpoint.

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-tree>

Changed fileshf-tree

<hf-graph>

Agent graphhf-graph

Was this page helpful?

Related