@bpmnkit/plugins 0.0.8

package/dist/process-runner/index.js

@@ -0,0 +1,549 @@
+import { injectProcessRunnerStyles } from "./css.js";
+// ── IndexedDB persistence for input variables ───────────────────────────────
+function openRunnerDb() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open("bpmnkit-process-runner-v1", 1);
+        req.onupgradeneeded = () => {
+            req.result.createObjectStore("data");
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+function inputVarsKey(projectId) {
+    return projectId !== null ? `input-vars:${projectId}` : "input-vars";
+}
+async function loadInputVars(projectId) {
+    try {
+        const db = await openRunnerDb();
+        return new Promise((resolve) => {
+            const req = db
+                .transaction("data", "readonly")
+                .objectStore("data")
+                .get(inputVarsKey(projectId));
+            req.onsuccess = () => {
+                const raw = req.result;
+                resolve(Array.isArray(raw) ? raw : []);
+            };
+            req.onerror = () => resolve([]);
+        });
+    }
+    catch {
+        return [];
+    }
+}
+async function saveInputVars(projectId, vars) {
+    try {
+        const db = await openRunnerDb();
+        await new Promise((resolve) => {
+            const tx = db.transaction("data", "readwrite");
+            tx.objectStore("data").put(vars, inputVarsKey(projectId));
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => resolve();
+        });
+    }
+    catch {
+        // ignore — IndexedDB unavailable
+    }
+}
+// ── Internal state ──────────────────────────────────────────────────────────
+const AUTO_PLAY_DELAY_MS = 600;
+// ── Plugin factory ──────────────────────────────────────────────────────────
+const PLAY_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M4 2.5l10 5.5-10 5.5V2.5z"/></svg>';
+export function createProcessRunnerPlugin(options) {
+    const { engine } = options;
+    let canvasApi = null;
+    let currentInstance = null;
+    let stopTrackHighlight;
+    let mode = "idle";
+    let playModeActive = false;
+    /** The process ID of the currently displayed diagram. */
+    let currentProcessId;
+    /** The project ID used to scope input variable persistence. */
+    let currentProjectId = null;
+    /** Pending step resolvers — each represents a paused beforeComplete call. */
+    const stepQueue = [];
+    /** Accumulated FEEL expression evaluations for the current run. */
+    const feelEvals = [];
+    /** Current variable state, updated from variable:set events. */
+    const variables = new Map();
+    /** Errors emitted during the current run. */
+    const errors = [];
+    /** Input variables configured by the user (persisted in IndexedDB). */
+    const inputVars = [];
+    const toolbarEl = document.createElement("div");
+    toolbarEl.className = "bpmnkit-runner-toolbar";
+    /** Entry button placed in the HUD action bar (styled by initEditorHud). */
+    const playButtonEl = document.createElement("button");
+    playButtonEl.title = "Play mode";
+    playButtonEl.innerHTML = PLAY_ICON;
+    const unsubs = [];
+    // ── Play panel DOM ──────────────────────────────────────────────────────
+    const playPanelEl = document.createElement("div");
+    playPanelEl.className = "bpmnkit-runner-play-panel";
+    const playTabBarEl = document.createElement("div");
+    playTabBarEl.className = "bpmnkit-runner-play-tabs";
+    function makeTabBtn(label, active) {
+        const b = document.createElement("button");
+        b.className = active
+            ? "bpmnkit-runner-play-tab bpmnkit-runner-play-tab--active"
+            : "bpmnkit-runner-play-tab";
+        b.textContent = label;
+        return b;
+    }
+    const varTabBtn = makeTabBtn("Variables", true);
+    const feelTabBtn = makeTabBtn("FEEL", false);
+    const errorsTabBtn = makeTabBtn("Errors", false);
+    const inputTabBtn = makeTabBtn("Input", false);
+    playTabBarEl.appendChild(varTabBtn);
+    playTabBarEl.appendChild(feelTabBtn);
+    playTabBarEl.appendChild(errorsTabBtn);
+    playTabBarEl.appendChild(inputTabBtn);
+    function makePaneEl(hidden) {
+        const d = document.createElement("div");
+        d.className = hidden
+            ? "bpmnkit-runner-play-pane bpmnkit-runner-play-pane--hidden"
+            : "bpmnkit-runner-play-pane";
+        return d;
+    }
+    const varsPaneEl = makePaneEl(false);
+    const feelPaneEl = makePaneEl(true);
+    const errorsPaneEl = makePaneEl(true);
+    const ivarsPaneEl = makePaneEl(true);
+    playPanelEl.appendChild(playTabBarEl);
+    playPanelEl.appendChild(varsPaneEl);
+    playPanelEl.appendChild(feelPaneEl);
+    playPanelEl.appendChild(errorsPaneEl);
+    playPanelEl.appendChild(ivarsPaneEl);
+    function switchPlayTab(tab) {
+        varTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "variables");
+        feelTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "feel");
+        errorsTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "errors");
+        inputTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "input");
+        varsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "variables");
+        feelPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "feel");
+        errorsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "errors");
+        ivarsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "input");
+    }
+    varTabBtn.addEventListener("click", () => switchPlayTab("variables"));
+    feelTabBtn.addEventListener("click", () => switchPlayTab("feel"));
+    errorsTabBtn.addEventListener("click", () => switchPlayTab("errors"));
+    inputTabBtn.addEventListener("click", () => switchPlayTab("input"));
+    // ── Render functions ────────────────────────────────────────────────────
+    function emptyEl(text) {
+        const d = document.createElement("div");
+        d.className = "bpmnkit-runner-play-empty";
+        d.textContent = text;
+        return d;
+    }
+    function clearEl(el) {
+        while (el.firstChild !== null)
+            el.removeChild(el.firstChild);
+    }
+    function renderVariables() {
+        clearEl(varsPaneEl);
+        if (variables.size === 0) {
+            varsPaneEl.appendChild(emptyEl("No variables yet."));
+            return;
+        }
+        for (const [name, value] of variables) {
+            const row = document.createElement("div");
+            row.className = "bpmnkit-runner-play-var-row";
+            const nameEl = document.createElement("span");
+            nameEl.className = "bpmnkit-runner-play-var-name";
+            nameEl.textContent = name;
+            const valueEl = document.createElement("span");
+            valueEl.className = "bpmnkit-runner-play-var-value";
+            valueEl.textContent = JSON.stringify(value);
+            row.appendChild(nameEl);
+            row.appendChild(valueEl);
+            varsPaneEl.appendChild(row);
+        }
+    }
+    function renderFeelEvals() {
+        clearEl(feelPaneEl);
+        if (feelEvals.length === 0) {
+            feelPaneEl.appendChild(emptyEl("No FEEL expressions evaluated yet."));
+            return;
+        }
+        const groups = new Map();
+        for (const ev of feelEvals) {
+            let arr = groups.get(ev.elementId);
+            if (arr === undefined) {
+                arr = [];
+                groups.set(ev.elementId, arr);
+            }
+            arr.push({ property: ev.property, expression: ev.expression, result: ev.result });
+        }
+        for (const [elementId, evals] of groups) {
+            const groupEl = document.createElement("div");
+            groupEl.className = "bpmnkit-runner-play-feel-group";
+            const headerEl = document.createElement("div");
+            headerEl.className = "bpmnkit-runner-play-feel-header";
+            headerEl.textContent = elementId;
+            groupEl.appendChild(headerEl);
+            for (const ev of evals) {
+                const rowEl = document.createElement("div");
+                rowEl.className = "bpmnkit-runner-play-feel-row";
+                const propEl = document.createElement("div");
+                propEl.className = "bpmnkit-runner-play-feel-prop";
+                propEl.textContent = ev.property;
+                const exprEl = document.createElement("code");
+                exprEl.className = "bpmnkit-runner-play-feel-expr";
+                exprEl.textContent = ev.expression;
+                const resultRowEl = document.createElement("div");
+                resultRowEl.className = "bpmnkit-runner-play-feel-result-row";
+                const arrowEl = document.createElement("span");
+                arrowEl.className = "bpmnkit-runner-play-feel-arrow";
+                arrowEl.textContent = "\u2192";
+                const resultEl = document.createElement("span");
+                resultEl.className = "bpmnkit-runner-play-feel-result";
+                resultEl.textContent = JSON.stringify(ev.result);
+                resultRowEl.appendChild(arrowEl);
+                resultRowEl.appendChild(resultEl);
+                rowEl.appendChild(propEl);
+                rowEl.appendChild(exprEl);
+                rowEl.appendChild(resultRowEl);
+                groupEl.appendChild(rowEl);
+            }
+            feelPaneEl.appendChild(groupEl);
+        }
+    }
+    function renderErrors() {
+        clearEl(errorsPaneEl);
+        if (errors.length === 0) {
+            errorsPaneEl.appendChild(emptyEl("No errors."));
+            return;
+        }
+        for (const err of errors) {
+            const rowEl = document.createElement("div");
+            rowEl.className = "bpmnkit-runner-play-error-row";
+            if (err.elementId !== undefined) {
+                const idEl = document.createElement("div");
+                idEl.className = "bpmnkit-runner-play-error-id";
+                idEl.textContent = err.elementId;
+                rowEl.appendChild(idEl);
+            }
+            const msgEl = document.createElement("div");
+            msgEl.className = "bpmnkit-runner-play-error-msg";
+            msgEl.textContent = err.message;
+            rowEl.appendChild(msgEl);
+            errorsPaneEl.appendChild(rowEl);
+        }
+    }
+    function buildInputVars() {
+        const result = {};
+        for (const { name, value } of inputVars) {
+            const trimmed = name.trim();
+            if (trimmed === "")
+                continue;
+            try {
+                result[trimmed] = JSON.parse(value);
+            }
+            catch {
+                result[trimmed] = value;
+            }
+        }
+        return result;
+    }
+    function renderInputVars() {
+        clearEl(ivarsPaneEl);
+        for (let i = 0; i < inputVars.length; i++) {
+            const entry = inputVars[i];
+            if (entry === undefined)
+                continue;
+            const row = document.createElement("div");
+            row.className = "bpmnkit-runner-play-ivar-row";
+            const nameInput = document.createElement("input");
+            nameInput.className = "bpmnkit-runner-play-ivar-name";
+            nameInput.placeholder = "name";
+            nameInput.value = entry.name;
+            nameInput.addEventListener("input", () => {
+                const v = inputVars[i];
+                if (v !== undefined) {
+                    v.name = nameInput.value;
+                    void saveInputVars(currentProjectId, inputVars);
+                }
+            });
+            const eqEl = document.createElement("span");
+            eqEl.className = "bpmnkit-runner-play-ivar-eq";
+            eqEl.textContent = "=";
+            const valueInput = document.createElement("input");
+            valueInput.className = "bpmnkit-runner-play-ivar-value";
+            valueInput.placeholder = "value (JSON or string)";
+            valueInput.value = entry.value;
+            valueInput.addEventListener("input", () => {
+                const v = inputVars[i];
+                if (v !== undefined) {
+                    v.value = valueInput.value;
+                    void saveInputVars(currentProjectId, inputVars);
+                }
+            });
+            const delBtn = document.createElement("button");
+            delBtn.className = "bpmnkit-runner-play-ivar-del";
+            delBtn.textContent = "\u00D7";
+            delBtn.addEventListener("click", () => {
+                inputVars.splice(i, 1);
+                renderInputVars();
+                void saveInputVars(currentProjectId, inputVars);
+            });
+            row.appendChild(nameInput);
+            row.appendChild(eqEl);
+            row.appendChild(valueInput);
+            row.appendChild(delBtn);
+            ivarsPaneEl.appendChild(row);
+        }
+        const addBtn = document.createElement("button");
+        addBtn.className = "bpmnkit-runner-play-ivar-add";
+        addBtn.textContent = "+ Add variable";
+        addBtn.addEventListener("click", () => {
+            inputVars.push({ name: "", value: "" });
+            renderInputVars();
+            void saveInputVars(currentProjectId, inputVars);
+            // Focus the name field of the new row
+            const rows = ivarsPaneEl.querySelectorAll(".bpmnkit-runner-play-ivar-name");
+            rows[rows.length - 1]?.focus();
+        });
+        ivarsPaneEl.appendChild(addBtn);
+    }
+    // ── Helpers ────────────────────────────────────────────────────────────
+    function getPrimaryProcessId() {
+        return currentProcessId;
+    }
+    function clearRunState() {
+        feelEvals.length = 0;
+        variables.clear();
+        errors.length = 0;
+        renderVariables();
+        renderFeelEvals();
+        renderErrors();
+    }
+    /** Cancel running instance and reset run state. Stays in play mode. */
+    function cleanup() {
+        currentInstance?.cancel();
+        currentInstance = null;
+        stopTrackHighlight?.();
+        stopTrackHighlight = undefined;
+        stepQueue.length = 0;
+        options.tokenHighlight?.api.clear();
+        clearRunState();
+        mode = "idle";
+        updateToolbar();
+    }
+    /** Exit play mode entirely (also cancels any running instance). */
+    function exitPlayMode() {
+        currentInstance?.cancel();
+        currentInstance = null;
+        stopTrackHighlight?.();
+        stopTrackHighlight = undefined;
+        stepQueue.length = 0;
+        options.tokenHighlight?.api.clear();
+        clearRunState();
+        mode = "idle";
+        playModeActive = false;
+        updateToolbar();
+        options.onExitPlayMode?.();
+        options.onHidePlayTab?.();
+    }
+    function startInstance(vars, stepMode = false) {
+        if (currentInstance !== null)
+            cleanup();
+        const processId = getPrimaryProcessId();
+        if (processId === undefined)
+            return;
+        mode = stepMode ? "running-step" : "running-auto";
+        updateToolbar();
+        const beforeComplete = stepMode
+            ? (_elementId) => new Promise((resolve) => {
+                stepQueue.push(resolve);
+                updateToolbar();
+            })
+            : (_elementId) => new Promise((resolve) => {
+                setTimeout(resolve, AUTO_PLAY_DELAY_MS);
+            });
+        const instance = engine.start(processId, vars, { beforeComplete });
+        currentInstance = instance;
+        if (options.tokenHighlight !== undefined) {
+            stopTrackHighlight = options.tokenHighlight.api.trackInstance(instance);
+        }
+        instance.onChange((evt) => {
+            const type = evt.type;
+            if (type === "process:completed" || type === "process:failed") {
+                if (type === "process:failed") {
+                    const error = evt.error;
+                    if (typeof error === "string") {
+                        // Avoid duplicating if element:failed already logged this message
+                        const alreadyRecorded = errors.some((e) => e.message === error);
+                        if (!alreadyRecorded) {
+                            errors.push({ message: error });
+                            renderErrors();
+                        }
+                    }
+                }
+                stopTrackHighlight?.();
+                stopTrackHighlight = undefined;
+                currentInstance = null;
+                stepQueue.length = 0;
+                mode = "idle";
+                updateToolbar();
+            }
+            else if (type === "feel:evaluated") {
+                const elementId = evt.elementId;
+                const property = evt.property;
+                const expression = evt.expression;
+                if (typeof elementId === "string" &&
+                    typeof property === "string" &&
+                    typeof expression === "string") {
+                    feelEvals.push({ elementId, property, expression, result: evt.result });
+                    renderFeelEvals();
+                }
+            }
+            else if (type === "variable:set") {
+                const name = evt.name;
+                if (typeof name === "string") {
+                    variables.set(name, evt.value);
+                    renderVariables();
+                }
+            }
+            else if (type === "element:failed") {
+                const elementId = evt.elementId;
+                const error = evt.error;
+                if (typeof elementId === "string" && typeof error === "string") {
+                    errors.push({ elementId, message: error });
+                    renderErrors();
+                    options.tokenHighlight?.api.setError(elementId);
+                }
+            }
+        });
+    }
+    // ── Toolbar rendering ──────────────────────────────────────────────────
+    function btn(label, extraClass) {
+        const b = document.createElement("button");
+        b.className =
+            extraClass !== undefined ? `bpmnkit-runner-btn ${extraClass}` : "bpmnkit-runner-btn";
+        b.textContent = label;
+        return b;
+    }
+    playButtonEl.addEventListener("click", () => {
+        playModeActive = true;
+        updateToolbar();
+        options.onEnterPlayMode?.();
+        options.onShowPlayTab?.();
+    });
+    function updateToolbar() {
+        while (toolbarEl.firstChild !== null) {
+            toolbarEl.removeChild(toolbarEl.firstChild);
+        }
+        // Hide the HUD entry button while in play mode
+        playButtonEl.style.display = playModeActive ? "none" : "";
+        if (!playModeActive)
+            return;
+        const isRunning = mode !== "idle";
+        const hasPendingStep = mode === "running-step" && stepQueue.length > 0;
+        // Run button
+        const runBtn = btn("\u25B6 Run");
+        runBtn.disabled = isRunning;
+        runBtn.addEventListener("click", () => {
+            if (mode === "idle")
+                startInstance(buildInputVars());
+        });
+        toolbarEl.appendChild(runBtn);
+        // One Step button — enabled in idle (start step run) or when paused (advance)
+        const oneStepBtn = btn("\u21A6 One Step", "bpmnkit-runner-btn--step");
+        oneStepBtn.disabled = isRunning && !hasPendingStep;
+        oneStepBtn.addEventListener("click", () => {
+            if (mode === "running-step" && stepQueue.length > 0) {
+                const next = stepQueue.shift();
+                if (next !== undefined) {
+                    next();
+                    updateToolbar();
+                }
+            }
+            else if (mode === "idle") {
+                startInstance(buildInputVars(), true);
+            }
+        });
+        toolbarEl.appendChild(oneStepBtn);
+        // Cancel button
+        const cancelBtn = btn("\u25A0 Cancel", "bpmnkit-runner-btn--stop");
+        cancelBtn.disabled = !isRunning;
+        cancelBtn.addEventListener("click", () => {
+            if (mode !== "idle")
+                cleanup();
+        });
+        toolbarEl.appendChild(cancelBtn);
+        // Exit button
+        const exitBtn = btn("Exit", "bpmnkit-runner-btn--exit");
+        exitBtn.addEventListener("click", () => exitPlayMode());
+        toolbarEl.appendChild(exitBtn);
+    }
+    // ── CanvasPlugin ───────────────────────────────────────────────────────
+    return {
+        name: "process-runner",
+        /** The toolbar element. Place this in the tabs bar center slot; shows running controls during play mode. */
+        toolbar: toolbarEl,
+        /** Icon button for the HUD action bar. Pass to `initEditorHud` as `playButton`. */
+        playButton: playButtonEl,
+        /** Exits play mode and cancels any running instance. */
+        exitPlayMode,
+        install(api) {
+            canvasApi = api;
+            injectProcessRunnerStyles();
+            updateToolbar();
+            renderVariables();
+            renderFeelEvals();
+            renderErrors();
+            renderInputVars();
+            if (options.playContainer !== undefined) {
+                options.playContainer.appendChild(playPanelEl);
+            }
+            // Load persisted input variables for the initial project
+            currentProjectId = options.getProjectId?.() ?? null;
+            void loadInputVars(currentProjectId).then((loaded) => {
+                inputVars.length = 0;
+                for (const v of loaded)
+                    inputVars.push(v);
+                renderInputVars();
+            });
+            const onAny = api.on;
+            unsubs.push(api.on("diagram:load", (defs) => {
+                currentProcessId = defs.processes[0]?.id;
+                engine.deploy({ bpmn: defs });
+                if (currentInstance !== null)
+                    cleanup();
+                // Reload input vars if the project changed
+                const pid = options.getProjectId?.() ?? null;
+                if (pid !== currentProjectId) {
+                    currentProjectId = pid;
+                    void loadInputVars(pid).then((loaded) => {
+                        inputVars.length = 0;
+                        for (const v of loaded)
+                            inputVars.push(v);
+                        renderInputVars();
+                    });
+                }
+                updateToolbar();
+            }), api.on("diagram:clear", () => {
+                currentProcessId = undefined;
+                if (currentInstance !== null)
+                    cleanup();
+                updateToolbar();
+            }), onAny("diagram:change", (defs) => {
+                const typed = defs;
+                currentProcessId = typed.processes?.[0]?.id;
+                engine.deploy({ bpmn: defs });
+                if (currentInstance !== null)
+                    cleanup();
+            }));
+        },
+        uninstall() {
+            for (const off of unsubs)
+                off();
+            cleanup();
+            toolbarEl.remove();
+            playPanelEl.remove();
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/storage/auto-save.d.ts

@@ -0,0 +1,11 @@
+export declare class AutoSave {
+    private readonly _timers;
+    private readonly _latest;
+    private readonly _delay;
+    private readonly _onSave;
+    constructor(onSave: (fileId: string, content: string) => Promise<void>, delay?: number);
+    schedule(fileId: string, content: string): void;
+    flush(): Promise<void>;
+    private _save;
+}
+//# sourceMappingURL=auto-save.d.ts.map

package/dist/storage/auto-save.js

@@ -0,0 +1,44 @@
+export class AutoSave {
+    _timers = new Map();
+    _latest = new Map();
+    _delay;
+    _onSave;
+    constructor(onSave, delay = 500) {
+        this._onSave = onSave;
+        this._delay = delay;
+        document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "hidden")
+                void this.flush();
+        });
+        window.addEventListener("beforeunload", () => void this.flush());
+    }
+    schedule(fileId, content) {
+        this._latest.set(fileId, content);
+        const existing = this._timers.get(fileId);
+        if (existing !== undefined)
+            clearTimeout(existing);
+        this._timers.set(fileId, setTimeout(() => {
+            void this._save(fileId);
+        }, this._delay));
+    }
+    async flush() {
+        const entries = [...this._latest.entries()];
+        for (const [fileId] of entries) {
+            const timer = this._timers.get(fileId);
+            if (timer !== undefined)
+                clearTimeout(timer);
+            this._timers.delete(fileId);
+        }
+        this._latest.clear();
+        await Promise.all(entries.map(([id, content]) => this._onSave(id, content)));
+    }
+    async _save(fileId) {
+        const content = this._latest.get(fileId);
+        if (content === undefined)
+            return;
+        this._latest.delete(fileId);
+        this._timers.delete(fileId);
+        await this._onSave(fileId, content);
+    }
+}
+//# sourceMappingURL=auto-save.js.map

package/dist/storage/css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css.d.ts.map

package/dist/storage/css.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css.js.map