@agent-native/toolkit 0.23.1 → 0.198.1

package/dist/app/blocks/library/DiffBlock.js

@@ -0,0 +1,777 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconChevronRight, IconColumns, IconDotsVertical, IconFileDiff, IconList, IconPlus, IconTrash, } from "@tabler/icons-react";
+import { common, createLowlight } from "lowlight";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ltrCodeBlockProps } from "../code-block-direction.js";
+import { AnnotationGutterMarker, AnnotationHiddenStack, AnnotationHoverCard, AnnotationInlineOverlayStack, anchorFromElements, buildLineMarkerMap, hasRailAnnotations, resolveAnnotations, useAnnotationMarginNotesAvailable, useAnnotationHover, } from "./annotation-rail.js";
+import { DevInput, DevLabel, DevTextarea, DevSelect } from "./dev-doc-ui.js";
+import { useInNarrowContainer } from "./narrow-container.js";
+function toLineTokens(text) {
+    if (text === "")
+        return [];
+    const out = [];
+    let start = 0;
+    for (let i = 0; i < text.length; i += 1) {
+        if (text[i] === "\n") {
+            out.push(text.slice(start, i + 1));
+            start = i + 1;
+        }
+    }
+    if (start < text.length)
+        out.push(text.slice(start));
+    return out;
+}
+export function diffLines(before, after) {
+    const a = toLineTokens(before);
+    const b = toLineTokens(after);
+    const n = a.length;
+    const m = b.length;
+    const cells = (n + 1) * (m + 1);
+    if (cells > MAX_DIFF_LCS_CELLS) {
+        return [
+            ...(before ? [{ value: before, removed: true }] : []),
+            ...(after ? [{ value: after, added: true }] : []),
+        ];
+    }
+    const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    for (let i = n - 1; i >= 0; i -= 1) {
+        for (let j = m - 1; j >= 0; j -= 1) {
+            lcs[i][j] =
+                a[i] === b[j]
+                    ? lcs[i + 1][j + 1] + 1
+                    : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const changes = [];
+    const push = (value, kind) => {
+        const last = changes[changes.length - 1];
+        const sameKind = last &&
+            Boolean(last.added) === (kind === "added") &&
+            Boolean(last.removed) === (kind === "removed");
+        if (sameKind) {
+            last.value += value;
+        }
+        else {
+            changes.push({
+                value,
+                added: kind === "added" ? true : undefined,
+                removed: kind === "removed" ? true : undefined,
+            });
+        }
+    };
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+        if (a[i] === b[j]) {
+            push(a[i], "context");
+            i += 1;
+            j += 1;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            push(a[i], "removed");
+            i += 1;
+        }
+        else {
+            push(b[j], "added");
+            j += 1;
+        }
+    }
+    while (i < n) {
+        push(a[i], "removed");
+        i += 1;
+    }
+    while (j < m) {
+        push(b[j], "added");
+        j += 1;
+    }
+    return changes;
+}
+const lowlight = createLowlight(common);
+const LANGUAGE_ALIASES = {
+    cjs: "javascript",
+    cts: "typescript",
+    htm: "html",
+    js: "javascript",
+    jsonc: "json",
+    jsx: "jsx",
+    md: "markdown",
+    mdx: "markdown",
+    mjs: "javascript",
+    mts: "typescript",
+    py: "python",
+    rb: "ruby",
+    rs: "rust",
+    sh: "bash",
+    shell: "bash",
+    ts: "typescript",
+    tsx: "tsx",
+    yml: "yaml",
+    zsh: "bash",
+};
+const TOKEN_CLASS_NAMES = {
+    "hljs-addition": "text-emerald-700 dark:text-emerald-300",
+    "hljs-attr": "text-primary",
+    "hljs-attribute": "text-primary",
+    "hljs-built_in": "text-amber-700 dark:text-amber-300",
+    "hljs-bullet": "text-primary",
+    "hljs-comment": "text-muted-foreground italic",
+    "hljs-deletion": "text-destructive",
+    "hljs-doctag": "text-destructive",
+    "hljs-emphasis": "italic",
+    "hljs-formula": "text-destructive",
+    "hljs-keyword": "text-destructive",
+    "hljs-link": "text-primary underline-offset-2",
+    "hljs-literal": "text-primary",
+    "hljs-meta": "text-primary",
+    "hljs-meta-string": "text-emerald-700 dark:text-emerald-300",
+    "hljs-name": "text-emerald-700 dark:text-emerald-300",
+    "hljs-number": "text-primary",
+    "hljs-params": "text-primary",
+    "hljs-property": "text-primary",
+    "hljs-quote": "text-muted-foreground italic",
+    "hljs-regexp": "text-emerald-700 dark:text-emerald-300",
+    "hljs-section": "text-violet-700 dark:text-violet-300",
+    "hljs-selector-attr": "text-primary",
+    "hljs-selector-class": "text-emerald-700 dark:text-emerald-300",
+    "hljs-selector-id": "text-emerald-700 dark:text-emerald-300",
+    "hljs-selector-pseudo": "text-primary",
+    "hljs-selector-tag": "text-emerald-700 dark:text-emerald-300",
+    "hljs-string": "text-emerald-700 dark:text-emerald-300",
+    "hljs-strong": "font-semibold",
+    "hljs-subst": "text-destructive",
+    "hljs-symbol": "text-primary",
+    "hljs-tag": "text-emerald-700 dark:text-emerald-300",
+    "hljs-template-variable": "text-amber-700 dark:text-amber-300",
+    "hljs-title": "text-violet-700 dark:text-violet-300",
+    "hljs-type": "text-amber-700 dark:text-amber-300",
+    "hljs-variable": "text-amber-700 dark:text-amber-300",
+    language_: "text-amber-700 dark:text-amber-300",
+};
+function normalizeLanguage(value) {
+    const raw = value?.trim().toLowerCase();
+    if (!raw)
+        return null;
+    const normalized = LANGUAGE_ALIASES[raw] ?? raw;
+    return lowlight.registered(normalized) ? normalized : null;
+}
+function getLanguageFromFilename(filename) {
+    const basename = filename?.split("/").pop()?.toLowerCase();
+    if (!basename)
+        return null;
+    if (basename === "dockerfile")
+        return normalizeLanguage("bash");
+    if (basename === "makefile")
+        return normalizeLanguage("makefile");
+    const ext = basename.includes(".") ? basename.split(".").pop() : basename;
+    return normalizeLanguage(ext);
+}
+function resolveDiffLanguage(data) {
+    return (normalizeLanguage(data.language) ??
+        getLanguageFromFilename(data.filename) ??
+        "plaintext");
+}
+function tokenClassName(className) {
+    const classes = Array.isArray(className)
+        ? className
+        : className
+            ? className.split(/\s+/)
+            : [];
+    const mapped = classes
+        .map((name) => TOKEN_CLASS_NAMES[name])
+        .filter(Boolean)
+        .join(" ");
+    return mapped || undefined;
+}
+function hastToReact(children, keyPrefix) {
+    return children.map((node, index) => {
+        if (node.type === "text")
+            return node.value ?? "";
+        if (node.type === "element") {
+            const key = `${keyPrefix}${index}`;
+            const renderedChildren = node.children?.length
+                ? hastToReact(node.children, `${key}-`)
+                : null;
+            const className = tokenClassName(node.properties?.className);
+            if (className) {
+                return (_jsx("span", { className: className, children: renderedChildren }, key));
+            }
+            return _jsx("span", { children: renderedChildren }, key);
+        }
+        return null;
+    });
+}
+function SyntaxHighlightedLine({ code, language, }) {
+    const highlighted = useMemo(() => {
+        if (!code.trim() || language === "plaintext" || language === "text") {
+            return null;
+        }
+        try {
+            const tree = lowlight.highlight(language, code);
+            return hastToReact(tree.children ?? [], `${language}-`);
+        }
+        catch {
+            return null;
+        }
+    }, [code, language]);
+    return _jsx(_Fragment, { children: highlighted ?? code });
+}
+function annotationSide(annotation) {
+    return annotation.side === "before" ? "before" : "after";
+}
+function countLines(text) {
+    if (text === "")
+        return 0;
+    return splitLines(text).length;
+}
+const COLLAPSE_THRESHOLD = 6;
+const CONTEXT_EDGE = 3;
+function splitLines(value) {
+    const lines = value.split("\n");
+    if (lines.length > 0 && lines[lines.length - 1] === "")
+        lines.pop();
+    return lines;
+}
+function buildRows(changes) {
+    const rows = [];
+    let oldNo = 0;
+    let newNo = 0;
+    for (const change of changes) {
+        const lines = splitLines(change.value);
+        for (const text of lines) {
+            if (change.added) {
+                newNo += 1;
+                rows.push({ kind: "added", newNo, text });
+            }
+            else if (change.removed) {
+                oldNo += 1;
+                rows.push({ kind: "removed", oldNo, text });
+            }
+            else {
+                oldNo += 1;
+                newNo += 1;
+                rows.push({ kind: "context", oldNo, newNo, text });
+            }
+        }
+    }
+    return rows;
+}
+function segmentRows(rows, isAnchored) {
+    const segments = [];
+    const collapseRun = (run, atStart, atEnd) => {
+        if (run.length <= COLLAPSE_THRESHOLD) {
+            for (const row of run)
+                segments.push(row);
+            return;
+        }
+        const head = atStart ? [] : run.slice(0, CONTEXT_EDGE);
+        const tail = atEnd ? [] : run.slice(run.length - CONTEXT_EDGE);
+        const hidden = run.slice(head.length, run.length - tail.length);
+        for (const row of head)
+            segments.push(row);
+        if (hidden.length > 0)
+            segments.push({ collapsed: true, rows: hidden });
+        for (const row of tail)
+            segments.push(row);
+    };
+    let i = 0;
+    while (i < rows.length) {
+        if (rows[i].kind !== "context") {
+            segments.push(rows[i]);
+            i += 1;
+            continue;
+        }
+        let j = i;
+        while (j < rows.length && rows[j].kind === "context")
+            j += 1;
+        const fullRun = rows.slice(i, j);
+        const runAtStart = i === 0;
+        const runAtEnd = j === rows.length;
+        if (!isAnchored || !fullRun.some(isAnchored)) {
+            collapseRun(fullRun, runAtStart, runAtEnd);
+        }
+        else {
+            let spanStart = 0;
+            for (let k = 0; k <= fullRun.length; k += 1) {
+                const atAnchor = k < fullRun.length && isAnchored(fullRun[k]);
+                if (atAnchor || k === fullRun.length) {
+                    const span = fullRun.slice(spanStart, k);
+                    if (span.length > 0) {
+                        collapseRun(span, runAtStart && spanStart === 0, runAtEnd && k === fullRun.length);
+                    }
+                    if (k < fullRun.length)
+                        segments.push(fullRun[k]);
+                    spanStart = k + 1;
+                }
+            }
+        }
+        i = j;
+    }
+    return segments;
+}
+const ROW_BG = {
+    added: "bg-emerald-500/10 dark:bg-emerald-500/15",
+    removed: "bg-destructive/10",
+    context: "bg-background",
+};
+const GUTTER_BG = {
+    added: "bg-emerald-500/15 dark:bg-emerald-500/20",
+    removed: "bg-destructive/15",
+    context: "bg-muted/60",
+};
+const SIGN_COLOR = {
+    added: "text-emerald-700 dark:text-emerald-300",
+    removed: "text-destructive",
+    context: "text-muted-foreground",
+};
+const SIGN = {
+    added: "+",
+    removed: "−",
+    context: " ",
+};
+const LINE_NO_CLASS = "select-none px-2 py-0 text-right font-mono [font-size:var(--plan-doc-code-size)] leading-5 text-muted-foreground tabular-nums";
+const DIFF_LINE_CLASS = "block min-w-max flex-1 whitespace-pre px-2 py-0 font-mono [font-size:var(--plan-doc-code-size)] leading-5 text-foreground";
+const DEFAULT_VISIBLE_DIFF_LINES = 15;
+const MAX_DIFF_LCS_CELLS = 1_000_000;
+const DIFF_MODE_STORAGE_KEY = "agent-native:diff-view-mode";
+const DIFF_MODE_STORAGE_EVENT = "agent-native:diff-view-mode-change";
+const SPLIT_MIN_WIDTH = 560;
+function useContainerWidth() {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                setWidth(entry.contentRect.width);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return [ref, width];
+}
+function isDiffMode(value) {
+    return value === "unified" || value === "split";
+}
+function readStoredDiffMode() {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const value = window.localStorage?.getItem(DIFF_MODE_STORAGE_KEY);
+        return isDiffMode(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredDiffMode(mode) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage?.setItem(DIFF_MODE_STORAGE_KEY, mode);
+    }
+    catch {
+        // Storage may be unavailable in sandboxed/private contexts.
+    }
+}
+function dispatchDiffModeChange(mode) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.dispatchEvent(new CustomEvent(DIFF_MODE_STORAGE_EVENT, { detail: mode }));
+    }
+    catch {
+        // Best-effort sync; local component state and storage already changed.
+    }
+}
+function usePreferredDiffMode(authoredMode) {
+    const [mode, setMode] = useState(authoredMode ?? "split");
+    useEffect(() => {
+        if (authoredMode)
+            return;
+        const storedMode = readStoredDiffMode();
+        if (storedMode)
+            setMode(storedMode);
+    }, [authoredMode]);
+    useEffect(() => {
+        if (authoredMode)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const onStorage = (event) => {
+            if (event.key !== DIFF_MODE_STORAGE_KEY)
+                return;
+            if (isDiffMode(event.newValue))
+                setMode(event.newValue);
+        };
+        const onModeChange = (event) => {
+            const mode = event.detail;
+            if (isDiffMode(mode))
+                setMode(mode);
+        };
+        window.addEventListener("storage", onStorage);
+        window.addEventListener(DIFF_MODE_STORAGE_EVENT, onModeChange);
+        return () => {
+            window.removeEventListener("storage", onStorage);
+            window.removeEventListener(DIFF_MODE_STORAGE_EVENT, onModeChange);
+        };
+    }, [authoredMode]);
+    const setPreferredMode = useCallback((nextMode) => {
+        setMode(nextMode);
+        writeStoredDiffMode(nextMode);
+        dispatchDiffModeChange(nextMode);
+    }, []);
+    return [mode, setPreferredMode];
+}
+function splitDiffFilename(filename) {
+    const value = filename?.trim() || "diff";
+    const segments = value.split("/").filter(Boolean);
+    const basename = segments[segments.length - 1] ?? value;
+    const directory = segments.length > 1 ? segments.slice(0, -1).join("/") : null;
+    return { basename, directory };
+}
+function DiffLineText({ language, text }) {
+    const code = text || " ";
+    return (_jsx("span", { className: DIFF_LINE_CLASS, children: _jsx(SyntaxHighlightedLine, { code: code, language: language }) }));
+}
+function DiffRead({ data, blockId, title, summary, ctx, }) {
+    const inNarrowContainer = useInNarrowContainer();
+    const [mode, setMode] = usePreferredDiffMode(data.mode);
+    const [expanded, setExpanded] = useState(() => new Set());
+    const [showAllRows, setShowAllRows] = useState(false);
+    const [containerRef, containerWidth] = useContainerWidth();
+    const hover = useAnnotationHover();
+    const { activeIndex } = hover;
+    const codeRef = useRef(null);
+    const rows = useMemo(() => buildRows(diffLines(data.before, data.after)), [data.before, data.after]);
+    const language = useMemo(() => resolveDiffLanguage(data), [data.filename, data.language]);
+    const fileParts = useMemo(() => splitDiffFilename(data.filename), [data.filename]);
+    const splitLineCount = useMemo(() => pairSplitRows(rows).length, [rows]);
+    const beforeLineCount = useMemo(() => countLines(data.before), [data.before]);
+    const afterLineCount = useMemo(() => countLines(data.after), [data.after]);
+    const showAnnotationOverlays = Boolean(ctx.showCodeAnnotationOverlays);
+    const annotationLayout = ctx.codeAnnotationLayout;
+    const annotationHoverSide = annotationLayout?.hoverSide ?? "right";
+    const annotationHoverFallbackSide = annotationLayout?.hoverFallbackSide ?? "right";
+    const annotationMarginSide = annotationLayout?.marginSide ?? "auto";
+    const defaultVisibleAnnotations = annotationLayout?.defaultVisibleAnnotations ??
+        (annotationLayout?.showByDefaultWhenRoom ? "all" : undefined);
+    const resolved = useMemo(() => resolveAnnotations(data.annotations, (annotation) => annotationSide(annotation) === "before"
+        ? beforeLineCount
+        : afterLineCount), [data.annotations, beforeLineCount, afterLineCount]);
+    const hasAnnotations = hasRailAnnotations(resolved);
+    const showMarginAnnotations = useAnnotationMarginNotesAvailable({
+        containerRef: codeRef,
+        enabled: Boolean(hasAnnotations && !showAnnotationOverlays && defaultVisibleAnnotations),
+        side: annotationMarginSide,
+        preferredSide: annotationHoverSide,
+    });
+    const showPersistentAnnotations = showAnnotationOverlays || showMarginAnnotations;
+    const persistentAnnotationIndexes = useMemo(() => {
+        if (!showMarginAnnotations || !defaultVisibleAnnotations) {
+            return new Set();
+        }
+        const visible = resolved.filter((item) => item.range);
+        if (defaultVisibleAnnotations === "first") {
+            const first = visible[0];
+            return first ? new Set([first.index]) : new Set();
+        }
+        return new Set(visible.map((item) => item.index));
+    }, [defaultVisibleAnnotations, resolved, showMarginAnnotations]);
+    const captureOverlayAnnotationIndex = useMemo(() => resolved.find((item) => item.range)?.index ?? null, [resolved]);
+    const measuredNarrow = containerWidth != null && containerWidth < SPLIT_MIN_WIDTH;
+    const narrow = data.mode == null && (measuredNarrow || inNarrowContainer);
+    const canSplit = !narrow;
+    const effectiveMode = canSplit ? mode : "unified";
+    const onRowEnter = useCallback((index, rowEl) => {
+        const startRow = codeRef.current?.querySelector(`[data-annot-row="${index}"]`) ?? rowEl;
+        const anchor = anchorFromElements(codeRef.current, startRow);
+        if (anchor)
+            hover.open(index, anchor);
+    }, [hover]);
+    const onRowLeave = useCallback(() => hover.scheduleClose(), [hover]);
+    const onRowClick = useCallback((index, rowEl) => {
+        const startRow = codeRef.current?.querySelector(`[data-annot-row="${index}"]`) ?? rowEl;
+        const anchor = anchorFromElements(codeRef.current, startRow);
+        if (anchor)
+            hover.open(index, anchor);
+    }, [hover]);
+    const beforeMarkers = useMemo(() => buildLineMarkerMap(resolved.filter((r) => annotationSide(r.annotation) === "before")), [resolved]);
+    const afterMarkers = useMemo(() => buildLineMarkerMap(resolved.filter((r) => annotationSide(r.annotation) !== "before")), [resolved]);
+    const markersForRow = useMemo(() => {
+        return (row, side) => {
+            const out = [];
+            if ((side === undefined || side === "old") &&
+                row.oldNo != null &&
+                row.kind !== "added") {
+                out.push(...(beforeMarkers.get(row.oldNo) ?? []));
+            }
+            if ((side === undefined || side === "new") &&
+                row.newNo != null &&
+                row.kind !== "removed") {
+                out.push(...(afterMarkers.get(row.newNo) ?? []));
+            }
+            return out;
+        };
+    }, [beforeMarkers, afterMarkers]);
+    const anchoredRow = useMemo(() => {
+        if (!hasAnnotations)
+            return undefined;
+        return (row) => markersForRow(row).length > 0;
+    }, [hasAnnotations, markersForRow]);
+    const activeItem = useMemo(() => activeIndex == null
+        ? null
+        : (resolved.find((item) => item.index === activeIndex) ?? null), [activeIndex, resolved]);
+    const activeItemIsPersistentlyVisible = Boolean(activeItem &&
+        !showAnnotationOverlays &&
+        persistentAnnotationIndexes.has(activeItem.index));
+    const added = rows.filter((r) => r.kind === "added").length;
+    const removed = rows.filter((r) => r.kind === "removed").length;
+    const unchanged = data.before === data.after;
+    const totalVisibleLineCount = effectiveMode === "split" ? splitLineCount : rows.length;
+    const shouldLimitRows = totalVisibleLineCount > DEFAULT_VISIBLE_DIFF_LINES;
+    const collapsedRowLimit = useMemo(() => {
+        if (!shouldLimitRows)
+            return undefined;
+        let limit = DEFAULT_VISIBLE_DIFF_LINES;
+        if (hasAnnotations) {
+            for (let idx = rows.length - 1; idx >= limit; idx -= 1) {
+                if (markersForRow(rows[idx]).length > 0) {
+                    limit = idx + 1;
+                    break;
+                }
+            }
+        }
+        return limit;
+    }, [shouldLimitRows, hasAnnotations, rows, markersForRow]);
+    const hasHiddenRows = collapsedRowLimit != null && collapsedRowLimit < totalVisibleLineCount;
+    const rowLimit = showAllRows ? undefined : collapsedRowLimit;
+    const displayedRows = effectiveMode === "unified" && rowLimit ? rows.slice(0, rowLimit) : rows;
+    const toggleRun = (index) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(index))
+            next.delete(index);
+        else
+            next.add(index);
+        return next;
+    });
+    const diffBox = (_jsxs("div", { ref: codeRef, className: "overflow-hidden rounded-md border border-border bg-background", children: [_jsxs("div", { className: "flex min-h-10 flex-wrap items-center gap-2 border-b border-border bg-muted/60 px-3 py-1.5", children: [_jsx(IconFileDiff, { className: "size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-1.5 font-mono", title: data.filename || undefined, children: [_jsx("span", { className: "min-w-0 max-w-[16rem] truncate text-[13px] font-semibold leading-5 text-foreground", children: fileParts.basename }), fileParts.directory && (_jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] leading-5 text-muted-foreground/70", children: fileParts.directory }))] }), _jsxs("span", { className: "ml-1 flex shrink-0 items-center gap-2 font-mono text-xs", children: [_jsxs("span", { className: "text-emerald-700 dark:text-emerald-300", children: ["+", added] }), _jsxs("span", { className: "text-destructive", children: ["\u2212", removed] })] }), canSplit && (_jsxs("div", { className: "pointer-events-none ml-auto flex shrink-0 items-center overflow-hidden rounded-md border border-border bg-background opacity-0 transition-opacity group-hover/diff-block:pointer-events-auto group-hover/diff-block:opacity-100 group-focus-within/diff-block:pointer-events-auto group-focus-within/diff-block:opacity-100", children: [_jsx(ModeButton, { active: mode === "unified", onClick: () => setMode("unified"), icon: _jsx(IconList, { className: "size-3.5" }), label: "Unified" }), _jsx(ModeButton, { active: mode === "split", onClick: () => setMode("split"), icon: _jsx(IconColumns, { className: "size-3.5" }), label: "Split" })] }))] }), unchanged ? (_jsx("div", { className: "px-4 py-6 text-center font-mono text-sm text-muted-foreground", children: "No changes" })) : effectiveMode === "split" ? (_jsx(SplitView, { rows: rows, language: language, rowLimit: rowLimit, markersForRow: markersForRow, activeIndex: activeIndex, onRowEnter: onRowEnter, onRowLeave: onRowLeave, onRowClick: onRowClick, showAnnotationOverlays: showPersistentAnnotations, annotationOverlayMode: showAnnotationOverlays ? "capture" : "margin", annotationOverlaySide: showAnnotationOverlays ? "right" : annotationMarginSide, annotationOverlayPreferredSide: annotationHoverSide, annotationOverlayContainerRef: codeRef, captureOverlayAnnotationIndex: captureOverlayAnnotationIndex, persistentAnnotationIndexes: persistentAnnotationIndexes, ctx: ctx })) : (_jsx(UnifiedView, { rows: displayedRows, language: language, expanded: expanded, onToggleRun: toggleRun, markersForRow: markersForRow, anchoredRow: anchoredRow, activeIndex: activeIndex, onRowEnter: onRowEnter, onRowLeave: onRowLeave, onRowClick: onRowClick, showAnnotationOverlays: showPersistentAnnotations, annotationOverlayMode: showAnnotationOverlays ? "capture" : "margin", annotationOverlaySide: showAnnotationOverlays ? "right" : annotationMarginSide, annotationOverlayPreferredSide: annotationHoverSide, annotationOverlayContainerRef: codeRef, captureOverlayAnnotationIndex: captureOverlayAnnotationIndex, persistentAnnotationIndexes: persistentAnnotationIndexes, ctx: ctx })), !unchanged && hasHiddenRows && (_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": showAllRows, onClick: () => setShowAllRows((current) => !current), className: "flex h-7 w-full items-center justify-center gap-1.5 border-t border-border bg-background px-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3 shrink-0 transition-transform", showAllRows ? "-rotate-90" : "rotate-90") }), showAllRows
+                        ? "Show fewer"
+                        : `Show all ${totalVisibleLineCount} lines`] }))] }));
+    return (_jsxs("section", { ...ltrCodeBlockProps, ref: containerRef, className: "relative plan-block group/diff-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), summary && (_jsx("p", { className: "mb-3 text-sm leading-relaxed text-plan-muted", children: summary })), diffBox, hasAnnotations && (_jsx(AnnotationHiddenStack, { items: resolved, ctx: ctx, showMarker: true })), hasAnnotations &&
+                !showAnnotationOverlays &&
+                !activeItemIsPersistentlyVisible &&
+                activeItem &&
+                hover.anchor && (_jsx(AnnotationHoverCard, { item: activeItem, anchor: hover.anchor, ctx: ctx, showMarker: true, preferredSide: annotationHoverSide, hoverFallbackSide: annotationHoverFallbackSide, onMouseEnter: hover.cancelClose, onMouseLeave: hover.scheduleClose, onClose: hover.closeForScroll, onInteractOutside: hover.close }))] }));
+}
+function ModeButton({ active, onClick, icon, label, }) {
+    return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, "aria-pressed": active, className: cn("flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-medium transition-colors", active
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-muted/80 hover:text-foreground"), children: [icon, label] }));
+}
+function rowMarkerInfo(markers, activeIndex) {
+    if (markers.length === 0)
+        return null;
+    const isActive = markers.some((m) => m.index === activeIndex);
+    return { isActive, primaryIndex: markers[0].index };
+}
+function annotatedRowBg(info, persistentlyVisible = false) {
+    if (!info)
+        return null;
+    if (info.isActive) {
+        return "bg-amber-400/[0.12] dark:bg-amber-300/[0.10]";
+    }
+    return persistentlyVisible
+        ? "bg-amber-300/[0.14] dark:bg-amber-300/[0.10]"
+        : "bg-amber-400/[0.045] dark:bg-amber-300/[0.045]";
+}
+function isMarkerRangeStart(row, marker) {
+    if (!marker.range)
+        return false;
+    const lineNo = annotationSide(marker.annotation) === "before" ? row.oldNo : row.newNo;
+    return lineNo === marker.range.start;
+}
+function UnifiedView({ rows, language, expanded, onToggleRun, markersForRow, anchoredRow, activeIndex, onRowEnter, onRowLeave, onRowClick, showAnnotationOverlays, annotationOverlayMode, annotationOverlaySide, annotationOverlayPreferredSide, annotationOverlayContainerRef, captureOverlayAnnotationIndex, persistentAnnotationIndexes, ctx, }) {
+    const segments = useMemo(() => segmentRows(rows, anchoredRow), [rows, anchoredRow]);
+    const showMarkerColumn = useMemo(() => rows.some((row) => markersForRow(row).length > 0), [rows, markersForRow]);
+    const rowProps = {
+        language,
+        markersForRow,
+        activeIndex,
+        onRowEnter,
+        onRowLeave,
+        onRowClick,
+        showMarkerColumn,
+        showAnnotationOverlays,
+        annotationOverlayMode,
+        annotationOverlaySide,
+        annotationOverlayPreferredSide,
+        annotationOverlayContainerRef,
+        captureOverlayAnnotationIndex,
+        persistentAnnotationIndexes,
+        ctx,
+    };
+    let runIndex = 0;
+    return (_jsx("div", { className: "overflow-x-auto", "data-code-surface": true, children: _jsx("div", { className: "w-max min-w-full font-mono [font-size:var(--plan-doc-code-size)] leading-5", children: segments.map((segment, idx) => {
+                if ("collapsed" in segment) {
+                    const key = runIndex++;
+                    const open = expanded.has(key);
+                    return (_jsxs("div", { children: [_jsx(CollapsedRow, { count: segment.rows.length, open: open, onClick: () => onToggleRun(key) }), open &&
+                                segment.rows.map((row, ri) => (_jsx(UnifiedRow, { row: row, ...rowProps }, `run-${key}-${ri}`)))] }, `run-${key}`));
+                }
+                return _jsx(UnifiedRow, { row: segment, ...rowProps }, idx);
+            }) }) }));
+}
+function UnifiedRow({ language, row, markersForRow, activeIndex, onRowEnter, onRowLeave, onRowClick, showMarkerColumn, showAnnotationOverlays, annotationOverlayMode, annotationOverlaySide, annotationOverlayPreferredSide, annotationOverlayContainerRef, captureOverlayAnnotationIndex, persistentAnnotationIndexes, ctx, }) {
+    const markers = markersForRow(row);
+    const info = rowMarkerInfo(markers, activeIndex);
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    const primaryIndex = startMarker?.index ?? info?.primaryIndex;
+    const overlayItems = showAnnotationOverlays &&
+        startMarker &&
+        (annotationOverlayMode === "capture"
+            ? startMarker.index === captureOverlayAnnotationIndex
+            : persistentAnnotationIndexes.has(startMarker.index))
+        ? [startMarker]
+        : [];
+    const rowHasPersistentAnnotation = markers.some((marker) => persistentAnnotationIndexes.has(marker.index));
+    return (_jsxs("div", { "data-annot-row": startMarker ? startMarker.index : undefined, tabIndex: info ? 0 : undefined, role: info ? "button" : undefined, "aria-expanded": info ? info.isActive : undefined, className: cn("relative flex min-h-5 min-w-full", info && "cursor-pointer", ROW_BG[row.kind], annotatedRowBg(info, rowHasPersistentAnnotation)), onMouseEnter: info && primaryIndex != null
+            ? (event) => onRowEnter(primaryIndex, event.currentTarget)
+            : undefined, onMouseLeave: info ? () => onRowLeave() : undefined, onClick: info && primaryIndex != null
+            ? (event) => onRowClick(primaryIndex, event.currentTarget)
+            : undefined, onKeyDown: info && primaryIndex != null
+            ? (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                onRowClick(primaryIndex, event.currentTarget);
+            }
+            : undefined, onFocus: info && primaryIndex != null
+            ? (event) => onRowEnter(primaryIndex, event.currentTarget)
+            : undefined, onBlur: info ? () => onRowLeave() : undefined, children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.oldNo ?? "" }), _jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: row.newNo ?? "" }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: SIGN[row.kind] }), showMarkerColumn && (_jsx(MarkerCell, { startMarker: startMarker, active: startMarker != null &&
+                    (startMarker.index === activeIndex ||
+                        persistentAnnotationIndexes.has(startMarker.index)) })), _jsx(DiffLineText, { text: row.text, language: language }), overlayItems.length > 0 && (_jsx(AnnotationInlineOverlayStack, { items: overlayItems, ctx: ctx, showMarker: true, containerRef: annotationOverlayContainerRef, mode: annotationOverlayMode, side: annotationOverlaySide, preferredSide: annotationOverlayPreferredSide }))] }));
+}
+function MarkerCell({ startMarker, active, }) {
+    return (_jsx("span", { className: "flex w-6 shrink-0 select-none items-center justify-center py-0", children: startMarker != null && (_jsx(AnnotationGutterMarker, { marker: startMarker.marker, active: active })) }));
+}
+function CollapsedRow({ count, open, onClick, }) {
+    return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, className: "flex w-full cursor-pointer items-center gap-2 border-y border-border bg-muted/70 px-3 py-1 text-left text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: [_jsx(IconDotsVertical, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [open ? "Hide" : "Show", " ", count, " unchanged line", count === 1 ? "" : "s"] })] }));
+}
+function pairSplitRows(rows) {
+    const out = [];
+    let i = 0;
+    while (i < rows.length) {
+        const row = rows[i];
+        if (row.kind === "context") {
+            out.push({ left: row, right: row });
+            i += 1;
+            continue;
+        }
+        const removed = [];
+        const added = [];
+        while (i < rows.length && rows[i].kind === "removed")
+            removed.push(rows[i++]);
+        while (i < rows.length && rows[i].kind === "added")
+            added.push(rows[i++]);
+        const max = Math.max(removed.length, added.length);
+        for (let k = 0; k < max; k += 1) {
+            out.push({ left: removed[k], right: added[k] });
+        }
+    }
+    return out;
+}
+function SplitView({ language, rowLimit, rows, markersForRow, activeIndex, onRowEnter, onRowLeave, onRowClick, showAnnotationOverlays, annotationOverlayMode, annotationOverlaySide, annotationOverlayPreferredSide, annotationOverlayContainerRef, captureOverlayAnnotationIndex, persistentAnnotationIndexes, ctx, }) {
+    const pairs = useMemo(() => pairSplitRows(rows), [rows]);
+    const displayedPairs = rowLimit ? pairs.slice(0, rowLimit) : pairs;
+    const showOldMarkers = useMemo(() => displayedPairs.some((pair) => pair.left && markersForRow(pair.left, "old").length > 0), [displayedPairs, markersForRow]);
+    const showNewMarkers = useMemo(() => displayedPairs.some((pair) => pair.right && markersForRow(pair.right, "new").length > 0), [displayedPairs, markersForRow]);
+    const cellProps = {
+        language,
+        markersForRow,
+        activeIndex,
+        onRowEnter,
+        onRowLeave,
+        onRowClick,
+        showAnnotationOverlays,
+        annotationOverlayMode,
+        annotationOverlaySide,
+        annotationOverlayPreferredSide,
+        annotationOverlayContainerRef,
+        captureOverlayAnnotationIndex,
+        persistentAnnotationIndexes,
+        ctx,
+    };
+    return (_jsxs("div", { className: "flex w-full bg-background font-mono [font-size:var(--plan-doc-code-size)] leading-5", "data-code-surface": true, children: [_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto border-r border-border", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.left, side: "old", showMarkerColumn: showOldMarkers, ...cellProps }, `old-${idx}`))) }) }), _jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", children: _jsx("div", { className: "inline-block min-w-full", children: displayedPairs.map((pair, idx) => (_jsx(SplitCell, { row: pair.right, side: "new", showMarkerColumn: showNewMarkers, ...cellProps }, `new-${idx}`))) }) })] }));
+}
+function SplitCell({ language, row, side, markersForRow, activeIndex, onRowEnter, onRowLeave, onRowClick, showMarkerColumn, showAnnotationOverlays, annotationOverlayMode, annotationOverlaySide, annotationOverlayPreferredSide, annotationOverlayContainerRef, captureOverlayAnnotationIndex, persistentAnnotationIndexes, ctx, }) {
+    if (!row) {
+        return (_jsxs("div", { className: "flex min-h-5 min-w-full bg-muted/40 opacity-70", children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]") }), _jsx("span", { className: "w-6 shrink-0 bg-muted/60" }), showMarkerColumn && _jsx("span", { className: "w-6 shrink-0" }), _jsx("span", { className: DIFF_LINE_CLASS, children: " " })] }));
+    }
+    const sign = side === "old" ? "−" : "+";
+    const showSign = row.kind !== "context";
+    const markers = markersForRow(row, side);
+    const info = rowMarkerInfo(markers, activeIndex);
+    const startMarker = markers.find((marker) => isMarkerRangeStart(row, marker));
+    const primaryIndex = startMarker?.index ?? info?.primaryIndex;
+    const overlayItems = showAnnotationOverlays &&
+        startMarker &&
+        (annotationOverlayMode === "capture"
+            ? startMarker.index === captureOverlayAnnotationIndex
+            : persistentAnnotationIndexes.has(startMarker.index))
+        ? [startMarker]
+        : [];
+    const rowHasPersistentAnnotation = markers.some((marker) => persistentAnnotationIndexes.has(marker.index));
+    return (_jsxs("div", { "data-annot-row": startMarker ? startMarker.index : undefined, tabIndex: info ? 0 : undefined, role: info ? "button" : undefined, "aria-expanded": info ? info.isActive : undefined, className: cn("relative flex min-h-5 min-w-full", info && "cursor-pointer", ROW_BG[row.kind], annotatedRowBg(info, rowHasPersistentAnnotation)), onMouseEnter: info && primaryIndex != null
+            ? (event) => onRowEnter(primaryIndex, event.currentTarget)
+            : undefined, onMouseLeave: info ? () => onRowLeave() : undefined, onClick: info && primaryIndex != null
+            ? (event) => onRowClick(primaryIndex, event.currentTarget)
+            : undefined, onKeyDown: info && primaryIndex != null
+            ? (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                onRowClick(primaryIndex, event.currentTarget);
+            }
+            : undefined, onFocus: info && primaryIndex != null
+            ? (event) => onRowEnter(primaryIndex, event.currentTarget)
+            : undefined, onBlur: info ? () => onRowLeave() : undefined, children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-[52px]"), children: side === "old" ? (row.oldNo ?? "") : (row.newNo ?? "") }), _jsx("span", { className: cn("w-6 shrink-0 select-none py-0 text-center font-semibold leading-5", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: showSign ? sign : " " }), showMarkerColumn && (_jsx(MarkerCell, { startMarker: startMarker, active: startMarker != null &&
+                    (startMarker.index === activeIndex ||
+                        persistentAnnotationIndexes.has(startMarker.index)) })), _jsx(DiffLineText, { text: row.text, language: language }), overlayItems.length > 0 && (_jsx(AnnotationInlineOverlayStack, { items: overlayItems, ctx: ctx, showMarker: true, containerRef: annotationOverlayContainerRef, mode: annotationOverlayMode, side: annotationOverlaySide, preferredSide: annotationOverlayPreferredSide }))] }));
+}
+const codeAreaClass = "min-h-[140px] font-mono [font-size:var(--plan-code-size)] leading-5";
+function DiffEdit({ data, onChange, editable }) {
+    const patch = (next) => onChange({ ...data, ...next });
+    const mode = data.mode ?? "split";
+    const annotations = data.annotations ?? [];
+    const updateAnnotation = (index, next) => patch({
+        annotations: annotations.map((annotation, i) => i === index ? { ...annotation, ...next } : annotation),
+    });
+    const removeAnnotation = (index) => patch({ annotations: annotations.filter((_, i) => i !== index) });
+    const addAnnotation = () => {
+        if (annotations.length >= 80)
+            return;
+        patch({
+            annotations: [
+                ...annotations,
+                { side: "after", lines: "1", label: "", note: "" },
+            ],
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-plan-interactive": true, children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-filename", className: "text-xs", children: "Filename" }), _jsx(DevInput, { id: "diff-filename", value: data.filename ?? "", placeholder: "src/add.ts", disabled: !editable, onChange: (event) => patch({ filename: event.target.value || undefined }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-language", className: "text-xs", children: "Language" }), _jsx(DevInput, { id: "diff-language", value: data.language ?? "", placeholder: "ts", disabled: !editable, onChange: (event) => patch({ language: event.target.value || undefined }) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { className: "text-xs", children: "Layout" }), _jsx(DevSelect, { value: mode, disabled: !editable, onValueChange: (value) => patch({ mode: value }), options: [
+                            { value: "unified", label: "Unified" },
+                            { value: "split", label: "Split (side-by-side)" },
+                        ] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-before", className: "text-xs", children: "Before" }), _jsx(DevTextarea, { id: "diff-before", spellCheck: false, className: codeAreaClass, value: data.before, disabled: !editable, onChange: (event) => patch({ before: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-after", className: "text-xs", children: "After" }), _jsx(DevTextarea, { id: "diff-after", spellCheck: false, className: codeAreaClass, value: data.after, disabled: !editable, onChange: (event) => patch({ after: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(DevLabel, { className: "text-xs", children: "Annotations" }), editable && annotations.length < 80 && (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: addAnnotation, className: "flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text", children: [_jsx(IconPlus, { className: "size-3.5" }), "Add annotation"] }))] }), annotations.length === 0 && (_jsx("p", { className: "text-xs text-plan-muted", children: "No annotations yet. Add one to anchor a note to a line range on the before or after side." })), annotations.map((annotation, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[110px_110px_minmax(0,1fr)_auto]", children: [_jsx(DevSelect, { "aria-label": `Annotation ${index + 1} side`, value: annotation.side ?? "after", disabled: !editable, onValueChange: (value) => updateAnnotation(index, {
+                                            side: value,
+                                        }), options: [
+                                            { value: "after", label: "After" },
+                                            { value: "before", label: "Before" },
+                                        ] }), _jsx(DevInput, { "aria-label": `Annotation ${index + 1} lines`, value: annotation.lines, placeholder: "3-5", disabled: !editable, onChange: (event) => updateAnnotation(index, { lines: event.target.value }) }), _jsx(DevInput, { "aria-label": `Annotation ${index + 1} label`, value: annotation.label ?? "", placeholder: "Label (optional)", disabled: !editable, onChange: (event) => updateAnnotation(index, {
+                                            label: event.target.value || undefined,
+                                        }) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": `Remove annotation ${index + 1}`, onClick: () => removeAnnotation(index), className: "flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground", children: _jsx(IconTrash, { className: "size-4" }) }))] }), _jsx(DevTextarea, { "aria-label": `Annotation ${index + 1} note`, className: "min-h-[60px] text-sm", value: annotation.note, placeholder: "Explain what these lines do\u2026", disabled: !editable, onChange: (event) => updateAnnotation(index, { note: event.target.value }) })] }, index)))] })] }));
+}
+export { DiffRead, DiffEdit };
+//# sourceMappingURL=DiffBlock.js.map