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:T334f,"use client"; import { forwardRef, useMemo, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useInertAttribute } from "../../internals/dom/use-inert-attribute"; import { useFancyId } from "../../internals/use-id"; import { parseUnifiedDiff, type DiffFile, type DiffLine } from "../../internals/diff"; import { useSoundCue } from "../../sound/use-sound"; import "./code-diff.css"; /** * Props for CodeDiff */ export interface CodeDiffProps { /** * Raw unified diff text — whatever `git diff` printed. Parsed on every * change, so a patch that is still arriving can be handed over as it grows. */ diff: string; /** Header label when the patch names no file, or names exactly one. */ filename?: string; /** Whether to show the old/new line-number gutters. */ lineNumbers?: boolean; /** * Whether the bodies are folded away. A master switch: it seeds every file, * and flipping it re-folds or re-opens the whole patch. The React * counterpart of the Svelte source's bindable prop — pair it with * `onCollapsedChange` to observe the aggregate the way `bind:collapsed` * would report it. */ collapsed?: boolean; /** * Reports the whole-patch fold state after a header click: true only once * nothing is left open. */ onCollapsedChange?: (collapsed: boolean) => void; /** Lines shown before the rest hide behind a "show more" button. 0 shows all. */ maxLines?: number; /** Whether long lines wrap instead of scrolling sideways. */ wrap?: boolean; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } type Row = { kind: "sep"; text: string } | { kind: "line"; line: DiffLine }; interface FileView { file: DiffFile; name: string; rows: Row[]; /** Lines the clamp is currently withholding; 0 when everything is on screen. */ hidden: number; } /** Glyphs, not markers: they are never copied, so they can be the prettier pair. */ const GLYPH = { add: "+", del: "−", context: " ", meta: " " } as const; export const CodeDiff = forwardRef(function CodeDiff( { diff, filename, lineNumbers = true, collapsed = false, onCollapsedChange, maxLines = 0, wrap = false, className, sound = false, }, ref ) { const uid = useFancyId(); const playCue = useSoundCue(sound); const files = useMemo(() => parseUnifiedDiff(diff), [diff]); // Per-file fold and clamp state, keyed by file name rather than position: a // patch that arrives with a different set of files must not hand file 0's // folded state to whatever now happens to sit first. `collapsed` is the // master switch: it seeds every file and wipes the overrides whenever the // consumer flips it, so driving the prop still folds the whole patch while // a click still folds one file. const [folded, setFolded] = useState>({}); const [unclamped, setUnclamped] = useState>({}); // The live fold seed — the counterpart of the Svelte source's local // `collapsed`, which a header click writes back to. The prop re-seeds it // whenever the consumer changes it; a click updates it directly. const [collapsedValue, setCollapsedValue] = useState(collapsed); const [lastProp, setLastProp] = useState(collapsed); // Resynced during render, not from an effect: what the switch decides is // visible on the very first painted frame, so the seed and the override // wipe have to land in the same commit the flip produced — the Svelte // source reads `collapsed` straight out of `isFolded` and defers only the // wipe to a pre-paint `$effect`. React restarts the render before // committing, so the pass below never reaches the screen. if (lastProp !== collapsed) { setLastProp(collapsed); // Only a flip that actually moves the seed wipes the per-file // overrides: a value the consumer merely echoed back from // `onCollapsedChange` is the state this component already produced, // and folding one file of a two-file patch must not unfold the other. if (collapsedValue !== collapsed) { setCollapsedValue(collapsed); setFolded({}); } } function nameOf(file: DiffFile, count: number): string { if (filename !== undefined && count <= 1) return filename; if ( file.isRename && file.oldPath !== null && file.newPath !== null && file.oldPath !== file.newPath ) { return `${file.oldPath} → ${file.newPath}`; } return file.newPath ?? file.oldPath ?? ""; } // Names alone would let a reused path carry state across two unrelated // patches, so the whole list is watched: when it changes, both records start // empty and every file is back under `collapsed`. // A name on its own cannot tell two patches apart when both touch the same // path, so a replacement would inherit the fold and clamp state of the patch // before it. The first hunk's declared start pins that down, and it is fixed // the moment that header parses — a patch still streaming in only ever gains // lines and later hunks, so growth in place still reads as the same file. // // Memoised for the reason the Svelte source keeps this in `$derived`: a // parent that re-renders per streamed token would otherwise walk the whole // file list again for a patch that did not move. const signature = useMemo( () => files .map((file) => { const anchor = file.hunks[0]; return `${nameOf(file, files.length)}:${anchor?.oldStart ?? ""}:${anchor?.newStart ?? ""}`; }) .join("\n"), // `nameOf` is re-created every render but reads nothing beyond `filename`, // so the two inputs below are the whole dependency set. [files, filename] ); // Seeded with the first render's value on purpose: this is the "what did we // render last" marker, and it is the comparison below — not the seeding — // that is meant to notice a change. const [lastSignature, setLastSignature] = useState(signature); // Same render-phase resync as the master switch above, and for the same // reason: a replacement patch must not paint one frame with the previous // patch's fold and clamp overrides on top of the new content. if (lastSignature !== signature) { setLastSignature(signature); setFolded({}); setUnclamped({}); } function isFolded(name: string): boolean { return folded[name] ?? collapsedValue; } const views: FileView[] = useMemo( () => files.map((file) => { const name = nameOf(file, files.length); const rows: Row[] = []; let total = 0; for (const hunk of file.hunks) { if (hunk.header !== "") rows.push({ kind: "sep", text: hunk.header }); for (const line of hunk.lines) { rows.push({ kind: "line", line }); total++; } } if (maxLines <= 0 || unclamped[name] || total <= maxLines) { return { file, name, rows, hidden: 0 }; } // Cut on a line, never on a hunk header, so the clamp never leaves a // dangling `@@` with nothing under it. const shown: Row[] = []; let seen = 0; for (const row of rows) { shown.push(row); if (row.kind !== "line") continue; seen++; if (seen === maxLines) break; } return { file, name, rows: shown, hidden: total - maxLines }; }), // Same as above: `filename` stands in for `nameOf`. [files, filename, maxLines, unclamped] ); function toggle(name: string) { // Captured before the write, so the cue that plays matches the state this // click is actually producing — the resyncs above that also wipe `folded` // (a collapsed-prop flip, a patch-signature change) never run through this // function, so they can never trigger it either. const next = !isFolded(name); const nextFolded = { ...folded, [name]: next }; setFolded(nextFolded); playCue(next ? "close" : "open"); // `collapsed` reports the whole patch, so it is true only once nothing is left open. const all = views.every((view) => nextFolded[view.name] ?? collapsedValue); setCollapsedValue(all); onCollapsedChange?.(all); } return (

{views.map((view, index) => { const open = !isFolded(view.name); const headerId = `${uid}-${index}-header`; const bodyId = `${uid}-${index}-body`; return (

{view.rows.map((row, rowIndex) => row.kind === "sep" ? (

{row.text}

) : (

{lineNumbers ? ( <> ) : null} {/* The glyph stays out of the reading flow — it is punctuation, and it must not be copied — so the verdict a sighted reader takes from the tint and the +/− is spoken here instead. Unselectable for the same copy hygiene the gutters follow. */} {row.line.type === "add" || row.line.type === "del" ? ( {row.line.type === "add" ? "Added line" : "Removed line"} ) : null} {row.line.text}

) )}

{view.hidden > 0 ? ( ) : null}

); })}

); }); /** * One file's body region, extracted for the single reason that its inertness is * a hook: `inert` cannot be written as a JSX prop across this package's peer * range (React 18 drops `inert={true}`, React 19 rejects `inert=""`), so it goes * to the node imperatively — and a hook cannot be called inside the `views.map` * above. The markup is unchanged. */ function DiffBody({ id, labelledBy, open, children, }: { id: string; labelledBy: string; open: boolean; children: ReactNode; }) { const inertRef = useInertAttribute(!open); return (

{children}

); } 53:Tf3d,/* * `.fancy-code-diff` is a PORT-ADDED anchor (PORTING.md, styling rule 2). The * source's