@gooddata/sdk-ui-kit 11.52.0 → 11.53.0-alpha.1

package/esm/@ui/UiConfigEditor/ConfigEditorToolbar.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type ConfigEditorLanguage } from "./configEditorLanguage.js";
+import { type IUiConfigEditorContextMenuProps, type IUiConfigEditorLabels } from "./types.js";
+interface IConfigEditorToolbarProps {
+    languages: ConfigEditorLanguage[];
+    displayLanguage: ConfigEditorLanguage;
+    /** Called when the user picks a language on this toolbar (as opposed to a remote prop change). */
+    onSelectLanguage: (next: ConfigEditorLanguage) => void;
+    labels: IUiConfigEditorLabels | undefined;
+    /** `undefined` when there is nothing to re-format, which disables the action. */
+    canAutoFormat: boolean;
+    onAutoFormat: () => void;
+    renderContextMenu?: (props: IUiConfigEditorContextMenuProps) => ReactNode;
+    readOnly: boolean;
+    disabled: boolean;
+    /** Scoped to the editor instance so several editors' radio groups do not merge. */
+    languageGroupName: string;
+    contextMenuButtonId: string;
+}
+/**
+ * The editor's fixed-height toolbar: the language radio group (only when more than one language is
+ * offered), the Auto-format action, and the optional context-menu button with its popover.
+ */
+export declare function ConfigEditorToolbar({ languages, displayLanguage, onSelectLanguage, labels, canAutoFormat, onAutoFormat, renderContextMenu, readOnly, disabled, languageGroupName, contextMenuButtonId }: IConfigEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfigEditorToolbar.d.ts.map

package/esm/@ui/UiConfigEditor/ConfigEditorToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigEditorToolbar.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiConfigEditor/ConfigEditorToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAQjD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,KAAK,+BAA+B,EAAE,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAI9F,UAAU,yBAAyB;IAC/B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,eAAe,EAAE,oBAAoB,CAAC;IACtC,kGAAkG;IAClG,gBAAgB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC1C,iFAAiF;IACjF,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;CAC/B;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,mBAAmB,EACtB,EAAE,yBAAyB,2CAmF3B"}

package/esm/@ui/UiConfigEditor/ConfigEditorToolbar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bem } from "../@utils/bem.js";
+import { UiButton } from "../UiButton/UiButton.js";
+import { UiDropdown } from "../UiDropdown/UiDropdown.js";
+import { UiIconButton } from "../UiIconButton/UiIconButton.js";
+import { UiRadio } from "../UiRadio/UiRadio.js";
+const { e } = bem("gd-ui-kit-config-editor");
+/**
+ * The editor's fixed-height toolbar: the language radio group (only when more than one language is
+ * offered), the Auto-format action, and the optional context-menu button with its popover.
+ */
+export function ConfigEditorToolbar({ languages, displayLanguage, onSelectLanguage, labels, canAutoFormat, onAutoFormat, renderContextMenu, readOnly, disabled, languageGroupName, contextMenuButtonId, }) {
+    const languageLabel = (language) => labels?.languages?.[language] ?? language.toUpperCase();
+    return (_jsxs("div", { className: e("toolbar"), children: [languages.length > 1 ? (_jsx("div", { className: e("languages"), role: "radiogroup", "aria-label": labels?.languageSwitcher ?? "Editor language", children: languages.map((radioLanguage) => (_jsx(UiRadio, { 
+                    // One `name` across all of them, so they behave as one native radio
+                    // group: arrow keys move between them and only one can be chosen.
+                    name: languageGroupName, value: radioLanguage, label: languageLabel(radioLanguage), checked: displayLanguage === radioLanguage, disabled: disabled, onChange: () => onSelectLanguage(radioLanguage), dataTestId: `s-config-editor-language-${radioLanguage}` }, radioLanguage))) })) : null, _jsxs("div", { className: e("actions", { withMenu: !!renderContextMenu }), children: [
+                    _jsx(UiButton, { size: "medium", variant: "linkDimmed", label: labels?.autoFormat ?? "Auto-format", 
+                        // Nothing to re-format when the draft is blank or cannot be parsed, so the
+                        // action is disabled rather than silently doing nothing.
+                        isDisabled: disabled || readOnly || !canAutoFormat, onClick: onAutoFormat, dataTestId: "s-config-editor-auto-format" }), renderContextMenu ? (_jsx(UiDropdown, { placement: "bottom-end", 
+                        // The dropdown positions against the button, but the design hangs the
+                        // menu from the toolbar's bottom edge: the 32px button centered in the
+                        // 36px toolbar leaves 2px below it, plus the divider's 1px.
+                        offset: 3, closeOnEscape: true, closeOnOutsideClick: true, autofocusOnOpen: true, 
+                        // The popup role is deliberately left at its default. Setting it to
+                        // "menu" would put `role="menu"` on the positioning wrapper as well, and
+                        // a menu nested directly inside another menu is invalid — the content is
+                        // expected to be a `UiMenu`, which brings that role itself.
+                        renderButton: ({ ref, toggleDropdown, isOpen, ariaAttributes }) => (_jsx(UiIconButton, { ref: ref, id: contextMenuButtonId, icon: "ellipsis", size: "medium", variant: "tertiary", isActive: isOpen, isDisabled: disabled, onClick: toggleDropdown, label: labels?.contextMenu ?? "More actions", accessibilityConfig: { ariaLabel: labels?.contextMenu ?? "More actions" }, ariaAttributes: ariaAttributes, dataTestId: "s-config-editor-context-menu-button" })), renderBody: ({ closeDropdown, ariaAttributes }) => renderContextMenu({
+                            onClose: closeDropdown,
+                            ariaAttributes: {
+                                ...ariaAttributes,
+                                "aria-labelledby": contextMenuButtonId,
+                            },
+                        }) })) : null] })
+        ] }));
+}

package/esm/@ui/UiConfigEditor/UiConfigEditor.d.ts

@@ -0,0 +1,20 @@
+import { type IUiConfigEditorProps } from "./types.js";
+/**
+ * A config editor: a CodeMirror source editor with syntax highlighting, line numbers and a lint
+ * gutter, plus a toolbar to re-format the text and — when more than one language is offered — to
+ * read and edit the same value as either JSON or YAML.
+ *
+ * The primary language is always the value in and the value out. Any other offered language is a
+ * convenience projection converted on the fly, so a caller never has to know which language the user
+ * happens to be looking at. A single-language editor never converts at all: what is typed is what is
+ * emitted, byte for byte, so YAML comments and formatting the caller cares about survive.
+ *
+ * Switching language re-emits the value in canonical form, which is what makes switching to YAML and
+ * back re-format the JSON. The canonical form matches the `JSON.stringify(value, null, 4)` that
+ * callers conventionally seed the field with, so a switch on an untouched value is a no-op rather
+ * than something that marks a form dirty.
+ *
+ * @internal
+ */
+export declare function UiConfigEditor({ value, onChange, primaryLanguage, languages, language, onLanguageChange, completionSource, labels, renderContextMenu, label, placeholder, readOnly, disabled, rows, dataTestId, editorRef }: IUiConfigEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UiConfigEditor.d.ts.map

package/esm/@ui/UiConfigEditor/UiConfigEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiConfigEditor.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiConfigEditor/UiConfigEditor.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,eAAwB,EACxB,SAA4B,EAC5B,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,IAAS,EACT,UAAU,EACV,SAAS,EACZ,EAAE,oBAAoB,2CAwQtB"}

package/esm/@ui/UiConfigEditor/UiConfigEditor.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { forceLinting, lintGutter } from "@codemirror/lint";
+import { Compartment } from "@codemirror/state";
+import { lineNumbers } from "@codemirror/view";
+import { createSyntaxErrorLinter } from "../../syntaxHighlightingInput/syntaxErrorLinter.js";
+import { SyntaxHighlightingInput } from "../../syntaxHighlightingInput/SyntaxHighlightingInput.js";
+import { yamlPositionAt } from "../../syntaxHighlightingInput/yamlPosition.js";
+import { bem } from "../@utils/bem.js";
+import { useLanguageGrammar } from "./configEditorGrammars.js";
+import { themedHighlighting } from "./configEditorHighlighting.js";
+import { beautify, convertText, isProjectable } from "./configEditorLanguage.js";
+import { ConfigEditorToolbar } from "./ConfigEditorToolbar.js";
+const { b, e } = bem("gd-ui-kit-config-editor");
+/**
+ * A config editor: a CodeMirror source editor with syntax highlighting, line numbers and a lint
+ * gutter, plus a toolbar to re-format the text and — when more than one language is offered — to
+ * read and edit the same value as either JSON or YAML.
+ *
+ * The primary language is always the value in and the value out. Any other offered language is a
+ * convenience projection converted on the fly, so a caller never has to know which language the user
+ * happens to be looking at. A single-language editor never converts at all: what is typed is what is
+ * emitted, byte for byte, so YAML comments and formatting the caller cares about survive.
+ *
+ * Switching language re-emits the value in canonical form, which is what makes switching to YAML and
+ * back re-format the JSON. The canonical form matches the `JSON.stringify(value, null, 4)` that
+ * callers conventionally seed the field with, so a switch on an untouched value is a no-op rather
+ * than something that marks a form dirty.
+ *
+ * @internal
+ */
+export function UiConfigEditor({ value, onChange, primaryLanguage = "json", languages = ["json", "yaml"], language, onLanguageChange, completionSource, labels, renderContextMenu, label, placeholder, readOnly = false, disabled = false, rows = 12, dataTestId, editorRef, }) {
+    // Scoped to this instance: several editors can sit on one page, and a shared radio `name` would
+    // make their language switchers fight over the same group.
+    const instanceId = useId();
+    const languageGroupName = `config-editor-language-${instanceId}`;
+    const contextMenuButtonId = `config-editor-menu-button-${instanceId}`;
+    // Only a JSON primary may display another language (see `languages` in types.ts), and only
+    // one the caller actually offers — a shared, persisted `language` must not trap a
+    // single-language editor in a projection it never presents a way out of. Anything else falls
+    // back to the primary rather than letting an unsound display in through the back door.
+    const displayLanguage = primaryLanguage === "json" &&
+        language !== undefined &&
+        languages.length > 1 &&
+        languages.includes(language)
+        ? language
+        : primaryLanguage;
+    // The switcher needs the full controlled pair: without `language` a selection could never take
+    // effect, and the radios would appear to accept it and immediately snap back.
+    const isSwitchable = primaryLanguage === "json" && language !== undefined && !!onLanguageChange;
+    // The text actually on screen, in the displayed language. `value` stays primary regardless.
+    const [draft, setDraft] = useState(() => convertText(value, primaryLanguage, displayLanguage));
+    // Bumped to remount the editor when a language switch rewrites the document; a switch that
+    // leaves the text byte-identical (an unprojectable draft) keeps the editor instance, so the
+    // caret and undo history survive. The compartment swaps the grammar into the live view then.
+    const [editorEpoch, setEditorEpoch] = useState(0);
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    // The primary-language text last handed to `onChange`, so a controlled parent echoing it back is
+    // not mistaken for an outside edit that should overwrite what the user is typing.
+    const lastEmittedRef = useRef(value);
+    const lastLanguageRef = useRef(displayLanguage);
+    // Set when the language change came from this editor's own switcher. The caller may share the
+    // language across several mounted editors, and only the one the user actually interacted with
+    // may rewrite its value in the new canonical form — the others only re-render their view.
+    const languageChangeIsLocalRef = useRef(false);
+    const viewRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // Re-derive the draft when the language changes, or when `value` changes from the outside (an
+    // example applied, a dialog reset). useLayoutEffect so the new text is in place before paint.
+    useLayoutEffect(() => {
+        const languageChanged = lastLanguageRef.current !== displayLanguage;
+        if (!languageChanged && value === lastEmittedRef.current) {
+            return;
+        }
+        lastLanguageRef.current = displayLanguage;
+        const isLocalLanguageChange = languageChanged && languageChangeIsLocalRef.current;
+        languageChangeIsLocalRef.current = false;
+        const nextDraft = convertText(value, primaryLanguage, displayLanguage);
+        lastEmittedRef.current = value;
+        if (languageChanged && (nextDraft !== draftRef.current || completionSource !== undefined)) {
+            // A rewritten document remounts the editor: undo has nothing coherent to return to.
+            // An identical document keeps the running editor (see `editorEpoch`) — unless a
+            // completion source is in play, whose wiring is mount-only and per-language, so
+            // keeping the instance would leave the old language's completion behavior active.
+            setEditorEpoch((epoch) => epoch + 1);
+        }
+        setDraft(nextDraft);
+        // Report the value in the new language's canonical form — projecting through YAML and back
+        // is what re-formats sloppy JSON. Done explicitly: the editor's own value sync is annotated
+        // `Transaction.remote`, which the change handler skips.
+        //
+        // Only for a switch made on this editor, though: a caller may share the language across
+        // several mounted editors, and the ones that did not participate in the interaction must
+        // not rewrite their values (and dirty their forms) as a side effect.
+        //
+        // Only when the value really parses: text the user is midway through breaking has no
+        // faithful projection, and re-reading it in the other language would change its meaning.
+        //
+        // And never while the value is not the user's to change: in those modes the toggle is only a
+        // way to read the value in another language, so it must not rewrite it.
+        if (!isLocalLanguageChange || !isProjectable(value, primaryLanguage) || readOnly || disabled) {
+            return;
+        }
+        const nextValue = convertText(nextDraft, displayLanguage, primaryLanguage);
+        if (nextValue !== value) {
+            lastEmittedRef.current = nextValue;
+            onChangeRef.current(nextValue);
+        }
+    }, [value, primaryLanguage, displayLanguage, readOnly, disabled, completionSource]);
+    const emit = useCallback((nextDraft) => {
+        const nextValue = convertText(nextDraft, displayLanguage, primaryLanguage);
+        lastEmittedRef.current = nextValue;
+        onChange(nextValue);
+    }, [displayLanguage, primaryLanguage, onChange]);
+    // Only real edits arrive here: the editor's change handler skips the remote-annotated value
+    // sync, so this component's own draft pushes never echo back as changes.
+    const handleDraftChange = useCallback((nextDraft) => {
+        setDraft(nextDraft);
+        emit(nextDraft);
+    }, [emit]);
+    const beautified = useMemo(() => beautify(draft, displayLanguage), [draft, displayLanguage]);
+    // Already-formatted text disables the action too: emitting an identical value would only make
+    // the caller believe something changed — an As-Code dialog would mark its form dirty.
+    const canAutoFormat = beautified !== undefined && beautified !== draft;
+    const handleBeautify = useCallback(() => {
+        if (beautified === undefined || beautified === draft) {
+            return;
+        }
+        setDraft(beautified);
+        emit(beautified);
+    }, [beautified, draft, emit]);
+    const handleSelectLanguage = useCallback((next) => {
+        // Marks the coming language-prop change as this editor's own interaction, so the
+        // canonical re-emit runs here and not in other editors sharing the language.
+        languageChangeIsLocalRef.current = true;
+        onLanguageChange?.(next);
+    }, [onLanguageChange]);
+    // The handle is rebuilt when editability changes rather than reading a ref written during
+    // render: an abandoned render must not be able to leave a speculative value behind. Callers
+    // read `ref.current` at call time, so a new handle identity costs them nothing.
+    useImperativeHandle(editorRef, () => ({
+        insertAtCursor: (text) => {
+            const view = viewRef.current;
+            // CodeMirror's non-editable state only blocks user input, not programmatic
+            // dispatches, so a read-only or in-flight editor has to be refused here.
+            if (!view || readOnly || disabled) {
+                return;
+            }
+            const { from, to } = view.state.selection.main;
+            // CodeMirror places the caret and keeps the insertion in view itself; the resulting
+            // document change flows back out through the editor's own change handler.
+            view.dispatch({
+                changes: { from, to, insert: text },
+                selection: { anchor: from + text.length },
+                scrollIntoView: true,
+            });
+            view.focus();
+        },
+        focus: () => viewRef.current?.focus(),
+    }), [readOnly, disabled]);
+    // Completion availability is fixed when the editor mounts: the wrapper is installed only if
+    // a source is present then, and it dereferences the live ref, so removing the source later
+    // would make an invoked completion throw while adding one would do nothing.
+    const hasCompletionRef = useRef(completionSource !== undefined);
+    useEffect(() => {
+        const hasCompletion = completionSource !== undefined;
+        if (hasCompletionRef.current !== hasCompletion) {
+            hasCompletionRef.current = hasCompletion;
+            setEditorEpoch((epoch) => epoch + 1);
+        }
+    }, [completionSource]);
+    const grammar = useLanguageGrammar(displayLanguage);
+    // The grammar lives in a compartment so a first-time load can be injected into the running
+    // view: remounting instead would throw away whatever the user did while the chunk was on the
+    // wire — selection, undo history, focus — and their next keystroke would land at offset 0.
+    const grammarCompartmentRef = useRef(new Compartment());
+    useEffect(() => {
+        const view = viewRef.current;
+        if (view) {
+            // `grammar ?? []` and not a skip: switching to a language whose grammar is still
+            // loading must clear the previous one, or the document keeps being parsed, highlighted
+            // and linted as the old language until the chunk arrives — indefinitely, if it fails.
+            view.dispatch({
+                effects: grammarCompartmentRef.current.reconfigure(grammar ?? []),
+            });
+            // The reconfigure changes neither the document nor the lint configuration, so the
+            // linter would not run again on its own — stale diagnostics from the previous grammar
+            // (or from the grammar-less tree) would stay in the gutter.
+            forceLinting(view);
+        }
+    }, [grammar]);
+    // Extensions are read once when CodeMirror initialises, so the editor is remounted (keyed on
+    // language) to swap grammars. Losing the undo history is reasonable there: the document was
+    // just rewritten in a different language, so there is nothing coherent left to undo into.
+    const syntaxErrorMessage = labels?.syntaxError;
+    const extensions = useMemo(() => [
+        grammarCompartmentRef.current.of(grammar ?? []),
+        themedHighlighting,
+        lineNumbers(),
+        lintGutter(),
+        ...(syntaxErrorMessage ? [createSyntaxErrorLinter(syntaxErrorMessage)] : []),
+    ], 
+    // Keyed on `grammar` (which changes with the language) rather than the language itself: a
+    // running view gets a late-arriving grammar through the effect above, but any later remount
+    // (a completion-source toggle, say) is built from this memo — stale, it would mount an
+    // editor with no grammar at all.
+    [grammar, syntaxErrorMessage]);
+    // The completion source speaks in terms of the document's shape — the mapping keys enclosing the
+    // position — so the raw CodeMirror context is resolved into that here. YAML only: the position
+    // reader walks a YAML parse tree, and no JSON consumer has a completion schema.
+    const onCompletion = useMemo(() => completionSource && displayLanguage === "yaml"
+        ? (context) => completionSource(context, yamlPositionAt(context.state, context.pos))
+        : undefined, [completionSource, displayLanguage]);
+    return (_jsxs("div", { className: b({ disabled, readOnly }), style: { "--config-editor-rows": rows }, "data-testid": dataTestId, children: [
+            _jsx(ConfigEditorToolbar, { languages: isSwitchable ? languages : [], displayLanguage: displayLanguage, onSelectLanguage: handleSelectLanguage, labels: labels, canAutoFormat: canAutoFormat, onAutoFormat: handleBeautify, renderContextMenu: renderContextMenu, readOnly: readOnly, disabled: disabled, languageGroupName: languageGroupName, contextMenuButtonId: contextMenuButtonId }), _jsx("div", { className: e("editor"), children: _jsx(SyntaxHighlightingInput, { value: draft, onChange: handleDraftChange, 
+                    // An external replace means a new document here (an applied example, a dialog
+                    // reset), so the cursor goes to its end — a stale clamped offset would drop the
+                    // next inserted variable at the very start of the fresh text.
+                    externalChangeSelection: "end", onCompletion: onCompletion, label: label ?? "Code editor", placeholder: placeholder, 
+                    // CodeMirror's non-editable state keeps the content focusable and selectable,
+                    // which is what both the read-only view and an in-flight save want.
+                    disabled: readOnly || disabled, extensions: extensions, onApi: (view) => {
+                        viewRef.current = view;
+                    } }, editorEpoch) })
+        ] }));
+}

package/esm/@ui/UiConfigEditor/configEditorGrammars.d.ts

@@ -0,0 +1,15 @@
+import { type Extension } from "@codemirror/state";
+import { type ConfigEditorLanguage } from "./configEditorLanguage.js";
+/**
+ * Loads the grammar(s) `UiConfigEditor` needs for the given languages ahead of rendering one.
+ *
+ * Purely an optimization: the editor loads its grammar itself when it first renders, mounting
+ * without highlighting for the moment that takes. Callers that know an editor is coming (and
+ * tests that assert on a fully initialized editor synchronously) can await this instead.
+ *
+ * @internal
+ */
+export declare function preloadUiConfigEditorGrammars(languages?: ConfigEditorLanguage[]): Promise<void>;
+/** The grammar for `language`, loading it on first use; `undefined` until it has arrived. */
+export declare function useLanguageGrammar(language: ConfigEditorLanguage): Extension | undefined;
+//# sourceMappingURL=configEditorGrammars.d.ts.map

package/esm/@ui/UiConfigEditor/configEditorGrammars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configEditorGrammars.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiConfigEditor/configEditorGrammars.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AActE;;;;;;;;GAQG;AACH,wBAAsB,6BAA6B,CAC/C,SAAS,GAAE,oBAAoB,EAAqB,GACrD,OAAO,CAAC,IAAI,CAAC,CAMf;AAED,6FAA6F;AAC7F,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,SAAS,GAAG,SAAS,CAwBxF"}

package/esm/@ui/UiConfigEditor/configEditorGrammars.js

@@ -0,0 +1,50 @@
+// (C) 2026 GoodData Corporation
+import { useEffect, useState } from "react";
+/**
+ * The grammars are loaded on demand and cached for the page's lifetime: importing them statically
+ * would make every consumer carry both, and a single-language editor — the catalog's YAML-only
+ * as-code dialogs, say — would ship a JSON grammar it can never display.
+ */
+const grammarLoaders = {
+    json: async () => (await import("@codemirror/lang-json")).json(),
+    yaml: async () => (await import("@codemirror/lang-yaml")).yaml(),
+};
+const grammarCache = new Map();
+/**
+ * Loads the grammar(s) `UiConfigEditor` needs for the given languages ahead of rendering one.
+ *
+ * Purely an optimization: the editor loads its grammar itself when it first renders, mounting
+ * without highlighting for the moment that takes. Callers that know an editor is coming (and
+ * tests that assert on a fully initialized editor synchronously) can await this instead.
+ *
+ * @internal
+ */
+export async function preloadUiConfigEditorGrammars(languages = ["json", "yaml"]) {
+    await Promise.all(languages.map(async (language) => {
+        grammarCache.set(language, await grammarLoaders[language]());
+    }));
+}
+/** The grammar for `language`, loading it on first use; `undefined` until it has arrived. */
+export function useLanguageGrammar(language) {
+    const [, setLoadedCount] = useState(0);
+    useEffect(() => {
+        if (grammarCache.has(language)) {
+            return undefined;
+        }
+        let disposed = false;
+        void grammarLoaders[language]()
+            .then((grammar) => {
+            grammarCache.set(language, grammar);
+            if (!disposed) {
+                setLoadedCount((count) => count + 1);
+            }
+        })
+            // A failed chunk load leaves the editor plain but working; nothing is cached, so the
+            // next request for this language retries the import.
+            .catch(() => { });
+        return () => {
+            disposed = true;
+        };
+    }, [language]);
+    return grammarCache.get(language);
+}

package/esm/@ui/UiConfigEditor/configEditorHighlighting.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `Prec.highest` so this wins over the shared highlight style that `useCodemirror` installs: with
+ * equal precedence the earlier extension takes effect, and that one is added first.
+ */
+export declare const themedHighlighting: import("@codemirror/state").Extension;
+//# sourceMappingURL=configEditorHighlighting.d.ts.map

package/esm/@ui/UiConfigEditor/configEditorHighlighting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configEditorHighlighting.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiConfigEditor/configEditorHighlighting.ts"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,uCAAyD,CAAC"}

package/esm/@ui/UiConfigEditor/configEditorHighlighting.js

@@ -0,0 +1,31 @@
+// (C) 2026 GoodData Corporation
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { Prec } from "@codemirror/state";
+import { tags as t } from "@lezer/highlight";
+/**
+ * Token colors expressed as theme variables, so the editor stays legible on a dark theme.
+ *
+ * The shared highlight style in `useCodemirror` hardcodes light-theme hex colors, which leaves dark
+ * strings on a dark background once a theme flips the surface (the editor's background is itself
+ * theme-driven). Only the complementary scale and the semantic palette are safe to lean on here:
+ * both invert with the theme, so foreground stays foreground.
+ */
+const themedHighlightStyle = HighlightStyle.define([
+    // Keys read as the primary content of a config file, so they take the foreground colour.
+    {
+        tag: [t.propertyName, t.definition(t.propertyName), t.variableName],
+        color: "var(--gd-palette-complementary-8)",
+    },
+    { tag: [t.string, t.special(t.string)], color: "var(--gd-palette-primary-base)" },
+    {
+        tag: [t.number, t.bool, t.null, t.atom, t.keyword],
+        color: "var(--gd-palette-warning-base)",
+    },
+    { tag: [t.punctuation, t.separator, t.bracket, t.meta], color: "var(--gd-palette-complementary-6)" },
+    { tag: t.comment, color: "var(--gd-palette-complementary-6)", fontStyle: "italic" },
+]);
+/**
+ * `Prec.highest` so this wins over the shared highlight style that `useCodemirror` installs: with
+ * equal precedence the earlier extension takes effect, and that one is added first.
+ */
+export const themedHighlighting = Prec.highest(syntaxHighlighting(themedHighlightStyle));

package/esm/@ui/UiConfigEditor/configEditorLanguage.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A language the config editor can display and emit. Every editor instance has a primary language —
+ * the one its value is written in — and may offer the other as an on-the-fly projection of it.
+ *
+ * @internal
+ */
+export type ConfigEditorLanguage = "json" | "yaml";
+/**
+ * Whether `text` is a value in `language` that can be projected into another language and back.
+ *
+ * Text the user is midway through breaking is not: re-reading it in another language could give it a
+ * different meaning (`foo` is broken JSON but a valid YAML string), so switching language must leave
+ * it alone rather than quietly turning it into something that parses. Neither is a comment-only YAML
+ * document, whose projection would be empty — losing the comments.
+ *
+ * @internal
+ */
+export declare function isProjectable(text: string, language: ConfigEditorLanguage): boolean;
+/**
+ * Converts text from one of the editor's languages into another.
+ *
+ * Unconvertible text is passed through verbatim rather than swallowed — unparseable text, and a
+ * comment-only YAML document, whose projection would be empty. In the display direction that keeps
+ * a language switch from silently discarding what is on screen; in the primary direction it hands
+ * the caller the raw text, whose own validation is what reports the problem while the user is
+ * mid-edit.
+ *
+ * @internal
+ */
+export declare function convertText(text: string, fromLanguage: ConfigEditorLanguage, toLanguage: ConfigEditorLanguage): string;
+/**
+ * Re-formats the displayed text in its own language.
+ *
+ * YAML is re-formatted structurally — indentation and spacing are normalized while comments, blank
+ * lines and scalar styles are kept — so a hand-annotated document is tidied, never stripped.
+ *
+ * Returns `undefined` when there is nothing to format — blank or unparseable input — so the caller
+ * can disable the action instead of offering a no-op.
+ *
+ * @internal
+ */
+export declare function beautify(draft: string, language: ConfigEditorLanguage): string | undefined;
+//# sourceMappingURL=configEditorLanguage.d.ts.map

package/esm/@ui/UiConfigEditor/configEditorLanguage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configEditorLanguage.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiConfigEditor/configEditorLanguage.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;AAmHnD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GAAG,OAAO,CASnF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACvB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,oBAAoB,GACjC,MAAM,CAWR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAgB1F"}