# HistoryControls

Undo and redo a bounded edit history, including the branch created by a new change.

- Family: Interaction, imported from `mizu-ui` or `mizu-ui/interaction`
- Docs: https://mizu.user64bit.world/components/history-controls
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/interaction/HistoryControls.tsx

## Usage

```tsx
"use client";

import { HistoryControls, useHistory, InlineEdit, Stack } from "mizu-ui";

export function Example() {
  const history = useHistory("First draft");
  return (
    <Stack gap={16}>
      <InlineEdit
        label="Draft name"
        value={history.value}
        onValueChange={history.set}
      />
      <HistoryControls
        canUndo={history.canUndo}
        canRedo={history.canRedo}
        onUndo={history.undo}
        onRedo={history.redo}
      />
    </Stack>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/history-controls 0xuser64bit/mizu/inline-edit 0xuser64bit/mizu/stack
```

## Props

- `useHistory(initial, limit?)`: `hook`. Value, set, undo, redo, reset and availability; bounded to 50 past entries by default.
- `canUndo / canRedo`: `boolean`. Availability from your history.
- `onUndo / onRedo`: `function`. Actual history operations.

## Accessibility

Named button group with explicit disabled boundaries. Store immutable values; Object.is suppresses unchanged edits. A new edit clears the redo branch.

## Motion

State changes belong to the edited content.