@ruckc/truss-code 1.13.0 → 1.15.0

package/dist/CodeEditor.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { Skeleton, matches } from '@ruckc/truss-ui';
 	import type * as Monaco from 'monaco-editor';
 	import { loadMonaco, applyTheme, ensureLanguage, setJsonSchema, setupTypeScript, type MonacoApi, type TypeScriptSetup } from './monaco.js';
 	import { resolveLanguage, modelLanguage, type SqlDialect } from './lang.js';
 	import { watchTheme, fontMetrics, type Metrics } from './theme.js';
-	import { toMonacoMarker, toMonacoCompletion } from './editor-util.js';
-	import type { CodeMarker, CompletionContext, CompletionItem } from './types.js';
+	import { toMonacoMarker, toMonacoCompletion, completionProvider, type CompletionsOption } from './editor-util.js';
+	import type { CodeMarker } from './types.js';
 
 	let {
 		value = $bindable(''),
+		files = $bindable(),
 		language,
 		dialect,
 		schema,
@@ -24,14 +26,22 @@
 		label = 'Code editor',
 		markers = [],
 		completions,
+		autoSurround = 'languageDefined',
+		autoClosingBrackets = 'languageDefined',
+		autoClosingQuotes = 'languageDefined',
 		options,
 		onchange,
 		onsave,
 		onrun,
-		onready
-	}: {
+		onready,
+		class: klass = '',
+		style,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange' | 'onsave' | 'onrun' | 'onready'> & {
 		/** The document text. One model per `path` keeps each tab's undo history; the text you bind belongs to the current `path`. */
 		value?: string;
+		/** Controlled documents keyed by path: `path` picks the active one and edits write back to `files[path]`, so switching `path` can never carry one file's text into another's model. Wins over `value` as the source of the text (`value` still mirrors the active text). Recommended for tabs. */
+		files?: Record<string, string>;
 		/** A Monaco language id (`sql`, `typescript`, `yaml`, ...). Defaults to the language of `path`'s extension, else plain text. */
 		language?: string;
 		/** The SQL flavour for `language="sql"`: Monaco's tokenizer for `postgres` (`pgsql`) and `mysql`; `sqlite` is the generic SQL tokenizer plus the SQLite keywords; `standard` and `mssql` use Monaco's `sql`, which is Transact-SQL flavoured. Ignored for other languages. */
@@ -54,8 +64,14 @@
 		label?: string;
 		/** Diagnostics for the current model. */
 		markers?: CodeMarker[];
-		/** Called as the user types or invokes suggestions; return the items to offer (may be async). */
-		completions?: (ctx: CompletionContext) => CompletionItem[] | undefined | Promise<CompletionItem[] | undefined>;
+		/** Called as the user types or invokes suggestions; return the items to offer (may be async). Pass `{ provide, triggerCharacters }` to also open suggestions when one of those characters is typed (for example `['.']`). */
+		completions?: CompletionsOption;
+		/** What typing an opening bracket or quote does to the selection: wrap it (`languageDefined`, `quotes`, `brackets`) or replace it (`never`). Monaco's `autoSurround`. */
+		autoSurround?: 'languageDefined' | 'quotes' | 'brackets' | 'never';
+		/** Whether typing `(`, `[` or `{` inserts the closing one. Monaco's `autoClosingBrackets`. */
+		autoClosingBrackets?: 'always' | 'languageDefined' | 'beforeWhitespace' | 'never';
+		/** Whether typing a quote inserts the closing one. Monaco's `autoClosingQuotes`. */
+		autoClosingQuotes?: 'always' | 'languageDefined' | 'beforeWhitespace' | 'never';
 		/** Any Monaco `IStandaloneEditorConstructionOptions`, applied after the props above (for example `{ lightbulb: { enabled: 'on' } }` to bring back the quick-fix bulb, which is off by default because Monaco gives it no accessible name). */
 		options?: Monaco.editor.IStandaloneEditorConstructionOptions;
 		/** Fires with the new text after every edit made by the user. */
@@ -94,11 +110,18 @@
 	export const getEditor = () => editor;
 	export const focus = () => editor?.focus();
 
-	function modelFor(m: MonacoApi, key: string): Monaco.editor.ITextModel {
+	/** The value last known to match the current model. A `path` change that leaves `value` equal to it has not been given its new value yet. */
+	let synced: string | undefined;
+	/** The path changed but `value` has not followed yet; the model is left alone until it does. */
+	let awaiting = false;
+	/** Models created while awaiting hold a placeholder that the arriving value replaces outright. */
+	const pristine = new Set<string>();
+
+	function modelFor(m: MonacoApi, key: string, text: string): Monaco.editor.ITextModel {
 		let mdl = models.get(key);
 		if (!mdl) {
 			const uri = m.Uri.from({ scheme: 'inmemory', authority: `truss-${id}`, path: '/' + key.replace(/^\/+/, '') });
-			mdl = m.editor.createModel(value, mlang, uri);
+			mdl = m.editor.createModel(text, mlang, uri);
 			models.set(key, mdl);
 		}
 		return mdl;
@@ -147,13 +170,18 @@
 		return () => { stale = true; };
 	});
 
-	// the model follows `path`; its text follows `value`
+	// the model follows `path`; its text follows `files[path]`, or `value` once it has caught up with `path`
 	$effect(() => {
 		const m = monaco, ed = editor, id = mlang;
 		if (!m || !ed || !id) return;
 		const key = path ?? '';
-		const mdl = modelFor(m, key);
-		if (current !== key) {
+		const text = files ? (files[key] ?? '') : value;
+		const switching = current !== key;
+		if (!files && switching && current !== undefined && text === synced) awaiting = true;
+		const fresh = !models.has(key);
+		const mdl = modelFor(m, key, text);
+		if (fresh && awaiting) pristine.add(key);
+		if (switching) {
 			if (current !== undefined) views.set(current, ed.saveViewState());
 			ed.setModel(mdl);
 			if (views.get(key)) ed.restoreViewState(views.get(key)!);
@@ -162,17 +190,27 @@
 			contentSub?.dispose();
 			contentSub = mdl.onDidChangeContent(() => {
 				if (external) return;
-				value = mdl.getValue();
-				onchange?.(value);
+				const v = mdl.getValue();
+				if (files) files = { ...files, [key]: v };
+				value = synced = v;
+				awaiting = false;
+				onchange?.(v);
 			});
 		}
 		if (mdl.getLanguageId() !== id) m.editor.setModelLanguage(mdl, id);
-		if (mdl.getValue() !== value) {
+		if (awaiting && text === synced) return; // `path` moved but `value` is still the previous file's text: leave this model alone
+		if (mdl.getValue() !== text) {
 			external = true;
-			ed.executeEdits('truss-bind', [{ range: mdl.getFullModelRange(), text: value }]);
-			ed.pushUndoStop();
+			if (pristine.delete(key)) mdl.setValue(text);
+			else {
+				ed.executeEdits('truss-bind', [{ range: mdl.getFullModelRange(), text }]);
+				ed.pushUndoStop();
+			}
 			external = false;
 		}
+		pristine.delete(key);
+		awaiting = false;
+		synced = text;
 	});
 
 	// options: props first, then the passthrough, then the theme's type metrics
@@ -185,6 +223,9 @@
 			wordWrap: wordWrap ? 'on' : 'off',
 			accessibilitySupport: screenReader,
 			ariaLabel: label,
+			autoSurround,
+			autoClosingBrackets,
+			autoClosingQuotes,
 			// Monaco's quick-fix bulb is a listbox without an accessible name; keep it off unless you opt in through `options`
 			lightbulb: { enabled: 'off' as Monaco.editor.ShowLightbulbIconMode },
 			fontSize: metrics.fontSize,
@@ -213,14 +254,16 @@
 		return () => m.editor.setModelMarkers(mdl, 'truss', []);
 	});
 
+	const triggers = $derived(completionProvider(completions)?.triggerCharacters?.join(''));
 	$effect(() => {
-		const m = monaco, id = mlang, on = !!completions;
+		const m = monaco, id = mlang, on = !!completions, trig = triggers;
 		if (!m || !id || !on) return;
 		const d = m.languages.registerCompletionItemProvider(id, {
+			...(trig ? { triggerCharacters: [...trig] } : {}),
 			provideCompletionItems: async (mdl, pos) => {
 				if (mdl !== model) return { suggestions: [] };
 				const w = mdl.getWordUntilPosition(pos);
-				const items = (await completions?.({ value: mdl.getValue(), language: lang, path, line: pos.lineNumber, col: pos.column, word: w.word, prefix: mdl.getLineContent(pos.lineNumber).slice(0, pos.column - 1) })) ?? [];
+				const items = (await completionProvider(completions)?.provide({ value: mdl.getValue(), language: lang, path, line: pos.lineNumber, col: pos.column, word: w.word, prefix: mdl.getLineContent(pos.lineNumber).slice(0, pos.column - 1) })) ?? [];
 				const range = { startLineNumber: pos.lineNumber, endLineNumber: pos.lineNumber, startColumn: w.startColumn, endColumn: w.endColumn };
 				return { suggestions: items.map((i) => toMonacoCompletion(i, m.languages.CompletionItemKind, range, m.languages.CompletionItemInsertTextRule.InsertAsSnippet)) };
 			}
@@ -229,7 +272,7 @@
 	});
 </script>
 
-<div class="ce" style:height={css} data-ready={ready} role="group" aria-label={label} aria-describedby="ce-hint-{id}">
+<div {...rest} class="ce {klass}" style:height={css} {style} data-ready={ready} role="group" aria-label={label} aria-describedby="ce-hint-{id}">
 	<div class="mount" bind:this={host}></div>
 	{#if !ready}
 		<div class="ph">

package/dist/CodeEditor.svelte.d.ts

@@ -1,10 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type * as Monaco from 'monaco-editor';
 import { type MonacoApi, type TypeScriptSetup } from './monaco.js';
 import { type SqlDialect } from './lang.js';
-import type { CodeMarker, CompletionContext, CompletionItem } from './types.js';
-type $$ComponentProps = {
+import { type CompletionsOption } from './editor-util.js';
+import type { CodeMarker } from './types.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onchange' | 'onsave' | 'onrun' | 'onready'> & {
     /** The document text. One model per `path` keeps each tab's undo history; the text you bind belongs to the current `path`. */
     value?: string;
+    /** Controlled documents keyed by path: `path` picks the active one and edits write back to `files[path]`, so switching `path` can never carry one file's text into another's model. Wins over `value` as the source of the text (`value` still mirrors the active text). Recommended for tabs. */
+    files?: Record<string, string>;
     /** A Monaco language id (`sql`, `typescript`, `yaml`, ...). Defaults to the language of `path`'s extension, else plain text. */
     language?: string;
     /** The SQL flavour for `language="sql"`: Monaco's tokenizer for `postgres` (`pgsql`) and `mysql`; `sqlite` is the generic SQL tokenizer plus the SQLite keywords; `standard` and `mssql` use Monaco's `sql`, which is Transact-SQL flavoured. Ignored for other languages. */
@@ -27,8 +31,14 @@ type $$ComponentProps = {
     label?: string;
     /** Diagnostics for the current model. */
     markers?: CodeMarker[];
-    /** Called as the user types or invokes suggestions; return the items to offer (may be async). */
-    completions?: (ctx: CompletionContext) => CompletionItem[] | undefined | Promise<CompletionItem[] | undefined>;
+    /** Called as the user types or invokes suggestions; return the items to offer (may be async). Pass `{ provide, triggerCharacters }` to also open suggestions when one of those characters is typed (for example `['.']`). */
+    completions?: CompletionsOption;
+    /** What typing an opening bracket or quote does to the selection: wrap it (`languageDefined`, `quotes`, `brackets`) or replace it (`never`). Monaco's `autoSurround`. */
+    autoSurround?: 'languageDefined' | 'quotes' | 'brackets' | 'never';
+    /** Whether typing `(`, `[` or `{` inserts the closing one. Monaco's `autoClosingBrackets`. */
+    autoClosingBrackets?: 'always' | 'languageDefined' | 'beforeWhitespace' | 'never';
+    /** Whether typing a quote inserts the closing one. Monaco's `autoClosingQuotes`. */
+    autoClosingQuotes?: 'always' | 'languageDefined' | 'beforeWhitespace' | 'never';
     /** Any Monaco `IStandaloneEditorConstructionOptions`, applied after the props above (for example `{ lightbulb: { enabled: 'on' } }` to bring back the quick-fix bulb, which is off by default because Monaco gives it no accessible name). */
     options?: Monaco.editor.IStandaloneEditorConstructionOptions;
     /** Fires with the new text after every edit made by the user. */
@@ -43,6 +53,6 @@ type $$ComponentProps = {
 declare const CodeEditor: import("svelte").Component<$$ComponentProps, {
     /** The focusable Monaco editor instance, once loaded. */ getEditor: () => Monaco.editor.IStandaloneCodeEditor | undefined;
     focus: () => void | undefined;
-}, "value">;
+}, "value" | "files">;
 type CodeEditor = ReturnType<typeof CodeEditor>;
 export default CodeEditor;

package/dist/DiffFiles.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { tick, onMount } from 'svelte';
-	import { Badge, Button, Checkbox, Icon, SegmentedControl, Tree } from '@ruckc/truss-ui';
+	import { tick, onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Badge, Button, Checkbox, Icon, SegmentedControl, Tooltip, 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';
+	import { cachedLoader, type LoadText } from './load.js';
+	import { buildTree, entriesFromPatch, entryFromInput, folderIds, statusLetter, totals, type DiffFileInput, type DiffStatus, type FileEntry } from './files.js';
 
 	let {
 		files = [],
@@ -24,7 +26,13 @@
 		virtualize,
 		detectMoves = false,
 		label = 'Changed files',
-		onviewed
+		onviewed,
+		fileExtra,
+		fileExtraPosition = 'above',
+		fileAttrs,
+		load,
+		class: cls,
+		...rest
 	}: {
 		/** The files, each with `old` and `new` text or a `patch`. */
 		files?: DiffFileInput[];
@@ -54,7 +62,16 @@
 		detectMoves?: boolean;
 		label?: string;
 		onviewed?: (path: string, viewed: boolean) => void;
-	} = $props();
+		/** Rendered inside each open file's body, next to its diff (for example review threads or a summary). Receives the file (`path`, `status`, counts...) and its position in the list. */
+		fileExtra?: Snippet<[info: { file: FileEntry; index: number }]>;
+		/** Where `fileExtra` goes relative to the file's diff. */
+		fileExtraPosition?: 'above' | 'below';
+		/** Extra attributes for each file's `<section>`, merged over the default `data-testid="diff-file-<path>"`. */
+		fileAttrs?: (file: FileEntry) => HTMLAttributes<HTMLElement>;
+		/** For patch input without the full text: fetches a whole file the first time its "Expand N lines" is pressed (see `DiffView`'s `load`). Results are cached per path and side, across collapsing and reopening a file. */
+		load?: LoadText;
+		class?: string;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role' | 'onkeydown'> = $props();
 
 	let root: HTMLDivElement;
 	const views = $state<Record<string, { goto(where: 'first' | 'last'): boolean; focus(): void } | null | undefined>>({});
@@ -62,6 +79,8 @@
 
 	const entries = $derived<FileEntry[]>(files.length ? files.map((f) => entryFromInput(f, { ignoreWhitespace, ignoreCase })) : patch ? entriesFromPatch(patch) : []);
 	const sum = $derived(totals(entries));
+	const byPath = $derived(new Map(entries.map((e) => [e.path, e])));
+	const loader = $derived(load && cachedLoader(load));
 	const nodes = $derived<TreeNode[]>(buildTree(entries));
 	// the tree opens fully whenever the set of files changes
 	$effect(() => { expanded = folderIds(nodes); });
@@ -125,7 +144,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div bind:this={root} class="df" role="group" aria-label={label} onkeydown={onkey}>
+<div bind:this={root} class={['df', cls]} {...rest} 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>
@@ -135,13 +154,13 @@
 	<div class="main">
 		{#if tree && entries.length}
 			<nav class="side" aria-label="Changed files">
-				<Tree {nodes} bind:expanded {selected} {onselect} label="Changed files" />
+				<Tree {nodes} bind:expanded {selected} {onselect} label="Changed files" nodeActions={status} />
 			</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}>
+				<section data-testid="diff-file-{f.path}" {...fileAttrs?.(f)} 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'} />
@@ -153,6 +172,7 @@
 					</header>
 					{#if open}
 						<div id="{uid}-{slug(f.path)}-body" class="body">
+							{#if fileExtra && fileExtraPosition === 'above'}{@render fileExtra({ file: f, index: i })}{/if}
 							<DiffView
 								bind:this={views[f.path]}
 								old={f.old}
@@ -171,8 +191,10 @@
 								{detectMoves}
 								toolbar={false}
 								label="Changes"
+								load={f.file ? loader : undefined}
 								onedge={(dir) => hop(i, dir)}
 							/>
+							{#if fileExtra && fileExtraPosition === 'below'}{@render fileExtra({ file: f, index: i })}{/if}
 						</div>
 					{/if}
 				</section>
@@ -183,6 +205,16 @@
 	</div>
 </div>
 
+<!-- the status of a changed file in the tree: its letter, with the whole word in the tooltip and the accessible name -->
+{#snippet status(n: TreeNode)}
+	{@const e = byPath.get(n.id)}
+	{#if e}
+		<Tooltip text="{e.status}, {e.additions} added, {e.deletions} removed" placement="right">
+			<span class="st" data-status={e.status}><span aria-hidden="true">{statusLetter(e.status)}</span><span class="vh">{e.status}</span></span>
+		</Tooltip>
+	{/if}
+{/snippet}
+
 <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); }
@@ -197,6 +229,10 @@
 	.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); }
+	.side :global(.acts) { visibility: visible; }
+	.st { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 0 var(--tr-space-1); border-radius: var(--tr-radius-sm); font-size: var(--tr-text-xs, 0.75rem); font-weight: 700; color: var(--tr-on-surface); background: var(--tr-surface-container-high); }
+	.st[data-status='added'] { color: var(--tr-success); } .st[data-status='deleted'] { color: var(--tr-danger); } .st[data-status='renamed'] { color: var(--tr-warning); } .st[data-status='modified'] { color: var(--tr-primary); }
+	.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 	.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); }

package/dist/DiffFiles.svelte.d.ts

@@ -1,4 +1,7 @@
-import { type DiffFileInput } from './files.js';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type LoadText } from './load.js';
+import { type DiffFileInput, type FileEntry } from './files.js';
 type $$ComponentProps = {
     /** The files, each with `old` and `new` text or a `patch`. */
     files?: DiffFileInput[];
@@ -28,7 +31,19 @@ type $$ComponentProps = {
     detectMoves?: boolean;
     label?: string;
     onviewed?: (path: string, viewed: boolean) => void;
-};
+    /** Rendered inside each open file's body, next to its diff (for example review threads or a summary). Receives the file (`path`, `status`, counts...) and its position in the list. */
+    fileExtra?: Snippet<[info: {
+        file: FileEntry;
+        index: number;
+    }]>;
+    /** Where `fileExtra` goes relative to the file's diff. */
+    fileExtraPosition?: 'above' | 'below';
+    /** Extra attributes for each file's `<section>`, merged over the default `data-testid="diff-file-<path>"`. */
+    fileAttrs?: (file: FileEntry) => HTMLAttributes<HTMLElement>;
+    /** For patch input without the full text: fetches a whole file the first time its "Expand N lines" is pressed (see `DiffView`'s `load`). Results are cached per path and side, across collapsing and reopening a file. */
+    load?: LoadText;
+    class?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role' | 'onkeydown'>;
 declare const DiffFiles: import("svelte").Component<$$ComponentProps, {}, "collapsed" | "selected" | "layout" | "viewed">;
 type DiffFiles = ReturnType<typeof DiffFiles>;
 export default DiffFiles;

package/dist/DiffView.svelte

@@ -9,13 +9,15 @@
 	import { detectMoves as findMoves, type Move } from './moves.js';
 	import { buildRows, rowLine, type Fold, type Layout, type Row } from './rows.js';
 	import { offsets, rulerRuns, windowOf, type Lane } from './virtual.js';
-	import { parsePatch, patchLines } from './patch.js';
+	import { layoutPatch, parsePatch } from './patch.js';
+	import { cachedLoader, type LoadText } from './load.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 { PatchFile } from './patch.js';
 	import type { DiffAnnotation } from './types.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		old: oldText = '',
@@ -48,13 +50,18 @@
 		lineActions,
 		onlayout,
 		onselect,
-		onedge
+		onedge,
+		wrap = true,
+		load,
+		class: cls,
+		style: userStyle,
+		...rest
 	}: {
 		/** 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. */
+		/** 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 unless you give `load`. */
 		patch?: string;
 		/** An already parsed file, as from `parsePatch`. Wins over `patch`. */
 		file?: PatchFile;
@@ -111,7 +118,16 @@
 		onselect?: (selection: LineSelection | null) => 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();
+		/** Keep long lines on one line and scroll sideways instead of wrapping them. With `layout="split"` both sides scroll together, so rows stay aligned. */
+		wrap?: boolean;
+		/**
+		 * For a `patch` or `file` without the full text: fetches the whole file (`side` is always `'new'` here) the first time "Expand N lines" is pressed on a gap
+		 * between hunks. The unchanged lines are then filled in and the hunks re-folded as for text input. The button shows a loading state, and a rejection shows
+		 * the error with a Retry button. Results are cached per path and side. Without `load` those gaps cannot be expanded.
+		 */
+		load?: LoadText;
+		class?: string;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role' | 'tabindex' | 'onkeydown' | 'onselect'> = $props();
 
 	const AUTO = 2000; // rows above which virtual rendering starts by itself
 	const OVERSCAN = 20;
@@ -150,15 +166,21 @@
 
 	const parsed = $derived(file ?? (patch !== undefined ? parsePatch(patch)[0] : undefined));
 	const fromPatch = $derived(file !== undefined || patch !== undefined);
-	const model = $derived.by(() => {
+	const source = $derived.by(() => {
 		if (fromPatch) {
-			if (!parsed) return { lines: [] as DiffLine[], binary: false, oversize: false };
-			if (parsed.binary) return { lines: [] as DiffLine[], binary: true, oversize: false };
-			return { lines: patchLines(parsed), binary: false, oversize: false };
+			if (!parsed) return { lines: [] as DiffLine[], anchors: [] as number[], binary: false, oversize: false };
+			if (parsed.binary) return { lines: [] as DiffLine[], anchors: [] as number[], binary: true, oversize: false };
+			return { ...layoutPatch(parsed), binary: false, oversize: false };
 		}
-		if (!forced && countLines(oldText) + countLines(newText) > maxLines) return { lines: [] as DiffLine[], binary: false, oversize: true };
-		return { lines: diffLines(oldText, newText, opts), binary: false, oversize: false };
+		if (!forced && countLines(oldText) + countLines(newText) > maxLines) return { lines: [] as DiffLine[], anchors: [] as number[], binary: false, oversize: true };
+		return { lines: diffLines(oldText, newText, opts), anchors: [] as number[], binary: false, oversize: false };
 	});
+	// the full text of a patched file, once `load` has fetched it: the gaps between hunks are then real lines
+	let fetched = $state.raw<{ file: PatchFile; text: string }>();
+	let busy = $state(-1); // key of the fold being loaded
+	let failed = $state<{ key: number; message: string }>();
+	const fetcher = $derived(load && cachedLoader(load));
+	const model = $derived(fetched && fetched.file === parsed ? { ...source, ...layoutPatch(fetched.file, fetched.text) } : source);
 	const lines = $derived(model.lines);
 	const starts = $derived(changeStarts(lines));
 	const stats = $derived(diffStats(lines));
@@ -202,17 +224,7 @@
 
 	// ───── hunks
 	const hunks = $derived<Hunk[]>(fromPatch ? (parsed?.hunks ?? []) : toHunks(lines, context));
-	const anchors = $derived.by(() => {
-		if (!hunkActions) return [];
-		if (!fromPatch) return hunkSpans(lines, context).map((s) => s[0]);
-		let at = 0;
-		return hunks.map((h) => {
-			if (lines[at]?.type === 'gap') at++;
-			const a = at;
-			at += h.lines.length;
-			return a;
-		});
-	});
+	const anchors = $derived(!hunkActions ? [] : fromPatch ? model.anchors : hunkSpans(lines, context).map((s) => s[0]));
 
 	// ───── rows
 	const noteMap = $derived.by(() => {
@@ -269,8 +281,10 @@
 
 	// a new diff starts with nothing expanded, no current change and the top in view
 	$effect.pre(() => {
-		model;
+		source;
 		expansion = {};
+		busy = -1;
+		failed = undefined;
 		cur = -1;
 		kb = -1;
 		hitCur = -1;
@@ -546,13 +560,35 @@
 	const SYM = { add: '+', del: '−', ctx: '', gap: '' } as const;
 	const SR = { add: 'added', del: 'removed', ctx: '', gap: '' } as const;
 	const grow = (f: Fold, how: 'top' | 'bottom' | 'all') => (expansion = expandFold(expansion, f, how, EXPAND));
+	/** Fetches the whole file for a gap between hunks, fills the gaps with its lines and opens the region that was asked for. */
+	async function fill(f: Fold) {
+		const file = parsed!;
+		const before = lines[f.from - 1], after = lines[f.to]; // the lines on either side of the gap survive the fill
+		busy = f.key;
+		failed = undefined;
+		try {
+			fetched = { file, text: await fetcher!(name, 'new') };
+		} catch (e) {
+			failed = { key: f.key, message: e instanceof Error ? e.message : String(e) };
+			return;
+		} finally {
+			busy = -1;
+		}
+		await tick();
+		const from = before ? lines.indexOf(before) + 1 : 0, to = lines.indexOf(after);
+		for (const it of items) if (it.type === 'fold' && it.from >= from && it.to <= to) expansion = expandFold(expansion, it, 'all');
+	}
 	const cols = $derived(layout === 'split' ? 6 : 4);
+	// the line-number column is sized from the largest number shown: its figures plus one, in ch
+	const figures = $derived(String(lines.reduce((m, l) => Math.max(m, l.oldNo ?? 0, l.newNo ?? 0), 1)).length);
+	// without wrapping, the code column is as wide as the longest line
+	const longest = $derived(wrap ? 0 : lines.reduce((m, l) => Math.max(m, l.text.replace(/\t/g, '    ').length), 0));
 	const style = $derived((theme ? paletteVars(theme.palette) + `;--dv-font:${theme.metrics.fontSize}px` : ''));
 	const sr = (i: number) => (moveAt[i] >= 0 ? (lines[i].type === 'add' ? 'moved here' : 'moved away') : SR[lines[i].type]);
 </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}>
+<div bind:this={root} class={['dv', cls]} {...rest} style={[style, userStyle].join(';')} role="group" aria-label={name ? `${label}: ${name}` : label} tabindex="0" onkeydown={onkey}>
 	{#if toolbar}
 		<div class="bar">
 			<span class="sum" data-testid="summary">
@@ -592,8 +628,13 @@
 		<p class="ph" role="status">No differences.</p>
 	{:else}
 		<div class="view">
-			<div class="scroll" class:virt bind:this={scroller} bind:clientHeight={vh} {onscroll} style:max-height={maxH} data-virtual={virt}>
-				<table class="tbl" data-layout={layout} aria-label={name ? `Changes in ${name}` : 'Changes'} aria-rowcount={rows.length}>
+			<div class="scroll" class:virt class:nowrap={!wrap} bind:this={scroller} bind:clientHeight={vh} {onscroll} style:max-height={maxH} data-virtual={virt}>
+				<table class="tbl" data-layout={layout} style:--dv-no="{figures + 1}ch" style:--dv-code={wrap ? undefined : `calc(${longest + 1}ch + 2 * var(--tr-space-2))`} aria-label={name ? `Changes in ${name}` : 'Changes'} aria-rowcount={rows.length}>
+					{#if layout === 'split'}
+						<colgroup>
+							{#each ['old', 'new'] as s (s)}<col class="c-no" /><col class="c-sym" /><col class="c-code" />{/each}
+						</colgroup>
+					{/if}
 					<tbody>
 						{#if virt}<tr class="pad" aria-hidden="true"><td colspan={cols} style:height="{offs[win[0]]}px"></td></tr>{/if}
 						{#each shown as e, n (e.key)}
@@ -638,14 +679,15 @@
 		</tr>
 	{:else if e.k === 'fold'}
 		<tr class="fold" aria-rowindex={ri + 1} data-vk={e.key}><td colspan={cols}>
-			{#if e.f.fixed}
+			{#if e.f.fixed && !load}
 				<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}
+				{#if !e.f.fixed && 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>
+				<Button size="sm" variant="minimal" intent="neutral" loading={busy === e.f.key} onclick={() => (e.f.fixed ? fill(e.f) : grow(e.f, 'all'))}>{failed?.key === e.f.key ? 'Retry' : `Expand ${e.f.count === 1 ? '1 line' : `${e.f.count} lines`}`}</Button>
+				{#if failed?.key === e.f.key}<span class="note err" role="alert">Could not load the file: {failed.message}</span>{/if}
 			{/if}
 		</td></tr>
 	{:else if e.k === 'note'}
@@ -720,16 +762,15 @@
 	.scroll { overflow: auto; flex: 1; min-width: 0; }
 	.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; }
+	.c-no { width: var(--dv-no); } .c-sym { width: 2ch; } .c-code { width: var(--dv-code, auto); }
 	td { padding: 0 var(--tr-space-2); vertical-align: top; }
 	.pad td { padding: 0; border: 0; }
-	.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; }
+	.no { box-sizing: border-box; width: var(--dv-no); min-width: var(--dv-no); padding: 0 0.5ch; text-align: right; white-space: nowrap; color: var(--code-comment, var(--tr-on-surface-variant)); user-select: none; position: relative; }
 	.ln { all: unset; cursor: pointer; font: inherit; color: inherit; }
 	.ln:hover { text-decoration: underline; }
 	.ln:focus-visible { outline: 2px solid var(--tr-primary); }
-	.sym { width: 2ch; text-align: center; user-select: none; font-weight: 700; padding: 0; }
+	.sym { width: 2ch; min-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); }
 	tr.moved, td.moved { background: var(--mv); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--tr-primary) 22%, transparent) 5px 7px); }
 	.add .sym, .add.sym { color: var(--tr-success); } .del .sym, .del.sym { color: var(--tr-danger); } .moved .sym, .moved.sym { color: var(--tr-primary); }
@@ -753,7 +794,7 @@
 	.fold td, .hunk 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); }
 	.hunk td { font-size: var(--tr-text-sm); }
 	.hh { margin-right: var(--tr-space-3); color: var(--tr-on-surface-variant); font-family: var(--tr-font-mono); }
-	.note { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
+	.note { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); } .note.err { color: var(--tr-danger); margin-left: var(--tr-space-2); }
 	.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; }
@@ -762,14 +803,22 @@
 	.virt .tbl { width: max-content; min-width: 100%; }
 	.virt .tbl[data-layout='split'] { width: 100%; }
 	.virt .code { white-space: pre; overflow-wrap: normal; width: auto; }
-	.virt .tbl[data-layout='split'] .code { width: 50%; overflow: hidden; text-overflow: ellipsis; }
+	.virt .tbl[data-layout='split'] .code { overflow: hidden; text-overflow: ellipsis; }
 	.virt .fold td, .virt .hunk td, .virt .note-row td { position: sticky; left: 0; }
-	.virt td.no { position: sticky; left: 0; z-index: 1; width: 6ch; min-width: 6ch; background-color: var(--code-bg, var(--tr-surface)); }
-	.virt .tbl:not([data-layout='split']) td.no:nth-child(2) { left: calc(6ch + 2 * var(--tr-space-2)); }
+	.virt td.no { position: sticky; left: 0; z-index: 1; background-color: var(--code-bg, var(--tr-surface)); }
+	.virt .tbl:not([data-layout='split']) td.no:nth-child(2) { left: var(--dv-no); }
 	.virt .tbl[data-layout='split'] td.no[data-side='new'] { position: relative; }
-	.virt tr.add td.no, .virt td.no.add { background-image: linear-gradient(var(--add), var(--add)); }
-	.virt tr.del td.no, .virt td.no.del { background-image: linear-gradient(var(--del), var(--del)); }
-	.virt tr.moved td.no, .virt td.no.moved { background-image: linear-gradient(var(--mv), var(--mv)); }
+	.virt tr.add td.no, .virt td.no.add, .nowrap tr.add td.no, .nowrap td.no.add { background-image: linear-gradient(var(--add), var(--add)); }
+	.virt tr.del td.no, .virt td.no.del, .nowrap tr.del td.no, .nowrap td.no.del { background-image: linear-gradient(var(--del), var(--del)); }
+	.virt tr.moved td.no, .virt td.no.moved, .nowrap tr.moved td.no, .nowrap td.no.moved { background-image: linear-gradient(var(--mv), var(--mv)); }
+
+	/* wrap={false}: lines keep to one line and the whole diff scrolls sideways, so the rows of the two sides stay aligned */
+	.nowrap .tbl { width: max-content; min-width: 100%; }
+	.nowrap .tbl[data-layout='split'] { width: max(100%, calc(2 * (var(--dv-no) + 2ch + var(--dv-code)))); }
+	.nowrap .code { white-space: pre; overflow-wrap: normal; width: auto; overflow: hidden; }
+	.nowrap td.no { position: sticky; left: 0; z-index: 1; background-color: var(--code-bg, var(--tr-surface)); }
+	.nowrap .tbl[data-layout='split'] td.no[data-side='new'] { position: relative; }
+	.nowrap .tbl:not([data-layout='split']) td.no:nth-child(2) { left: var(--dv-no); }
 
 	.ov { position: relative; flex: 0 0 14px; border-left: 1px solid var(--tr-outline-variant); background: var(--tr-surface-container-low); cursor: pointer; touch-action: none; min-height: 3rem; }
 	.mk { position: absolute; min-height: 2px; width: 25%; }

package/dist/DiffView.svelte.d.ts

@@ -1,14 +1,16 @@
 import { type Snippet } from 'svelte';
 import { type DiffLine, type LineSelection, type Side } from './diff.js';
 import { type Layout } from './rows.js';
+import { type LoadText } from './load.js';
 import type { PatchFile } from './patch.js';
 import type { DiffAnnotation } from './types.js';
+import type { HTMLAttributes } from 'svelte/elements';
 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. */
+    /** 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 unless you give `load`. */
     patch?: string;
     /** An already parsed file, as from `parsePatch`. Wins over `patch`. */
     file?: PatchFile;
@@ -69,7 +71,16 @@ type $$ComponentProps = {
     onselect?: (selection: LineSelection | null) => 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;
-};
+    /** Keep long lines on one line and scroll sideways instead of wrapping them. With `layout="split"` both sides scroll together, so rows stay aligned. */
+    wrap?: boolean;
+    /**
+     * For a `patch` or `file` without the full text: fetches the whole file (`side` is always `'new'` here) the first time "Expand N lines" is pressed on a gap
+     * between hunks. The unchanged lines are then filled in and the hunks re-folded as for text input. The button shows a loading state, and a rejection shows
+     * the error with a Retry button. Results are cached per path and side. Without `load` those gaps cannot be expanded.
+     */
+    load?: LoadText;
+    class?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'role' | 'tabindex' | 'onkeydown' | 'onselect'>;
 declare const DiffView: import("svelte").Component<$$ComponentProps, {
     next: () => void;
     prev: () => void;

package/dist/editor-util.d.ts

@@ -1,4 +1,15 @@
-import type { CodeMarker, CompletionItem, CompletionKind, MarkerSeverity } from './types.js';
+import type { CodeMarker, CompletionContext, CompletionItem, CompletionKind, MarkerSeverity } from './types.js';
+type Provide = (ctx: CompletionContext) => CompletionItem[] | undefined | Promise<CompletionItem[] | undefined>;
+/** The `completions` prop: a provider function, or one with the characters that open suggestions when typed. */
+export type CompletionsOption = Provide | {
+    provide: Provide;
+    triggerCharacters?: string[];
+};
+/** The provider and trigger characters of a `completions` prop. */
+export declare const completionProvider: (c: CompletionsOption | undefined) => {
+    provide: Provide;
+    triggerCharacters?: string[];
+} | undefined;
 /** Monaco's `MarkerSeverity` enum (numeric), passed in so these helpers stay independent of the Monaco bundle. */
 export interface SeverityEnum {
     Error: number;
@@ -44,3 +55,4 @@ export declare function toMonacoCompletion(item: CompletionItem, kinds: KindEnum
         endColumn: number;
     };
 };
+export {};

package/dist/editor-util.js

@@ -1,3 +1,5 @@
+/** The provider and trigger characters of a `completions` prop. */
+export const completionProvider = (c) => (typeof c === 'function' ? { provide: c } : c);
 export const markerSeverity = (s, e) => (s === 'error' ? e.Error : s === 'warning' ? e.Warning : s === 'hint' ? e.Hint : e.Info);
 /** Column just past the word that starts at `col` (1-based) in `lineText`; one column when there is no word there. */
 export function wordEnd(lineText, col) {

package/dist/files.js

@@ -42,7 +42,7 @@ export function buildTree(entries) {
             }
             at = d;
         }
-        at.node.children.push({ id: e.path, label: parts[parts.length - 1], icon: 'file', badge: statusLetter(e.status), description: `${e.status}, ${e.additions} added, ${e.deletions} removed` });
+        at.node.children.push({ id: e.path, label: parts[parts.length - 1], icon: 'file' });
     }
     const sort = (list) => {
         list.sort((a, b) => Number(!!b.children) - Number(!!a.children) || a.label.localeCompare(b.label));

package/dist/index.d.ts

@@ -7,17 +7,19 @@ export { detectLanguage, resolveLanguage, modelLanguage } from './lang.js';
 export { loadMonaco } from './monaco.js';
 export type { TypeScriptSetup } from './monaco.js';
 export type { SqlDialect } from './lang.js';
+export type { CompletionsOption } from './editor-util.js';
 export { buildPalette, monacoTheme, ensureContrast, contrast, parseColor } from './theme.js';
 export { diffLines, diffSeq, intraline, annotateIntraline, pairLines, inlineWords, hunkSpans, toHunks, formatHunks, unifiedPatch, foldItems, expandFold, splitRows, splitDocument, changeStarts, diffStats } from './diff.js';
 export { detectMoves } from './moves.js';
-export { parsePatch, patchLines, unquotePath, filePath } from './patch.js';
+export { parsePatch, patchLines, layoutPatch, unquotePath, filePath } from './patch.js';
 export { entriesFromPatch, buildTree } from './files.js';
 export type { CodeMarker, MarkerSeverity, CompletionItem, CompletionKind, CompletionContext, DiffAnnotation } from './types.js';
 export type { Palette, Role, Mode } from './theme.js';
 export type { DiffLine, Hunk, DiffOptions, IntraSeg, Expansion, LineSelection, Side, WordPart } from './diff.js';
 export type { Move, MoveOptions } from './moves.js';
 export type { PatchFile, FileStatus } from './patch.js';
-export type { DiffFileInput, DiffStatus } from './files.js';
+export type { DiffFileInput, DiffStatus, FileEntry } from './files.js';
+export type { LoadText } from './load.js';
 export { default as MergeView } from './MergeView.svelte';
 export { diff3, render as renderMerge, mergeText, chosenLines, customResolution } from './merge.js';
 export type { MergeState } from './MergeView.svelte';

package/dist/index.js

@@ -9,7 +9,7 @@ export { buildPalette, monacoTheme, ensureContrast, contrast, parseColor } from
 // pure diff and patch logic, usable without any component
 export { diffLines, diffSeq, intraline, annotateIntraline, pairLines, inlineWords, hunkSpans, toHunks, formatHunks, unifiedPatch, foldItems, expandFold, splitRows, splitDocument, changeStarts, diffStats } from './diff.js';
 export { detectMoves } from './moves.js';
-export { parsePatch, patchLines, unquotePath, filePath } from './patch.js';
+export { parsePatch, patchLines, layoutPatch, unquotePath, filePath } from './patch.js';
 export { entriesFromPatch, buildTree } from './files.js';
 export { default as MergeView } from './MergeView.svelte';
 export { diff3, render as renderMerge, mergeText, chosenLines, customResolution } from './merge.js';

package/dist/load.d.ts

@@ -0,0 +1,7 @@
+/** Fetches the full text of a file for one side of a diff. */
+export type LoadText = (path: string, side: 'old' | 'new') => Promise<string>;
+/**
+ * Wraps a loader so each path and side is fetched once: later calls (and calls made while the first is still running) share its result.
+ * A failed fetch is forgotten, so asking again retries.
+ */
+export declare function cachedLoader(load: LoadText): LoadText;

package/dist/load.js

@@ -0,0 +1,17 @@
+/**
+ * Wraps a loader so each path and side is fetched once: later calls (and calls made while the first is still running) share its result.
+ * A failed fetch is forgotten, so asking again retries.
+ */
+export function cachedLoader(load) {
+    const seen = new Map();
+    return (path, side) => {
+        const key = `${side}:${path}`;
+        let p = seen.get(key);
+        if (!p) {
+            p = load(path, side);
+            seen.set(key, p);
+            p.catch(() => seen.delete(key));
+        }
+        return p;
+    };
+}

package/dist/patch.d.ts

@@ -20,5 +20,14 @@ export declare const filePath: (f: Pick<PatchFile, "oldPath" | "newPath">) => st
 export declare function unquotePath(raw: string): string;
 /** Parses unified diff text, including `git diff` / `git format-patch` output with renames, mode changes, binary files, CRLF and "". */
 export declare function parsePatch(text: string): PatchFile[];
+/**
+ * The lines of a parsed file in display order, with a `gap` line for the unchanged lines a patch leaves out between (and before) hunks,
+ * and for each hunk the index of its first line. With `full` (the file's new text) the gaps are filled with the real lines instead,
+ * and the lines after the last hunk are added too.
+ */
+export declare function layoutPatch(file: Pick<PatchFile, 'hunks'>, full?: string): {
+    lines: DiffLine[];
+    anchors: number[];
+};
 /** The lines of a parsed file in display order, with a `gap` line for the unchanged lines a patch leaves out between (and before) hunks. */
-export declare function patchLines(file: Pick<PatchFile, 'hunks'>): DiffLine[];
+export declare const patchLines: (file: Pick<PatchFile, "hunks">) => DiffLine[];

package/dist/patch.js

@@ -170,16 +170,43 @@ export function parsePatch(text) {
     }
     return files;
 }
-/** The lines of a parsed file in display order, with a `gap` line for the unchanged lines a patch leaves out between (and before) hunks. */
-export function patchLines(file) {
+/** The last old and the last new line a hunk reaches (the line before it starts, for an empty side). */
+const ends = (h) => ({ old: h.oldLines ? h.oldStart + h.oldLines - 1 : h.oldStart, new: h.newLines ? h.newStart + h.newLines - 1 : h.newStart });
+/**
+ * The lines of a parsed file in display order, with a `gap` line for the unchanged lines a patch leaves out between (and before) hunks,
+ * and for each hunk the index of its first line. With `full` (the file's new text) the gaps are filled with the real lines instead,
+ * and the lines after the last hunk are added too.
+ */
+export function layoutPatch(file, full) {
     const out = [];
-    let prevEnd = 0; // the last old line the previous hunk reached
+    const anchors = [];
+    const text = full?.split('\n');
+    if (text)
+        text.length -= +(text[text.length - 1] === ''); // a final newline ends the last line, it does not start another
+    /** `count` unchanged lines whose old and new numbers start at `oldNo` and `newNo`, taken from the text. */
+    const unchanged = (oldNo, newNo, count) => {
+        const n = Math.max(0, Math.min(count, text.length - newNo + 1));
+        for (let k = 0; k < n; k++) {
+            const raw = text[newNo + k - 1];
+            out.push({ type: 'ctx', oldNo: oldNo + k, newNo: newNo + k, text: raw.replace(/\r$/, ''), cr: raw.endsWith('\r') });
+        }
+    };
+    let prev = { old: 0, new: 0 }; // the last old and new line the previous hunk reached
     for (const h of file.hunks) {
-        const first = h.oldLines ? h.oldStart : h.oldStart + 1;
-        if (first - 1 > prevEnd)
-            out.push({ type: 'gap', text: '', count: first - 1 - prevEnd });
+        const missing = (h.oldLines ? h.oldStart : h.oldStart + 1) - 1 - prev.old;
+        if (missing > 0) {
+            if (text)
+                unchanged(prev.old + 1, prev.new + 1, missing);
+            else
+                out.push({ type: 'gap', text: '', count: missing });
+        }
+        anchors.push(out.length);
         out.push(...h.lines);
-        prevEnd = h.oldLines ? h.oldStart + h.oldLines - 1 : h.oldStart;
+        prev = ends(h);
     }
-    return out;
+    if (text)
+        unchanged(prev.old + 1, prev.new + 1, text.length - prev.new);
+    return { lines: out, anchors };
 }
+/** The lines of a parsed file in display order, with a `gap` line for the unchanged lines a patch leaves out between (and before) hunks. */
+export const patchLines = (file) => layoutPatch(file).lines;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ruckc/truss-code",
-	"version": "1.13.0",
+	"version": "1.15.0",
 	"description": "Monaco code editor, read-only code blocks and diff views styled with Truss UI",
 	"type": "module",
 	"license": "MIT",