50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4f0e,// Hairline UI · diff-review · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { X } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * DIFF REVIEW: accept or reject what the AI changed * * pending the change inline: removed words struck in red, * added words in green; Reject and Accept * accepted the text resolves in place: removed words shrink * out of the sentence and added ones lose their * green; Accept morphs to "Accepted" as its check * draws itself, Reject folds away, Undo opens in * rejected the same in reverse: the added words shrink away * and the struck ones come back as plain text * * The header count rolls ("3 to review" → "2 of 3 accepted"). * Give it before and after; it works out the difference by word * (prose) or by line (code). Accept or reject one at a time, or * all at once. Works controlled or on its own; onComplete fires * when nothing is left to review. * ───────────────────────────────────────────────────────── */ export type ChangeDecision = "pending" | "accepted" | "rejected"; export interface DiffChange { id: string; before: string; after: string; /** Where it is, e.g. "Paragraph 2" or a file name. */ label?: string; } export interface DiffReviewProps extends Omit, "title"> { changes: DiffChange[]; /** Compare word by word (prose) or line by line (code). */ mode?: "words" | "lines"; decisions?: Record; defaultDecisions?: Record; /** Every decision after a change (one call for Accept all). */ onDecisionsChange?: (decisions: Record) => void; onDecisionChange?: (id: string, decision: ChangeDecision) => void; /** Called when the last pending change gets a decision. */ onComplete?: (decisions: Record) => void; /** Show the decisions without Undo, e.g. once they've been sent. */ readOnly?: boolean; title?: string; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const SMALL = `inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-[12px] font-medium transition-colors ${FOCUS}`; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } function DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } type Op = { kind: "same" | "add" | "remove"; text: string }; /** Longest-common-subsequence diff over tokens; falls back to a full replace for very large inputs. */ function diff(a: string[], b: string[]): Op[] { if (a.length * b.length > 250_000) { return [...a.map((text) => ({ kind: "remove" as const, text })), ...b.map((text) => ({ kind: "add" as const, text }))]; } const dp = Array.from({ length: a.length + 1 }, () => new Uint32Array(b.length + 1)); for (let i = a.length - 1; i >= 0; i--) for (let j = b.length - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]); const ops: Op[] = []; let i = 0; let j = 0; while (i < a.length && j < b.length) { if (a[i] === b[j]) { ops.push({ kind: "same", text: a[i] }); i++; j++; } else if (dp[i + 1][j] >= dp[i][j + 1]) ops.push({ kind: "remove", text: a[i++] }); else ops.push({ kind: "add", text: b[j++] }); } while (i < a.length) ops.push({ kind: "remove", text: a[i++] }); while (j < b.length) ops.push({ kind: "add", text: b[j++] }); return ops; } type Run = { kind: "same"; tokens: string[] } | { kind: "change"; removed: string[]; added: string[] }; /** Group ops into unchanged runs and change runs (everything removed, then everything added). */ function toRuns(ops: Op[]): Run[] { const runs: Run[] = []; for (const op of ops) { const last = runs[runs.length - 1]; if (op.kind === "same") { if (last?.kind === "same") last.tokens.push(op.text); else runs.push({ kind: "same", tokens: [op.text] }); } else { let run = last; if (run?.kind !== "change") { run = { kind: "change", removed: [], added: [] }; runs.push(run); } (op.kind === "remove" ? run.removed : run.added).push(op.text); } } return runs; } /** Fold short unchanged bits ("to", a space) between two changes into them, so a rewrite reads as one phrase. */ function absorbSmall(runs: Run[]): Run[] { const out: Run[] = []; for (let i = 0; i < runs.length; i++) { const run = runs[i]; const prev = out[out.length - 1]; const next = runs[i + 1]; if (run.kind === "same" && prev?.kind === "change" && next?.kind === "change" && run.tokens.join("").trim().length <= 3) { prev.removed.push(...run.tokens, ...next.removed); prev.added.push(...run.tokens, ...next.added); i++; } else if (run.kind === "change" && prev?.kind === "change") { prev.removed.push(...run.removed); prev.added.push(...run.added); } else out.push(run.kind === "same" ? { kind: "same", tokens: [...run.tokens] } : { kind: "change", removed: [...run.removed], added: [...run.added] }); } return out; } const words = (s: string) => s.split(/(\s+|[.,;:!?()"“”])/).filter(Boolean); const lines = (s: string) => s.split("\n"); /** Words that leave shrink out of the sentence (their font size eases to nothing, so the line closes up around them). */ const gone = (out: boolean, reduced: boolean): React.CSSProperties => ({ fontSize: out ? 0 : undefined, opacity: out ? 0 : 1, transition: reduced ? "none" : `font-size 460ms ${MORPH}, opacity 220ms ${MORPH}, background-color 300ms, color 300ms, text-decoration-color 300ms, margin 460ms ${MORPH}`, }); function InlineDiff({ before, after, decision, reduced }: { before: string; after: string; decision: ChangeDecision; reduced: boolean }) { const runs = React.useMemo(() => absorbSmall(toRuns(diff(words(before), words(after)))), [before, after]); const pending = decision === "pending"; return (

{runs.map((run, i) => run.kind === "same" ? ( {run.tokens.join("")} ) : ( {run.removed.length > 0 && ( ~~{run.removed.join("")}~~ )} {run.added.length > 0 && ( 0 ? 2 : 0 }} > {run.added.join("")} )} ) )}

); } function LineDiff({ before, after, decision, reduced }: { before: string; after: string; decision: ChangeDecision; reduced: boolean }) { const ops = React.useMemo( () => toRuns(diff(lines(before), lines(after))).flatMap((run): Op[] => run.kind === "same" ? run.tokens.map((text) => ({ kind: "same", text })) : [...run.removed.map((text) => ({ kind: "remove" as const, text })), ...run.added.map((text) => ({ kind: "add" as const, text }))] ), [before, after] ); const pending = decision === "pending"; return (

      {ops.map((op, i) => {
        // Lines that don't survive the decision fold shut; the ones that do lose their tint and gutter.
        const out = (op.kind === "remove" && decision === "accepted") || (op.kind === "add" && decision === "rejected");
        const tint = pending && op.kind !== "same";
        return (
          
            
              
                {op.kind === "add" ? "+" : op.kind === "remove" ? "−" : " "}
              
              {op.text || " "}
              {pending && {op.kind === "add" ? " (added)" : op.kind === "remove" ? " (removed)" : ""}}
            
          
        );
      })}

); } export function DiffReview({ changes, mode = "words", decisions, defaultDecisions = {}, onDecisionsChange, onDecisionChange, onComplete, readOnly = false, title = "Suggested changes", className = "", ...props }: DiffReviewProps) { const reduced = useReducedMotion(); const [own, setOwn] = React.useState>(defaultDecisions); const current = decisions ?? own; // Where focus goes after a decision: the button that just folded away hands it to the one that took its place. const buttons = React.useRef(new Map()); const focusNext = React.useRef(null); React.useLayoutEffect(() => { if (!focusNext.current) return; buttons.current.get(focusNext.current)?.focus({ preventScroll: true }); focusNext.current = null; }); const decisionOf = (id: string) => current[id] ?? "pending"; const commit = (ids: string[], decision: ChangeDecision) => { const next = { ...current, ...Object.fromEntries(ids.map((id) => [id, decision])) }; if (decisions === undefined) setOwn(next); onDecisionsChange?.(next); ids.forEach((id) => onDecisionChange?.(id, decision)); if (decision !== "pending" && changes.every((c) => (next[c.id] ?? "pending") !== "pending")) onComplete?.(next); }; const decide = (id: string, decision: ChangeDecision) => { const hadFocus = [...buttons.current.entries()].some(([key, el]) => key.startsWith(`${id}:`) && el === document.activeElement); if (hadFocus) focusNext.current = decision === "pending" ? `${id}:${decisionOf(id) === "rejected" ? "reject" : "accept"}` : `${id}:undo`; commit([id], decision); }; const decideAll = (decision: ChangeDecision) => commit(changes.filter((c) => decisionOf(c.id) === "pending").map((c) => c.id), decision); const pending = changes.filter((c) => decisionOf(c.id) === "pending").length; const accepted = changes.filter((c) => decisionOf(c.id) === "accepted").length; return (

{title} {/* "3 to review" → "2 of 3 accepted": the count rolls and the words morph. */} {pending > 0 ? `${pending} to review` : `${accepted} of ${changes.length} accepted`}

{!readOnly && ( 1} reduced={reduced}> )}

{change.label ?? "Change"} {/* The button you press becomes the answer: "Accept" morphs to "Accepted" while the other folds away. */} {!readOnly && ( )}

{mode === "lines" ? ( ) : ( )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/diff-review.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]