DeckChangeReview
StableReview an AI edit that changed several slides: before and after for each slide, Keep or Undo each one or all at once, then save the kept changes as one version.
Also known as review changes, deck diff
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Keep or undo each slide
AI changed 4 slides
You asked: Make it more visual
. Nothing reaches the deck until you press Done.
Needs your review.1 of 4 slides kept, 3 left to review.
- Kept
Slide 2 Where we are
Turned four bullet points into a timeline
Before After - Needs review
Slide 3 Pricing
Made the chart full width and moved the points to speaker notes
Before After - Needs review
Slide 5 Customer growth
Led with the 38% growth figure from your sheet
Before After - Needs review
Slide 7 What Halden Foods said
Turned the paragraph into a pull quote
Before After
Keep or undo 3 more slides first, or use Keep all.
<DeckChangeReview request="Make it more visual" changes={changes} status={status}
onChange={(slideId, state) => setState(slideId, state)}
onKeepAll={() => setAll("kept")} onRejectAll={() => setAll("rejected")}
onDone={saveAsOneVersion} onOpenHistory={openHistory} />
// changes: [{ slideId: "s3", slideNumber: 3, title: "Pricing",
// summary: "Made the chart full width and moved the points to speaker notes",
// before: <SlideDrawing … />, after: <SlideDrawing … />, state: "proposed" }, …]Four slides changed by "Make it more visual". Keep or Undo each one; the header counts what is left. Done only applies once every slide has a decision, then saves one version.
When to use it
Lets people take the parts of a deck-wide AI edit they like and leave the rest, instead of accepting or losing it all.
Made of: Title with AI mark and slide count · The request in the person's words · Review status (amber while slides need a decision) · Per slide: number, title, what changed, state badge · Before and After (side by side or switch) · Keep and Undo · Pager on narrow screens · Keep all, Undo all · Done with the number of changes · Saved notice with Version history
Use it for
- After a deck-wide request such as "Make it more visual" or "Tighten the wording".
- Reviewing AI speaker notes or rewrites across several slides before they are saved.
- Any staged edit to an ordered set of visual items that each need their own decision.
Not for
- Reviewing code changes by file and hunk: use DiffView.
- Choosing another layout for one slide: use LayoutAlternatives.
- Switching one text field between the AI version and your edit: use RevertToggle.
- Restoring an older version of the whole deck: use VersionHistory.
Do and avoid
AI changed 2 slides
You asked: Make it more visual
. Nothing reaches the deck until you press Done.
Needs your review.1 of 2 slides kept, 1 left to review.
- Kept
Slide 2 Orders by month
Turned the list into a bar chart.
Before After - Needs review
Slide 4 Pricing
Added a photo beside the plans.
Before After
Keep or undo 1 more slide first, or use Keep all.
Do
- Stage deck-wide AI edits and review them here before they touch the deck.
- Write each change's summary in plain words: what moved, what was cut, what was added.
- Save the kept changes as one version named after the request, so it can be undone as a whole.
- Keep amber for slides that still need a decision.
Avoid
- Do not apply a deck-wide edit first and offer only a global undo.
- Do not force all-or-nothing: always allow keeping some slides.
- Do not colour the After picture or kept slides lime. Lime only marks that the After picture was made by the AI.
- Do not pick a decision for the person when they press Done; ask them to decide the slides left.
On a phone
- Below 480px wide (layout auto) it shows one slide at a time with Previous and Next.
- On a narrow screen Before and After become a switch, so each picture fills the width.
- Buttons have a 44px touch area.
- Keep all, Undo all and Done stay together under the slide.
Seen in products
- Gamma's AI edit mode shows an Original and Modified toggle across the affected slides, then Accept or restore, but changes from one request are all-or-nothing.
- PowerPoint Copilot asks people to Keep it or Discard generated speaker notes.
- Gamma restores the whole deck to before an agent request.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| requestrequired | string | none | What the person asked the AI, in their words. Shown in the header and in the saved version's name. |
| changesrequired | { slideId: string; slideNumber: number; title: string; before: ReactNode; after: ReactNode; summary: string; state: "proposed" | "kept" | "rejected" }[] | none | Each changed slide. rejected shows as Undone. |
| onChangerequired | (slideId: string, state: "proposed" | "kept" | "rejected") => void | none | Keep or Undo on one slide. Pressing the chosen button again returns the slide to proposed. |
| onKeepAllrequired | () => void | none | Keep every change. |
| onRejectAllrequired | () => void | none | Undo every change. |
| onDonerequired | () => void | none | Save the kept changes as one version. Only called once no slide is left to review. |
| status | "reviewing" | "applying" | "applied" | "reviewing" | applying locks the decisions and shows a busy Done. applied shows the saved notice. |
| view | "side-by-side" | "toggle" | "side-by-side" | Before and After next to each other, or one picture with a switch. Narrow screens always use the switch. |
| layout | "auto" | "list" | "pager" | "auto" | All slides in a column, or one at a time. auto uses the pager when the part is under 480px wide. |
| onOpenHistory | () => void | none | Shows Version history in the saved notice. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level of the title. Each slide is one level below. |
| className | string | none | Extra classes for the panel. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one DeckChangeReview switches all of this from its properties panel, across 18 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Reviewing, Applying, Applied |
| View | view | Side-by-side, Toggle |
| Layout | layout | Auto, List, Pager |
Tokens
Change one of these and every part that uses it follows.
--surface--bg--border--fg--fg-muted--lime--on-lime--attention--attention-soft--attention-fg--success-fg--radius-card--radius-control--dur-fast
Built in
- The panel is a section named by its title, with a heading per slide one level below.
- Keep and Undo are toggle buttons with aria-pressed, grouped and named by the slide's number and title.
- Each slide's state is a written badge (Needs review, Kept, Undone) with an icon, not colour alone.
- A polite live region says each decision and what is left, such as "Slide 5 kept. 2 left to review.", and when the deck is saved.
- Done stays focusable while slides are left; pressing it explains in words what to do instead of failing silently.
- Before and After pictures are hidden from screen readers; the one-line summary carries the change.
- Keyboard order is slide by slide, then Keep all, Undo all and Done.
- The only motion is a fast colour change on the slide border.
What you need to do
- Stage the AI edit; do not write it to the deck until onDone. Save the kept changes as one version named after the request.
- Give each change a one-line summary of what really changed, written by your code from the edit, not a guess.
- Draw before and after from the real slides. The pictures are hidden from screen readers, so the summary must carry the meaning.
- Set status to applying while saving and applied when saved, and pass onOpenHistory so the whole edit can be restored.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide