@keboola/design 11.0.0 → 11.2.0

package/dist/editors.js

@@ -1,441 +1,815 @@
-import { LINE_HEIGHT_PX, PANE_HEADER_HEIGHT_PX, CHANGE_CLASS } from './chunk-OTL5WXIJ.js';
-import { useThemedExtension, buildBasicSetup } from './chunk-YFZJ3ZLG.js';
-export { CodeEditor, LANGUAGE_MODES, SqlEditor, isLanguageMode } from './chunk-YFZJ3ZLG.js';
-import { useStableCallback } from './chunk-TV4WAP2R.js';
-import './chunk-7GTI3PPI.js';
-import { resolveToken } from './chunk-IIS7INHF.js';
-import './chunk-FUFMVW7O.js';
-import './chunk-7P6PLZ4B.js';
-import './chunk-PROCA7K7.js';
-import { Button } from './chunk-IXAYNBOY.js';
-import { X, ChevronsRight, ChevronsLeft } from './chunk-RQVK4IYC.js';
-import './chunk-KR7NXXHC.js';
-import './chunk-SWQFYNYG.js';
-import './chunk-3W27OLK5.js';
-import './chunk-MODE4QIA.js';
-import './chunk-WETKNYZX.js';
-import { cn } from './chunk-LXLIQ2D6.js';
-import './chunk-G3PMV62Z.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useCallback, useMemo, useEffect } from 'react';
-import { Decoration, GutterMarker, EditorView, gutterLineClass } from '@codemirror/view';
-import CodeMirror from '@uiw/react-codemirror';
-import colors from '@keboola/tailwind-config/colors';
-import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
-
-var AcceptButton = ({ side, onAccept }) => {
-  const label = `Accept ${side === "left" ? "production" : "branch"} version`;
-  const Chevron = side === "left" ? ChevronsRight : ChevronsLeft;
-  return /* @__PURE__ */ jsx(Button, { onClick: onAccept, variant: "outline", size: "icon-sm", title: label, "aria-label": label, children: /* @__PURE__ */ jsx(Chevron, { className: "tw:size-5" }) });
+import { cn } from "./classNames-BzrkDnOD.js";
+import { ChevronsLeft, ChevronsRight, X } from "./icons-Cek151jC.js";
+import { Button } from "./Button-6xBX0nNl.js";
+import { FieldItem, useFieldContext } from "./FieldItem-D-h1NeBo.js";
+import { CHANGE_CLASS } from "./internal/components/MergeEditor/constants.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { resolveToken } from "./themeTokens-BNg98Mu9.js";
+import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-DyaN-Ij2.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Decoration, EditorView, GutterMarker, ViewPlugin, gutter, gutterLineClass } from "@codemirror/view";
+import CodeMirror, { EditorView as EditorView$1, keymap as keymap$1 } from "@uiw/react-codemirror";
+import colors from "@keboola/tailwind-config/colors";
+import { installExtensions } from "@keboola/codemirror-lang-sql";
+import { RangeSet, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { defaultKeymap } from "@codemirror/commands";
+//#region src/components/CodeEditor/activeQueryHighlight.ts
+const activeQueryFirstLine = Decoration.line({ class: "cm-active-query cm-active-query-first" });
+const activeQueryMiddleLine = Decoration.line({ class: "cm-active-query" });
+const activeQueryLastLine = Decoration.line({ class: "cm-active-query cm-active-query-last" });
+const activeQuerySingleLine = Decoration.line({ class: "cm-active-query cm-active-query-first cm-active-query-last" });
+/**
+* Given pre-computed query boundaries and a cursor position, find which query
+* the cursor is in. Returns trimmed character offsets or null.
+*/
+const findActiveQueryRange = (doc, cursorPos, boundaries) => {
+	if (boundaries.length === 0) return null;
+	let match = boundaries[boundaries.length - 1];
+	for (const boundary of boundaries) if (cursorPos <= boundary.to) {
+		match = boundary;
+		break;
+	}
+	if (!match) return null;
+	const queryText = doc.slice(match.from, match.to);
+	const leadingWhitespace = queryText.length - queryText.trimStart().length;
+	const trailingWhitespace = queryText.length - queryText.trimEnd().length;
+	const trimmedStart = match.from + leadingWhitespace;
+	const trimmedEnd = match.to - trailingWhitespace;
+	if (trimmedStart >= trimmedEnd) return null;
+	return {
+		from: trimmedStart,
+		to: trimmedEnd
+	};
+};
+/**
+* Convert splitSqlQueries result (array of query strings that join back to the
+* original doc) into character-offset boundaries.
+*/
+const computeBoundaries = (queries) => {
+	const boundaries = [];
+	let offset = 0;
+	for (const query of queries) {
+		boundaries.push({
+			from: offset,
+			to: offset + query.length
+		});
+		offset += query.length;
+	}
+	return boundaries;
+};
+/**
+* Synchronously map cached boundaries through a changeset.
+*
+* Boundaries can outlive the document state they were computed from (the async
+* re-parse in `scheduleDocParse` is debounced, so several edits may land
+* before new boundaries are produced). When that happens a cached position
+* can exceed the changeset's pre-change length and `ChangeSet.mapPos` throws
+* `RangeError: Position X is out of range for changeset of length Y`.
+*
+* Clamp positions into the valid `[0, changes.length]` range before mapping
+* and drop degenerate boundaries so the mapping is safe even with stale cache.
+*/
+const mapBoundariesThroughChanges = (boundaries, changes) => {
+	const prevLen = changes.length;
+	const mapped = [];
+	for (const b of boundaries) {
+		const from = changes.mapPos(Math.max(0, Math.min(b.from, prevLen)), -1);
+		const to = changes.mapPos(Math.max(0, Math.min(b.to, prevLen)), 1);
+		if (from < to) mapped.push({
+			from,
+			to
+		});
+	}
+	return mapped;
+};
+const buildDecorations = (view, range) => {
+	const startLine = view.state.doc.lineAt(range.from).number;
+	const endLine = view.state.doc.lineAt(range.to).number;
+	const decorations = [];
+	for (let lineNum = startLine; lineNum <= endLine; lineNum++) {
+		const lineStart = view.state.doc.line(lineNum).from;
+		if (startLine === endLine) decorations.push(activeQuerySingleLine.range(lineStart));
+		else if (lineNum === startLine) decorations.push(activeQueryFirstLine.range(lineStart));
+		else if (lineNum === endLine) decorations.push(activeQueryLastLine.range(lineStart));
+		else decorations.push(activeQueryMiddleLine.range(lineStart));
+	}
+	return Decoration.set(decorations);
+};
+const activeQueryHighlight = (splitQueries) => {
+	return [ViewPlugin.fromClass(class {
+		decorations = Decoration.none;
+		debounceTimer = null;
+		seq = 0;
+		cachedDoc = "";
+		cachedBoundaries = [];
+		destroyed = false;
+		constructor(view) {
+			this.scheduleDocParse(view);
+		}
+		update(update) {
+			if (update.focusChanged && !update.view.hasFocus) {
+				this.decorations = Decoration.none;
+				return;
+			}
+			if (update.docChanged) {
+				if (this.cachedBoundaries.length > 0) {
+					this.cachedBoundaries = mapBoundariesThroughChanges(this.cachedBoundaries, update.changes);
+					this.cachedDoc = update.state.doc.toString();
+					this.updateFromCache(update.view);
+				}
+				this.scheduleDocParse(update.view);
+			} else if (update.selectionSet || update.focusChanged && update.view.hasFocus) this.updateFromCache(update.view);
+		}
+		destroy() {
+			this.destroyed = true;
+			if (this.debounceTimer) clearTimeout(this.debounceTimer);
+		}
+		/**
+		* Update decorations using cached query boundaries.
+		* Only mutates this.decorations — does NOT call view.dispatch().
+		* When called from update() (sync), CodeMirror picks up the new
+		* decorations via the accessor. When called from the async
+		* scheduleDocParse callback, the caller must dispatch separately.
+		*/
+		updateFromCache(view) {
+			if (!view.hasFocus) {
+				this.decorations = Decoration.none;
+				return;
+			}
+			const { main } = view.state.selection;
+			if (main.from !== main.to) {
+				this.decorations = Decoration.none;
+				return;
+			}
+			const doc = view.state.doc.toString();
+			if (doc !== this.cachedDoc) return;
+			if (this.cachedBoundaries.length === 0) {
+				this.decorations = Decoration.none;
+				return;
+			}
+			const range = findActiveQueryRange(doc, main.head, this.cachedBoundaries);
+			this.decorations = range ? buildDecorations(view, range) : Decoration.none;
+		}
+		/** Parse queries async (debounced) and update decorations. */
+		scheduleDocParse(view) {
+			if (this.debounceTimer) clearTimeout(this.debounceTimer);
+			this.debounceTimer = setTimeout(async () => {
+				const seq = ++this.seq;
+				const doc = view.state.doc.toString();
+				if (!doc.trim()) {
+					this.cachedDoc = doc;
+					this.cachedBoundaries = [];
+					if (this.decorations !== Decoration.none) {
+						this.decorations = Decoration.none;
+						if (!this.destroyed) view.dispatch();
+					}
+					return;
+				}
+				let queries;
+				try {
+					queries = await splitQueries(doc);
+				} catch {
+					return;
+				}
+				if (this.destroyed || seq !== this.seq) return;
+				this.cachedDoc = doc;
+				this.cachedBoundaries = computeBoundaries(queries);
+				this.updateFromCache(view);
+				if (!this.destroyed) view.dispatch();
+			}, 100);
+		}
+	}, { decorations: (v) => v.decorations }), EditorView.baseTheme({
+		".cm-active-query": {
+			boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}`,
+			marginRight: "8px"
+		},
+		".cm-active-query-first": {
+			boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 1px 0 0 ${colors.blue[300]}`,
+			borderRadius: "4px 4px 0 0"
+		},
+		".cm-active-query-last": {
+			boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 -1px 0 0 ${colors.blue[300]}`,
+			borderRadius: "0 0 4px 4px"
+		},
+		".cm-active-query-first.cm-active-query-last": {
+			boxShadow: `inset 0 0 0 1px ${colors.blue[300]}`,
+			borderRadius: "4px"
+		}
+	})];
+};
+//#endregion
+//#region src/components/CodeEditor/highlighting.ts
+var HighlightMarker = class extends GutterMarker {
+	toDOM() {
+		const marker = document.createElement("div");
+		marker.className = "cm-highlight-marker";
+		return marker;
+	}
+};
+const highlightMarker = new HighlightMarker();
+const forEachLineInRange = (doc, from, to, callback) => {
+	const results = [];
+	const fromLine = Math.max(1, from + 1);
+	const toLine = Math.min(doc.lines, to + 1);
+	for (let i = fromLine; i <= toLine; i++) {
+		const line = doc.line(i);
+		results.push(callback(line.from));
+	}
+	return results;
+};
+const setHighlightedLinesEffect = StateEffect.define();
+const highlightedLinesField = StateField.define({
+	create() {
+		return null;
+	},
+	update(value, transaction) {
+		for (const effect of transaction.effects) if (effect.is(setHighlightedLinesEffect)) return effect.value;
+		return value;
+	}
+});
+const highlightGutter = gutter({
+	class: "cm-highlight-gutter",
+	markers: (view) => {
+		const highlightInfo = view.state.field(highlightedLinesField, false);
+		if (!highlightInfo) return RangeSet.empty;
+		const markers = forEachLineInRange(view.state.doc, highlightInfo.from, highlightInfo.to, (lineFrom) => highlightMarker.range(lineFrom));
+		return RangeSet.of(markers);
+	}
+});
+const errorLineDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, transaction) {
+		decorations = decorations.map(transaction.changes);
+		for (const effect of transaction.effects) {
+			if (!effect.is(setHighlightedLinesEffect)) continue;
+			if (!effect.value || !effect.value.error) return Decoration.none;
+			const decorationArray = forEachLineInRange(transaction.state.doc, effect.value.error.from, effect.value.error.to, (lineFrom) => Decoration.line({ class: "cm-error-line" }).range(lineFrom));
+			return Decoration.set(decorationArray);
+		}
+		return decorations;
+	},
+	provide: (f) => EditorView.decorations.from(f)
+});
+const processingLineDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, transaction) {
+		decorations = decorations.map(transaction.changes);
+		for (const effect of transaction.effects) {
+			if (!effect.is(setHighlightedLinesEffect)) continue;
+			if (!effect.value || !effect.value.processing) return Decoration.none;
+			const decorationArray = forEachLineInRange(transaction.state.doc, effect.value.processing.from, effect.value.processing.to, (lineFrom) => Decoration.line({ class: "cm-processing-line" }).range(lineFrom));
+			return Decoration.set(decorationArray);
+		}
+		return decorations;
+	},
+	provide: (f) => EditorView.decorations.from(f)
+});
+const highlightedLinesTheme = EditorView.baseTheme({
+	".cm-highlight-gutter": {
+		width: "2px",
+		marginRight: "2px"
+	},
+	".cm-highlight-marker": {
+		width: "2px",
+		height: "100%",
+		backgroundColor: colors.blue[500]
+	},
+	".cm-error-line": { backgroundColor: `${colors.error[100]} !important` },
+	".cm-processing-line": { backgroundColor: `${colors.blue[100]} !important` }
+});
+function highlightingExtension() {
+	return [
+		highlightedLinesField,
+		highlightGutter,
+		errorLineDecorations,
+		processingLineDecorations,
+		highlightedLinesTheme
+	];
+}
+function updateHighlighting(view, lines) {
+	view.dispatch({ effects: setHighlightedLinesEffect.of(lines ?? null) });
+}
+//#endregion
+//#region src/components/CodeEditor/SqlEditor.tsx
+const OWN_KEYMAPS = {
+	defaultKeymap: false,
+	completionKeymap: false,
+	searchKeymap: false
 };
-var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "tw:z-10 tw:flex tw:shrink-0 tw:flex-col tw:items-center",
-      conflicts.length > 0 ? "tw:w-7" : "tw:w-0"
-    ),
-    children: conflicts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "tw:shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
-      /* @__PURE__ */ jsx("div", { className: "tw:relative tw:w-full tw:flex-1 tw:overflow-y-clip tw:overflow-x-visible", children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "tw:relative tw:size-full", children: conflicts.map((conflict) => {
-        const topLine = side === "left" ? conflict.oldStartLine : conflict.newStartLine;
-        const topOffset = (topLine - 1) * LINE_HEIGHT_PX - 2;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "tw:absolute tw:inset-x-0 tw:flex tw:flex-col tw:items-center tw:gap-0.5",
-            style: { top: `${topOffset}px` },
-            children: [
-              /* @__PURE__ */ jsx(AcceptButton, { side, onAccept: () => onAccept(conflict) }),
-              onDismiss && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => onDismiss(conflict),
-                  variant: "outline",
-                  size: "icon-sm",
-                  title: "Dismiss",
-                  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
-                  children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
-                }
-              )
-            ]
-          },
-          conflict.id
-        );
-      }) }) })
-    ] })
-  }
-);
-var setHighlightedLines = StateEffect.define();
-var safeDecoration = Decoration.line({ class: "cm-merge-safe-line" });
-var conflictDecoration = Decoration.line({ class: "cm-merge-conflict-line" });
+const CUSTOM_KEYMAP = [{
+	key: "Escape",
+	stopPropagation: true,
+	run: (view) => {
+		view.contentDOM.blur();
+		return true;
+	}
+}];
+const OWN_KEYMAP_EXTENSION = keymap$1.of([...defaultKeymap, ...CUSTOM_KEYMAP]);
+const buildTheme = () => ({
+	...buildBaseThemeStyles(),
+	...buildChromeStyles(buildCanvasChrome())
+});
+const SqlEditor = ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder = "", searchQuery = "", searchMatchIndex, readOnly = false, queryParser, autoFocus = false, lineNumbers = true, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }) => {
+	const editorRef = useRef(null);
+	const handleChange = useStableCallback((next) => onChange?.(next));
+	const parseQueries = useStableCallback(async (sql) => await queryParser?.(sql) ?? []);
+	const handleBlur = useStableCallback((view) => onBlurEditor?.(view));
+	const handleFocus = useStableCallback((view) => onFocusEditor?.(view));
+	const handleUpdate = useStableCallback((update) => {
+		if (update.selectionSet) {
+			const { main } = update.state.selection;
+			onSelectionChange?.(update.state.sliceDoc(main.from, main.to));
+		}
+	});
+	const variableCompletion = useVariableCompletion(variables);
+	const withQueryParser = queryParser !== void 0;
+	const tooltipLayer = useTooltipsExtension();
+	const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
+	const themeExtension = useThemedExtension("sql-editor:chrome", () => EditorView$1.theme(buildTheme()));
+	const extensions = useMemo(() => {
+		return [
+			EditorView$1.lineWrapping,
+			OWN_KEYMAP_EXTENSION,
+			...installExtensions({
+				schema,
+				defaultDatabase,
+				defaultSchema,
+				variableCompletion,
+				completionSource,
+				dialect
+			}),
+			searchExtension(),
+			highlightingExtension(),
+			withQueryParser ? activeQueryHighlight(parseQueries) : [],
+			tooltipLayer,
+			themeExtension,
+			EditorView$1.domEventHandlers({
+				blur: (_, view) => handleBlur(view),
+				focus: (_, view) => handleFocus(view)
+			})
+		];
+	}, [
+		withQueryParser,
+		parseQueries,
+		schema,
+		completionSource,
+		defaultDatabase,
+		defaultSchema,
+		variableCompletion,
+		dialect,
+		handleBlur,
+		handleFocus,
+		themeExtension,
+		tooltipLayer
+	]);
+	const defaultSetup = useMemo(() => {
+		return {
+			...buildBasicSetup(readOnly),
+			...OWN_KEYMAPS,
+			lineNumbers
+		};
+	}, [readOnly, lineNumbers]);
+	useEffect(() => {
+		if (editorRef.current?.view) updateHighlighting(editorRef.current.view, highlightLines);
+	}, [highlightLines]);
+	useEffect(() => {
+		if (editorRef.current?.view) updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
+	}, [searchQuery, searchMatchIndex]);
+	const handleDestroy = useStableCallback(() => onDestroyEditor?.());
+	useEffect(() => handleDestroy, [handleDestroy]);
+	const handleCreate = useStableCallback((view, state) => {
+		onCreateEditor?.(view, state);
+		if (highlightLines) updateHighlighting(view, highlightLines);
+		if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+	});
+	return /* @__PURE__ */ jsx(CodeMirror, {
+		ref: editorRef,
+		theme: customTheme,
+		extensions,
+		value,
+		onChange: handleChange,
+		onUpdate: handleUpdate,
+		onCreateEditor: handleCreate,
+		autoFocus,
+		placeholder,
+		className,
+		readOnly,
+		editable: !readOnly,
+		basicSetup: defaultSetup
+	});
+};
+//#endregion
+//#region src/components/MergeEditor/AcceptControls/AcceptButton.tsx
+const AcceptButton = ({ side, onAccept }) => {
+	const label = `Accept ${side === "left" ? "production" : "branch"} version`;
+	return /* @__PURE__ */ jsx(Button, {
+		onClick: onAccept,
+		variant: "outline",
+		size: "icon-sm",
+		title: label,
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(side === "left" ? ChevronsRight : ChevronsLeft, { className: "tw:size-5" })
+	});
+};
+//#endregion
+//#region src/components/MergeEditor/AcceptControls/AcceptControls.tsx
+const AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:z-10 tw:flex tw:shrink-0 tw:flex-col tw:items-center", conflicts.length > 0 ? "tw:w-7" : "tw:w-0"),
+	children: conflicts.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "tw:shrink-0",
+		style: { height: `58px` }
+	}), /* @__PURE__ */ jsx("div", {
+		className: "tw:relative tw:w-full tw:flex-1 tw:overflow-y-clip tw:overflow-x-visible",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: "tw:relative tw:size-full",
+			children: conflicts.map((conflict) => {
+				const topOffset = ((side === "left" ? conflict.oldStartLine : conflict.newStartLine) - 1) * 20 - 2;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "tw:absolute tw:inset-x-0 tw:flex tw:flex-col tw:items-center tw:gap-0.5",
+					style: { top: `${topOffset}px` },
+					children: [/* @__PURE__ */ jsx(AcceptButton, {
+						side,
+						onAccept: () => onAccept(conflict)
+					}), onDismiss && /* @__PURE__ */ jsx(Button, {
+						onClick: () => onDismiss(conflict),
+						variant: "outline",
+						size: "icon-sm",
+						title: "Dismiss",
+						"aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
+						children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+					})]
+				}, conflict.id);
+			})
+		})
+	})] })
+});
+//#endregion
+//#region src/components/MergeEditor/decorations.ts
+const setHighlightedLines = StateEffect.define();
+const safeDecoration = Decoration.line({ class: "cm-merge-safe-line" });
+const conflictDecoration = Decoration.line({ class: "cm-merge-conflict-line" });
 var SafeGutterMarker = class extends GutterMarker {
-  elementClass = "cm-merge-safe-gutter";
+	elementClass = "cm-merge-safe-gutter";
 };
 var ConflictGutterMarker = class extends GutterMarker {
-  elementClass = "cm-merge-conflict-gutter";
+	elementClass = "cm-merge-conflict-gutter";
 };
-var safeGutterMarker = new SafeGutterMarker();
-var conflictGutterMarker = new ConflictGutterMarker();
-var createDiffHighlightExtension = () => StateField.define({
-  create: () => ({ decorations: Decoration.none, gutterMarkers: RangeSet.empty }),
-  update(value, tr) {
-    let payload = null;
-    for (const effect of tr.effects) {
-      if (effect.is(setHighlightedLines)) {
-        payload = effect.value;
-      }
-    }
-    if (!payload) {
-      return {
-        decorations: value.decorations.map(tr.changes),
-        gutterMarkers: value.gutterMarkers.map(tr.changes)
-      };
-    }
-    const decoBuilder = new RangeSetBuilder();
-    const gutterBuilder = new RangeSetBuilder();
-    const doc = tr.state.doc;
-    const { lines, classification } = payload;
-    const sorted = [...lines].filter((l) => l >= 1 && l <= doc.lines).sort((a, b) => a - b);
-    for (const i of sorted) {
-      const cls = classification.get(i);
-      if (!cls) continue;
-      const isSafe = cls === CHANGE_CLASS.SAFE;
-      const line = doc.line(i);
-      decoBuilder.add(line.from, line.from, isSafe ? safeDecoration : conflictDecoration);
-      gutterBuilder.add(line.from, line.from, isSafe ? safeGutterMarker : conflictGutterMarker);
-    }
-    return {
-      decorations: decoBuilder.finish(),
-      gutterMarkers: gutterBuilder.finish()
-    };
-  },
-  provide: (f) => [
-    EditorView.decorations.from(f, (val) => val.decorations),
-    gutterLineClass.from(f, (val) => val.gutterMarkers)
-  ]
+const safeGutterMarker = new SafeGutterMarker();
+const conflictGutterMarker = new ConflictGutterMarker();
+const createDiffHighlightExtension = () => StateField.define({
+	create: () => ({
+		decorations: Decoration.none,
+		gutterMarkers: RangeSet.empty
+	}),
+	update(value, tr) {
+		let payload = null;
+		for (const effect of tr.effects) if (effect.is(setHighlightedLines)) payload = effect.value;
+		if (!payload) return {
+			decorations: value.decorations.map(tr.changes),
+			gutterMarkers: value.gutterMarkers.map(tr.changes)
+		};
+		const decoBuilder = new RangeSetBuilder();
+		const gutterBuilder = new RangeSetBuilder();
+		const doc = tr.state.doc;
+		const { lines, classification } = payload;
+		const sorted = [...lines].filter((l) => l >= 1 && l <= doc.lines).sort((a, b) => a - b);
+		for (const i of sorted) {
+			const cls = classification.get(i);
+			if (!cls) continue;
+			const isSafe = cls === CHANGE_CLASS.SAFE;
+			const line = doc.line(i);
+			decoBuilder.add(line.from, line.from, isSafe ? safeDecoration : conflictDecoration);
+			gutterBuilder.add(line.from, line.from, isSafe ? safeGutterMarker : conflictGutterMarker);
+		}
+		return {
+			decorations: decoBuilder.finish(),
+			gutterMarkers: gutterBuilder.finish()
+		};
+	},
+	provide: (f) => [EditorView.decorations.from(f, (val) => val.decorations), gutterLineClass.from(f, (val) => val.gutterMarkers)]
 });
-var DARK_LINE_ALPHA = "29";
-var DARK_GUTTER_ALPHA = "47";
-var buildDiffHighlightTheme = (scheme) => {
-  const dark = scheme === "dark";
-  const line = (hue, pastel) => dark ? `${hue}${DARK_LINE_ALPHA}` : pastel;
-  const gutter = (hue, pastel) => dark ? `${hue}${DARK_GUTTER_ALPHA}` : pastel;
-  const safeNumber = dark ? colors.green[300] : colors.green[900];
-  const conflictNumber = dark ? colors.warning[300] : colors.warning[800];
-  return EditorView.theme({
-    ".cm-merge-safe-line": {
-      backgroundColor: `${line(colors.green[500], colors.green[100])} !important`,
-      boxShadow: `inset 3px 0 0 ${colors.green[500]}`
-    },
-    ".cm-merge-conflict-line": {
-      backgroundColor: `${line(colors.warning[500], colors.warning[100])} !important`,
-      boxShadow: `inset 3px 0 0 ${colors.warning[500]}`
-    },
-    ".cm-merge-safe-gutter": {
-      backgroundColor: `${gutter(colors.green[500], colors.green[200])} !important`,
-      color: safeNumber
-    },
-    ".cm-merge-conflict-gutter": {
-      backgroundColor: `${gutter(colors.warning[500], colors.warning[200])} !important`,
-      color: conflictNumber
-    }
-  });
+const DARK_LINE_ALPHA = "29";
+const DARK_GUTTER_ALPHA = "47";
+/**
+* The highlight palette, split out of the StateField above so it can be built
+* through `useThemedExtension` — the field instance must stay stable across a
+* scheme change (a fresh one would drop the current highlights), the colours
+* must not.
+*
+* `!important` overrides CodeMirror's built-in active-line and selection
+* backgrounds. SAFE = change present on one side only (green). CONFLICT = both
+* sides edited this region (amber/warning — NOT red, since red reads as
+* "deletion" and the 3-pane editor only ever displays additions in each side
+* pane). The colored left border doubles as a scan-lane so changes are easy to
+* spot when zoomed out.
+*
+* Light mode paints an opaque pastel wash. Dark mode tints the same hue at low
+* alpha over the pane's token-driven surface instead — the pastel is opaque, so
+* it put the dark scheme's near-white line text and grey line numbers on a
+* light slab.
+*
+* A pure function of `scheme`, which `useThemedExtension` passes from the same
+* read that produced its cache key.
+*/
+const buildDiffHighlightTheme = (scheme) => {
+	const dark = scheme === "dark";
+	const line = (hue, pastel) => dark ? `${hue}${DARK_LINE_ALPHA}` : pastel;
+	const gutter = (hue, pastel) => dark ? `${hue}${DARK_GUTTER_ALPHA}` : pastel;
+	const safeNumber = dark ? colors.green[300] : colors.green[900];
+	const conflictNumber = dark ? colors.warning[300] : colors.warning[800];
+	return EditorView.theme({
+		".cm-merge-safe-line": {
+			backgroundColor: `${line(colors.green[500], colors.green[100])} !important`,
+			boxShadow: `inset 3px 0 0 ${colors.green[500]}`
+		},
+		".cm-merge-conflict-line": {
+			backgroundColor: `${line(colors.warning[500], colors.warning[100])} !important`,
+			boxShadow: `inset 3px 0 0 ${colors.warning[500]}`
+		},
+		".cm-merge-safe-gutter": {
+			backgroundColor: `${gutter(colors.green[500], colors.green[200])} !important`,
+			color: safeNumber
+		},
+		".cm-merge-conflict-gutter": {
+			backgroundColor: `${gutter(colors.warning[500], colors.warning[200])} !important`,
+			color: conflictNumber
+		}
+	});
+};
+const updateHighlightedLines = (view, lines, classification) => {
+	view.dispatch({ effects: setHighlightedLines.of({
+		lines,
+		classification
+	}) });
 };
-var updateHighlightedLines = (view, lines, classification) => {
-  view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
+//#endregion
+//#region src/components/MergeEditor/MergePane.tsx
+const EMPTY_LINES$1 = /* @__PURE__ */ new Set();
+const EMPTY_CLASSIFICATION$1 = /* @__PURE__ */ new Map();
+const MergePane = ({ value, highlightedLines, lineClassification, readOnly = false, onChange, header, headerClassName, className, onScrollDOMReady, deleted = false }) => {
+	const editorRef = useRef(null);
+	const handleChange = useStableCallback((next) => onChange?.(next));
+	const themeExtension = useThemedExtension(`merge-pane:${deleted}`, (scheme) => {
+		const dark = scheme === "dark";
+		const deletedSurface = dark ? `${colors.error[500]}1f` : colors.error[100];
+		const deletedGutter = dark ? `${colors.error[500]}3d` : colors.error[200];
+		const deletedGutterText = dark ? colors.error[300] : colors.error[700];
+		return EditorView.theme({
+			"&.cm-editor": {
+				height: "100%",
+				backgroundColor: deleted ? deletedSurface : resolveToken("background", "249 250 251"),
+				color: resolveToken("foreground", "30 41 59"),
+				outline: "none"
+			},
+			".cm-gutters": {
+				backgroundColor: deleted ? deletedGutter : resolveToken("muted", "241 245 249"),
+				color: deleted ? deletedGutterText : resolveToken("muted-foreground", "100 116 139")
+			},
+			"*": { lineHeight: `20px` },
+			".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
+		});
+	});
+	const diffHighlightExtension = useMemo(() => createDiffHighlightExtension(), []);
+	const diffHighlightTheme = useThemedExtension("merge-diff-highlight", buildDiffHighlightTheme);
+	const basicSetup = useMemo(() => ({
+		...buildBasicSetup(readOnly),
+		lineNumbers: true
+	}), [readOnly]);
+	const extensions = useMemo(() => [
+		diffHighlightExtension,
+		diffHighlightTheme,
+		themeExtension,
+		EditorView.updateListener.of((update) => {
+			if (update.docChanged) requestAnimationFrame(() => update.view.dispatch({}));
+		})
+	], [
+		diffHighlightExtension,
+		diffHighlightTheme,
+		themeExtension
+	]);
+	useEffect(() => {
+		const view = editorRef.current?.view;
+		if (!view) return;
+		updateHighlightedLines(view, deleted ? EMPTY_LINES$1 : highlightedLines, deleted ? EMPTY_CLASSIFICATION$1 : lineClassification);
+	}, [
+		highlightedLines,
+		lineClassification,
+		deleted
+	]);
+	const handleCreateEditor = useCallback((view) => {
+		updateHighlightedLines(view, deleted ? EMPTY_LINES$1 : highlightedLines, deleted ? EMPTY_CLASSIFICATION$1 : lineClassification);
+		onScrollDOMReady?.(view.scrollDOM);
+	}, [
+		highlightedLines,
+		lineClassification,
+		onScrollDOMReady,
+		deleted
+	]);
+	useEffect(() => {
+		return () => onScrollDOMReady?.(null);
+	}, [onScrollDOMReady]);
+	useEffect(() => {
+		const view = editorRef.current?.view;
+		const wrapper = view?.dom.parentElement;
+		if (!view || !wrapper) return;
+		const observer = new ResizeObserver(() => view.dispatch({}));
+		observer.observe(wrapper);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:overflow-hidden", className, deleted && "tw:border-error-300 tw:[[data-theme=dark]_&]:border-error-500/50"),
+		children: [header && /* @__PURE__ */ jsx("div", {
+			className: cn("tw:px-4 tw:py-3", deleted ? "tw:border-b tw:border-error-200 tw:bg-error-100 tw:[[data-theme=dark]_&]:border-error-500/30 tw:[[data-theme=dark]_&]:bg-error-500/15" : "tw:bg-background", headerClassName),
+			children: header
+		}), /* @__PURE__ */ jsx("div", {
+			className: "tw:flex tw:h-0 tw:flex-1 tw:flex-col tw:[&_>div]:h-full",
+			children: /* @__PURE__ */ jsx(CodeMirror, {
+				ref: editorRef,
+				height: "100%",
+				value,
+				onChange: handleChange,
+				extensions,
+				readOnly,
+				onCreateEditor: handleCreateEditor,
+				basicSetup
+			})
+		})]
+	});
 };
-var EMPTY_LINES = /* @__PURE__ */ new Set();
-var EMPTY_CLASSIFICATION = /* @__PURE__ */ new Map();
-var MergePane = ({
-  value,
-  highlightedLines,
-  lineClassification,
-  readOnly = false,
-  onChange,
-  header,
-  headerClassName,
-  className,
-  onScrollDOMReady,
-  deleted = false
-}) => {
-  const editorRef = useRef(null);
-  const handleChange = useStableCallback((next) => onChange?.(next));
-  const themeExtension = useThemedExtension(`merge-pane:${deleted}`, (scheme) => {
-    const dark = scheme === "dark";
-    const deletedSurface = dark ? `${colors.error[500]}1f` : colors.error[100];
-    const deletedGutter = dark ? `${colors.error[500]}3d` : colors.error[200];
-    const deletedGutterText = dark ? colors.error[300] : colors.error[700];
-    return EditorView.theme({
-      "&.cm-editor": {
-        height: "100%",
-        backgroundColor: deleted ? deletedSurface : resolveToken("background", "249 250 251"),
-        // Pair the token-driven surface with a token-driven text color so line
-        // content stays readable when the pane's `--background` goes dark.
-        color: resolveToken("foreground", "30 41 59"),
-        outline: "none"
-      },
-      ".cm-gutters": {
-        backgroundColor: deleted ? deletedGutter : resolveToken("muted", "241 245 249"),
-        color: deleted ? deletedGutterText : resolveToken("muted-foreground", "100 116 139")
-      },
-      "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
-      ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
-    });
-  });
-  const diffHighlightExtension = useMemo(() => createDiffHighlightExtension(), []);
-  const diffHighlightTheme = useThemedExtension("merge-diff-highlight", buildDiffHighlightTheme);
-  const basicSetup = useMemo(
-    () => ({ ...buildBasicSetup(readOnly), lineNumbers: true }),
-    [readOnly]
-  );
-  const extensions = useMemo(
-    () => [
-      diffHighlightExtension,
-      diffHighlightTheme,
-      themeExtension,
-      // Recalc viewport after every doc change so late-settling layouts (alerts
-      // appearing above the editor) don't leave trailing lines blank.
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          requestAnimationFrame(() => update.view.dispatch({}));
-        }
-      })
-    ],
-    [diffHighlightExtension, diffHighlightTheme, themeExtension]
-  );
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    if (!view) return;
-    updateHighlightedLines(
-      view,
-      deleted ? EMPTY_LINES : highlightedLines,
-      deleted ? EMPTY_CLASSIFICATION : lineClassification
-    );
-  }, [highlightedLines, lineClassification, deleted]);
-  const handleCreateEditor = useCallback(
-    (view) => {
-      updateHighlightedLines(
-        view,
-        deleted ? EMPTY_LINES : highlightedLines,
-        deleted ? EMPTY_CLASSIFICATION : lineClassification
-      );
-      onScrollDOMReady?.(view.scrollDOM);
-    },
-    [highlightedLines, lineClassification, onScrollDOMReady, deleted]
-  );
-  useEffect(() => {
-    return () => onScrollDOMReady?.(null);
-  }, [onScrollDOMReady]);
-  useEffect(() => {
-    const view = editorRef.current?.view;
-    const wrapper = view?.dom.parentElement;
-    if (!view || !wrapper) return;
-    const observer = new ResizeObserver(() => view.dispatch({}));
-    observer.observe(wrapper);
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:overflow-hidden",
-        className,
-        deleted && "tw:border-error-300 tw:[[data-theme=dark]_&]:border-error-500/50"
-      ),
-      children: [
-        header && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "tw:px-4 tw:py-3",
-              // Same light/dark split as the editor wash below — `PaneHeader` pins
-              // `text-foreground`, which goes near-white and vanishes on the
-              // opaque light-red band.
-              deleted ? "tw:border-b tw:border-error-200 tw:bg-error-100 tw:[[data-theme=dark]_&]:border-error-500/30 tw:[[data-theme=dark]_&]:bg-error-500/15" : "tw:bg-background",
-              headerClassName
-            ),
-            children: header
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "tw:flex tw:h-0 tw:flex-1 tw:flex-col tw:[&_>div]:h-full", children: /* @__PURE__ */ jsx(
-          CodeMirror,
-          {
-            ref: editorRef,
-            height: "100%",
-            value,
-            onChange: handleChange,
-            extensions,
-            readOnly,
-            onCreateEditor: handleCreateEditor,
-            basicSetup
-          }
-        ) })
-      ]
-    }
-  );
+//#endregion
+//#region src/components/MergeEditor/useScrollSync.ts
+const useScrollSync = () => {
+	const scrollersRef = useRef([]);
+	const followersRef = useRef(/* @__PURE__ */ new Map());
+	const isSyncingRef = useRef(false);
+	const scrollerCallbacksRef = useRef(/* @__PURE__ */ new Map());
+	const followerCallbacksRef = useRef(/* @__PURE__ */ new Map());
+	const updateFollowers = useCallback(() => {
+		for (const [, { paneIndex, el }] of followersRef.current) {
+			const scroller = scrollersRef.current[paneIndex];
+			if (!scroller) continue;
+			el.style.transform = `translateY(-${scroller.scrollTop}px)`;
+		}
+	}, []);
+	const handleScroll = useCallback((e) => {
+		if (isSyncingRef.current) return;
+		isSyncingRef.current = true;
+		const sourceScrollTop = e.target.scrollTop;
+		for (const scroller of scrollersRef.current) {
+			if (!scroller || scroller === e.target) continue;
+			const targetMax = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+			scroller.scrollTop = Math.min(sourceScrollTop, targetMax);
+		}
+		updateFollowers();
+		isSyncingRef.current = false;
+	}, [updateFollowers]);
+	return {
+		registerScroller: useCallback((index) => {
+			const existing = scrollerCallbacksRef.current.get(index);
+			if (existing) return existing;
+			const callback = (el) => {
+				const prev = scrollersRef.current[index];
+				if (prev === el) return;
+				prev?.removeEventListener("scroll", handleScroll);
+				scrollersRef.current[index] = el;
+				el?.addEventListener("scroll", handleScroll, { passive: true });
+			};
+			scrollerCallbacksRef.current.set(index, callback);
+			return callback;
+		}, [handleScroll]),
+		registerFollower: useCallback((paneIndex, key) => {
+			const existing = followerCallbacksRef.current.get(key);
+			if (existing) return existing;
+			const callback = (el) => {
+				if (el) followersRef.current.set(key, {
+					paneIndex,
+					el
+				});
+				else followersRef.current.delete(key);
+			};
+			followerCallbacksRef.current.set(key, callback);
+			return callback;
+		}, [])
+	};
 };
-var useScrollSync = () => {
-  const scrollersRef = useRef([]);
-  const followersRef = useRef(/* @__PURE__ */ new Map());
-  const isSyncingRef = useRef(false);
-  const scrollerCallbacksRef = useRef(/* @__PURE__ */ new Map());
-  const followerCallbacksRef = useRef(/* @__PURE__ */ new Map());
-  const updateFollowers = useCallback(() => {
-    for (const [, { paneIndex, el }] of followersRef.current) {
-      const scroller = scrollersRef.current[paneIndex];
-      if (!scroller) continue;
-      el.style.transform = `translateY(-${scroller.scrollTop}px)`;
-    }
-  }, []);
-  const handleScroll = useCallback(
-    (e) => {
-      if (isSyncingRef.current) return;
-      isSyncingRef.current = true;
-      const sourceScrollTop = e.target.scrollTop;
-      for (const scroller of scrollersRef.current) {
-        if (!scroller || scroller === e.target) continue;
-        const targetMax = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
-        scroller.scrollTop = Math.min(sourceScrollTop, targetMax);
-      }
-      updateFollowers();
-      isSyncingRef.current = false;
-    },
-    [updateFollowers]
-  );
-  const registerScroller = useCallback(
-    (index) => {
-      const existing = scrollerCallbacksRef.current.get(index);
-      if (existing) return existing;
-      const callback = (el) => {
-        const prev = scrollersRef.current[index];
-        if (prev === el) return;
-        prev?.removeEventListener("scroll", handleScroll);
-        scrollersRef.current[index] = el;
-        el?.addEventListener("scroll", handleScroll, { passive: true });
-      };
-      scrollerCallbacksRef.current.set(index, callback);
-      return callback;
-    },
-    [handleScroll]
-  );
-  const registerFollower = useCallback((paneIndex, key) => {
-    const existing = followerCallbacksRef.current.get(key);
-    if (existing) return existing;
-    const callback = (el) => {
-      if (el) {
-        followersRef.current.set(key, { paneIndex, el });
-      } else {
-        followersRef.current.delete(key);
-      }
-    };
-    followerCallbacksRef.current.set(key, callback);
-    return callback;
-  }, []);
-  return { registerScroller, registerFollower };
+//#endregion
+//#region src/components/MergeEditor/MergeEditor.tsx
+const EMPTY_LINES = /* @__PURE__ */ new Set();
+const EMPTY_CLASSIFICATION = /* @__PURE__ */ new Map();
+const MergeEditor = ({ mergeValue, handleMergeChange, leftText, rightText, leftConflicts, rightConflicts, leftHighlightedLines, rightHighlightedLines, leftClassification, rightClassification, mergeHighlightedLines, mergeClassification, acceptLeft, acceptRight, dismissLeft, dismissRight, leftHeader, middleHeader, middleHeaderClassName, middleClassName, rightHeader, className, leftDeleted = false, rightDeleted = false }) => {
+	const { registerScroller, registerFollower } = useScrollSync();
+	const anySideDeleted = leftDeleted || rightDeleted;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex tw:h-full tw:min-h-0 tw:overflow-hidden tw:bg-background tw:gap-3", className),
+		children: [
+			/* @__PURE__ */ jsx(MergePane, {
+				value: leftText,
+				highlightedLines: leftHighlightedLines,
+				lineClassification: leftClassification,
+				readOnly: true,
+				header: leftHeader,
+				className: "tw:rounded-r-lg tw:border tw:border-border",
+				onScrollDOMReady: registerScroller(0),
+				deleted: leftDeleted
+			}),
+			/* @__PURE__ */ jsx(AcceptControls, {
+				conflicts: leftDeleted ? [] : leftConflicts,
+				side: "left",
+				onAccept: acceptLeft,
+				onDismiss: dismissLeft,
+				contentRef: registerFollower(0, "left-controls")
+			}),
+			/* @__PURE__ */ jsx(MergePane, {
+				value: mergeValue,
+				highlightedLines: anySideDeleted ? EMPTY_LINES : mergeHighlightedLines,
+				lineClassification: anySideDeleted ? EMPTY_CLASSIFICATION : mergeClassification,
+				onChange: handleMergeChange,
+				header: middleHeader,
+				headerClassName: middleHeaderClassName,
+				className: cn("tw:border tw:border-border tw:rounded-lg", middleClassName),
+				onScrollDOMReady: registerScroller(1)
+			}),
+			/* @__PURE__ */ jsx(AcceptControls, {
+				conflicts: rightDeleted ? [] : rightConflicts,
+				side: "right",
+				onAccept: acceptRight,
+				onDismiss: dismissRight,
+				contentRef: registerFollower(2, "right-controls")
+			}),
+			/* @__PURE__ */ jsx(MergePane, {
+				value: rightText,
+				highlightedLines: rightHighlightedLines,
+				lineClassification: rightClassification,
+				readOnly: true,
+				header: rightHeader,
+				className: "tw:rounded-l-lg tw:border tw:border-border",
+				onScrollDOMReady: registerScroller(2),
+				deleted: rightDeleted
+			})
+		]
+	});
 };
-var EMPTY_LINES2 = /* @__PURE__ */ new Set();
-var EMPTY_CLASSIFICATION2 = /* @__PURE__ */ new Map();
-var MergeEditor = ({
-  mergeValue,
-  handleMergeChange,
-  leftText,
-  rightText,
-  leftConflicts,
-  rightConflicts,
-  leftHighlightedLines,
-  rightHighlightedLines,
-  leftClassification,
-  rightClassification,
-  mergeHighlightedLines,
-  mergeClassification,
-  acceptLeft,
-  acceptRight,
-  dismissLeft,
-  dismissRight,
-  leftHeader,
-  middleHeader,
-  middleHeaderClassName,
-  middleClassName,
-  rightHeader,
-  className,
-  leftDeleted = false,
-  rightDeleted = false
-}) => {
-  const { registerScroller, registerFollower } = useScrollSync();
-  const anySideDeleted = leftDeleted || rightDeleted;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "tw:flex tw:h-full tw:min-h-0 tw:overflow-hidden tw:bg-background tw:gap-3",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          MergePane,
-          {
-            value: leftText,
-            highlightedLines: leftHighlightedLines,
-            lineClassification: leftClassification,
-            readOnly: true,
-            header: leftHeader,
-            className: "tw:rounded-r-lg tw:border tw:border-border",
-            onScrollDOMReady: registerScroller(0),
-            deleted: leftDeleted
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AcceptControls,
-          {
-            conflicts: leftDeleted ? [] : leftConflicts,
-            side: "left",
-            onAccept: acceptLeft,
-            onDismiss: dismissLeft,
-            contentRef: registerFollower(0, "left-controls")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MergePane,
-          {
-            value: mergeValue,
-            highlightedLines: anySideDeleted ? EMPTY_LINES2 : mergeHighlightedLines,
-            lineClassification: anySideDeleted ? EMPTY_CLASSIFICATION2 : mergeClassification,
-            onChange: handleMergeChange,
-            header: middleHeader,
-            headerClassName: middleHeaderClassName,
-            className: cn("tw:border tw:border-border tw:rounded-lg", middleClassName),
-            onScrollDOMReady: registerScroller(1)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AcceptControls,
-          {
-            conflicts: rightDeleted ? [] : rightConflicts,
-            side: "right",
-            onAccept: acceptRight,
-            onDismiss: dismissRight,
-            contentRef: registerFollower(2, "right-controls")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MergePane,
-          {
-            value: rightText,
-            highlightedLines: rightHighlightedLines,
-            lineClassification: rightClassification,
-            readOnly: true,
-            header: rightHeader,
-            className: "tw:rounded-l-lg tw:border tw:border-border",
-            onScrollDOMReady: registerScroller(2),
-            deleted: rightDeleted
-          }
-        )
-      ]
-    }
-  );
+//#endregion
+//#region src/components/CodeEditor/CodeEditorField.tsx
+/**
+* Code / JSON editor field. State is the raw editor text (`string`) — never a parsed value.
+*
+* ⚠️ Shipped from **`@keboola/design/editors`**, not as a `field.*` connector on `useAppForm`, and
+* deliberately: CodeMirror plus its language modes is ~170 kB brotlied, and registering this in the root
+* form hook pulled all of it into `@keboola/design`'s main entry — every consumer paying for an editor
+* most of them never render. That is the whole reason the `editors` subpath exists.
+*
+* It still reads the field from context, so it composes exactly like a connector:
+*
+* ```tsx
+* import { CodeEditorField } from '@keboola/design/editors';
+*
+* <form.AppField name="schema">{() => <CodeEditorField label="Schema" />}</form.AppField>
+* ```
+*
+* Text in, text out, deliberately: a JSON field is mid-edit invalid for most of the time the user is
+* typing in it, and parsing on every keystroke would either throw away their cursor position or throw
+* away the text. Parse in the schema (or at submit) and keep the editor's own content authoritative.
+*
+* `variant="field"` by default so it reads as a form control rather than a code block.
+*
+* Labelled with `aria-labelledby`, not `for`: CodeMirror's editable node is a `div[role="textbox"]`,
+* which is not a labelable element.
+*/
+const CodeEditorField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, editorClassName, variant = "field", ...editorProps }) => {
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldItem, {
+		label,
+		action,
+		required,
+		requiredMark,
+		labelling: "aria-labelledby",
+		help,
+		tooltip,
+		className,
+		"aria-describedby": ariaDescribedBy,
+		children: (control) => /* @__PURE__ */ jsx(CodeEditor, {
+			...editorProps,
+			variant,
+			className: editorClassName,
+			ariaLabelledBy: control["aria-labelledby"],
+			ariaDescribedBy: control["aria-describedby"],
+			ariaInvalid: control["aria-invalid"],
+			ariaRequired: control["aria-required"],
+			allowBlankDocument: !required,
+			value: field.state.value ?? "",
+			onChange: field.handleChange,
+			onBlur: field.handleBlur
+		})
+	});
 };
+//#endregion
+export { CodeEditor, CodeEditorField, LANGUAGE_MODES, MergeEditor, SqlEditor, isLanguageMode };
 
-export { MergeEditor };
-//# sourceMappingURL=editors.js.map
 //# sourceMappingURL=editors.js.map