@gooddata/sdk-ui-kit 11.53.0-alpha.0 → 11.53.0-alpha.2

package/esm/syntaxHighlightingInput/hooks/useChangeHandler.js

@@ -1,11 +1,18 @@
-// (C) 2025 GoodData Corporation
+// (C) 2025-2026 GoodData Corporation
 import { useMemo } from "react";
+import { Transaction } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 export function useChangeHandler({ handleChange, handleCursor, }) {
     // Create an extension for handling changes
     const changeHandlerExtension = useMemo(() => {
         return EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
+            // A change whose every transaction is annotated as remote is the value-sync dispatch
+            // from `useCodemirrorChange` echoing the controlled value back in. Reporting it would
+            // hand consumers their own value a second time, so each of them would have to keep
+            // bookkeeping just to tell the echo from a real edit.
+            const isRemoteOnly = update.transactions.length > 0 &&
+                update.transactions.every((tr) => tr.annotation(Transaction.remote));
+            if (update.docChanged && !isRemoteOnly) {
                 handleChange.current?.(update.state.doc.toString());
             }
             if (handleCursor.current && update.selectionSet) {

package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts

@@ -1,5 +1,6 @@
 import { type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
+import { type ExternalChangeSelection } from "./useCodemirrorChange.js";
 import { type IUseEventHandlersProps } from "./useEventHandlers.js";
 export interface IUseCodemirrorProps extends IUseEventHandlersProps {
     value?: string;
@@ -14,8 +15,10 @@ export interface IUseCodemirrorProps extends IUseEventHandlersProps {
     beforeExtensions?: Extension[];
     extensions?: Extension[];
     onApi?: (view: EditorView | null) => void;
+    /** Where the selection goes when the controlled value is replaced from outside. */
+    externalChangeSelection?: ExternalChangeSelection;
 }
-export declare function useCodemirror({ value, label, disabled, autocompletion, placeholderText, extensions, beforeExtensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus }: IUseCodemirrorProps): {
+export declare function useCodemirror({ value, label, disabled, autocompletion, placeholderText, extensions, beforeExtensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus, externalChangeSelection }: IUseCodemirrorProps): {
     editorRef: import("react").RefObject<HTMLDivElement | null>;
     viewRef: import("react").RefObject<EditorView | null>;
 };

package/esm/syntaxHighlightingInput/hooks/useCodemirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirror.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAU7D,OAAO,EAAE,KAAK,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAatF,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACb,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,gBAAgB,CAAC,EAAE,SAAS,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAU,EACV,KAAK,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACV,EAAE,mBAAmB;;;EAkFrB"}
+{"version":3,"file":"useCodemirror.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirror.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAiB,MAAM,kBAAkB,CAAC;AAK7D,OAAO,EAAE,KAAK,uBAAuB,EAAuB,MAAM,0BAA0B,CAAC;AAK7F,OAAO,EAAE,KAAK,sBAAsB,EAAoB,MAAM,uBAAuB,CAAC;AAatF,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE;QACb,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,gBAAgB,CAAC,EAAE,SAAS,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,mFAAmF;IACnF,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACrD;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAU,EACV,KAAK,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,uBAAuB,EAC1B,EAAE,mBAAmB;;;EAkFrB"}

package/esm/syntaxHighlightingInput/hooks/useCodemirror.js

@@ -22,7 +22,7 @@ const customHighlightStyle = HighlightStyle.define([
     { tag: t.standard(t.variableName), color: "#00c18e", fontWeight: "bold" },
     { tag: t.keyword, color: "#ab55a3", fontWeight: "bold" },
 ]);
-export function useCodemirror({ value = "", label, disabled, autocompletion, placeholderText, extensions, beforeExtensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus, }) {
+export function useCodemirror({ value = "", label, disabled, autocompletion, placeholderText, extensions, beforeExtensions, onCompletion, onApi, onKeyDown, onCursor, onChange, onBlur, onFocus, externalChangeSelection, }) {
     const editorRef = useRef(null);
     const viewRef = useRef(null);
     const { handleCompletion, handleChange, handleKeyDown, handleCursor, handleFocus, handleBlur } = useEventHandlers({
@@ -90,7 +90,7 @@ export function useCodemirror({ value = "", label, disabled, autocompletion, pla
         };
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
     // Handle external value changes
-    useCodemirrorChange(viewRef, value);
+    useCodemirrorChange(viewRef, value, externalChangeSelection);
     return {
         editorRef,
         viewRef,

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts

@@ -1,4 +1,15 @@
 import { type RefObject } from "react";
 import { type EditorView } from "@codemirror/view";
-export declare function useCodemirrorChange(viewRef: RefObject<EditorView | null>, value: string): void;
+/**
+ * Where the selection goes when the controlled value is replaced from outside.
+ *
+ * - `"clamp"` keeps the current selection, clamped into the new document's bounds.
+ * - `"end"` puts the cursor at the end of the new document — for editors whose external replaces
+ *   mean "a new document" (an applied example, a re-format), where the old offset is meaningless
+ *   and a subsequent insert-at-cursor should append rather than land at a stale position.
+ *
+ * @internal
+ */
+export type ExternalChangeSelection = "clamp" | "end";
+export declare function useCodemirrorChange(viewRef: RefObject<EditorView | null>, value: string, externalChangeSelection?: ExternalChangeSelection): void;
 //# sourceMappingURL=useCodemirrorChange.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirrorChange.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorChange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,QAoCvF"}
+{"version":3,"file":"useCodemirrorChange.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorChange.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEtD,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,EACrC,KAAK,EAAE,MAAM,EACb,uBAAuB,GAAE,uBAAiC,QAwC7D"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorChange.js

@@ -1,7 +1,7 @@
-// (C) 2025 GoodData Corporation
+// (C) 2025-2026 GoodData Corporation
 import { useEffect } from "react";
 import { EditorSelection, Transaction } from "@codemirror/state";
-export function useCodemirrorChange(viewRef, value) {
+export function useCodemirrorChange(viewRef, value, externalChangeSelection = "clamp") {
     // Handle external value changes
     useEffect(() => {
         const view = viewRef.current;
@@ -13,11 +13,13 @@ export function useCodemirrorChange(viewRef, value) {
             const hasFocus = view.hasFocus;
             const newLength = value.length;
             // Adjust selection to stay within bounds of new content
-            const adjustedSelection = EditorSelection.create(selection.ranges.map((range) => {
-                const from = Math.min(range.from, newLength);
-                const to = Math.min(range.to, newLength);
-                return EditorSelection.range(from, to);
-            }), selection.mainIndex);
+            const adjustedSelection = externalChangeSelection === "end"
+                ? EditorSelection.single(newLength)
+                : EditorSelection.create(selection.ranges.map((range) => {
+                    const from = Math.min(range.from, newLength);
+                    const to = Math.min(range.to, newLength);
+                    return EditorSelection.range(from, to);
+                }), selection.mainIndex);
             view.dispatch({
                 changes: { from: 0, to: currentValue.length, insert: value },
                 selection: adjustedSelection,
@@ -30,5 +32,5 @@ export function useCodemirrorChange(viewRef, value) {
                 view.focus();
             }
         }
-    }, [value, viewRef]);
+    }, [value, viewRef, externalChangeSelection]);
 }

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirrorEditable.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEditable.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO;;EAqB9F"}
+{"version":3,"file":"useCodemirrorEditable.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorEditable.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAU9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO;;EAqB9F"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorEditable.js

@@ -1,11 +1,18 @@
-// (C) 2025 GoodData Corporation
+// (C) 2025-2026 GoodData Corporation
 import { useEffect, useRef } from "react";
-import { Compartment } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
+// `EditorView.editable` only governs the DOM's contenteditable, which blocks typing; keymap
+// commands (Enter, deletions, undo) consult `EditorState.readOnly` instead, so both must flip
+// together or a "read-only" editor still mutates from the keyboard.
+const editableExtensions = (disabled) => [
+    EditorView.editable.of(!disabled),
+    EditorState.readOnly.of(disabled),
+];
 export function useCodemirrorEditable(viewRef, disabled) {
     // Editable compartment
     const editableCompartmentRef = useRef(new Compartment());
-    const editableCompartmentExtension = editableCompartmentRef.current.of(EditorView.editable.of(!disabled));
+    const editableCompartmentExtension = editableCompartmentRef.current.of(editableExtensions(!!disabled));
     // Handle disabled state changes
     useEffect(() => {
         const view = viewRef.current;
@@ -14,7 +21,7 @@ export function useCodemirrorEditable(viewRef, disabled) {
         }
         // Update the editable compartment based on the disabled prop
         view.dispatch({
-            effects: editableCompartmentRef.current.reconfigure(EditorView.editable.of(!disabled)),
+            effects: editableCompartmentRef.current.reconfigure(editableExtensions(!!disabled)),
         });
     }, [disabled, viewRef]);
     return {

package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts

@@ -3,6 +3,6 @@ import { type EditorView } from "@codemirror/view";
 export declare function useCodemirrorKeymap({ handleKeyDown }: {
     handleKeyDown: RefObject<((event: KeyboardEvent, view: EditorView) => boolean) | undefined>;
 }): {
-    keymapExtension: import("@codemirror/state").Extension;
+    keymapExtension: import("@codemirror/state").Extension[];
 };
 //# sourceMappingURL=useCodemirrorKeymap.d.ts.map

package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodemirrorKeymap.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorKeymap.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAE3D,wBAAgB,mBAAmB,CAAC,EAChC,aAAa,EAChB,EAAE;IACC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;CAC/F;;EA0BA"}
+{"version":3,"file":"useCodemirrorKeymap.d.ts","sourceRoot":"","sources":["../../../src/syntaxHighlightingInput/hooks/useCodemirrorKeymap.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAE3D,wBAAgB,mBAAmB,CAAC,EAChC,aAAa,EAChB,EAAE;IACC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;CAC/F;;EA8BA"}

package/esm/syntaxHighlightingInput/hooks/useCodemirrorKeymap.js

@@ -1,31 +1,35 @@
-// (C) 2025 GoodData Corporation
+// (C) 2025-2026 GoodData Corporation
 import { useMemo } from "react";
 import { startCompletion } from "@codemirror/autocomplete";
-import { defaultKeymap, historyKeymap } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { keymap } from "@codemirror/view";
 export function useCodemirrorKeymap({ handleKeyDown, }) {
-    // Keymap extension
+    // Keymap extension. The history state extension comes with it: `historyKeymap` binds the
+    // undo/redo commands, but without `history()` installed they have nothing to operate on.
     const keymapExtension = useMemo(() => {
-        return keymap.of([
-            // Handle custom keydown events
-            {
-                any(view, event) {
-                    return handleKeyDown.current?.(event, view) ?? false;
+        return [
+            history(),
+            keymap.of([
+                // Handle custom keydown events
+                {
+                    any(view, event) {
+                        return handleKeyDown.current?.(event, view) ?? false;
+                    },
                 },
-            },
-            // "Mod" is Ctrl on Windows/Linux, Cmd on macOS
-            {
-                key: "Mod-i",
-                run: startCompletion,
-            },
-            // Ctrl on Windows
-            {
-                key: "Ctrl-i",
-                run: startCompletion,
-            },
-            ...defaultKeymap,
-            ...historyKeymap,
-        ]);
+                // "Mod" is Ctrl on Windows/Linux, Cmd on macOS
+                {
+                    key: "Mod-i",
+                    run: startCompletion,
+                },
+                // Ctrl on Windows
+                {
+                    key: "Ctrl-i",
+                    run: startCompletion,
+                },
+                ...defaultKeymap,
+                ...historyKeymap,
+            ]),
+        ];
     }, [handleKeyDown]);
     return { keymapExtension };
 }

package/esm/syntaxHighlightingInput/syntaxErrorLinter.d.ts

@@ -0,0 +1,24 @@
+import { type Diagnostic } from "@codemirror/lint";
+import { type EditorState } from "@codemirror/state";
+/**
+ * Collects syntax-error diagnostics by walking the parse tree for error nodes.
+ *
+ * A blank document reports nothing: grammars differ on whether emptiness parses (JSON requires a
+ * value, YAML does not), but an editor the user has not typed into yet is not in error — that is
+ * what the caller's own "required" validation says, not the gutter.
+ *
+ * @internal
+ */
+export declare function getSyntaxErrorDiagnostics(state: EditorState, message: string): Diagnostic[];
+/**
+ * Creates a CodeMirror linter extension that reports syntax errors by walking the parse tree for
+ * error nodes.
+ *
+ * Language-agnostic: it reads the tree the language extension already built for highlighting, so it
+ * works for any grammar and costs no extra parse and no extra dependency.
+ *
+ * @param message - localized message shown on each syntax-error diagnostic
+ * @internal
+ */
+export declare function createSyntaxErrorLinter(message: string): import("@codemirror/state").Extension;
+//# sourceMappingURL=syntaxErrorLinter.d.ts.map

package/esm/syntaxHighlightingInput/syntaxErrorLinter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syntaxErrorLinter.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/syntaxErrorLinter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,GAAG,UAAU,EAAE,CA0B3F;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,yCAEtD"}

package/esm/syntaxHighlightingInput/syntaxErrorLinter.js

@@ -0,0 +1,49 @@
+// (C) 2026 GoodData Corporation
+import { syntaxTree } from "@codemirror/language";
+import { linter } from "@codemirror/lint";
+/**
+ * Collects syntax-error diagnostics by walking the parse tree for error nodes.
+ *
+ * A blank document reports nothing: grammars differ on whether emptiness parses (JSON requires a
+ * value, YAML does not), but an editor the user has not typed into yet is not in error — that is
+ * what the caller's own "required" validation says, not the gutter.
+ *
+ * @internal
+ */
+export function getSyntaxErrorDiagnostics(state, message) {
+    if (state.doc.toString().trim() === "") {
+        return [];
+    }
+    const diagnostics = [];
+    const tree = syntaxTree(state);
+    tree.iterate({
+        enter(node) {
+            if (node.type.isError) {
+                diagnostics.push({
+                    from: node.from,
+                    // Zero-width error nodes are widened so the marker has something to underline —
+                    // but never past the end of the document, where an incomplete document's EOF
+                    // error sits: a diagnostic outside the document is out of contract for the lint
+                    // state and can throw once decorations are built from it.
+                    to: Math.min(Math.max(node.to, node.from + 1), state.doc.length),
+                    severity: "error",
+                    message,
+                });
+            }
+        },
+    });
+    return diagnostics;
+}
+/**
+ * Creates a CodeMirror linter extension that reports syntax errors by walking the parse tree for
+ * error nodes.
+ *
+ * Language-agnostic: it reads the tree the language extension already built for highlighting, so it
+ * works for any grammar and costs no extra parse and no extra dependency.
+ *
+ * @param message - localized message shown on each syntax-error diagnostic
+ * @internal
+ */
+export function createSyntaxErrorLinter(message) {
+    return linter((view) => getSyntaxErrorDiagnostics(view.state, message));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.53.0-alpha.0",
+  "version": "11.53.0-alpha.2",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -38,6 +38,7 @@
     "@aaronhayes/react-use-hubspot-form": "2.1.2",
     "@codemirror/autocomplete": "6.20.0",
     "@codemirror/commands": "6.10.1",
+    "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.1",
     "@codemirror/lint": "6.9.2",
@@ -76,11 +77,12 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-spi": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui": "11.53.0-alpha.0",
-    "@gooddata/sdk-model": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.0",
-    "@gooddata/util": "11.53.0-alpha.0"
+    "yaml": "2.8.3",
+    "@gooddata/sdk-backend-spi": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui": "11.53.0-alpha.2",
+    "@gooddata/sdk-model": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.2",
+    "@gooddata/util": "11.53.0-alpha.2"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -129,11 +131,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.53.0-alpha.0",
-    "@gooddata/oxlint-config": "11.53.0-alpha.0",
-    "@gooddata/reference-workspace": "11.53.0-alpha.0",
-    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.0",
-    "@gooddata/stylelint-config": "11.53.0-alpha.0"
+    "@gooddata/eslint-config": "11.53.0-alpha.2",
+    "@gooddata/oxlint-config": "11.53.0-alpha.2",
+    "@gooddata/reference-workspace": "11.53.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.2",
+    "@gooddata/stylelint-config": "11.53.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiConfigEditor/UiConfigEditor.scss

@@ -0,0 +1,169 @@
+// (C) 2026 GoodData Corporation
+
+@use "sass:color";
+
+@use "../../../styles/scss/variables";
+
+.gd-ui-kit-config-editor {
+    // The single source for the row-height maths: the fixed editor height below and the pinned
+    // content line-height must agree, or `rows` stops meaning whole lines.
+    --config-editor-line-height: 1.5;
+
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    // The frame belongs to the whole control, so the toolbar reads as part of the field rather than
+    // as separate chrome floating above it. `overflow: hidden` is what keeps the editor's square
+    // corners from poking through the rounded ones.
+    border: 1px solid var(--gd-palette-complementary-4);
+    border-radius: 3px;
+    overflow: hidden;
+
+    &__toolbar {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gd-spacing-10px);
+        // A fixed height, so the toolbar reads the same whichever controls happen to be in it —
+        // radios, the menu button, or just the Auto-format link. 36px of content plus the divider,
+        // sized explicitly so a host's global box-sizing reset cannot change the outcome.
+        box-sizing: border-box;
+        height: 37px;
+        padding-left: var(--gd-spacing-10px);
+        border-bottom: 1px solid var(--gd-palette-complementary-4);
+    }
+
+    &__languages {
+        display: flex;
+        align-items: center;
+        gap: var(--gd-spacing-10px);
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--gd-spacing-10px);
+        // Keeps the actions pinned to the right edge even when a single-language editor renders no
+        // switcher on the left, where `space-between` alone would let them drift to the start.
+        margin-left: auto;
+        // Mirrors the switcher's inset on the other side.
+        padding-right: var(--gd-spacing-10px);
+    }
+
+    // With the menu button present the design sits it flush against the frame — the button's own
+    // padding is what keeps the ellipsis off the edge, so any padding here would double it.
+    &__actions--withMenu {
+        padding-right: 0;
+    }
+
+    &__editor {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    /**
+     * The shared syntax-highlighting input renders its own wrapper between this element and
+     * `.cm-editor`, and that wrapper is a plain block. Without making it part of the flex column the
+     * `flex` on `.cm-editor` below is inert, so a long document grows the editor without bound and
+     * the surrounding dialog scrolls instead of the editor scrolling inside itself.
+     */
+    &__editor > * {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    /**
+     * The shared syntax-highlighting input ships a fixed `height: 100px` on `.cm-editor`, scoped
+     * under its own `.gd-input-syntax-highlighting-input` class. That stylesheet is bundled after
+     * this one, so at equal specificity it would win — hence the repeated block class, which buys a
+     * third class without changing what is matched.
+     *
+     * Height comes from `rows`, while still growing to fill a taller parent, so the editor works
+     * both standalone and as a field in a fixed-height dialog.
+     *
+     * `--config-editor-rows` is deliberately outside the `--gd-` namespace: that prefix is reserved
+     * for theme variables, each of which needs a specification in sdk-ui-theme-provider. This one
+     * only carries the `rows` prop into the stylesheet and is not something a theme should set.
+     */
+    &.gd-ui-kit-config-editor &__editor .cm-editor {
+        // A definite height rather than a floor, so the scroller inside always has something to
+        // scroll against: with `min-height` alone a long document grows the editor without bound in
+        // any parent that is not itself height-constrained, and the page scrolls instead.
+        //
+        // `rows` whole lines, plus the 8px of padding CodeMirror puts around its content and the 1px
+        // border on each side (the box is border-box). Sizing to whole lines keeps a line from being
+        // clipped through the middle, which looks unfinished and makes a screenshot of it turn on how
+        // half a glyph happens to be antialiased.
+        height: calc(var(--config-editor-rows, 12) * var(--config-editor-line-height) * 1em + 8px);
+        // Still grows to take the space when a parent does constrain and offer it, which is what a
+        // fixed-height dialog does.
+        flex: 1 1 auto;
+        min-height: 0;
+        // The frame and its corners now belong to the wrapper, so the shared input's own border and
+        // radius would draw a second box inside it.
+        border: none;
+        border-radius: 0;
+        // The standard input inner shadow, falling from the toolbar onto the code area. It replaces
+        // the shared input's own (which doubles as its focus styling — here focus is shown on the
+        // whole field instead), with the design's slightly softer blur.
+        box-shadow: inset 0 1px 2px 0 color.adjust(variables.$gd-input-text-box-shadow-color, $alpha: -0.85);
+    }
+
+    // Focus is shown on the whole field instead, so the toolbar is visibly part of what is focused.
+    &.gd-ui-kit-config-editor:has(.cm-editor.cm-focused) {
+        border-color: var(--gd-palette-primary-base);
+    }
+
+    // Pinned rather than left as `normal`, so the height above is exactly `rows` lines.
+    &__editor .cm-content {
+        line-height: var(--config-editor-line-height);
+    }
+
+    // Scrolling past the end of a long config should not start scrolling the dialog behind it.
+    &__editor .cm-scroller {
+        overflow: auto;
+        overscroll-behavior: contain;
+    }
+
+    /**
+     * The design draws no gutter chrome at all: the line numbers sit on the editor's own surface,
+     * with no fill and no divider. Making it transparent (rather than a colour) also keeps it
+     * correct on a dark theme, where CodeMirror's built-in light-variant gutter would otherwise
+     * paint a pale strip — whatever themed background the editor has simply shows through.
+     *
+     * The repeated block class is for specificity: CodeMirror's own rule is `.cm-editor.cm-light
+     * .cm-gutters`, which would otherwise win.
+     */
+    &.gd-ui-kit-config-editor &__editor .cm-gutters {
+        border-right: none;
+        background: transparent;
+        color: var(--gd-palette-complementary-6);
+    }
+
+    &.gd-ui-kit-config-editor &__editor .cm-activeLineGutter {
+        background: transparent;
+        color: var(--gd-palette-complementary-7);
+    }
+
+    // Muted surface for a value that cannot be edited. Applied to the whole field, toolbar included,
+    // now that they share one frame — tinting only the code area would leave a lighter strip on top.
+    // The gutter is transparent, so it takes the same muted surface by itself.
+    &--disabled,
+    &--readOnly {
+        background: var(--gd-palette-complementary-1);
+
+        .cm-editor {
+            background: transparent;
+        }
+    }
+
+    &--disabled {
+        opacity: 0.7;
+    }
+}

package/src/@ui/UiMenu/UiMenu.scss

@@ -192,6 +192,12 @@
         > :not(#{$root}__item-title) {
             flex: none;
         }
+
+        // The submenu indicator is an affordance, not content, so it takes the muted colour rather
+        // than inheriting the label's.
+        .gd-icon-navigateright {
+            color: var(--gd-palette-complementary-5);
+        }
     }
 
     &__item-title {

package/src/@ui/UiSubmenuHeader/UiSubmenuHeader.scss

@@ -6,6 +6,10 @@
     align-items: center;
     gap: var(--gd-spacing-5px);
     width: 100%;
+    // The horizontal padding must come out of the 100% width, not be added on top of it: without
+    // this the header renders wider than the menu that contains it and juts out of the panel in any
+    // app that does not carry a global border-box reset.
+    box-sizing: border-box;
     color: var(--gd-palette-complementary-6, #94a1ad);
     background: var(--gd-palette-complementary-2, #ebeff4);
 
@@ -23,6 +27,17 @@
         text-transform: uppercase;
     }
 
+    &--small {
+        padding: 0 10px;
+        height: 35px;
+        min-height: 35px;
+
+        h3.gd-ui-kit-submenu-header__title-text {
+            font-size: 11px;
+            line-height: normal;
+        }
+    }
+
     &--medium {
         padding: 0 10px;
         height: 36px;

package/src/@ui/index.scss

@@ -51,6 +51,7 @@
 @use "./UiPermissionMenu/UiPermissionMenu.scss";
 @use "./UiGranteeRowControls/UiGranteeRowControls.scss";
 @use "./UiToast/UiToast.scss";
+@use "./UiConfigEditor/UiConfigEditor.scss";
 
 // `--gd-font-family` is a `:root` variable only; there is no global `body` font
 // declaration. Apply it once to every kit root so standalone components don't

package/src/ParameterControl/ParameterControl.scss

@@ -14,6 +14,16 @@
             0 2px 10px rgba(0, 0, 0, 0.1);
     }
 
+    &--allowed-values {
+        padding: 5px 0;
+
+        // the flex column prevents the searchfield's bottom margin from collapsing with the
+        // list's top margin (.gd-dropdown .gd-infinite-list); keep only the searchfield's
+        &:has(.gd-list-searchfield) .gd-infinite-list {
+            margin-top: 0;
+        }
+    }
+
     &__dropdown-field {
         padding: 10px;
     }

package/styles/css/list.css

@@ -670,6 +670,17 @@ button.gd-list-item {
   color: var(--gd-palette-complementary-8, #464e56);
   text-decoration: underline;
 }
+.gd-list-item:has(.gd-list-item-suffix) {
+  justify-content: flex-start;
+}
+.gd-list-item:has(.gd-list-item-suffix) > span {
+  flex-grow: 0;
+}
+.gd-list-item .gd-list-item-suffix {
+  flex: 0 0 auto;
+  margin-left: 5px;
+  color: var(--gd-palette-complementary-6);
+}
 .gd-list-item.gd-list-item-separator, .gd-list-item.gd-list-item-header {
   cursor: default;
 }