@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/diff-view.js

@@ -0,0 +1,675 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { getFiletypeFromFileName, getSharedHighlighter, getSingularPatch, parseDiffFromFile, } from "@pierre/diffs";
+import { FileDiff, WorkerPoolContext } from "@pierre/diffs/react";
+import { getOrCreateWorkerPoolSingleton, terminateWorkerPoolSingleton, } from "@pierre/diffs/worker";
+import { ArrowRight, Check, Columns2, FileCode, FoldVertical, MessageCircleQuestion, MessageSquarePlus, Rows2, Undo2, UnfoldVertical, WrapText, X, } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { createContext, use, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { normalizeTheme } from "shiki/core";
+import { useFormatters, useUiStrings } from "../i18n/provider.js";
+import { richText } from "../i18n/rich.js";
+import { cn } from "../lib/cn.js";
+import { isComposing, matchesShortcut } from "../lib/keys.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { fade } from "../lib/motion.js";
+import { getDiffStats, getHunkExcerpt, normalizePatch } from "../lib/patch.js";
+import { hashString } from "../lib/shiki.js";
+import { NIB_SHIKI_THEMES, nibDarkTheme, nibLightTheme } from "../lib/shiki-themes.js";
+import { KIT_SHORTCUTS, useShortcut } from "../lib/shortcut-context.js";
+import { Avatar } from "./avatar.js";
+import { Button, IconButton } from "./button.js";
+import { CodeBlock } from "./code-block.js";
+import { CopyButton } from "./copy-button.js";
+import { DisclosureChevron } from "./disclosure.js";
+import { fieldChrome } from "./input.js";
+import { Shortcut } from "./kbd.js";
+import { PathText } from "./path-text.js";
+import { Textarea } from "./textarea.js";
+import { Tooltip } from "./tooltip.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Theme wiring                                                                               */
+/* ------------------------------------------------------------------------------------------ */
+/**
+ * Seed kit-light / kit-dark into @pierre/diffs' shared highlighter. `registerCustomTheme` would be
+ * the documented route, but with the pinned @pierre/theming@1.0.1 its resolver ignores the
+ * `fallbackLoader` that custom/bundled themes go through, so they never resolve. Seeding the
+ * already-normalized themes into the backend's resolver sidesteps that and needs no network.
+ */
+let themesLoading = null;
+let themesSeeded = false;
+const toDiffsTheme = (theme) => {
+    const textmate = normalizeTheme(theme);
+    return {
+        name: textmate.name,
+        type: textmate.type,
+        fg: textmate.fg,
+        bg: textmate.bg,
+        ...(textmate.colors && { colors: textmate.colors }),
+        textmate,
+    };
+};
+async function seedDiffThemes() {
+    const highlighter = await getSharedHighlighter({ themes: [], langs: [], preferredHighlighter: "shiki-js" });
+    highlighter.themeResolver.seedResolvedThemes([
+        [NIB_SHIKI_THEMES.light, toDiffsTheme(nibLightTheme)],
+        [NIB_SHIKI_THEMES.dark, toDiffsTheme(nibDarkTheme)],
+    ]);
+    themesSeeded = true;
+}
+function ensureDiffThemes() {
+    themesLoading ??= seedDiffThemes().catch((error) => {
+        themesLoading = null;
+        throw error;
+    });
+    return themesLoading;
+}
+/** Languages a diff needs: its explicit `lang`, else inferred from the old and new file names. */
+function diffLanguages(diff) {
+    if (diff.lang != null)
+        return [diff.lang];
+    const names = [diff.prevName ?? diff.name, diff.name];
+    return [...new Set(names.map((name) => getFiletypeFromFileName(name)))];
+}
+const loadedLanguageKeys = new Set();
+/**
+ * False until the diff's grammar is loaded. @pierre/diffs renders plain text when a language is
+ * still loading and its async re-highlight can be dropped on first mount, so we mount only once the
+ * grammar is in the shared highlighter — the first paint is already highlighted.
+ */
+function useDiffLanguagesReady(diff, themesReady) {
+    const langs = diff ? diffLanguages(diff) : [];
+    const key = langs.join(",");
+    const [readyKey, setReadyKey] = useState(() => (loadedLanguageKeys.has(key) ? key : null));
+    useEffect(() => {
+        if (!themesReady || diff === null || readyKey === key)
+            return undefined;
+        if (loadedLanguageKeys.has(key)) {
+            setReadyKey(key);
+            return undefined;
+        }
+        let cancelled = false;
+        const load = async () => {
+            try {
+                await getSharedHighlighter({
+                    themes: [],
+                    langs: diffLanguages(diff),
+                    preferredHighlighter: "shiki-js",
+                });
+            }
+            catch {
+                // Unknown grammar: render as plain text rather than never.
+            }
+            loadedLanguageKeys.add(key);
+            if (!cancelled)
+                setReadyKey(key);
+        };
+        void load();
+        return () => {
+            cancelled = true;
+        };
+    }, [themesReady, diff, key, readyKey]);
+    return readyKey === key;
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Off-main-thread highlighting                                                               */
+/* ------------------------------------------------------------------------------------------ */
+/**
+ * Inside a <DiffHighlighterProvider>: whether its worker pool is still on its way, and how a diff
+ * asks for it (the pool starts with the first diff, not with the page).
+ */
+const DiffPoolContext = createContext({
+    pending: false,
+    request: () => undefined,
+});
+/** Highlight options the pool shares with every <DiffView> (they must match for cache hits). */
+const POOL_HIGHLIGHT_OPTIONS = {
+    theme: NIB_SHIKI_THEMES,
+    lineDiffType: "word-alt",
+    preferredHighlighter: "shiki-js",
+};
+/**
+ * Moves every descendant <DiffView>'s syntax highlighting into @pierre/diffs' worker pool: a diff
+ * first paints as plain text (same rows, same height), then swaps in its highlighted lines when
+ * the worker answers, and a content-keyed LRU makes remounts (a virtualized row scrolling back
+ * into view) highlighted on their first paint. Without this provider diffs highlight on the main
+ * thread while mounting. Mount it once, near the root; it owns the pool's lifetime. The workers
+ * start when the first diff mounts, so pages without diffs never download the highlighter.
+ */
+export function DiffHighlighterProvider({ workerFactory, children }) {
+    const [config] = useState(() => ({ workerFactory }));
+    const [pool, setPool] = useState(undefined);
+    const [failed, setFailed] = useState(false);
+    const [requested, setRequested] = useState(false);
+    const request = useCallback(() => setRequested(true), []);
+    useEffect(() => {
+        if (!requested)
+            return undefined;
+        let cancelled = false;
+        const start = async () => {
+            try {
+                // The pool resolves its themes when it starts; ours must be seeded into the resolver first.
+                await ensureDiffThemes();
+            }
+            catch {
+                if (!cancelled)
+                    setFailed(true);
+                return;
+            }
+            if (cancelled)
+                return;
+            setPool(getOrCreateWorkerPoolSingleton({
+                poolOptions: {
+                    workerFactory: config.workerFactory,
+                    // Two workers; 200 highlighted diffs kept for remounts, least recently used evicted.
+                    poolSize: 2,
+                    totalASTLRUCacheSize: 200,
+                },
+                highlighterOptions: POOL_HIGHLIGHT_OPTIONS,
+            }));
+        };
+        void start();
+        return () => {
+            cancelled = true;
+            setPool(undefined);
+            terminateWorkerPoolSingleton();
+        };
+    }, [config, requested]);
+    const pending = pool === undefined && !failed && typeof Worker !== "undefined";
+    const value = useMemo(() => ({ pending, request }), [pending, request]);
+    // Whether highlights are still on their way: the pool starting, or tasks queued or running. Failed
+    // workers send none; those diffs stay plain.
+    const [working, setWorking] = useState(false);
+    useEffect(() => {
+        if (pool === undefined)
+            return undefined;
+        const update = (stats) => setWorking(!stats.workersFailed &&
+            (stats.managerState !== "initialized" ||
+                stats.busyWorkers + stats.queuedTasks + stats.activeTasks > 0));
+        update(pool.getStats());
+        return pool.subscribeToStatChanges(update);
+    }, [pool]);
+    return (_jsx(WorkerPoolContext, { value: pool, children: _jsx(DiffPoolContext, { value: value, children: _jsx("div", { "data-slot": "diff-highlighter", "data-highlighting": (requested && pending) || working || undefined, className: "contents", children: children }) }) }));
+}
+/**
+ * Content-derived `cacheKey` (two 53-bit hashes + length) for the pool's highlight cache, so equal
+ * diffs share one highlight across mounts and changed content never reuses a stale one.
+ */
+export function diffCacheKey(...parts) {
+    const text = parts.map((part) => part ?? "").join("\u0000");
+    return `diff:${hashString(text).toString(36)}:${hashString(text, 1).toString(36)}:${text.length}`;
+}
+/** False until the diff highlighter knows our themes; rendering earlier would throw. */
+function useDiffThemesReady() {
+    const [ready, setReady] = useState(themesSeeded);
+    useEffect(() => {
+        if (ready)
+            return undefined;
+        let cancelled = false;
+        const wait = async () => {
+            try {
+                await ensureDiffThemes();
+                if (!cancelled)
+                    setReady(true);
+            }
+            catch {
+                // Highlighter failed to boot; the body keeps its placeholder.
+            }
+        };
+        void wait();
+        return () => {
+            cancelled = true;
+        };
+    }, [ready]);
+    return ready;
+}
+/**
+ * @pierre/diffs renders into a shadow root and is themed through inherited custom properties.
+ * Inline host styles outrank the shadow `:host` rules, so this maps the kit's tokens onto its knobs.
+ * Line backgrounds are mix *targets* (the library mixes 12% light / 20% dark of them into the
+ * surface), so these are pre-scaled to land on `--diff-add-bg` / `--diff-remove-bg`.
+ */
+const HOST_STYLE = {
+    // Follow the page's resolved scheme ([data-theme]) instead of the OS preference.
+    colorScheme: "inherit",
+    // Code reads left to right in every language: the gutters, the split's sides and the scroll.
+    direction: "ltr",
+    unicodeBidi: "isolate",
+    "--diffs-bg": "var(--bg-inset)",
+    "--diffs-fg": "var(--fg)",
+    "--diffs-font-family": "var(--font-mono)",
+    "--diffs-header-font-family": "var(--font-sans)",
+    "--diffs-font-size": "12.5px",
+    "--diffs-line-height": "20px",
+    "--diffs-font-features": '"liga" 0, "calt" 0',
+    "--diffs-gap-block": "10px",
+    "--diffs-addition-color-override": "var(--green-9)",
+    "--diffs-deletion-color-override": "var(--red-9)",
+    "--diffs-modified-color-override": "var(--blue-9)",
+    "--diffs-bg-addition-override": "light-dark(color-mix(in oklab, var(--green-9) 75%, var(--bg-inset)), color-mix(in oklab, var(--green-9) 55%, var(--bg-inset)))",
+    "--diffs-bg-deletion-override": "light-dark(color-mix(in oklab, var(--red-9) 67%, var(--bg-inset)), color-mix(in oklab, var(--red-9) 50%, var(--bg-inset)))",
+    "--diffs-bg-addition-emphasis-override": "var(--diff-add-word)",
+    "--diffs-bg-deletion-emphasis-override": "var(--diff-remove-word)",
+    "--diffs-fg-number-override": "var(--fg-subtle)",
+    "--diffs-fg-number-addition-override": "var(--diff-add-fg)",
+    "--diffs-fg-number-deletion-override": "var(--diff-remove-fg)",
+    "--diffs-bg-separator-override": "var(--bg-muted)",
+    "--diffs-bg-buffer-override": "var(--bg-subtle)",
+};
+/**
+ * Shadow-root CSS (the library's `unsafe` layer wins over its own). Collapsed regions read
+ * "⋯ 42 unmodified lines" and stay calm on hover; the gutter "+" is neutral ink, not accent blue.
+ */
+const UNSAFE_CSS = `
+[data-unmodified-lines]::before { content: "\\22EF"; margin-inline-end: 1ch; }
+[data-separator-content]:hover { text-decoration: none; color: var(--fg-muted); }
+[data-utility-button] { background-color: var(--fg); color: var(--bg); border-radius: 5px; }
+[data-code]:focus-visible, [data-expand-button]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+`;
+function expandDirection(button) {
+    if (button.hasAttribute("data-expand-up"))
+        return "up";
+    if (button.hasAttribute("data-expand-down"))
+        return "down";
+    return "both";
+}
+/** Enter and Space press an expand button, as they would a `<button>`. */
+function pressExpandButton(event) {
+    if (!(event instanceof globalThis.KeyboardEvent) || (event.key !== "Enter" && event.key !== " "))
+        return;
+    const { target } = event;
+    if (!(target instanceof HTMLElement) || !target.hasAttribute("data-expand-button"))
+        return;
+    event.preventDefault();
+    target.click();
+}
+/**
+ * @pierre/diffs draws two things a keyboard can't reach (WCAG 2.1.1, 4.1.2): the scroller of long
+ * lines (`[data-code]`, out of the tab order) and the expand buttons between hunks (`role=button`
+ * divs with no name and no tab stop). After each render the scroller gets a tab stop while lines
+ * scroll rather than wrap, as Shiki gives its `<pre>` one, and each expand button a tab stop, a name
+ * and Enter/Space (the library listens for clicks).
+ */
+function keyboardReach(container, labels, scrolls) {
+    const root = container.shadowRoot ?? container;
+    if (scrolls) {
+        for (const code of root.querySelectorAll("[data-code]"))
+            code.tabIndex = 0;
+    }
+    for (const button of root.querySelectorAll("[data-expand-button]")) {
+        button.tabIndex = 0;
+        if (!button.hasAttribute("data-expand-all-button"))
+            button.ariaLabel = labels[expandDirection(button)];
+    }
+    // Listening twice is a no-op: the same function is added once per root.
+    root.addEventListener("keydown", pressExpandButton);
+}
+const toContents = (file) => file ? { name: file.name, contents: file.contents, ...(file.lang ? { lang: file.lang } : {}) } : null;
+const toFile = (name, contents, lang) => name === undefined || contents === undefined ? null : { name, contents, ...(lang ? { lang } : {}) };
+function parseSource(source) {
+    try {
+        if (source.patch !== undefined)
+            return getSingularPatch(normalizePatch(source.patch));
+        if (!source.oldFile && !source.newFile)
+            return null;
+        return parseDiffFromFile(toContents(source.oldFile), toContents(source.newFile));
+    }
+    catch {
+        return null;
+    }
+}
+const toAnnotationSide = (side) => side === "old" ? "deletions" : "additions";
+const toCommentSide = (side) => side === "deletions" ? "old" : "new";
+/**
+ * Where a hunk's toolbar sits: under the context line right before its first change (so it heads
+ * the change), above the file for a change on line 1, else under the hunk's last line.
+ */
+function hunkAnchor(hunk) {
+    const side = hunk.additionCount > 0 ? "additions" : "deletions";
+    const start = side === "additions" ? hunk.additionStart : hunk.deletionStart;
+    const first = hunk.hunkContent[0];
+    const lead = first?.type === "context" ? first.lines : 0;
+    if (lead > 0)
+        return { side, line: start + lead - 1 };
+    if (start <= 1)
+        return { side, line: 0 };
+    const count = side === "additions" ? hunk.additionCount : hunk.deletionCount;
+    return { side, line: start + count - 1 };
+}
+/** Last line of a hunk's first change block: where "Comment" opens the comment field. */
+function hunkCommentLine(hunk) {
+    let addition = hunk.additionStart;
+    let deletion = hunk.deletionStart;
+    for (const block of hunk.hunkContent) {
+        if (block.type === "context") {
+            addition += block.lines;
+            deletion += block.lines;
+            continue;
+        }
+        return block.additions > 0
+            ? { side: "additions", line: addition + block.additions - 1 }
+            : { side: "deletions", line: deletion + block.deletions - 1 };
+    }
+    return { side: "additions", line: Math.max(1, hunk.additionStart) };
+}
+/** Unchanged lines hidden between / around hunks (only meaningful for full-file diffs). */
+function hasHiddenLines(diff) {
+    if (diff.isPartial)
+        return false;
+    if (diff.hunks.some((hunk) => hunk.collapsedBefore > 0))
+        return true;
+    const last = diff.hunks.at(-1);
+    if (!last)
+        return false;
+    const trailing = last.additionCount > 0
+        ? diff.additionLines.length - (last.additionStart + last.additionCount - 1)
+        : diff.deletionLines.length - (last.deletionStart + last.deletionCount - 1);
+    return trailing > 0;
+}
+const lineKey = (side, line) => `${side}:${line}`;
+/**
+ * Annotations live inside @pierre/diffs' horizontally scrolling <code> (in its shadow root) and
+ * would otherwise be as wide as the longest line: focusing a right-aligned control then scrolls
+ * the code sideways. Walk out through the slot to that scroller and pin the annotation to its
+ * visible width (the library's wrapper is already sticky at left: 0).
+ */
+function findScroller(element) {
+    let node = element.assignedSlot ?? element.parentElement;
+    while (node !== null) {
+        if (node instanceof HTMLElement) {
+            const overflowX = getComputedStyle(node).overflowX;
+            if (overflowX === "auto" || overflowX === "scroll")
+                return node;
+        }
+        const root = node.getRootNode();
+        node = node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+    }
+    return null;
+}
+function PinnedAnnotation({ children }) {
+    // The diff is left to right; the review chrome and comments in it read in the person's direction.
+    const direction = useDirection();
+    const [width, setWidth] = useState(undefined);
+    const [element, setElement] = useState(null);
+    useEffect(() => {
+        if (element === null)
+            return undefined;
+        // The slot wrapper is the light-DOM parent; the scroller is found through its assigned slot.
+        const host = element.parentElement ?? element;
+        const scroller = findScroller(host);
+        if (scroller === null || typeof ResizeObserver === "undefined")
+            return undefined;
+        const update = () => setWidth(scroller.clientWidth);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(scroller);
+        return () => observer.disconnect();
+    }, [element]);
+    return (_jsx("div", { ref: setElement, dir: direction, "data-slot": "diff-annotation", className: "flex flex-col whitespace-normal font-sans text-fg", style: width === undefined ? undefined : { width, maxWidth: width }, children: children }));
+}
+/** `true` while the element is narrower than `min` px (0 = never; unmeasured counts as wide). */
+function useNarrow(element, min) {
+    const [narrow, setNarrow] = useState(false);
+    useEffect(() => {
+        if (element === null || min <= 0 || typeof ResizeObserver === "undefined") {
+            setNarrow(false);
+            return undefined;
+        }
+        const update = (width) => setNarrow(width > 0 && width < min);
+        update(element.getBoundingClientRect().width);
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                update(entry.contentRect.width);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element, min]);
+    return narrow;
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+/**
+ * Layout mode. An uncontrolled split view falls back to unified while the container is narrower
+ * than `splitMinWidth`; an explicit pick (the toggle, or a controlled `mode`) always wins.
+ */
+function useDiffMode({ root, modeProp, defaultMode, onModeChange, splitMinWidth, }) {
+    const narrow = useNarrow(root, splitMinWidth);
+    const [chosenMode, setChosenMode] = useState(null);
+    const preferred = chosenMode ?? defaultMode;
+    const autoUnified = modeProp === undefined && chosenMode === null && preferred === "split" && narrow;
+    const mode = modeProp ?? (autoUnified ? "unified" : preferred);
+    const setMode = (next) => {
+        setChosenMode(next);
+        onModeChange?.(next);
+    };
+    return { mode, autoUnified, setMode };
+}
+/** One annotation per line (the library slots by side + line), merging toolbar, comments and draft. */
+function useDiffAnnotations(fileDiff, hunkToolbar, comments, draftSide, draftLine, notes) {
+    return useMemo(() => {
+        if (fileDiff === null)
+            return [];
+        const byLine = new Map();
+        const at = (side, line) => {
+            const existing = byLine.get(lineKey(side, line));
+            if (existing)
+                return existing.metadata;
+            const metadata = { hunk: null, notes: [], comments: [], draft: false };
+            byLine.set(lineKey(side, line), { side, lineNumber: line, metadata });
+            return metadata;
+        };
+        if (hunkToolbar) {
+            fileDiff.hunks.forEach((hunk, index) => {
+                const anchor = hunkAnchor(hunk);
+                at(anchor.side, anchor.line).hunk = index;
+            });
+        }
+        for (const note of notes ?? []) {
+            at(toAnnotationSide(note.side), note.line).notes.push(note);
+        }
+        for (const comment of comments ?? []) {
+            at(toAnnotationSide(comment.side), comment.line).comments.push(comment);
+        }
+        if (draftSide !== undefined && draftLine !== undefined)
+            at(draftSide, draftLine).draft = true;
+        return [...byLine.values()];
+    }, [fileDiff, hunkToolbar, comments, draftSide, draftLine, notes]);
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Pieces                                                                                     */
+/* ------------------------------------------------------------------------------------------ */
+/**
+ * `+12 −3`: lines added and removed, in the diff's colours with glyphs (never colour alone), the
+ * figures in the reader's digits, spoken as words so they are never read as arithmetic.
+ */
+export function DiffStat({ additions, deletions, className }) {
+    const strings = useUiStrings().diffView;
+    const f = useFormatters();
+    return (_jsxs("span", { "data-slot": "diff-stat", className: cn("inline-flex items-center gap-1.5 font-mono text-xs tabular", className), children: [_jsx("span", { className: "sr-only", children: strings.stats({ additions, deletions }) }), _jsxs("span", { "aria-hidden": true, className: "text-diff-add-fg", children: ["+", f.number(additions)] }), _jsxs("span", { "aria-hidden": true, className: "text-diff-remove-fg", children: ["\u2212", f.number(deletions)] })] }));
+}
+/** `a/src/x.ts` / `b/src/x.ts` (git patch sides) → `src/x.ts`. */
+const stripGitPrefix = (name) => name.replace(/^[ab]\//, "");
+const CHANGE_KIND = {
+    new: "new",
+    deleted: "deleted",
+    "rename-pure": "renamed",
+    "rename-changed": "renamed",
+};
+export function DiffView(props) {
+    const { oldFile, newFile, patch, mode: modeProp, defaultMode = "unified", onModeChange, splitMinWidth = 900, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, filename, wrap: wrapProp, defaultWrap = false, onWrapChange, showWrapToggle = true, maxHeight, showModeToggle = true, actions, onAcceptHunk, onRevertHunk, onAskAboutHunk, hunkStates, comments, onAddComment, onRemoveComment, commentPlaceholder, lineNotes, ref, className, ...rest } = props;
+    const strings = useUiStrings().diffView;
+    const expandLabels = strings.expandLines;
+    const [root, setRoot] = useState(null);
+    const rootRef = useCallback((node) => {
+        setRoot(node);
+        assignRef(ref, node);
+    }, [ref]);
+    const { mode, autoUnified, setMode } = useDiffMode({
+        root,
+        modeProp,
+        defaultMode,
+        onModeChange,
+        splitMinWidth,
+    });
+    const [wrapState, setWrapState] = useState(defaultWrap);
+    const wrap = wrapProp ?? wrapState;
+    const setWrap = (next) => {
+        setWrapState(next);
+        onWrapChange?.(next);
+    };
+    const [expandAll, setExpandAll] = useState(false);
+    const [collapsedState, setCollapsedState] = useState(defaultCollapsed);
+    const collapsed = collapsedProp ?? collapsedState;
+    const toggleCollapsed = () => {
+        setCollapsedState(!collapsed);
+        onCollapsedChange?.(!collapsed);
+    };
+    // Key the parse on primitives so inline `{ name, contents }` literals don't re-diff every render.
+    const [oldName, oldContents, oldLang] = [oldFile?.name, oldFile?.contents, oldFile?.lang];
+    const [newName, newContents, newLang] = [newFile?.name, newFile?.contents, newFile?.lang];
+    const fileDiff = useMemo(() => {
+        const parsed = patch === undefined
+            ? parseSource({
+                oldFile: toFile(oldName, oldContents, oldLang),
+                newFile: toFile(newName, newContents, newLang),
+            })
+            : parseSource({ patch });
+        if (parsed !== null) {
+            parsed.cacheKey =
+                patch === undefined
+                    ? diffCacheKey(oldName, oldContents, oldLang, newName, newContents, newLang)
+                    : diffCacheKey(patch);
+        }
+        return parsed;
+    }, [patch, oldName, oldContents, oldLang, newName, newContents, newLang]);
+    const commenting = onAddComment !== undefined;
+    const hunkToolbar = commenting || onAcceptHunk !== undefined || onRevertHunk !== undefined || onAskAboutHunk !== undefined;
+    const [draft, setDraft] = useState(null);
+    const openDraft = useCallback((side, line) => {
+        setDraft((current) => current?.side === side && current.line === line ? current : { side, line, text: "" });
+    }, []);
+    const annotations = useDiffAnnotations(fileDiff, hunkToolbar, comments, draft?.side, draft?.line, lineNotes);
+    const options = useMemo(() => {
+        const interactions = commenting
+            ? {
+                onLineNumberClick: ({ annotationSide, lineNumber }) => openDraft(annotationSide, lineNumber),
+                enableGutterUtility: true,
+                onGutterUtilityClick: (range) => openDraft(range.endSide ?? range.side ?? "additions", range.end),
+            }
+            : {};
+        return {
+            theme: NIB_SHIKI_THEMES,
+            themeType: "system",
+            diffStyle: mode,
+            diffIndicators: "classic",
+            overflow: wrap ? "wrap" : "scroll",
+            disableFileHeader: true,
+            hunkSeparators: "line-info",
+            lineDiffType: "word-alt",
+            expandUnchanged: expandAll,
+            unsafeCSS: UNSAFE_CSS,
+            onPostRender: (container) => keyboardReach(container, expandLabels, !wrap),
+            ...interactions,
+        };
+    }, [mode, wrap, expandAll, commenting, openDraft, expandLabels]);
+    const themesReady = useDiffThemesReady();
+    const highlighterReady = useDiffLanguagesReady(fileDiff, themesReady);
+    const path = filename ?? newFile?.name ?? oldFile?.name ?? (fileDiff ? stripGitPrefix(fileDiff.name) : "diff");
+    const copyValue = patch ?? newFile?.contents ?? oldFile?.contents ?? "";
+    const empty = fileDiff !== null && fileDiff.hunks.length === 0;
+    const viewable = fileDiff !== null && !empty;
+    const expandable = useMemo(() => fileDiff !== null && hasHiddenLines(fileDiff), [fileDiff]);
+    const submitDraft = () => {
+        if (draft === null || draft.text.trim() === "")
+            return;
+        onAddComment?.({ side: toCommentSide(draft.side), line: draft.line, text: draft.text.trim() });
+        setDraft(null);
+    };
+    const renderAnnotation = (annotation) => {
+        const { hunk: hunkIndex, notes, comments: lineComments, draft: hasDraft } = annotation.metadata;
+        const hunk = hunkIndex === null ? undefined : fileDiff?.hunks[hunkIndex];
+        return (_jsxs(PinnedAnnotation, { children: [notes.map((note) => (_jsx("div", { "data-slot": "diff-line-note", "data-note-id": note.id, children: note.content }, note.id))), lineComments.map((comment) => (_jsx(CommentCard, { comment: comment, onRemove: onRemoveComment }, comment.id))), hasDraft && draft !== null && (_jsx(CommentComposer, { draft: draft, onTextChange: (text) => setDraft((current) => (current ? { ...current, text } : current)), onCancel: () => setDraft(null), onSubmit: submitDraft, placeholder: commentPlaceholder }, lineKey(draft.side, draft.line))), hunk !== undefined && hunkIndex !== null && fileDiff !== null && (_jsx(HunkToolbar, { index: hunkIndex, total: fileDiff.hunks.length, hunk: hunk, state: hunkStates?.[hunkIndex], onAccept: onAcceptHunk && (() => onAcceptHunk(hunkIndex)), onRevert: onRevertHunk && (() => onRevertHunk(hunkIndex)), onAsk: onAskAboutHunk && (() => onAskAboutHunk(hunkIndex, getHunkExcerpt(fileDiff, hunkIndex))), onComment: commenting
+                        ? () => {
+                            const target = hunkCommentLine(hunk);
+                            openDraft(target.side, target.line);
+                        }
+                        : undefined }))] }));
+    };
+    return (_jsxs("div", { ref: rootRef, "data-slot": "diff-view", "data-mode": mode, "data-auto-unified": autoUnified || undefined, "data-collapsed": collapsed || undefined, className: cn("overflow-hidden rounded-xl border border-border-subtle bg-bg-inset text-fg", className), ...rest, children: [_jsx(DiffViewHeader, { path: path, fileDiff: fileDiff, collapsed: collapsed, onToggleCollapsed: toggleCollapsed, mode: mode, onModeChange: showModeToggle && viewable ? setMode : undefined, wrap: wrap, onWrapChange: showWrapToggle && viewable ? setWrap : undefined, expandAll: expandAll, onExpandAllChange: viewable && expandable ? setExpandAll : undefined, copyValue: copyValue, copyLabel: patch === undefined ? strings.copyFile : strings.copyPatch, actions: actions }), _jsx(KitMotion, { children: _jsx(AnimatePresence, { initial: false, children: !collapsed && (_jsx(m.div, { variants: fade, initial: "initial", animate: "animate", exit: "exit", "data-slot": "diff-view-body", className: cn(maxHeight !== undefined && "overflow-auto"), style: maxHeight === undefined ? {} : { maxHeight }, children: fileDiff === null ? (_jsx(UnparsedBody, { patch: patch })) : empty ? (_jsx("p", { className: "px-4 py-3 text-sm text-fg-subtle", children: strings.noChanges })) : (_jsx(DiffBody, { fileDiff: fileDiff, mode: mode, options: options, ready: highlighterReady, annotations: annotations, renderAnnotation: renderAnnotation })) }, "body")) }) })] }));
+}
+/** The diff itself, or a same-height placeholder while the highlighter boots. */
+function DiffBody({ fileDiff, mode, options, ready, annotations, renderAnnotation, }) {
+    const { pending: poolPending, request } = use(DiffPoolContext);
+    useEffect(() => request(), [request]);
+    if (ready && !poolPending)
+        return (_jsx(FileDiff, { fileDiff: fileDiff, options: options, style: HOST_STYLE, lineAnnotations: annotations, renderAnnotation: renderAnnotation }));
+    const rows = mode === "split" ? fileDiff.splitLineCount : fileDiff.unifiedLineCount;
+    return _jsx("div", { "aria-busy": "true", style: { height: rows * 20 + 20 } });
+}
+/** Fallback when the input can't be parsed: show the raw patch (still highlighted) or a note. */
+function UnparsedBody({ patch }) {
+    const strings = useUiStrings().diffView;
+    if (patch === undefined)
+        return _jsx("p", { className: "px-4 py-3 text-sm text-fg-subtle", children: strings.nothingToCompare });
+    return _jsx(CodeBlock, { code: patch, lang: "diff", header: false, className: "rounded-none border-0" });
+}
+/** A quiet header above each hunk's change; its actions surface on hover or keyboard focus. */
+function HunkToolbar({ index, total, hunk, state, onAccept, onRevert, onAsk, onComment }) {
+    const strings = useUiStrings().diffView.hunk;
+    const context = hunk.hunkContext?.trim();
+    const n = index + 1;
+    return (_jsxs("div", { "data-slot": "diff-hunk-toolbar", "data-state": state, role: "toolbar", "aria-label": strings.label({ index: n, total }), className: "group/hunk flex h-7 items-center gap-2 border-y border-border-subtle bg-bg-subtle pe-1 ps-3 text-xs text-fg-subtle", children: [_jsx("span", { className: "shrink-0 tabular", children: strings.position({ index: n, total }) }), context && _jsx("span", { className: "min-w-0 truncate font-mono text-xs text-fg-subtle", children: context }), state && (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-fg-muted", children: [state === "accepted" ? (_jsx(Check, { "aria-hidden": true, strokeWidth: 2.5, className: "size-3 text-success-fg" })) : (_jsx(Undo2, { "aria-hidden": true, className: "size-3" })), state === "accepted" ? strings.accepted : strings.reverted] })), _jsxs("div", { className: cn("ms-auto flex shrink-0 items-center gap-0.5 opacity-0", "transition-opacity duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none", "group-hover/hunk:opacity-100 group-focus-within/hunk:opacity-100 [@media(hover:none)]:opacity-100"), children: [onAsk && (_jsx(Button, { size: "xs", variant: "ghost", leading: _jsx(MessageCircleQuestion, {}), "aria-label": strings.askLabel({ index: n }), onClick: onAsk, children: strings.ask })), onComment && (_jsx(Button, { size: "xs", variant: "ghost", leading: _jsx(MessageSquarePlus, {}), "aria-label": strings.commentLabel({ index: n }), onClick: onComment, children: strings.comment })), onRevert && (_jsx(Button, { size: "xs", variant: "ghost", leading: _jsx(Undo2, {}), "aria-label": strings.revertLabel({ index: n }), disabled: state === "reverted", onClick: onRevert, children: strings.revert })), onAccept && (_jsx(Button, { size: "xs", variant: "ghost", leading: _jsx(Check, {}), "aria-label": strings.acceptLabel({ index: n }), disabled: state === "accepted", onClick: onAccept, children: strings.accept }))] })] }));
+}
+function CommentCard({ comment, onRemove, }) {
+    const strings = useUiStrings().diffView.comment;
+    const author = comment.author ?? strings.you;
+    return (_jsxs("div", { "data-slot": "diff-comment", className: "mx-3 my-1.5 flex max-w-2xl items-start gap-2 rounded-lg border border-border-subtle bg-surface px-2.5 py-2 shadow-xs", children: [_jsx(Avatar, { name: author, size: "xs", className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "text-xs", children: [_jsx("span", { className: "font-medium text-fg", children: author }), _jsxs("span", { className: "text-fg-subtle", children: [" \u00B7 ", strings.line({ line: comment.line })] })] }), _jsx("p", { dir: "auto", className: "mt-0.5 whitespace-pre-wrap break-words text-sm text-fg", children: comment.text })] }), onRemove && (_jsx(IconButton, { size: "xs", className: "-my-0.5 -me-1 text-fg-subtle", "aria-label": strings.remove({ line: comment.line }), onClick: () => onRemove(comment.id), children: _jsx(X, {}) }))] }));
+}
+/** Inline comment field under a line: ⌘↵ adds the comment, Esc cancels. */
+function CommentComposer({ draft, onTextChange, onCancel, onSubmit, placeholder }) {
+    const strings = useUiStrings().diffView.comment;
+    const textareaRef = useRef(null);
+    const { side, line } = draft;
+    // Keyed by line at the call site, so this runs whenever the field opens on a line.
+    useEffect(() => {
+        // preventScroll: never drag the code sideways to reach the field.
+        textareaRef.current?.focus({ preventScroll: true });
+    }, []);
+    const empty = draft.text.trim() === "";
+    // The host's binding for sending, else the kit's own.
+    const sendKeys = useShortcut("sendComments") ?? KIT_SHORTCUTS.sendComments;
+    const onKeyDown = (event) => {
+        if (matchesShortcut(event, sendKeys)) {
+            event.preventDefault();
+            event.stopPropagation();
+            onSubmit();
+        }
+        else if (event.key === "Escape" && !isComposing(event)) {
+            // An input method's Escape closes its candidates, never the comment with its text.
+            event.preventDefault();
+            event.stopPropagation();
+            onCancel();
+        }
+    };
+    return (_jsxs("div", { "data-slot": "diff-comment-composer", className: cn(fieldChrome, "mx-3 my-1.5 max-w-2xl rounded-lg p-1.5", "has-[textarea:focus]:border-border-strong has-[textarea:focus]:ring-3"), children: [_jsx(Textarea, { ref: textareaRef, variant: "bare", size: "sm", minRows: 2, maxRows: 8, value: draft.text, onValueChange: onTextChange, onKeyDown: onKeyDown, "aria-label": side === "deletions" ? strings.onOldLine({ line }) : strings.onNewLine({ line }), placeholder: placeholder ?? strings.placeholder, className: "px-1 py-0.5" }), _jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [_jsx("span", { className: "me-auto inline-flex items-center gap-1 ps-1 text-xs text-fg-subtle", children: richText(strings.toAdd, {
+                            keys: _jsx(Shortcut, { keys: sendKeys, size: "sm", spoken: true }),
+                        }) }), _jsx(Button, { size: "xs", variant: "ghost", onClick: onCancel, children: strings.cancel }), _jsx(Button, { size: "xs", variant: "primary", disabled: empty, onClick: onSubmit, children: strings.submit })] })] }));
+}
+function DiffViewHeader({ path, fileDiff, collapsed, onToggleCollapsed, mode, onModeChange, wrap, onWrapChange, expandAll, onExpandAllChange, copyValue, copyLabel, actions, }) {
+    const strings = useUiStrings().diffView;
+    const stats = useMemo(() => (fileDiff ? getDiffStats(fileDiff) : null), [fileDiff]);
+    const prev = fileDiff?.prevName === undefined ? null : stripGitPrefix(fileDiff.prevName);
+    const prevName = prev !== null && prev !== path ? prev : null;
+    const renamed = fileDiff?.type === "rename-pure" || fileDiff?.type === "rename-changed";
+    const changeKind = fileDiff && !(renamed && prevName === null) ? CHANGE_KIND[fileDiff.type] : undefined;
+    const changeLabel = changeKind === undefined ? undefined : strings.changeKinds[changeKind];
+    const nextMode = mode === "split" ? "unified" : "split";
+    return (_jsxs("div", { "data-slot": "diff-view-header", className: cn("flex h-10 items-center gap-2 px-1.5", !collapsed && "border-b border-border-subtle"), children: [_jsxs("button", { type: "button", "aria-expanded": !collapsed, "aria-label": collapsed ? strings.expandFile({ path }) : strings.collapseFile({ path }), onClick: onToggleCollapsed, className: cn("flex h-7 min-w-0 items-center gap-1.5 rounded-md pe-2 ps-1 outline-none", "transition-colors duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)", "hover:bg-hover focus-visible:ring-focus"), children: [_jsx(DisclosureChevron, { open: !collapsed, className: "text-fg-subtle" }), _jsx(FileCode, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle" }), prevName !== null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate font-mono text-xs text-fg-subtle line-through decoration-fg-faint", children: prevName }), _jsx(ArrowRight, { "aria-hidden": true, className: "size-3 shrink-0 text-fg-faint" })] })), _jsx(PathText, { path: path })] }), changeLabel && (_jsx("span", { className: "shrink-0 rounded-sm border border-border-subtle px-1.5 text-xs font-medium text-fg-muted", children: changeLabel })), stats && _jsx(DiffStat, { ...stats, className: "shrink-0" }), _jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-0.5", children: [actions, onExpandAllChange && !collapsed && (_jsx(Tooltip, { content: expandAll ? strings.collapseUnchangedLines : strings.showAllLines, children: _jsx(IconButton, { size: "xs", className: "text-fg-subtle aria-pressed:bg-active aria-pressed:text-fg", "aria-label": strings.showUnchangedLines, "aria-pressed": expandAll, onClick: () => onExpandAllChange(!expandAll), children: expandAll ? _jsx(FoldVertical, {}) : _jsx(UnfoldVertical, {}) }) })), onWrapChange && !collapsed && (_jsx(Tooltip, { content: wrap ? strings.unwrapLines : strings.wrapLines, children: _jsx(IconButton, { size: "xs", className: "text-fg-subtle aria-pressed:bg-active aria-pressed:text-fg", "aria-label": strings.softWrap, "aria-pressed": wrap, onClick: () => onWrapChange(!wrap), children: _jsx(WrapText, {}) }) })), onModeChange && !collapsed && (_jsx(Tooltip, { content: nextMode === "split" ? strings.splitView : strings.unifiedView, children: _jsx(IconButton, { size: "xs", className: "text-fg-subtle", "aria-label": nextMode === "split" ? strings.switchToSplit : strings.switchToUnified, onClick: () => onModeChange(nextMode), children: nextMode === "split" ? _jsx(Columns2, {}) : _jsx(Rows2, {}) }) })), _jsx(CopyButton, { value: copyValue, label: copyLabel })] })] }));
+}