@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/editor/CodeEditor.js

@@ -1,443 +1,533 @@
-import { GalaxyTheme } from "../theme/types.js";
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { t } from "../theme/tokens/t.js";
+import { GalaxyThemeContext } from "../theme/useGalaxyTheme.js";
+import { useField } from "../hooks/useField.js";
+import { hexToRgb, rgbToHsl } from "../utils/colors.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useMemo } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { Prec } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
-import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
 import { createTheme } from "@uiw/codemirror-themes";
 import CodeMirror from "@uiw/react-codemirror";
 //#region src/editor/CodeEditor.tsx
-/** Background treatment of the editor surface. */
+/** Resting fill of the editor frame (Constitution V-A surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
 var CodeEditorVariant = /* @__PURE__ */ function(CodeEditorVariant) {
+	/** `background.base`. */
 	CodeEditorVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
 	CodeEditorVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
 	CodeEditorVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
 	CodeEditorVariant["TERTIARY"] = "TERTIARY";
 	return CodeEditorVariant;
 }({});
-var _exp = () => ({ $noBorder, theme }) => $noBorder ? "none" : `0.5px solid ${theme.color.border.primary}`;
-var _exp2 = () => ({ $borderRadius }) => getCssSizeValue($borderRadius);
-var CodeEditorWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "CodeEditorWrapper",
-	class: "cwfaerb",
-	propsAsIs: false,
-	vars: {
-		"cwfaerb-0": [_exp()],
-		"cwfaerb-1": [_exp2()]
-	}
-}));
-function getBackgroundColorFromVariant(theme, variant) {
-	return match(variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+/** Grammar used to highlight and edit the document. The `CodeBlockLanguage` set minus GRAPHQL. */
+var CodeEditorLanguage = /* @__PURE__ */ function(CodeEditorLanguage) {
+	/** No grammar: unhighlighted text. */
+	CodeEditorLanguage["PLAIN"] = "PLAIN";
+	/** Shell scripts and commands. */
+	CodeEditorLanguage["BASH"] = "BASH";
+	/** CSS. */
+	CodeEditorLanguage["CSS"] = "CSS";
+	/** Go. */
+	CodeEditorLanguage["GO"] = "GO";
+	/** HTML. */
+	CodeEditorLanguage["HTML"] = "HTML";
+	/** JavaScript. */
+	CodeEditorLanguage["JAVASCRIPT"] = "JAVASCRIPT";
+	/** JSON. */
+	CodeEditorLanguage["JSON"] = "JSON";
+	/** JavaScript with JSX. */
+	CodeEditorLanguage["JSX"] = "JSX";
+	/** Markdown. */
+	CodeEditorLanguage["MARKDOWN"] = "MARKDOWN";
+	/** Protocol Buffers. */
+	CodeEditorLanguage["PROTOBUF"] = "PROTOBUF";
+	/** Python. */
+	CodeEditorLanguage["PYTHON"] = "PYTHON";
+	/** Rust. */
+	CodeEditorLanguage["RUST"] = "RUST";
+	/** SQL. */
+	CodeEditorLanguage["SQL"] = "SQL";
+	/** TOML. */
+	CodeEditorLanguage["TOML"] = "TOML";
+	/** TypeScript with JSX. */
+	CodeEditorLanguage["TSX"] = "TSX";
+	/** TypeScript. */
+	CodeEditorLanguage["TYPESCRIPT"] = "TYPESCRIPT";
+	/** YAML. */
+	CodeEditorLanguage["YAML"] = "YAML";
+	return CodeEditorLanguage;
+}({});
+/** `@uiw/codemirror-extensions-langs` key per language (exhaustive; `PLAIN` loads nothing). */
+var CODE_EDITOR_LANGUAGE_TO_LANG_NAME_MAP = {
+	["BASH"]: "bash",
+	["CSS"]: "css",
+	["GO"]: "go",
+	["HTML"]: "html",
+	["JAVASCRIPT"]: "js",
+	["JSON"]: "json",
+	["JSX"]: "jsx",
+	["MARKDOWN"]: "markdown",
+	["PROTOBUF"]: "proto",
+	["PYTHON"]: "python",
+	["RUST"]: "rs",
+	["SQL"]: "sql",
+	["TOML"]: "toml",
+	["TSX"]: "tsx",
+	["TYPESCRIPT"]: "ts",
+	["YAML"]: "yaml"
+};
+/**
+* The frame: surface, hairline and radius; CodeMirror fills it. Focus does not change the frame
+* (no focus border, no inset line): the editor usually sits in a form between a header and a
+* footer, and the caret and selection already show where focus is. Hover does not change it either.
+*/
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-CodeEditor-rwfaerb",
+	propsAsIs: false
+});
+/**
+* Rest look per variant: fill and hairline color (restated from Input). The fill is
+* `--gx-code-editor-fill`, which the line-number gutter also paints so scrolled code passes under it.
+*/
+var CODE_EDITOR_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-CodeEditor-BASE-b1tjlkiu",
+	["PRIMARY"]: "gx-CodeEditor-PRIMARY-p1wy6p36",
+	["SECONDARY"]: "gx-CodeEditor-SECONDARY-s17h1t09",
+	["TERTIARY"]: "gx-CodeEditor-TERTIARY-t2pkkyv"
+};
+/**
+* `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces.
+* The gutter assumes the usual `background.primary` panel behind it; on another surface the app sets
+* `--gx-code-editor-fill` (through `style`) to that surface.
+*/
+var GHOST_CSS = "gx-CodeEditor-GHOST_CSS-gxzddl0";
+/** Error border, at rest and while focused (also on a ghost frame). */
+var ERROR_CSS = "gx-CodeEditor-ERROR_CSS-e16ii38u";
+/** CodeBlock's token table mapped onto `@lezer/highlight` tags, so read-only and editable code match. */
+function getHighlightStyles() {
+	return [
+		{
+			tag: [
+				tags.comment,
+				tags.lineComment,
+				tags.blockComment,
+				tags.docComment,
+				tags.meta,
+				tags.annotation,
+				tags.processingInstruction
+			],
+			color: t.color.text.tertiary,
+			fontStyle: "italic"
+		},
+		{
+			tag: [
+				tags.punctuation,
+				tags.operator,
+				tags.separator,
+				tags.bracket,
+				tags.angleBracket,
+				tags.squareBracket,
+				tags.paren,
+				tags.brace,
+				tags.derefOperator
+			],
+			color: t.color.text.secondary
+		},
+		{
+			tag: [
+				tags.keyword,
+				tags.modifier,
+				tags.controlKeyword,
+				tags.operatorKeyword,
+				tags.definitionKeyword,
+				tags.moduleKeyword,
+				tags.self,
+				tags.bool,
+				tags.null,
+				tags.atom,
+				tags.constant(tags.name)
+			],
+			color: t.color.text.purple
+		},
+		{
+			tag: [
+				tags.string,
+				tags.special(tags.string),
+				tags.character,
+				tags.escape,
+				tags.docString,
+				tags.attributeValue,
+				tags.regexp,
+				tags.url,
+				tags.link,
+				tags.inserted
+			],
+			color: t.color.text.green
+		},
+		{
+			tag: [
+				tags.number,
+				tags.integer,
+				tags.float,
+				tags.unit
+			],
+			color: t.color.text.orange
+		},
+		{
+			tag: [
+				tags.function(tags.variableName),
+				tags.function(tags.propertyName),
+				tags.definition(tags.function(tags.variableName))
+			],
+			color: t.color.text.blue
+		},
+		{
+			tag: [
+				tags.className,
+				tags.typeName,
+				tags.definition(tags.typeName),
+				tags.namespace,
+				tags.standard(tags.variableName)
+			],
+			color: t.color.text.yellow
+		},
+		{
+			tag: [tags.tagName, tags.labelName],
+			color: t.color.text.pink
+		},
+		{
+			tag: [tags.attributeName, tags.special(tags.variableName)],
+			color: t.color.text.teal
+		},
+		{
+			tag: [tags.deleted, tags.invalid],
+			color: t.color.text.red
+		},
+		{
+			tag: [
+				tags.heading,
+				tags.heading1,
+				tags.heading2,
+				tags.heading3,
+				tags.heading4,
+				tags.heading5,
+				tags.heading6,
+				tags.strong
+			],
+			fontWeight: t.font.mono.weight.medium
+		},
+		{
+			tag: tags.emphasis,
+			fontStyle: "italic"
+		},
+		{
+			tag: tags.strikethrough,
+			color: t.color.text.tertiary,
+			textDecoration: "line-through"
+		}
+	];
 }
-function createSearchPanelThemeExtension(theme) {
+/** The focus outline, written out for CodeMirror's own buttons (the `FOCUS_RING` values). */
+function getFocusOutline() {
+	return {
+		borderColor: t.color.border.focused,
+		outline: `1px solid ${t.color.border.focused}`,
+		outlineOffset: "1px"
+	};
+}
+/** Everything that is not syntax: content inset, gutters, popups, the search panel. All `t.*`. */
+function getEditorViewTheme() {
+	const hairline = `0.5px solid ${t.color.border.primary}`;
+	const sansBodyMd = {
+		fontFamily: t.font.sans.family,
+		fontSize: t.font.sans.size.body_md
+	};
 	return EditorView.theme({
-		".cm-panels": { backgroundColor: "transparent" },
-		".cm-panels.cm-panels-top": { borderBottom: "none" },
-		".cm-panels.cm-panels-bottom": { borderTop: "none" },
+		"&.cm-focused": { outline: "none" },
+		".cm-scroller": {
+			overflow: "auto",
+			fontFamily: t.font.mono.family,
+			lineHeight: t.font.mono.height.body_lg,
+			letterSpacing: t.font.mono.spacing.body_md
+		},
+		".cm-content": { padding: `${t.space[8]} 0` },
+		".cm-line": { padding: `0 ${t.space[12]}` },
+		".cm-gutters": {
+			border: "none",
+			color: t.color.text.tertiary
+		},
+		".cm-lineNumbers .cm-gutterElement": {
+			padding: `0 ${t.space[4]} 0 ${t.space[12]}`,
+			fontVariantNumeric: "tabular-nums"
+		},
+		".cm-foldGutter .cm-gutterElement": {
+			padding: `0 ${t.space[4]}`,
+			color: t.color.text.tertiary
+		},
+		".cm-activeLineGutter": { backgroundColor: "transparent" },
+		".cm-placeholder": { color: t.color.text.tertiary },
+		".cm-matchingBracket": {
+			backgroundColor: t.color.opacity.fg12,
+			outline: "none"
+		},
+		".cm-nonmatchingBracket": {
+			color: t.color.text.error,
+			backgroundColor: "transparent"
+		},
+		".cm-searchMatch": {
+			backgroundColor: t.color.background.yellow,
+			outline: "none"
+		},
+		".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: t.color.background.yellow },
+		".cm-foldPlaceholder": {
+			backgroundColor: t.color.background.tertiary,
+			border: hairline,
+			borderRadius: t.radius.sm,
+			color: t.color.text.secondary,
+			padding: `0 ${t.space[4]}`
+		},
+		".cm-tooltip": {
+			backgroundColor: t.color.background.tertiary,
+			border: hairline,
+			borderRadius: t.radius.md,
+			color: t.color.text.primary,
+			overflow: "hidden"
+		},
+		".cm-tooltip.cm-tooltip-autocomplete > ul": {
+			fontFamily: t.font.mono.family,
+			fontSize: t.font.mono.size.body_md
+		},
+		".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+			padding: `${t.space[2]} ${t.space[8]}`,
+			lineHeight: t.font.mono.height.body_md
+		},
+		".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+			backgroundColor: t.color.background.pressed,
+			color: t.color.text.primary
+		},
+		".cm-completionDetail": {
+			color: t.color.text.tertiary,
+			fontStyle: "normal"
+		},
+		".cm-completionMatchedText": {
+			textDecoration: "none",
+			fontWeight: t.font.mono.weight.medium
+		},
+		".cm-panels": {
+			backgroundColor: "transparent",
+			color: t.color.text.primary
+		},
+		".cm-panels.cm-panels-top": {
+			borderBottom: "none",
+			padding: t.space[8]
+		},
+		".cm-panels.cm-panels-bottom": {
+			borderTop: "none",
+			padding: t.space[8]
+		},
 		".cm-panel.cm-search": {
-			margin: "6px",
-			padding: "6px",
+			display: "flex",
+			alignItems: "center",
+			gap: t.space[4],
 			width: "fit-content",
-			maxWidth: "calc(100% - 12px)",
-			borderRadius: "5px",
-			border: `0.5px solid ${theme.color.border.primary}`,
-			backgroundColor: theme.color.background.primary,
-			color: theme.color.text.primary,
-			fontFamily: theme.font.sans.family,
-			fontSize: theme.font.sans.size.body_md
-		},
-		".cm-panel.cm-search input, .cm-panel.cm-search button, .cm-panel.cm-search label": { margin: 0 },
-		".cm-panel.cm-search .cm-textfield[name=replace], .cm-panel.cm-search .cm-button[name=replace], .cm-panel.cm-search .cm-button[name=replaceAll], .cm-panel.cm-search label:has(input[name=case]), .cm-panel.cm-search label:has(input[name=re]), .cm-panel.cm-search label:has(input[name=word]), .cm-panel.cm-search [name=close], .cm-panel.cm-search br": { display: "none" },
+			maxWidth: "100%",
+			boxSizing: "border-box",
+			padding: t.space[4],
+			backgroundColor: t.color.background.tertiary,
+			border: hairline,
+			borderRadius: t.radius.md,
+			...sansBodyMd
+		},
+		".cm-panel.cm-search .cm-textfield[name=replace], .cm-panel.cm-search .cm-button[name=replace], .cm-panel.cm-search .cm-button[name=replaceAll], .cm-panel.cm-search label, .cm-panel.cm-search [name=close], .cm-panel.cm-search br": { display: "none" },
 		".cm-panel.cm-search .cm-textfield": {
-			height: "24px",
-			minHeight: "24px",
-			maxHeight: "24px",
-			padding: "0 6px",
-			margin: 0,
+			height: t.size.control.small,
 			boxSizing: "border-box",
-			alignSelf: "center",
-			verticalAlign: "middle",
-			borderRadius: "5px",
-			border: `0.5px solid ${theme.color.border.primary}`,
-			background: theme.color.background.primary,
-			color: theme.color.text.primary,
-			fontFamily: theme.font.sans.family,
-			fontSize: theme.font.sans.size.body_md,
-			lineHeight: "24px",
-			fontWeight: theme.font.sans.weight.regular,
+			margin: 0,
+			padding: `0 ${t.space[8]}`,
+			border: hairline,
+			borderRadius: t.radius.md,
+			backgroundColor: t.color.background.primary,
+			color: t.color.text.primary,
+			...sansBodyMd,
 			outline: "none",
-			"&::placeholder": { color: theme.color.text.tertiary },
-			"&:focus": { borderColor: theme.color.border.selected }
+			transition: `border-color ${t.duration.fast} ease-in-out`,
+			"&::placeholder": { color: t.color.text.tertiary },
+			"&:focus": { borderColor: t.color.border.focused }
 		},
 		".cm-panel.cm-search .cm-button": {
-			height: "24px",
-			minHeight: "24px",
-			maxHeight: "24px",
-			padding: "0 10px",
-			margin: 0,
+			height: t.size.control.small,
 			boxSizing: "border-box",
-			alignSelf: "center",
-			borderRadius: "5px",
+			margin: 0,
+			padding: `0 ${t.space[8]}`,
 			border: "0.5px solid transparent",
+			borderRadius: t.radius.md,
 			background: "transparent",
 			backgroundImage: "none",
-			color: theme.color.text.primary,
-			fontFamily: theme.font.sans.family,
-			fontSize: theme.font.sans.size.body_md,
-			lineHeight: "24px",
-			fontWeight: theme.font.sans.weight.medium,
+			color: t.color.text.primary,
+			...sansBodyMd,
+			fontWeight: t.font.sans.weight.medium,
 			textTransform: "capitalize",
 			cursor: "pointer",
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center",
-			verticalAlign: "middle",
-			whiteSpace: "nowrap",
-			appearance: "none",
-			WebkitAppearance: "none",
-			boxShadow: "none",
-			filter: "none",
-			transition: "background-color 0.075s ease-in-out, border 0.075s ease-in-out",
-			"&:hover": {
-				backgroundColor: theme.color.background.secondary,
-				borderColor: theme.color.border.primary
-			}
+			transition: `background-color ${t.duration.fast} ease-in-out`,
+			"&:hover": { backgroundColor: t.color.background.hovered },
+			"&:focus-visible": getFocusOutline()
 		}
 	});
 }
-function createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly) {
-	const codeMirrorTheme = match(activeTheme).returnType().with(GalaxyTheme.DARK, () => "dark").with(GalaxyTheme.LIGHT, () => "light").exhaustive();
-	const settingsBackgroundColor = getBackgroundColorFromVariant(theme, variant);
-	const settingsSelectionColor = isReadOnly ? theme.color.opacity.bw0 : theme.color.opacity.bw16Alt;
-	const settingsSelectionMatchColor = getBackgroundColorFromVariant(theme, variant);
-	const settingsGutterBackgroundColor = getBackgroundColorFromVariant(theme, variant);
-	const settingsGutterActiveForegroundColor = isReadOnly ? theme.color.text.tertiary : theme.color.text.primary;
-	return createTheme({
-		theme: codeMirrorTheme,
+/** The DLS CodeMirror theme per `isDark` × `isReadOnly`, built on first use (never at module scope). */
+var THEME_CACHE = /* @__PURE__ */ new Map();
+/** CodeMirror's theme from tokens; `isDark` only sets CodeMirror's own `dark` flag. */
+function getCodeEditorTheme(isDark, isReadOnly) {
+	const key = `${isDark}:${isReadOnly}`;
+	const cached = THEME_CACHE.get(key);
+	if (cached !== void 0) return cached;
+	const theme = [createTheme({
+		theme: isDark ? "dark" : "light",
 		settings: {
-			background: settingsBackgroundColor,
-			foreground: theme.color.text.primary,
-			caret: theme.color.text.primary,
-			selection: settingsSelectionColor,
-			selectionMatch: settingsSelectionMatchColor,
+			background: "transparent",
+			foreground: t.color.text.primary,
+			caret: t.color.text.primary,
+			selection: t.color.opacity.fg16,
+			selectionMatch: "transparent",
 			lineHighlight: "transparent",
-			gutterBackground: settingsGutterBackgroundColor,
-			gutterForeground: theme.color.text.tertiary,
-			gutterActiveForeground: settingsGutterActiveForegroundColor,
+			gutterBackground: `var(--gx-code-editor-fill, ${t.color.background.primary})`,
+			gutterForeground: t.color.text.tertiary,
+			gutterActiveForeground: isReadOnly ? t.color.text.tertiary : t.color.text.primary,
 			gutterBorder: "transparent",
-			fontFamily: theme.font.mono.family,
-			fontSize: theme.font.mono.size.body_md
-		},
-		styles: [
-			{
-				tag: tags.comment,
-				color: theme.color.text.tertiary,
-				fontStyle: "italic"
-			},
-			{
-				tag: tags.lineComment,
-				color: theme.color.text.tertiary,
-				fontStyle: "italic"
-			},
-			{
-				tag: tags.blockComment,
-				color: theme.color.text.tertiary,
-				fontStyle: "italic"
-			},
-			{
-				tag: tags.variableName,
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.definition(tags.variableName),
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.propertyName,
-				color: theme.color.text.purple
-			},
-			{
-				tag: tags.definition(tags.propertyName),
-				color: theme.color.text.purple
-			},
-			{
-				tag: tags.string,
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.special(tags.string),
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.character,
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.escape,
-				color: theme.color.text.primary
-			},
-			{
-				tag: tags.number,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.integer,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.float,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.bool,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.null,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.atom,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.keyword,
-				color: theme.color.text.blue,
-				fontWeight: "500"
-			},
-			{
-				tag: tags.modifier,
-				color: theme.color.text.blue
-			},
-			{
-				tag: tags.self,
-				color: theme.color.text.blue
-			},
-			{
-				tag: tags.operator,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.punctuation,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.separator,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.bracket,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.angleBracket,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.squareBracket,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.paren,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.brace,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.special(tags.brace),
-				color: theme.color.text.teal
-			},
-			{
-				tag: tags.className,
-				color: theme.color.text.purple
-			},
-			{
-				tag: tags.typeName,
-				color: theme.color.text.purple
-			},
-			{
-				tag: tags.definition(tags.typeName),
-				color: theme.color.text.purple
-			},
-			{
-				tag: tags.namespace,
-				color: theme.color.text.teal
-			},
-			{
-				tag: tags.function(tags.variableName),
-				color: theme.color.text.blue
-			},
-			{
-				tag: tags.definition(tags.function(tags.variableName)),
-				color: theme.color.text.blue
-			},
-			{
-				tag: tags.function(tags.propertyName),
-				color: theme.color.text.teal
-			},
-			{
-				tag: tags.tagName,
-				color: theme.color.text.pink
-			},
-			{
-				tag: tags.attributeName,
-				color: theme.color.text.blue
-			},
-			{
-				tag: tags.attributeValue,
-				color: theme.color.text.green
-			},
-			{
-				tag: tags.heading,
-				color: theme.color.text.pink,
-				fontWeight: "bold"
-			},
-			{
-				tag: tags.heading1,
-				color: theme.color.text.pink,
-				fontWeight: "bold"
-			},
-			{
-				tag: tags.heading2,
-				color: theme.color.text.orange,
-				fontWeight: "bold"
-			},
-			{
-				tag: tags.heading3,
-				color: theme.color.text.teal,
-				fontWeight: "bold"
-			},
-			{
-				tag: tags.link,
-				color: theme.color.text.blue,
-				textDecoration: "underline"
-			},
-			{
-				tag: tags.url,
-				color: theme.color.text.teal,
-				textDecoration: "underline"
-			},
-			{
-				tag: tags.emphasis,
-				color: theme.color.text.lime,
-				fontStyle: "italic"
-			},
-			{
-				tag: tags.strong,
-				color: theme.color.text.purple,
-				fontWeight: "bold"
-			},
-			{
-				tag: tags.strikethrough,
-				color: theme.color.text.tertiary,
-				textDecoration: "line-through"
-			},
-			{
-				tag: tags.regexp,
-				color: theme.color.text.yellow
-			},
-			{
-				tag: tags.labelName,
-				color: theme.color.text.lime
-			},
-			{
-				tag: tags.meta,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.annotation,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.processingInstruction,
-				color: theme.color.text.tertiary
-			},
-			{
-				tag: tags.invalid,
-				color: theme.color.text.error
-			}
-		]
-	});
+			fontFamily: t.font.mono.family,
+			fontSize: t.font.mono.size.body_md
+		},
+		styles: getHighlightStyles()
+	}), getEditorViewTheme()];
+	THEME_CACHE.set(key, theme);
+	return theme;
 }
-/**
-* A CodeMirror 6 editor themed to match DLS — Berkeley Mono, theme-aware syntax
-* colors, hairline border.
-*
-* Controlled: `content` is the document and `onChange` fires per keystroke.
-* Extend it through `customExtensions` rather than forking the component.
-*/
-var CodeEditor = ({ content, placeholder, lang, customExtensions = [], onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant = "PRIMARY" }) => {
-	const { theme, activeTheme } = useGalaxyTheme();
-	const codeMirrorTheme = useMemo(() => createCodeMirrorThemeExtension(theme, activeTheme, variant, isReadOnly), [
-		theme,
-		activeTheme,
-		variant,
-		isReadOnly
-	]);
-	const langExtensions = useMemo(() => {
-		if (!lang) return [];
-		loadLanguage(lang);
-		const langExtension = langs[lang];
-		if (langExtension) return [langExtension()];
-		return [];
-	}, [lang]);
-	const keymapExtensions = useMemo(() => {
-		if (!onExecute) return [];
-		return [keymap.of([{
-			key: "Mod-Enter",
-			run: () => {
-				onExecute();
-				return true;
-			}
-		}])];
-	}, [onExecute]);
-	const searchPanelTheme = useMemo(() => createSearchPanelThemeExtension(theme), [theme]);
-	const noLineNumbersTheme = useMemo(() => {
-		if (!noLineNumbers) return [];
-		return [EditorView.theme({ ".cm-gutters": { display: "none" } })];
-	}, [noLineNumbers]);
-	const paddingTheme = useMemo(() => {
-		return [EditorView.theme({ ".cm-content": { padding: getCssSizeValue(padding ?? 4) } })];
-	}, [padding]);
-	const extensions = useMemo(() => {
-		return [
-			...langExtensions,
-			...keymapExtensions,
-			searchPanelTheme,
-			...noLineNumbersTheme,
-			...paddingTheme,
-			...customExtensions
-		];
-	}, [
-		langExtensions,
-		keymapExtensions,
-		searchPanelTheme,
-		noLineNumbersTheme,
-		paddingTheme,
-		customExtensions
+/** The pending or settled import of the grammar package (set lazily, never at module scope). */
+var langsModulePromise;
+/** One stable `Extension` per language, shared by every editor. */
+var LANGUAGE_CACHE = /* @__PURE__ */ new Map();
+/** Loads a grammar (the package is its own lazy chunk); resolves `undefined` for `PLAIN`. */
+async function loadCodeEditorLanguage(language) {
+	if (language === "PLAIN") return void 0;
+	const cached = LANGUAGE_CACHE.get(language);
+	if (cached !== void 0) return cached;
+	langsModulePromise ??= import("@uiw/codemirror-extensions-langs");
+	const { langs } = await langsModulePromise;
+	const extension = langs[CODE_EDITOR_LANGUAGE_TO_LANG_NAME_MAP[language]]();
+	LANGUAGE_CACHE.set(language, extension);
+	return extension;
+}
+/** True for a non-empty string. */
+function isFilled(text) {
+	return text !== void 0 && text !== "";
+}
+/** The multi-line code editor: CodeMirror 6 in the DLS input frame. */
+var CodeEditor = forwardRef(function CodeEditor({ value, defaultValue = "", onChange, onExecute, language = "PLAIN", placeholder, variant = "PRIMARY", isGhost = false, hasLineNumbers = false, isReadOnly = false, isError = false, extensions, ariaLabel, id, className, style, ...rest }, ref) {
+	const field = useField();
+	const themeContext = useContext(GalaxyThemeContext);
+	const [currentValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const hasError = isError || field?.isError === true;
+	const isEditable = !isReadOnly;
+	const ariaPassthrough = {};
+	const dataPassthrough = {};
+	for (const [key, attribute] of Object.entries(rest)) if (key.startsWith("data-")) dataPassthrough[key] = attribute;
+	else if (key.startsWith("aria-") && attribute !== void 0 && attribute !== null) ariaPassthrough[key] = String(attribute);
+	const { "aria-label": passedAriaLabel, "aria-describedby": passedDescribedBy, ...otherAria } = ariaPassthrough;
+	const contentAttributeMap = {};
+	const contentId = field?.controlId ?? id;
+	if (isFilled(contentId)) contentAttributeMap.id = contentId;
+	const accessibleName = ariaLabel ?? passedAriaLabel;
+	if (isFilled(accessibleName)) contentAttributeMap["aria-label"] = accessibleName;
+	if (field?.labelId !== void 0) contentAttributeMap["aria-labelledby"] = field.labelId;
+	const describedBy = [field?.describedBy, passedDescribedBy].filter(isFilled).join(" ");
+	if (describedBy !== "") contentAttributeMap["aria-describedby"] = describedBy;
+	if (hasError) contentAttributeMap["aria-invalid"] = "true";
+	if (field?.isRequired === true) contentAttributeMap["aria-required"] = "true";
+	if (isReadOnly) contentAttributeMap["aria-readonly"] = "true";
+	Object.assign(contentAttributeMap, otherAria);
+	const contentAttributesKey = JSON.stringify(contentAttributeMap);
+	const contentAttributes = useMemo(() => EditorView.contentAttributes.of(JSON.parse(contentAttributesKey)), [contentAttributesKey]);
+	const onExecuteRef = useRef(onExecute);
+	onExecuteRef.current = onExecute;
+	const executeKeymap = useMemo(() => Prec.highest(keymap.of([{
+		key: "Mod-Enter",
+		run: (view) => {
+			const handler = onExecuteRef.current;
+			if (view.state.readOnly || handler === void 0) return false;
+			handler(view.state.doc.toString());
+			return true;
+		}
+	}])), []);
+	const [loadedLanguage, setLoadedLanguage] = useState();
+	useEffect(() => {
+		if (language === "PLAIN") return;
+		let isCurrent = true;
+		loadCodeEditorLanguage(language).then((extension) => {
+			if (isCurrent && extension !== void 0) setLoadedLanguage({
+				language,
+				extension
+			});
+		}, () => {});
+		return () => {
+			isCurrent = false;
+		};
+	}, [language]);
+	const languageExtension = loadedLanguage !== void 0 && loadedLanguage.language === language ? loadedLanguage.extension : void 0;
+	const baseColor = themeContext?.theme.color.background.base;
+	const themeExtension = getCodeEditorTheme(baseColor === void 0 ? false : rgbToHsl(hexToRgb(baseColor)).l < .5, isReadOnly);
+	const allExtensions = useMemo(() => [
+		contentAttributes,
+		executeKeymap,
+		...languageExtension === void 0 ? [] : [languageExtension],
+		...extensions ?? []
+	], [
+		contentAttributes,
+		executeKeymap,
+		languageExtension,
+		extensions
 	]);
-	return /* @__PURE__ */ jsx(CodeEditorWrapper, {
-		$borderRadius: borderRadius,
-		$noBorder: noBorder,
+	const basicSetup = useMemo(() => ({
+		lineNumbers: hasLineNumbers,
+		foldGutter: hasLineNumbers,
+		highlightActiveLine: false,
+		highlightActiveLineGutter: false,
+		highlightSelectionMatches: false
+	}), [hasLineNumbers]);
+	const setValueRef = useRef(setValue);
+	setValueRef.current = setValue;
+	const handleChange = useCallback((next) => setValueRef.current(next), []);
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
+		...dataPassthrough,
+		className: cx(isGhost ? GHOST_CSS : CODE_EDITOR_VARIANT_TO_CSS_MAP[variant], hasError && ERROR_CSS, className),
+		style,
 		children: /* @__PURE__ */ jsx(CodeMirror, {
-			value: content,
-			placeholder,
-			width: "100%",
+			value: currentValue,
+			onChange: handleChange,
+			theme: themeExtension,
+			basicSetup,
+			readOnly: isReadOnly,
+			editable: true,
+			indentWithTab: isEditable,
+			placeholder: placeholder ?? "",
 			height: "100%",
-			theme: codeMirrorTheme,
-			editable: !isReadOnly,
-			basicSetup: { lineNumbers: !noLineNumbers },
-			extensions,
-			onChange
+			width: "100%",
+			extensions: allExtensions
 		})
 	});
-};
+});
+CodeEditor.displayName = "CodeEditor";
 //#endregion
-export { CodeEditorVariant, createCodeMirrorThemeExtension, createSearchPanelThemeExtension, CodeEditor as default };
+export { CodeEditorLanguage, CodeEditorVariant, CodeEditor as default };