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

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.52.0",
+  "version": "11.53.0-alpha.1",
   "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-model": "11.52.0",
-    "@gooddata/sdk-backend-spi": "11.52.0",
-    "@gooddata/sdk-ui": "11.52.0",
-    "@gooddata/sdk-ui-theme-provider": "11.52.0",
-    "@gooddata/util": "11.52.0"
+    "yaml": "2.8.3",
+    "@gooddata/sdk-backend-spi": "11.53.0-alpha.1",
+    "@gooddata/sdk-model": "11.53.0-alpha.1",
+    "@gooddata/sdk-ui": "11.53.0-alpha.1",
+    "@gooddata/util": "11.53.0-alpha.1",
+    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.1"
   },
   "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/oxlint-config": "11.52.0",
-    "@gooddata/reference-workspace": "11.52.0",
-    "@gooddata/eslint-config": "11.52.0",
-    "@gooddata/sdk-backend-mockingbird": "11.52.0",
-    "@gooddata/stylelint-config": "11.52.0"
+    "@gooddata/eslint-config": "11.53.0-alpha.1",
+    "@gooddata/oxlint-config": "11.53.0-alpha.1",
+    "@gooddata/reference-workspace": "11.53.0-alpha.1",
+    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.1",
+    "@gooddata/stylelint-config": "11.53.0-alpha.1"
   },
   "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/styles/css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --gd-palette-error-base: #e54d42;
   --gd-palette-info-base: var(--gd-palette-primary-base, #14b2e2);
@@ -2000,6 +2001,9 @@
 .gd-ui-kit-menu__item > :not(.gd-ui-kit-menu__item-title) {
   flex: none;
 }
+.gd-ui-kit-menu__item .gd-icon-navigateright {
+  color: var(--gd-palette-complementary-5);
+}
 .gd-ui-kit-menu__item-title {
   width: 100%;
   min-width: 0;
@@ -3363,6 +3367,7 @@
   align-items: center;
   gap: var(--gd-spacing-5px);
   width: 100%;
+  box-sizing: border-box;
   color: var(--gd-palette-complementary-6, #94a1ad);
   background: var(--gd-palette-complementary-2, #ebeff4);
 }
@@ -3378,6 +3383,15 @@
   font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
   text-transform: uppercase;
 }
+.gd-ui-kit-submenu-header--small {
+  padding: 0 10px;
+  height: 35px;
+  min-height: 35px;
+}
+.gd-ui-kit-submenu-header--small h3.gd-ui-kit-submenu-header__title-text {
+  font-size: 11px;
+  line-height: normal;
+}
 .gd-ui-kit-submenu-header--medium {
   padding: 0 10px;
   height: 36px;
@@ -4223,6 +4237,119 @@
   outline-offset: 2px;
 }
 
+.gd-ui-kit-config-editor {
+  --config-editor-line-height: 1.5;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--gd-palette-complementary-4);
+  border-radius: 3px;
+  overflow: hidden;
+  /**
+   * 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.
+   */
+  /**
+   * 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.
+   */
+  /**
+   * 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__toolbar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gd-spacing-10px);
+  box-sizing: border-box;
+  height: 37px;
+  padding-left: var(--gd-spacing-10px);
+  border-bottom: 1px solid var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-config-editor__languages {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-config-editor__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  margin-left: auto;
+  padding-right: var(--gd-spacing-10px);
+}
+.gd-ui-kit-config-editor__actions--withMenu {
+  padding-right: 0;
+}
+.gd-ui-kit-config-editor__editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.gd-ui-kit-config-editor__editor > * {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+.gd-ui-kit-config-editor.gd-ui-kit-config-editor .gd-ui-kit-config-editor__editor .cm-editor {
+  height: calc(var(--config-editor-rows, 12) * var(--config-editor-line-height) * 1em + 8px);
+  flex: 1 1 auto;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0 1px 2px 0 rgba(31, 53, 74, 0.15);
+}
+.gd-ui-kit-config-editor.gd-ui-kit-config-editor:has(.cm-editor.cm-focused) {
+  border-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-config-editor__editor .cm-content {
+  line-height: var(--config-editor-line-height);
+}
+.gd-ui-kit-config-editor__editor .cm-scroller {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.gd-ui-kit-config-editor.gd-ui-kit-config-editor .gd-ui-kit-config-editor__editor .cm-gutters {
+  border-right: none;
+  background: transparent;
+  color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-config-editor.gd-ui-kit-config-editor .gd-ui-kit-config-editor__editor .cm-activeLineGutter {
+  background: transparent;
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-config-editor--disabled, .gd-ui-kit-config-editor--readOnly {
+  background: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-config-editor--disabled .cm-editor, .gd-ui-kit-config-editor--readOnly .cm-editor {
+  background: transparent;
+}
+.gd-ui-kit-config-editor--disabled {
+  opacity: 0.7;
+}
+
 [class^=gd-ui-kit-],
 [class*=" gd-ui-kit-"] {
   font-family: var(--gd-font-family);
@@ -12847,6 +12974,11 @@ button.gd-button-primary.gd-upsell-button:active {
   color: var(--gd-palette-complementary-7, #6d7680);
   margin-top: 20px;
 }
+.gd-styling-editor-dialog-content-form-textarea > div {
+  flex: 1;
+  min-height: 0;
+  margin-bottom: 20px;
+}
 .gd-styling-editor-dialog-content-form-textarea textarea {
   resize: none;
   flex: 1;