@bpmnkit/plugins 0.0.17 → 0.0.19

package/dist/ai-bridge/css.js

@@ -437,6 +437,46 @@ export function injectAiBridgeStyles() {
   color: oklch(75% 0.16 280);
 }
 [data-bpmnkit-hud-theme="neon"] .ai-companion-create:hover:not(:disabled) { background: oklch(65% 0.28 280 / 0.2); }
+/* ── Improve diff ── */
+.ai-improve-diff {
+  margin-top: 10px;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 12px;
+}
+.ai-improve-autofix {
+  padding: 5px 10px;
+  background: rgba(22,163,74,0.12);
+  color: rgba(120,220,120,0.9);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+.ai-improve-ops {
+  margin: 0; padding: 4px 0;
+  list-style: none;
+}
+.ai-improve-op {
+  padding: 4px 10px 4px 26px;
+  position: relative;
+  color: rgba(255,255,255,0.75);
+  line-height: 1.4;
+}
+.ai-improve-op::before {
+  content: "•";
+  position: absolute; left: 10px;
+  color: rgba(255,255,255,0.3);
+}
+.ai-improve-op--insert::before { content: "+"; color: rgba(120,220,120,0.8); }
+.ai-improve-op--delete::before { content: "−"; color: rgba(220,80,80,0.8); }
+.ai-improve-op--delete_flow::before { content: "−"; color: rgba(220,80,80,0.8); }
+.ai-improve-op--rename::before,
+.ai-improve-op--update::before,
+.ai-improve-op--redirect_flow::before,
+.ai-improve-op--add_flow::before { content: "~"; color: rgba(220,160,60,0.8); }
+[data-bpmnkit-hud-theme="light"] .ai-improve-diff { border-color: rgba(0,0,0,0.1); }
+[data-bpmnkit-hud-theme="light"] .ai-improve-autofix { color: rgba(22,120,60,0.9); }
+[data-bpmnkit-hud-theme="light"] .ai-improve-op { color: rgba(0,0,0,0.7); }
+[data-bpmnkit-hud-theme="light"] .ai-improve-op::before { color: rgba(0,0,0,0.25); }
 `;
     document.head.appendChild(style);
 }

package/dist/ai-bridge/index.d.ts

@@ -1,5 +1,8 @@
 import type { BpmnDefinitions } from "@bpmnkit/core";
-import type { NodeContext } from "./panel.js";
+import { DEFAULT_SERVER, createAiPanel } from "./panel.js";
+import type { NodeContext, PanelOptions } from "./panel.js";
+export { createAiPanel, DEFAULT_SERVER };
+export type { PanelOptions };
 export type { NodeContext };
 export interface AiBridgePluginOptions {
     /** URL of the local AI server. Defaults to http://localhost:3033 */

package/dist/ai-bridge/index.js

@@ -1,4 +1,5 @@
 import { DEFAULT_SERVER, createAiPanel } from "./panel.js";
+export { createAiPanel, DEFAULT_SERVER };
 function searchContainer(container, id) {
     for (const el of container.flowElements) {
         if (el.id === id)

package/dist/ai-bridge/panel.d.ts

@@ -1,11 +1,11 @@
 import type { BpmnDefinitions } from "@bpmnkit/core";
-declare const DEFAULT_SERVER = "http://localhost:3033";
+export declare const DEFAULT_SERVER = "http://localhost:3033";
 export interface NodeContext {
     id: string;
     type: string;
     name?: string;
 }
-interface PanelOptions {
+export interface PanelOptions {
     serverUrl: string;
     getDefinitions(): BpmnDefinitions | null;
     loadXml(xml: string): void;
@@ -24,5 +24,4 @@ export declare function createAiPanel(options: PanelOptions): {
     setContext(node: NodeContext | null): void;
     submit(prompt: string): void;
 };
-export { DEFAULT_SERVER };
 //# sourceMappingURL=panel.d.ts.map

package/dist/ai-bridge/panel.js

@@ -2,7 +2,7 @@ import { BpmnCanvas } from "@bpmnkit/canvas";
 import { Bpmn, Dmn, Form, compactify, optimize } from "@bpmnkit/core";
 import { saveCheckpoint } from "../history/index.js";
 import { injectAiBridgeStyles } from "./css.js";
-const DEFAULT_SERVER = "http://localhost:3033";
+export const DEFAULT_SERVER = "http://localhost:3033";
 // ── SSE streaming ─────────────────────────────────────────────────────────────
 async function* streamChat(serverUrl, messages, context, backend, signal, action, onXml) {
     let res;
@@ -65,6 +65,68 @@ async function* streamChat(serverUrl, messages, context, backend, signal, action
         reader.releaseLock();
     }
 }
+async function* streamImprove(serverUrl, compactDiagram, backend, signal, onOps, onXml) {
+    let res;
+    try {
+        res = await fetch(`${serverUrl}/improve`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                context: compactDiagram,
+                instruction: null,
+                backend: backend === "auto" ? null : backend,
+            }),
+            signal,
+        });
+    }
+    catch (err) {
+        if (err instanceof Error && err.name === "AbortError")
+            return;
+        throw err;
+    }
+    if (!res.ok || !res.body)
+        throw new Error(`Server returned ${res.status}`);
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = "";
+    try {
+        while (!signal.aborted) {
+            const { done, value } = await reader.read();
+            if (done || signal.aborted)
+                break;
+            buf += decoder.decode(value, { stream: true });
+            const parts = buf.split("\n\n");
+            buf = parts.pop() ?? "";
+            for (const part of parts) {
+                const line = part.startsWith("data: ") ? part.slice(6) : part;
+                const trimmed = line.trim();
+                if (!trimmed)
+                    continue;
+                try {
+                    const event = JSON.parse(trimmed);
+                    if (event.type === "token" && event.text)
+                        yield event.text;
+                    if (event.type === "ops")
+                        onOps?.(event.ops ?? [], event.autoFixCount ?? 0);
+                    if (event.type === "xml" && event.xml)
+                        onXml?.(event.xml);
+                    if (event.type === "done")
+                        return;
+                    if (event.type === "error")
+                        throw new Error(event.message ?? event.text ?? "AI error");
+                }
+                catch (e) {
+                    if (e instanceof SyntaxError)
+                        continue;
+                    throw e;
+                }
+            }
+        }
+    }
+    finally {
+        reader.releaseLock();
+    }
+}
 // ── Approval-request detection ────────────────────────────────────────────────
 const APPROVAL_PATTERNS = [
     /\bapprove\b/i,
@@ -173,6 +235,40 @@ function renderMarkdown(text) {
     }
     return frag;
 }
+// ── Improve diff helpers ──────────────────────────────────────────────────────
+function describeOp(op) {
+    switch (op.op) {
+        case "rename":
+            return `Rename to "${op.name}"`;
+        case "update":
+            return "Update element properties";
+        case "delete":
+            return "Remove element";
+        case "insert":
+            return `Add ${op.element.type}${op.element.name ? ` "${op.element.name}"` : ""}`;
+        case "add_flow":
+            return `Add flow: ${op.from} → ${op.to}`;
+        case "delete_flow":
+            return "Remove flow";
+        case "redirect_flow":
+            return "Redirect flow";
+    }
+}
+function classifyOps(ops) {
+    const changedIds = [];
+    const newIds = [];
+    for (const op of ops) {
+        if (op.op === "rename" || op.op === "update")
+            changedIds.push(op.id);
+        else if (op.op === "delete_flow" || op.op === "redirect_flow")
+            changedIds.push(op.id);
+        else if (op.op === "insert")
+            newIds.push(op.element.id);
+        else if (op.op === "add_flow" && op.id)
+            newIds.push(op.id);
+    }
+    return { changedIds, newIds };
+}
 // ── Panel ─────────────────────────────────────────────────────────────────────
 const NEW_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8"/><path d="M12 2l2 2-6 6H6v-2l6-6z"/></svg>`;
 const EXAMPLE_PROMPTS = [
@@ -627,6 +723,112 @@ export function createAiPanel(options) {
         msgEl.append(actionRow);
         messagesEl.scrollTop = messagesEl.scrollHeight;
     }
+    // ── Finalize improve message (diff view + preview + apply) ──
+    function finalizeImproveMessage(msgEl, fullText, ops, autoFixCount, resultXml) {
+        msgEl.classList.remove("ai-msg-cursor");
+        while (msgEl.firstChild)
+            msgEl.removeChild(msgEl.firstChild);
+        msgEl.append(renderMarkdown(fullText));
+        // Diff section: auto-fix summary + AI-suggested operations
+        if (autoFixCount > 0 || ops.length > 0) {
+            const diffEl = document.createElement("div");
+            diffEl.className = "ai-improve-diff";
+            if (autoFixCount > 0) {
+                const autoFixNote = document.createElement("div");
+                autoFixNote.className = "ai-improve-autofix";
+                autoFixNote.textContent = `✓ ${autoFixCount} issue${autoFixCount === 1 ? "" : "s"} auto-fixed`;
+                diffEl.append(autoFixNote);
+            }
+            if (ops.length > 0) {
+                const opsList = document.createElement("ul");
+                opsList.className = "ai-improve-ops";
+                for (const op of ops) {
+                    const li = document.createElement("li");
+                    li.className = `ai-improve-op ai-improve-op--${op.op}`;
+                    li.textContent = describeOp(op);
+                    opsList.append(li);
+                }
+                diffEl.append(opsList);
+            }
+            msgEl.append(diffEl);
+        }
+        // Canvas preview with highlights for changed/new elements
+        if (resultXml !== undefined) {
+            const previewEl = document.createElement("div");
+            previewEl.className = "ai-msg-preview";
+            const canvas = new BpmnCanvas({
+                container: previewEl,
+                xml: resultXml,
+                grid: false,
+                fit: "contain",
+                theme: options.getTheme?.() ?? "dark",
+            });
+            _previewCanvases.push(canvas);
+            if (ops.length > 0) {
+                const { changedIds, newIds } = classifyOps(ops);
+                requestAnimationFrame(() => {
+                    if (changedIds.length > 0)
+                        canvas.highlight(changedIds, "changed");
+                    if (newIds.length > 0)
+                        canvas.highlight(newIds, "new");
+                });
+            }
+            msgEl.append(previewEl);
+        }
+        // Action row: copy + apply
+        const actionRow = document.createElement("div");
+        actionRow.className = "ai-msg-actions";
+        const copyBtn = document.createElement("button");
+        copyBtn.className = "ai-msg-copy";
+        copyBtn.textContent = "Copy";
+        copyBtn.addEventListener("click", () => {
+            void navigator.clipboard
+                .writeText(fullText)
+                .then(() => {
+                copyBtn.textContent = "Copied!";
+                setTimeout(() => {
+                    copyBtn.textContent = "Copy";
+                }, 2000);
+            })
+                .catch(() => {
+                copyBtn.textContent = "Failed";
+                setTimeout(() => {
+                    copyBtn.textContent = "Copy";
+                }, 2000);
+            });
+        });
+        actionRow.append(copyBtn);
+        if (resultXml !== undefined) {
+            const applyBtn = document.createElement("button");
+            applyBtn.className = "ai-msg-apply";
+            applyBtn.textContent = "Apply to diagram";
+            applyBtn.addEventListener("click", async () => {
+                applyBtn.disabled = true;
+                applyBtn.textContent = "Applying…";
+                try {
+                    const currentDefs = options.getDefinitions();
+                    if (currentDefs) {
+                        const ctx = options.getCurrentContext?.();
+                        if (ctx) {
+                            await saveCheckpoint(ctx.projectId, ctx.fileId, Bpmn.export(currentDefs));
+                        }
+                    }
+                    options.loadXml(resultXml);
+                    applyBtn.textContent = "Applied ✓";
+                    if (options.createCompanionFile) {
+                        showCompanionOffer(msgEl, resultXml, options.createCompanionFile);
+                    }
+                }
+                catch (err) {
+                    applyBtn.disabled = false;
+                    applyBtn.textContent = `Apply failed: ${String(err)}`;
+                }
+            });
+            actionRow.append(applyBtn);
+        }
+        msgEl.append(actionRow);
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
     // ── Clear conversation ──
     function clearConversation() {
         history.length = 0;
@@ -715,8 +917,50 @@ export function createAiPanel(options) {
         setUiBusy(false);
         textarea.focus();
     }
+    // ── Improve with /improve endpoint ──
+    async function sendImprove() {
+        if (sending)
+            return;
+        const defs = options.getDefinitions();
+        if (!defs)
+            return;
+        _abortCtrl = new AbortController();
+        const signal = _abortCtrl.signal;
+        setUiBusy(true);
+        history.push({ role: "user", content: "Improve this diagram" });
+        addMessage("user", "Improve this diagram");
+        const aiMsgEl = addMessage("ai", "");
+        aiMsgEl.classList.add("ai-msg-cursor");
+        const compactDiagram = compactify(defs);
+        let capturedOps = [];
+        let capturedAutoFixCount = 0;
+        let capturedXml;
+        let fullText = "";
+        try {
+            for await (const token of streamImprove(options.serverUrl, compactDiagram, backendSelect.value, signal, (ops, autoFixCount) => {
+                capturedOps = ops;
+                capturedAutoFixCount = autoFixCount;
+            }, (xml) => {
+                capturedXml = xml;
+            })) {
+                fullText += token;
+                aiMsgEl.textContent = fullText;
+                messagesEl.scrollTop = messagesEl.scrollHeight;
+            }
+        }
+        catch (err) {
+            if (!signal.aborted) {
+                fullText = `${fullText ? `${fullText}\n\n` : ""}Error: ${err instanceof Error ? err.message : String(err)}`;
+            }
+        }
+        finalizeImproveMessage(aiMsgEl, fullText, capturedOps, capturedAutoFixCount, capturedXml);
+        history.push({ role: "ai", content: fullText });
+        _abortCtrl = null;
+        setUiBusy(false);
+        textarea.focus();
+    }
     // ── Event wiring ──
-    improveBtn.addEventListener("click", () => void sendAction("Improve this diagram", "improve"));
+    improveBtn.addEventListener("click", () => void sendImprove());
     explainBtn.addEventListener("click", () => void sendAction("Explain this diagram", "explain"));
     explainElementBtn.addEventListener("click", () => void sendAction("Explain this element", "explain", true));
     sendBtn.addEventListener("click", () => void send());
@@ -744,5 +988,4 @@ export function createAiPanel(options) {
     }
     return { panel, open, close, setContext, submit };
 }
-export { DEFAULT_SERVER };
 //# sourceMappingURL=panel.js.map

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

@@ -1,4 +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\n/* \u2500\u2500 Neon 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\u2500 */\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full {\n  background: oklch(8% 0.03 270 / 0.96);\n  border-left-color: oklch(65% 0.28 280 / 0.2);\n  box-shadow: -8px 0 40px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.05);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-header { border-bottom-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-type { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-template { color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-name { color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-docs-link { color: oklch(55% 0.06 280); border-color: oklch(65% 0.28 280 / 0.25); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-docs-link:hover { color: oklch(73% 0.16 280); border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-collapse-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-collapse-btn:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-close { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-close:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-bar { border-bottom-color: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(88% 0.02 270);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input::placeholder { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input:focus { border-color: oklch(65% 0.28 280 / 0.45); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-clear { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-clear:hover { color: oklch(88% 0.02 270); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-results { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-group-label { color: oklch(50% 0.06 280); border-bottom-color: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-empty { color: oklch(50% 0.06 280); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-area { border-bottom-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn:hover { color: oklch(73% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn.active { color: oklch(73% 0.16 280); border-bottom-color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn:hover { color: oklch(88% 0.02 270); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn--prev { border-right-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn--next { border-left-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-body { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-group-label {\n  color: oklch(50% 0.06 280);\n  border-bottom-color: oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-label { color: oklch(55% 0.08 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-hint { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-error { color: oklch(70% 0.18 20); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-input,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-select,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-textarea {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(88% 0.02 270);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-input:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-select:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-textarea:focus {\n  border-color: oklch(65% 0.28 280 / 0.45);\n  background: oklch(65% 0.28 280 / 0.08);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .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='%238080c0' stroke-width='1.5'/%3E%3C/svg%3E\");\n}\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn {\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(50% 0.06 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn:hover {\n  background: oklch(65% 0.28 280 / 0.08);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn--active {\n  border-color: oklch(65% 0.28 280 / 0.3);\n  background: oklch(65% 0.28 280 / 0.12);\n  color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-playground-btn {\n  border-color: oklch(65% 0.28 280 / 0.2);\n  color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-playground-btn:hover { background: oklch(65% 0.28 280 / 0.1); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle-label { color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle-track { background: oklch(65% 0.28 280 / 0.15); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle input:checked + .bpmnkit-cfg-toggle-track { background: oklch(65% 0.28 280 / 0.7); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-action-btn {\n  border-color: oklch(65% 0.28 280 / 0.2);\n  background: oklch(65% 0.28 280 / 0.06);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-action-btn:hover {\n  background: oklch(65% 0.28 280 / 0.12);\n  border-color: oklch(65% 0.28 280 / 0.35);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-resize-handle:hover { background: oklch(65% 0.28 280 / 0.1); }\n\n/* \u2500\u2500 Searchable select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-ss-trigger {\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  text-align: left;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s, background 0.15s;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.bpmnkit-cfg-ss-trigger:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }\n.bpmnkit-cfg-ss-trigger:focus,\n.bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: var(--bpmnkit-accent, #6b9df7); background: rgba(255,255,255,0.09); }\n.bpmnkit-cfg-ss-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.bpmnkit-cfg-ss-arrow {\n  flex-shrink: 0;\n  width: 10px; height: 6px;\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-size: contain;\n}\n/* Dropdown panel \u2014 appended to document.body, positioned fixed */\n.bpmnkit-cfg-ss-dropdown {\n  background: #1a1a2e;\n  border: 1px solid rgba(255,255,255,0.15);\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n.bpmnkit-cfg-ss-search {\n  padding: 8px 10px;\n  background: rgba(255,255,255,0.05);\n  border: none;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\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  width: 100%;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-ss-search::placeholder { color: rgba(255,255,255,0.3); }\n.bpmnkit-cfg-ss-list {\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255,255,255,0.15) transparent;\n}\n.bpmnkit-cfg-ss-option {\n  padding: 7px 10px;\n  font-size: 12px;\n  color: rgba(255,255,255,0.85);\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-cfg-ss-option--focused { background: rgba(255,255,255,0.08); }\n.bpmnkit-cfg-ss-option--selected { color: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: rgba(107,157,247,0.1); }\n.bpmnkit-cfg-ss-empty { padding: 10px; font-size: 12px; color: rgba(255,255,255,0.3); text-align: center; }\n/* Neon theme \u2014 applied via data-theme=\"neon\" on the dropdown element itself */\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] {\n  background: oklch(9% 0.025 270);\n  border-color: oklch(65% 0.28 280 / 0.2);\n  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-search {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-bottom-color: oklch(65% 0.28 280 / 0.12);\n  color: oklch(88% 0.02 270);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-search::placeholder { color: oklch(55% 0.06 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-list { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option { color: oklch(65% 0.1 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--focused { background: oklch(65% 0.28 280 / 0.08); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--selected { color: oklch(73% 0.16 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: oklch(65% 0.28 280 / 0.12); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-empty { color: oklch(50% 0.06 280); }\n/* Neon theme trigger */\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger { background: oklch(65% 0.28 280 / 0.06); border-color: oklch(65% 0.28 280 / 0.2); color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger:hover { background: oklch(65% 0.28 280 / 0.1); border-color: oklch(65% 0.28 280 / 0.3); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-arrow {\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='%238080c0' stroke-width='1.5'/%3E%3C/svg%3E\");\n}\n/* Light theme \u2014 applied via data-theme=\"light\" on the dropdown element itself */\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] {\n  background: #ffffff;\n  border-color: rgba(0,0,0,0.12);\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-search {\n  background: rgba(0,0,0,0.03);\n  border-bottom-color: rgba(0,0,0,0.08);\n  color: rgba(0,0,0,0.85);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-search::placeholder { color: rgba(0,0,0,0.3); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-list { scrollbar-color: rgba(0,0,0,0.15) transparent; }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option { color: rgba(0,0,0,0.85); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--focused { background: rgba(0,0,0,0.05); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--selected { color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: rgba(26,86,219,0.08); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-empty { color: rgba(0,0,0,0.35); }\n/* Light theme trigger */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.85); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.2); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger:focus,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: var(--bpmnkit-accent, #1a56db); background: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-arrow {\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";
+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  display: block;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid transparent;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: inherit;\n  cursor: text;\n  border-radius: 0;\n}\n.bpmnkit-cfg-full-name:not([readonly]):hover {\n  border-bottom-color: rgba(255,255,255,0.2);\n}\n.bpmnkit-cfg-full-name:not([readonly]):focus {\n  border-bottom-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-cfg-full-name::placeholder {\n  color: rgba(255,255,255,0.3);\n  font-weight: 400;\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-full-name:not([readonly]):hover { border-bottom-color: rgba(0,0,0,0.2); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-full-name::placeholder { color: rgba(0,0,0,0.3); }\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\n/* \u2500\u2500 Neon 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\u2500 */\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full {\n  background: oklch(8% 0.03 270 / 0.96);\n  border-left-color: oklch(65% 0.28 280 / 0.2);\n  box-shadow: -8px 0 40px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.05);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-header { border-bottom-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-type { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-template { color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-name { color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-name:not([readonly]):hover { border-bottom-color: oklch(65% 0.28 280 / 0.3); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-name::placeholder { color: oklch(60% 0.04 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-docs-link { color: oklch(55% 0.06 280); border-color: oklch(65% 0.28 280 / 0.25); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-docs-link:hover { color: oklch(73% 0.16 280); border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-collapse-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-collapse-btn:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-close { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-close:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-bar { border-bottom-color: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(88% 0.02 270);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input::placeholder { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-input:focus { border-color: oklch(65% 0.28 280 / 0.45); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-clear { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-clear:hover { color: oklch(88% 0.02 270); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-results { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-group-label { color: oklch(50% 0.06 280); border-bottom-color: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-search-empty { color: oklch(50% 0.06 280); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-area { border-bottom-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn:hover { color: oklch(73% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tab-btn.active { color: oklch(73% 0.16 280); border-bottom-color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn:hover { color: oklch(88% 0.02 270); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn--prev { border-right-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-tabs-scroll-btn--next { border-left-color: oklch(65% 0.28 280 / 0.12); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-full-body { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-group-label {\n  color: oklch(50% 0.06 280);\n  border-bottom-color: oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-label { color: oklch(55% 0.08 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-hint { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-field-error { color: oklch(70% 0.18 20); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-input,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-select,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-textarea {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(88% 0.02 270);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-input:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-select:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-textarea:focus {\n  border-color: oklch(65% 0.28 280 / 0.45);\n  background: oklch(65% 0.28 280 / 0.08);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .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='%238080c0' stroke-width='1.5'/%3E%3C/svg%3E\");\n}\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn {\n  border-color: oklch(65% 0.28 280 / 0.15);\n  color: oklch(50% 0.06 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn:hover {\n  background: oklch(65% 0.28 280 / 0.08);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-mode-btn--active {\n  border-color: oklch(65% 0.28 280 / 0.3);\n  background: oklch(65% 0.28 280 / 0.12);\n  color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-playground-btn {\n  border-color: oklch(65% 0.28 280 / 0.2);\n  color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-feel-playground-btn:hover { background: oklch(65% 0.28 280 / 0.1); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle-label { color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle-track { background: oklch(65% 0.28 280 / 0.15); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-toggle input:checked + .bpmnkit-cfg-toggle-track { background: oklch(65% 0.28 280 / 0.7); }\n\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-action-btn {\n  border-color: oklch(65% 0.28 280 / 0.2);\n  background: oklch(65% 0.28 280 / 0.06);\n  color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-action-btn:hover {\n  background: oklch(65% 0.28 280 / 0.12);\n  border-color: oklch(65% 0.28 280 / 0.35);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-resize-handle:hover { background: oklch(65% 0.28 280 / 0.1); }\n\n/* \u2500\u2500 Searchable select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-ss-trigger {\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  text-align: left;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s, background 0.15s;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.bpmnkit-cfg-ss-trigger:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }\n.bpmnkit-cfg-ss-trigger:focus,\n.bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: var(--bpmnkit-accent, #6b9df7); background: rgba(255,255,255,0.09); }\n.bpmnkit-cfg-ss-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.bpmnkit-cfg-ss-arrow {\n  flex-shrink: 0;\n  width: 10px; height: 6px;\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-size: contain;\n}\n/* Dropdown panel \u2014 appended to document.body, positioned fixed */\n.bpmnkit-cfg-ss-dropdown {\n  background: #1a1a2e;\n  border: 1px solid rgba(255,255,255,0.15);\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n.bpmnkit-cfg-ss-search {\n  padding: 8px 10px;\n  background: rgba(255,255,255,0.05);\n  border: none;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\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  width: 100%;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n.bpmnkit-cfg-ss-search::placeholder { color: rgba(255,255,255,0.3); }\n.bpmnkit-cfg-ss-list {\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255,255,255,0.15) transparent;\n}\n.bpmnkit-cfg-ss-option {\n  padding: 7px 10px;\n  font-size: 12px;\n  color: rgba(255,255,255,0.85);\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-cfg-ss-option--focused { background: rgba(255,255,255,0.08); }\n.bpmnkit-cfg-ss-option--selected { color: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: rgba(107,157,247,0.1); }\n.bpmnkit-cfg-ss-empty { padding: 10px; font-size: 12px; color: rgba(255,255,255,0.3); text-align: center; }\n/* Neon theme \u2014 applied via data-theme=\"neon\" on the dropdown element itself */\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] {\n  background: oklch(9% 0.025 270);\n  border-color: oklch(65% 0.28 280 / 0.2);\n  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-search {\n  background: oklch(65% 0.28 280 / 0.05);\n  border-bottom-color: oklch(65% 0.28 280 / 0.12);\n  color: oklch(88% 0.02 270);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-search::placeholder { color: oklch(55% 0.06 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-list { scrollbar-color: oklch(65% 0.28 280 / 0.15) transparent; }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option { color: oklch(65% 0.1 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--focused { background: oklch(65% 0.28 280 / 0.08); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--selected { color: oklch(73% 0.16 280); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: oklch(65% 0.28 280 / 0.12); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"neon\"] .bpmnkit-cfg-ss-empty { color: oklch(50% 0.06 280); }\n/* Neon theme trigger */\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger { background: oklch(65% 0.28 280 / 0.06); border-color: oklch(65% 0.28 280 / 0.2); color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger:hover { background: oklch(65% 0.28 280 / 0.1); border-color: oklch(65% 0.28 280 / 0.3); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger:focus,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-cfg-ss-arrow {\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='%238080c0' stroke-width='1.5'/%3E%3C/svg%3E\");\n}\n/* Light theme \u2014 applied via data-theme=\"light\" on the dropdown element itself */\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] {\n  background: #ffffff;\n  border-color: rgba(0,0,0,0.12);\n  box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-search {\n  background: rgba(0,0,0,0.03);\n  border-bottom-color: rgba(0,0,0,0.08);\n  color: rgba(0,0,0,0.85);\n}\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-search::placeholder { color: rgba(0,0,0,0.3); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-list { scrollbar-color: rgba(0,0,0,0.15) transparent; }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option { color: rgba(0,0,0,0.85); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--focused { background: rgba(0,0,0,0.05); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--selected { color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-option--selected.bpmnkit-cfg-ss-option--focused { background: rgba(26,86,219,0.08); }\n.bpmnkit-cfg-ss-dropdown[data-theme=\"light\"] .bpmnkit-cfg-ss-empty { color: rgba(0,0,0,0.35); }\n/* Light theme trigger */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.85); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.2); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger:focus,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-trigger[aria-expanded=\"true\"] { border-color: var(--bpmnkit-accent, #1a56db); background: rgba(0,0,0,0.06); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cfg-ss-arrow {\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";
 export declare function injectConfigPanelStyles(): void;
 //# sourceMappingURL=css.d.ts.map

package/dist/config-panel/css.js

@@ -98,12 +98,33 @@ export const CONFIG_PANEL_CSS = `
   text-overflow: ellipsis;
 }
 .bpmnkit-cfg-full-name {
+  display: block;
+  width: 100%;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  outline: none;
+  padding: 0;
+  margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: inherit;
+  cursor: text;
+  border-radius: 0;
+}
+.bpmnkit-cfg-full-name:not([readonly]):hover {
+  border-bottom-color: rgba(255,255,255,0.2);
+}
+.bpmnkit-cfg-full-name:not([readonly]):focus {
+  border-bottom-color: var(--bpmnkit-accent, #6b9df7);
+}
+.bpmnkit-cfg-full-name::placeholder {
+  color: rgba(255,255,255,0.3);
+  font-weight: 400;
 }
 /* Docs link — ? button shown when the schema has a documentationRef */
 .bpmnkit-cfg-docs-link {
@@ -624,6 +645,8 @@ export const CONFIG_PANEL_CSS = `
 [data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-full-type { color: rgba(0,0,0,0.35); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-full-template { color: var(--bpmnkit-accent, #1a56db); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-full-name { color: rgba(0,0,0,0.9); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-full-name:not([readonly]):hover { border-bottom-color: rgba(0,0,0,0.2); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-full-name::placeholder { color: rgba(0,0,0,0.3); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-docs-link { color: rgba(0,0,0,0.4); border-color: rgba(0,0,0,0.2); }
 [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)); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-cfg-collapse-btn { color: rgba(0,0,0,0.4); }
@@ -717,6 +740,8 @@ export const CONFIG_PANEL_CSS = `
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-full-type { color: oklch(50% 0.06 280); }
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-full-template { color: oklch(73% 0.16 280); }
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-full-name { color: oklch(88% 0.02 270); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-full-name:not([readonly]):hover { border-bottom-color: oklch(65% 0.28 280 / 0.3); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-full-name::placeholder { color: oklch(60% 0.04 280); }
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-docs-link { color: oklch(55% 0.06 280); border-color: oklch(65% 0.28 280 / 0.25); }
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-docs-link:hover { color: oklch(73% 0.16 280); border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.1); }
 [data-bpmnkit-hud-theme="neon"] .bpmnkit-cfg-collapse-btn { color: oklch(50% 0.06 280); }