@bpmnkit/plugins 0.0.18 → 0.0.23

package/dist/process-runner/css.js

@@ -472,6 +472,38 @@ const CSS = `
 }
 .bpmnkit-runner-play-ivar-add:hover { border-color: var(--bpmnkit-accent, #6b9df7); color: var(--bpmnkit-accent, #6b9df7); }
 
+/* ── Input variable hints (from validation DMN) ──────────────────────────── */
+.bpmnkit-runner-play-ivar-hints {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: rgba(107,157,247,0.06);
+  border-bottom: 1px solid rgba(107,157,247,0.12);
+  font-size: 11px;
+}
+.bpmnkit-runner-play-ivar-hints-label {
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  flex-shrink: 0;
+}
+.bpmnkit-runner-play-ivar-hint-chip {
+  background: rgba(107,157,247,0.12);
+  color: var(--bpmnkit-accent-bright, #89b4fa);
+  border-radius: 3px;
+  padding: 1px 5px;
+  font-family: var(--bpmnkit-font-mono, monospace);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-ivar-hints {
+  background: rgba(26,86,219,0.05);
+  border-bottom-color: rgba(26,86,219,0.1);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-ivar-hints-label { color: rgba(0,0,0,0.4); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-ivar-hint-chip {
+  background: rgba(26,86,219,0.08);
+  color: var(--bpmnkit-accent, #1a56db);
+}
+
 /* ── Light theme overrides ───────────────────────────────────────────────── */
 [data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-panel { color: rgba(0,0,0,0.75); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-runner-play-tabs { border-bottom-color: rgba(0,0,0,0.07); }
@@ -571,6 +603,211 @@ const CSS = `
   background: rgba(245,158,11,0.12);
 }
 
+/* ── Scenario editor ─────────────────────────────────────────────────────── */
+.bpmnkit-runner-tests-editor-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+.bpmnkit-runner-tests-back {
+  font-size: 11px;
+  padding: 3px 8px;
+  flex-shrink: 0;
+}
+.bpmnkit-runner-tests-editor-name {
+  flex: 1;
+  min-width: 80px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 4px;
+  color: inherit;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 4px 7px;
+}
+.bpmnkit-runner-tests-editor-name:focus { outline: none; border-color: var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-runner-tests-editor-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.bpmnkit-runner-tests-editor-badge--pass { color: var(--bpmnkit-success, #22c55e); background: rgba(34,197,94,0.12); }
+.bpmnkit-runner-tests-editor-badge--fail { color: var(--bpmnkit-danger, #f87171); background: rgba(248,113,113,0.12); }
+
+.bpmnkit-runner-tests-section-title {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255,255,255,0.3);
+  padding: 10px 0 4px;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  margin-bottom: 6px;
+}
+.bpmnkit-runner-tests-varlist { margin-bottom: 4px; }
+
+.bpmnkit-runner-tests-hint {
+  font-size: 11px;
+  color: rgba(255,255,255,0.25);
+  margin-bottom: 6px;
+  font-style: italic;
+}
+
+.bpmnkit-runner-tests-task {
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 6px;
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+.bpmnkit-runner-tests-task--focused {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+}
+.bpmnkit-runner-tests-task-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  user-select: none;
+  background: rgba(255,255,255,0.03);
+}
+.bpmnkit-runner-tests-task-header:hover { background: rgba(255,255,255,0.06); }
+.bpmnkit-runner-tests-task--focused .bpmnkit-runner-tests-task-header {
+  background: rgba(107,157,247,0.08);
+}
+.bpmnkit-runner-tests-task-name {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bpmnkit-runner-tests-task-badge {
+  font-size: 10px;
+  color: rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.06);
+  border-radius: 3px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+}
+.bpmnkit-runner-tests-task-body {
+  padding: 8px 10px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+}
+.bpmnkit-runner-tests-error-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+.bpmnkit-runner-tests-error-label {
+  font-size: 11px;
+  color: rgba(255,255,255,0.4);
+  flex-shrink: 0;
+}
+.bpmnkit-runner-tests-error-input {
+  flex: 1;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 4px;
+  color: inherit;
+  font-size: 11px;
+  font-family: inherit;
+  padding: 3px 6px;
+}
+.bpmnkit-runner-tests-error-input:focus { outline: none; border-color: var(--bpmnkit-danger, #f87171); }
+
+.bpmnkit-runner-tests-name-label {
+  flex: 1;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bpmnkit-runner-tests-edit {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.4);
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 13px;
+}
+.bpmnkit-runner-tests-edit:hover { color: var(--bpmnkit-accent, #6b9df7); }
+
+/* ── Light overrides (editor) ──────────────────────────────────────────────── */
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-editor-header { border-color: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-editor-name {
+  background: rgba(0,0,0,0.04);
+  border-color: rgba(0,0,0,0.12);
+  color: rgba(0,0,0,0.75);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-section-title { color: rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-hint { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task { border-color: rgba(0,0,0,0.1); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task--focused { border-color: var(--bpmnkit-accent, #1a56db); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task-header { background: rgba(0,0,0,0.02); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task-header:hover { background: rgba(0,0,0,0.05); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task--focused .bpmnkit-runner-tests-task-header { background: rgba(26,86,219,0.06); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task-badge { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-task-body { border-color: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-error-label { color: rgba(0,0,0,0.45); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-error-input {
+  background: rgba(0,0,0,0.04);
+  border-color: rgba(0,0,0,0.12);
+  color: rgba(0,0,0,0.75);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-name-label { color: rgba(0,0,0,0.75); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-edit { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-edit:hover { color: var(--bpmnkit-accent, #1a56db); }
+
+/* ── Last Run Trace ──────────────────────────────────────────────────────── */
+.bpmnkit-runner-tests-trace-tabs {
+  margin-top: 4px;
+}
+.bpmnkit-runner-tests-trace-pane {
+  padding: 8px 0;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.bpmnkit-runner-tests-trace-elem-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 0;
+}
+.bpmnkit-runner-tests-trace-elem-idx {
+  font-size: 10px;
+  color: rgba(255,255,255,0.25);
+  min-width: 18px;
+  text-align: right;
+  flex-shrink: 0;
+}
+.bpmnkit-runner-tests-trace-elem-id {
+  font-size: 11px;
+  font-family: var(--bpmnkit-font-mono, monospace);
+  color: rgba(255,255,255,0.65);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-trace-elem-idx { color: rgba(0,0,0,0.25); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-runner-tests-trace-elem-id { color: rgba(0,0,0,0.6); }
+
+/* ── Missing DMN warning ──────────────────────────────────────────────────── */
+.bpmnkit-runner-tests-missing-dmn {
+  font-size: 11px;
+  padding: 6px 10px;
+  margin-bottom: 8px;
+  border-radius: 5px;
+  background: rgba(245,158,11,0.12);
+  border: 1px solid var(--bpmnkit-warn, #f59e0b);
+  color: var(--bpmnkit-warn, #f59e0b);
+}
+
 /* ── Chaos run summary banner ─────────────────────────────────────────────── */
 .bpmnkit-runner-chaos-summary {
   font-size: 11px;

package/dist/process-runner/index.d.ts

@@ -47,6 +47,12 @@ export interface ScenarioResultLike {
     passed: boolean;
     visitedElements: string[];
     finalVariables: Record<string, unknown>;
+    feelEvals: Array<{
+        elementId: string;
+        property: string;
+        expression: string;
+        result: unknown;
+    }>;
     errors: Array<{
         elementId?: string;
         message: string;
@@ -83,6 +89,12 @@ export interface ProcessRunnerOptions {
      * Inject `runScenario` from `@bpmnkit/engine` here to avoid a hard dep.
      */
     runScenario?: (scenario: ScenarioLike) => Promise<ScenarioResultLike>;
+    /**
+     * Container element for the tests panel (e.g. dock.testsPane).
+     * When provided, the Tests UI is mounted here instead of as a sub-tab
+     * inside the play panel.
+     */
+    testsContainer?: HTMLElement;
     /**
      * Called on diagram load to check for a companion .bpmn.tests.json sidecar.
      * Return parsed scenarios, or null if no sidecar exists.
@@ -98,6 +110,50 @@ export interface ProcessRunnerOptions {
      * Used to map chaos injections to scenario mocks for export.
      */
     getJobType?: (elementId: string) => string | null;
+    /**
+     * Returns the current BPMN definitions. When provided, the Tests editor
+     * auto-populates task mocks from the diagram.
+     */
+    getDefinitions?: () => {
+        processes: Array<{
+            flowElements: Array<{
+                id: string;
+                name?: string;
+                type: string;
+                decisionId?: string;
+            }>;
+        }>;
+    } | null;
+    /**
+     * Returns the DMN XML for a given decision ID, or null if not found.
+     * Used to display expected variable hints in the input variables pane.
+     * Typically: `(id) => models.find(m => m.type === "dmn" && m.content.includes(id))?.content ?? null`
+     */
+    getValidationDmn?: (decisionId: string) => string | null;
+    /**
+     * When provided, called instead of the internal IndexedDB to persist scenarios.
+     * Use this to save scenarios to the file system (FS mode).
+     */
+    onSaveScenarios?: (scenarios: ScenarioLike[]) => Promise<void>;
+    /**
+     * When provided, called instead of the internal IndexedDB to load scenarios.
+     * Use this to load scenarios from the file system (FS mode).
+     */
+    onLoadScenarios?: () => Promise<ScenarioLike[]>;
+    /**
+     * When provided, called instead of the internal IndexedDB to persist input variables.
+     */
+    onSaveInputVars?: (vars: Array<{
+        name: string;
+        value: string;
+    }>) => Promise<void>;
+    /**
+     * When provided, called instead of the internal IndexedDB to load input variables.
+     */
+    onLoadInputVars?: () => Promise<Array<{
+        name: string;
+        value: string;
+    }>>;
 }
 export declare function createProcessRunnerPlugin(options: ProcessRunnerOptions): CanvasPlugin & {
     toolbar: HTMLDivElement;