Edit history stripPro

Every edit to an image as a horizontal strip, from the original to the newest step: undone steps stay visible, forks switch between branches, and any step can be compared with the current version or restored.

Markdown

On this page

ProEvery edit with two forks and an undone upscale. Arrows select, Enter restores, C compares with the current version.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/edit-history-strip

Usage

tsx

import { EditHistoryStrip } from "@/components/ui/chatcn/pro/edit-history-strip"

<EditHistoryStrip steps={edits} currentId={version} onRestore={setVersion} onCompare={compare} />

Pass every step in creation order with parentId pointing at the step it was made from. The strip shows the line from the original to the current version, then on through the newest child at each fork, so steps after an undo stay visible (dimmed, with a dashed link) and restoring one is never a loss. A step with more than one child shows a branch switcher.

Examples

States

An edit in progress, a failed step with a long label, no history yet and right to left.

ProAn edit in progress, a failed step with a long label and no history.

Props

Prop	Type	Notes
`steps`	`{ id, parentId?, kind?, label, src?, alt, createdAt?, status? }[]`	In creation order. `kind` is generate, vary, upscale, inpaint, outpaint, remix or edit
`currentId`	`string`	The version the canvas shows. Default the newest step
`onRestore`	`(id) => void`	Make a step current. Shows Restore this version
`onCompare`, `comparingId`	`(id) => void`, `string \| null`	Compare with current
`selectedId`, `defaultSelectedId`, `onSelectedChange`	`string`	The step the actions act on
`label`	`string`	Accessible name. Default "Edit history"
`now`, `locale`	`number`, `string`	Reference time and locale for "4 min ago"

Keyboard

Key	Action
`←`, `→`, `Home`, `End`	Select a step. Mirrored in right to left
`↑`, `↓`	On a fork: switch to the previous or next branch
`Enter`	Restore the selected step
`C`	Compare the selected step with the current version

Accessibility

A horizontal role="listbox", one tab stop. Each step reads its position, label and state: "3. Inpaint sky, current version" or ", undone".
The current version carries aria-current="step" and a visible Current label, not only a ring.
Branch switches and restores are announced politely. Failed steps use the red token with an icon and the word Failed.

Motion

Selection is instant: arrows drive it. Switching a branch swaps the steps after the fork without movement, so the strip never slides under the pointer.
Thumbnails fade in over 200 ms once decoded. Hover changes color only.