@keboola/design 11.9.0 → 12.0.0

package/dist/context-U293r3v-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-U293r3v-.js","names":[],"sources":["../src/components/ThemeProvider/context.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { DEFAULT_COLOR_SCHEME, defaultBrand, defaultTheme } from './defaults';\nimport type { Theme } from './types';\nimport type { useBrandState } from './useBrandState';\nimport type { useColorSchemeState } from './useColorSchemeState';\n\nexport type ThemeContextValue = ReturnType<typeof useColorSchemeState> &\n  ReturnType<typeof useBrandState> & {\n    themes: Theme[];\n    currentTheme: Theme;\n    /** Raw brand tokens, so a nested `ThemeScope` can re-derive them for another scheme. */\n    brandTheme: Brand['theme'];\n  };\n\nconst noop = () => void 0;\n\nconst defaultContext: ThemeContextValue = {\n  scheme: DEFAULT_COLOR_SCHEME,\n  resolvedScheme: DEFAULT_COLOR_SCHEME,\n  setScheme: noop,\n  brandId: defaultTheme.id,\n  setBrand: noop,\n\n  themes: [defaultTheme],\n  currentTheme: defaultTheme,\n  brandTheme: defaultBrand.theme,\n};\n\nexport const ThemeContext = createContext(defaultContext);\n\nexport const useTheme = () => use(ThemeContext);\n\n/**\n * TEMPORARY, kbc-ui-internal: whether the subtree renders the argo design language.\n *\n * - kbc-ui provides `false` for legacy brands/surfaces (its `AppThemeProvider`).\n * - `ThemeProvider` never sets it — argo is independent of the brand.\n * - Delete it and `useArgoDesign` once kbc-ui's chrome is migrated.\n */\nexport const ArgoDesignContext = createContext<boolean>(true);\n\nexport const useArgoDesign = () => use(ArgoDesignContext);\n"],"mappings":";;;AAiBA,MAAM,aAAa,KAAK;AAExB,MAAM,iBAAoC;CACxC,QAAQ;CACR,gBAAgB;CAChB,WAAW;CACX,SAAS,aAAa;CACtB,UAAU;CAEV,QAAQ,CAAC,YAAY;CACrB,cAAc;CACd,YAAY,aAAa;AAC3B;AAEA,MAAa,eAAe,cAAc,cAAc;AAExD,MAAa,iBAAiB,IAAI,YAAY;;;;;;;;AAS9C,MAAa,oBAAoB,cAAuB,IAAI;AAE5D,MAAa,sBAAsB,IAAI,iBAAiB"}

package/dist/editors.d.ts

@@ -1,5 +1,5 @@
 import "./types-BPcAjMG0.js";
-import { ChangeClassification, FieldItemProps, MergeConflict } from "./FieldItem-vhIJW4pj.js";
+import { ChangeClassification, FieldItemProps, MergeConflict } from "./FieldItem-CPN1xjN5.js";
 import { ComponentProps, ReactNode } from "react";
 import { CompletionSource } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
@@ -24,99 +24,35 @@ type EditorVariable = {
 type Props$3 = {
   value: string;
   previousValue?: string;
-  /**
-   * `'field'` draws the chrome an `InputGroup` draws — surface, border, radius,
-   * focus ring, read-only wash — for an editor that is one control among others
-   * in a form. It sizes to its content, so don't pin its height.
-   *
-   * `'plain'` (the default) is the full-bleed surface of an editor that *is* the
-   * panel: a modal body, a chat block, a fixed-height viewer already framed by
-   * whatever contains it.
-   */
+  /** `'field'`: `InputGroup` chrome, sized to content (don't pin height). `'plain'`: full-bleed panel. */
   variant?: 'plain' | 'field';
   mode?: LANGUAGE_MODE;
   placeholder?: string;
-  /** Names the editable region for screen readers — the editor has no visible label of its own. */
+  /** Screen-reader name: the editor has no visible label of its own. */
   ariaLabel?: string;
-  /**
-   * Names the editable region from an existing element, for when the label is already on screen.
-   * Prefer this over `ariaLabel` inside a form — `CodeEditorField` passes the field's own label id.
-   */
+  /** Prefer over `ariaLabel` inside a form. */
   ariaLabelledBy?: string;
-  /** Links the editable region to help / error text. Space-delimited idref list. */
   ariaDescribedBy?: string;
-  /** Marks the editable region invalid. Visual error styling is the caller's (`variant="field"`). */
+  /** Visual error styling is the caller's (`variant="field"`). */
   ariaInvalid?: boolean;
   ariaRequired?: boolean;
-  /**
-   * Treats a blank document as valid instead of a parse error (JSON modes only).
-   *
-   * - Off by default: for a standalone editor "Unexpected end of input" is correct, and at several
-   *   call sites the gutter marker is the only thing explaining a Save button that
-   *   `isValidJsonConfig('') === false` has already disabled.
-   * - `CodeEditorField` turns it on for a field that is not `required`, where an empty document is
-   *   how the value is removed.
-   */
+  /** JSON modes: a blank document is not a parse error. Off by default: the mark explains a disabled Save. */
   allowBlankDocument?: boolean;
-  /**
-   * Fires when focus leaves the editable region — what a form connector needs to mark its field
-   * blurred, which is the gate errors are revealed on.
-   *
-   * - Bound as a CodeMirror DOM handler on the content node, not on the wrapper: the wrapper is not
-   *   what gets focused.
-   * - Installed only when passed, so an editor without it keeps the extension set it had.
-   */
+  /** Bound on CodeMirror's content node (the wrapper is not what gets focused). */
   onBlur?: () => void;
-  /**
-   * Highlights every occurrence and scrolls the selected one into view. The find
-   * UI is the caller's — pass the query it holds, and omit both props entirely to
-   * leave the search extension uninstalled.
-   */
+  /** Highlights matches; the find UI is the caller's. Omit both props to skip the search extension. */
   searchQuery?: string;
   searchMatchIndex?: number;
   readOnly?: boolean;
-  /**
-   * Refuses edits while leaving the editor looking and behaving as it did — for a
-   * transient lock such as an in-flight save, where a keystroke landing mid-request
-   * would be overwritten by the response. `readOnly` is the wrong prop for that:
-   * it turns the editor into a viewer, greying the surface and taking the lint
-   * marks and completions with it.
-   */
+  /** Refuses edits without changing the look, e.g. during a save; `readOnly` makes a greyed viewer. */
   inputLocked?: boolean;
-  /**
-   * A flat list of completions, offered everywhere in the document. One word per
-   * label: CodeMirror derives the pattern for the word being completed from the
-   * labels' characters, so a space in one widens it across whitespace and the
-   * editor offers nothing past the first word of a line. A phrase belongs in
-   * `completionSource`.
-   *
-   * Compared by identity, like `completionSource` — hand the editor a stable array.
-   */
+  /** One word per label (a space breaks matching; phrases go in `completionSource`). Pass a stable array. */
   autocompletions?: string[];
-  /**
-   * Completions that depend on where the cursor is — a column list offered only
-   * after its table, say. Wins over both `autocompletions` and `completeAny`,
-   * which stay the right props for a list that is the same everywhere in the
-   * document and for having no list at all. Like them, it opens on typing.
-   *
-   * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
-   * extension tree on every render.
-   */
+  /** Cursor-dependent completions; wins over `autocompletions` / `completeAny`. Memoize it. */
   completionSource?: CompletionSource;
-  /**
-   * Configuration variables, completed into `{{name}}`. Independent of
-   * `completionSource`: both are offered, so a caller keeps its own completions and
-   * gets variables spelled the way the rest of the platform writes them.
-   */
+  /** Completed into `{{name}}`, alongside `completionSource`. */
   variables?: EditorVariable[];
-  /**
-   * Whether the completion popup runs at all.
-   *
-   * - `false` silences every source, the *language's* own vocabulary included.
-   * - For a field highlighted as a language nobody authors there: pasted `.env` and a
-   *   cURL command sit in shell mode for its colours, and shell's `ls`, `sudo`, `vim`
-   *   are noise over content we cannot predict.
-   */
+  /** `false` silences every source, the language's own included (e.g. shell mode used only for colours). */
   withCompletions?: boolean;
   extraKeys?: Record<string, () => void>;
   withToggleCommentHint?: boolean;
@@ -128,11 +64,7 @@ type Props$3 = {
   completeAny?: boolean;
   help?: ReactNode;
   helpPostfix?: ReactNode;
-  /**
-   * Extra actions for the toolbar that floats over the editor's top-right corner,
-   * beside the copy button. The toolbar is a 28px chip, so pass `size="icon-xs"`
-   * buttons — a default-sized one grows the chip and de-aligns the copy button.
-   */
+  /** Toolbar actions beside the copy button; pass `size="icon-xs"` buttons to fit the 28px chip. */
   renderAdditionalButtons?: (value?: string) => ReactNode;
   className?: string;
 } & ({
@@ -142,7 +74,7 @@ type Props$3 = {
   readOnly?: boolean;
   onChange: (value: string) => void;
 });
-declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaInvalid, ariaRequired, allowBlankDocument, onBlur, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, withCompletions, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className }: Props$3) => import("react/jsx-runtime").JSX.Element;
+declare const CodeEditor: ({ value, previousValue, onChange, variant, mode, placeholder, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaInvalid, ariaRequired, allowBlankDocument, onBlur, searchQuery, searchMatchIndex, readOnly, inputLocked, autocompletions, completionSource, variables, withCompletions, extraKeys, withToggleCommentHint, withAutofocus, withLineNumbers, withLineWrapping, withCollapseUnchanged, withCopyButton, completeAny, help, helpPostfix, renderAdditionalButtons, className }: Props$3) => import("react").JSX.Element;
 //#endregion
 //#region src/components/CodeEditor/highlighting.d.ts
 type HighlightedLines = {
@@ -175,19 +107,11 @@ type Props$2 = {
   autoFocus?: boolean;
   lineNumbers?: boolean;
   className?: string;
-  /**
-   * A schema is too large to compare by value, so this one prop keeps the
-   * identity requirement every other prop here is now free of: hand the editor
-   * a stable object, or it rebuilds its whole extension tree on every render.
-   */
+  /** Compared by identity: pass a stable object or the extension tree rebuilds every render. */
   schema?: SQLNamespace;
   /**
-   * Completions the caller knows and the schema does not — a table the code writes to
-   * before it exists, say. Added to the schema, keyword and variable completions; unlike
-   * `CodeEditor`'s prop of the same name, it replaces nothing.
-   *
-   * Compared by identity: build it in a `useMemo` or the editor rebuilds its whole
-   * extension tree on every render.
+   * Added to schema/keyword/variable completions; unlike `CodeEditor`'s, replaces nothing.
+   * Compared by identity: `useMemo` it or the extension tree rebuilds every render.
    */
   completionSource?: CompletionSource;
   variables?: EditorVariable[];
@@ -196,7 +120,7 @@ type Props$2 = {
   highlightLines?: HighlightedLines;
   dialect?: SqlDialectName$1;
 };
-declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }: Props$2) => import("react/jsx-runtime").JSX.Element;
+declare const SqlEditor: ({ value, onChange, onSelectionChange, onCreateEditor, onDestroyEditor, onBlurEditor, onFocusEditor, placeholder, searchQuery, searchMatchIndex, readOnly, queryParser, autoFocus, lineNumbers, className, schema, completionSource, variables, defaultDatabase, defaultSchema, highlightLines, dialect }: Props$2) => import("react").JSX.Element;
 //#endregion
 //#region src/components/MergeEditor/MergeEditor.d.ts
 type Props$1 = {
@@ -222,15 +146,11 @@ type Props$1 = {
   middleClassName?: string;
   rightHeader?: ReactNode;
   className?: string;
-  /**
-   * Paint the corresponding read-only pane with the error palette to signal the
-   * side has been deleted upstream. The diff is still rendered so the user can
-   * see what was lost; accept/dismiss controls for that side are suppressed.
-   */
+  /** Side deleted upstream: its pane turns error-red, its accept/dismiss controls are hidden. */
   leftDeleted?: boolean;
   rightDeleted?: boolean;
 };
-declare 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, rightDeleted }: Props$1) => import("react/jsx-runtime").JSX.Element;
+declare 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, rightDeleted }: Props$1) => import("react").JSX.Element;
 //#endregion
 //#region src/components/CodeEditor/CodeEditorField.d.ts
 type Props = FieldItemProps & Omit<ComponentProps<typeof CodeEditor>, 'value' | 'onChange' | 'onBlur' | 'ariaLabel' | 'ariaLabelledBy' | 'ariaDescribedBy' | 'ariaInvalid' | 'ariaRequired' | 'readOnly' | 'className' | 'allowBlankDocument'> & {
@@ -238,31 +158,14 @@ type Props = FieldItemProps & Omit<ComponentProps<typeof CodeEditor>, 'value' |
   editorClassName?: string;
 };
 /**
- * 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.
+ * Code / JSON editor field; state is the raw editor text, never a parsed value.
  *
- * Labelled with `aria-labelledby`, not `for`: CodeMirror's editable node is a `div[role="textbox"]`,
- * which is not a labelable element.
+ * - In `@keboola/design/editors`, not `useAppForm`: keeps CodeMirror (~170 kB) out of the main entry.
+ * - Reads the field from context, so use it inside `<form.AppField>` like a connector.
+ * - JSON is invalid mid-edit; parse in the schema or at submit.
+ * - Labelled via `aria-labelledby`: CodeMirror's `div[role="textbox"]` is not labelable.
  */
-declare const CodeEditorField: ({ label, action, required, requiredMark, help, tooltip, className, 'aria-describedby': ariaDescribedBy, editorClassName, variant, ...editorProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CodeEditorField: ({ label, action, required, requiredMark, help, tooltip, className, 'aria-describedby': ariaDescribedBy, editorClassName, variant, ...editorProps }: Props) => import("react").JSX.Element;
 //#endregion
 export { CodeEditor, CodeEditorField, type EditorVariable, type LANGUAGE_MODE, LANGUAGE_MODES, MergeEditor, type SqlDialectName, SqlEditor, isLanguageMode };
 //# sourceMappingURL=editors.d.ts.map

package/dist/editors.js

@@ -1,17 +1,17 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { ChevronsLeft, ChevronsRight, X } from "./icons-Cek151jC.js";
-import { Button } from "./Button-DsRrU5F1.js";
+import { ChevronsLeft, ChevronsRight, X } from "./icons-wcA70iQx.js";
+import { Button } from "./Button-Ca4Q3VJU.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { FieldItem, useFieldContext } from "./FieldItem-DZGIdiXE.js";
+import { FieldItem, useFieldContext } from "./FieldItem-2wMXQ0Qw.js";
 import { CHANGE_CLASS } from "./internal/components/MergeEditor/constants.js";
-import { resolveToken } from "./themeTokens-qP1-55O7.js";
-import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-BJKJXA0c.js";
+import { resolveToken } from "./themeTokens-7DEab0kp.js";
+import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-BSo-oLFG.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 colors from "@keboola/tailwind-config/colors";
 import { RangeSet, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
 import { defaultKeymap } from "@codemirror/commands";
 //#region src/components/CodeEditor/activeQueryHighlight.ts
@@ -19,10 +19,7 @@ const activeQueryFirstLine = Decoration.line({ class: "cm-active-query cm-active
 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.
-*/
+/** Whitespace-trimmed offsets of the query holding the cursor, or null. */
 const findActiveQueryRange = (doc, cursorPos, boundaries) => {
 	if (boundaries.length === 0) return null;
 	let match = boundaries[boundaries.length - 1];
@@ -43,16 +40,20 @@ const findActiveQueryRange = (doc, cursorPos, boundaries) => {
 	};
 };
 /**
-* Convert splitSqlQueries result (array of query strings that join back to the
-* original doc) into character-offset boundaries.
+* Character-offset boundaries for the fragments a splitter reported for `doc`.
+*
+* - Bounded by `docLength`: an injected splitter is not trusted to re-join to `doc`.
+* - A fragment past the end is cut there, or dropped if it starts past it.
+* - Offsets past the document would throw in `Text.lineAt`.
 */
-const computeBoundaries = (queries) => {
+const computeBoundaries = (queries, docLength) => {
 	const boundaries = [];
 	let offset = 0;
 	for (const query of queries) {
+		if (offset >= docLength) break;
 		boundaries.push({
 			from: offset,
-			to: offset + query.length
+			to: Math.min(offset + query.length, docLength)
 		});
 		offset += query.length;
 	}
@@ -61,14 +62,9 @@ const computeBoundaries = (queries) => {
 /**
 * 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.
+* - Clamped to `[0, changes.length]` first: the re-parse is debounced, so boundaries can be
+*   stale, and `ChangeSet.mapPos` throws a `RangeError` past the pre-change length.
+* - Degenerate boundaries are dropped.
 */
 const mapBoundariesThroughChanges = (boundaries, changes) => {
 	const prevLen = changes.length;
@@ -125,13 +121,7 @@ const activeQueryHighlight = (splitQueries) => {
 			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.
-		*/
+		/** Sets `this.decorations` without dispatching; an async caller must dispatch. */
 		updateFromCache(view) {
 			if (!view.hasFocus) {
 				this.decorations = Decoration.none;
@@ -151,7 +141,6 @@ const activeQueryHighlight = (splitQueries) => {
 			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 () => {
@@ -174,7 +163,7 @@ const activeQueryHighlight = (splitQueries) => {
 				}
 				if (this.destroyed || seq !== this.seq) return;
 				this.cachedDoc = doc;
-				this.cachedBoundaries = computeBoundaries(queries);
+				this.cachedBoundaries = computeBoundaries(queries, doc.length);
 				this.updateFromCache(view);
 				if (!this.destroyed) view.dispatch();
 			}, 100);
@@ -506,25 +495,11 @@ const createDiffHighlightExtension = () => StateField.define({
 	provide: (f) => [EditorView.decorations.from(f, (val) => val.decorations), gutterLineClass.from(f, (val) => val.gutterMarkers)]
 });
 /**
-* 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.
+* The highlight palette, for `useThemedExtension`; separate from the StateField, which must stay stable across schemes.
 *
-* 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.
+* - `!important` overrides CodeMirror's active-line and selection backgrounds.
+* - SAFE (green): one side changed. CONFLICT (amber, not red — red reads as deletion): both did.
+* - Dark mode tints at low alpha; an opaque pastel would put light text on a light slab.
 */
 const buildDiffHighlightTheme = (scheme) => {
 	const dark = scheme === "dark";
@@ -766,29 +741,12 @@ const MergeEditor = ({ mergeValue, handleMergeChange, leftText, rightText, leftC
 //#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.
+* Code / JSON editor field; state is the raw editor text, never a parsed value.
 *
-* Labelled with `aria-labelledby`, not `for`: CodeMirror's editable node is a `div[role="textbox"]`,
-* which is not a labelable element.
+* - In `@keboola/design/editors`, not `useAppForm`: keeps CodeMirror (~170 kB) out of the main entry.
+* - Reads the field from context, so use it inside `<form.AppField>` like a connector.
+* - JSON is invalid mid-edit; parse in the schema or at submit.
+* - Labelled via `aria-labelledby`: CodeMirror's `div[role="textbox"]` is not labelable.
 */
 const CodeEditorField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, editorClassName, variant = "field", ...editorProps }) => {
 	const field = useFieldContext();