@bpmnkit/plugins 0.0.16 → 0.0.18

package/dist/live-mode/index.js

@@ -0,0 +1,479 @@
+import { injectLiveModeStyles } from "./css.js";
+const DB_NAME = "bpmnkit-live-mode-v1";
+const STORE_NAME = "live-state";
+function openDb() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, 1);
+        req.onupgradeneeded = () => {
+            req.result.createObjectStore(STORE_NAME);
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+async function loadLiveState(key) {
+    try {
+        const db = await openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, "readonly");
+            const req = tx.objectStore(STORE_NAME).get(key);
+            req.onsuccess = () => resolve(req.result ?? null);
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        return null;
+    }
+}
+async function saveLiveState(key, record) {
+    try {
+        const db = await openDb();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, "readwrite");
+            const req = tx.objectStore(STORE_NAME).put(record, key);
+            req.onsuccess = () => resolve();
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        // ignore persistence errors
+    }
+}
+async function clearLiveState(key) {
+    try {
+        const db = await openDb();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, "readwrite");
+            const req = tx.objectStore(STORE_NAME).delete(key);
+            req.onsuccess = () => resolve();
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        // ignore
+    }
+}
+// ── Plugin factory ────────────────────────────────────────────────────────────
+export function createLiveModePlugin(options) {
+    const proxyUrl = (options.proxyUrl ?? "http://localhost:3033").replace(/\/$/, "");
+    const pollIntervalMs = options.pollIntervalMs ?? 3000;
+    let canvasApi = null;
+    const unsubs = [];
+    let _status = "off";
+    let _enabled = false;
+    let _profile = null;
+    let _instanceKey = null;
+    let _processDefinitionKey = null;
+    let _bpmnProcessId = null;
+    let _currentDefs = null;
+    let _activeElementIds = new Set();
+    let _pollTimer = null;
+    let _deployDebounce = null;
+    // ── Conflict banner ───────────────────────────────────────────────────────
+    let _conflictBanner = null;
+    function removeConflictBanner() {
+        if (_conflictBanner) {
+            _conflictBanner.remove();
+            _conflictBanner = null;
+        }
+    }
+    function showConflictBanner(conflictIds, onFresh) {
+        removeConflictBanner();
+        const container = canvasApi?.container;
+        if (!container)
+            return;
+        const banner = document.createElement("div");
+        banner.className = "bpmnkit-live-conflict";
+        const title = document.createElement("div");
+        title.className = "bpmnkit-live-conflict-title";
+        title.textContent = "Migration conflict — instance is at removed elements";
+        banner.appendChild(title);
+        const list = document.createElement("ul");
+        list.className = "bpmnkit-live-conflict-list";
+        for (const id of conflictIds) {
+            const item = document.createElement("li");
+            item.className = "bpmnkit-live-conflict-item";
+            item.textContent = id;
+            list.appendChild(item);
+        }
+        banner.appendChild(list);
+        const btn = document.createElement("button");
+        btn.className = "bpmnkit-live-btn";
+        btn.textContent = "Start fresh";
+        btn.addEventListener("click", () => {
+            removeConflictBanner();
+            onFresh();
+        });
+        banner.appendChild(btn);
+        container.appendChild(banner);
+        _conflictBanner = banner;
+    }
+    // ── Variable inspector tooltip ────────────────────────────────────────────
+    const tooltipEl = document.createElement("div");
+    tooltipEl.className = "bpmnkit-live-vars-tooltip";
+    tooltipEl.style.display = "none";
+    document.body.appendChild(tooltipEl);
+    let _tooltipDebounce = null;
+    let _tooltipElementId = null;
+    const _varsCache = new Map();
+    function hideVarsTooltip() {
+        tooltipEl.style.display = "none";
+        _tooltipElementId = null;
+    }
+    function showVarsTooltip(vars, x, y) {
+        while (tooltipEl.firstChild !== null)
+            tooltipEl.removeChild(tooltipEl.firstChild);
+        if (vars.length === 0) {
+            hideVarsTooltip();
+            return;
+        }
+        for (const v of vars) {
+            const row = document.createElement("div");
+            row.className = "bpmnkit-live-vars-row";
+            const nameEl = document.createElement("span");
+            nameEl.className = "bpmnkit-live-vars-name";
+            nameEl.textContent = v.name;
+            const valEl = document.createElement("span");
+            valEl.className = "bpmnkit-live-vars-value";
+            valEl.textContent = typeof v.value === "object" ? JSON.stringify(v.value) : String(v.value);
+            row.appendChild(nameEl);
+            row.appendChild(valEl);
+            tooltipEl.appendChild(row);
+        }
+        tooltipEl.style.display = "block";
+        tooltipEl.style.left = `${x + 12}px`;
+        tooltipEl.style.top = `${y + 12}px`;
+    }
+    function onMouseMove(e) {
+        if (!_enabled || _instanceKey === null) {
+            hideVarsTooltip();
+            return;
+        }
+        const target = e.target?.closest("[data-bpmnkit-id]");
+        const elementId = target?.getAttribute("data-bpmnkit-id") ?? null;
+        if (!elementId || !_activeElementIds.has(elementId)) {
+            hideVarsTooltip();
+            return;
+        }
+        if (_tooltipElementId === elementId)
+            return;
+        _tooltipElementId = elementId;
+        if (_tooltipDebounce !== null)
+            clearTimeout(_tooltipDebounce);
+        _tooltipDebounce = setTimeout(async () => {
+            if (_tooltipElementId !== elementId || _instanceKey === null)
+                return;
+            try {
+                const cached = _varsCache.get(elementId);
+                if (cached !== undefined) {
+                    showVarsTooltip(cached, e.clientX, e.clientY);
+                    return;
+                }
+                const result = await proxyPost("/api/v2/variables/search", { filter: { processInstanceKey: _instanceKey } });
+                const vars = result.items ?? [];
+                _varsCache.set(elementId, vars);
+                if (_tooltipElementId === elementId) {
+                    showVarsTooltip(vars, e.clientX, e.clientY);
+                }
+            }
+            catch {
+                hideVarsTooltip();
+            }
+        }, 300);
+    }
+    // ── Proxy helpers ─────────────────────────────────────────────────────────
+    async function proxyGet(path) {
+        const headers = { accept: "application/json" };
+        if (_profile !== null)
+            headers["x-profile"] = _profile;
+        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 (_profile !== null)
+            headers["x-profile"] = _profile;
+        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 (_profile !== null)
+            headers["x-profile"] = _profile;
+        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();
+    }
+    // ── Status management ─────────────────────────────────────────────────────
+    const toggleEl = document.createElement("button");
+    toggleEl.className = "bpmnkit-live-toggle";
+    toggleEl.textContent = "⚡ Live";
+    const statusEl = document.createElement("span");
+    statusEl.className = "bpmnkit-live-status bpmnkit-live-status--off";
+    statusEl.textContent = "OFF";
+    function setStatus(s) {
+        _status = s;
+        options.onStatusChange?.(s);
+        // Update toggle class
+        toggleEl.className = "bpmnkit-live-toggle";
+        if (s === "live")
+            toggleEl.classList.add("bpmnkit-live-toggle--on");
+        if (s === "blocked-production" || s === "tests-failing" || s === "error")
+            toggleEl.classList.add("bpmnkit-live-toggle--blocked");
+        // Update status pill
+        const labelMap = {
+            off: "OFF",
+            connecting: "CONNECTING",
+            live: "LIVE",
+            error: "ERROR",
+            "blocked-production": "BLOCKED",
+            "tests-failing": "TESTS FAIL",
+        };
+        statusEl.textContent = labelMap[s];
+        statusEl.className = "bpmnkit-live-status";
+        if (s === "off")
+            statusEl.classList.add("bpmnkit-live-status--off");
+        else if (s === "connecting")
+            statusEl.classList.add("bpmnkit-live-status--connecting");
+        else if (s === "live")
+            statusEl.classList.add("bpmnkit-live-status--live");
+        else if (s === "error")
+            statusEl.classList.add("bpmnkit-live-status--error");
+        else
+            statusEl.classList.add("bpmnkit-live-status--blocked");
+    }
+    // ── Start new instance ────────────────────────────────────────────────────
+    async function startNewInstance(bpmnProcessId, stateKey) {
+        const res = await proxyPost("/api/v2/process-instances", { bpmnProcessId, variables: {} });
+        const key = res.processInstanceKey ?? res.key ?? "";
+        if (!key)
+            throw new Error("No instanceKey returned from start-instance");
+        await saveLiveState(stateKey, {
+            processDefinitionKey: _processDefinitionKey ?? "",
+            instanceKey: key,
+        });
+        return key;
+    }
+    // ── Polling ───────────────────────────────────────────────────────────────
+    function stopPolling() {
+        if (_pollTimer !== null) {
+            clearInterval(_pollTimer);
+            _pollTimer = null;
+        }
+    }
+    function startPolling() {
+        stopPolling();
+        _pollTimer = setInterval(async () => {
+            if (!_enabled || _instanceKey === null)
+                return;
+            try {
+                const res = await proxyPost("/api/v2/element-instances/search", {
+                    filter: { processInstanceKey: _instanceKey, state: "ACTIVE" },
+                });
+                const ids = (res.items ?? []).flatMap((item) => item.elementId !== undefined ? [item.elementId] : []);
+                _activeElementIds = new Set(ids);
+                options.tokenHighlight?.api.setActive(ids);
+                options.tokenHighlight?.api.addVisited(ids);
+                _varsCache.clear();
+            }
+            catch {
+                // Instance may be gone — try to start a new one
+                if (_bpmnProcessId !== null && _profile !== null) {
+                    const stateKey = `${_profile}:${_bpmnProcessId}`;
+                    try {
+                        await clearLiveState(stateKey);
+                        const newKey = await startNewInstance(_bpmnProcessId, stateKey);
+                        _instanceKey = newKey;
+                    }
+                    catch {
+                        // give up polling silently
+                    }
+                }
+            }
+        }, pollIntervalMs);
+    }
+    // ── Migration ─────────────────────────────────────────────────────────────
+    async function attemptMigration(instanceKey, targetProcessDefinitionKey, currentDefs) {
+        // Build mapping instructions using current element IDs
+        const currentProcess = currentDefs?.processes[0];
+        const currentElementIds = currentProcess
+            ? new Set(currentProcess.flowElements.map((el) => el.id))
+            : new Set();
+        const mappingInstructions = [...currentElementIds].map((id) => ({
+            sourceElementId: id,
+            targetElementId: id,
+        }));
+        await proxyPost(`/api/v2/process-instances/${instanceKey}/migration`, {
+            targetProcessDefinitionKey,
+            mappingInstructions,
+        });
+    }
+    // ── Deploy flow ───────────────────────────────────────────────────────────
+    async function deploy() {
+        try {
+            const profile = options.getProfile?.() ?? null;
+            if (profile?.isProduction === true) {
+                setStatus("blocked-production");
+                return;
+            }
+            _profile = profile?.name ?? null;
+            if (options.requireTestsGreen === true && options.runTests !== undefined) {
+                const passed = await options.runTests();
+                if (!passed) {
+                    setStatus("tests-failing");
+                    return;
+                }
+            }
+            setStatus("connecting");
+            const xml = options.getXml();
+            if (!xml)
+                throw new Error("No XML available");
+            const fileName = options.getFileName?.() ?? "process.bpmn";
+            const form = new FormData();
+            form.append("resources", new Blob([xml], { type: "application/xml" }), fileName);
+            const deployResult = await proxyPostMultipart("/api/deployments", form);
+            const firstProcess = deployResult.processes?.[0];
+            const newProcessDefinitionKey = firstProcess?.processDefinitionKey ?? "";
+            const newBpmnProcessId = firstProcess?.bpmnProcessId ?? "";
+            _processDefinitionKey = newProcessDefinitionKey;
+            _bpmnProcessId = newBpmnProcessId;
+            const stateKey = `${_profile ?? "_"}:${newBpmnProcessId}`;
+            const stored = await loadLiveState(stateKey);
+            if (stored?.instanceKey) {
+                // Try migration
+                try {
+                    await attemptMigration(stored.instanceKey, newProcessDefinitionKey, _currentDefs);
+                    _instanceKey = stored.instanceKey;
+                    await saveLiveState(stateKey, {
+                        processDefinitionKey: newProcessDefinitionKey,
+                        instanceKey: stored.instanceKey,
+                    });
+                }
+                catch {
+                    // Migration failed — show conflict banner and start fresh
+                    removeConflictBanner();
+                    const currentProcess = _currentDefs?.processes[0];
+                    const currentIds = new Set(currentProcess?.flowElements.map((el) => el.id) ?? []);
+                    const conflicts = [...currentIds].filter((id) => !currentIds.has(id));
+                    showConflictBanner(conflicts.length > 0 ? conflicts : [stored.instanceKey], async () => {
+                        await clearLiveState(stateKey);
+                        try {
+                            const newKey = await startNewInstance(newBpmnProcessId, stateKey);
+                            _instanceKey = newKey;
+                            startPolling();
+                        }
+                        catch {
+                            setStatus("error");
+                        }
+                    });
+                    const newKey = await startNewInstance(newBpmnProcessId, stateKey);
+                    _instanceKey = newKey;
+                }
+            }
+            else {
+                const newKey = await startNewInstance(newBpmnProcessId, stateKey);
+                _instanceKey = newKey;
+            }
+            setStatus("live");
+            startPolling();
+        }
+        catch {
+            setStatus("error");
+        }
+    }
+    function scheduleDeploy() {
+        if (!_enabled)
+            return;
+        if (_deployDebounce !== null)
+            clearTimeout(_deployDebounce);
+        _deployDebounce = setTimeout(() => {
+            deploy().catch(() => setStatus("error"));
+        }, 500);
+    }
+    // ── Toggle logic ──────────────────────────────────────────────────────────
+    function enable() {
+        _enabled = true;
+        scheduleDeploy();
+    }
+    function disable() {
+        _enabled = false;
+        stopPolling();
+        if (_deployDebounce !== null)
+            clearTimeout(_deployDebounce);
+        options.tokenHighlight?.api.clear();
+        _activeElementIds.clear();
+        _instanceKey = null;
+        setStatus("off");
+        removeConflictBanner();
+        hideVarsTooltip();
+    }
+    toggleEl.addEventListener("click", () => {
+        if (_enabled) {
+            disable();
+        }
+        else {
+            enable();
+        }
+    });
+    // ── Canvas install/uninstall ──────────────────────────────────────────────
+    return {
+        name: "live-mode",
+        toggle: toggleEl,
+        status: statusEl,
+        disable,
+        install(api) {
+            canvasApi = api;
+            injectLiveModeStyles();
+            // Listen for diagram changes
+            const onAny = api.on;
+            unsubs.push(onAny("diagram:load", (arg) => {
+                const defs = arg?.definitions ?? null;
+                _currentDefs = defs;
+                if (_enabled)
+                    scheduleDeploy();
+            }));
+            unsubs.push(onAny("diagram:change", (arg) => {
+                const defs = arg?.definitions ?? null;
+                if (defs !== null)
+                    _currentDefs = defs;
+                if (_enabled)
+                    scheduleDeploy();
+            }));
+            // Variable inspector mousemove
+            const viewport = api.container;
+            if (viewport) {
+                viewport.addEventListener("mousemove", onMouseMove);
+                unsubs.push(() => viewport.removeEventListener("mousemove", onMouseMove));
+            }
+        },
+        uninstall() {
+            disable();
+            for (const unsub of unsubs)
+                unsub();
+            unsubs.length = 0;
+            tooltipEl.remove();
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/pattern-advisor/css.d.ts

@@ -0,0 +1,4 @@
+export declare const STYLE_ID = "bpmnkit-pattern-advisor-v1";
+export declare const CSS = "\n/* \u2500\u2500 Side 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\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-pa-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 13px;\n  color: var(--bpmnkit-fg, #1a1a2e);\n  background: var(--bpmnkit-surface, #ffffff);\n}\n\n.bpmnkit-pa-header {\n  padding: 10px 12px 8px;\n  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.bpmnkit-pa-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--bpmnkit-fg, #1a1a2e);\n  margin: 0;\n}\n\n.bpmnkit-pa-counts {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.bpmnkit-pa-badge {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 1px 5px;\n  border-radius: 4px;\n  letter-spacing: 0.02em;\n}\n.bpmnkit-pa-badge-error {\n  background: rgba(220, 50, 50, 0.15);\n  color: var(--bpmnkit-danger, #dc2626);\n}\n.bpmnkit-pa-badge-warning {\n  background: rgba(217, 119, 6, 0.15);\n  color: var(--bpmnkit-warn, #d97706);\n}\n.bpmnkit-pa-badge-info {\n  background: rgba(26, 86, 219, 0.12);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n\n.bpmnkit-pa-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0 8px;\n}\n\n.bpmnkit-pa-empty {\n  padding: 24px 16px;\n  text-align: center;\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  font-size: 12px;\n  line-height: 1.5;\n}\n\n/* \u2500\u2500 Finding group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-pa-group {\n  padding: 6px 0 0;\n  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);\n  margin-bottom: 0;\n}\n.bpmnkit-pa-group:last-child {\n  border-bottom: none;\n}\n\n.bpmnkit-pa-group-header {\n  padding: 2px 12px 4px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n/* \u2500\u2500 Individual finding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-pa-finding {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 6px 12px;\n}\n\n.bpmnkit-pa-severity {\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 2px 5px;\n  border-radius: 4px;\n  margin-top: 1px;\n  white-space: nowrap;\n}\n.bpmnkit-pa-severity-error {\n  background: rgba(220, 50, 50, 0.2);\n  color: var(--bpmnkit-danger, #dc2626);\n}\n.bpmnkit-pa-severity-warning {\n  background: rgba(217, 119, 6, 0.2);\n  color: var(--bpmnkit-warn, #d97706);\n}\n.bpmnkit-pa-severity-info {\n  background: rgba(26, 86, 219, 0.15);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n\n.bpmnkit-pa-finding-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.bpmnkit-pa-finding-msg {\n  color: var(--bpmnkit-fg, #1a1a2e);\n  line-height: 1.45;\n  word-break: break-word;\n  font-size: 12.5px;\n}\n\n.bpmnkit-pa-finding-sug {\n  color: var(--bpmnkit-fg-muted, #6666a0);\n  font-size: 11.5px;\n  margin-top: 2px;\n  line-height: 1.4;\n}\n\n.bpmnkit-pa-finding-actions {\n  display: flex;\n  gap: 6px;\n  margin-top: 5px;\n  flex-wrap: wrap;\n}\n\n.bpmnkit-pa-btn {\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 4px;\n  border: 1px solid var(--bpmnkit-border, #d0d0e8);\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  color: var(--bpmnkit-fg, #1a1a2e);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.bpmnkit-pa-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.bpmnkit-pa-btn-fix {\n  border-color: var(--bpmnkit-accent, #1a56db);\n  color: var(--bpmnkit-accent, #1a56db);\n}\n.bpmnkit-pa-btn-fix:hover {\n  background: var(--bpmnkit-accent, #1a56db);\n  color: #fff;\n}\n\n/* \u2500\u2500 Canvas element badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-pa-error-ring > .bpmnkit-shape-body,\n.bpmnkit-pa-error-ring > rect:first-child {\n  stroke: var(--bpmnkit-danger, #dc2626) !important;\n  stroke-width: 2.5px !important;\n}\n.bpmnkit-pa-warning-ring > .bpmnkit-shape-body,\n.bpmnkit-pa-warning-ring > rect:first-child {\n  stroke: var(--bpmnkit-warn, #d97706) !important;\n  stroke-width: 2px !important;\n}\n.bpmnkit-pa-info-ring > .bpmnkit-shape-body,\n.bpmnkit-pa-info-ring > rect:first-child {\n  stroke: var(--bpmnkit-accent, #1a56db) !important;\n  stroke-width: 1.5px !important;\n}\n";
+export declare function injectPatternAdvisorStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/pattern-advisor/css.js

@@ -0,0 +1,198 @@
+export const STYLE_ID = "bpmnkit-pattern-advisor-v1";
+export const CSS = `
+/* ── Side panel ───────────────────────────────────────────────────────────── */
+.bpmnkit-pa-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 13px;
+  color: var(--bpmnkit-fg, #1a1a2e);
+  background: var(--bpmnkit-surface, #ffffff);
+}
+
+.bpmnkit-pa-header {
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.bpmnkit-pa-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg, #1a1a2e);
+  margin: 0;
+}
+
+.bpmnkit-pa-counts {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.bpmnkit-pa-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 4px;
+  letter-spacing: 0.02em;
+}
+.bpmnkit-pa-badge-error {
+  background: rgba(220, 50, 50, 0.15);
+  color: var(--bpmnkit-danger, #dc2626);
+}
+.bpmnkit-pa-badge-warning {
+  background: rgba(217, 119, 6, 0.15);
+  color: var(--bpmnkit-warn, #d97706);
+}
+.bpmnkit-pa-badge-info {
+  background: rgba(26, 86, 219, 0.12);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+
+.bpmnkit-pa-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0 8px;
+}
+
+.bpmnkit-pa-empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* ── Finding group ─────────────────────────────────────────────────────────── */
+.bpmnkit-pa-group {
+  padding: 6px 0 0;
+  border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8);
+  margin-bottom: 0;
+}
+.bpmnkit-pa-group:last-child {
+  border-bottom: none;
+}
+
+.bpmnkit-pa-group-header {
+  padding: 2px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Individual finding ────────────────────────────────────────────────────── */
+.bpmnkit-pa-finding {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 12px;
+}
+
+.bpmnkit-pa-severity {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 2px 5px;
+  border-radius: 4px;
+  margin-top: 1px;
+  white-space: nowrap;
+}
+.bpmnkit-pa-severity-error {
+  background: rgba(220, 50, 50, 0.2);
+  color: var(--bpmnkit-danger, #dc2626);
+}
+.bpmnkit-pa-severity-warning {
+  background: rgba(217, 119, 6, 0.2);
+  color: var(--bpmnkit-warn, #d97706);
+}
+.bpmnkit-pa-severity-info {
+  background: rgba(26, 86, 219, 0.15);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+
+.bpmnkit-pa-finding-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.bpmnkit-pa-finding-msg {
+  color: var(--bpmnkit-fg, #1a1a2e);
+  line-height: 1.45;
+  word-break: break-word;
+  font-size: 12.5px;
+}
+
+.bpmnkit-pa-finding-sug {
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  font-size: 11.5px;
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+.bpmnkit-pa-finding-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 5px;
+  flex-wrap: wrap;
+}
+
+.bpmnkit-pa-btn {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--bpmnkit-border, #d0d0e8);
+  background: var(--bpmnkit-surface-2, #eeeef8);
+  color: var(--bpmnkit-fg, #1a1a2e);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.bpmnkit-pa-btn:hover {
+  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12));
+  border-color: var(--bpmnkit-accent, #1a56db);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+
+.bpmnkit-pa-btn-fix {
+  border-color: var(--bpmnkit-accent, #1a56db);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+.bpmnkit-pa-btn-fix:hover {
+  background: var(--bpmnkit-accent, #1a56db);
+  color: #fff;
+}
+
+/* ── Canvas element badges ─────────────────────────────────────────────────── */
+.bpmnkit-pa-error-ring > .bpmnkit-shape-body,
+.bpmnkit-pa-error-ring > rect:first-child {
+  stroke: var(--bpmnkit-danger, #dc2626) !important;
+  stroke-width: 2.5px !important;
+}
+.bpmnkit-pa-warning-ring > .bpmnkit-shape-body,
+.bpmnkit-pa-warning-ring > rect:first-child {
+  stroke: var(--bpmnkit-warn, #d97706) !important;
+  stroke-width: 2px !important;
+}
+.bpmnkit-pa-info-ring > .bpmnkit-shape-body,
+.bpmnkit-pa-info-ring > rect:first-child {
+  stroke: var(--bpmnkit-accent, #1a56db) !important;
+  stroke-width: 1.5px !important;
+}
+`;
+export function injectPatternAdvisorStyles() {
+    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