@bpmnkit/plugins 0.0.8

package/dist/command-palette/index.js

@@ -0,0 +1,378 @@
+/**
+ * @bpmnkit/canvas-plugin-command-palette — Ctrl+K / ⌘K command palette for
+ * `@bpmnkit/canvas` and `@bpmnkit/editor`.
+ *
+ * ## Usage
+ * ```typescript
+ * import { createCommandPalettePlugin } from "@bpmnkit/canvas-plugin-command-palette";
+ *
+ * const palette = createCommandPalettePlugin({
+ *   onZenModeChange: (active) => {
+ *     document.querySelectorAll(".hud").forEach(
+ *       (el) => { (el as HTMLElement).style.display = active ? "none" : ""; }
+ *     );
+ *   },
+ * });
+ *
+ * const editor = new BpmnEditor({ container, xml, plugins: [palette] });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { computeDiagramBounds } from "@bpmnkit/canvas";
+import { Bpmn } from "@bpmnkit/core";
+import { injectCommandPaletteStyles } from "./css.js";
+export { COMMAND_PALETTE_CSS, COMMAND_PALETTE_STYLE_ID, injectCommandPaletteStyles, } from "./css.js";
+// ── Module-level singleton — only one palette open at a time ──────────────────
+let _closeCurrent = null;
+// ── Icons ─────────────────────────────────────────────────────────────────────
+const SEARCH_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.5" cy="6.5" r="4"/><line x1="10" y1="10" x2="14" y2="14"/></svg>';
+// ── Theme helper ──────────────────────────────────────────────────────────────
+function resolveTheme(theme) {
+    if (theme === "dark")
+        return "dark";
+    if (theme === "light")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+// ── Factory ───────────────────────────────────────────────────────────────────
+export function createCommandPalettePlugin(options = {}) {
+    let _api = null;
+    let _overlayEl = null;
+    let _inputEl = null;
+    let _listEl = null;
+    let _isOpen = false;
+    let _isZenMode = false;
+    let _focusedIndex = 0;
+    let _lastDefs = null;
+    const _extraCommands = [];
+    const _unsubs = [];
+    // ── Built-in commands (lazy — need _api set) ─────────────────────────────
+    function builtinCommands() {
+        if (!_api)
+            return [];
+        const api = _api;
+        return [
+            {
+                id: "toggle-theme",
+                title: "Toggle Theme",
+                description: "Cycle: dark → light → auto",
+                action() {
+                    const cur = api.getTheme();
+                    const next = cur === "dark" ? "light" : cur === "light" ? "auto" : "dark";
+                    api.setTheme(next);
+                    closePalette();
+                },
+            },
+            {
+                id: "zoom-100",
+                title: "Zoom to 100%",
+                action() {
+                    const vp = api.getViewport();
+                    const rect = api.svg.getBoundingClientRect();
+                    const cx = (rect.width / 2 - vp.tx) / vp.scale;
+                    const cy = (rect.height / 2 - vp.ty) / vp.scale;
+                    api.setViewport({ tx: rect.width / 2 - cx, ty: rect.height / 2 - cy, scale: 1 });
+                    closePalette();
+                },
+            },
+            {
+                id: "zoom-fit",
+                title: "Zoom to Fit",
+                action() {
+                    if (!_lastDefs) {
+                        closePalette();
+                        return;
+                    }
+                    const bounds = computeDiagramBounds(_lastDefs);
+                    if (!bounds) {
+                        closePalette();
+                        return;
+                    }
+                    const rect = api.svg.getBoundingClientRect();
+                    const dW = bounds.maxX - bounds.minX;
+                    const dH = bounds.maxY - bounds.minY;
+                    if (dW === 0 || dH === 0) {
+                        closePalette();
+                        return;
+                    }
+                    const padding = 40;
+                    const scale = Math.min((rect.width - padding * 2) / dW, (rect.height - padding * 2) / dH);
+                    const tx = (rect.width - dW * scale) / 2 - bounds.minX * scale;
+                    const ty = (rect.height - dH * scale) / 2 - bounds.minY * scale;
+                    api.setViewport({ tx, ty, scale });
+                    closePalette();
+                },
+            },
+            {
+                id: "export-bpmn",
+                title: "Export as BPMN XML",
+                description: `Download as ${options.exportFilename ?? "diagram.bpmn"}`,
+                action() {
+                    if (!_lastDefs) {
+                        closePalette();
+                        return;
+                    }
+                    const xml = Bpmn.export(_lastDefs);
+                    const blob = new Blob([xml], { type: "text/xml" });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = options.exportFilename ?? "diagram.bpmn";
+                    a.click();
+                    URL.revokeObjectURL(url);
+                    closePalette();
+                },
+            },
+            {
+                id: "zen-mode",
+                title: _isZenMode ? "Exit Zen Mode" : "Zen Mode",
+                description: _isZenMode ? "Restore grid and toolbars" : "Hide grid and toolbars",
+                action() {
+                    toggleZenMode();
+                    closePalette();
+                },
+            },
+        ];
+    }
+    // ── Zen mode ─────────────────────────────────────────────────────────────
+    function toggleZenMode() {
+        if (!_api)
+            return;
+        _isZenMode = !_isZenMode;
+        _api.container.classList.toggle("bpmnkit-zen-mode", _isZenMode);
+        const gridRects = _api.svg.querySelectorAll('rect[fill^="url(#bpmnkit-grid"]');
+        for (const rect of gridRects) {
+            rect.style.visibility = _isZenMode ? "hidden" : "";
+        }
+        options.onZenModeChange?.(_isZenMode);
+    }
+    // ── Palette open / close ──────────────────────────────────────────────────
+    function openPalette() {
+        if (!_api)
+            return;
+        _closeCurrent?.();
+        _closeCurrent = closePalette;
+        _isOpen = true;
+        _focusedIndex = 0;
+        const isDark = resolveTheme(_api.getTheme()) === "dark";
+        const overlay = document.createElement("div");
+        overlay.className = isDark
+            ? "bpmnkit-palette-overlay"
+            : "bpmnkit-palette-overlay bpmnkit-palette--light";
+        overlay.setAttribute("role", "dialog");
+        overlay.setAttribute("aria-modal", "true");
+        overlay.setAttribute("aria-label", "Command palette");
+        const panel = document.createElement("div");
+        panel.className = "bpmnkit-palette-panel";
+        // Search row
+        const searchRow = document.createElement("div");
+        searchRow.className = "bpmnkit-palette-search";
+        const iconEl = document.createElement("span");
+        iconEl.className = "bpmnkit-palette-search-icon";
+        iconEl.innerHTML = SEARCH_ICON;
+        searchRow.appendChild(iconEl);
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "bpmnkit-palette-input";
+        input.placeholder = "Search commands\u2026";
+        input.setAttribute("autocomplete", "off");
+        input.setAttribute("spellcheck", "false");
+        searchRow.appendChild(input);
+        const kbdHint = document.createElement("span");
+        kbdHint.className = "bpmnkit-palette-kbd";
+        const kbdKey = document.createElement("kbd");
+        kbdKey.textContent = "Esc";
+        kbdHint.appendChild(kbdKey);
+        searchRow.appendChild(kbdHint);
+        panel.appendChild(searchRow);
+        // List
+        const list = document.createElement("div");
+        list.className = "bpmnkit-palette-list";
+        list.setAttribute("role", "listbox");
+        panel.appendChild(list);
+        overlay.appendChild(panel);
+        document.body.appendChild(overlay);
+        _overlayEl = overlay;
+        _inputEl = input;
+        _listEl = list;
+        renderList("");
+        input.focus();
+        input.addEventListener("input", () => {
+            _focusedIndex = 0;
+            renderList(input.value);
+        });
+        overlay.addEventListener("keydown", onPaletteKeyDown);
+        overlay.addEventListener("pointerdown", (e) => {
+            if (e.target === overlay)
+                closePalette();
+        });
+    }
+    function closePalette() {
+        if (!_isOpen)
+            return;
+        _isOpen = false;
+        if (_closeCurrent === closePalette)
+            _closeCurrent = null;
+        _overlayEl?.remove();
+        _overlayEl = null;
+        _inputEl = null;
+        _listEl = null;
+    }
+    // ── List rendering ────────────────────────────────────────────────────────
+    function filteredCommands(query) {
+        const all = [...builtinCommands(), ..._extraCommands];
+        if (!query)
+            return all;
+        const q = query.toLowerCase();
+        return all.filter((c) => c.title.toLowerCase().includes(q) || c.description?.toLowerCase().includes(q));
+    }
+    function renderList(query) {
+        if (!_listEl)
+            return;
+        _listEl.innerHTML = "";
+        const cmds = filteredCommands(query);
+        if (cmds.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "bpmnkit-palette-empty";
+            empty.textContent = "No commands found";
+            _listEl.appendChild(empty);
+            return;
+        }
+        if (_focusedIndex >= cmds.length)
+            _focusedIndex = 0;
+        cmds.forEach((cmd, i) => {
+            if (!_listEl)
+                return;
+            const item = document.createElement("div");
+            item.className =
+                i === _focusedIndex
+                    ? "bpmnkit-palette-item bpmnkit-palette-focused"
+                    : "bpmnkit-palette-item";
+            item.setAttribute("role", "option");
+            item.setAttribute("aria-selected", String(i === _focusedIndex));
+            const titleEl = document.createElement("span");
+            titleEl.className = "bpmnkit-palette-item-title";
+            titleEl.textContent = cmd.title;
+            item.appendChild(titleEl);
+            if (cmd.description) {
+                const descEl = document.createElement("span");
+                descEl.className = "bpmnkit-palette-item-desc";
+                descEl.textContent = cmd.description;
+                item.appendChild(descEl);
+            }
+            item.addEventListener("pointerenter", () => {
+                _focusedIndex = i;
+                updateFocus();
+            });
+            item.addEventListener("pointerdown", (e) => {
+                e.preventDefault();
+                cmd.action();
+            });
+            _listEl.appendChild(item);
+        });
+    }
+    function updateFocus() {
+        if (!_listEl)
+            return;
+        const items = _listEl.querySelectorAll(".bpmnkit-palette-item");
+        items.forEach((item, i) => {
+            const focused = i === _focusedIndex;
+            item.classList.toggle("bpmnkit-palette-focused", focused);
+            item.setAttribute("aria-selected", String(focused));
+        });
+    }
+    function scrollFocusedIntoView() {
+        if (!_listEl)
+            return;
+        const items = _listEl.querySelectorAll(".bpmnkit-palette-item");
+        const item = items[_focusedIndex];
+        item?.scrollIntoView({ block: "nearest" });
+    }
+    // ── Keyboard handling ─────────────────────────────────────────────────────
+    function onPaletteKeyDown(e) {
+        if (!_listEl || !_inputEl)
+            return;
+        const cmds = filteredCommands(_inputEl.value);
+        const count = cmds.length;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (count > 0) {
+                _focusedIndex = (_focusedIndex + 1) % count;
+                updateFocus();
+                scrollFocusedIntoView();
+            }
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (count > 0) {
+                _focusedIndex = (_focusedIndex - 1 + count) % count;
+                updateFocus();
+                scrollFocusedIntoView();
+            }
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            const cmd = cmds[_focusedIndex];
+            if (cmd)
+                cmd.action();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closePalette();
+        }
+    }
+    const onDocKeyDown = (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+            if (!_api)
+                return;
+            e.preventDefault();
+            if (_isOpen)
+                closePalette();
+            else
+                openPalette();
+        }
+    };
+    // ── Plugin ────────────────────────────────────────────────────────────────
+    return {
+        name: "command-palette",
+        install(api) {
+            injectCommandPaletteStyles();
+            _api = api;
+            _unsubs.push(api.on("diagram:load", (defs) => {
+                _lastDefs = defs;
+            }));
+            document.addEventListener("keydown", onDocKeyDown);
+        },
+        uninstall() {
+            document.removeEventListener("keydown", onDocKeyDown);
+            if (_isOpen)
+                closePalette();
+            if (_isZenMode && _api) {
+                _api.container.classList.remove("bpmnkit-zen-mode");
+                const gridRects = _api.svg.querySelectorAll('rect[fill^="url(#bpmnkit-grid"]');
+                for (const rect of gridRects) {
+                    rect.style.visibility = "";
+                }
+                options.onZenModeChange?.(false);
+                _isZenMode = false;
+            }
+            for (const off of _unsubs)
+                off();
+            _unsubs.length = 0;
+            _extraCommands.length = 0;
+            _api = null;
+        },
+        addCommands(cmds) {
+            _extraCommands.push(...cmds);
+            return () => {
+                for (const cmd of cmds) {
+                    const idx = _extraCommands.findIndex((c) => c.id === cmd.id);
+                    if (idx !== -1)
+                        _extraCommands.splice(idx, 1);
+                }
+            };
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/command-palette-editor/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @bpmnkit/canvas-plugin-command-palette-editor — editor extension for the
+ * command palette plugin. Adds one command per BPMN element type.
+ *
+ * Must be used together with `@bpmnkit/canvas-plugin-command-palette`.
+ *
+ * ## Usage
+ * ```typescript
+ * import { createCommandPalettePlugin } from "@bpmnkit/canvas-plugin-command-palette";
+ * import { createCommandPaletteEditorPlugin } from "@bpmnkit/canvas-plugin-command-palette-editor";
+ *
+ * let editorRef: BpmnEditor | null = null;
+ * const palette = createCommandPalettePlugin({ ... });
+ * const paletteEditor = createCommandPaletteEditorPlugin(palette, (tool) => {
+ *   editorRef?.setTool(tool);
+ * });
+ * const editor = new BpmnEditor({ container, xml, plugins: [palette, paletteEditor] });
+ * editorRef = editor;
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+import type { CommandPalettePlugin } from "../command-palette/index.js";
+/**
+ * Creates the editor command palette extension plugin.
+ *
+ * @param palette - The base command palette plugin returned by
+ *   `createCommandPalettePlugin`. Commands are registered into it.
+ * @param setTool - Callback that activates an element creation tool on the
+ *   editor (e.g. `editor.setTool`). May reference the editor lazily — it is
+ *   only called when the user executes a command, well after construction.
+ */
+export declare function createCommandPaletteEditorPlugin(palette: CommandPalettePlugin, setTool: (tool: string) => void): CanvasPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/command-palette-editor/index.js

@@ -0,0 +1,60 @@
+/**
+ * @bpmnkit/canvas-plugin-command-palette-editor — editor extension for the
+ * command palette plugin. Adds one command per BPMN element type.
+ *
+ * Must be used together with `@bpmnkit/canvas-plugin-command-palette`.
+ *
+ * ## Usage
+ * ```typescript
+ * import { createCommandPalettePlugin } from "@bpmnkit/canvas-plugin-command-palette";
+ * import { createCommandPaletteEditorPlugin } from "@bpmnkit/canvas-plugin-command-palette-editor";
+ *
+ * let editorRef: BpmnEditor | null = null;
+ * const palette = createCommandPalettePlugin({ ... });
+ * const paletteEditor = createCommandPaletteEditorPlugin(palette, (tool) => {
+ *   editorRef?.setTool(tool);
+ * });
+ * const editor = new BpmnEditor({ container, xml, plugins: [palette, paletteEditor] });
+ * editorRef = editor;
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS } from "@bpmnkit/editor";
+// ── Element catalogue ─────────────────────────────────────────────────────────
+const ELEMENT_COMMANDS = ELEMENT_GROUPS.flatMap((group) => group.types.map((type) => ({
+    type,
+    title: `Add ${ELEMENT_TYPE_LABELS[type]}`,
+    description: group.title,
+})));
+// ── Factory ───────────────────────────────────────────────────────────────────
+/**
+ * Creates the editor command palette extension plugin.
+ *
+ * @param palette - The base command palette plugin returned by
+ *   `createCommandPalettePlugin`. Commands are registered into it.
+ * @param setTool - Callback that activates an element creation tool on the
+ *   editor (e.g. `editor.setTool`). May reference the editor lazily — it is
+ *   only called when the user executes a command, well after construction.
+ */
+export function createCommandPaletteEditorPlugin(palette, setTool) {
+    let _deregister = null;
+    return {
+        name: "command-palette-editor",
+        install(_api) {
+            _deregister = palette.addCommands(ELEMENT_COMMANDS.map((cmd) => ({
+                id: `create:${cmd.type}`,
+                title: cmd.title,
+                description: cmd.description,
+                action() {
+                    setTool(`create:${cmd.type}`);
+                },
+            })));
+        },
+        uninstall() {
+            _deregister?.();
+            _deregister = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/config-panel/css.d.ts

@@ -0,0 +1,4 @@
+export declare const CONFIG_PANEL_STYLE_ID = "bpmnkit-config-panel-styles-v1";
+export declare const CONFIG_PANEL_CSS = "\n/* \u2500\u2500 Inspector panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * top: 36px matches the height of the .bpmnkit-tabs bar from canvas-plugin-tabs,\n * so the inspector panel does not overlap the tab bar.\n */\n.bpmnkit-cfg-full {\n  position: fixed;\n  right: 0;\n  top: 36px;\n  bottom: 0;\n  width: 320px;\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  backdrop-filter: blur(16px);\n  border-left: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n  box-shadow: -8px 0 40px rgba(0,0,0,0.6);\n  display: flex;\n  flex-direction: column;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 13px;\n  color: rgba(255,255,255,0.85);\n  z-index: 9999;\n  transition: width 0.2s ease;\n}\n.bpmnkit-cfg-full--collapsed {\n  width: 40px;\n}\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-full-info,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-full-close,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-docs-link,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-search-bar,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-guide-bar,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-tabs-area,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-full-body,\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-search-results {\n  display: none;\n}\n.bpmnkit-cfg-full--collapsed .bpmnkit-cfg-full-header {\n  justify-content: center;\n  padding: 14px 0;\n}\n\n/* Hosted mode \u2014 renders inside a dock pane instead of as a fixed overlay */\n.bpmnkit-cfg-full--hosted {\n  position: static !important;\n  width: auto !important;\n  top: auto; right: auto; bottom: auto;\n  box-shadow: none; border-left: none; backdrop-filter: none;\n  flex: 1; min-height: 0;\n}\n/* suppress controls that the dock replaces */\n.bpmnkit-cfg-full--hosted .bpmnkit-cfg-resize-handle,\n.bpmnkit-cfg-full--hosted .bpmnkit-cfg-collapse-btn { display: none; }\n\n/* Resize handle \u2014 a thin grab zone along the left edge */\n.bpmnkit-cfg-resize-handle {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 5px;\n  cursor: ew-resize;\n  z-index: 1;\n}\n.bpmnkit-cfg-resize-handle:hover {\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-full-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 10px;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-full-info {\n  flex: 1;\n  min-width: 0;\n}\n.bpmnkit-cfg-full-type {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: rgba(255,255,255,0.35);\n  margin-bottom: 2px;\n}\n.bpmnkit-cfg-full-template {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--bpmnkit-accent, #6b9df7);\n  margin-bottom: 1px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-cfg-full-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* Docs link \u2014 ? button shown when the schema has a documentationRef */\n.bpmnkit-cfg-docs-link {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid rgba(255,255,255,0.2);\n  color: rgba(255,255,255,0.45);\n  font-size: 11px;\n  font-weight: 700;\n  text-decoration: none;\n  flex-shrink: 0;\n  transition: border-color 0.1s, color 0.1s, background 0.1s;\n}\n.bpmnkit-cfg-docs-link:hover {\n  color: var(--bpmnkit-accent, #6b9df7);\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));\n}\n.bpmnkit-cfg-collapse-btn {\n  width: 28px;\n  height: 28px;\n  background: none;\n  border: none;\n  color: rgba(255,255,255,0.4);\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-size: 18px;\n  line-height: 1;\n  flex-shrink: 0;\n  transition: background 0.1s, color 0.1s;\n}\n.bpmnkit-cfg-collapse-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }\n.bpmnkit-cfg-full-close {\n  width: 28px;\n  height: 28px;\n  background: none;\n  border: none;\n  color: rgba(255,255,255,0.4);\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  font-size: 20px;\n  line-height: 1;\n  flex-shrink: 0;\n  transition: background 0.1s, color 0.1s;\n}\n.bpmnkit-cfg-full-close:hover { background: rgba(255,255,255,0.08); color: #fff; }\n\n/* \u2500\u2500 Search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-search-bar {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-search-input {\n  flex: 1;\n  height: 28px;\n  padding: 0 8px;\n  background: rgba(255,255,255,0.07);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 5px;\n  color: rgba(255,255,255,0.85);\n  font-size: 12px;\n  font-family: system-ui, -apple-system, sans-serif;\n  outline: none;\n  transition: border-color 0.15s, background 0.15s;\n  box-sizing: border-box;\n}\n.bpmnkit-cfg-search-input::placeholder { color: rgba(255,255,255,0.28); }\n.bpmnkit-cfg-search-input:focus {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  background: rgba(255,255,255,0.1);\n}\n.bpmnkit-cfg-search-clear {\n  width: 22px;\n  height: 22px;\n  background: none;\n  border: none;\n  color: rgba(255,255,255,0.35);\n  cursor: pointer;\n  padding: 0;\n  /* display toggled via JS */\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  font-size: 14px;\n  flex-shrink: 0;\n  transition: color 0.1s, background 0.1s;\n}\n.bpmnkit-cfg-search-clear:hover { color: #fff; background: rgba(255,255,255,0.08); }\n\n/* \u2500\u2500 Guide bar (field assistant) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-guide-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 7px 14px;\n  background: rgba(248, 113, 113, 0.09);\n  border-bottom: 1px solid rgba(248, 113, 113, 0.18);\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-guide-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.bpmnkit-cfg-guide-icon {\n  width: 16px;\n  height: 16px;\n  background: var(--bpmnkit-danger, #f87171);\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: 800;\n  color: #fff;\n  flex-shrink: 0;\n  line-height: 1;\n}\n.bpmnkit-cfg-guide-text {\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(248, 113, 113, 0.9);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-cfg-guide-btn {\n  flex-shrink: 0;\n  padding: 3px 10px;\n  border-radius: 4px;\n  border: 1px solid rgba(248, 113, 113, 0.4);\n  background: rgba(248, 113, 113, 0.12);\n  color: var(--bpmnkit-danger, #f87171);\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.1s, border-color 0.1s;\n  white-space: nowrap;\n}\n.bpmnkit-cfg-guide-btn:hover {\n  background: rgba(248, 113, 113, 0.22);\n  border-color: rgba(248, 113, 113, 0.6);\n}\n\n/* \u2500\u2500 Search results \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-search-results {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 22px 32px;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255,255,255,0.15) transparent;\n}\n.bpmnkit-cfg-search-group-label {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: rgba(255,255,255,0.3);\n  margin: 16px 0 10px;\n  padding-bottom: 5px;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n.bpmnkit-cfg-search-group-label:first-child { margin-top: 10px; }\n.bpmnkit-cfg-search-empty {\n  font-size: 12px;\n  color: rgba(255,255,255,0.3);\n  text-align: center;\n  padding: 28px 0;\n}\n\n/* \u2500\u2500 Tabs area (wrapper + scroll buttons) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-tabs-area {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.bpmnkit-cfg-tabs {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.bpmnkit-cfg-tabs::-webkit-scrollbar { display: none; }\n.bpmnkit-cfg-tab-btn {\n  padding: 10px 14px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: rgba(255,255,255,0.4);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition: color 0.1s, border-color 0.1s;\n  margin-bottom: -1px;\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-tab-btn:hover { color: rgba(255,255,255,0.75); }\n.bpmnkit-cfg-tab-btn.active { color: var(--bpmnkit-accent, #6b9df7); border-bottom-color: var(--bpmnkit-accent, #6b9df7); }\n/* Red dot shown after tab label when the group has required-empty fields */\n.bpmnkit-cfg-tab-btn.has-error::after {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--bpmnkit-danger, #f87171);\n  margin-left: 5px;\n  vertical-align: middle;\n  flex-shrink: 0;\n}\n\n/* Arrow buttons for overflowing tabs */\n.bpmnkit-cfg-tabs-scroll-btn {\n  flex-shrink: 0;\n  width: 26px;\n  background: none;\n  border: none;\n  border-radius: 0;\n  color: rgba(255,255,255,0.5);\n  cursor: pointer;\n  font-size: 16px;\n  line-height: 1;\n  padding: 0;\n  /* display toggled via JS */\n  align-items: center;\n  justify-content: center;\n  transition: background 0.1s, color 0.1s;\n}\n.bpmnkit-cfg-tabs-scroll-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }\n.bpmnkit-cfg-tabs-scroll-btn--prev { border-right: 1px solid rgba(255,255,255,0.06); }\n.bpmnkit-cfg-tabs-scroll-btn--next { border-left: 1px solid rgba(255,255,255,0.06); }\n\n/* \u2500\u2500 Scrollable body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-full-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 22px 22px 32px;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255,255,255,0.15) transparent;\n}\n\n/* \u2500\u2500 Groups & Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-group-label {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: rgba(255,255,255,0.3);\n  margin-bottom: 14px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n.bpmnkit-cfg-field {\n  margin-bottom: 14px;\n}\n.bpmnkit-cfg-field-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: rgba(255,255,255,0.55);\n  margin-bottom: 5px;\n  cursor: default;\n}\n.bpmnkit-cfg-field-label[title] { cursor: help; }\n.bpmnkit-cfg-field-docs {\n  font-size: 10px;\n  color: var(--bpmnkit-accent, #6b9df7);\n  text-decoration: none;\n  opacity: 0.7;\n  transition: opacity 0.1s;\n}\n.bpmnkit-cfg-field-docs:hover { opacity: 1; }\n.bpmnkit-cfg-required-star {\n  color: var(--bpmnkit-danger, #f87171);\n  font-weight: 700;\n  margin-left: 2px;\n}\n.bpmnkit-cfg-field--invalid {\n  border-left: 2px solid var(--bpmnkit-danger, #f87171);\n  padding-left: 8px;\n}\n.bpmnkit-cfg-field--invalid .bpmnkit-cfg-input,\n.bpmnkit-cfg-field--invalid .bpmnkit-cfg-select,\n.bpmnkit-cfg-field--invalid .bpmnkit-cfg-textarea {\n  border-color: var(--bpmnkit-danger, #f87171);\n}\n\n.bpmnkit-cfg-input,\n.bpmnkit-cfg-select,\n.bpmnkit-cfg-textarea {\n  width: 100%;\n  padding: 7px 10px;\n  background: rgba(255,255,255,0.06);\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 6px;\n  color: rgba(255,255,255,0.9);\n  font-size: 12px;\n  font-family: system-ui, -apple-system, sans-serif;\n  outline: none;\n  transition: border-color 0.15s, background 0.15s;\n  box-sizing: border-box;\n}\n.bpmnkit-cfg-input:focus,\n.bpmnkit-cfg-select:focus,\n.bpmnkit-cfg-textarea:focus {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  background-color: rgba(255,255,255,0.09);\n}\n.bpmnkit-cfg-select {\n  appearance: none;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  padding-right: 28px;\n}\n.bpmnkit-cfg-textarea {\n  resize: vertical;\n  min-height: 68px;\n  line-height: 1.5;\n  font-family: var(--bpmnkit-font-mono, ui-monospace, \"SF Mono\", monospace);\n  font-size: 11px;\n}\n.bpmnkit-cfg-field-hint {\n  font-size: 11px;\n  color: rgba(255,255,255,0.3);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n/* \u2500\u2500 Field error message \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-field-error {\n  font-size: 11px;\n  color: var(--bpmnkit-danger, #f87171);\n  margin-top: 3px;\n  line-height: 1.3;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-field-error { color: var(--bpmnkit-danger, #dc2626); }\n\n/* \u2500\u2500 FEEL expression field \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* FEEL/string mode toggle \u2014 appears at the right end of a feel-expression label row */\n.bpmnkit-cfg-feel-mode-btn {\n  margin-left: auto;\n  flex-shrink: 0;\n  padding: 1px 6px;\n  border-radius: 3px;\n  border: 1px solid rgba(255,255,255,0.12);\n  background: none;\n  color: rgba(255,255,255,0.3);\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  cursor: pointer;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n}\n.bpmnkit-cfg-feel-mode-btn:hover {\n  background: rgba(255,255,255,0.06);\n  color: rgba(255,255,255,0.55);\n}\n.bpmnkit-cfg-feel-mode-btn--active {\n  border-color: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));\n  color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-cfg-feel-mode-btn--active:hover { background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15)); }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-mode-btn {\n  border-color: rgba(0,0,0,0.12);\n  color: rgba(0,0,0,0.3);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-mode-btn:hover {\n  background: rgba(0,0,0,0.05);\n  color: rgba(0,0,0,0.55);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-mode-btn--active {\n  border-color: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));\n  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));\n  color: var(--bpmnkit-accent, #1a56db);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-mode-btn--active:hover { background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); }\n\n.bpmnkit-cfg-feel-ta {\n  width: 100%;\n  min-height: 68px;\n  padding: 7px 10px;\n  border: 1px solid rgba(255,255,255,0.1);\n  border-radius: 6px;\n  font-size: 11px;\n  font-family: var(--bpmnkit-font-mono, ui-monospace, \"SF Mono\", monospace);\n  line-height: 1.5;\n  resize: vertical;\n  outline: none;\n  transition: border-color 0.15s;\n  box-sizing: border-box;\n}\n\n.bpmnkit-cfg-feel-playground-btn {\n  display: inline-flex;\n  margin-top: 4px;\n  padding: 3px 8px;\n  border-radius: 4px;\n  border: 1px solid rgba(255,255,255,0.12);\n  background: none;\n  color: var(--bpmnkit-accent, #6b9df7);\n  font-size: 11px;\n  cursor: pointer;\n  transition: background 0.1s;\n}\n.bpmnkit-cfg-feel-playground-btn:hover { background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15)); }\n\n/* Light theme overrides */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-playground-btn {\n  border-color: rgba(0,0,0,0.12);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-feel-playground-btn:hover { background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); }\n\n/* \u2500\u2500 Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-toggle-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.bpmnkit-cfg-toggle-label {\n  font-size: 12px;\n  color: rgba(255,255,255,0.7);\n  cursor: pointer;\n}\n.bpmnkit-cfg-toggle-label[title] { cursor: help; }\n.bpmnkit-cfg-toggle {\n  position: relative;\n  display: inline-flex;\n  width: 34px;\n  height: 18px;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n.bpmnkit-cfg-toggle input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n.bpmnkit-cfg-toggle-track {\n  position: absolute;\n  inset: 0;\n  background: rgba(255,255,255,0.15);\n  border-radius: 9px;\n  transition: background 0.2s;\n}\n.bpmnkit-cfg-toggle input:checked + .bpmnkit-cfg-toggle-track { background: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-cfg-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: #fff;\n  border-radius: 50%;\n  transition: transform 0.2s;\n  pointer-events: none;\n}\n.bpmnkit-cfg-toggle input:checked ~ .bpmnkit-cfg-toggle-thumb { transform: translateX(16px); }\n\n/* \u2500\u2500 Action button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cfg-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 12px;\n  border-radius: 4px;\n  border: 1px solid rgba(255,255,255,0.15);\n  background: rgba(255,255,255,0.07);\n  color: rgba(255,255,255,0.85);\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.bpmnkit-cfg-action-btn:hover {\n  background: rgba(255,255,255,0.13);\n  border-color: rgba(255,255,255,0.25);\n}\n\n/* \u2500\u2500 Light theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full {\n  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));\n  border-left-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n  box-shadow: -8px 0 40px rgba(0,0,0,0.12);\n  color: rgba(0,0,0,0.85);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-header { border-bottom-color: rgba(0,0,0,0.07); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-type { color: rgba(0,0,0,0.35); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-template { color: var(--bpmnkit-accent, #1a56db); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-name { color: rgba(0,0,0,0.9); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-docs-link { color: rgba(0,0,0,0.4); border-color: rgba(0,0,0,0.2); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-docs-link:hover { color: var(--bpmnkit-accent, #1a56db); border-color: var(--bpmnkit-accent, #1a56db); background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-collapse-btn { color: rgba(0,0,0,0.4); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-collapse-btn:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-close { color: rgba(0,0,0,0.4); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-close:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9); }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-bar { border-bottom-color: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-input {\n  background: rgba(0,0,0,0.04);\n  border-color: rgba(0,0,0,0.12);\n  color: rgba(0,0,0,0.85);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-input::placeholder { color: rgba(0,0,0,0.3); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-clear { color: rgba(0,0,0,0.35); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-clear:hover { color: rgba(0,0,0,0.9); background: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-results { scrollbar-color: rgba(0,0,0,0.15) transparent; }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-group-label { color: rgba(0,0,0,0.35); border-bottom-color: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-search-empty { color: rgba(0,0,0,0.35); }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tabs-area { border-bottom-color: rgba(0,0,0,0.07); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tab-btn { color: rgba(0,0,0,0.4); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tab-btn:hover { color: rgba(0,0,0,0.7); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tabs-scroll-btn { color: rgba(0,0,0,0.4); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tabs-scroll-btn:hover { color: rgba(0,0,0,0.9); background: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tabs-scroll-btn--prev { border-right-color: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-tabs-scroll-btn--next { border-left-color: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-body { scrollbar-color: rgba(0,0,0,0.15) transparent; }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-group-label {\n  color: rgba(0,0,0,0.35);\n  border-bottom-color: rgba(0,0,0,0.06);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-field-label { color: rgba(0,0,0,0.55); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-field-hint { color: rgba(0,0,0,0.4); }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-input,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-select,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-textarea {\n  background-color: rgba(0,0,0,0.04);\n  border-color: rgba(0,0,0,0.12);\n  color: rgba(0,0,0,0.85);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-input:focus,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-select:focus,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-textarea:focus {\n  background-color: rgba(0,0,0,0.06);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-select {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='1.5'/%3E%3C/svg%3E\");\n}\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-toggle-label { color: rgba(0,0,0,0.7); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-toggle-track { background: rgba(0,0,0,0.12); }\n\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-action-btn {\n  border-color: rgba(0,0,0,0.15);\n  background: rgba(0,0,0,0.04);\n  color: rgba(0,0,0,0.75);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-action-btn:hover {\n  background: rgba(0,0,0,0.08);\n  border-color: rgba(0,0,0,0.2);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-resize-handle:hover {\n  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-guide-bar {\n  background: rgba(248, 113, 113, 0.06);\n  border-bottom-color: rgba(248, 113, 113, 0.15);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-guide-text { color: var(--bpmnkit-danger, #dc2626); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-guide-btn {\n  color: var(--bpmnkit-danger, #dc2626);\n  border-color: rgba(220, 38, 38, 0.3);\n  background: rgba(220, 38, 38, 0.07);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-guide-btn:hover {\n  background: rgba(220, 38, 38, 0.14);\n  border-color: rgba(220, 38, 38, 0.5);\n}\n";
+export declare function injectConfigPanelStyles(): void;
+//# sourceMappingURL=css.d.ts.map