@knime/kds-code-editor 6.2.0 → 6.3.0

package/dist/index.js

@@ -1,11 +1,178 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, watchEffect } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { useClipboard, useDebounceFn, useResizeObserver } from "@vueuse/core";
-import { KeyCode, editor } from "monaco-editor";
+import { KeyCode, editor, languages } from "monaco-editor";
 import { KdsButton, KdsMenuButton, KdsProgressButton, KdsSubText, KdsToggleButton, useKdsDarkMode } from "@knime/kds-components";
 import { FitAddon } from "@xterm/addon-fit";
 import { Unicode11Addon } from "@xterm/addon-unicode11";
 import { Terminal } from "@xterm/xterm";
-import './index.css';//#region ../styles/dist/tokens/ts/color.js
+import './index.css';//#region src/CodeEditor/enums.ts
+var kdsCodeEditorState = {
+	DEFAULT: "default",
+	ERROR: "error",
+	WARNING: "warning"
+};
+var kdsCodeEditorStates = Object.values(kdsCodeEditorState);
+//#endregion
+//#region src/_helper/BaseCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "header"
+};
+var _hoisted_2 = { class: "left-block" };
+var _hoisted_3 = { class: "title" };
+var _hoisted_4 = {
+	key: 0,
+	class: "title"
+};
+var _hoisted_5 = {
+	class: "change-counts",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = { class: "added-lines" };
+var _hoisted_7 = { class: "removed-lines" };
+var _hoisted_8 = { class: "change-counts-for-screen-readers" };
+var _hoisted_9 = { class: "action-buttons" };
+var _hoisted_10 = ["id"];
+var _hoisted_11 = {
+	key: 1,
+	class: "footer"
+};
+var BaseCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "BaseCodeEditor",
+	props: {
+		headerLabel: {},
+		subTextId: {},
+		hideHeader: {
+			type: Boolean,
+			default: false
+		},
+		state: { default: () => kdsCodeEditorState.DEFAULT },
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		subText: { default: () => void 0 },
+		copyable: {
+			type: Boolean,
+			default: true
+		},
+		copied: {
+			type: Boolean,
+			default: false
+		},
+		copyButtonAriaLabel: { default: "" },
+		editorActions: { default: () => void 0 },
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		fill: {
+			type: Boolean,
+			default: false
+		},
+		codeHeight: { default: () => void 0 },
+		changeSummary: { default: () => void 0 },
+		addedLines: { default: () => void 0 },
+		removedLines: { default: () => void 0 },
+		collapsed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["copy", "collapsedToggle"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const codeContainer = useTemplateRef("code-container");
+		const codeContainerId = useId();
+		__expose({ 
+		/** The element Monaco should be mounted into. */
+getCodeContainer: () => codeContainer.value });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["kds-code-editor", { fill: __props.fill }]) }, [createElementVNode("div", { class: normalizeClass([
+				"editor",
+				__props.state,
+				{
+					focused: __props.focused,
+					collapsed: __props.collapsed
+				}
+			]) }, [
+				!__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+					createElementVNode("span", _hoisted_3, toDisplayString(__props.changeSummary ?? __props.headerLabel), 1),
+					__props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true),
+					__props.changeSummary !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.addedLines !== void 0 && __props.removedLines !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_5, [createElementVNode("span", _hoisted_6, "+" + toDisplayString(__props.addedLines), 1), createElementVNode("span", _hoisted_7, "-" + toDisplayString(__props.removedLines), 1)]), createElementVNode("span", _hoisted_8, toDisplayString(__props.addedLines) + " added and " + toDisplayString(__props.removedLines) + " removed lines ", 1)], 64)) : createCommentVNode("", true), createVNode(unref(KdsButton), mergeProps({ ariaLabel: __props.collapsed ? "Expand code diff" : "Collapse code diff" }, {
+						"aria-expanded": !__props.collapsed,
+						"aria-controls": unref(codeContainerId),
+						"leading-icon": __props.collapsed ? "chevron-left" : "chevron-down",
+						size: "small",
+						variant: "transparent",
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("collapsedToggle"))
+					}), null, 16, [
+						"aria-expanded",
+						"aria-controls",
+						"leading-icon"
+					])], 64)) : createCommentVNode("", true)
+				]), createElementVNode("div", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.editorActions, (action, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: `editor-action-${index}` }, [action.type === "button" ? (openBlock(), createBlock(unref(KdsButton), mergeProps({
+						key: 0,
+						ref_for: true
+					}, action.props, {
+						size: "small",
+						onClick: action.onClick
+					}), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(unref(KdsToggleButton), mergeProps({
+						key: 1,
+						ref_for: true
+					}, action.props, {
+						size: "small",
+						"onUpdate:modelValue": action.onUpdateModelValue
+					}), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(unref(KdsMenuButton), mergeProps({
+						key: 2,
+						ref_for: true
+					}, action.props, {
+						size: "small",
+						onItemClick: action.onItemClick
+					}), null, 16, ["onItemClick"])) : createCommentVNode("", true)], 64);
+				}), 128)), __props.copyable ? (openBlock(), createBlock(unref(KdsProgressButton), mergeProps({ key: 0 }, { ariaLabel: __props.copyButtonAriaLabel }, {
+					"leading-icon": __props.copied ? "checkmark" : "copy",
+					state: __props.copied ? "success" : "default",
+					size: "small",
+					variant: "transparent",
+					tooltip: "Copy to clipboard",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("copy"))
+				}), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
+				withDirectives(createElementVNode("div", {
+					id: unref(codeContainerId),
+					ref: "code-container",
+					class: "code",
+					style: normalizeStyle(__props.codeHeight ? { height: __props.codeHeight } : void 0)
+				}, null, 12, _hoisted_10), [[vShow, !__props.collapsed]]),
+				_ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 512)), [[vShow, !__props.collapsed]]) : createCommentVNode("", true)
+			], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
+				key: 0,
+				id: __props.subTextId,
+				"sub-text": __props.subText,
+				error: __props.state === unref(kdsCodeEditorState).ERROR,
+				warning: __props.state === unref(kdsCodeEditorState).WARNING
+			}, null, 8, [
+				"id",
+				"sub-text",
+				"error",
+				"warning"
+			])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/_helper/BaseCodeEditor.vue
+var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-81449d1b"]]);
+//#endregion
+//#region ../styles/dist/tokens/ts/color.js
 /**
 * Do not edit directly, this file was auto-generated
 * from the design token sources in src/tokens.
@@ -5087,19 +5254,393 @@ var font = {
 	}
 };
 //#endregion
-//#region src/CodeEditor/enums.ts
-var kdsCodeEditorState = {
-	DEFAULT: "default",
-	ERROR: "error",
-	WARNING: "warning"
+//#region src/_helper/monacoCommon.ts
+var codeFont = font.base.code.small;
+/**
+* Construction options shared by `KdsCodeEditor` and `KdsCodeDiffEditor`.
+*/
+var COMMON_EDITOR_OPTIONS = {
+	automaticLayout: true,
+	minimap: { enabled: false },
+	scrollBeyondLastLine: false,
+	lineNumbersMinChars: 3,
+	fontFamily: `"${codeFont.fontFamily}", monospace`,
+	fontWeight: `${codeFont.fontWeight}`,
+	fontSize: codeFont.fontSize.value,
+	fixedOverflowWidgets: true,
+	scrollbar: { alwaysConsumeMouseWheel: false },
+	accessibilitySupport: "on"
+};
+var MONACO_THEME_LIGHT = "vs-light";
+var MONACO_THEME_DARK = "vs-dark";
+var getMonacoTheme = (isDark) => isDark ? MONACO_THEME_DARK : MONACO_THEME_LIGHT;
+/**
+* Monaco's overflow widgets (error tooltips, autocomplete) can clip or appear
+* far away from the pointer in certain containers (such as stories in
+* Storybook, or ancestors with a CSS `transform`). Hosting them in an
+* external node on `document.body` avoids that; the node needs the
+* `monaco-editor` class to keep the popover styling. The caller owns the
+* returned node and must remove it on unmount.
+*/
+var createOverflowWidgetsDomNode = () => {
+	const node = document.createElement("div");
+	node.classList.add("monaco-editor");
+	document.body.appendChild(node);
+	return node;
+};
+/**
+* Accessibility: Escape arms tab-focus mode on the given editor so the next
+* Tab (or Shift+Tab) moves focus out of the editor instead of indenting;
+* any other key press or re-entering the editor restores Tab-as-indentation.
+*/
+var setupTabFocusHandling = (editorInstance) => {
+	let tabFocusArmed = false;
+	const setTabFocus = (armed) => {
+		if (tabFocusArmed !== armed) {
+			tabFocusArmed = armed;
+			editorInstance.updateOptions({ tabFocusMode: armed });
+		}
+	};
+	const tabFocusNeutralKeys = [
+		KeyCode.Tab,
+		KeyCode.Shift,
+		KeyCode.Ctrl,
+		KeyCode.Alt,
+		KeyCode.Meta
+	];
+	editorInstance.onKeyDown((event) => {
+		if (event.keyCode === KeyCode.Escape) setTabFocus(true);
+		else if (!tabFocusNeutralKeys.includes(event.keyCode)) setTabFocus(false);
+	});
+	editorInstance.onDidFocusEditorText(() => {
+		setTabFocus(false);
+	});
+};
+//#endregion
+//#region src/CodeEditor/tomlLanguage.ts
+/**
+* Monarch syntax definition for TOML (v1.1.0).
+* Registers "toml" as a language with Monaco Editor.
+*
+* Uses compound patterns (like GitHub's TextMate TOML grammar) to distinguish
+* table headers, keys, and values without relying on end-of-line state pops:
+* - Table headers: matched as whole `[key.path]` / `[[key.path]]` patterns
+* - Key assignments: matched as `key =` compound patterns
+* - Values: matched directly in root (strings, numbers, booleans, dates)
+* - Arrays / inline tables: use sub-states for bracket matching
+*
+* Spec: https://toml.io/en/v1.1.0
+* Monarch docs: https://microsoft.github.io/monaco-editor/monarch.html
+*/
+/**
+* Registers the TOML language with Monaco. Idempotent — registering is
+* page-global, so the first call wins and later calls return early.
+*
+* Called explicitly (from `setupMonacoEnvironment`) rather than as a
+* module side effect: the package declares `sideEffects` in its
+* package.json, so bundlers are allowed to drop bare side-effect imports
+* of this module in production builds.
+*/
+var registerTomlLanguage = () => {
+	if (languages.getLanguages().some((language) => language.id === "toml")) return;
+	languages.register({ id: "toml" });
+	languages.setLanguageConfiguration("toml", {
+		comments: { lineComment: "#" },
+		brackets: [["{", "}"], ["[", "]"]],
+		autoClosingPairs: [
+			{
+				open: "{",
+				close: "}"
+			},
+			{
+				open: "[",
+				close: "]"
+			},
+			{
+				open: "\"\"\"",
+				close: "\"\"\""
+			},
+			{
+				open: "'''",
+				close: "'''"
+			},
+			{
+				open: "\"",
+				close: "\"",
+				notIn: ["string"]
+			},
+			{
+				open: "'",
+				close: "'",
+				notIn: ["string"]
+			}
+		],
+		surroundingPairs: [
+			{
+				open: "{",
+				close: "}"
+			},
+			{
+				open: "[",
+				close: "]"
+			},
+			{
+				open: "\"",
+				close: "\""
+			},
+			{
+				open: "'",
+				close: "'"
+			}
+		]
+	});
+	languages.setMonarchTokensProvider("toml", {
+		defaultToken: "",
+		brackets: [{
+			open: "[",
+			close: "]",
+			token: "delimiter.square"
+		}, {
+			open: "{",
+			close: "}",
+			token: "delimiter.curly"
+		}],
+		escapes: /\\(?:[btnfre"\\]|x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+		tokenizer: {
+			root: [
+				{ include: "@whitespace" },
+				{ include: "@comment" },
+				[/(\[\[)(\s*[A-Za-z0-9_-]+(?:\s*\.\s*[A-Za-z0-9_-]+)*\s*)(\]\])/, [
+					"metatag.delimiter",
+					"metatag",
+					"metatag.delimiter"
+				]],
+				[/(\[)(\s*[A-Za-z0-9_-]+(?:\s*\.\s*[A-Za-z0-9_-]+)*\s*)(\])/, [
+					"metatag.delimiter",
+					"metatag",
+					"metatag.delimiter"
+				]],
+				[/([A-Za-z0-9_-]+)(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/("[^"]*")(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/('[^']*')(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/([A-Za-z0-9_-]+)(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[/("[^"]*")(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[/('[^']*')(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[
+					/\{/,
+					"@brackets",
+					"@inlineTable"
+				],
+				[
+					/\[/,
+					"@brackets",
+					"@array"
+				],
+				{ include: "@strings" },
+				{ include: "@dateTime" },
+				{ include: "@numbers" },
+				{ include: "@booleans" },
+				[/[=,]/, "delimiter"]
+			],
+			inlineTable: [
+				{ include: "@whitespace" },
+				{ include: "@comment" },
+				[
+					/\}/,
+					"@brackets",
+					"@pop"
+				],
+				[/,/, "delimiter"],
+				[/([A-Za-z0-9_-]+)(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/("[^"]*")(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/('[^']*')(\s*)(=)/, [
+					"type",
+					"white",
+					"operators"
+				]],
+				[/([A-Za-z0-9_-]+)(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[/("[^"]*")(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[/('[^']*')(\s*)(\.)/, [
+					"type",
+					"white",
+					"delimiter"
+				]],
+				[
+					/\{/,
+					"@brackets",
+					"@inlineTable"
+				],
+				[
+					/\[/,
+					"@brackets",
+					"@array"
+				],
+				{ include: "@strings" },
+				{ include: "@dateTime" },
+				{ include: "@numbers" },
+				{ include: "@booleans" }
+			],
+			array: [
+				{ include: "@whitespace" },
+				{ include: "@comment" },
+				[
+					/\]/,
+					"@brackets",
+					"@pop"
+				],
+				[/,/, "delimiter"],
+				[
+					/\{/,
+					"@brackets",
+					"@inlineTable"
+				],
+				[
+					/\[/,
+					"@brackets",
+					"@array"
+				],
+				{ include: "@strings" },
+				{ include: "@dateTime" },
+				{ include: "@numbers" },
+				{ include: "@booleans" }
+			],
+			whitespace: [[/[ \t\r\n]+/, "white"]],
+			comment: [[/#.*$/, "comment"]],
+			booleans: [[/(?:true|false)(?![A-Za-z0-9_-])/, "keyword"]],
+			dateTime: [
+				[/\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:\d{2})?/, "number"],
+				[/\d{4}-\d{2}-\d{2}/, "number"],
+				[/\d{2}:\d{2}(:\d{2}(\.\d+)?)?/, "number"]
+			],
+			numbers: [
+				[/0x[0-9A-Fa-f][0-9A-Fa-f_]*/, "number.hex"],
+				[/0o[0-7][0-7_]*/, "number.octal"],
+				[/0b[01][01_]*/, "number.binary"],
+				[/[+-]?(?:inf|nan)(?![A-Za-z0-9_-])/, "number.float"],
+				[/[+-]?\d[\d_]*\.\d[\d_]*([eE][+-]?\d[\d_]*)?/, "number.float"],
+				[/[+-]?\d[\d_]*[eE][+-]?\d[\d_]*/, "number.float"],
+				[/[+-]?\d[\d_]*/, "number"]
+			],
+			strings: [
+				[
+					/"""/,
+					"string",
+					"@string.multiBasic"
+				],
+				[
+					/'''/,
+					"string",
+					"@string.multiLiteral"
+				],
+				[
+					/"/,
+					"string",
+					"@string.basic"
+				],
+				[
+					/'/,
+					"string",
+					"@string.literal"
+				]
+			],
+			"string.basic": [
+				[
+					/[^\\"]*$/,
+					"string.invalid",
+					"@pop"
+				],
+				[/[^\\"]+/, "string"],
+				[/@escapes/, "string.escape"],
+				[/\\./, "string.escape.invalid"],
+				[
+					/"/,
+					"string",
+					"@pop"
+				]
+			],
+			"string.multiBasic": [
+				[
+					/"""/,
+					"string",
+					"@pop"
+				],
+				[/[^\\"]+/, "string"],
+				[/@escapes/, "string.escape"],
+				[/\\./, "string.escape.invalid"],
+				[/"/, "string"]
+			],
+			"string.literal": [
+				[
+					/[^']*$/,
+					"string.invalid",
+					"@pop"
+				],
+				[/[^']+/, "string"],
+				[
+					/'/,
+					"string",
+					"@pop"
+				]
+			],
+			"string.multiLiteral": [
+				[
+					/'''/,
+					"string",
+					"@pop"
+				],
+				[/[^']+/, "string"],
+				[/'/, "string"]
+			]
+		}
+	});
 };
-var kdsCodeEditorStates = Object.values(kdsCodeEditorState);
 //#endregion
 //#region src/CodeEditor/monacoEnvironment.ts
 document.fonts?.ready.then(() => {
 	editor.remeasureFonts();
 });
 var setupMonacoEnvironment = () => {
+	registerTomlLanguage();
 	if (self.MonacoEnvironment) return;
 	self.MonacoEnvironment = { getWorker: async (_workerId, label) => {
 		if (label === "json") {
@@ -5111,28 +5652,8 @@ var setupMonacoEnvironment = () => {
 	} };
 };
 //#endregion
-//#region src/CodeEditor/KdsCodeEditor.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "header"
-};
-var _hoisted_2 = { class: "left-block" };
-var _hoisted_3 = { class: "title" };
-var _hoisted_4 = {
-	key: 0,
-	class: "title"
-};
-var _hoisted_5 = { class: "action-buttons" };
-var _hoisted_6 = {
-	key: 1,
-	class: "footer"
-};
-var INITIAL_LINE_HEIGHT = 18;
-var EXTRA_PADDING = 3;
-var DEFAULT_OVERVIEW_RULER_LANES = 3;
-var MONACO_THEME_LIGHT = "vs-light";
-var MONACO_THEME_DARK = "vs-dark";
-var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+//#region src/CodeEditor/KdsCodeEditor.vue
+var KdsCodeEditor_default = /* @__PURE__ */ defineComponent({
 	__name: "KdsCodeEditor",
 	props: /*@__PURE__*/ mergeModels({
 		language: { default: "plaintext" },
@@ -5167,26 +5688,24 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		setupMonacoEnvironment();
 		const modelValue = useModel(__props, "modelValue");
 		const subTextId = useId();
-		const container = useTemplateRef("editor-container");
+		const baseCodeEditor = useTemplateRef("base-code-editor");
 		let editorInstance;
 		let overflowWidgetsDomNode;
 		const isEditorFocused = ref(false);
 		const headerLabel = computed(() => __props.languageLabel ?? __props.language.toUpperCase());
 		const editorAriaLabel = computed(() => `${headerLabel.value} code editor${__props.readOnly ? ", read-only" : ""}. Press Escape followed by Tab to move focus out of the editor.`);
 		const fillContainer = computed(() => __props.minRows === void 0 && __props.maxRows === void 0);
-		const lineHeight = ref(INITIAL_LINE_HEIGHT);
+		const lineHeight = ref(18);
 		const contentLineCount = ref(1);
 		const editorHeight = computed(() => {
 			if (fillContainer.value) return;
 			const floor = Math.max(__props.minRows ?? 1, 1);
 			const cap = __props.maxRows ?? Infinity;
 			const rows = Math.min(cap, Math.max(floor, contentLineCount.value));
-			return `${lineHeight.value * rows + EXTRA_PADDING}px`;
+			return `${lineHeight.value * rows + 3}px`;
 		});
-		const codeFont = font.base.code.small;
-		const getMonacoTheme = (dark) => dark ? MONACO_THEME_DARK : MONACO_THEME_LIGHT;
 		const { isDark } = useKdsDarkMode();
-		const getEditorInputElement = () => container.value?.querySelector("[role=\"textbox\"]");
+		const getEditorInputElement = () => baseCodeEditor.value?.getCodeContainer()?.querySelector("[role=\"textbox\"]");
 		const syncEditorInputAria = () => {
 			const input = getEditorInputElement();
 			if (!input) return;
@@ -5202,28 +5721,18 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			copy(editorInstance?.getModel()?.getValue() ?? "");
 		};
 		onMounted(() => {
-			if (!container.value) return;
-			overflowWidgetsDomNode = document.createElement("div");
-			overflowWidgetsDomNode.classList.add("monaco-editor");
-			document.body.appendChild(overflowWidgetsDomNode);
-			editorInstance = editor.create(container.value, {
+			const container = baseCodeEditor.value?.getCodeContainer();
+			if (!container) return;
+			overflowWidgetsDomNode = createOverflowWidgetsDomNode();
+			editorInstance = editor.create(container, {
+				...COMMON_EDITOR_OPTIONS,
 				value: modelValue.value,
 				language: __props.language,
-				automaticLayout: true,
-				minimap: { enabled: false },
-				overviewRulerLanes: __props.overviewRuler ? DEFAULT_OVERVIEW_RULER_LANES : 0,
-				scrollBeyondLastLine: false,
-				lineNumbersMinChars: 3,
-				fontFamily: `"${codeFont.fontFamily}", monospace`,
-				fontWeight: `${codeFont.fontWeight}`,
-				fontSize: codeFont.fontSize.value,
-				fixedOverflowWidgets: true,
+				overviewRulerLanes: __props.overviewRuler ? 3 : 0,
 				overflowWidgetsDomNode,
-				scrollbar: { alwaysConsumeMouseWheel: false },
 				readOnly: __props.readOnly,
 				theme: getMonacoTheme(isDark.value),
-				ariaLabel: editorAriaLabel.value,
-				accessibilitySupport: "on"
+				ariaLabel: editorAriaLabel.value
 			});
 			syncEditorInputAria();
 			lineHeight.value = editorInstance.getOption(editor.EditorOption.lineHeight);
@@ -5233,26 +5742,8 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				contentLineCount.value = editorInstance?.getModel()?.getLineCount() ?? 1;
 				if (value !== modelValue.value) modelValue.value = value;
 			});
-			let tabFocusArmed = false;
-			const setTabFocus = (armed) => {
-				if (tabFocusArmed !== armed) {
-					tabFocusArmed = armed;
-					editorInstance?.updateOptions({ tabFocusMode: armed });
-				}
-			};
-			const tabFocusNeutralKeys = [
-				KeyCode.Tab,
-				KeyCode.Shift,
-				KeyCode.Ctrl,
-				KeyCode.Alt,
-				KeyCode.Meta
-			];
-			editorInstance.onKeyDown((event) => {
-				if (event.keyCode === KeyCode.Escape) setTabFocus(true);
-				else if (!tabFocusNeutralKeys.includes(event.keyCode)) setTabFocus(false);
-			});
+			setupTabFocusHandling(editorInstance);
 			editorInstance.onDidFocusEditorText(() => {
-				setTabFocus(false);
 				isEditorFocused.value = true;
 			});
 			editorInstance.onDidBlurEditorText(() => {
@@ -5269,7 +5760,7 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			editorInstance?.updateOptions({ ariaLabel });
 		});
 		watch(() => __props.overviewRuler, (enabled) => {
-			editorInstance?.updateOptions({ overviewRulerLanes: enabled ? DEFAULT_OVERVIEW_RULER_LANES : 0 });
+			editorInstance?.updateOptions({ overviewRulerLanes: enabled ? 3 : 0 });
 		});
 		watch(() => __props.language, (newLanguage) => {
 			const model = editorInstance?.getModel();
@@ -5293,70 +5784,282 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		/** The underlying Monaco editor instance, available after mount. */
 getEditor: () => editorInstance });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["kds-code-editor", { fill: fillContainer.value }]) }, [createElementVNode("div", { class: normalizeClass([
-				"editor",
-				__props.state,
-				{ focused: isEditorFocused.value }
-			]) }, [
-				!__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(headerLabel.value), 1), __props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.editorActions, (action, index) => {
-					return openBlock(), createElementBlock(Fragment, { key: `editor-action-${index}` }, [action.type === "button" ? (openBlock(), createBlock(unref(KdsButton), mergeProps({
-						key: 0,
-						ref_for: true
-					}, action.props, {
-						size: "small",
-						onClick: action.onClick
-					}), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(unref(KdsToggleButton), mergeProps({
-						key: 1,
-						ref_for: true
-					}, action.props, {
-						size: "small",
-						"onUpdate:modelValue": action.onUpdateModelValue
-					}), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(unref(KdsMenuButton), mergeProps({
-						key: 2,
-						ref_for: true
-					}, action.props, {
-						size: "small",
-						onItemClick: action.onItemClick
-					}), null, 16, ["onItemClick"])) : createCommentVNode("", true)], 64);
-				}), 128)), __props.copyable ? (openBlock(), createBlock(unref(KdsProgressButton), mergeProps({ key: 0 }, { ariaLabel: copyButtonAriaLabel.value }, {
-					"leading-icon": unref(copied) ? "checkmark" : "copy",
-					state: unref(copied) ? "success" : "default",
-					size: "small",
-					variant: "transparent",
-					tooltip: "Copy to clipboard",
-					onClick: copyToClipboard
-				}), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
-				createElementVNode("div", {
-					ref: "editor-container",
-					class: "code",
-					style: normalizeStyle(editorHeight.value ? { height: editorHeight.value } : void 0)
-				}, null, 4),
-				_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true)
-			], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
-				key: 0,
-				id: unref(subTextId),
+			return openBlock(), createBlock(BaseCodeEditor_default, {
+				ref: "base-code-editor",
+				"header-label": headerLabel.value,
+				"sub-text-id": unref(subTextId),
+				"hide-header": __props.hideHeader,
+				state: __props.state,
+				"read-only": __props.readOnly,
 				"sub-text": __props.subText,
-				error: __props.state === unref(kdsCodeEditorState).ERROR,
-				warning: __props.state === unref(kdsCodeEditorState).WARNING
-			}, null, 8, [
-				"id",
+				copyable: __props.copyable,
+				copied: unref(copied),
+				"copy-button-aria-label": copyButtonAriaLabel.value,
+				"editor-actions": __props.editorActions,
+				focused: isEditorFocused.value,
+				fill: fillContainer.value,
+				"code-height": editorHeight.value,
+				onCopy: copyToClipboard
+			}, createSlots({ _: 2 }, [_ctx.$slots.footer ? {
+				name: "footer",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+				key: "0"
+			} : void 0]), 1032, [
+				"header-label",
+				"sub-text-id",
+				"hide-header",
+				"state",
+				"read-only",
 				"sub-text",
-				"error",
-				"warning"
-			])) : createCommentVNode("", true)], 2);
+				"copyable",
+				"copied",
+				"copy-button-aria-label",
+				"editor-actions",
+				"focused",
+				"fill",
+				"code-height"
+			]);
 		};
 	}
 });
 //#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
+//#region src/CodeDiffEditor/KdsCodeDiffEditor.vue?vue&type=script&setup=true&lang.ts
+var tabEscapeHint = "Press Escape followed by Tab to move focus out of the editor.";
 //#endregion
-//#region src/CodeEditor/KdsCodeEditor.vue
-var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b08b3037"]]);
+//#region src/CodeDiffEditor/KdsCodeDiffEditor.vue
+var KdsCodeDiffEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "KdsCodeDiffEditor",
+	props: /*@__PURE__*/ mergeModels({
+		original: { default: "" },
+		language: { default: "plaintext" },
+		languageLabel: { default: () => void 0 },
+		hideHeader: {
+			type: Boolean,
+			default: false
+		},
+		state: { default: () => kdsCodeEditorState.DEFAULT },
+		sideBySide: {
+			type: Boolean,
+			default: true
+		},
+		overviewRuler: {
+			type: Boolean,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		subText: { default: () => void 0 },
+		editorActions: { default: () => void 0 },
+		minRows: { default: () => void 0 },
+		maxRows: { default: () => void 0 },
+		changeSummary: { default: () => void 0 }
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {},
+		"collapsed": {
+			type: Boolean,
+			default: false
+		},
+		"collapsedModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:collapsed"],
+	setup(__props, { expose: __expose }) {
+		setupMonacoEnvironment();
+		/** The modified content — the editable side of the diff. */
+		const modelValue = useModel(__props, "modelValue");
+		/**
+		* Whether the editor is collapsed to just its change-summary header. Only
+		* effective when `changeSummary` is set (which renders the collapse toggle).
+		*
+		* @default false
+		*/
+		const collapsed = useModel(__props, "collapsed");
+		const subTextId = useId();
+		const baseCodeEditor = useTemplateRef("base-code-editor");
+		let diffEditorInstance;
+		let originalModel;
+		let modifiedModel;
+		let overflowWidgetsDomNode;
+		const isOriginalFocused = ref(false);
+		const isModifiedFocused = ref(false);
+		const isEditorFocused = computed(() => isOriginalFocused.value || isModifiedFocused.value);
+		const headerLabel = computed(() => __props.languageLabel ?? __props.language.toUpperCase());
+		const originalAriaLabel = computed(() => `${headerLabel.value} code diff editor, original version, read-only. ${tabEscapeHint}`);
+		const modifiedAriaLabel = computed(() => `${headerLabel.value} code diff editor, modified version${__props.readOnly ? ", read-only" : ""}. ${tabEscapeHint}`);
+		const fillContainer = computed(() => __props.minRows === void 0 && __props.maxRows === void 0);
+		const lineHeight = ref(18);
+		const contentLineCount = ref(1);
+		const updateContentLineCount = () => {
+			contentLineCount.value = Math.max(originalModel?.getLineCount() ?? 1, modifiedModel?.getLineCount() ?? 1);
+		};
+		const editorHeight = computed(() => {
+			if (fillContainer.value) return;
+			const floor = Math.max(__props.minRows ?? 1, 1);
+			const cap = __props.maxRows ?? Infinity;
+			const rows = Math.min(cap, Math.max(floor, contentLineCount.value));
+			return `${lineHeight.value * rows + 3}px`;
+		});
+		const isCollapsed = computed(() => __props.changeSummary !== void 0 && !__props.hideHeader && collapsed.value);
+		const addedLineCount = ref();
+		const removedLineCount = ref();
+		const updateChangeCounts = () => {
+			const lineChanges = diffEditorInstance?.getLineChanges();
+			if (!lineChanges) return;
+			let added = 0;
+			let removed = 0;
+			for (const change of lineChanges) {
+				if (change.modifiedEndLineNumber > 0) added += change.modifiedEndLineNumber - change.modifiedStartLineNumber + 1;
+				if (change.originalEndLineNumber > 0) removed += change.originalEndLineNumber - change.originalStartLineNumber + 1;
+			}
+			addedLineCount.value = added;
+			removedLineCount.value = removed;
+		};
+		const { isDark } = useKdsDarkMode();
+		const getAriaLabelOptions = () => ({
+			originalAriaLabel: originalAriaLabel.value,
+			modifiedAriaLabel: modifiedAriaLabel.value
+		});
+		const updateDiffEditorOptions = (options = {}) => {
+			diffEditorInstance?.updateOptions({
+				...options,
+				...getAriaLabelOptions()
+			});
+		};
+		const getModifiedInputElement = () => diffEditorInstance?.getModifiedEditor().getDomNode()?.querySelector("[role=\"textbox\"]");
+		const syncEditorInputAria = () => {
+			const input = getModifiedInputElement();
+			if (!input) return;
+			if (__props.subText) input.setAttribute("aria-describedby", subTextId);
+			else input.removeAttribute("aria-describedby");
+			if (__props.state === kdsCodeEditorState.ERROR) input.setAttribute("aria-invalid", "true");
+			else input.removeAttribute("aria-invalid");
+		};
+		watch([() => __props.subText, () => __props.state], syncEditorInputAria);
+		onMounted(() => {
+			const container = baseCodeEditor.value?.getCodeContainer();
+			if (!container) return;
+			originalModel = editor.createModel(__props.original, __props.language);
+			modifiedModel = editor.createModel(modelValue.value, __props.language);
+			overflowWidgetsDomNode = createOverflowWidgetsDomNode();
+			diffEditorInstance = editor.createDiffEditor(container, {
+				...COMMON_EDITOR_OPTIONS,
+				overflowWidgetsDomNode,
+				renderSideBySide: __props.sideBySide,
+				renderOverviewRuler: __props.overviewRuler,
+				originalEditable: false,
+				readOnly: __props.readOnly,
+				theme: getMonacoTheme(isDark.value)
+			});
+			diffEditorInstance.setModel({
+				original: originalModel,
+				modified: modifiedModel
+			});
+			diffEditorInstance.updateOptions(getAriaLabelOptions());
+			syncEditorInputAria();
+			diffEditorInstance.onDidUpdateDiff(updateChangeCounts);
+			const modifiedEditor = diffEditorInstance.getModifiedEditor();
+			const originalEditor = diffEditorInstance.getOriginalEditor();
+			lineHeight.value = modifiedEditor.getOption(editor.EditorOption.lineHeight);
+			updateContentLineCount();
+			originalModel.onDidChangeContent(updateContentLineCount);
+			modifiedModel.onDidChangeContent(() => {
+				const value = modifiedModel?.getValue() ?? "";
+				updateContentLineCount();
+				if (value !== modelValue.value) modelValue.value = value;
+			});
+			for (const editorSide of [originalEditor, modifiedEditor]) setupTabFocusHandling(editorSide);
+			originalEditor.onDidFocusEditorText(() => {
+				isOriginalFocused.value = true;
+			});
+			originalEditor.onDidBlurEditorText(() => {
+				isOriginalFocused.value = false;
+			});
+			modifiedEditor.onDidFocusEditorText(() => {
+				isModifiedFocused.value = true;
+			});
+			modifiedEditor.onDidBlurEditorText(() => {
+				isModifiedFocused.value = false;
+			});
+		});
+		watch(isDark, (dark) => {
+			if (diffEditorInstance) editor.setTheme(getMonacoTheme(dark));
+		});
+		watch(() => __props.readOnly, (isReadOnly) => {
+			updateDiffEditorOptions({ readOnly: isReadOnly });
+		});
+		watch(modifiedAriaLabel, () => {
+			updateDiffEditorOptions();
+		});
+		watch(() => __props.sideBySide, (renderSideBySide) => {
+			updateDiffEditorOptions({ renderSideBySide });
+		});
+		watch(() => __props.overviewRuler, (renderOverviewRuler) => {
+			updateDiffEditorOptions({ renderOverviewRuler });
+		});
+		watch(() => __props.language, (newLanguage) => {
+			for (const model of [originalModel, modifiedModel]) if (model) editor.setModelLanguage(model, newLanguage);
+		});
+		watch(() => __props.original, (newOriginal) => {
+			if (originalModel && newOriginal !== originalModel.getValue()) originalModel.setValue(newOriginal);
+		});
+		watch(modelValue, (newValue) => {
+			if (modifiedModel && newValue !== modifiedModel.getValue()) {
+				modifiedModel.pushStackElement();
+				modifiedModel.pushEditOperations([], [{
+					range: modifiedModel.getFullModelRange(),
+					text: newValue ?? ""
+				}], () => null);
+			}
+		});
+		onUnmounted(() => {
+			diffEditorInstance?.dispose();
+			originalModel?.dispose();
+			modifiedModel?.dispose();
+			overflowWidgetsDomNode?.remove();
+		});
+		__expose({ 
+		/** The underlying Monaco diff editor instance, available after mount. */
+getEditor: () => diffEditorInstance });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(BaseCodeEditor_default, {
+				ref: "base-code-editor",
+				"header-label": headerLabel.value,
+				"sub-text-id": unref(subTextId),
+				"hide-header": __props.hideHeader,
+				state: __props.state,
+				"read-only": __props.readOnly,
+				"sub-text": __props.subText,
+				copyable: false,
+				"editor-actions": __props.editorActions,
+				focused: isEditorFocused.value,
+				fill: fillContainer.value,
+				"code-height": editorHeight.value,
+				"change-summary": __props.changeSummary,
+				"added-lines": addedLineCount.value,
+				"removed-lines": removedLineCount.value,
+				collapsed: isCollapsed.value,
+				onCollapsedToggle: _cache[0] || (_cache[0] = ($event) => collapsed.value = !collapsed.value)
+			}, null, 8, [
+				"header-label",
+				"sub-text-id",
+				"hide-header",
+				"state",
+				"read-only",
+				"sub-text",
+				"editor-actions",
+				"focused",
+				"fill",
+				"code-height",
+				"change-summary",
+				"added-lines",
+				"removed-lines",
+				"collapsed"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/Console/utils/buildTheme.ts
 /**
@@ -5564,6 +6267,6 @@ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	}
 }), [["__scopeId", "data-v-646b2bdc"]]);
 //#endregion
-export { KdsCodeEditor_default as KdsCodeEditor, KdsConsole_default as KdsConsole, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };
+export { KdsCodeDiffEditor_default as KdsCodeDiffEditor, KdsCodeEditor_default as KdsCodeEditor, KdsConsole_default as KdsConsole, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };
 
 //# sourceMappingURL=index.js.map