@ruckc/truss-code 0.0.0-stage → 1.12.0

package/dist/CodeBlock.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { loadMonaco } from './monaco.js';
+	import { highlight, segmentLine, splitLines, paletteVars, type Seg } from './highlight.js';
+	import { resolveLanguage } from './lang.js';
+	import { readTheme, watchTheme, type Theme } from './theme.js';
+
+	let {
+		code,
+		language,
+		path,
+		lineNumbers = false,
+		wrap = false,
+		label = 'Code',
+		maxHeight
+	}: {
+		/** The text to show. */
+		code: string;
+		/** A Monaco language id. Defaults to the language of `path`, else plain text. */
+		language?: string;
+		path?: string;
+		lineNumbers?: boolean;
+		/** Wrap long lines instead of scrolling sideways. */
+		wrap?: boolean;
+		/** Accessible name of the scrollable region. */
+		label?: string;
+		/** A CSS length; the block scrolls beyond it. */
+		maxHeight?: string | number;
+	} = $props();
+
+	let el: HTMLPreElement;
+	let theme = $state.raw<Theme>();
+	let tokens = $state.raw<{ code: string; lang: string; segs: Seg[][] }>();
+	const lang = $derived(resolveLanguage(language, path));
+	// until the tokenizer has run (and on the server) the text is shown as it is
+	const lines = $derived(tokens && tokens.code === code && tokens.lang === lang ? tokens.segs : splitLines(code).map((l) => segmentLine(l, [])));
+	const style = $derived((theme ? paletteVars(theme.palette) + `;font-size:${theme.metrics.fontSize}px;line-height:${theme.metrics.lineHeight}px` : '') + (maxHeight != null ? `;max-height:${typeof maxHeight === 'number' ? maxHeight + 'px' : maxHeight}` : ''));
+
+	onMount(() => {
+		theme = readTheme(el);
+		return watchTheme(el, () => (theme = readTheme(el)));
+	});
+
+	$effect(() => {
+		const text = code, language = lang;
+		let stale = false;
+		loadMonaco().then(
+			(m) => highlight(m, text, language).then((segs) => { if (!stale) tokens = { code: text, lang: language, segs }; }),
+			() => {} // without Monaco the block stays plain text
+		);
+		return () => { stale = true; };
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<pre bind:this={el} role="region" class="cb" class:wrap class:nums={lineNumbers} {style} tabindex="0" aria-label={label}><code>{#each lines as segs, i (i)}<span class="ln">{#if lineNumbers}<span class="no" aria-hidden="true">{i + 1}</span>{/if}<span class="tx">{#each segs as s}<span class={s.role ? `s-${s.role}` : undefined}>{s.text}</span>{/each}{'\n'}</span></span>{/each}</code></pre>
+
+<style>
+	.cb {
+		margin: 0; padding: var(--tr-space-3) var(--tr-space-4); overflow: auto; 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)); font-family: var(--tr-font-mono); font-size: var(--tr-text-md); line-height: 1.5; tab-size: 4;
+	}
+	.cb:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
+	code { font: inherit; }
+	.ln { display: block; }
+	.wrap .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
+	.nums .ln { display: grid; grid-template-columns: 3ch 1fr; column-gap: var(--tr-space-3); }
+	.no { text-align: right; color: var(--code-comment, var(--tr-on-surface-variant)); user-select: none; }
+	.tx { white-space: inherit; }
+	.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/CodeBlock.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    /** The text to show. */
+    code: string;
+    /** A Monaco language id. Defaults to the language of `path`, else plain text. */
+    language?: string;
+    path?: string;
+    lineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Accessible name of the scrollable region. */
+    label?: string;
+    /** A CSS length; the block scrolls beyond it. */
+    maxHeight?: string | number;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/CodeEditor.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Skeleton } from '@ruckc/truss-ui';
+	import type * as Monaco from 'monaco-editor';
+	import { loadMonaco, applyTheme, type MonacoApi } from './monaco.js';
+	import { resolveLanguage } 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';
+
+	let {
+		value = $bindable(''),
+		language,
+		path,
+		readonly = false,
+		minimap = false,
+		lineNumbers = true,
+		wordWrap = false,
+		height = 320,
+		screenReader = 'auto',
+		label = 'Code editor',
+		markers = [],
+		completions,
+		options,
+		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;
+		/** A Monaco language id (`sql`, `typescript`, `yaml`, ...). Defaults to the language of `path`'s extension, else plain text. */
+		language?: string;
+		/** A file name or path. Each distinct path gets its own model (text, undo history, view state), so switching `path` is switching tabs. */
+		path?: string;
+		readonly?: boolean;
+		minimap?: boolean;
+		lineNumbers?: boolean;
+		wordWrap?: boolean;
+		/** A pixel height, any CSS length, or `'fill'` to take the height of the parent (which needs a definite height). */
+		height?: number | string | 'fill';
+		/** `auto` follows the operating system's screen reader detection; `on` forces Monaco's screen-reader mode, `off` disables it. */
+		screenReader?: 'auto' | 'on' | 'off';
+		/** The accessible name of the editor. */
+		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>;
+		/** 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. */
+		onchange?: (value: string) => void;
+		/** Ctrl/Cmd+S. While unset, the browser's own shortcut is left alone. */
+		onsave?: (value: string) => void;
+		/** Ctrl/Cmd+Enter. While unset, Monaco's "insert line below" keeps the shortcut. */
+		onrun?: (value: string) => void;
+		/** The Monaco editor is created: gives you the instance and the Monaco namespace for anything not covered by props. */
+		onready?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: MonacoApi) => void;
+	} = $props();
+
+	const id = $props.id();
+	let host: HTMLDivElement;
+	let monaco = $state.raw<MonacoApi>();
+	let editor = $state.raw<Monaco.editor.IStandaloneCodeEditor>();
+	let model = $state.raw<Monaco.editor.ITextModel>();
+	let metrics = $state.raw<Metrics>(fontMetrics());
+	let failed = $state<string>();
+	const ready = $derived(!!editor);
+
+	const models = new Map<string, Monaco.editor.ITextModel>();
+	const views = new Map<string, Monaco.editor.ICodeEditorViewState | null>();
+	let current: string | undefined;
+	let external = false;
+	let hasSave: Monaco.editor.IContextKey<boolean> | undefined;
+	let hasRun: Monaco.editor.IContextKey<boolean> | undefined;
+	let contentSub: Monaco.IDisposable | undefined;
+
+	const lang = $derived(resolveLanguage(language, path));
+	const css = $derived(height === 'fill' ? '100%' : typeof height === 'number' ? `${height}px` : height);
+
+	/** The focusable Monaco editor instance, once loaded. */
+	export const getEditor = () => editor;
+	export const focus = () => editor?.focus();
+
+	function modelFor(m: MonacoApi, key: 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, lang, uri);
+			models.set(key, mdl);
+		}
+		return mdl;
+	}
+
+	onMount(() => {
+		let dead = false;
+		let stop = () => {};
+		loadMonaco().then(
+			(m) => {
+				if (dead) return;
+				monaco = m;
+				metrics = applyTheme(m, host).metrics;
+				const ed = m.editor.create(host, { automaticLayout: true, fixedOverflowWidgets: true, scrollBeyondLastLine: false, model: null });
+				// shortcuts only claim the keys while the matching callback is set, so Monaco's own bindings stay otherwise
+				hasSave = ed.createContextKey('trussHasSave', false);
+				hasRun = ed.createContextKey('trussHasRun', false);
+				ed.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.KeyS, () => onsave?.(ed.getValue()), 'trussHasSave');
+				ed.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.Enter, () => onrun?.(ed.getValue()), 'trussHasRun');
+				stop = watchTheme(host, () => (metrics = applyTheme(m, host).metrics));
+				editor = ed;
+				onready?.(ed, m);
+			},
+			(e: unknown) => { failed = String(e); }
+		);
+		return () => {
+			dead = true;
+			stop();
+			contentSub?.dispose();
+			editor?.dispose();
+			for (const mdl of models.values()) mdl.dispose();
+			models.clear();
+		};
+	});
+
+	// the model follows `path`; its text follows `value`
+	$effect(() => {
+		const m = monaco, ed = editor;
+		if (!m || !ed) return;
+		const key = path ?? '';
+		const mdl = modelFor(m, key);
+		if (current !== key) {
+			if (current !== undefined) views.set(current, ed.saveViewState());
+			ed.setModel(mdl);
+			if (views.get(key)) ed.restoreViewState(views.get(key)!);
+			current = key;
+			model = mdl;
+			contentSub?.dispose();
+			contentSub = mdl.onDidChangeContent(() => {
+				if (external) return;
+				value = mdl.getValue();
+				onchange?.(value);
+			});
+		}
+		if (mdl.getLanguageId() !== lang) m.editor.setModelLanguage(mdl, lang);
+		if (mdl.getValue() !== value) {
+			external = true;
+			ed.executeEdits('truss-bind', [{ range: mdl.getFullModelRange(), text: value }]);
+			ed.pushUndoStop();
+			external = false;
+		}
+	});
+
+	// options: props first, then the passthrough, then the theme's type metrics
+	$effect(() => {
+		if (!editor) return;
+		editor.updateOptions({
+			readOnly: readonly,
+			minimap: { enabled: minimap },
+			lineNumbers: lineNumbers ? 'on' : 'off',
+			wordWrap: wordWrap ? 'on' : 'off',
+			accessibilitySupport: screenReader,
+			ariaLabel: label,
+			// 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,
+			lineHeight: metrics.lineHeight,
+			fontFamily: metrics.fontFamily,
+			...options
+		});
+	});
+
+	$effect(() => {
+		if (!editor) return;
+		hasSave?.set(!!onsave);
+		hasRun?.set(!!onrun);
+	});
+
+	$effect(() => {
+		const m = monaco, mdl = model;
+		if (!m || !mdl) return;
+		m.editor.setModelMarkers(mdl, 'truss', markers.map((k) => toMonacoMarker(k, m.MarkerSeverity, mdl.getLineContent(Math.min(Math.max(k.line, 1), mdl.getLineCount())))));
+		return () => m.editor.setModelMarkers(mdl, 'truss', []);
+	});
+
+	$effect(() => {
+		const m = monaco, language = lang, on = !!completions;
+		if (!m || !on) return;
+		const d = m.languages.registerCompletionItemProvider(language, {
+			provideCompletionItems: async (mdl, pos) => {
+				if (mdl !== model) return { suggestions: [] };
+				const w = mdl.getWordUntilPosition(pos);
+				const items = (await completions?.({ value: mdl.getValue(), language, 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)) };
+			}
+		});
+		return () => d.dispose();
+	});
+</script>
+
+<div class="ce" style:height={css} 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">
+			{#if failed}<p role="alert">The editor could not be loaded: {failed}</p>{:else}<Skeleton variant="rect" height="100%" label="Loading editor" />{/if}
+		</div>
+	{/if}
+	<span class="vh" id="ce-hint-{id}">Tab moves focus out of the editor when you press Control plus M; press Control plus M again to make Tab insert indentation.</span>
+</div>
+
+<style>
+	.ce {
+		position: relative; min-height: 96px; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md);
+		overflow: hidden; background: var(--tr-surface); font-family: var(--tr-font-sans);
+	}
+	.ce:focus-within { border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
+	.mount { position: absolute; inset: 0; }
+	.ph { position: absolute; inset: 0; display: grid; }
+	.ph :global(.sk-root) { display: block; width: 100%; height: 100%; }
+	.ph p { margin: auto; padding: var(--tr-space-4); color: var(--tr-danger); font-size: var(--tr-text-md); }
+	.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+	/* hovers, suggestions and menus get the tooltip look */
+	.ce :global(.monaco-hover), .ce :global(.suggest-widget) {
+		border-radius: var(--tr-radius-sm); box-shadow: var(--tr-elevation-2); font-family: var(--tr-font-sans); font-size: var(--tr-text-sm);
+	}
+</style>

package/dist/CodeEditor.svelte.d.ts

@@ -0,0 +1,41 @@
+import type * as Monaco from 'monaco-editor';
+import { type MonacoApi } from './monaco.js';
+import type { CodeMarker, CompletionContext, CompletionItem } from './types.js';
+type $$ComponentProps = {
+    /** The document text. One model per `path` keeps each tab's undo history; the text you bind belongs to the current `path`. */
+    value?: string;
+    /** A Monaco language id (`sql`, `typescript`, `yaml`, ...). Defaults to the language of `path`'s extension, else plain text. */
+    language?: string;
+    /** A file name or path. Each distinct path gets its own model (text, undo history, view state), so switching `path` is switching tabs. */
+    path?: string;
+    readonly?: boolean;
+    minimap?: boolean;
+    lineNumbers?: boolean;
+    wordWrap?: boolean;
+    /** A pixel height, any CSS length, or `'fill'` to take the height of the parent (which needs a definite height). */
+    height?: number | string | 'fill';
+    /** `auto` follows the operating system's screen reader detection; `on` forces Monaco's screen-reader mode, `off` disables it. */
+    screenReader?: 'auto' | 'on' | 'off';
+    /** The accessible name of the editor. */
+    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>;
+    /** 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. */
+    onchange?: (value: string) => void;
+    /** Ctrl/Cmd+S. While unset, the browser's own shortcut is left alone. */
+    onsave?: (value: string) => void;
+    /** Ctrl/Cmd+Enter. While unset, Monaco's "insert line below" keeps the shortcut. */
+    onrun?: (value: string) => void;
+    /** The Monaco editor is created: gives you the instance and the Monaco namespace for anything not covered by props. */
+    onready?: (editor: Monaco.editor.IStandaloneCodeEditor, monaco: MonacoApi) => void;
+};
+declare const CodeEditor: import("svelte").Component<$$ComponentProps, {
+    /** The focusable Monaco editor instance, once loaded. */ getEditor: () => Monaco.editor.IStandaloneCodeEditor | undefined;
+    focus: () => void | undefined;
+}, "value">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/DiffEditor.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Skeleton } from '@ruckc/truss-ui';
+	import type * as Monaco from 'monaco-editor';
+	import { loadMonaco, applyTheme, type MonacoApi } from './monaco.js';
+	import { resolveLanguage } from './lang.js';
+	import { watchTheme, fontMetrics, type Metrics } from './theme.js';
+
+	let {
+		original = '',
+		modified = $bindable(''),
+		language,
+		path,
+		sideBySide = true,
+		readonly = false,
+		originalEditable = false,
+		ignoreTrimWhitespace = true,
+		height = 320,
+		label = 'Diff editor',
+		options,
+		onchange,
+		onready
+	}: {
+		/** The left side. */
+		original?: string;
+		/** The right side, the one you edit. */
+		modified?: string;
+		/** A Monaco language id; defaults to the language of `path`, else plain text. */
+		language?: string;
+		path?: string;
+		/** Two panes (true) or one inline pane (false). Monaco also switches to inline by itself in a narrow container. */
+		sideBySide?: boolean;
+		/** Make the modified side read-only. */
+		readonly?: boolean;
+		/** Allow edits on the original side too. */
+		originalEditable?: boolean;
+		ignoreTrimWhitespace?: boolean;
+		/** A pixel height, any CSS length, or `'fill'` for the parent's height. */
+		height?: number | string | 'fill';
+		label?: string;
+		/** Any Monaco `IDiffEditorConstructionOptions`, applied after the props above. */
+		options?: Monaco.editor.IDiffEditorConstructionOptions;
+		/** Fires with the modified text after every edit made by the user. */
+		onchange?: (value: string) => void;
+		onready?: (editor: Monaco.editor.IStandaloneDiffEditor, monaco: MonacoApi) => void;
+	} = $props();
+
+	const id = $props.id();
+	let host: HTMLDivElement;
+	let monaco = $state.raw<MonacoApi>();
+	let editor = $state.raw<Monaco.editor.IStandaloneDiffEditor>();
+	let metrics = $state.raw<Metrics>(fontMetrics());
+	let failed = $state<string>();
+	let models: { original: Monaco.editor.ITextModel; modified: Monaco.editor.ITextModel } | undefined;
+	let external = false;
+	const ready = $derived(!!editor);
+	const lang = $derived(resolveLanguage(language, path));
+	const css = $derived(height === 'fill' ? '100%' : typeof height === 'number' ? `${height}px` : height);
+
+	/** The Monaco diff editor, once loaded. */
+	export const getEditor = () => editor;
+	export const focus = () => editor?.getModifiedEditor().focus();
+
+	onMount(() => {
+		let dead = false;
+		let stop = () => {};
+		const subs: Monaco.IDisposable[] = [];
+		loadMonaco().then(
+			(m) => {
+				if (dead) return;
+				monaco = m;
+				metrics = applyTheme(m, host).metrics;
+				const uri = (side: string) => m.Uri.from({ scheme: 'inmemory', authority: `truss-diff-${id}`, path: `/${side}/${(path ?? 'file').replace(/^\/+/, '')}` });
+				models = { original: m.editor.createModel(original, lang, uri('original')), modified: m.editor.createModel(modified, lang, uri('modified')) };
+				const ed = m.editor.createDiffEditor(host, { automaticLayout: true, fixedOverflowWidgets: true, scrollBeyondLastLine: false });
+				ed.setModel(models);
+				subs.push(models.modified.onDidChangeContent(() => {
+					if (external) return;
+					modified = models!.modified.getValue();
+					onchange?.(modified);
+				}));
+				stop = watchTheme(host, () => (metrics = applyTheme(m, host).metrics));
+				editor = ed;
+				onready?.(ed, m);
+			},
+			(e: unknown) => { failed = String(e); }
+		);
+		return () => {
+			dead = true;
+			stop();
+			subs.forEach((s) => s.dispose());
+			editor?.dispose();
+			models?.original.dispose();
+			models?.modified.dispose();
+		};
+	});
+
+	$effect(() => {
+		const m = monaco;
+		if (!m || !models || !editor) return;
+		for (const x of [models.original, models.modified]) if (x.getLanguageId() !== lang) m.editor.setModelLanguage(x, lang);
+		if (models.original.getValue() !== original) models.original.setValue(original);
+		if (models.modified.getValue() !== modified) {
+			external = true;
+			editor.getModifiedEditor().executeEdits('truss-bind', [{ range: models.modified.getFullModelRange(), text: modified }]);
+			external = false;
+		}
+	});
+
+	$effect(() => {
+		if (!editor) return;
+		editor.updateOptions({
+			renderSideBySide: sideBySide,
+			readOnly: readonly,
+			originalEditable,
+			ignoreTrimWhitespace,
+			ariaLabel: label,
+			fontSize: metrics.fontSize,
+			lineHeight: metrics.lineHeight,
+			fontFamily: metrics.fontFamily,
+			...options
+		});
+	});
+</script>
+
+<div class="de" style:height={css} data-ready={ready} role="group" aria-label={label}>
+	<div class="mount" bind:this={host}></div>
+	{#if !ready}
+		<div class="ph">
+			{#if failed}<p role="alert">The editor could not be loaded: {failed}</p>{:else}<Skeleton variant="rect" height="100%" label="Loading editor" />{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.de { position: relative; min-height: 96px; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); overflow: hidden; background: var(--tr-surface); }
+	.de:focus-within { border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
+	.mount { position: absolute; inset: 0; }
+	.ph { position: absolute; inset: 0; display: grid; }
+	.ph :global(.sk-root) { display: block; width: 100%; height: 100%; }
+	.ph p { margin: auto; padding: var(--tr-space-4); color: var(--tr-danger); font-size: var(--tr-text-md); }
+</style>

package/dist/DiffEditor.svelte.d.ts

@@ -0,0 +1,32 @@
+import type * as Monaco from 'monaco-editor';
+import { type MonacoApi } from './monaco.js';
+type $$ComponentProps = {
+    /** The left side. */
+    original?: string;
+    /** The right side, the one you edit. */
+    modified?: string;
+    /** A Monaco language id; defaults to the language of `path`, else plain text. */
+    language?: string;
+    path?: string;
+    /** Two panes (true) or one inline pane (false). Monaco also switches to inline by itself in a narrow container. */
+    sideBySide?: boolean;
+    /** Make the modified side read-only. */
+    readonly?: boolean;
+    /** Allow edits on the original side too. */
+    originalEditable?: boolean;
+    ignoreTrimWhitespace?: boolean;
+    /** A pixel height, any CSS length, or `'fill'` for the parent's height. */
+    height?: number | string | 'fill';
+    label?: string;
+    /** Any Monaco `IDiffEditorConstructionOptions`, applied after the props above. */
+    options?: Monaco.editor.IDiffEditorConstructionOptions;
+    /** Fires with the modified text after every edit made by the user. */
+    onchange?: (value: string) => void;
+    onready?: (editor: Monaco.editor.IStandaloneDiffEditor, monaco: MonacoApi) => void;
+};
+declare const DiffEditor: import("svelte").Component<$$ComponentProps, {
+    /** The Monaco diff editor, once loaded. */ getEditor: () => Monaco.editor.IStandaloneDiffEditor | undefined;
+    focus: () => void | undefined;
+}, "modified">;
+type DiffEditor = ReturnType<typeof DiffEditor>;
+export default DiffEditor;