# Checkpoints
> Checkpoint scrubber for a coding session: each jump runs a rewind glitch over the code, and changed lines get a green bar.
- Element: `<hf-rewind>`
- React: `import { HfRewind } from "@/components/lumesec/hf-rewind"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-rewind.json
- Page: https://elements.lumesec.ai/components/pixel-hd/rewind



Live preview: https://elements.lumesec.ai/view/hf-rewind

```html
<hf-rewind></hf-rewind>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-rewind
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-rewind.json
```

## Usage

React:

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

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

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-rewind.js"></script>

<hf-rewind></hf-rewind>
```

## 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

| Attribute | React prop | Type     | Default       | Description                         |
| --------- | ---------- | -------- | ------------- | ----------------------------------- |
| `label`   | `label`    | `string` | `Checkpoints` | Heading text. Read once on connect. |

### Events

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

| Event     | React prop  | Detail                            | Description                                                            |
| --------- | ----------- | --------------------------------- | ---------------------------------------------------------------------- |
| `preview` | `onPreview` | `{ index: number, name: string }` | Fires when the head moves to another checkpoint by drag, click or key. |
| `restore` | `onRestore` | `{ 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](/docs/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.