@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/dropdown/Dropdown.d.ts

@@ -1,75 +1,92 @@
-import { type PropsWithChildren, type ReactNode } from "react";
-/** Surface treatment of the dropdown panel. */
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode } from "react";
+import { Placement } from "../theme/enums.js";
+/** Panel fill: a surface step (Constitution V-A surface set, all four members; the 1.x default). */
 export declare enum DropdownVariant {
-    TRANSPARENT = "TRANSPARENT",
+    /** The canvas fill, `background.base`. The default (as in 1.x). */
     BASE = "BASE",
+    /** A panel fill, `background.primary`. */
     PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
     SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. */
     TERTIARY = "TERTIARY"
 }
-/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
-export declare enum DropdownPosition {
-    TOP = "top",
-    BOTTOM = "bottom",
-    LEFT = "left",
-    RIGHT = "right",
-    TOP_START = "top-start",
-    TOP_END = "top-end",
-    BOTTOM_START = "bottom-start",
-    BOTTOM_END = "bottom-end",
-    RIGHT_START = "right-start",
-    RIGHT_END = "right-end",
-    LEFT_START = "left-start",
-    LEFT_END = "left-end",
-    AUTO = "auto",
-    AUTO_START = "auto-start",
-    AUTO_END = "auto-end"
+/** What a region's render function receives. */
+export interface DropdownRenderArgs {
+    /** Closes the panel (calls `onOpenChange(false)`; a controlled caller decides). */
+    close: () => void;
 }
-/** What opens the panel. `MANUAL` hands control entirely to `isOpen`. */
-export declare enum DropdownTrigger {
-    CLICK = "click",
-    HOVER = "hover",
-    FOCUS = "focus",
-    MANUAL = "manual"
-}
-export interface DropdownProps {
-    /** @default DropdownVariant.BASE */
+/** Content of a Dropdown region, or a function of `{ close }` that returns it (1.x `contentWhenDropdown`). */
+export type DropdownSlot = ReactNode | ((args: DropdownRenderArgs) => ReactNode);
+export interface DropdownProps extends AriaAttributes {
+    /**
+     * The trigger: one element that forwards its `ref` and spreads props to a DOM element. Dropdown
+     * clones it (through Popover) and does not wrap it. Clicking it, or Enter / Space on it, toggles
+     * the panel.
+     */
+    children: ReactElement;
+    /**
+     * Content pinned above the body, with a hairline under it: a title, a search field, tabs. A
+     * string or number renders as `Text`. A function receives `{ close }`.
+     */
+    header?: DropdownSlot;
+    /**
+     * The panel content. It scrolls when the panel is capped by the room on screen. A string or
+     * number renders as `Text`. A function receives `{ close }`.
+     */
+    body: DropdownSlot;
+    /**
+     * Content pinned below the body, with a hairline above it: Apply / Reset buttons, a hint. A
+     * string or number renders as `Text`. A function receives `{ close }`.
+     */
+    footer?: DropdownSlot;
+    /**
+     * Panel fill (surface step). Ignored when `hasSurface` is `false`.
+     * @default DropdownVariant.BASE
+     */
     variant?: DropdownVariant;
-    /** Pinned above the scrolling body. */
-    header?: ReactNode;
-    /** Panel content. */
-    body: ReactNode;
-    /** Pinned below the scrolling body. */
-    footer?: ReactNode;
-    /** @default DropdownPosition.BOTTOM_START */
-    position?: DropdownPosition;
-    /** `[skidding, distance]` in px from the trigger. @default [0, 6] */
-    offset?: [number, number];
-    /** @default DropdownTrigger.CLICK */
-    trigger?: DropdownTrigger;
-    /** A number is px. */
-    width?: number | string;
-    /** Controlled open state. Pass it together with `onClose`. */
+    /**
+     * Draw the panel's fill and outer hairline (Popover's `hasSurface`). `false` draws neither, for
+     * content that brings its own surface; the region dividers and insets stay. Defaults to `true`.
+     * @default true
+     */
+    hasSurface?: boolean;
+    /**
+     * Preferred side and alignment. The panel flips and shifts to stay in the viewport; `AUTO*`
+     * picks the side with the most room.
+     * @default Placement.BOTTOM_START
+     */
+    placement?: Placement;
+    /**
+     * Make the panel exactly as wide as the trigger.
+     * @default false
+     */
+    shouldMatchTriggerWidth?: boolean;
+    /** Controlled open state. When set, Dropdown calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
-    /** Called when the panel dismisses itself — Escape, or a click outside. */
-    onClose?: () => void;
-    minWidth?: number | string;
-    /** Also clips overflowing content. A number is px. */
-    maxWidth?: number | string;
-    /** Stretch the trigger wrapper to the parent's width. */
-    fillWidth?: boolean;
-    /** Drop the 4px inset — for panels that host their own layout. */
-    noPadding?: boolean;
-    /** Drop the hairline border. */
-    noBorder?: boolean;
-    /** Render children bare, with no dropdown at all. */
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested open state on trigger click, Escape, outside press, focus leaving the panel, and `close()`. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Never opens. The trigger renders exactly as when enabled, without the popup ARIA.
+     * @default false
+     */
     isDisabled?: boolean;
+    /** Accessible name of the panel. When omitted (and no `aria-labelledby` is passed), the panel is labelled by the trigger. */
+    ariaLabel?: string;
+    /** DOM id on the panel; the trigger's `aria-controls` target. @default a `useId()` value */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the panel. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the panel. */
+    className?: string;
+    /** Inline style on the panel; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * A panel anchored to a trigger. Children are the trigger.
- *
- * Uncontrolled by default. Pass `isOpen` *and* `onClose` to drive it yourself —
- * useful when a selection inside the body should close it.
- */
-declare const Dropdown: ({ children, variant, header, body, footer, position, offset, minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding, noBorder, fillWidth, isDisabled, }: PropsWithChildren<DropdownProps>) => import("react").JSX.Element;
+/** A click-opened anchored panel with a pinned header, a scrolling body and a pinned footer. */
+declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/dropdown/Dropdown.js

@@ -1,146 +1,144 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Box from "../layout/Box.js";
+import Divider from "../layout/Divider.js";
+import ScrollArea from "../layout/ScrollArea.js";
+import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlays/Popover.js";
 /* empty css                   */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import Tippy from "@tippyjs/react";
+import { forwardRef, useCallback, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/dropdown/Dropdown.tsx
-/** Surface treatment of the dropdown panel. */
+/**
+* The click-opened anchored panel with chrome: an optional pinned `header`, a scrolling `body` and
+* an optional pinned `footer`, separated by hairlines. A thin preset over `Popover` (`CLICK`,
+* `DIALOG`): Popover places, stacks, animates and dismisses the panel and manages focus; Dropdown
+* adds the three regions, their 4px inset, and a `close` function region content can call.
+*
+* The trigger is the single child, cloned (by Popover) and not wrapped. A command list with arrow
+* keys is a `Menu`; a bare panel, or one opened by hover, focus or right-click, is a `Popover`.
+*
+* SSR: only the trigger renders on the server. Nothing here touches `window` or `document` at
+* module scope.
+*/
+/** Panel fill: a surface step (Constitution V-A surface set, all four members; the 1.x default). */
 var DropdownVariant = /* @__PURE__ */ function(DropdownVariant) {
-	DropdownVariant["TRANSPARENT"] = "TRANSPARENT";
+	/** The canvas fill, `background.base`. The default (as in 1.x). */
 	DropdownVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. */
 	DropdownVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
 	DropdownVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. */
 	DropdownVariant["TERTIARY"] = "TERTIARY";
 	return DropdownVariant;
 }({});
-/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
-var DropdownPosition = /* @__PURE__ */ function(DropdownPosition) {
-	DropdownPosition["TOP"] = "top";
-	DropdownPosition["BOTTOM"] = "bottom";
-	DropdownPosition["LEFT"] = "left";
-	DropdownPosition["RIGHT"] = "right";
-	DropdownPosition["TOP_START"] = "top-start";
-	DropdownPosition["TOP_END"] = "top-end";
-	DropdownPosition["BOTTOM_START"] = "bottom-start";
-	DropdownPosition["BOTTOM_END"] = "bottom-end";
-	DropdownPosition["RIGHT_START"] = "right-start";
-	DropdownPosition["RIGHT_END"] = "right-end";
-	DropdownPosition["LEFT_START"] = "left-start";
-	DropdownPosition["LEFT_END"] = "left-end";
-	DropdownPosition["AUTO"] = "auto";
-	DropdownPosition["AUTO_START"] = "auto-start";
-	DropdownPosition["AUTO_END"] = "auto-end";
-	return DropdownPosition;
-}({});
-/** What opens the panel. `MANUAL` hands control entirely to `isOpen`. */
-var DropdownTrigger = /* @__PURE__ */ function(DropdownTrigger) {
-	DropdownTrigger["CLICK"] = "click";
-	DropdownTrigger["HOVER"] = "hover";
-	DropdownTrigger["FOCUS"] = "focus";
-	DropdownTrigger["MANUAL"] = "manual";
-	return DropdownTrigger;
-}({});
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "fit-content";
-var _exp2 = () => ({ $minWidth }) => getCssSizeValue($minWidth, "fit-content");
-var _exp3 = () => ({ $maxWidth }) => getCssSizeValue($maxWidth, "none");
-var _exp4 = () => ({ $maxWidth }) => $maxWidth ? "hidden" : "visible";
-var _exp5 = () => ({ $noPadding }) => $noPadding ? "0" : "4px";
-var _exp6 = () => ({ $variant, theme }) => {
-	return match($variant).returnType().with("TRANSPARENT", () => "transparent").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();
+/** A string region's type: a medium small title, body copy, a quiet small hint. */
+var DROPDOWN_REGION_TO_TEXT_PROPS_MAP = {
+	header: {
+		size: TextSize.BODY_SM,
+		weight: TextWeight.MEDIUM,
+		variant: TextVariant.PRIMARY
+	},
+	body: {
+		size: TextSize.BODY_MD,
+		weight: TextWeight.REGULAR,
+		variant: TextVariant.PRIMARY
+	},
+	footer: {
+		size: TextSize.BODY_SM,
+		weight: TextWeight.REGULAR,
+		variant: TextVariant.TERTIARY
+	}
 };
-var _exp7 = () => ({ $noBorder, $variant, theme }) => {
-	if ($noBorder) return "none";
-	return match($variant).returnType().with("TRANSPARENT", () => "transparent").with("BASE", () => `0.5px solid ${theme.color.border.primary}`).with("PRIMARY", () => `0.5px solid ${theme.color.border.primary}`).with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => `0.5px solid ${theme.color.border.primary}`).exhaustive();
+/** Identity over the four shared surface steps; the fill CSS is Popover's. */
+var DROPDOWN_VARIANT_TO_POPOVER_VARIANT_MAP = {
+	["BASE"]: PopoverVariant.BASE,
+	["PRIMARY"]: PopoverVariant.PRIMARY,
+	["SECONDARY"]: PopoverVariant.SECONDARY,
+	["TERTIARY"]: PopoverVariant.TERTIARY
 };
-var DropdownContent = withTheme(/*#__PURE__*/ styled("span")({
-	name: "DropdownContent",
-	class: "d1bgy4cf",
-	propsAsIs: false,
-	vars: {
-		"d1bgy4cf-0": [_exp()],
-		"d1bgy4cf-1": [_exp2()],
-		"d1bgy4cf-2": [_exp3()],
-		"d1bgy4cf-3": [_exp4()],
-		"d1bgy4cf-4": [_exp5()],
-		"d1bgy4cf-5": [_exp6()],
-		"d1bgy4cf-6": [_exp7()]
-	}
-}));
-var _exp8 = () => ({ $isOpen }) => $isOpen ? 1001 : "auto";
-var _exp9 = () => ({ $fillWidth }) => $fillWidth ? "block" : "inline-block";
-var _exp0 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var DropdownTriggerWrapper = /*#__PURE__*/ styled("span")({
-	name: "DropdownTriggerWrapper",
-	class: "dfdzgmt",
-	propsAsIs: false,
-	vars: {
-		"dfdzgmt-0": [_exp8()],
-		"dfdzgmt-1": [_exp9()],
-		"dfdzgmt-2": [_exp0()]
-	}
-});
 /**
-* A panel anchored to a trigger. Children are the trigger.
-*
-* Uncontrolled by default. Pass `isOpen` *and* `onClose` to drive it yourself —
-* useful when a selection inside the body should close it.
+* The panel is `border-box` with a 0.5px hairline top and bottom, so its content box is 1px
+* shorter than the room Popover reports.
 */
-var Dropdown = ({ children, variant = "BASE", header, body, footer, position = "bottom-start", offset = [0, 6], minWidth, maxWidth, isOpen: controlledIsOpen, onClose, noPadding = false, noBorder = false, fillWidth = false, isDisabled = false }) => {
-	const [internalIsOpen, setInternalIsOpen] = useState(false);
-	const isControlled = controlledIsOpen !== void 0;
-	const visible = isControlled ? controlledIsOpen : internalIsOpen;
-	const handleVisibilityChange = (isVisible) => {
-		if (!isControlled) setInternalIsOpen(isVisible);
-		if (!isVisible && onClose) onClose();
-	};
-	const handleClick = () => {
-		if (!isControlled) setInternalIsOpen(!internalIsOpen);
-	};
-	const content = /* @__PURE__ */ jsxs(DropdownContent, {
-		$variant: variant,
-		$minWidth: minWidth,
-		$maxWidth: maxWidth,
-		$noPadding: noPadding,
-		$noBorder: noBorder,
-		$fillWidth: fillWidth,
-		children: [
-			header,
-			body,
-			footer
-		]
-	});
-	const handleClickOutside = (instance, event) => {
-		const clickedTippyRoot = event.target.closest("[data-tippy-root]");
-		if (clickedTippyRoot) {
-			const allTippyRoots = Array.from(document.querySelectorAll("[data-tippy-root]"));
-			const currentIndex = allTippyRoots.indexOf(instance.popper);
-			const clickedIndex = allTippyRoots.indexOf(clickedTippyRoot);
-			if (clickedIndex > currentIndex && clickedIndex >= 0 && currentIndex >= 0) return;
-		}
-		handleVisibilityChange(false);
-	};
-	return /* @__PURE__ */ jsx(Tippy, {
-		content,
-		visible,
-		onClickOutside: handleClickOutside,
-		placement: position,
-		offset,
-		interactive: true,
-		duration: 0,
-		appendTo: () => document.body,
-		disabled: isDisabled,
-		zIndex: 1e4,
-		maxWidth: "none",
-		children: /* @__PURE__ */ jsx(DropdownTriggerWrapper, {
-			onClick: handleClick,
-			$isOpen: visible,
-			$fillWidth: fillWidth,
-			children
+/** The region column, capped to the room on screen so only the body scrolls. */
+var Layout = /*#__PURE__*/ styled("div")({
+	name: "Layout",
+	class: "gx-Dropdown-Layout-l1bgy4cf",
+	propsAsIs: false
+});
+/** The pinned header region. */
+var Header = /*#__PURE__*/ styled("div")({
+	name: "Header",
+	class: "gx-Dropdown-Header-hfdzgmt",
+	propsAsIs: false
+});
+/** The pinned footer region. */
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Dropdown-Footer-f1ffkeig",
+	propsAsIs: false
+});
+/** The body's ScrollArea takes the height left under the cap, and scrolls. */
+var BODY_CSS = "gx-Dropdown-BODY_CSS-b1vl6aed";
+/** `undefined`, `null` and `false` leave a region out. */
+function isPresent(slot) {
+	return slot !== void 0 && slot !== null && slot !== false;
+}
+/** A region's content: a function is called with `{ close }`; a string or number becomes `Text`. */
+function renderRegion(slot, region, args) {
+	const value = typeof slot === "function" ? slot(args) : slot;
+	if (typeof value === "string" || typeof value === "number") return /* @__PURE__ */ jsx(Box, {
+		padding: 8,
+		children: /* @__PURE__ */ jsx(Text, {
+			...DROPDOWN_REGION_TO_TEXT_PROPS_MAP[region],
+			children: value
 		})
 	});
-};
+	return value;
+}
+/** A click-opened anchored panel with a pinned header, a scrolling body and a pinned footer. */
+var Dropdown = forwardRef(function Dropdown({ children, header, body, footer, variant = "BASE", hasSurface = true, placement = Placement.BOTTOM_START, shouldMatchTriggerWidth = false, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	const args = useMemo(() => ({ close }), [close]);
+	const panel = /* @__PURE__ */ jsxs(Layout, { children: [
+		isPresent(header) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Header, { children: renderRegion(header, "header", args) }), /* @__PURE__ */ jsx(Divider, {})] }),
+		/* @__PURE__ */ jsx(ScrollArea, {
+			className: BODY_CSS,
+			children: /* @__PURE__ */ jsx(Box, {
+				padding: 4,
+				children: renderRegion(body, "body", args)
+			})
+		}),
+		isPresent(footer) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(Footer, { children: renderRegion(footer, "footer", args) })] })
+	] });
+	return /* @__PURE__ */ jsx(Popover, {
+		...rest,
+		ref,
+		trigger: PopoverTrigger.CLICK,
+		role: PopoverRole.DIALOG,
+		variant: DROPDOWN_VARIANT_TO_POPOVER_VARIANT_MAP[variant],
+		hasSurface,
+		placement,
+		shouldMatchTriggerWidth,
+		isOpen,
+		onOpenChange: setOpen,
+		isDisabled,
+		...ariaLabel === void 0 ? {} : { ariaLabel },
+		...id === void 0 ? {} : { id },
+		...className === void 0 ? {} : { className },
+		...style === void 0 ? {} : { style },
+		body: panel,
+		children
+	});
+});
+Dropdown.displayName = "Dropdown";
 //#endregion
-export { DropdownPosition, DropdownTrigger, DropdownVariant, Dropdown as default };
+export { DropdownVariant, Dropdown as default };

package/dist/editor/CodeEditor.d.ts

@@ -1,49 +1,128 @@
-import { Extension } from "@codemirror/state";
-import { LanguageName } from "@uiw/codemirror-extensions-langs";
-import { GalaxyTheme, Theme } from "../theme/types";
-/** Background treatment of the editor surface. */
+/**
+ * The multi-line code editing field: a SQL query, a JSON or YAML config, a Python transform. It is
+ * CodeMirror 6 in DLS tokens: the input frame (surface `variant`, hairline, error, read-only; the
+ * frame stays at rest on hover and focus, where the caret and selection show focus), mono type, syntax colors that match `CodeBlock`, themed gutters, search and
+ * completion popups. It holds a string with `value` / `defaultValue` / `onChange`, calls
+ * `onExecute` on Cmd/Ctrl+Enter, and takes extra CodeMirror `extensions`.
+ *
+ * Opt-in subpath (`@galaxy-io/dls/editor/*`): it imports only the optional CodeMirror peers, and
+ * every CodeMirror call happens inside functions and hooks, so nothing runs at module scope and
+ * wyw never evaluates CodeMirror while extracting CSS. Grammars load lazily after mount.
+ *
+ * Replaces 1.x `CodeEditor` (`content` → `value`, `lang` → `language`, `noLineNumbers` →
+ * `hasLineNumbers`, `customExtensions` → `extensions`, `noBorder` → `isGhost`; `borderRadius`,
+ * `padding` and the theme helper exports are gone).
+ */
+import type { Extension } from "@codemirror/state";
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Resting fill of the editor frame (Constitution V-A surface set; 1.x members). 1.x `noBorder` is `isGhost`. */
 export declare enum CodeEditorVariant {
+    /** `background.base`. */
     BASE = "BASE",
+    /** `background.primary`. The default. */
     PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
     SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
     TERTIARY = "TERTIARY"
 }
-/** A CodeMirror language name — "sql", "json", "python", … */
-export type CodeEditorLanguage = LanguageName;
-export type CodeEditorProps = {
-    /** Editor contents. Controlled — pair it with `onChange`. */
-    content: string;
-    /** Shown when `content` is empty. */
-    placeholder?: string;
-    /** Syntax highlighting mode. Plain text when unset. */
-    lang?: CodeEditorLanguage;
-    /** Render contents without allowing edits. */
-    isReadOnly?: boolean;
-    /** Hide the line-number gutter. */
-    noLineNumbers?: boolean;
-    /** Extra CodeMirror extensions — decorations, keymaps, autocomplete sources. */
-    customExtensions?: Extension[];
-    /** Called with the full document on every keystroke. */
+/** Grammar used to highlight and edit the document. The `CodeBlockLanguage` set minus GRAPHQL. */
+export declare enum CodeEditorLanguage {
+    /** No grammar: unhighlighted text. */
+    PLAIN = "PLAIN",
+    /** Shell scripts and commands. */
+    BASH = "BASH",
+    /** CSS. */
+    CSS = "CSS",
+    /** Go. */
+    GO = "GO",
+    /** HTML. */
+    HTML = "HTML",
+    /** JavaScript. */
+    JAVASCRIPT = "JAVASCRIPT",
+    /** JSON. */
+    JSON = "JSON",
+    /** JavaScript with JSX. */
+    JSX = "JSX",
+    /** Markdown. */
+    MARKDOWN = "MARKDOWN",
+    /** Protocol Buffers. */
+    PROTOBUF = "PROTOBUF",
+    /** Python. */
+    PYTHON = "PYTHON",
+    /** Rust. */
+    RUST = "RUST",
+    /** SQL. */
+    SQL = "SQL",
+    /** TOML. */
+    TOML = "TOML",
+    /** TypeScript with JSX. */
+    TSX = "TSX",
+    /** TypeScript. */
+    TYPESCRIPT = "TYPESCRIPT",
+    /** YAML. */
+    YAML = "YAML"
+}
+export interface CodeEditorProps extends AriaAttributes {
+    /** Controlled document. Pass it with `onChange`. */
+    value?: string;
+    /**
+     * Initial document while uncontrolled.
+     * @default ""
+     */
+    defaultValue?: string;
+    /** Called with the whole document after every edit. */
     onChange?: (value: string) => void;
-    /** Called on Cmd/Ctrl+Enter — the "run this" shortcut. */
-    onExecute?: () => void;
-    /** A number is px. */
-    borderRadius?: string | number;
-    /** Drop the hairline border. */
-    noBorder?: boolean;
-    /** Inset around the content area. A number is px. */
-    padding?: React.CSSProperties["padding"];
-    /** @default CodeEditorVariant.PRIMARY */
+    /** Called with the document on Cmd+Enter (macOS) or Ctrl+Enter, the "run this" shortcut. Not called while read-only. */
+    onExecute?: (value: string) => void;
+    /**
+     * Grammar for highlighting, indentation and bracket rules. `PLAIN` edits unhighlighted text.
+     * @default CodeEditorLanguage.PLAIN
+     */
+    language?: CodeEditorLanguage;
+    /** Hint shown while the document is empty. It is never the label. */
+    placeholder?: string;
+    /**
+     * Resting fill of the frame, from the surface set. Ignored with `isGhost`.
+     * @default CodeEditorVariant.PRIMARY
+     */
     variant?: CodeEditorVariant;
-};
-export declare function createSearchPanelThemeExtension(theme: Theme): Extension;
-export declare function createCodeMirrorThemeExtension(theme: Theme, activeTheme: Exclude<GalaxyTheme, GalaxyTheme.SYSTEM>, variant: CodeEditorVariant, isReadOnly?: boolean): Extension;
-/**
- * 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.
- */
-declare const CodeEditor: ({ content, placeholder, lang, customExtensions, onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant, }: CodeEditorProps) => import("react").JSX.Element;
+    /**
+     * Ghost frame: no fill and no hairline, on hover and focus too (only an error draws the
+     * hairline). 1.x `noBorder`. For an editor set into a panel that already frames it. The
+     * line-number gutter is painted `background.primary` so scrolled code passes under it; on another
+     * surface, set `--gx-code-editor-fill` (through `style`) to that surface.
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Show the line-number gutter (with fold markers).
+     * @default false
+     */
+    hasLineNumbers?: boolean;
+    /**
+     * Focusable, selectable and searchable, but not editable.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Error border and `aria-invalid`. Inside a `Field` with an `error`, it is on automatically.
+     * @default false
+     */
+    isError?: boolean;
+    /** Extra CodeMirror extensions (completion sources, decorations, keymaps, other grammars), applied after the DLS ones. Memoize the array. */
+    extensions?: Extension[];
+    /** Accessible name when there is no visible label (no wrapping `Field` with a `label`). */
+    ariaLabel?: string;
+    /** DOM id of the editable content element. A wrapping `Field`'s id wins. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>` (the frame). */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root (the frame). */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The multi-line code editor: CodeMirror 6 in the DLS input frame. */
+declare const CodeEditor: import("react").ForwardRefExoticComponent<CodeEditorProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CodeEditor;