@bpmnkit/plugins 0.0.16 → 0.0.18

package/dist/variable-flow/css.js

@@ -0,0 +1,98 @@
+const CSS = `
+.bpmnkit-vf-producer [data-bpmnkit-shape-bg],
+.bpmnkit-vf-producer rect.djs-outline {
+  outline: 2px solid var(--bpmnkit-success, #16a34a);
+  outline-offset: 2px;
+}
+.bpmnkit-vf-consumer [data-bpmnkit-shape-bg],
+.bpmnkit-vf-consumer rect.djs-outline {
+  outline: 2px solid var(--bpmnkit-accent, #1a56db);
+  outline-offset: 2px;
+}
+.bpmnkit-vf-both [data-bpmnkit-shape-bg],
+.bpmnkit-vf-both rect.djs-outline {
+  outline: 2px solid var(--bpmnkit-teal, #0d9488);
+  outline-offset: 2px;
+}
+
+/* Tooltip */
+.bpmnkit-vf-tooltip {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  background: var(--bpmnkit-surface, #fff);
+  border: 1px solid var(--bpmnkit-border, #d0d0e8);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-family: var(--bpmnkit-font, system-ui, sans-serif);
+  font-size: 12px;
+  color: var(--bpmnkit-fg, #1a1a2e);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  max-width: 280px;
+  white-space: nowrap;
+}
+.bpmnkit-vf-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.bpmnkit-vf-tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0;
+}
+.bpmnkit-vf-tooltip-role {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.bpmnkit-vf-tooltip-role-writes {
+  background: var(--bpmnkit-success, #16a34a);
+}
+.bpmnkit-vf-tooltip-role-reads {
+  background: var(--bpmnkit-accent, #1a56db);
+}
+
+/* Legend panel */
+.bpmnkit-vf-legend {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 6px 8px;
+  font-family: var(--bpmnkit-font, system-ui, sans-serif);
+  font-size: 12px;
+  color: var(--bpmnkit-fg-muted, #6666a0);
+  background: var(--bpmnkit-surface, #fff);
+  border-top: 1px solid var(--bpmnkit-border, #d0d0e8);
+}
+.bpmnkit-vf-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.bpmnkit-vf-legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.bpmnkit-vf-legend-dot-writes { background: var(--bpmnkit-success, #16a34a); }
+.bpmnkit-vf-legend-dot-reads  { background: var(--bpmnkit-accent, #1a56db); }
+.bpmnkit-vf-legend-dot-both   { background: var(--bpmnkit-teal, #0d9488); }
+`;
+let injected = false;
+export function injectVariableFlowStyles() {
+    if (injected)
+        return;
+    injected = true;
+    const style = document.createElement("style");
+    style.textContent = CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/variable-flow/index.d.ts

@@ -0,0 +1,12 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export interface VariableFlowOptions {
+    /** Container element to mount the legend into. */
+    container?: HTMLElement;
+}
+export interface VariableFlowPlugin extends CanvasPlugin {
+    readonly name: "variable-flow";
+    /** Legend element showing the color key. */
+    readonly legend: HTMLElement;
+}
+export declare function createVariableFlowPlugin(options?: VariableFlowOptions): VariableFlowPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/variable-flow/index.js

@@ -0,0 +1,226 @@
+import { optimize } from "@bpmnkit/core";
+import { injectVariableFlowStyles } from "./css.js";
+// ── Plugin factory ────────────────────────────────────────────────────────────
+export function createVariableFlowPlugin(options) {
+    let canvasApi = null;
+    const unsubs = [];
+    // Per-element role maps derived from data-flow/role findings
+    const elementProduces = new Map();
+    const elementConsumes = new Map();
+    // Per-edge scope map derived from data-flow/edge-scope findings
+    const edgeScope = new Map();
+    // ── Tooltip ──────────────────────────────────────────────────────────────
+    const tooltipEl = document.createElement("div");
+    tooltipEl.className = "bpmnkit-vf-tooltip";
+    tooltipEl.style.display = "none";
+    document.body.appendChild(tooltipEl);
+    function showTooltip(elementId, x, y) {
+        const produces = elementProduces.get(elementId);
+        const consumes = elementConsumes.get(elementId);
+        const scope = edgeScope.get(elementId);
+        const hasRoleData = (produces !== undefined && produces.length > 0) ||
+            (consumes !== undefined && consumes.length > 0);
+        const hasScopeData = scope !== undefined && scope.length > 0;
+        if (!hasRoleData && !hasScopeData) {
+            hideTooltip();
+            return;
+        }
+        while (tooltipEl.firstChild !== null)
+            tooltipEl.removeChild(tooltipEl.firstChild);
+        const title = document.createElement("div");
+        title.className = "bpmnkit-vf-tooltip-title";
+        tooltipEl.appendChild(title);
+        if (hasScopeData && scope !== undefined) {
+            title.textContent = "Variables in scope";
+            for (const v of scope) {
+                const row = document.createElement("div");
+                row.className = "bpmnkit-vf-tooltip-row";
+                const dot = document.createElement("span");
+                dot.className = "bpmnkit-vf-tooltip-role bpmnkit-vf-tooltip-role-reads";
+                const label = document.createElement("span");
+                label.textContent = v;
+                row.appendChild(dot);
+                row.appendChild(label);
+                tooltipEl.appendChild(row);
+            }
+        }
+        else {
+            title.textContent = "Variable Flow";
+            if (produces !== undefined) {
+                for (const v of produces) {
+                    const row = document.createElement("div");
+                    row.className = "bpmnkit-vf-tooltip-row";
+                    const dot = document.createElement("span");
+                    dot.className = "bpmnkit-vf-tooltip-role bpmnkit-vf-tooltip-role-writes";
+                    const label = document.createElement("span");
+                    label.textContent = `writes  ${v}`;
+                    row.appendChild(dot);
+                    row.appendChild(label);
+                    tooltipEl.appendChild(row);
+                }
+            }
+            if (consumes !== undefined) {
+                for (const v of consumes) {
+                    const row = document.createElement("div");
+                    row.className = "bpmnkit-vf-tooltip-row";
+                    const dot = document.createElement("span");
+                    dot.className = "bpmnkit-vf-tooltip-role bpmnkit-vf-tooltip-role-reads";
+                    const label = document.createElement("span");
+                    label.textContent = `reads   ${v}`;
+                    row.appendChild(dot);
+                    row.appendChild(label);
+                    tooltipEl.appendChild(row);
+                }
+            }
+        }
+        tooltipEl.style.display = "block";
+        const rect = tooltipEl.getBoundingClientRect();
+        const left = Math.min(x + 12, window.innerWidth - rect.width - 8);
+        const top = Math.min(y + 12, window.innerHeight - rect.height - 8);
+        tooltipEl.style.left = `${left}px`;
+        tooltipEl.style.top = `${top}px`;
+    }
+    function hideTooltip() {
+        tooltipEl.style.display = "none";
+    }
+    // ── Legend ────────────────────────────────────────────────────────────────
+    const legendEl = document.createElement("div");
+    legendEl.className = "bpmnkit-vf-legend";
+    function makeLegendItem(dotClass, label) {
+        const item = document.createElement("div");
+        item.className = "bpmnkit-vf-legend-item";
+        const dot = document.createElement("span");
+        dot.className = `bpmnkit-vf-legend-dot ${dotClass}`;
+        const text = document.createElement("span");
+        text.textContent = label;
+        item.appendChild(dot);
+        item.appendChild(text);
+        return item;
+    }
+    legendEl.appendChild(makeLegendItem("bpmnkit-vf-legend-dot-writes", "Writes"));
+    legendEl.appendChild(makeLegendItem("bpmnkit-vf-legend-dot-reads", "Reads"));
+    legendEl.appendChild(makeLegendItem("bpmnkit-vf-legend-dot-both", "Reads & writes"));
+    // ── Canvas overlay management ─────────────────────────────────────────────
+    const ROLE_CLASSES = ["bpmnkit-vf-producer", "bpmnkit-vf-consumer", "bpmnkit-vf-both"];
+    function clearOverlays() {
+        const vp = canvasApi?.viewportEl;
+        if (vp === undefined)
+            return;
+        for (const cls of ROLE_CLASSES) {
+            for (const el of vp.querySelectorAll(`.${cls}`)) {
+                el.classList.remove(cls);
+            }
+        }
+    }
+    function applyOverlays() {
+        const vp = canvasApi?.viewportEl;
+        if (vp === undefined)
+            return;
+        clearOverlays();
+        const allIds = new Set([...elementProduces.keys(), ...elementConsumes.keys()]);
+        for (const elementId of allIds) {
+            const writes = (elementProduces.get(elementId)?.length ?? 0) > 0;
+            const reads = (elementConsumes.get(elementId)?.length ?? 0) > 0;
+            if (!writes && !reads)
+                continue;
+            const el = vp.querySelector(`[data-bpmnkit-id="${elementId}"]`);
+            if (el === null)
+                continue;
+            if (writes && reads) {
+                el.classList.add("bpmnkit-vf-both");
+            }
+            else if (writes) {
+                el.classList.add("bpmnkit-vf-producer");
+            }
+            else {
+                el.classList.add("bpmnkit-vf-consumer");
+            }
+        }
+    }
+    // ── Analysis ──────────────────────────────────────────────────────────────
+    function runAnalysis(defs) {
+        elementProduces.clear();
+        elementConsumes.clear();
+        edgeScope.clear();
+        const report = optimize(defs, { categories: ["data-flow"] });
+        for (const finding of report.findings) {
+            const elementId = finding.elementIds[0];
+            if (elementId === undefined)
+                continue;
+            if (finding.id.startsWith("data-flow/role:")) {
+                if (finding.produces !== undefined && finding.produces.length > 0) {
+                    elementProduces.set(elementId, finding.produces);
+                }
+                if (finding.consumes !== undefined && finding.consumes.length > 0) {
+                    elementConsumes.set(elementId, finding.consumes);
+                }
+            }
+            else if (finding.id.startsWith("data-flow/edge-scope:")) {
+                if (finding.produces !== undefined && finding.produces.length > 0) {
+                    edgeScope.set(elementId, finding.produces);
+                }
+            }
+        }
+        applyOverlays();
+    }
+    function clearAnalysis() {
+        elementProduces.clear();
+        elementConsumes.clear();
+        edgeScope.clear();
+        clearOverlays();
+    }
+    // ── Hover wiring ──────────────────────────────────────────────────────────
+    function onMouseMove(e) {
+        const target = e.target.closest("[data-bpmnkit-id]");
+        if (target === null) {
+            hideTooltip();
+            return;
+        }
+        const elementId = target.getAttribute("data-bpmnkit-id");
+        if (elementId === null) {
+            hideTooltip();
+            return;
+        }
+        showTooltip(elementId, e.clientX, e.clientY);
+    }
+    function onMouseLeave() {
+        hideTooltip();
+    }
+    // ── CanvasPlugin ──────────────────────────────────────────────────────────
+    return {
+        name: "variable-flow",
+        legend: legendEl,
+        install(api) {
+            canvasApi = api;
+            injectVariableFlowStyles();
+            if (options?.container !== undefined) {
+                options.container.appendChild(legendEl);
+            }
+            const onAny = api.on;
+            unsubs.push(api.on("diagram:load", (defs) => {
+                runAnalysis(defs);
+            }), api.on("diagram:clear", () => {
+                clearAnalysis();
+            }), onAny("diagram:change", (defs) => {
+                runAnalysis(defs);
+            }));
+            const vp = api.viewportEl;
+            if (vp !== undefined) {
+                vp.addEventListener("mousemove", onMouseMove);
+                vp.addEventListener("mouseleave", onMouseLeave);
+                unsubs.push(() => {
+                    vp.removeEventListener("mousemove", onMouseMove);
+                    vp.removeEventListener("mouseleave", onMouseLeave);
+                });
+            }
+        },
+        uninstall() {
+            for (const off of unsubs)
+                off();
+            clearOverlays();
+            tooltipEl.remove();
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/plugins",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "private": false,
   "type": "module",
   "exports": {
@@ -76,6 +76,10 @@
       "import": "./dist/optimize/index.js",
       "types": "./dist/optimize/index.d.ts"
     },
+    "./pattern-advisor": {
+      "import": "./dist/pattern-advisor/index.js",
+      "types": "./dist/pattern-advisor/index.d.ts"
+    },
     "./process-runner": {
       "import": "./dist/process-runner/index.js",
       "types": "./dist/process-runner/index.d.ts"
@@ -96,6 +100,18 @@
       "import": "./dist/token-highlight/index.js",
       "types": "./dist/token-highlight/index.d.ts"
     },
+    "./variable-flow": {
+      "import": "./dist/variable-flow/index.js",
+      "types": "./dist/variable-flow/index.d.ts"
+    },
+    "./live-mode": {
+      "import": "./dist/live-mode/index.js",
+      "types": "./dist/live-mode/index.d.ts"
+    },
+    "./story-view": {
+      "import": "./dist/story-view/index.js",
+      "types": "./dist/story-view/index.d.ts"
+    },
     "./watermark": {
       "import": "./dist/watermark/index.js",
       "types": "./dist/watermark/index.d.ts"
@@ -112,11 +128,11 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.0.14",
-    "@bpmnkit/ascii": "0.0.14",
+    "@bpmnkit/ascii": "0.0.15",
+    "@bpmnkit/canvas": "0.0.15",
     "@bpmnkit/connector-gen": "0.0.8",
-    "@bpmnkit/editor": "0.0.16",
-    "@bpmnkit/core": "0.0.14",
+    "@bpmnkit/core": "0.0.15",
+    "@bpmnkit/editor": "0.0.18",
     "@bpmnkit/feel": "0.0.13"
   },
   "description": "23 composable canvas plugins for BPMN editors and viewers — minimap, AI chat, process simulation, storage, and more",