TakeVersions
StableThe versions of one video take, each saying what it came from: extend, edit, remix, re-cut or upscale, with preview, make current and undo.
Also known as take history, versions
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
History of one clip
Versions
5 versions. Nothing is ever overwritten.
Up and Down move between versions. Preview does not change the current version.
Showing the current version.
<TakeVersions
versions={[
{ id: "v1", op: "generated", prompt: "A ferry leaves the harbour at dawn, wide shot", durationSec: 8, author: "ai", authorName: "Reel 2", time: "Today 9:40", status: "done" },
{ id: "v2", op: "extended", from: "v1", prompt: "The ferry turns toward the open sea", durationSec: 12, author: "ai", time: "Today 9:52", status: "done" },
{ id: "v3", op: "edited", from: "v2", segment: [2, 6], detail: "warmer sunrise light", durationSec: 12, author: "ai", time: "Today 10:05", status: "done" },
{ id: "v4", op: "recut", from: "v3", segment: [8, 12], durationSec: 12, author: "person", authorName: "Mara", time: "Today 10:11", status: "done" },
{ id: "v5", op: "upscaled", from: "v4", detail: "4K", durationSec: 12, author: "ai", time: "Just now", status: "generating" },
]}
currentId={current}
onPreview={showInPlayer}
onMakeCurrent={setCurrent}
onBranch={branchFrom}
/>Five versions: generated, extended, edited, re-cut by a person, and an upscale still running. Make current says nothing was deleted and offers Undo. Up and Down move between versions. On a narrow screen it turns into the pager below.
When to use it
Keeps every extend and edit of a clip, says where each one came from, and makes going back safe.
Made of: Title and count · Notice with Undo (after a change) · Version list, newest first · Poster with length · Version name and Current tag · Lineage line · Prompt · Author and time · Changed-part strip · Make current · Branch · Pager (phone)
Use it for
- The history panel beside a take in a video editor.
- Going back to an earlier cut after an edit went wrong.
- Starting a new line of edits from an older version.
Not for
- Versions of a document or a chat answer: use VersionHistory.
- Stepping between sibling replies in chat: use VersionPager.
- Different takes from one prompt: use TakeGrid.
Do and avoid
Versions
3 versions. Nothing is ever overwritten.
Up and Down move between versions. Preview does not change the current version.
Ferry at dawn
Edited 10:05. Saved over the earlier cut.
Do
- Save every extend, edit, remix and upscale as a new version.
- Pass from on each version, so the lineage line can name its source.
- Pass segment for edits and re-cuts, so the changed part is shown and said.
Avoid
- Do not overwrite a version when the person edits.
- Do not offer Make current on a version that is still running.
- Do not show the operation as an icon alone. The words carry it.
On a phone
- Below 640px wide it shows one version at a time with Previous and Next buttons.
- Make current and Branch move under the version, in reach of a thumb.
- Buttons get a 44px tap area on touch screens.
Seen in products
- Google Flow: editing does not remove the original; the History panel keeps earlier versions and their prompts.
- Google Flow: agent edits are saved to the asset's stack, any version can be promoted, and Up and Down move through versions.
- Sora: Re-cut regenerated a chosen segment of a clip.
- Runway Aleph and Luma Modify: edits applied to a segment of an existing clip.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| versionsrequired | TakeVersion[] | none | Oldest first, so the first is v1. Each has op, from, prompt, segment, detail, durationSec, author, time and status. |
| currentIdrequired | string | none | The version in use now. |
| onPreviewrequired | (id: string) => void | none | Show a version without changing anything. Called with currentId to end the preview. |
| onMakeCurrentrequired | (id: string) => void | none | Make a version current. Also called with the old id by Undo. |
| onBranch | (id: string) => void | none | Start a new line of edits from a version. Shows Branch. |
| previewId | string | none | Controlled preview. Omit to let the part keep it. |
| layout | "auto" | "list" | "pager" | "auto" | auto shows the pager below 640px wide and the list above. |
| title | string | "Versions" | Heading text. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level of the title. |
| className | string | none | Classes for the panel. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one TakeVersions switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Layout | layout | Auto, List, Pager |
| CurrentId | currentId | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- previewing
- A version other than the current one was previewed: sunken row and a Previewing tag.
- restored
- After Make current: a notice says nothing was deleted, with Undo.
- working
- A version still running, such as an upscale: its status tag shows and Make current is held back.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--border--fg--fg-muted--fg-subtle--chart-seq-1--chart-2
Built in
- It is a section named by its heading. Versions are an ordered list, newest first, and the current one has aria-current="true".
- Each version's main button previews it. Its name says the version and how it was made, such as Preview v3. Edited 0:02 to 0:06 from v2.
- Preview buttons are one tab stop. Up and Down move between versions; Home and End jump.
- After Make current or Undo, a polite status says what changed, and focus moves to the current version when the pressed button goes away.
- Length is read as seconds. The changed-part strip is hidden from screen readers because the lineage line says the same.
- The pager uses VersionPager, which says the version name and its place, such as v3, 3 of 5.
What you need to do
- Show the previewed version in your player, and say in the player that it is a preview.
- Keep time text plain, such as Today 10:05, and the same across versions.
- If Branch opens a new editor, move focus there.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide