@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/components/viewers/diff-viewer/align.js

@@ -0,0 +1,68 @@
+//#region src/components/viewers/diff-viewer/align.ts
+const empty = { kind: "empty" };
+function alignHunks(hunks) {
+	return hunks.map((hunk) => ({
+		header: hunk.header,
+		rows: alignLines(hunk.lines)
+	}));
+}
+function unifiedLines(hunks) {
+	return hunks.flatMap((hunk) => [{
+		kind: "header",
+		content: hunk.header
+	}, ...hunk.lines]);
+}
+function alignLines(lines) {
+	const rows = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.kind === "context") {
+			rows.push({
+				left: {
+					kind: "context",
+					line
+				},
+				right: {
+					kind: "context",
+					line
+				}
+			});
+			index += 1;
+			continue;
+		}
+		const removed = [];
+		const added = [];
+		while (lines[index]?.kind === "removed") {
+			removed.push(lines[index]);
+			index += 1;
+		}
+		while (lines[index]?.kind === "added") {
+			added.push(lines[index]);
+			index += 1;
+		}
+		if (removed.length === 0 && added.length === 0) {
+			index += 1;
+			continue;
+		}
+		for (let pair = 0; pair < Math.max(removed.length, added.length); pair += 1) {
+			const left = removed[pair];
+			const right = added[pair];
+			rows.push({
+				left: left === void 0 ? empty : {
+					kind: "removed",
+					line: left
+				},
+				right: right === void 0 ? empty : {
+					kind: "added",
+					line: right
+				}
+			});
+		}
+	}
+	return rows;
+}
+//#endregion
+export { alignHunks, unifiedLines };
+
+//# sourceMappingURL=align.js.map

package/dist/components/viewers/diff-viewer/align.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"align.js","names":[],"sources":["../../../../src/components/viewers/diff-viewer/align.ts"],"sourcesContent":["import type { DiffHunk, DiffLine } from 'laymos';\n\nexport type DiffCell =\n  | { readonly kind: 'context' | 'added' | 'removed'; readonly line: DiffLine }\n  | { readonly kind: 'empty' };\n\nexport interface DiffRow {\n  readonly left: DiffCell;\n  readonly right: DiffCell;\n}\n\nexport interface DiffSection {\n  readonly header: string;\n  readonly rows: readonly DiffRow[];\n}\n\nconst empty: DiffCell = { kind: 'empty' };\n\nexport function alignHunks(hunks: readonly DiffHunk[]): readonly DiffSection[] {\n  return hunks.map((hunk) => ({\n    header: hunk.header,\n    rows: alignLines(hunk.lines),\n  }));\n}\n\nexport function unifiedLines(\n  hunks: readonly DiffHunk[],\n): readonly (\n  | DiffLine\n  | { readonly kind: 'header'; readonly content: string }\n)[] {\n  return hunks.flatMap((hunk) => [\n    { kind: 'header' as const, content: hunk.header },\n    ...hunk.lines,\n  ]);\n}\n\nfunction alignLines(lines: readonly DiffLine[]): readonly DiffRow[] {\n  const rows: DiffRow[] = [];\n  let index = 0;\n\n  while (index < lines.length) {\n    const line = lines[index] as DiffLine;\n    if (line.kind === 'context') {\n      rows.push({\n        left: { kind: 'context', line },\n        right: { kind: 'context', line },\n      });\n      index += 1;\n      continue;\n    }\n\n    const removed: DiffLine[] = [];\n    const added: DiffLine[] = [];\n    while (lines[index]?.kind === 'removed') {\n      removed.push(lines[index] as DiffLine);\n      index += 1;\n    }\n    while (lines[index]?.kind === 'added') {\n      added.push(lines[index] as DiffLine);\n      index += 1;\n    }\n    // A lone added run at the start of a block has no removals to pair with.\n    if (removed.length === 0 && added.length === 0) {\n      index += 1;\n      continue;\n    }\n    for (\n      let pair = 0;\n      pair < Math.max(removed.length, added.length);\n      pair += 1\n    ) {\n      const left = removed[pair];\n      const right = added[pair];\n      rows.push({\n        left: left === undefined ? empty : { kind: 'removed', line: left },\n        right: right === undefined ? empty : { kind: 'added', line: right },\n      });\n    }\n  }\n\n  return rows;\n}\n"],"mappings":";AAgBA,MAAM,QAAkB,EAAE,MAAM,QAAQ;AAExC,SAAgB,WAAW,OAAoD;CAC7E,OAAO,MAAM,KAAK,UAAU;EAC1B,QAAQ,KAAK;EACb,MAAM,WAAW,KAAK,KAAK;CAC7B,EAAE;AACJ;AAEA,SAAgB,aACd,OAIE;CACF,OAAO,MAAM,SAAS,SAAS,CAC7B;EAAE,MAAM;EAAmB,SAAS,KAAK;CAAO,GAChD,GAAG,KAAK,KACV,CAAC;AACH;AAEA,SAAS,WAAW,OAAgD;CAClE,MAAM,OAAkB,CAAC;CACzB,IAAI,QAAQ;CAEZ,OAAO,QAAQ,MAAM,QAAQ;EAC3B,MAAM,OAAO,MAAM;EACnB,IAAI,KAAK,SAAS,WAAW;GAC3B,KAAK,KAAK;IACR,MAAM;KAAE,MAAM;KAAW;IAAK;IAC9B,OAAO;KAAE,MAAM;KAAW;IAAK;GACjC,CAAC;GACD,SAAS;GACT;EACF;EAEA,MAAM,UAAsB,CAAC;EAC7B,MAAM,QAAoB,CAAC;EAC3B,OAAO,MAAM,MAAM,EAAE,SAAS,WAAW;GACvC,QAAQ,KAAK,MAAM,MAAkB;GACrC,SAAS;EACX;EACA,OAAO,MAAM,MAAM,EAAE,SAAS,SAAS;GACrC,MAAM,KAAK,MAAM,MAAkB;GACnC,SAAS;EACX;EAEA,IAAI,QAAQ,WAAW,KAAK,MAAM,WAAW,GAAG;GAC9C,SAAS;GACT;EACF;EACA,KACE,IAAI,OAAO,GACX,OAAO,KAAK,IAAI,QAAQ,QAAQ,MAAM,MAAM,GAC5C,QAAQ,GACR;GACA,MAAM,OAAO,QAAQ;GACrB,MAAM,QAAQ,MAAM;GACpB,KAAK,KAAK;IACR,MAAM,SAAS,KAAA,IAAY,QAAQ;KAAE,MAAM;KAAW,MAAM;IAAK;IACjE,OAAO,UAAU,KAAA,IAAY,QAAQ;KAAE,MAAM;KAAS,MAAM;IAAM;GACpE,CAAC;EACH;CACF;CAEA,OAAO;AACT"}

package/dist/components/viewers/diff-viewer/collapse.d.ts

@@ -0,0 +1,20 @@
+import { DiffRow } from "./align.js";
+//#region src/components/viewers/diff-viewer/collapse.d.ts
+export type DiffChunk = {
+  readonly kind: 'changed';
+  readonly rows: readonly DiffRow[];
+} | {
+  readonly kind: 'unchanged';
+  readonly rows: readonly DiffRow[];
+  readonly collapsible: boolean;
+};
+export declare const collapseThreshold = 12;
+export declare const keptEdge = 3;
+export declare function collapseRows(rows: readonly DiffRow[], threshold?: number): readonly DiffChunk[];
+export interface Run<T> {
+  readonly items: readonly T[];
+  readonly collapsible: boolean;
+}
+export declare function collapseRuns<T>(items: readonly T[], isUnchanged: (item: T) => boolean, threshold?: number): readonly Run<T>[];
+//#endregion
+//# sourceMappingURL=collapse.d.ts.map

package/dist/components/viewers/diff-viewer/collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.d.ts","names":[],"sources":["../../../../src/components/viewers/diff-viewer/collapse.ts"],"mappings":";;YAEY;WACG;WAA0B,eAAe;;WAEzC;WACA,eAAe;WACf;;qBAGF;qBACA;wBAEG,aACd,eAAe,WACf,8BACU;iBA8CK,IAAI;WACV,gBAAgB;WAChB;;wBAKK,aAAa,GAC3B,gBAAgB,KAChB,cAAc,MAAM,eACpB,8BACU,IAAI"}

package/dist/components/viewers/diff-viewer/collapse.js

@@ -0,0 +1,84 @@
+//#region src/components/viewers/diff-viewer/collapse.ts
+const collapseThreshold = 12;
+const keptEdge = 3;
+function collapseRows(rows, threshold = 12) {
+	const chunks = [];
+	let index = 0;
+	while (index < rows.length) {
+		const start = index;
+		while (index < rows.length && isUnchanged(rows[index])) index += 1;
+		if (index > start) {
+			chunks.push(...unchangedChunks(rows.slice(start, index), threshold));
+			continue;
+		}
+		while (index < rows.length && !isUnchanged(rows[index])) index += 1;
+		chunks.push({
+			kind: "changed",
+			rows: rows.slice(start, index)
+		});
+	}
+	return chunks;
+}
+function unchangedChunks(rows, threshold) {
+	if (rows.length <= threshold) return [{
+		kind: "unchanged",
+		rows,
+		collapsible: false
+	}];
+	return [
+		{
+			kind: "unchanged",
+			rows: rows.slice(0, 3),
+			collapsible: false
+		},
+		{
+			kind: "unchanged",
+			rows: rows.slice(3, rows.length - 3),
+			collapsible: true
+		},
+		{
+			kind: "unchanged",
+			rows: rows.slice(rows.length - 3),
+			collapsible: false
+		}
+	];
+}
+function isUnchanged(row) {
+	return row.left.kind === "context" && row.right.kind === "context";
+}
+function collapseRuns(items, isUnchanged, threshold = 12) {
+	const runs = [];
+	let index = 0;
+	while (index < items.length) {
+		const start = index;
+		while (index < items.length && isUnchanged(items[index])) index += 1;
+		if (index > start) {
+			const run = items.slice(start, index);
+			if (run.length <= threshold) runs.push({
+				items: run,
+				collapsible: false
+			});
+			else runs.push({
+				items: run.slice(0, 3),
+				collapsible: false
+			}, {
+				items: run.slice(3, run.length - 3),
+				collapsible: true
+			}, {
+				items: run.slice(run.length - 3),
+				collapsible: false
+			});
+			continue;
+		}
+		while (index < items.length && !isUnchanged(items[index])) index += 1;
+		runs.push({
+			items: items.slice(start, index),
+			collapsible: false
+		});
+	}
+	return runs;
+}
+//#endregion
+export { collapseRows, collapseRuns, collapseThreshold, keptEdge };
+
+//# sourceMappingURL=collapse.js.map

package/dist/components/viewers/diff-viewer/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.js","names":[],"sources":["../../../../src/components/viewers/diff-viewer/collapse.ts"],"sourcesContent":["import type { DiffRow } from './align';\n\nexport type DiffChunk =\n  | { readonly kind: 'changed'; readonly rows: readonly DiffRow[] }\n  | {\n      readonly kind: 'unchanged';\n      readonly rows: readonly DiffRow[];\n      readonly collapsible: boolean;\n    };\n\nexport const collapseThreshold = 12;\nexport const keptEdge = 3;\n\nexport function collapseRows(\n  rows: readonly DiffRow[],\n  threshold = collapseThreshold,\n): readonly DiffChunk[] {\n  const chunks: DiffChunk[] = [];\n  let index = 0;\n\n  while (index < rows.length) {\n    const start = index;\n    while (index < rows.length && isUnchanged(rows[index] as DiffRow))\n      index += 1;\n    if (index > start) {\n      chunks.push(...unchangedChunks(rows.slice(start, index), threshold));\n      continue;\n    }\n    while (index < rows.length && !isUnchanged(rows[index] as DiffRow))\n      index += 1;\n    chunks.push({ kind: 'changed', rows: rows.slice(start, index) });\n  }\n\n  return chunks;\n}\n\nfunction unchangedChunks(\n  rows: readonly DiffRow[],\n  threshold: number,\n): readonly DiffChunk[] {\n  if (rows.length <= threshold) {\n    return [{ kind: 'unchanged', rows, collapsible: false }];\n  }\n  return [\n    { kind: 'unchanged', rows: rows.slice(0, keptEdge), collapsible: false },\n    {\n      kind: 'unchanged',\n      rows: rows.slice(keptEdge, rows.length - keptEdge),\n      collapsible: true,\n    },\n    {\n      kind: 'unchanged',\n      rows: rows.slice(rows.length - keptEdge),\n      collapsible: false,\n    },\n  ];\n}\n\nfunction isUnchanged(row: DiffRow): boolean {\n  return row.left.kind === 'context' && row.right.kind === 'context';\n}\n\nexport interface Run<T> {\n  readonly items: readonly T[];\n  readonly collapsible: boolean;\n}\n\n// The same folding as collapseRows, over any sequence that knows which of its\n// items are unchanged.\nexport function collapseRuns<T>(\n  items: readonly T[],\n  isUnchanged: (item: T) => boolean,\n  threshold = collapseThreshold,\n): readonly Run<T>[] {\n  const runs: Run<T>[] = [];\n  let index = 0;\n\n  while (index < items.length) {\n    const start = index;\n    while (index < items.length && isUnchanged(items[index] as T)) index += 1;\n    if (index > start) {\n      const run = items.slice(start, index);\n      if (run.length <= threshold) {\n        runs.push({ items: run, collapsible: false });\n      } else {\n        runs.push(\n          { items: run.slice(0, keptEdge), collapsible: false },\n          {\n            items: run.slice(keptEdge, run.length - keptEdge),\n            collapsible: true,\n          },\n          { items: run.slice(run.length - keptEdge), collapsible: false },\n        );\n      }\n      continue;\n    }\n    while (index < items.length && !isUnchanged(items[index] as T)) index += 1;\n    runs.push({ items: items.slice(start, index), collapsible: false });\n  }\n\n  return runs;\n}\n"],"mappings":";AAUA,MAAa,oBAAoB;AACjC,MAAa,WAAW;AAExB,SAAgB,aACd,MACA,YAAA,IACsB;CACtB,MAAM,SAAsB,CAAC;CAC7B,IAAI,QAAQ;CAEZ,OAAO,QAAQ,KAAK,QAAQ;EAC1B,MAAM,QAAQ;EACd,OAAO,QAAQ,KAAK,UAAU,YAAY,KAAK,MAAiB,GAC9D,SAAS;EACX,IAAI,QAAQ,OAAO;GACjB,OAAO,KAAK,GAAG,gBAAgB,KAAK,MAAM,OAAO,KAAK,GAAG,SAAS,CAAC;GACnE;EACF;EACA,OAAO,QAAQ,KAAK,UAAU,CAAC,YAAY,KAAK,MAAiB,GAC/D,SAAS;EACX,OAAO,KAAK;GAAE,MAAM;GAAW,MAAM,KAAK,MAAM,OAAO,KAAK;EAAE,CAAC;CACjE;CAEA,OAAO;AACT;AAEA,SAAS,gBACP,MACA,WACsB;CACtB,IAAI,KAAK,UAAU,WACjB,OAAO,CAAC;EAAE,MAAM;EAAa;EAAM,aAAa;CAAM,CAAC;CAEzD,OAAO;EACL;GAAE,MAAM;GAAa,MAAM,KAAK,MAAM,GAAA,CAAW;GAAG,aAAa;EAAM;EACvE;GACE,MAAM;GACN,MAAM,KAAK,MAAA,GAAgB,KAAK,SAAA,CAAiB;GACjD,aAAa;EACf;EACA;GACE,MAAM;GACN,MAAM,KAAK,MAAM,KAAK,SAAA,CAAiB;GACvC,aAAa;EACf;CACF;AACF;AAEA,SAAS,YAAY,KAAuB;CAC1C,OAAO,IAAI,KAAK,SAAS,aAAa,IAAI,MAAM,SAAS;AAC3D;AASA,SAAgB,aACd,OACA,aACA,YAAA,IACmB;CACnB,MAAM,OAAiB,CAAC;CACxB,IAAI,QAAQ;CAEZ,OAAO,QAAQ,MAAM,QAAQ;EAC3B,MAAM,QAAQ;EACd,OAAO,QAAQ,MAAM,UAAU,YAAY,MAAM,MAAW,GAAG,SAAS;EACxE,IAAI,QAAQ,OAAO;GACjB,MAAM,MAAM,MAAM,MAAM,OAAO,KAAK;GACpC,IAAI,IAAI,UAAU,WAChB,KAAK,KAAK;IAAE,OAAO;IAAK,aAAa;GAAM,CAAC;QAE5C,KAAK,KACH;IAAE,OAAO,IAAI,MAAM,GAAA,CAAW;IAAG,aAAa;GAAM,GACpD;IACE,OAAO,IAAI,MAAA,GAAgB,IAAI,SAAA,CAAiB;IAChD,aAAa;GACf,GACA;IAAE,OAAO,IAAI,MAAM,IAAI,SAAA,CAAiB;IAAG,aAAa;GAAM,CAChE;GAEF;EACF;EACA,OAAO,QAAQ,MAAM,UAAU,CAAC,YAAY,MAAM,MAAW,GAAG,SAAS;EACzE,KAAK,KAAK;GAAE,OAAO,MAAM,MAAM,OAAO,KAAK;GAAG,aAAa;EAAM,CAAC;CACpE;CAEA,OAAO;AACT"}

package/dist/components/viewers/diff-viewer/diff-viewer.d.ts

@@ -0,0 +1,34 @@
+import { FileDiff } from "laymos";
+//#region src/components/viewers/diff-viewer/diff-viewer.d.ts
+export type DiffLayout = 'split' | 'unified';
+export type PaneMode = 'both' | 'before' | 'after';
+/**
+ * How a diff is read: split or unified, wrapped or not, which sides show,
+ * and whether every folded region opens. A caller that keeps these hands
+ * them in with `onOptionsChange`, so they hold from one file to the next.
+ */
+export interface DiffOptions {
+  readonly layout: DiffLayout;
+  readonly wrap: boolean;
+  readonly panes: PaneMode;
+  readonly expandAll: boolean;
+}
+export declare const defaultDiffOptions: DiffOptions;
+export interface DiffViewerProps {
+  readonly diff: FileDiff;
+  readonly defaultLayout?: DiffLayout;
+  /** Controlled options; without them the viewer keeps its own. */
+  readonly options?: DiffOptions;
+  readonly onOptionsChange?: (options: DiffOptions) => void;
+  readonly fallbackContent?: string;
+  /**
+   * Grow to the diff's full height and leave scrolling up and down to the
+   * parent, which may then hold things that stick beside it. The toolbar
+   * sticks to the top.
+   */
+  readonly autoHeight?: boolean;
+  readonly className?: string;
+}
+export declare function DiffViewer({ diff, defaultLayout, options: controlled, onOptionsChange, fallbackContent, autoHeight, className }: DiffViewerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=diff-viewer.d.ts.map

package/dist/components/viewers/diff-viewer/diff-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-viewer.d.ts","names":[],"sources":["../../../../src/components/viewers/diff-viewer/diff-viewer.tsx"],"mappings":";;YA4CY;YAEA;;;;;;iBAOK;WACN,QAAQ;WACR;WACA,OAAO;WACP;;qBAGE,oBAAoB;iBAsChB;WACN,MAAM;WACN,gBAAgB;;WAEhB,UAAU;WACV,mBAAmB,SAAS;WAC5B;;;;;;WAMA;WACA;;wBAUK,aACd,MACA,eACA,SAAS,YACT,iBACA,iBACA,YACA,aACC,kCAAe,IAAA"}

package/dist/components/viewers/diff-viewer/diff-viewer.js

@@ -0,0 +1,373 @@
+import { Button } from "../../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import { Switch } from "../../ui/switch.js";
+import { useIsMobile } from "../../hooks/use-mobile.js";
+import { scrollbarStyles } from "../../lib/scrollStyles.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { collapseRows } from "./collapse.js";
+import { SourceViewer } from "../source-viewer/source-viewer.js";
+import { fullSide, sideOfRows, splitRows, unifiedChunks } from "./render-model.js";
+import { clearRowHeights, equalizeRowHeights, syncScroll } from "./sync-rows.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsLeftRight, ChevronsUpDown, Columns2, Ellipsis, PanelLeft, PanelRight, Rows3, WrapText } from "lucide-react";
+//#region src/components/viewers/diff-viewer/diff-viewer.tsx
+const defaultDiffOptions = {
+	layout: "split",
+	wrap: false,
+	panes: "both",
+	expandAll: false
+};
+const paneModes = {
+	both: {
+		label: "Both",
+		hint: "Showing both sides — collapse the after side",
+		next: "before",
+		icon: /* @__PURE__ */ jsx(Columns2, { className: "size-3.5" })
+	},
+	before: {
+		label: "Before",
+		hint: "Showing the base version — collapse the before side instead",
+		next: "after",
+		icon: /* @__PURE__ */ jsx(PanelLeft, { className: "size-3.5" })
+	},
+	after: {
+		label: "After",
+		hint: "Showing the working tree version — show both sides again",
+		next: "both",
+		icon: /* @__PURE__ */ jsx(PanelRight, { className: "size-3.5" })
+	}
+};
+function DiffViewer({ diff, defaultLayout = "split", options: controlled, onOptionsChange, fallbackContent, autoHeight = false, className }) {
+	const [own, setOwn] = useState({
+		...defaultDiffOptions,
+		layout: defaultLayout
+	});
+	const options = controlled ?? own;
+	const setOptions = (next) => {
+		const merged = {
+			...options,
+			...next
+		};
+		if (controlled === void 0) setOwn(merged);
+		onOptionsChange?.(merged);
+	};
+	const phone = useIsMobile();
+	const [phoneWrap, setPhoneWrap] = useState(true);
+	const layout = phone ? "unified" : options.layout;
+	const wrap = phone ? phoneWrap : options.wrap;
+	const { panes } = options;
+	const setLayout = (next) => setOptions({ layout: next });
+	const setWrap = (next) => phone ? setPhoneWrap(next) : setOptions({ wrap: next });
+	const setPanes = (next) => setOptions({ panes: next });
+	const [opened, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const leftRef = useRef(null);
+	const rightRef = useRef(null);
+	const scrollLock = useRef(false);
+	const chunks = useMemo(() => collapseRows(splitRows(diff.hunks)).map((chunk) => ({
+		collapsible: chunk.kind === "unchanged" && chunk.collapsible,
+		count: chunk.rows.length,
+		left: sideOfRows(chunk.rows, "left"),
+		right: sideOfRows(chunk.rows, "right")
+	})), [diff.hunks]);
+	const unified = useMemo(() => unifiedChunks(diff.hunks), [diff.hunks]);
+	const activeChunks = layout === "unified" ? unified : chunks;
+	const collapsibleKeys = useMemo(() => activeChunks.flatMap((chunk, index) => chunk.collapsible ? [`${layout}-${index}`] : []), [activeChunks, layout]);
+	const expanded = useMemo(() => options.expandAll ? new Set(collapsibleKeys) : opened, [
+		options.expandAll,
+		collapsibleKeys,
+		opened
+	]);
+	const allExpanded = collapsibleKeys.every((key) => expanded.has(key));
+	const expandAllDisabled = collapsibleKeys.length === 0;
+	const beforeFile = useMemo(() => fullSide(diff.hunks, "left"), [diff.hunks]);
+	const afterFile = useMemo(() => fullSide(diff.hunks, "right"), [diff.hunks]);
+	const counts = useMemo(() => countChanges(diff), [diff]);
+	useLayoutEffect(() => {
+		const left = leftRef.current;
+		const right = rightRef.current;
+		if (left === null || right === null) {
+			if (left !== null) clearRowHeights(left);
+			if (right !== null) clearRowHeights(right);
+			return;
+		}
+		let frame = 0;
+		const schedule = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => equalizeRowHeights(left, right));
+		};
+		schedule();
+		const mutations = new MutationObserver(schedule);
+		mutations.observe(left, {
+			childList: true,
+			subtree: true
+		});
+		mutations.observe(right, {
+			childList: true,
+			subtree: true
+		});
+		const resizes = new ResizeObserver(schedule);
+		resizes.observe(left);
+		resizes.observe(right);
+		return () => {
+			cancelAnimationFrame(frame);
+			mutations.disconnect();
+			resizes.disconnect();
+		};
+	}, [
+		chunks,
+		wrap,
+		expanded,
+		layout,
+		panes
+	]);
+	useEffect(() => {
+		const left = leftRef.current;
+		const right = rightRef.current;
+		if (left === null || right === null) return;
+		const onLeft = () => syncScroll(left, right, scrollLock);
+		const onRight = () => syncScroll(right, left, scrollLock);
+		left.addEventListener("scroll", onLeft);
+		right.addEventListener("scroll", onRight);
+		return () => {
+			left.removeEventListener("scroll", onLeft);
+			right.removeEventListener("scroll", onRight);
+		};
+	}, [layout, panes]);
+	if (diff.hunks.length === 0) return fallbackContent === void 0 ? /* @__PURE__ */ jsx("div", {
+		className: cn("grid size-full place-items-center text-sm text-muted-foreground", className),
+		children: "No changes against the base ref."
+	}) : /* @__PURE__ */ jsx(SourceViewer, {
+		filePath: diff.path,
+		content: fallbackContent,
+		wrap,
+		autoHeight,
+		className
+	});
+	const expand = (key) => setExpanded((current) => new Set(current).add(key));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", !autoHeight && "min-h-0", className),
+		children: [phone ? /* @__PURE__ */ jsxs("header", {
+			className: cn("flex shrink-0 items-center gap-2 border-b border-border py-0.5 ps-3 pe-1.5", autoHeight && "sticky top-0 z-10 bg-background"),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 items-center gap-2 font-mono text-[11px]",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-green-600 dark:text-green-400",
+					children: `+${counts.added}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-rose-600 dark:text-rose-400",
+					children: `-${counts.removed}`
+				})]
+			}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				"aria-label": "Diff options",
+				className: "flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground",
+				children: /* @__PURE__ */ jsx(Ellipsis, { className: "size-4" })
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "end",
+				children: [/* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+					className: "min-h-11",
+					disabled: expandAllDisabled,
+					checked: allExpanded && !expandAllDisabled,
+					onCheckedChange: (checked) => {
+						setExpanded(/* @__PURE__ */ new Set());
+						setOptions({ expandAll: checked });
+					},
+					children: "Expand all"
+				}), /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+					className: "min-h-11",
+					checked: wrap,
+					onCheckedChange: setWrap,
+					children: "Wrap lines"
+				})]
+			})] })]
+		}) : /* @__PURE__ */ jsxs("header", {
+			className: cn("flex shrink-0 items-center gap-3 border-b border-border px-3 py-2", autoHeight && "sticky top-0 z-10 bg-background"),
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon-sm",
+					disabled: layout === "unified",
+					"aria-label": paneModes[panes].hint,
+					title: paneModes[panes].hint,
+					onClick: () => setPanes(paneModes[panes].next),
+					children: paneModes[panes].icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground",
+					children: diff.path
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 items-center gap-2 font-mono text-[11px]",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-green-600 dark:text-green-400",
+						children: `+${counts.added}`
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-rose-600 dark:text-rose-400",
+						children: `-${counts.removed}`
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: cn("flex shrink-0 items-center gap-2 text-xs font-medium text-muted-foreground", expandAllDisabled ? "opacity-50" : "cursor-pointer"),
+					children: [
+						/* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5" }),
+						"Expand all",
+						/* @__PURE__ */ jsx(Switch, {
+							size: "sm",
+							disabled: expandAllDisabled,
+							checked: allExpanded && !expandAllDisabled,
+							onCheckedChange: (checked) => {
+								setExpanded(/* @__PURE__ */ new Set());
+								setOptions({ expandAll: checked });
+							}
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex shrink-0 cursor-pointer items-center gap-2 text-xs font-medium text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx(WrapText, { className: "size-3.5" }),
+						"Wrap",
+						/* @__PURE__ */ jsx(Switch, {
+							size: "sm",
+							checked: wrap,
+							onCheckedChange: setWrap
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex shrink-0 cursor-pointer items-center gap-2 text-xs font-medium text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx(Rows3, { className: "size-3.5" }),
+						"Unified",
+						/* @__PURE__ */ jsx(Switch, {
+							size: "sm",
+							checked: layout === "unified",
+							onCheckedChange: (checked) => setLayout(checked ? "unified" : "split")
+						})
+					]
+				})
+			]
+		}), layout === "unified" ? /* @__PURE__ */ jsx("div", {
+			className: cn(autoHeight ? "overflow-x-auto bg-background" : "min-h-0 flex-1 overflow-auto bg-background", scrollbarStyles),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("min-w-full", wrap ? "w-full" : "w-max"),
+				children: unified.map((chunk, index) => chunk.collapsible && !expanded.has(`unified-${index}`) ? /* @__PURE__ */ jsx(CollapsedRegion, {
+					count: chunk.count,
+					onExpand: () => expand(`unified-${index}`)
+				}, index) : /* @__PURE__ */ jsx(SourceViewer, {
+					filePath: diff.path,
+					content: chunk.side.content,
+					lineStatuses: chunk.side.lines,
+					showHeader: false,
+					wrap,
+					autoHeight: true
+				}, index))
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: cn("flex bg-background", !autoHeight && "min-h-0 flex-1"),
+			children: [panes === "after" ? /* @__PURE__ */ jsx(CollapsedPane, {
+				label: "Before",
+				onExpand: () => setPanes("both")
+			}) : panes === "before" ? /* @__PURE__ */ jsx(WholeFile, {
+				filePath: diff.path,
+				side: beforeFile,
+				wrap,
+				grow: autoHeight
+			}) : /* @__PURE__ */ jsx(Pane, {
+				paneRef: leftRef,
+				filePath: diff.path,
+				chunks,
+				side: "left",
+				wrap,
+				expanded,
+				onExpand: expand,
+				grow: autoHeight,
+				className: "w-1/2 shrink-0"
+			}), panes === "before" ? /* @__PURE__ */ jsx(CollapsedPane, {
+				label: "After",
+				onExpand: () => setPanes("both")
+			}) : panes === "after" ? /* @__PURE__ */ jsx(WholeFile, {
+				filePath: diff.path,
+				side: afterFile,
+				wrap,
+				grow: autoHeight
+			}) : /* @__PURE__ */ jsx(Pane, {
+				paneRef: rightRef,
+				filePath: diff.path,
+				chunks,
+				side: "right",
+				wrap,
+				expanded,
+				onExpand: expand,
+				grow: autoHeight,
+				className: "w-1/2 shrink-0 border-s border-border"
+			})]
+		})]
+	});
+}
+function Pane({ paneRef, filePath, chunks, side, wrap, expanded, onExpand, grow, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref: paneRef,
+		className: cn(grow ? "overflow-x-auto bg-background" : "h-full overflow-auto bg-background", scrollbarStyles, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-full", wrap ? "w-full" : "w-max"),
+			children: chunks.map((chunk, index) => chunk.collapsible && !expanded.has(`split-${index}`) ? /* @__PURE__ */ jsx(CollapsedRegion, {
+				count: chunk.count,
+				silent: side === "right",
+				onExpand: () => onExpand(`split-${index}`)
+			}, index) : /* @__PURE__ */ jsx(SourceViewer, {
+				filePath,
+				content: chunk[side].content,
+				lineStatuses: chunk[side].lines,
+				showHeader: false,
+				wrap,
+				autoHeight: true
+			}, index))
+		})
+	});
+}
+function WholeFile({ filePath, side, wrap, grow }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-w-0 flex-1 bg-background", grow ? "overflow-x-auto" : "overflow-auto", scrollbarStyles),
+		children: /* @__PURE__ */ jsx(SourceViewer, {
+			filePath,
+			content: side.content,
+			lineStatuses: side.lines,
+			showHeader: false,
+			wrap,
+			autoHeight: true
+		})
+	});
+}
+function CollapsedRegion({ count, silent = false, onExpand }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onExpand,
+		className: "flex h-7 w-full items-center justify-center gap-2 border-y border-border bg-muted/50 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted",
+		children: [!silent && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5" }), silent ? "" : `Show ${count} unchanged lines`]
+	});
+}
+function CollapsedPane({ label, onExpand }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onExpand,
+		title: `Show the ${label.toLowerCase()} side`,
+		className: "flex h-full w-9 shrink-0 flex-col items-center justify-center gap-2 border-s border-border bg-muted/50 py-3 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+		children: [/* @__PURE__ */ jsx(ChevronsLeftRight, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+			className: "flex flex-col items-center text-[11px] font-medium leading-[1.15]",
+			children: [...label].map((letter, index) => /* @__PURE__ */ jsx("span", { children: letter }, `${letter}-${index}`))
+		})]
+	});
+}
+function countChanges(diff) {
+	const lines = diff.hunks.flatMap((hunk) => hunk.lines);
+	return {
+		added: lines.filter(({ kind }) => kind === "added").length,
+		removed: lines.filter(({ kind }) => kind === "removed").length
+	};
+}
+//#endregion
+export { DiffViewer, defaultDiffOptions };
+
+//# sourceMappingURL=diff-viewer.js.map