@bpmnkit/plugins 0.0.16 → 0.0.17

package/README.md

@@ -154,6 +154,8 @@ const ai = createAiBridgePlugin({
 | [`@bpmnkit/cli-sdk`](https://www.npmjs.com/package/@bpmnkit/cli-sdk) | Plugin authoring SDK for the casen CLI |
 | [`@bpmnkit/create-casen-plugin`](https://www.npmjs.com/package/@bpmnkit/create-casen-plugin) | Scaffold a new casen CLI plugin in seconds |
 | [`@bpmnkit/casen-report`](https://www.npmjs.com/package/@bpmnkit/casen-report) | HTML reports from Camunda 8 incident and SLA data |
+| [`@bpmnkit/casen-worker-http`](https://www.npmjs.com/package/@bpmnkit/casen-worker-http) | Example HTTP worker plugin — completes jobs with live JSONPlaceholder API data |
+| [`@bpmnkit/casen-worker-ai`](https://www.npmjs.com/package/@bpmnkit/casen-worker-ai) | AI task worker — classify, summarize, extract, and decide using Claude |
 
 ## License
 

package/dist/ai-bridge/panel.js

@@ -1,5 +1,5 @@
 import { BpmnCanvas } from "@bpmnkit/canvas";
-import { Bpmn, Dmn, Form, compactify } from "@bpmnkit/core";
+import { Bpmn, Dmn, Form, compactify, optimize } from "@bpmnkit/core";
 import { saveCheckpoint } from "../history/index.js";
 import { injectAiBridgeStyles } from "./css.js";
 const DEFAULT_SERVER = "http://localhost:3033";
@@ -181,6 +181,32 @@ const EXAMPLE_PROMPTS = [
     "Explain what this process does in plain language",
     "Optimize and simplify this diagram — remove redundant elements",
 ];
+// ── Variable flow context builder ─────────────────────────────────────────────
+function buildVariableFlowContext(defs) {
+    const report = optimize(defs, { categories: ["data-flow"] });
+    const byElement = {};
+    const undefinedVars = [];
+    const deadOutputs = [];
+    for (const f of report.findings) {
+        const elId = f.elementIds[0];
+        if (f.id.startsWith("data-flow/role:") && elId !== undefined) {
+            byElement[elId] = {
+                ...(f.produces?.length ? { produces: f.produces } : {}),
+                ...(f.consumes?.length ? { consumes: f.consumes } : {}),
+            };
+        }
+        else if (f.id.startsWith("data-flow/undefined-variable:") && f.consumes?.[0] !== undefined) {
+            undefinedVars.push(f.consumes[0]);
+        }
+        else if (f.id.startsWith("data-flow/dead-output:") && f.produces?.[0] !== undefined) {
+            deadOutputs.push(f.produces[0]);
+        }
+    }
+    return { byElement, undefinedVars, deadOutputs };
+}
+function buildContext(defs) {
+    return { ...compactify(defs), variableFlow: buildVariableFlowContext(defs) };
+}
 export function createAiPanel(options) {
     injectAiBridgeStyles();
     const panel = document.createElement("div");
@@ -654,7 +680,7 @@ export function createAiPanel(options) {
         const aiMsgEl = addMessage("ai", "");
         aiMsgEl.classList.add("ai-msg-cursor");
         const defs = options.getDefinitions();
-        const diagramContext = defs ? compactify(defs) : null;
+        const diagramContext = defs ? buildContext(defs) : null;
         const { fullText, resultXml } = await runStream(history, diagramContext, undefined, signal, aiMsgEl);
         finalizeAiMessage(aiMsgEl, fullText, resultXml);
         history.push({ role: "ai", content: fullText });
@@ -681,7 +707,7 @@ export function createAiPanel(options) {
         addMessage("user", label, contextNodes.length > 0 ? contextNodes : undefined);
         const aiMsgEl = addMessage("ai", "");
         aiMsgEl.classList.add("ai-msg-cursor");
-        const context = compactify(defs);
+        const context = buildContext(defs);
         const { fullText, resultXml } = await runStream(history, context, action, signal, aiMsgEl);
         finalizeAiMessage(aiMsgEl, fullText, resultXml);
         history.push({ role: "ai", content: fullText });

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

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

@@ -0,0 +1,42 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export type LiveModeStatus = "off" | "connecting" | "live" | "error" | "blocked-production" | "tests-failing";
+export interface LiveModeOptions {
+    /** Proxy server URL. Default "http://localhost:3033". */
+    proxyUrl?: string;
+    /** Returns active profile. If isProduction=true, blocks live mode. */
+    getProfile?: () => {
+        name: string;
+        isProduction?: boolean;
+    } | null;
+    /** Returns current BPMN XML string. */
+    getXml: () => string | null;
+    /** Returns a filename for deployment. */
+    getFileName?: () => string;
+    /** Token-highlight plugin API to drive canvas overlays. */
+    tokenHighlight?: {
+        api: {
+            setActive(elementIds: string[]): void;
+            addVisited(elementIds: string[]): void;
+            clear(): void;
+        };
+    };
+    /** If true, require runTests() to pass green before each deploy. */
+    requireTestsGreen?: boolean;
+    /** Called before each deploy. Return true = tests pass. */
+    runTests?: () => Promise<boolean>;
+    /** Called when live mode status changes. */
+    onStatusChange?: (status: LiveModeStatus) => void;
+    /** Poll interval for active element instances in ms. Default 3000. */
+    pollIntervalMs?: number;
+}
+export interface LiveModePlugin extends CanvasPlugin {
+    readonly name: "live-mode";
+    /** Toggle button to place in the editor toolbar. */
+    readonly toggle: HTMLButtonElement;
+    /** Status pill element. */
+    readonly status: HTMLSpanElement;
+    /** Disable live mode programmatically. */
+    disable(): void;
+}
+export declare function createLiveModePlugin(options: LiveModeOptions): LiveModePlugin;
+//# sourceMappingURL=index.d.ts.map