@ruckc/truss-code 0.0.0-stage → 1.12.0

package/dist/DiffFiles.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { tick, onMount } from 'svelte';
+	import { Badge, Button, Checkbox, Icon, SegmentedControl, Tree } from '@ruckc/truss-ui';
+	import type { TreeNode } from '@ruckc/truss-ui';
+	import DiffView from './DiffView.svelte';
+	import { buildTree, entriesFromPatch, entryFromInput, folderIds, totals, type DiffFileInput, type DiffStatus, type FileEntry } from './files.js';
+
+	let {
+		files = [],
+		patch,
+		viewed = $bindable([]),
+		collapsed = $bindable([]),
+		selected = $bindable(),
+		layout = $bindable('unified'),
+		persist,
+		tree = true,
+		context = 3,
+		collapse = true,
+		granularity = 'word',
+		ignoreWhitespace = false,
+		ignoreCase = false,
+		highlight = true,
+		maxLines = 20000,
+		label = 'Changed files',
+		onviewed
+	}: {
+		/** The files, each with `old` and `new` text or a `patch`. */
+		files?: DiffFileInput[];
+		/** A whole `git diff` output; every file in it is listed. Used when `files` is empty. */
+		patch?: string;
+		/** Paths marked as viewed. Marking a file viewed collapses it; unmarking expands it. */
+		viewed?: string[];
+		/** Paths whose diff is hidden. */
+		collapsed?: string[];
+		/** The path of the file last picked in the tree or last navigated to. */
+		selected?: string;
+		layout?: 'unified' | 'split';
+		/** localStorage key that remembers the layout across visits. */
+		persist?: string;
+		/** Show the changed-files tree beside the list. */
+		tree?: boolean;
+		context?: number;
+		collapse?: boolean;
+		granularity?: 'line' | 'word' | 'char';
+		ignoreWhitespace?: boolean;
+		ignoreCase?: boolean;
+		highlight?: boolean;
+		maxLines?: number;
+		label?: string;
+		onviewed?: (path: string, viewed: boolean) => void;
+	} = $props();
+
+	let root: HTMLDivElement;
+	const views = $state<Record<string, { goto(where: 'first' | 'last'): boolean; focus(): void } | null | undefined>>({});
+	let expanded = $state<string[]>([]);
+
+	const entries = $derived<FileEntry[]>(files.length ? files.map((f) => entryFromInput(f, { ignoreWhitespace, ignoreCase })) : patch ? entriesFromPatch(patch) : []);
+	const sum = $derived(totals(entries));
+	const nodes = $derived<TreeNode[]>(buildTree(entries));
+	// the tree opens fully whenever the set of files changes
+	$effect(() => { expanded = folderIds(nodes); });
+	const viewedSet = $derived(new Set(viewed));
+	const collapsedSet = $derived(new Set(collapsed));
+	const BADGE: Record<DiffStatus, 'success' | 'primary' | 'danger' | 'warning'> = { added: 'success', modified: 'primary', deleted: 'danger', renamed: 'warning' };
+	const slug = (p: string) => p.replace(/[^\w-]/g, '_');
+	const uid = $props.id();
+
+	function toggle(path: string) {
+		collapsed = collapsedSet.has(path) ? collapsed.filter((p) => p !== path) : [...collapsed, path];
+	}
+	function setViewed(path: string, on: boolean) {
+		viewed = on ? [...viewed.filter((p) => p !== path), path] : viewed.filter((p) => p !== path);
+		collapsed = on ? [...collapsed.filter((p) => p !== path), path] : collapsed.filter((p) => p !== path);
+		onviewed?.(path, on);
+	}
+	async function reveal(path: string) {
+		selected = path;
+		if (collapsedSet.has(path)) collapsed = collapsed.filter((p) => p !== path);
+		await tick();
+		root.querySelector(`#${uid}-${slug(path)}`)?.scrollIntoView({ block: 'start' });
+	}
+	function onselect(n: TreeNode) {
+		if (!n.children) reveal(n.id);
+	}
+
+	/** Moves to the next (or previous) file that has a change to show, starting after (or before) file `i`. */
+	function hop(i: number, dir: 'next' | 'prev') {
+		for (let j = i + (dir === 'next' ? 1 : -1); j >= 0 && j < entries.length; j += dir === 'next' ? 1 : -1) {
+			const v = views[entries[j].path];
+			if (v?.goto(dir === 'next' ? 'first' : 'last')) {
+				selected = entries[j].path;
+				v.focus();
+				return true;
+			}
+		}
+		return false;
+	}
+	// n / p while focus is on the file list or tree (not inside a diff, which handles them itself)
+	function onkey(e: KeyboardEvent) {
+		if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || (e.target as HTMLElement).closest('.dv, input, textarea, select, [contenteditable]')) return;
+		if (e.key === 'n') { e.preventDefault(); hop(-1, 'next'); }
+		else if (e.key === 'p') { e.preventDefault(); hop(entries.length, 'prev'); }
+	}
+
+	const KEY = 'truss-code:diff-layout:';
+	onMount(() => {
+		if (!persist) return;
+		try {
+			const v = localStorage.getItem(KEY + persist);
+			if (v === 'unified' || v === 'split') layout = v;
+		} catch { /* storage blocked */ }
+	});
+	function setLayout(v: string) {
+		layout = v === 'split' ? 'split' : 'unified';
+		if (persist) {
+			try { localStorage.setItem(KEY + persist, layout); } catch { /* storage blocked */ }
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div bind:this={root} class="df" role="group" aria-label={label} onkeydown={onkey}>
+	<div class="top">
+		<span class="sum" data-testid="files-summary">{sum.files} {sum.files === 1 ? 'file' : 'files'} changed<span class="plus">+{sum.additions}</span><span class="minus">&minus;{sum.deletions}</span></span>
+		<span class="prog" data-testid="viewed-count">{viewed.filter((p) => entries.some((e) => e.path === p)).length} of {sum.files} viewed</span>
+		<span class="grow"></span>
+		<SegmentedControl size="sm" label="Diff layout" value={layout} onchange={setLayout} options={[{ value: 'unified', label: 'Unified' }, { value: 'split', label: 'Split' }]} />
+	</div>
+	<div class="main">
+		{#if tree && entries.length}
+			<nav class="side" aria-label="Changed files">
+				<Tree {nodes} bind:expanded {selected} {onselect} label="Changed files" />
+			</nav>
+		{/if}
+		<div class="list">
+			{#each entries as f, i (f.path)}
+				{@const open = !collapsedSet.has(f.path)}
+				<section id="{uid}-{slug(f.path)}" class="file" data-path={f.path} data-status={f.status} data-viewed={viewedSet.has(f.path)} aria-label={f.path}>
+					<header class="fh">
+						<Button variant="minimal" intent="neutral" size="sm" aria-expanded={open} aria-controls="{uid}-{slug(f.path)}-body" aria-label="{open ? 'Collapse' : 'Expand'} {f.path}" onclick={() => toggle(f.path)}>
+							<Icon name={open ? 'chevron-down' : 'chevron-right'} />
+						</Button>
+						<Badge intent={BADGE[f.status]} dot={false}>{f.status}</Badge>
+						<span class="path">{#if f.oldPath && f.oldPath !== f.path}<span class="old">{f.oldPath}</span> &rarr; {/if}<strong>{f.path}</strong></span>
+						<span class="stats"><span class="plus">+{f.additions}</span><span class="minus">&minus;{f.deletions}</span></span>
+						<Checkbox label="Viewed" checked={viewedSet.has(f.path)} oncheckedchange={(on) => setViewed(f.path, on)} aria-label="Viewed {f.path}" />
+					</header>
+					{#if open}
+						<div id="{uid}-{slug(f.path)}-body" class="body">
+							<DiffView
+								bind:this={views[f.path]}
+								old={f.old}
+								new={f.new}
+								file={f.file}
+								path={f.path}
+								bind:layout
+								{context}
+								{collapse}
+								{granularity}
+								{ignoreWhitespace}
+								{ignoreCase}
+								{highlight}
+								{maxLines}
+								toolbar={false}
+								label="Changes"
+								onedge={(dir) => hop(i, dir)}
+							/>
+						</div>
+					{/if}
+				</section>
+			{:else}
+				<p class="empty" role="status">No files changed.</p>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.df { border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface); overflow: hidden; }
+	.top { display: flex; align-items: center; gap: var(--tr-space-3); padding: var(--tr-space-2) var(--tr-space-3); background: var(--tr-surface-container-low); border-bottom: 1px solid var(--tr-outline-variant); font-size: var(--tr-text-sm); }
+	.grow { flex: 1; }
+	.sum, .stats { display: inline-flex; gap: var(--tr-space-2); align-items: baseline; }
+	.prog { color: var(--tr-on-surface-variant); }
+	.plus { color: var(--tr-success); font-weight: 600; } .minus { color: var(--tr-danger); font-weight: 600; }
+	.main { display: flex; align-items: flex-start; }
+	.side { flex: 0 0 16rem; max-width: 40%; position: sticky; top: 0; max-height: 70vh; overflow: auto; border-right: 1px solid var(--tr-outline-variant); padding: var(--tr-space-2); }
+	.list { flex: 1; min-width: 0; display: grid; gap: var(--tr-space-3); padding: var(--tr-space-3); }
+	.file { border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); overflow: hidden; scroll-margin-top: var(--tr-space-3); }
+	.file[data-viewed='true'] { opacity: 0.8; }
+	.fh { display: flex; align-items: center; gap: var(--tr-space-2); padding: var(--tr-space-1) var(--tr-space-2); background: var(--tr-surface-container-low); font-size: var(--tr-text-sm); }
+	.path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--tr-font-mono); }
+	.old { color: var(--tr-on-surface-variant); }
+	.body :global(.dv) { border: 0; border-radius: 0; border-top: 1px solid var(--tr-outline-variant); }
+	.empty { margin: 0; padding: var(--tr-space-5); text-align: center; color: var(--tr-on-surface-variant); }
+	@media (max-width: 720px) { .main { flex-direction: column; } .side { flex-basis: auto; max-width: none; width: 100%; position: static; border-right: 0; border-bottom: 1px solid var(--tr-outline-variant); } }
+</style>

package/dist/DiffFiles.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type DiffFileInput } from './files.js';
+type $$ComponentProps = {
+    /** The files, each with `old` and `new` text or a `patch`. */
+    files?: DiffFileInput[];
+    /** A whole `git diff` output; every file in it is listed. Used when `files` is empty. */
+    patch?: string;
+    /** Paths marked as viewed. Marking a file viewed collapses it; unmarking expands it. */
+    viewed?: string[];
+    /** Paths whose diff is hidden. */
+    collapsed?: string[];
+    /** The path of the file last picked in the tree or last navigated to. */
+    selected?: string;
+    layout?: 'unified' | 'split';
+    /** localStorage key that remembers the layout across visits. */
+    persist?: string;
+    /** Show the changed-files tree beside the list. */
+    tree?: boolean;
+    context?: number;
+    collapse?: boolean;
+    granularity?: 'line' | 'word' | 'char';
+    ignoreWhitespace?: boolean;
+    ignoreCase?: boolean;
+    highlight?: boolean;
+    maxLines?: number;
+    label?: string;
+    onviewed?: (path: string, viewed: boolean) => void;
+};
+declare const DiffFiles: import("svelte").Component<$$ComponentProps, {}, "collapsed" | "selected" | "layout" | "viewed">;
+type DiffFiles = ReturnType<typeof DiffFiles>;
+export default DiffFiles;

package/dist/DiffView.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+	import { onMount, tick, type Snippet } from 'svelte';
+	import { Button, SegmentedControl } from '@ruckc/truss-ui';
+	import { diffLines, annotateIntraline, foldItems, expandFold, splitRows, changeStarts, describeChange, diffStats, type DiffLine, type Expansion, type Item } from './diff.js';
+	import { parsePatch, patchLines, type PatchFile } from './patch.js';
+	import { highlight, overlay, paletteVars, segmentLine, type Seg } from './highlight.js';
+	import { loadMonaco } from './monaco.js';
+	import { resolveLanguage } from './lang.js';
+	import { readTheme, watchTheme, type Theme } from './theme.js';
+	import type { DiffAnnotation } from './types.js';
+
+	type Fold = Extract<Item, { type: 'fold' }>;
+	type Entry = { k: 'fold'; f: Fold } | { k: 'u'; i: number } | { k: 's'; l: number | null; r: number | null };
+
+	let {
+		old: oldText = '',
+		new: newText = '',
+		patch,
+		file,
+		path,
+		language,
+		layout = $bindable('unified'),
+		persist,
+		context = 3,
+		collapse = true,
+		granularity = 'word',
+		ignoreWhitespace = false,
+		ignoreCase = false,
+		highlight: syntax = true,
+		maxLines = 20000,
+		label = 'Diff',
+		toolbar = true,
+		annotations = [],
+		annotation,
+		lineActions,
+		onlayout,
+		onedge
+	}: {
+		/** The original text. */
+		old?: string;
+		/** The changed text. */
+		new?: string;
+		/** A unified patch (the first file of `git diff` output) shown instead of `old`/`new`. Only the lines the patch contains are available, so the gaps between its hunks cannot be expanded. */
+		patch?: string;
+		/** An already parsed file, as from `parsePatch`. Wins over `patch`. */
+		file?: PatchFile;
+		/** File name: sets the language for syntax colours and the accessible name. */
+		path?: string;
+		/** A Monaco language id; defaults to the language of `path`. */
+		language?: string;
+		layout?: 'unified' | 'split';
+		/** localStorage key that remembers the chosen layout across visits. */
+		persist?: string;
+		/** Unchanged lines kept around each change. */
+		context?: number;
+		/** Collapse long unchanged regions (with expand buttons). */
+		collapse?: boolean;
+		/** What is marked inside a changed line: whole words, single characters, or nothing. */
+		granularity?: 'line' | 'word' | 'char';
+		ignoreWhitespace?: boolean;
+		ignoreCase?: boolean;
+		/** Colour the code with Monaco's tokenizers (loaded on demand; only when the language is known). */
+		highlight?: boolean;
+		/** Above this many lines in `old` plus `new`, a placeholder with a "Show anyway" button replaces the diff. */
+		maxLines?: number;
+		label?: string;
+		/** Show the summary, layout switch and change navigation. */
+		toolbar?: boolean;
+		/** Inline notes rendered under a line: `{ line, side?: 'old' | 'new' }` plus anything your `annotation` snippet needs. */
+		annotations?: DiffAnnotation[];
+		annotation?: Snippet<[a: DiffAnnotation]>;
+		/** Rendered beside the line numbers of each changed or unchanged line (for example an "add comment" button). */
+		lineActions?: Snippet<[info: { line: DiffLine; side: 'old' | 'new'; number: number }]>;
+		onlayout?: (layout: 'unified' | 'split') => void;
+		/** `n` on the last change or `p` on the first: lets a parent (such as a file list) move on. */
+		onedge?: (dir: 'next' | 'prev') => void;
+	} = $props();
+
+	let root: HTMLDivElement;
+	let theme = $state.raw<Theme>();
+	let expansion = $state.raw<Expansion>({});
+	let cur = $state(-1);
+	let announce = $state('');
+	let forced = $state(false);
+	let hl = $state.raw<{ lines: DiffLine[]; lang: string; old: Seg[][]; new: Seg[][] }>();
+
+	const countLines = (s: string) => (s.match(/\n/g)?.length ?? 0) + (s && !s.endsWith('\n') ? 1 : 0);
+	const opts = $derived({ ignoreWhitespace, ignoreCase });
+
+	const model = $derived.by(() => {
+		const f = file ?? (patch !== undefined ? parsePatch(patch)[0] : undefined);
+		if (file || patch !== undefined) {
+			if (!f) return { lines: [] as DiffLine[], binary: false, oversize: false };
+			if (f.binary) return { lines: [] as DiffLine[], binary: true, oversize: false };
+			const lines = patchLines(f).map((l) => ({ ...l }));
+			return { lines: granularity === 'line' ? lines : annotateIntraline(lines, granularity, opts), binary: false, oversize: false };
+		}
+		if (!forced && countLines(oldText) + countLines(newText) > maxLines) return { lines: [] as DiffLine[], binary: false, oversize: true };
+		const lines = diffLines(oldText, newText, opts);
+		return { lines: granularity === 'line' ? lines : annotateIntraline(lines, granularity, opts), binary: false, oversize: false };
+	});
+	const lines = $derived(model.lines);
+	const starts = $derived(changeStarts(lines));
+	const stats = $derived(diffStats(lines));
+	const items = $derived(foldItems(lines, collapse ? context : Infinity, expansion));
+	const lang = $derived(resolveLanguage(language, path ?? file?.newPath ?? file?.oldPath));
+	const name = $derived(path ?? file?.newPath ?? file?.oldPath ?? '');
+
+	const view = $derived.by((): Entry[] => {
+		if (layout === 'unified') return items.map((it): Entry => (it.type === 'fold' ? { k: 'fold', f: it } : { k: 'u', i: it.index }));
+		const out: Entry[] = [];
+		let run: number[] = [];
+		const flush = () => {
+			for (const r of splitRows(lines, run)) out.push({ k: 's', l: r.left, r: r.right });
+			run = [];
+		};
+		for (const it of items) {
+			if (it.type === 'fold') { flush(); out.push({ k: 'fold', f: it }); } else run.push(it.index);
+		}
+		flush();
+		return out;
+	});
+
+	// a new diff starts with nothing expanded and no current change
+	$effect.pre(() => {
+		model;
+		expansion = {};
+		cur = -1;
+	});
+
+	// ───── syntax colours: tokenize the old and the new side as documents, then look lines up by their position in each
+	const docs = $derived.by(() => {
+		const oldIdx: number[] = [], newIdx: number[] = [], o: string[] = [], n: string[] = [];
+		for (const l of lines) {
+			oldIdx.push(l.type === 'ctx' || l.type === 'del' ? o.push(l.text) - 1 : -1);
+			newIdx.push(l.type === 'ctx' || l.type === 'add' ? n.push(l.text) - 1 : -1);
+		}
+		return { oldIdx, newIdx, old: o.join('\n'), new: n.join('\n') };
+	});
+
+	$effect(() => {
+		const d = docs, language = lang, ls = lines;
+		if (!syntax || language === 'plaintext' || !ls.length) return;
+		let stale = false;
+		loadMonaco().then(
+			async (m) => {
+				const [o, n] = await Promise.all([highlight(m, d.old, language), highlight(m, d.new, language)]);
+				if (!stale) hl = { lines: ls, lang: language, old: o, new: n };
+			},
+			() => {} // without Monaco the diff stays uncoloured
+		);
+		return () => { stale = true; };
+	});
+
+	const base = (i: number): Seg[] => {
+		const l = lines[i];
+		const set = hl && hl.lines === lines && hl.lang === lang ? hl : undefined;
+		const row = set ? (l.type === 'del' ? set.old[docs.oldIdx[i]] : set.new[docs.newIdx[i]]) : undefined;
+		return row ?? segmentLine(l.text, []);
+	};
+	const pieces = (i: number) => overlay(base(i), lines[i].segs);
+
+	// ───── layout persistence and theme
+	const KEY = 'truss-code:diff-layout:';
+	onMount(() => {
+		if (persist) {
+			try {
+				const v = localStorage.getItem(KEY + persist);
+				if (v === 'unified' || v === 'split') layout = v;
+			} catch { /* storage blocked */ }
+		}
+		theme = readTheme(root);
+		return watchTheme(root, () => (theme = readTheme(root)));
+	});
+	function setLayout(v: string) {
+		const l = v === 'split' ? 'split' : 'unified';
+		layout = l;
+		if (persist) {
+			try { localStorage.setItem(KEY + persist, l); } catch { /* storage blocked */ }
+		}
+		onlayout?.(l);
+	}
+
+	// ───── navigation
+	const range = $derived.by((): [number, number] | undefined => {
+		if (cur < 0 || cur >= starts.length) return undefined;
+		let e = starts[cur];
+		while (e < lines.length && (lines[e].type === 'add' || lines[e].type === 'del')) e++;
+		return [starts[cur], e];
+	});
+	const active = (i: number | null) => i !== null && !!range && i >= range[0] && i < range[1];
+
+	async function go(n: number) {
+		cur = n;
+		announce = describeChange(lines, starts, n);
+		await tick();
+		root.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+	}
+	/** Moves to the next change; after the last one, `onedge('next')` fires. */
+	export function next() { if (cur + 1 < starts.length) go(cur + 1); else onedge?.('next'); }
+	/** Moves to the previous change; before the first one, `onedge('prev')` fires. */
+	export function prev() { if (cur > 0) go(cur - 1); else onedge?.('prev'); }
+	/** Moves to a change by number, or to the `first` or `last` one. Returns whether there was one to move to. */
+	export function goto(where: number | 'first' | 'last'): boolean {
+		if (!starts.length) return false;
+		go(where === 'first' ? 0 : where === 'last' ? starts.length - 1 : Math.max(0, Math.min(starts.length - 1, where)));
+		return true;
+	}
+	export const focus = () => root.focus();
+
+	function onkey(e: KeyboardEvent) {
+		if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || (e.target as HTMLElement).closest('input, textarea, select, [contenteditable]')) return;
+		if (e.key === 'n' || (e.key === 'F7' && !e.shiftKey)) { e.preventDefault(); next(); }
+		else if (e.key === 'p' || (e.key === 'F7' && e.shiftKey)) { e.preventDefault(); prev(); }
+	}
+
+	const notes = (...idx: (number | null)[]) => {
+		const seen = new Set<number>();
+		const out: DiffAnnotation[] = [];
+		for (const i of idx) {
+			if (i === null || seen.has(i)) continue;
+			seen.add(i);
+			const l = lines[i];
+			for (const a of annotations) if (a.side === 'old' ? l.type !== 'add' && l.oldNo === a.line : l.type !== 'del' && l.newNo === a.line) out.push(a);
+		}
+		return out;
+	};
+	const SYM = { add: '+', del: '−', ctx: '', gap: '' } as const;
+	const SR = { add: 'added', del: 'removed', ctx: '', gap: '' } as const;
+	const EXPAND = 20;
+	const grow = (f: Fold, how: 'top' | 'bottom' | 'all') => (expansion = expandFold(expansion, f, how, EXPAND));
+	const cols = $derived(layout === 'split' ? 6 : 4);
+	const style = $derived((theme ? paletteVars(theme.palette) + `;--dv-font:${theme.metrics.fontSize}px` : ''));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+<div bind:this={root} class="dv" {style} role="group" aria-label={name ? `${label}: ${name}` : label} tabindex="0" onkeydown={onkey}>
+	{#if toolbar}
+		<div class="bar">
+			<span class="sum" data-testid="summary">
+				{#if model.binary}Binary file{:else if model.oversize}Large diff{:else if !starts.length}No changes{:else}{starts.length} {starts.length === 1 ? 'change' : 'changes'}<span class="plus">+{stats.additions}</span><span class="minus">&minus;{stats.deletions}</span>{/if}
+			</span>
+			<span class="grow"></span>
+			<Button variant="minimal" intent="neutral" size="sm" icon="chevron-up" aria-label="Previous change" shortcut="p" disabled={!starts.length} onclick={prev} />
+			<Button variant="minimal" intent="neutral" size="sm" icon="chevron-down" aria-label="Next change" shortcut="n" disabled={!starts.length} onclick={next} />
+			<SegmentedControl size="sm" label="Diff layout" value={layout} onchange={setLayout} options={[{ value: 'unified', label: 'Unified' }, { value: 'split', label: 'Split' }]} />
+		</div>
+	{/if}
+	<div class="vh" role="status" aria-live="polite">{announce}</div>
+
+	{#if model.binary}
+		<p class="ph">Binary file not shown.</p>
+	{:else if model.oversize}
+		<div class="ph">
+			<p>This diff is large ({countLines(oldText) + countLines(newText)} lines), so it is not drawn until you ask.</p>
+			<Button size="sm" variant="outlined" intent="neutral" onclick={() => (forced = true)}>Show anyway</Button>
+		</div>
+	{:else if !starts.length}
+		<p class="ph" role="status">No differences.</p>
+	{:else}
+		<div class="scroll">
+			<table class="tbl" data-layout={layout} aria-label={name ? `Changes in ${name}` : 'Changes'}>
+				<tbody>
+					{#each view as e, n (n)}
+						{#if e.k === 'fold'}
+							<tr class="fold"><td colspan={cols}>
+								{#if e.f.fixed}
+									<span class="note">{e.f.count ? `${e.f.count} unchanged ${e.f.count === 1 ? 'line' : 'lines'} not in this patch` : 'Lines not in this patch'}</span>
+								{:else}
+									{#if e.f.count > EXPAND}
+										<Button size="sm" variant="minimal" intent="neutral" aria-label="Show {EXPAND} more lines from above" onclick={() => grow(e.f, 'top')}>&darr; {EXPAND}</Button>
+										<Button size="sm" variant="minimal" intent="neutral" aria-label="Show {EXPAND} more lines from below" onclick={() => grow(e.f, 'bottom')}>&uarr; {EXPAND}</Button>
+									{/if}
+									<Button size="sm" variant="minimal" intent="neutral" onclick={() => grow(e.f, 'all')}>Expand {e.f.count === 1 ? '1 line' : `${e.f.count} lines`}</Button>
+								{/if}
+							</td></tr>
+						{:else if e.k === 'u'}
+							{@const l = lines[e.i]}
+							<tr class="row {l.type}" data-i={e.i} data-active={active(e.i)}>
+								<td class="no">{#if l.type !== 'add'}{l.oldNo}{#if lineActions}<span class="act">{@render lineActions({ line: l, side: 'old', number: l.oldNo! })}</span>{/if}{/if}</td>
+								<td class="no">{#if l.type !== 'del'}{l.newNo}{#if lineActions && l.type === 'add'}<span class="act">{@render lineActions({ line: l, side: 'new', number: l.newNo! })}</span>{/if}{/if}</td>
+								<td class="sym" aria-hidden={SR[l.type] ? undefined : 'true'}>{#if SR[l.type]}<span aria-hidden="true">{SYM[l.type]}</span><span class="vh">{SR[l.type]}: </span>{/if}</td>
+								<td class="code">{@render code(e.i)}</td>
+							</tr>
+							{#each notes(e.i) as a}<tr class="note-row"><td colspan="4">{#if annotation}{@render annotation(a)}{/if}</td></tr>{/each}
+						{:else}
+							<tr class="row split" data-active={active(e.l) || active(e.r)} data-i={e.l ?? e.r}>
+								{@render side(e.l, 'old', e.l !== null && lines[e.l].type === 'del' ? 'del' : 'ctx')}
+								{@render side(e.r, 'new', e.r !== null && lines[e.r].type === 'add' ? 'add' : 'ctx')}
+							</tr>
+							{#each notes(e.l, e.r) as a}<tr class="note-row"><td colspan="6">{#if annotation}{@render annotation(a)}{/if}</td></tr>{/each}
+						{/if}
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>
+
+{#snippet code(i: number)}
+	{#each pieces(i) as p}{#if p.role || p.changed}<span class:chg={p.changed} class={p.role ? `s-${p.role}` : undefined}>{p.text}</span>{:else}{p.text}{/if}{/each}{#if lines[i].noEol}<span class="eof">&#8629; No newline at end of file</span>{/if}
+{/snippet}
+
+{#snippet side(i: number | null, which: 'old' | 'new', kind: 'del' | 'add' | 'ctx')}
+	{#if i === null}
+		<td class="no filler"></td><td class="sym filler" aria-hidden="true"></td><td class="code filler" data-side={which}></td>
+	{:else}
+		{@const l = lines[i]}
+		{@const num = which === 'old' ? l.oldNo : l.newNo}
+		<td class="no {kind}" data-side={which}>{num}{#if lineActions}<span class="act">{@render lineActions({ line: l, side: which, number: num! })}</span>{/if}</td>
+		<td class="sym {kind}">{#if SR[kind]}<span aria-hidden="true">{SYM[kind]}</span><span class="vh">{SR[kind]}: </span>{/if}</td>
+		<td class="code {kind}" data-side={which}>{@render code(i)}</td>
+	{/if}
+{/snippet}
+
+<style>
+	.dv {
+		--add: var(--code-added, color-mix(in srgb, var(--tr-success) 15%, var(--tr-surface))); --add-strong: var(--code-added-strong, color-mix(in srgb, var(--tr-success) 36%, var(--tr-surface)));
+		--del: var(--code-removed, color-mix(in srgb, var(--tr-danger) 14%, var(--tr-surface))); --del-strong: var(--code-removed-strong, color-mix(in srgb, var(--tr-danger) 34%, var(--tr-surface)));
+		border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--code-bg, var(--tr-surface)); color: var(--code-fg, var(--tr-on-surface)); overflow: hidden;
+	}
+	.dv:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
+	.bar { display: flex; align-items: center; gap: var(--tr-gap); padding: var(--tr-space-1) var(--tr-space-2); border-bottom: 1px solid var(--tr-outline-variant); background: var(--tr-surface-container-low); font-size: var(--tr-text-sm); }
+	.grow { flex: 1; }
+	.sum { display: inline-flex; gap: var(--tr-space-2); align-items: baseline; color: var(--tr-on-surface-variant); }
+	.plus { color: var(--tr-success); font-weight: 600; } .minus { color: var(--tr-danger); font-weight: 600; }
+	.ph { margin: 0; padding: var(--tr-space-5); text-align: center; color: var(--tr-on-surface-variant); font-size: var(--tr-text-md); display: grid; gap: var(--tr-space-3); justify-items: center; }
+	.ph p { margin: 0; }
+	.scroll { overflow: auto; }
+	.tbl { border-collapse: collapse; width: 100%; font-family: var(--tr-font-mono); font-size: var(--dv-font, var(--tr-text-sm)); line-height: 1.5; tab-size: 4; }
+	.tbl[data-layout='split'] { table-layout: fixed; }
+	td { padding: 0 var(--tr-space-2); vertical-align: top; }
+	.no { width: 1%; min-width: 4ch; text-align: right; white-space: nowrap; color: var(--code-comment, var(--tr-on-surface-variant)); user-select: none; position: relative; }
+	.sym { width: 2ch; text-align: center; user-select: none; font-weight: 700; padding: 0; }
+	.code { white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; }
+	.tbl[data-layout='split'] .code { width: 50%; }
+	.tbl[data-layout='split'] .no { width: 5ch; } .tbl[data-layout='split'] .sym { width: 3ch; }
+	tr.add, td.add { background: var(--add); } tr.del, td.del { background: var(--del); }
+	.add .sym, .add.sym { color: var(--tr-success); } .del .sym, .del.sym { color: var(--tr-danger); }
+	td.filler { background: var(--tr-surface-container); }
+	tr.row[data-active='true'] td { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--tr-primary) 10%, transparent); }
+	tr.row[data-active='true'] td.no:first-child { box-shadow: inset 3px 0 0 var(--tr-primary), inset 0 0 0 100vmax color-mix(in srgb, var(--tr-primary) 10%, transparent); }
+	.add .chg { background: var(--add-strong); border-radius: 2px; } .del .chg { background: var(--del-strong); border-radius: 2px; }
+	.split + .split td.code { border-left: 0; }
+	td.code[data-side='new'], td.no[data-side='new'] { border-left: 1px solid var(--tr-outline-variant); }
+	.eof { margin-left: var(--tr-space-3); color: var(--tr-on-surface-variant); font-family: var(--tr-font-sans); font-style: italic; font-size: 0.9em; user-select: none; }
+	.fold td { background: var(--tr-surface-container-low); padding: 2px var(--tr-space-2); border-block: 1px solid var(--tr-outline-variant); font-family: var(--tr-font-sans); }
+	.note { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
+	.note-row td { padding: var(--tr-space-2); font-family: var(--tr-font-sans); background: var(--tr-surface-container-low); }
+	.act { position: absolute; left: 0; top: 0; opacity: 0; } tr:hover .act, .act:focus-within { opacity: 1; }
+	.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+	.s-keyword { color: var(--code-keyword); } .s-string { color: var(--code-string); } .s-number { color: var(--code-number); }
+	.s-type { color: var(--code-type); } .s-function { color: var(--code-function); } .s-variable { color: var(--code-variable); }
+	.s-constant { color: var(--code-constant); } .s-operator { color: var(--code-operator); } .s-tag { color: var(--code-tag); }
+	.s-attribute { color: var(--code-attribute); } .s-regexp { color: var(--code-regexp); } .s-comment { color: var(--code-comment); font-style: italic; }
+	.s-invalid { color: var(--code-invalid); } .s-delimiter { color: var(--code-delimiter); } .s-meta { color: var(--code-meta); }
+</style>

package/dist/DiffView.svelte.d.ts

@@ -0,0 +1,56 @@
+import { type Snippet } from 'svelte';
+import { type DiffLine } from './diff.js';
+import { type PatchFile } from './patch.js';
+import type { DiffAnnotation } from './types.js';
+type $$ComponentProps = {
+    /** The original text. */
+    old?: string;
+    /** The changed text. */
+    new?: string;
+    /** A unified patch (the first file of `git diff` output) shown instead of `old`/`new`. Only the lines the patch contains are available, so the gaps between its hunks cannot be expanded. */
+    patch?: string;
+    /** An already parsed file, as from `parsePatch`. Wins over `patch`. */
+    file?: PatchFile;
+    /** File name: sets the language for syntax colours and the accessible name. */
+    path?: string;
+    /** A Monaco language id; defaults to the language of `path`. */
+    language?: string;
+    layout?: 'unified' | 'split';
+    /** localStorage key that remembers the chosen layout across visits. */
+    persist?: string;
+    /** Unchanged lines kept around each change. */
+    context?: number;
+    /** Collapse long unchanged regions (with expand buttons). */
+    collapse?: boolean;
+    /** What is marked inside a changed line: whole words, single characters, or nothing. */
+    granularity?: 'line' | 'word' | 'char';
+    ignoreWhitespace?: boolean;
+    ignoreCase?: boolean;
+    /** Colour the code with Monaco's tokenizers (loaded on demand; only when the language is known). */
+    highlight?: boolean;
+    /** Above this many lines in `old` plus `new`, a placeholder with a "Show anyway" button replaces the diff. */
+    maxLines?: number;
+    label?: string;
+    /** Show the summary, layout switch and change navigation. */
+    toolbar?: boolean;
+    /** Inline notes rendered under a line: `{ line, side?: 'old' | 'new' }` plus anything your `annotation` snippet needs. */
+    annotations?: DiffAnnotation[];
+    annotation?: Snippet<[a: DiffAnnotation]>;
+    /** Rendered beside the line numbers of each changed or unchanged line (for example an "add comment" button). */
+    lineActions?: Snippet<[info: {
+        line: DiffLine;
+        side: 'old' | 'new';
+        number: number;
+    }]>;
+    onlayout?: (layout: 'unified' | 'split') => void;
+    /** `n` on the last change or `p` on the first: lets a parent (such as a file list) move on. */
+    onedge?: (dir: 'next' | 'prev') => void;
+};
+declare const DiffView: import("svelte").Component<$$ComponentProps, {
+    next: () => void;
+    prev: () => void;
+    goto: (where: number | "first" | "last") => boolean;
+    focus: () => void;
+}, "layout">;
+type DiffView = ReturnType<typeof DiffView>;
+export default DiffView;