@bpmnkit/plugins 0.0.15 → 0.0.17

package/dist/deploy/index.js

@@ -0,0 +1,412 @@
+import { optimize } from "@bpmnkit/core";
+import { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles } from "./css.js";
+export { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles };
+function el(tag, cls, text) {
+    const e = document.createElement(tag);
+    e.className = cls;
+    if (text !== undefined)
+        e.textContent = text;
+    return e;
+}
+function statusEl(kind, text) {
+    const wrap = el("div", `dp-status dp-status-${kind}`);
+    const dot = el("span", `dp-dot dp-dot-${kind}`);
+    const msg = el("span", "");
+    msg.textContent = text;
+    wrap.appendChild(dot);
+    wrap.appendChild(msg);
+    return wrap;
+}
+// ── Plugin factory ─────────────────────────────────────────────────────────────
+export function createDeployPlugin(options) {
+    const proxyUrl = (options.proxyUrl ?? "http://localhost:3033").replace(/\/$/, "");
+    const operateUrl = options.operateUrl?.replace(/\/$/, "") ?? null;
+    // Per-profile deploy results (processDefinitionKey from last deploy)
+    let _lastDeployedKey = null;
+    let _selectedProfile = null;
+    // ── Proxy helpers ──────────────────────────────────────────────────────────
+    async function proxyGet(path) {
+        const headers = { accept: "application/json" };
+        if (_selectedProfile)
+            headers["x-profile"] = _selectedProfile;
+        const res = await fetch(`${proxyUrl}${path}`, { headers });
+        if (!res.ok)
+            throw new Error(`HTTP ${res.status}`);
+        return res.json();
+    }
+    async function proxyPost(path, body) {
+        const headers = {
+            "content-type": "application/json",
+            accept: "application/json",
+        };
+        if (_selectedProfile)
+            headers["x-profile"] = _selectedProfile;
+        const res = await fetch(`${proxyUrl}${path}`, {
+            method: "POST",
+            headers,
+            body: JSON.stringify(body),
+        });
+        if (!res.ok) {
+            const text = await res.text();
+            throw new Error(`HTTP ${res.status}: ${text}`);
+        }
+        return res.json();
+    }
+    async function proxyPostMultipart(path, form) {
+        const headers = { accept: "application/json" };
+        if (_selectedProfile)
+            headers["x-profile"] = _selectedProfile;
+        const res = await fetch(`${proxyUrl}${path}`, {
+            method: "POST",
+            headers,
+            body: form,
+        });
+        if (!res.ok) {
+            const text = await res.text();
+            throw new Error(`HTTP ${res.status}: ${text}`);
+        }
+        return res.json();
+    }
+    // ── Panel render ───────────────────────────────────────────────────────────
+    let _root = null;
+    async function render() {
+        if (!_root)
+            return;
+        _root.innerHTML = "";
+        const container = _root;
+        try {
+            await fetch(`${proxyUrl}/status`, { signal: AbortSignal.timeout(2000) });
+            renderPanel(container);
+        }
+        catch {
+            renderOffline(container);
+        }
+    }
+    function renderOffline(container) {
+        const wrap = el("div", "dp-offline");
+        const icon = el("div", "dp-offline-icon");
+        icon.textContent = "⚙";
+        const title = el("div", "dp-offline-title", "Proxy server not running");
+        const hint = el("div", "dp-offline-hint", "Start the proxy server to deploy processes and manage instances:");
+        const code = el("pre", "dp-offline-code", "casen proxy start");
+        wrap.appendChild(icon);
+        wrap.appendChild(title);
+        wrap.appendChild(hint);
+        wrap.appendChild(code);
+        container.appendChild(wrap);
+    }
+    function renderPanel(container) {
+        const root = el("div", "dp-root");
+        container.appendChild(root);
+        // ── Profile section ────────────────────────────────────────────────────
+        const profileSection = el("div", "dp-section");
+        const profileTitle = el("div", "dp-section-title", "Profile");
+        const profileRow = el("div", "dp-row");
+        const profileSelect = el("select", "dp-select");
+        const refreshBtn = el("button", "dp-btn dp-btn-secondary");
+        refreshBtn.textContent = "↻";
+        refreshBtn.title = "Refresh";
+        refreshBtn.style.width = "32px";
+        refreshBtn.style.flexShrink = "0";
+        profileRow.appendChild(profileSelect);
+        profileRow.appendChild(refreshBtn);
+        profileSection.appendChild(profileTitle);
+        profileSection.appendChild(profileRow);
+        root.appendChild(profileSection);
+        // ── Cluster health section ─────────────────────────────────────────────
+        const clusterSection = el("div", "dp-section");
+        const clusterTitle = el("div", "dp-section-title", "Cluster");
+        const clusterStatus = el("div", "");
+        clusterStatus.appendChild(statusEl("info", "Select a profile to check cluster health"));
+        clusterSection.appendChild(clusterTitle);
+        clusterSection.appendChild(clusterStatus);
+        root.appendChild(clusterSection);
+        root.appendChild(el("hr", "dp-divider"));
+        // ── Optimizer section ──────────────────────────────────────────────────
+        const optSection = el("div", "dp-section");
+        const optTitle = el("div", "dp-section-title", "Process Validation");
+        const optStatus = el("div", "");
+        optStatus.appendChild(statusEl("info", "Loading…"));
+        optSection.appendChild(optTitle);
+        optSection.appendChild(optStatus);
+        root.appendChild(optSection);
+        // ── Deploy section ─────────────────────────────────────────────────────
+        const deploySection = el("div", "dp-section");
+        const deployBtn = el("button", "dp-btn dp-btn-primary", "Deploy Process");
+        deployBtn.disabled = true;
+        const deployStatus = el("div", "");
+        deploySection.appendChild(deployBtn);
+        deploySection.appendChild(deployStatus);
+        root.appendChild(deploySection);
+        // ── Start instance section (shown after deploy or if already deployed) ──
+        const startSection = el("div", "dp-section");
+        startSection.style.display = "none";
+        root.appendChild(el("hr", "dp-divider"));
+        const startTitle = el("div", "dp-section-title", "Start Process Instance");
+        const varLabel = el("div", "dp-section-title");
+        varLabel.style.textTransform = "none";
+        varLabel.style.fontSize = "11px";
+        varLabel.style.color = "rgba(255,255,255,0.4)";
+        varLabel.textContent = "Variables (JSON, optional)";
+        const varInput = el("textarea", "dp-textarea");
+        varInput.placeholder = '{\n  "key": "value"\n}';
+        const startBtn = el("button", "dp-btn dp-btn-secondary", "Start Instance");
+        const startStatus = el("div", "");
+        startSection.appendChild(startTitle);
+        startSection.appendChild(varLabel);
+        startSection.appendChild(varInput);
+        startSection.appendChild(startBtn);
+        startSection.appendChild(startStatus);
+        root.appendChild(startSection);
+        // ── State ──────────────────────────────────────────────────────────────
+        let _topologyOk = false;
+        let _optimizerOk = false;
+        let _deployedKey = _lastDeployedKey;
+        function updateDeployBtn() {
+            deployBtn.disabled = !_topologyOk || !_optimizerOk;
+        }
+        // ── Profile loading ────────────────────────────────────────────────────
+        async function loadProfiles() {
+            try {
+                const profiles = await proxyGet("/profiles");
+                profileSelect.innerHTML = "";
+                for (const p of profiles) {
+                    const opt = document.createElement("option");
+                    opt.value = p.name;
+                    opt.textContent = `${p.name}${p.active ? " ✓" : ""}`;
+                    if (p.active && _selectedProfile === null) {
+                        _selectedProfile = p.name;
+                        opt.selected = true;
+                    }
+                    else if (p.name === _selectedProfile) {
+                        opt.selected = true;
+                    }
+                    profileSelect.appendChild(opt);
+                }
+                if (profiles.length > 0 && _selectedProfile === null) {
+                    const first = profiles[0];
+                    if (first) {
+                        _selectedProfile = first.name;
+                        profileSelect.value = first.name;
+                    }
+                }
+                await checkTopology();
+            }
+            catch {
+                profileSelect.innerHTML = '<option value="">No profiles found</option>';
+            }
+        }
+        profileSelect.addEventListener("change", () => {
+            _selectedProfile = profileSelect.value || null;
+            void checkTopology();
+        });
+        refreshBtn.addEventListener("click", () => {
+            void loadProfiles();
+        });
+        // ── Topology check ─────────────────────────────────────────────────────
+        async function checkTopology() {
+            clusterStatus.innerHTML = "";
+            clusterStatus.appendChild(statusEl("info", "Checking…"));
+            try {
+                const topo = await proxyGet("/api/topology");
+                _topologyOk = true;
+                const brokers = topo.brokers?.length ?? 0;
+                const version = topo.gatewayVersion ?? "unknown";
+                clusterStatus.innerHTML = "";
+                clusterStatus.appendChild(statusEl("ok", `Connected — ${brokers} broker${brokers === 1 ? "" : "s"}, gateway ${version}`));
+            }
+            catch (err) {
+                _topologyOk = false;
+                clusterStatus.innerHTML = "";
+                clusterStatus.appendChild(statusEl("err", `Cluster unreachable: ${String(err)}`));
+            }
+            updateDeployBtn();
+            await checkExistingDeployment();
+        }
+        // ── Optimizer check ────────────────────────────────────────────────────
+        function runOptimizerCheck() {
+            const defs = options.getDefinitions();
+            if (!defs) {
+                optStatus.innerHTML = "";
+                optStatus.appendChild(statusEl("info", "No process loaded"));
+                _optimizerOk = false;
+                updateDeployBtn();
+                return;
+            }
+            const report = optimize(defs);
+            const errors = report.findings.filter((f) => f.severity === "error");
+            const warnings = report.findings.filter((f) => f.severity === "warning");
+            optStatus.innerHTML = "";
+            if (errors.length > 0) {
+                _optimizerOk = false;
+                optStatus.appendChild(statusEl("err", `${errors.length} error${errors.length === 1 ? "" : "s"} — fix before deploying`));
+                const list = el("div", "dp-finding-list");
+                for (const f of errors) {
+                    const item = el("div", "dp-finding");
+                    const badge = el("span", "dp-finding-badge", "error");
+                    const msg = el("span", "");
+                    msg.textContent = f.message;
+                    item.appendChild(badge);
+                    item.appendChild(msg);
+                    list.appendChild(item);
+                }
+                optStatus.appendChild(list);
+            }
+            else if (warnings.length > 0) {
+                _optimizerOk = true;
+                optStatus.appendChild(statusEl("warn", `${warnings.length} warning${warnings.length === 1 ? "" : "s"} — deploy allowed`));
+            }
+            else {
+                _optimizerOk = true;
+                optStatus.appendChild(statusEl("ok", "No issues found"));
+            }
+            updateDeployBtn();
+        }
+        // ── Check if already deployed ──────────────────────────────────────────
+        async function checkExistingDeployment() {
+            const defs = options.getDefinitions();
+            const processId = defs?.processes?.[0]?.id;
+            if (!processId || !_topologyOk)
+                return;
+            try {
+                const result = await proxyPost("/api/process-definitions/search", { filter: { bpmnProcessId: processId }, page: { from: 0, limit: 1 } });
+                const item = result.items?.[0];
+                if (item?.processDefinitionKey) {
+                    _deployedKey = item.processDefinitionKey;
+                    _lastDeployedKey = _deployedKey;
+                    showStartSection();
+                }
+            }
+            catch {
+                // not yet deployed — no action needed
+            }
+        }
+        function showStartSection() {
+            startSection.style.display = "";
+        }
+        // ── Deploy ─────────────────────────────────────────────────────────────
+        deployBtn.addEventListener("click", () => {
+            void doDeploy();
+        });
+        async function doDeploy() {
+            const xml = options.getXml();
+            if (!xml) {
+                deployStatus.innerHTML = "";
+                deployStatus.appendChild(statusEl("err", "No process XML available"));
+                return;
+            }
+            const fileName = options.getFileName?.() ?? "process.bpmn";
+            deployBtn.disabled = true;
+            deployBtn.textContent = "Deploying…";
+            deployStatus.innerHTML = "";
+            try {
+                const form = new FormData();
+                const blob = new Blob([xml], { type: "application/xml" });
+                form.append("resources", blob, fileName);
+                const result = await proxyPostMultipart("/api/deployments", form);
+                const process = result.processes?.[0];
+                _deployedKey = process?.processDefinitionKey ?? null;
+                _lastDeployedKey = _deployedKey;
+                deployStatus.innerHTML = "";
+                const box = el("div", "dp-result-box");
+                const keyLine = document.createElement("div");
+                keyLine.textContent = "Deployment key: ";
+                const keySpan = el("span", "dp-result-key", result.deploymentKey ?? "—");
+                keyLine.appendChild(keySpan);
+                const defLine = document.createElement("div");
+                defLine.textContent = `Process: ${process?.bpmnProcessId ?? "—"} v${process?.version ?? "?"}`;
+                box.appendChild(keyLine);
+                box.appendChild(defLine);
+                deployStatus.appendChild(box);
+                showStartSection();
+            }
+            catch (err) {
+                deployStatus.innerHTML = "";
+                deployStatus.appendChild(statusEl("err", `Deploy failed: ${String(err)}`));
+            }
+            finally {
+                deployBtn.disabled = false;
+                deployBtn.textContent = "Deploy Process";
+                updateDeployBtn();
+            }
+        }
+        // ── Start instance ─────────────────────────────────────────────────────
+        startBtn.addEventListener("click", () => {
+            void doStartInstance();
+        });
+        async function doStartInstance() {
+            if (!_deployedKey) {
+                startStatus.innerHTML = "";
+                startStatus.appendChild(statusEl("err", "No deployed process key available"));
+                return;
+            }
+            let variables = {};
+            const raw = varInput.value.trim();
+            if (raw) {
+                try {
+                    variables = JSON.parse(raw);
+                }
+                catch {
+                    startStatus.innerHTML = "";
+                    startStatus.appendChild(statusEl("err", "Variables must be valid JSON"));
+                    return;
+                }
+            }
+            startBtn.disabled = true;
+            startBtn.textContent = "Starting…";
+            startStatus.innerHTML = "";
+            try {
+                const result = await proxyPost("/api/process-instances", {
+                    processDefinitionKey: _deployedKey,
+                    variables,
+                });
+                const instanceKey = result.processInstanceKey;
+                startStatus.innerHTML = "";
+                const box = el("div", "dp-result-box");
+                const keyLine = document.createElement("div");
+                keyLine.textContent = "Instance key: ";
+                const keySpan = el("span", "dp-result-key", instanceKey ?? "—");
+                keyLine.appendChild(keySpan);
+                box.appendChild(keyLine);
+                if (operateUrl && instanceKey) {
+                    const linkLine = document.createElement("div");
+                    linkLine.style.marginTop = "6px";
+                    const link = el("a", "dp-link", "View in Operate →");
+                    link.setAttribute("href", `${operateUrl}#/instances/${instanceKey}`);
+                    link.setAttribute("target", "_blank");
+                    link.setAttribute("rel", "noopener noreferrer");
+                    linkLine.appendChild(link);
+                    box.appendChild(linkLine);
+                }
+                startStatus.appendChild(box);
+            }
+            catch (err) {
+                startStatus.innerHTML = "";
+                startStatus.appendChild(statusEl("err", `Start failed: ${String(err)}`));
+            }
+            finally {
+                startBtn.disabled = false;
+                startBtn.textContent = "Start Instance";
+            }
+        }
+        // ── Initial load ───────────────────────────────────────────────────────
+        runOptimizerCheck();
+        void loadProfiles();
+    }
+    // ── CanvasPlugin interface ─────────────────────────────────────────────────
+    return {
+        name: "deploy",
+        install() {
+            injectDeployStyles();
+        },
+        mount(container) {
+            _root = container;
+            void render();
+        },
+        onTabActivated() {
+            // Re-render to get fresh proxy status and optimizer state
+            void render();
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/element-docs/index.js

@@ -153,6 +153,60 @@ const CSS = `
 [data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__md hr { border-top-color: rgba(0,0,0,0.08); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__detail-header { border-bottom-color: rgba(0,0,0,0.07); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__shape-icon { color: rgba(0,0,0,0.55); }
+/* Neon theme */
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs { color: oklch(73% 0.16 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input {
+  background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
+  color: oklch(73% 0.16 280);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input::placeholder { color: oklch(45% 0.08 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input:focus {
+  border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.08);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__cat-label {
+  color: oklch(45% 0.08 280); background: oklch(6% 0.04 280 / 0.98);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item:hover {
+  background: oklch(65% 0.28 280 / 0.06); border-left-color: oklch(72% 0.18 185);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item.active {
+  background: oklch(65% 0.28 280 / 0.1); border-left-color: oklch(72% 0.18 185);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item-title { color: oklch(80% 0.14 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item-brief { color: oklch(45% 0.08 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__back { color: oklch(72% 0.18 185); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__back:hover { color: oklch(82% 0.14 185); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-title { color: oklch(85% 0.1 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-subtitle { color: oklch(45% 0.08 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-header { border-bottom-color: oklch(65% 0.28 280 / 0.1); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__shape-icon { color: oklch(60% 0.14 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md h2 { color: oklch(45% 0.08 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md h3 { color: oklch(65% 0.12 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md p,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md ul,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md ol,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md li { color: oklch(70% 0.12 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md code {
+  background: oklch(65% 0.28 280 / 0.08); color: oklch(72% 0.18 185);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md pre {
+  background: oklch(3% 0.02 270 / 0.7); border-color: oklch(65% 0.28 280 / 0.1);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md pre code { color: oklch(73% 0.16 280); background: none; }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md blockquote {
+  border-left-color: oklch(72% 0.18 185); background: oklch(72% 0.18 185 / 0.06);
+  color: oklch(65% 0.12 280);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md th {
+  background: oklch(65% 0.28 280 / 0.07); color: oklch(55% 0.1 280);
+  border-bottom-color: oklch(65% 0.28 280 / 0.12);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md td {
+  color: oklch(70% 0.12 280); border-bottom-color: oklch(65% 0.28 280 / 0.07);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md strong { color: oklch(85% 0.1 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md em { color: oklch(68% 0.12 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md hr { border-top-color: oklch(65% 0.28 280 / 0.1); }
 `;
 function injectStyles() {
     if (document.getElementById(STYLE_ID))

package/dist/live-mode/css.d.ts

@@ -0,0 +1,4 @@
+export declare const STYLE_ID = "bpmnkit-live-mode-v1";
+export declare const CSS = "\n/* \u2500\u2500 Toggle 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\u2500 */\n.bpmnkit-live-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: 6px;\n  border: 1px solid var(--bpmnkit-border, #d0d0e8);\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  color: var(--bpmnkit-fg, #1a1a2e);\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;\n}\n.bpmnkit-live-toggle:hover {\n  border-color: var(--bpmnkit-accent, #1a56db);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n.bpmnkit-live-toggle--on {\n  border-color: var(--bpmnkit-success, #16a34a);\n  color: var(--bpmnkit-success, #16a34a);\n  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);\n}\n.bpmnkit-live-toggle--blocked {\n  border-color: var(--bpmnkit-danger, #dc2626);\n  color: var(--bpmnkit-danger, #dc2626);\n  background: rgba(220, 38, 38, 0.07);\n}\n\n/* \u2500\u2500 Status pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-live-status {\n  display: inline-block;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  padding: 2px 7px;\n  border-radius: 20px;\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  border: 1px solid var(--bpmnkit-border, #d0d0e8);\n}\n.bpmnkit-live-status--off {\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  color: var(--bpmnkit-fg-muted, #6666a0);\n}\n.bpmnkit-live-status--connecting {\n  background: rgba(217, 119, 6, 0.12);\n  color: var(--bpmnkit-warn, #d97706);\n  border-color: var(--bpmnkit-warn, #d97706);\n}\n.bpmnkit-live-status--live {\n  background: rgba(22, 163, 74, 0.12);\n  color: var(--bpmnkit-success, #16a34a);\n  border-color: var(--bpmnkit-success, #16a34a);\n}\n.bpmnkit-live-status--error {\n  background: rgba(220, 38, 38, 0.12);\n  color: var(--bpmnkit-danger, #dc2626);\n  border-color: var(--bpmnkit-danger, #dc2626);\n}\n.bpmnkit-live-status--blocked {\n  background: rgba(220, 38, 38, 0.07);\n  color: var(--bpmnkit-danger, #dc2626);\n  border-color: var(--bpmnkit-danger, #dc2626);\n}\n\n/* \u2500\u2500 Conflict banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-live-conflict {\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  background: rgba(220, 38, 38, 0.07);\n  border: 1px solid var(--bpmnkit-danger, #dc2626);\n  border-radius: 8px;\n  padding: 10px 14px;\n  margin: 8px 0;\n  font-size: 12px;\n  color: var(--bpmnkit-fg, #1a1a2e);\n}\n.bpmnkit-live-conflict-title {\n  font-weight: 700;\n  color: var(--bpmnkit-danger, #dc2626);\n  margin-bottom: 6px;\n}\n.bpmnkit-live-conflict-list {\n  list-style: disc;\n  padding-left: 18px;\n  margin-bottom: 8px;\n}\n.bpmnkit-live-conflict-item {\n  font-size: 11px;\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  font-family: ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", monospace;\n  margin-bottom: 2px;\n}\n.bpmnkit-live-btn {\n  font-size: 11px;\n  padding: 3px 10px;\n  border-radius: 5px;\n  border: 1px solid var(--bpmnkit-border, #d0d0e8);\n  background: var(--bpmnkit-surface, #ffffff);\n  color: var(--bpmnkit-fg, #1a1a2e);\n  cursor: pointer;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-weight: 600;\n}\n.bpmnkit-live-btn:hover {\n  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));\n  border-color: var(--bpmnkit-accent, #1a56db);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n\n/* \u2500\u2500 Variable inspector tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-live-vars-tooltip {\n  position: fixed;\n  z-index: 9999;\n  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.96));\n  border: 1px solid var(--bpmnkit-panel-border, rgba(0,0,0,0.1));\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0,0,0,0.14);\n  padding: 8px 12px;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 12px;\n  min-width: 160px;\n  max-width: 300px;\n  pointer-events: none;\n}\n.bpmnkit-live-vars-row {\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  padding: 2px 0;\n  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);\n}\n.bpmnkit-live-vars-row:last-child {\n  border-bottom: none;\n}\n.bpmnkit-live-vars-name {\n  font-weight: 600;\n  color: var(--bpmnkit-fg, #1a1a2e);\n  flex-shrink: 0;\n}\n.bpmnkit-live-vars-value {\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  font-family: ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", monospace;\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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\u2500 */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-live-vars-tooltip {\n  background: rgba(255,255,255,0.96);\n  border-color: rgba(0,0,0,0.1);\n}\n";
+export declare function injectLiveModeStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/live-mode/css.js

@@ -0,0 +1,170 @@
+export const STYLE_ID = "bpmnkit-live-mode-v1";
+export const CSS = `
+/* ── Toggle button ─────────────────────────────────────────────────────────── */
+.bpmnkit-live-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--bpmnkit-border, #d0d0e8);
+  background: var(--bpmnkit-surface-2, #eeeef8);
+  color: var(--bpmnkit-fg, #1a1a2e);
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.bpmnkit-live-toggle:hover {
+  border-color: var(--bpmnkit-accent, #1a56db);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+.bpmnkit-live-toggle--on {
+  border-color: var(--bpmnkit-success, #16a34a);
+  color: var(--bpmnkit-success, #16a34a);
+  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
+}
+.bpmnkit-live-toggle--blocked {
+  border-color: var(--bpmnkit-danger, #dc2626);
+  color: var(--bpmnkit-danger, #dc2626);
+  background: rgba(220, 38, 38, 0.07);
+}
+
+/* ── Status pill ───────────────────────────────────────────────────────────── */
+.bpmnkit-live-status {
+  display: inline-block;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 20px;
+  background: var(--bpmnkit-surface-2, #eeeef8);
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  border: 1px solid var(--bpmnkit-border, #d0d0e8);
+}
+.bpmnkit-live-status--off {
+  background: var(--bpmnkit-surface-2, #eeeef8);
+  color: var(--bpmnkit-fg-muted, #6666a0);
+}
+.bpmnkit-live-status--connecting {
+  background: rgba(217, 119, 6, 0.12);
+  color: var(--bpmnkit-warn, #d97706);
+  border-color: var(--bpmnkit-warn, #d97706);
+}
+.bpmnkit-live-status--live {
+  background: rgba(22, 163, 74, 0.12);
+  color: var(--bpmnkit-success, #16a34a);
+  border-color: var(--bpmnkit-success, #16a34a);
+}
+.bpmnkit-live-status--error {
+  background: rgba(220, 38, 38, 0.12);
+  color: var(--bpmnkit-danger, #dc2626);
+  border-color: var(--bpmnkit-danger, #dc2626);
+}
+.bpmnkit-live-status--blocked {
+  background: rgba(220, 38, 38, 0.07);
+  color: var(--bpmnkit-danger, #dc2626);
+  border-color: var(--bpmnkit-danger, #dc2626);
+}
+
+/* ── Conflict banner ───────────────────────────────────────────────────────── */
+.bpmnkit-live-conflict {
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  background: rgba(220, 38, 38, 0.07);
+  border: 1px solid var(--bpmnkit-danger, #dc2626);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin: 8px 0;
+  font-size: 12px;
+  color: var(--bpmnkit-fg, #1a1a2e);
+}
+.bpmnkit-live-conflict-title {
+  font-weight: 700;
+  color: var(--bpmnkit-danger, #dc2626);
+  margin-bottom: 6px;
+}
+.bpmnkit-live-conflict-list {
+  list-style: disc;
+  padding-left: 18px;
+  margin-bottom: 8px;
+}
+.bpmnkit-live-conflict-item {
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
+  margin-bottom: 2px;
+}
+.bpmnkit-live-btn {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--bpmnkit-border, #d0d0e8);
+  background: var(--bpmnkit-surface, #ffffff);
+  color: var(--bpmnkit-fg, #1a1a2e);
+  cursor: pointer;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-weight: 600;
+}
+.bpmnkit-live-btn:hover {
+  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));
+  border-color: var(--bpmnkit-accent, #1a56db);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+
+/* ── Variable inspector tooltip ────────────────────────────────────────────── */
+.bpmnkit-live-vars-tooltip {
+  position: fixed;
+  z-index: 9999;
+  background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.96));
+  border: 1px solid var(--bpmnkit-panel-border, rgba(0,0,0,0.1));
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
+  padding: 8px 12px;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  min-width: 160px;
+  max-width: 300px;
+  pointer-events: none;
+}
+.bpmnkit-live-vars-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  padding: 2px 0;
+  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);
+}
+.bpmnkit-live-vars-row:last-child {
+  border-bottom: none;
+}
+.bpmnkit-live-vars-name {
+  font-weight: 600;
+  color: var(--bpmnkit-fg, #1a1a2e);
+  flex-shrink: 0;
+}
+.bpmnkit-live-vars-value {
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Light theme overrides ─────────────────────────────────────────────────── */
+[data-bpmnkit-hud-theme="light"] .bpmnkit-live-vars-tooltip {
+  background: rgba(255,255,255,0.96);
+  border-color: rgba(0,0,0,0.1);
+}
+`;
+export function injectLiveModeStyles() {
+    if (document.getElementById(STYLE_ID) !== null)
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map