@keboola/design 11.0.1 → 11.3.0

package/dist/{CodeEditor-BfQJfbhL.js → CodeEditor-CUse8znx.js}

@@ -1,32 +1,32 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { isMac, keyCodes } from "./utils-D0c5VAyF.js";
-import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { isMac, keyCodes } from "./utils-B-g7d_Jb.js";
+import { useArgoDesign } from "./context-BrNtMc1H.js";
 import { escapeStringRegexp } from "./escapeStringRegexp-8MxP2knR.js";
-import { ClipboardButton } from "./ClipboardButton-ez5V3fkk.js";
+import { ClipboardButton } from "./ClipboardButton-CQ6Aewpg.js";
 import { HelpBlock } from "./internal/components/HelpBlock.js";
-import { Kbd } from "./Kbd-CxHAo1oo.js";
+import { Kbd } from "./Kbd-D6LpR7G2.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { resolveToken, useThemeAttributes } from "./themeTokens-BNg98Mu9.js";
+import { resolveToken, useThemeAttributes } from "./themeTokens-7T1AFLhq.js";
 import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { autocompletion, completeAnyWord } from "@codemirror/autocomplete";
-import { json, jsonParseLinter } from "@codemirror/lang-json";
-import { linter } from "@codemirror/lint";
 import { unifiedMergeView } from "@codemirror/merge";
 import { Decoration, EditorView, ViewPlugin, keymap, placeholder, tooltips } from "@codemirror/view";
 import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import colors from "@keboola/tailwind-config/colors";
 import { javascript } from "@codemirror/lang-javascript";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
 import { MSSQL, MySQL, PLSQL, PostgreSQL, StandardSQL } from "@codemirror/lang-sql";
 import { StreamLanguage } from "@codemirror/language";
 import { r } from "@codemirror/legacy-modes/mode/r";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { toml } from "@codemirror/legacy-modes/mode/toml";
-import { tags } from "@lezer/highlight";
-import { githubLightInit } from "@uiw/codemirror-theme-github";
+import { linter } from "@codemirror/lint";
+import { githubDarkInit, githubLightInit } from "@uiw/codemirror-theme-github";
 import { getSqlLanguageSupport } from "@keboola/codemirror-lang-sql";
 import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
+import { tags } from "@lezer/highlight";
 import { Compartment, StateEffect, StateField } from "@codemirror/state";
 //#region src/components/CodeEditor/ButtonToolbar.tsx
 const ButtonToolbar = ({ value, children }) => {
@@ -344,6 +344,95 @@ const jsonnet = {
 		return null;
 	}
 };
+const DARK_GUTTER_ALPHA = "47";
+/**
+* The two diff fills, per scheme: light keeps the opaque pastel, dark tints the same `500` hue at
+* low alpha over whatever token surface is behind it.
+*
+* - Its own module, importing nothing, so `MergeEditor` can share it without reaching into
+*   `CodeEditor/helpers.ts` and pulling the language modes and the CodeMirror runtime with it.
+* - Shared by the unified merge wash in `helpers.ts` and `buildDiffHighlightTheme` in
+*   `MergeEditor/decorations.ts`, so the two views cannot drift apart on the alphas.
+* - Callers pass the hue and the pastel; which one is used is this function's business.
+*/
+const buildDiffWash = (scheme) => {
+	const dark = scheme === "dark";
+	return {
+		line: (hue, pastel) => dark ? `${hue}29` : pastel,
+		gutter: (hue, pastel) => dark ? `${hue}${DARK_GUTTER_ALPHA}` : pastel
+	};
+};
+//#endregion
+//#region src/components/CodeEditor/syntaxPalette.ts
+/**
+* The tag colours layered over the stock github palette, per colour scheme.
+*
+* - Its own module, importing nothing but the tag vocabulary and the ramps, so
+*   `scripts/contrast-audit.ts` can measure the palette without pulling the language modes and the
+*   CodeMirror runtime into a build script.
+* - Later entries win over the stock rule for the same tag — both `githubLightInit` and
+*   `githubDarkInit` concatenate these after their own.
+* - `foreground` is the caller's, because it is a live `--*` token rather than a ramp step: the
+*   theme passes `resolveToken('foreground')`, the audit passes the scheme's channel value.
+* - Every ramp step here is a light/dark pair, and each pair is chosen against **two** surfaces —
+*   the theme's `background` setting is the page, but `variant="field"` paints on `muted`, which
+*   the theme never sees. Ratios in the comments are quoted `background` / `muted`.
+*/
+const buildSyntaxPalette = (scheme, foreground) => {
+	const dark = scheme === "dark";
+	return [
+		{
+			tag: [
+				tags.name,
+				tags.special(tags.string),
+				tags.bracket
+			],
+			color: foreground
+		},
+		{
+			tag: tags.standard(tags.name),
+			color: dark ? colors.purple[300] : colors.purple[600]
+		},
+		{
+			tag: tags.special(tags.name),
+			color: dark ? colors.cyan[300] : colors.cyan[800]
+		},
+		{
+			tag: tags.string,
+			color: dark ? colors.warning[300] : colors.warning[800]
+		},
+		...dark ? [] : [
+			{
+				tag: [
+					tags.keyword,
+					tags.typeName,
+					tags.typeOperator
+				],
+				color: colors.error[550]
+			},
+			{
+				tag: tags.comment,
+				color: colors.neutral[500]
+			},
+			{
+				tag: tags.quote,
+				color: colors.green[900]
+			},
+			{
+				tag: tags.invalid,
+				color: colors.error[700]
+			}
+		],
+		...dark ? [{
+			tag: [
+				tags.escape,
+				tags.url,
+				tags.link
+			],
+			color: colors.blue[300]
+		}] : []
+	];
+};
 //#endregion
 //#region src/components/CodeEditor/helpers.ts
 const LANGUAGE_MODES = [
@@ -368,44 +457,61 @@ const LANGUAGE_MODES = [
 const isLanguageMode = (mode) => LANGUAGE_MODES.includes(mode);
 const READ_ONLY_EDITOR = "&.cm-editor:has(.cm-content[contenteditable=\"false\"])";
 const EDITABLE_EDITOR = "&.cm-editor:has(.cm-content[contenteditable=\"true\"])";
-const buildBaseThemeStyles = () => ({
-	"*": { lineHeight: "20px" },
-	"*::selection": {
-		backgroundColor: resolveToken("primary", "31 143 255"),
-		color: `${resolveToken("primary-foreground", "255 255 255")} !important`
-	},
-	[READ_ONLY_EDITOR]: { backgroundColor: resolveToken("secondary", "226 232 240") },
-	[`${READ_ONLY_EDITOR} .cm-gutters`]: { backgroundColor: resolveToken("border", "229 231 235") },
-	"&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-	"&.cm-editor, &.cm-editor .cm-scroller": {
-		minHeight: "100%",
-		flexGrow: 1,
-		alignItems: "stretch !important",
-		outline: "none"
-	},
-	".cm-gutter.cm-foldGutter": { display: "none !important" },
-	".cm-gutter.cm-lineNumbers": {
-		paddingLeft: "20px",
-		paddingRight: "6px"
-	},
-	".cm-gutters": { height: "auto" },
-	"&[class*=\"cm-merge-\"] .cm-deletedLine": { backgroundColor: colors.error[100] },
-	"&[class*=\"cm-merge-\"] .cm-changedLine": { backgroundColor: colors.green[100] },
-	"&[class*=\"cm-merge-\"] .cm-deletedLineGutter": { backgroundColor: colors.error[200] },
-	"&[class*=\"cm-merge-\"] .cm-changedLineGutter": { backgroundColor: colors.green[200] },
-	"&[class*=\"cm-merge-\"] .cm-deletedText": { background: colors.error[200] },
-	"&[class*=\"cm-merge-\"] .cm-changedText": { background: colors.green[200] },
-	"&[class*=\"cm-merge-\"]": { backgroundColor: `${colors.white} !important` },
-	"&[class*=\"cm-merge-\"] .cm-gutters": { backgroundColor: `${colors.white} !important` },
-	".cm-changeGutter": {
-		position: "absolute",
-		zIndex: -1,
-		width: "100%",
-		paddingLeft: 0
-	},
-	"&[class*=\"cm-merge-\"] .cm-changedLine,&[class*=\"cm-merge-\"] .cm-line, &[class*=\"cm-merge-\"] .cm-deletedChunk": { paddingLeft: 0 }
-});
+/**
+* Editor chrome and the unified merge (diff) wash.
+*
+* - Chrome surfaces (selection, read-only wash) resolve from live `--*` tokens, so they re-skin
+*   with brand and colour scheme. Fallback channels mirror the light-mode token values for SSR /
+*   no-provider parity.
+* - Diff colours stay categorical — fixed across brands, because added/removed is meaning, not
+*   chrome — but each is a light/dark pair from `buildDiffWash`, shared with
+*   `buildDiffHighlightTheme` in `MergeEditor/decorations.ts`.
+* - This wash reaches only `CodeEditor`'s *unified* merge view — the one a `previousValue` turns on.
+*   `MergePane` builds its own theme from scratch.
+*/
+const buildBaseThemeStyles = (scheme) => {
+	const { line, gutter } = buildDiffWash(scheme);
+	const dark = scheme === "dark";
+	return {
+		"*": { lineHeight: "20px" },
+		"*::selection": {
+			backgroundColor: resolveToken("primary", "31 143 255"),
+			color: `${resolveToken("primary-foreground", "255 255 255")} !important`
+		},
+		[READ_ONLY_EDITOR]: { backgroundColor: dark ? resolveToken("muted", "38 38 45") : resolveToken("secondary", "226 232 240") },
+		[`${READ_ONLY_EDITOR} .cm-gutters`]: { backgroundColor: resolveToken("border", "229 231 235") },
+		"&.cm-editor .cm-scroller": { overflowAnchor: "none" },
+		"&.cm-editor, &.cm-editor .cm-scroller": {
+			minHeight: "100%",
+			flexGrow: 1,
+			alignItems: "stretch !important",
+			outline: "none"
+		},
+		".cm-gutter.cm-foldGutter": { display: "none !important" },
+		".cm-gutter.cm-lineNumbers": {
+			paddingLeft: "20px",
+			paddingRight: "6px"
+		},
+		".cm-gutters": { height: "auto" },
+		"&[class*=\"cm-merge-\"] .cm-deletedLine": { backgroundColor: line(colors.error[500], colors.error[100]) },
+		"&[class*=\"cm-merge-\"] .cm-changedLine": { backgroundColor: line(colors.green[500], colors.green[100]) },
+		"&[class*=\"cm-merge-\"] .cm-deletedLineGutter": { backgroundColor: gutter(colors.error[500], colors.error[200]) },
+		"&[class*=\"cm-merge-\"] .cm-changedLineGutter": { backgroundColor: gutter(colors.green[500], colors.green[200]) },
+		"&[class*=\"cm-merge-\"] .cm-deletedText": { background: gutter(colors.error[500], colors.error[200]) },
+		"&[class*=\"cm-merge-\"] .cm-changedText": { background: gutter(colors.green[500], colors.green[200]) },
+		"&[class*=\"cm-merge-\"]": { backgroundColor: `${resolveToken("background", "249 250 251")} !important` },
+		"&[class*=\"cm-merge-\"] .cm-gutters": { backgroundColor: `${resolveToken("muted", "241 245 249")} !important` },
+		".cm-changeGutter": {
+			position: "absolute",
+			zIndex: -1,
+			width: "100%",
+			paddingLeft: 0
+		},
+		"&[class*=\"cm-merge-\"] .cm-changedLine,&[class*=\"cm-merge-\"] .cm-line, &[class*=\"cm-merge-\"] .cm-deletedChunk": { paddingLeft: 0 }
+	};
+};
 const ALWAYS_OFF = {
+	autocompletion: false,
 	drawSelection: false,
 	foldGutter: false,
 	foldKeymap: false,
@@ -424,41 +530,50 @@ const buildBasicSetup = (readOnly) => ({
 		highlightSelectionMatches: false
 	} : null
 });
-const buildCustomTheme = () => {
+/**
+* The syntax theme, per colour scheme.
+*
+* - The stock github palette is picked by scheme: `githubDarkInit` under dark, `githubLightInit`
+*   otherwise. One palette cannot serve both — the light set scores 1.14:1 to 4.31:1 on the two
+*   dark surfaces, so 10 of its 11 colours failed AA there (UT-5194).
+* - `githubDarkInit` also passes `dark: true` to `EditorView.theme`, which sets the
+*   `EditorView.darkTheme` facet. That is what makes the `&dark` rules apply — CodeMirror's own
+*   base theme (cursor, selection layer, panels, buttons) and ours (`search.ts`,
+*   `highlighting.ts`) both key off it, so they follow the scheme without a second signal.
+* - Chrome (surface, gutter, selection, caret) resolves from live `--*` tokens, so it re-skins with
+*   the brand too. Fallback channels mirror the light-mode token values, for SSR and jsdom.
+* - `caret` and `selectionMatch` are pinned because the two initialisers disagree on them, and the
+*   branch would otherwise change values nothing here chose. The caret follows `foreground`; before
+*   the facet was set, CodeMirror's own default painted it black on the dark page, so it was
+*   invisible. `selectionMatch` is a 10% `primary` tint, which beats each initialiser's own value
+*   on the token it hurts most: 3.82:1 against the light default's 3.29, 5.40:1 against the dark
+*   default's 3.57. Any occurrence wash costs contrast — this is the cheapest one, and it is the
+*   same in both schemes.
+* - `styles` comes from `buildSyntaxPalette`, which lives apart so the audit script can measure it.
+*
+* Those overrides exist because the github theme paints every `name`-family tag one colour, and in
+* SQL nearly every token is a name — identifiers, function calls and `$variables` all drowned
+* together, and a keyword that doubles as a function (`create or REPLACE`) read as a value
+* (UT-5024). Instead: identifiers and brackets carry no colour, functions and special vars get
+* their own hues, and amber is unique to string literals — in JSON that shifts string values from
+* navy to amber, the one visible non-SQL change.
+*/
+const buildCustomTheme = (scheme) => {
 	const foreground = resolveToken("foreground", "30 41 59");
-	return githubLightInit({
+	return (scheme === "dark" ? githubDarkInit : githubLightInit)({
 		settings: {
 			fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
 			background: resolveToken("background", "249 250 251"),
 			foreground,
+			caret: foreground,
 			gutterBackground: resolveToken("muted", "241 245 249"),
 			gutterForeground: resolveToken("muted-foreground", "100 116 139"),
 			gutterBorder: "transparent",
 			lineHighlight: "transparent",
-			selection: resolveToken("primary", "31 143 255")
+			selection: resolveToken("primary", "31 143 255"),
+			selectionMatch: resolveToken("primary", "31 143 255", .1)
 		},
-		styles: [
-			{
-				tag: [
-					tags.name,
-					tags.special(tags.string),
-					tags.bracket
-				],
-				color: foreground
-			},
-			{
-				tag: tags.standard(tags.name),
-				color: colors.purple[600]
-			},
-			{
-				tag: tags.special(tags.name),
-				color: colors.cyan[700]
-			},
-			{
-				tag: tags.string,
-				color: colors.warning[700]
-			}
-		]
+		styles: buildSyntaxPalette(scheme, foreground)
 	});
 };
 const getLanguageMode = (mode) => {
@@ -487,6 +602,32 @@ const getLanguageMode = (mode) => {
 	}
 };
 const shouldLintJson = (mode, readOnly) => mode === "application/json" && !readOnly;
+/**
+* Wraps a lint source so a blank document produces no diagnostics.
+*
+* `jsonParseLinter` reports "Unexpected end of input" for empty content, which is right for a file and
+* wrong for an *optional* form field: it starts empty, and clearing it is how its value is removed.
+* Left unwrapped, every such field opens with a red gutter marker contradicting its own validation —
+* `CodeEditorField` puts six of them on one screen.
+*
+* Exported for its test: the wrapper is the behaviour worth pinning, and it needs no editor to exercise.
+*/
+const skipBlankDocument = (source) => (view) => view.state.doc.toString().trim() === "" ? [] : source(view);
+/**
+* The JSON linter, optionally blind to a blank document.
+*
+* - `allowBlankDocument` is opt-in, and only `CodeEditorField` opts in (from `!required`). Suppressing
+*   the marker by default would break callers that treat empty as invalid *and* say so nowhere else:
+*   `ex-generic/JsonConfiguration.tsx`, `flows/TaskParamsModalContent.tsx` and
+*   `stream/PayloadTest.tsx` all gate their button on `isValidJsonConfig`, which is `false` for `''`,
+*   with no `disabledReason` — so the gutter marker is the only thing explaining a dead button.
+* - Not derivable from `variant`: `ex-generic/FunctionControl.tsx` is `variant="field"` and empty is
+*   an error there too. Whether blank is valid is the *field's* contract, not the control's shape.
+*/
+const buildJsonLinter = (allowBlankDocument) => {
+	const source = jsonParseLinter();
+	return linter(allowBlankDocument ? skipBlankDocument(source) : source);
+};
 //#endregion
 //#region src/components/CodeEditor/editorChrome.ts
 /**
@@ -497,22 +638,32 @@ const shouldLintJson = (mode, readOnly) => mode === "application/json" && !readO
 * variant does. No semantic token holds that grey, and the nearest one
 * (`--muted`) is a few points off — which is the "almost, but not quite, the
 * input next to it" mismatch this preset exists to remove.
+*
+* That ramp is fixed, so the legacy preset needs its own scheme pair — a legacy brand and the dark
+* scheme are independent choices, and `neutral[100]` under dark is a light slab: `foreground` on it
+* is 1.09:1 and the darkest syntax colour 2.69:1. Dark mirrors the same two steps from the other
+* end of the ramp (`800` / `900`, 5.00:1 and 6.14:1 for that colour).
 */
-const buildInputChrome = (isArgo) => ({
-	surface: isArgo ? resolveToken("muted", "241 245 249") : colors.neutral[100],
-	borderColor: isArgo ? resolveToken("input", "203 213 225") : colors.neutral[100],
-	readOnlySurface: isArgo ? resolveToken("muted", "241 245 249") : colors.neutral[150],
-	readOnlyBorderColor: isArgo ? resolveToken("input", "203 213 225") : colors.neutral[150],
-	hoverBorderColor: null,
-	focusBorderColor: isArgo ? resolveToken("primary", "37 99 235") : resolveToken("ring", "31 143 255"),
-	focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", isArgo ? .5 : .3)}`,
-	radius: isArgo ? "var(--radius-lg, 0.25rem)" : "0.25rem",
-	paddingY: isArgo ? "3px" : "5px",
-	paddingX: {
-		left: "10px",
-		right: "14px"
-	}
-});
+const buildInputChrome = (isArgo, scheme) => {
+	const dark = scheme === "dark";
+	const legacySurface = dark ? colors.neutral[800] : colors.neutral[100];
+	const legacyReadOnly = dark ? colors.neutral[900] : colors.neutral[150];
+	return {
+		surface: isArgo ? resolveToken("muted", "241 245 249") : legacySurface,
+		borderColor: isArgo ? resolveToken("input", "203 213 225") : legacySurface,
+		readOnlySurface: isArgo ? resolveToken("muted", "241 245 249") : legacyReadOnly,
+		readOnlyBorderColor: isArgo ? resolveToken("input", "203 213 225") : legacyReadOnly,
+		hoverBorderColor: null,
+		focusBorderColor: isArgo ? resolveToken("primary", "37 99 235") : resolveToken("ring", "31 143 255"),
+		focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", isArgo ? .5 : .3)}`,
+		radius: isArgo ? "var(--radius-lg, 0.25rem)" : "0.25rem",
+		paddingY: isArgo ? "3px" : "5px",
+		paddingX: {
+			left: "10px",
+			right: "14px"
+		}
+	};
+};
 /** The SQL workspace's notebook cell: a white canvas, not a form control. */
 const buildCanvasChrome = () => ({
 	surface: resolveToken("card", "255 255 255"),
@@ -633,11 +784,28 @@ const searchViewPlugin = ViewPlugin.fromClass(class {
 		if (state.selectedMatchIndex === void 0) this.lastSelectedIndex = void 0;
 	}
 });
+/**
+* Match and current-match fills, per colour scheme.
+*
+* - `&dark` is how a *static* base theme follows the scheme, without becoming a
+*   `useThemedExtension` builder and a second entry in its never-evicting cache. It applies
+*   whenever the `EditorView.darkTheme` facet is set — see `buildBaseThemeStyles`' callers, which
+*   set it explicitly.
+* - Light text is `blue[700]`: 5.42:1 on the fill, and 6.29:1 for white on the current match.
+* - Dark tints `blue[500]` for the plain match, with `blue[200]` text: 11.10:1 on the page surface,
+*   8.86:1 on the `variant="field"` one. The current match keeps a solid `blue[500]` and takes
+*   `neutral[900]` as its text (5.78:1) — white on it is 2.55:1, since the token that reads as
+*   "strong" in light is a light colour.
+*/
 const searchTheme = EditorView.baseTheme({
 	".cm-searchMatch": { backgroundColor: colors.blue[100] },
-	".cm-searchMatch > span": { color: `${colors.blue[600]} !important` },
-	".cm-searchMatch-selected": { backgroundColor: colors.blue[600] },
-	".cm-searchMatch-selected > span": { color: `${colors.white} !important` }
+	".cm-searchMatch > span": { color: `${colors.blue[700]} !important` },
+	".cm-searchMatch-selected": { backgroundColor: colors.blue[700] },
+	".cm-searchMatch-selected > span": { color: `${colors.white} !important` },
+	"&dark .cm-searchMatch": { backgroundColor: `${colors.blue[500]}29` },
+	"&dark .cm-searchMatch > span": { color: `${colors.blue[200]} !important` },
+	"&dark .cm-searchMatch-selected": { backgroundColor: colors.blue[500] },
+	"&dark .cm-searchMatch-selected > span": { color: `${colors.neutral[900]} !important` }
 });
 function searchExtension() {
 	return [
@@ -817,10 +985,27 @@ const useVariableCompletion = (variables = []) => useStableCallback(completeVari
 //#endregion
 //#region src/components/CodeEditor/CodeEditor.tsx
 const emptyObject = {};
-const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode = "application/json", placeholder: placeholder$1 = "", ariaLabel, searchQuery, searchMatchIndex, readOnly = false, inputLocked = false, autocompletions, completionSource, variables, extraKeys = emptyObject, withToggleCommentHint = false, withAutofocus = false, withLineNumbers = true, withLineWrapping = true, withCollapseUnchanged = false, withCopyButton = false, completeAny = false, help = null, helpPostfix = null, renderAdditionalButtons, className }) => {
+const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode = "application/json", placeholder: placeholder$1 = "", ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaInvalid, ariaRequired, allowBlankDocument = false, onBlur, searchQuery, searchMatchIndex, readOnly = false, inputLocked = false, autocompletions, completionSource, variables, withCompletions = true, extraKeys = emptyObject, withToggleCommentHint = false, withAutofocus = false, withLineNumbers = true, withLineWrapping = true, withCollapseUnchanged = false, withCopyButton = false, completeAny = false, help = null, helpPostfix = null, renderAdditionalButtons, className }) => {
 	const handleChange = useStableCallback((next) => onChange?.(next));
+	const handleBlur = useStableCallback(() => onBlur?.());
 	const withSearch = searchQuery !== void 0;
+	const withBlur = onBlur !== void 0;
 	const editorRef = useRef(null);
+	const contentAria = useMemo(() => {
+		const attributes = {};
+		if (ariaLabel !== void 0) attributes["aria-label"] = ariaLabel;
+		if (ariaLabelledBy !== void 0) attributes["aria-labelledby"] = ariaLabelledBy;
+		if (ariaDescribedBy !== void 0) attributes["aria-describedby"] = ariaDescribedBy;
+		if (ariaInvalid !== void 0) attributes["aria-invalid"] = String(ariaInvalid);
+		if (ariaRequired !== void 0) attributes["aria-required"] = String(ariaRequired);
+		return Object.keys(attributes).length > 0 ? attributes : null;
+	}, [
+		ariaLabel,
+		ariaLabelledBy,
+		ariaDescribedBy,
+		ariaInvalid,
+		ariaRequired
+	]);
 	useEffect(() => {
 		const view = editorRef.current?.view;
 		if (view && withSearch) updateSearch(view, searchQuery, searchMatchIndex);
@@ -843,16 +1028,16 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 	const customTheme = useThemedExtension("editor:syntax", buildCustomTheme);
 	const isArgo = useArgoDesign();
 	const isField = variant === "field";
-	const baseTheme = useThemedExtension(isField ? `code-editor:field:${isArgo ? "argo" : "legacy"}` : "code-editor:chrome", () => EditorView.theme({
-		...buildBaseThemeStyles(),
-		...isField ? buildChromeStyles(buildInputChrome(isArgo)) : null
-	}));
+	const baseTheme = useThemedExtension(isField ? `code-editor:field:${isArgo ? "argo" : "legacy"}` : "code-editor:chrome", (scheme) => EditorView.theme({
+		...buildBaseThemeStyles(scheme),
+		...isField ? buildChromeStyles(buildInputChrome(isArgo, scheme)) : null
+	}, { dark: scheme === "dark" }));
 	const commonExtensions = useMemo(() => {
 		const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
 		const completionEntries = [...callerCompletions ? [{ autocomplete: callerCompletions }] : [], { autocomplete: variableCompletion }];
 		return [
 			getLanguageMode(mode),
-			shouldLintJson(mode, readOnly) ? linter(jsonParseLinter()) : [],
+			shouldLintJson(mode, readOnly) ? buildJsonLinter(allowBlankDocument) : [],
 			withLineWrapping ? EditorView.lineWrapping : [],
 			EditorState.languageData.of(() => completionEntries),
 			keymap.of(boundKeys.map((key) => ({
@@ -862,8 +1047,9 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 					return true;
 				}
 			}))),
-			readOnly ? [] : [autocompletion()],
-			ariaLabel ? EditorView.contentAttributes.of({ "aria-label": ariaLabel }) : [],
+			readOnly || !withCompletions ? [] : [autocompletion()],
+			contentAria ? EditorView.contentAttributes.of(contentAria) : [],
+			withBlur ? EditorView.domEventHandlers({ blur: handleBlur }) : [],
 			withSearch ? searchExtension() : [],
 			tooltipLayer,
 			baseTheme
@@ -873,12 +1059,16 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 		completionSource,
 		variableCompletion,
 		completeAny,
+		withCompletions,
 		boundKeys,
 		mode,
 		readOnly,
+		allowBlankDocument,
 		withLineWrapping,
 		baseTheme,
-		ariaLabel,
+		contentAria,
+		withBlur,
+		handleBlur,
 		withSearch,
 		tooltipLayer
 	]);
@@ -947,6 +1137,6 @@ const CodeEditor = ({ value, previousValue, onChange, variant = "plain", mode =
 	});
 };
 //#endregion
-export { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion };
+export { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion };
 
-//# sourceMappingURL=CodeEditor-BfQJfbhL.js.map
+//# sourceMappingURL=CodeEditor-CUse8znx.js.map