Sweep apply

Pro

Reviews a set of suggested changes to one file, hunk by hunk. Accept or reject each change, or sweep through all of them as a highlight travels down each hunk while it merges.

Installs components/ui/sweep-apply.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/sweep-apply

hold-to-confirm.tsx3 of 3 changes pending

Line 3

function HoldToConfirm({

label = "Hold to confirm",

duration = 1500,

duration = 1000,

onConfirm,

}: HoldToConfirmProps) {

Line 11

function finish() {

if (progress >= 1) {

console.log("done");

onConfirm?.();

}

Line 21

return (

<button aria-label="Hold" onPointerDown={() => (start.current = Date.now())}>

<button aria-label={label} onPointerDown={() => (start.current = Date.now())}>

{label}

</button>

Nothing applied yet.

When to use #

Use it for

Reviewing an assistant's edits to a file before they are written.
Applying a set of suggested fixes where each one needs a yes or no.

Skip it when

Comparing two files with no decision to make; use the file diff.
Merge conflicts, which need a third side to choose from.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

It hands back the file, not a log: onChange gives the text with every accepted change applied, plus the counts. Pending and rejected changes keep the original lines, so applying the result is one assignment.
Rejecting is as visible as accepting: Accepting closes the removed lines and lets the added ones settle into plain code; rejecting closes the additions. Either way the resolved hunk stays on screen with an Undo, so nothing vanishes.

Usage

Signs, not colour, carry the meaning: Every line has a + or − and a spoken Added or Removed. The violet and orange tints are the file diff's, so the two read as one system.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/sweep-apply

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { SweepApply } from "@/components/ui/sweep-apply"

The worked example comes with Pro

The 73-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

SweepApply

component

PropTypeDefaultDescription

path *string—

before *string—

after *string—

languageCodeLanguage—

contextnumber2Unchanged lines kept around each change.

onChange((change: SweepApplyChange) => void)—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.