@keboola/design 11.0.0 → 11.2.0

package/dist/CodeEditor-DyaN-Ij2.js

@@ -0,0 +1,1000 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { isMac, keyCodes } from "./utils-D0c5VAyF.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { escapeStringRegexp } from "./escapeStringRegexp-8MxP2knR.js";
+import { ClipboardButton } from "./ClipboardButton-ClcluT0C.js";
+import { HelpBlock } from "./internal/components/HelpBlock.js";
+import { Kbd } from "./Kbd-CxHAo1oo.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { resolveToken, useThemeAttributes } from "./themeTokens-BNg98Mu9.js";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { autocompletion, completeAnyWord } from "@codemirror/autocomplete";
+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 { linter } from "@codemirror/lint";
+import { tags } from "@lezer/highlight";
+import { githubLightInit } from "@uiw/codemirror-theme-github";
+import { getSqlLanguageSupport } from "@keboola/codemirror-lang-sql";
+import { simpleMode } from "@codemirror/legacy-modes/mode/simple-mode";
+import { Compartment, StateEffect, StateField } from "@codemirror/state";
+//#region src/components/CodeEditor/ButtonToolbar.tsx
+const ButtonToolbar = ({ value, children }) => {
+	if (!value && !children) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tw:absolute tw:right-3 tw:top-1 tw:z-10 tw:flex tw:gap-0.5 tw:overflow-visible tw:rounded tw:border tw:border-solid tw:border-border tw:!bg-background tw:p-px tw:shadow-sm",
+		children: [!!value && /* @__PURE__ */ jsx(ClipboardButton, {
+			size: "icon-xs",
+			variant: "invisible",
+			text: value
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/CodeEditor/modes/dbt.ts
+const COMMANDS = [
+	"run-operation",
+	"run",
+	"test",
+	"seed",
+	"snapshot",
+	"list",
+	"ls",
+	"compile",
+	"build",
+	"deps",
+	"docs",
+	"source"
+];
+const SUBCOMMANDS = {
+	docs: ["generate"],
+	source: ["freshness"]
+};
+const ARGUMENTS = [
+	"--select",
+	"--exclude",
+	"--selector",
+	"--defer",
+	"--resource-type",
+	"-s"
+];
+const SELECTORS = [
+	"--select",
+	"--exclude",
+	"-s"
+];
+const METHODS = [
+	"path:",
+	"source:",
+	"tag:",
+	"package:",
+	"config:",
+	"test_type:",
+	"test_name:",
+	"state:",
+	"exposure:",
+	"metric:",
+	"result:",
+	"source_status:",
+	"column_name:"
+];
+const FLAGS = [
+	"--fail-fast",
+	"--warn-error",
+	"--favor-state",
+	"--vars",
+	"--models",
+	"--threads",
+	"--profiles-dir",
+	"--profile",
+	"--full-refresh"
+];
+const COMMAND_PHRASES = COMMANDS.flatMap((command) => {
+	const subcommands = SUBCOMMANDS[command];
+	return subcommands ? subcommands.map((subcommand) => `${command} ${subcommand}`) : [command];
+});
+const alternation = (list) => [...list].sort((a, b) => b.length - a.length).join("|");
+const word = (list) => new RegExp(`^\\s+(?:${alternation(list)})\\b`, "i");
+const prefix = (list) => new RegExp(`^\\s+(?:${alternation(list)})`, "i");
+const WORD = /[\w:-]*$/;
+const asOptions = (list, type) => list.map((label) => ({
+	label,
+	type
+}));
+const DBT = [{
+	label: "dbt",
+	type: "keyword"
+}];
+const COMMAND_OPTIONS = asOptions(COMMANDS, "keyword");
+const SUBCOMMAND_OPTIONS = Object.fromEntries(Object.entries(SUBCOMMANDS).map(([command, subcommands]) => [command, asOptions(subcommands, "keyword")]));
+const ARGUMENT_OPTIONS = asOptions(ARGUMENTS, "variable");
+const FLAG_OPTIONS = asOptions(FLAGS, "constant");
+const METHOD_OPTIONS = asOptions(METHODS, "property");
+const optionsAfter = (words) => {
+	const [step, command, ...rest] = words;
+	if (step === void 0) return DBT;
+	if (step.toLowerCase() !== "dbt") return [];
+	if (command === void 0) return COMMAND_OPTIONS;
+	const subcommands = SUBCOMMAND_OPTIONS[command.toLowerCase()];
+	if (subcommands && rest.length === 0) return subcommands;
+	const lastArgument = rest.filter((it) => it.startsWith("-")).at(-1);
+	return lastArgument !== void 0 && SELECTORS.includes(lastArgument.toLowerCase()) ? [
+		...ARGUMENT_OPTIONS,
+		...FLAG_OPTIONS,
+		...METHOD_OPTIONS
+	] : [...ARGUMENT_OPTIONS, ...FLAG_OPTIONS];
+};
+const complete = (context) => {
+	const typed = context.matchBefore(WORD);
+	if (!typed?.text && !context.explicit) return null;
+	const from = typed?.from ?? context.pos;
+	const line = context.state.doc.lineAt(from);
+	const options = optionsAfter(line.text.slice(0, from - line.from).split(/\s+/).filter(Boolean));
+	return options.length > 0 ? {
+		from,
+		options,
+		validFor: WORD
+	} : null;
+};
+const dbt = simpleMode({
+	languageData: {
+		commentTokens: {
+			line: "--",
+			block: {
+				open: "/*",
+				close: "*/"
+			}
+		},
+		autocomplete: complete
+	},
+	start: [
+		{
+			regex: /"(?:[^\\]|\\.)*?(?:"|$)/,
+			token: "string"
+		},
+		{
+			regex: /dbt\b/,
+			token: "keyword",
+			sol: true
+		},
+		{
+			regex: word(COMMAND_PHRASES),
+			token: "keyword"
+		},
+		{
+			regex: word(ARGUMENTS),
+			token: "variableName"
+		},
+		{
+			regex: prefix(METHODS),
+			token: "propertyName"
+		},
+		{
+			regex: prefix(FLAGS),
+			token: "attributeName"
+		},
+		{
+			regex: /(?:@|\*|,|\+\d+|\d+\+|\+)/,
+			token: "operator"
+		},
+		{
+			regex: /'.*'/,
+			token: "string"
+		},
+		{
+			regex: /true|false/,
+			token: "atom"
+		}
+	]
+});
+//#endregion
+//#region src/components/CodeEditor/modes/jsonnet.ts
+/**
+* Ported from google/codemirror-mode-jsonnet (Apache-2.0), the mode written by
+* the language's own authors, which was never taken past CodeMirror 5.
+* CodeMirror 5 style names are replaced by their CodeMirror 6 highlight tags:
+* `string-2` is `escape`, `error` is `invalid`.
+*
+* Every pattern is anchored and hoisted. `StringStream.match` slices the rest of
+* the line and, without `^`, scans all of it for a match it then discards unless
+* it started at the cursor — so an unanchored probe costs the whole remaining
+* line, and this tokenizer makes up to twenty of them per token.
+*/
+const COMMENT_END = /^\*\//;
+const COMMENT_START = /^\/\/|^#/;
+const C_COMMENT_START = /^\/\*/;
+const TEXT_BLOCK = /^\|\|\|/;
+const TEXT_BLOCK_END = /^\s*\|\|\|/;
+const RAW_DOUBLE = /^""/;
+const RAW_SINGLE = /^''/;
+const CLOSE_DOUBLE = /^"/;
+const CLOSE_SINGLE = /^'/;
+const ESCAPE = /^\\[\\"'/bfnrt0]/;
+const UNICODE_ESCAPE = /^\\u[0-9a-fA-F]{4}/;
+const BACKSLASH = /^\\/;
+const IMPORT = /^import(?:str)?\s*(@?)(["'])/;
+const QUOTE = /^(@?)(["'])/;
+const ROOT = /^\$/;
+const NUMBER = /^(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i;
+const OPERATOR = /^[-+/*=<>!&~^|$%]+/;
+const IDENTIFIER = /^[a-zA-Z_][a-zA-Z0-9_]*/;
+const KEYWORDS = {
+	local: "keyword",
+	self: "keyword",
+	super: "keyword",
+	assert: "keyword",
+	function: "keyword",
+	if: "keyword",
+	then: "keyword",
+	else: "keyword",
+	for: "keyword",
+	in: "keyword",
+	tailstrict: "keyword",
+	error: "keyword",
+	true: "atom",
+	false: "atom",
+	null: "atom"
+};
+const jsonnet = {
+	name: "jsonnet",
+	languageData: { commentTokens: {
+		line: "//",
+		block: {
+			open: "/*",
+			close: "*/"
+		}
+	} },
+	startState: () => ({
+		cComment: false,
+		textBlock: false,
+		textBlockIndent: null,
+		string: false,
+		importString: false,
+		stringSingle: false,
+		stringRaw: false
+	}),
+	token: (stream, state) => {
+		if (state.cComment) {
+			if (stream.match(COMMENT_END)) {
+				state.cComment = false;
+				return "comment";
+			}
+			stream.next();
+			return "comment";
+		}
+		if (state.textBlock) {
+			if (state.textBlockIndent == null) {
+				if (stream.match(TEXT_BLOCK_END)) {
+					state.textBlock = false;
+					return "string";
+				}
+				state.textBlockIndent = stream.indentation();
+			}
+			if (stream.indentation() >= state.textBlockIndent) {
+				stream.skipToEnd();
+				return "string";
+			}
+			if (stream.match(TEXT_BLOCK_END)) {
+				state.textBlock = false;
+				return "string";
+			}
+			stream.next();
+			return "invalid";
+		}
+		if (state.string || state.importString) {
+			const style = state.string ? "string" : "meta";
+			if (state.stringRaw) {
+				if (stream.match(state.stringSingle ? RAW_SINGLE : RAW_DOUBLE)) return "escape";
+			} else {
+				if (stream.match(ESCAPE)) return "escape";
+				if (stream.match(UNICODE_ESCAPE)) return "escape";
+				if (stream.match(BACKSLASH)) return "invalid";
+			}
+			if (stream.match(state.stringSingle ? CLOSE_SINGLE : CLOSE_DOUBLE)) {
+				state.string = false;
+				state.importString = false;
+				return style;
+			}
+			stream.next();
+			return style;
+		}
+		if (stream.match(COMMENT_START)) {
+			stream.skipToEnd();
+			return "comment";
+		}
+		if (stream.match(C_COMMENT_START)) {
+			state.cComment = true;
+			return "comment";
+		}
+		const imported = stream.match(IMPORT);
+		if (Array.isArray(imported)) {
+			state.importString = true;
+			state.stringRaw = imported[1] === "@";
+			state.stringSingle = imported[2] === "'";
+			return "meta";
+		}
+		const quoted = stream.match(QUOTE);
+		if (Array.isArray(quoted)) {
+			state.string = true;
+			state.stringRaw = quoted[1] === "@";
+			state.stringSingle = quoted[2] === "'";
+			return "string";
+		}
+		if (stream.match(TEXT_BLOCK)) {
+			state.textBlock = true;
+			state.textBlockIndent = null;
+			return "string";
+		}
+		if (stream.match(ROOT)) return "keyword";
+		if (stream.match(NUMBER)) return "number";
+		if (stream.match(OPERATOR)) return "operator";
+		const identifier = stream.match(IDENTIFIER);
+		if (Array.isArray(identifier)) return KEYWORDS[identifier[0]] ?? null;
+		stream.next();
+		return null;
+	}
+};
+//#endregion
+//#region src/components/CodeEditor/helpers.ts
+const LANGUAGE_MODES = [
+	"application/json",
+	"text/plain",
+	"text/x-python",
+	"text/x-sql",
+	"text/x-mysql",
+	"text/x-pgsql",
+	"text/x-mssql",
+	"text/x-sfsql",
+	"text/x-bqsql",
+	"text/x-plsql",
+	"text/x-rsrc",
+	"text/x-sh",
+	"text/x-toml",
+	"text/jsonnet",
+	"text/x-dbt",
+	"text/javascript",
+	"text/typescript"
+];
+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 }
+});
+const ALWAYS_OFF = {
+	drawSelection: false,
+	foldGutter: false,
+	foldKeymap: false,
+	highlightActiveLine: false,
+	highlightActiveLineGutter: false
+};
+const buildBasicSetup = (readOnly) => ({
+	...ALWAYS_OFF,
+	...readOnly ? {
+		closeBrackets: false,
+		closeBracketsKeymap: false,
+		lintKeymap: false,
+		indentOnInput: false,
+		rectangularSelection: false,
+		dropCursor: false,
+		highlightSelectionMatches: false
+	} : null
+});
+const buildCustomTheme = (scheme) => {
+	const foreground = resolveToken("foreground", "30 41 59");
+	const dark = scheme === "dark";
+	return githubLightInit({
+		settings: {
+			fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
+			background: resolveToken("background", "249 250 251"),
+			foreground,
+			gutterBackground: resolveToken("muted", "241 245 249"),
+			gutterForeground: resolveToken("muted-foreground", "100 116 139"),
+			gutterBorder: "transparent",
+			lineHighlight: "transparent",
+			selection: resolveToken("primary", "31 143 255")
+		},
+		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: dark ? colors.warning[300] : colors.warning[800]
+			}
+		]
+	});
+};
+const getLanguageMode = (mode) => {
+	switch (mode) {
+		case void 0:
+		case "application/json": return json();
+		case "text/x-python": return python();
+		case "text/x-sql": return getSqlLanguageSupport(StandardSQL);
+		case "text/x-mysql": return getSqlLanguageSupport(MySQL);
+		case "text/x-pgsql": return getSqlLanguageSupport(PostgreSQL);
+		case "text/x-mssql": return getSqlLanguageSupport(MSSQL);
+		case "text/x-sfsql": return getSqlLanguageSupport("snowflake");
+		case "text/x-bqsql": return getSqlLanguageSupport("bigquery");
+		case "text/x-plsql": return getSqlLanguageSupport(PLSQL);
+		case "text/x-rsrc": return StreamLanguage.define(r);
+		case "text/x-sh": return StreamLanguage.define(shell);
+		case "text/x-toml": return StreamLanguage.define(toml);
+		case "text/jsonnet": return StreamLanguage.define(jsonnet);
+		case "text/x-dbt": return StreamLanguage.define(dbt);
+		case "text/javascript": return javascript({ jsx: true });
+		case "text/typescript": return javascript({
+			jsx: true,
+			typescript: true
+		});
+		default: return [];
+	}
+};
+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
+/**
+* Mirrors `InputGroup` at the sizing each design language gives a `TextInput`,
+* so an editor dropped into a form reads as one of its fields.
+*
+* The legacy preset reads the neutral ramp because the legacy `secondary`
+* 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.
+*/
+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"
+	}
+});
+/** The SQL workspace's notebook cell: a white canvas, not a form control. */
+const buildCanvasChrome = () => ({
+	surface: resolveToken("card", "255 255 255"),
+	borderColor: "transparent",
+	readOnlySurface: resolveToken("muted", "241 245 249"),
+	readOnlyBorderColor: "transparent",
+	hoverBorderColor: resolveToken("ring", "31 143 255"),
+	focusBorderColor: resolveToken("ring", "31 143 255"),
+	focusRing: `0 0 0 4px ${resolveToken("ring", "31 143 255", .3)}`,
+	radius: "8px",
+	paddingY: "8px",
+	paddingX: null
+});
+/**
+* Spread over `buildBaseThemeStyles()` — never used alone. The read-only keys
+* are the base's own, so they replace its wash instead of landing beside it.
+*/
+const buildChromeStyles = (chrome) => ({
+	"&.cm-editor": {
+		border: `solid 1px ${chrome.borderColor}`,
+		borderRadius: chrome.radius,
+		backgroundColor: chrome.surface,
+		paddingTop: chrome.paddingY,
+		paddingBottom: chrome.paddingY
+	},
+	"&.cm-editor :is(.cm-gutters,.cm-scroller)": { backgroundColor: chrome.surface },
+	...chrome.paddingX ? { "&.cm-editor:not(:has(.cm-gutters)) .cm-content": {
+		paddingLeft: chrome.paddingX.left,
+		paddingRight: chrome.paddingX.right
+	} } : null,
+	...chrome.hoverBorderColor ? { [`${EDITABLE_EDITOR}:hover`]: { borderColor: chrome.hoverBorderColor } } : null,
+	[`${EDITABLE_EDITOR}:focus-within`]: {
+		borderColor: chrome.focusBorderColor,
+		boxShadow: chrome.focusRing
+	},
+	[READ_ONLY_EDITOR]: {
+		backgroundColor: chrome.readOnlySurface,
+		borderColor: chrome.readOnlyBorderColor
+	},
+	[`${READ_ONLY_EDITOR} .cm-gutters`]: { backgroundColor: chrome.readOnlySurface },
+	[`${READ_ONLY_EDITOR} .cm-scroller`]: { backgroundColor: chrome.readOnlySurface }
+});
+//#endregion
+//#region src/components/CodeEditor/search.ts
+const setSearchEffect = StateEffect.define();
+function findMatches(doc, query) {
+	if (!query) return [];
+	const text = doc.toString();
+	try {
+		const regex = new RegExp(escapeStringRegexp(query), "gi");
+		return Array.from(text.matchAll(regex)).map((match, index) => {
+			const from = match.index;
+			return {
+				from,
+				to: from + match[0].length,
+				text: match[0],
+				localIndex: index
+			};
+		});
+	} catch (e) {
+		console.warn("Invalid search regex:", e);
+		return [];
+	}
+}
+function createDecorations(matches, selectedLocalIndex) {
+	const decorations = matches.map((match) => {
+		const isSelected = match.localIndex === selectedLocalIndex;
+		return Decoration.mark({ class: isSelected ? "cm-searchMatch-selected" : "cm-searchMatch" }).range(match.from, match.to);
+	});
+	return Decoration.set(decorations, true);
+}
+const searchField = StateField.define({
+	create() {
+		return {
+			query: "",
+			selectedMatchIndex: void 0,
+			matches: [],
+			decorations: Decoration.none
+		};
+	},
+	update(state, tr) {
+		let newState = state;
+		for (const effect of tr.effects) {
+			if (!effect.is(setSearchEffect)) continue;
+			const { query, selectedMatchIndex } = effect.value;
+			const matches = findMatches(tr.state.doc, query);
+			newState = {
+				query,
+				selectedMatchIndex,
+				matches,
+				decorations: createDecorations(matches, selectedMatchIndex)
+			};
+		}
+		if (tr.docChanged && newState.query) {
+			const matches = findMatches(tr.state.doc, newState.query);
+			const decorations = createDecorations(matches, newState.selectedMatchIndex);
+			newState = {
+				...newState,
+				matches,
+				decorations
+			};
+		}
+		return newState;
+	},
+	provide: (field) => EditorView.decorations.from(field, (state) => state.decorations)
+});
+const searchViewPlugin = ViewPlugin.fromClass(class {
+	lastSelectedIndex;
+	update(update) {
+		const state = update.state.field(searchField);
+		if (state.selectedMatchIndex !== void 0 && state.selectedMatchIndex !== this.lastSelectedIndex) {
+			const match = state.matches[state.selectedMatchIndex];
+			if (match) requestAnimationFrame(() => {
+				update.view.dispatch({ effects: EditorView.scrollIntoView(match.from, { y: "center" }) });
+			});
+			this.lastSelectedIndex = state.selectedMatchIndex;
+		}
+		if (state.selectedMatchIndex === void 0) this.lastSelectedIndex = void 0;
+	}
+});
+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` }
+});
+function searchExtension() {
+	return [
+		searchField,
+		searchViewPlugin,
+		searchTheme
+	];
+}
+function updateSearch(view, query, selectedMatchIndex) {
+	view.dispatch({ effects: setSearchEffect.of({
+		query,
+		selectedMatchIndex
+	}) });
+}
+//#endregion
+//#region src/components/CodeEditor/ToggleComponentHelp.tsx
+const ToggleComponentHelp = () => /* @__PURE__ */ jsxs("div", { children: [
+	"Use ",
+	/* @__PURE__ */ jsx(Kbd, { children: isMac ? "Command+/" : "Ctrl+/" }),
+	" to toggle comments."
+] });
+//#endregion
+//#region src/components/CodeEditor/tokenTheme.ts
+const themeCache = /* @__PURE__ */ new Map();
+/**
+* Memoize a CodeMirror theme/extension built from `resolveToken`, shared across
+* every instance that passes the same `cacheKey` and rebuilt whenever the active
+* brand / light-dark mode changes. `build` reads live `--*` values off `<html>`,
+* so the active theme is an invisible dependency a deps array can't see.
+*
+* `build` receives the scheme those values were read under, for the theme values
+* that are a light/dark *pair* rather than a token lookup (a categorical diff
+* wash has no semantic token, but an opaque light pastel still has to become a
+* low-alpha tint under dark). It comes from the same read that produced the key,
+* so a builder cannot resolve one scheme's colours under the other one's key.
+*
+* `cacheKey` is the extension's full identity: anything the builder closes over
+* must be part of it (e.g. `` `merge-pane:${deleted}` ``), or instances built
+* from different inputs would share one theme.
+*/
+const useThemedExtension = (cacheKey, build) => {
+	const { scheme, cacheKey: themeKey } = useThemeAttributes();
+	const key = `${themeKey} ${cacheKey}`;
+	let cached = themeCache.get(key);
+	if (!cached) {
+		cached = build(scheme);
+		themeCache.set(key, cached);
+	}
+	return cached;
+};
+//#endregion
+//#region src/components/CodeEditor/tooltips.ts
+const establishesFixedContainingBlock = (style) => style.transform !== "none" || style.translate !== "none" || style.rotate !== "none" || style.scale !== "none" || style.perspective !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || /\b(paint|layout|strict|content)\b/.test(style.contain) || /\b(transform|perspective|filter|contain)\b/.test(style.willChange);
+const crops = (style) => style.overflowX !== "visible" || style.overflowY !== "visible" || style.maskImage !== "none" || style.contentVisibility !== "visible" || /\b(paint|strict|content)\b/.test(style.contain);
+/**
+* Where a tooltip can hang without being cropped, or `null` for "wherever
+* CodeMirror would put it anyway".
+*
+* Two ancestors matter, and they are not the same ancestor. The **outermost
+* cropper** is the one to get above — landing anywhere below it leaves the
+* tooltip inside the box doing the cropping. The **containing block** is where
+* the search can stop, because from there upwards `position: fixed` is measured
+* against that element and nothing higher can crop it.
+*
+* `document.body` and `<html>` are not treated as croppers: a fixed box whose
+* containing block is the viewport is not clipped by their overflow, and
+* hosting outside `<body>` would drop the tooltip out of the app's stacking and
+* pointer-events scope for no gain.
+*/
+const findTooltipHost = (from) => {
+	let outermostCropper = null;
+	for (let node = from.parentElement; node && node !== document.body; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		if (crops(style)) outermostCropper = node;
+		else if (establishesFixedContainingBlock(style)) return outermostCropper?.parentElement ?? node;
+	}
+	return outermostCropper?.parentElement ?? null;
+};
+/**
+* `tooltips()`, re-hosted so the completion popup is never cropped.
+*
+* CodeMirror hangs tooltips inside the editor and lets `position: fixed` carry
+* them past its edges. That holds only while the viewport is their containing
+* block — a modal centred with a translate, a sheet sliding in, or a box under
+* paint containment takes that job, and then every scroller, mask and contained
+* box in between crops the popup instead. A tall editor hides the damage; a
+* one-line one shows a sliver of an unreadable list.
+*
+* The two shapes this has to survive in production are a `Modal`, whose body
+* scrolls and carries the argo fade mask, and kbc-ui's SQL editor, which wraps
+* every code block in `content-visibility: auto` to keep long scripts cheap.
+*
+* Hosting the layer above the outermost cropper clears all of that while keeping
+* the popup inside the modal's stacking, focus and pointer-events scope — which
+* `document.body` would not: the popup would sit behind the modal, and Radix
+* leaves the body `pointer-events: none` while a dialog is open.
+*
+* Both editors install this, and it is the only place either of them configures
+* a tooltip host. Keep it that way: CodeMirror's tooltip config takes the first
+* contributor that names a parent, so a second mechanism would not compose with
+* this one — it would silently win or lose on extension order.
+*/
+const tooltipsExtension = () => {
+	const layer = new Compartment();
+	return [layer.of(tooltips()), ViewPlugin.define((view) => {
+		const scheduled = setTimeout(() => {
+			if (!view.dom.isConnected) return;
+			const parent = findTooltipHost(view.dom);
+			if (parent) view.dispatch({ effects: layer.reconfigure(tooltips({ parent })) });
+		});
+		return { destroy: () => clearTimeout(scheduled) };
+	})];
+};
+/**
+* The extension above, built once per editor. Rebuilding it would hand
+* CodeMirror a fresh compartment and plugin on every reconfigure, dropping the
+* host it had already resolved — so it is only ever reached through this hook.
+*/
+const useTooltipsExtension = () => useMemo(tooltipsExtension, []);
+//#endregion
+//#region src/components/CodeEditor/variableCompletion.ts
+const BOOST = 2e3;
+const NAME = String.raw`[\w-]*`;
+const AT_CARET = new RegExp(String.raw`(?:\{{1,2} ?)?${NAME}$`);
+const NAME_AT_END = new RegExp(`${NAME}$`);
+const OPENING = /\{{1,2} ?$/;
+const CLOSING = /^ ?\}{1,2}/;
+/**
+* Completes a mustache-style `{{name}}` placeholder.
+*/
+const completeVariables = (variables = []) => {
+	if (variables.length === 0) return () => null;
+	const options = variables.map(({ name, value }) => ({
+		label: name,
+		displayLabel: `{{${name}}}`,
+		detail: value,
+		type: "variable",
+		boost: BOOST,
+		apply: (view, completion, from, to) => {
+			const { doc } = view.state;
+			const line = doc.lineAt(from);
+			const insert = `{{${completion.label}}}`;
+			const opening = OPENING.exec(doc.sliceString(line.from, from));
+			const closing = CLOSING.exec(doc.sliceString(to, line.to));
+			const start = opening ? from - opening[0].length : from;
+			const end = closing ? to + closing[0].length : to;
+			view.dispatch({
+				changes: {
+					from: start,
+					to: end,
+					insert
+				},
+				selection: { anchor: start + insert.length }
+			});
+		}
+	}));
+	return (context) => {
+		const match = context.matchBefore(AT_CARET);
+		if (!match?.text) return null;
+		const [name = ""] = NAME_AT_END.exec(match.text) ?? [];
+		return {
+			from: match.to - name.length,
+			options
+		};
+	};
+};
+/**
+* The completion source both editors install, with an identity that never moves.
+*
+* Both hold it inside the memo that keys their whole extension tree, and callers
+* build the list inline — a config row mapped to `{ name, value }` in a store
+* selector, so a fresh array arrives on every store push. Because CodeMirror asks
+* the source for options rather than reading them up front, holding it steady costs
+* nothing: a completion request always reaches the latest render's variables.
+*/
+const useVariableCompletion = (variables = []) => useStableCallback(completeVariables(variables));
+//#endregion
+//#region src/components/CodeEditor/CodeEditor.tsx
+const emptyObject = {};
+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, 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);
+	}, [
+		withSearch,
+		searchQuery,
+		searchMatchIndex
+	]);
+	const handleCreateEditor = useStableCallback((view) => {
+		if (searchQuery) updateSearch(view, searchQuery, searchMatchIndex);
+	});
+	const extraKeysRef = useRef(extraKeys);
+	useLayoutEffect(() => {
+		extraKeysRef.current = extraKeys;
+	});
+	const boundKeysSignature = Object.keys(extraKeys).join("\n");
+	const boundKeys = useMemo(() => boundKeysSignature.split("\n").filter(Boolean), [boundKeysSignature]);
+	const tooltipLayer = useTooltipsExtension();
+	const variableCompletion = useVariableCompletion(variables);
+	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 commonExtensions = useMemo(() => {
+		const callerCompletions = completionSource ?? (completeAny ? completeAnyWord : autocompletions?.length ? autocompletions : null);
+		const completionEntries = [...callerCompletions ? [{ autocomplete: callerCompletions }] : [], { autocomplete: variableCompletion }];
+		return [
+			getLanguageMode(mode),
+			shouldLintJson(mode, readOnly) ? buildJsonLinter(allowBlankDocument) : [],
+			withLineWrapping ? EditorView.lineWrapping : [],
+			EditorState.languageData.of(() => completionEntries),
+			keymap.of(boundKeys.map((key) => ({
+				key,
+				run: () => {
+					extraKeysRef.current[key]?.();
+					return true;
+				}
+			}))),
+			readOnly ? [] : [autocompletion()],
+			contentAria ? EditorView.contentAttributes.of(contentAria) : [],
+			withBlur ? EditorView.domEventHandlers({ blur: handleBlur }) : [],
+			withSearch ? searchExtension() : [],
+			tooltipLayer,
+			baseTheme
+		];
+	}, [
+		autocompletions,
+		completionSource,
+		variableCompletion,
+		completeAny,
+		boundKeys,
+		mode,
+		readOnly,
+		allowBlankDocument,
+		withLineWrapping,
+		baseTheme,
+		contentAria,
+		withBlur,
+		handleBlur,
+		withSearch,
+		tooltipLayer
+	]);
+	const extensions = useMemo(() => {
+		return [
+			...commonExtensions,
+			placeholder(placeholder$1),
+			EditorView.editable.of(!readOnly),
+			EditorState.readOnly.of(readOnly || inputLocked),
+			previousValue ? unifiedMergeView({
+				original: previousValue,
+				mergeControls: false,
+				highlightChanges: false,
+				collapseUnchanged: withCollapseUnchanged ? {} : void 0
+			}) : []
+		];
+	}, [
+		commonExtensions,
+		placeholder$1,
+		readOnly,
+		inputLocked,
+		previousValue,
+		withCollapseUnchanged
+	]);
+	const config = useMemo(() => {
+		return {
+			...buildBasicSetup(readOnly),
+			lineNumbers: withLineNumbers,
+			...withSearch ? { searchKeymap: false } : null
+		};
+	}, [
+		withLineNumbers,
+		readOnly,
+		withSearch
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-variant": variant,
+		className: cn("tw:relative tw:flex tw:min-h-0 tw:flex-col tw:[&_.cm-mergeViewEditor]:overflow-visible tw:[&_.cm-mergeViewEditors]:h-full tw:[&_.cm-mergeView]:h-full tw:[&_>.cm-theme]:h-full", isField ? "tw:[&_>.cm-theme]:overflow-visible tw:[&_>.cm-theme]:bg-transparent" : "tw:[&_>.cm-theme]:overflow-auto tw:[&_>.cm-theme]:bg-background", className),
+		onKeyDown: (event) => {
+			if (event.key === keyCodes.ESCAPE) event.stopPropagation();
+		},
+		children: [
+			/* @__PURE__ */ jsx(ButtonToolbar, {
+				value: withCopyButton ? value : void 0,
+				children: renderAdditionalButtons?.(value)
+			}),
+			/* @__PURE__ */ jsx(CodeMirror, {
+				ref: editorRef,
+				onCreateEditor: handleCreateEditor,
+				theme: customTheme,
+				value,
+				onChange: handleChange,
+				extensions,
+				autoFocus: withAutofocus,
+				basicSetup: config
+			}),
+			!readOnly && (withToggleCommentHint || help || helpPostfix) && /* @__PURE__ */ jsxs(HelpBlock, {
+				className: "tw:mt-2 tw:flex tw:flex-wrap tw:gap-1",
+				children: [
+					help,
+					withToggleCommentHint ? /* @__PURE__ */ jsx(ToggleComponentHelp, {}) : null,
+					helpPostfix
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion };
+
+//# sourceMappingURL=CodeEditor-DyaN-Ij2.js.map