@bpmnkit/plugins 0.0.16 → 0.0.18

package/dist/storage/storage-api.d.ts

@@ -2,6 +2,12 @@ import type { FileRecord, FileType, ProjectRecord, WorkspaceRecord } from "./typ
 export interface StorageApiOptions {
     /** Called when the user opens a file from the menu. */
     onOpenFile(file: FileRecord, content: string): void;
+    /**
+     * Called when a `.bpmn.tests.json` sidecar is found alongside an opened BPMN file.
+     * The `bpmnFileName` is the name of the BPMN file (e.g. `"my-process.bpmn"`).
+     * The `content` is the raw JSON string of the sidecar.
+     */
+    onSidecarFile?: (bpmnFileName: string, content: string) => void;
 }
 export declare class StorageApi {
     private readonly _options;

package/dist/storage/storage-api.js

@@ -247,6 +247,18 @@ export class StorageApi {
             return;
         this._currentFileId = fileId;
         this._options.onOpenFile(file, content);
+        // Auto-discover sidecar .tests.json alongside BPMN files
+        if (file.type === "bpmn" && this._options.onSidecarFile !== undefined) {
+            const sidecarName = `${file.name}.tests.json`;
+            const projectFiles = await db.files.where("projectId").equals(file.projectId).toArray();
+            const sidecarFile = projectFiles.find((f) => f.name === sidecarName);
+            if (sidecarFile !== undefined) {
+                const sidecarContent = await this.getFileContent(sidecarFile.id);
+                if (sidecarContent !== null) {
+                    this._options.onSidecarFile(file.name, sidecarContent);
+                }
+            }
+        }
         this._notify();
     }
     getCurrentFileId() {

package/dist/story-view/css.d.ts

@@ -0,0 +1,4 @@
+export declare const STYLE_ID = "bpmnkit-story-view-v1";
+export declare const CSS = "\n/* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--bpmnkit-bg, #0d0d16);\n  color: var(--bpmnkit-fg, #cdd6f4);\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 13px;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);\n  flex-shrink: 0;\n}\n.bpmnkit-sv-title {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--bpmnkit-fg, #cdd6f4);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bpmnkit-sv-back {\n  font-size: 11px;\n  padding: 3px 10px;\n  border-radius: 5px;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  font-weight: 600;\n  white-space: nowrap;\n}\n.bpmnkit-sv-back:hover {\n  color: var(--bpmnkit-accent, #6b9df7);\n  border-color: var(--bpmnkit-accent, #6b9df7);\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n/* \u2500\u2500 Lane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-lane {\n  margin-bottom: 20px;\n}\n.bpmnkit-sv-lane-header {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  padding: 4px 0 8px;\n  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);\n  margin-bottom: 10px;\n}\n.bpmnkit-sv-lane-cards {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 6px;\n}\n\n/* \u2500\u2500 Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-card {\n  background: var(--bpmnkit-surface, #161626);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 8px;\n  box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n  padding: 10px 12px;\n  min-width: 120px;\n  max-width: 200px;\n  flex-shrink: 0;\n}\n.bpmnkit-sv-card--start  { border-left: 3px solid var(--bpmnkit-success, #22c55e); }\n.bpmnkit-sv-card--end    { border-left: 3px solid var(--bpmnkit-fg-muted, #8888a8); }\n.bpmnkit-sv-card--service { border-left: 3px solid var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-sv-card--user   { border-left: 3px solid var(--bpmnkit-teal, #2dd4bf); }\n.bpmnkit-sv-card--gateway { border-left: 3px solid var(--bpmnkit-warn, #f59e0b); }\n.bpmnkit-sv-card--parallel { border-left: 3px solid var(--bpmnkit-fg-muted, #8888a8); }\n.bpmnkit-sv-card--subprocess { border-left: 3px solid #a78bfa; }\n.bpmnkit-sv-card--event  { border-left: 3px solid var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-sv-card--task   { border-left: 3px solid var(--bpmnkit-border, #2a2a42); }\n\n.bpmnkit-sv-card-header {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  margin-bottom: 3px;\n}\n.bpmnkit-sv-card-body {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--bpmnkit-fg, #cdd6f4);\n  word-break: break-word;\n  min-height: 16px;\n}\n\n/* \u2500\u2500 Arrow connector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sv-arrow {\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  font-size: 18px;\n  align-self: center;\n  flex-shrink: 0;\n  padding: 0 2px;\n  margin-top: 12px;\n}\n\n/* \u2500\u2500 Comment 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-sv-comment-btn {\n  display: inline-block;\n  margin-top: 6px;\n  font-size: 10px;\n  padding: 2px 7px;\n  border-radius: 4px;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  background: transparent;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n}\n.bpmnkit-sv-comment-btn:hover {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  color: var(--bpmnkit-accent, #6b9df7);\n}\n\n/* \u2500\u2500 Comment 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 */\n.bpmnkit-sv-comment-panel {\n  margin-top: 8px;\n  border-top: 1px solid var(--bpmnkit-border, #2a2a42);\n  padding-top: 8px;\n}\n.bpmnkit-sv-comment-item {\n  padding: 4px 0;\n  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);\n}\n.bpmnkit-sv-comment-item:last-child {\n  border-bottom: none;\n}\n.bpmnkit-sv-comment-text {\n  font-size: 11px;\n  color: var(--bpmnkit-fg, #cdd6f4);\n  line-height: 1.45;\n}\n.bpmnkit-sv-comment-meta {\n  font-size: 10px;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  margin-top: 2px;\n}\n.bpmnkit-sv-comment-input {\n  width: 100%;\n  margin-top: 6px;\n  padding: 5px 8px;\n  border-radius: 5px;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  color: var(--bpmnkit-fg, #cdd6f4);\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 11px;\n  resize: vertical;\n  min-height: 50px;\n}\n.bpmnkit-sv-comment-submit {\n  margin-top: 5px;\n  font-size: 11px;\n  padding: 3px 10px;\n  border-radius: 5px;\n  border: 1px solid var(--bpmnkit-accent, #6b9df7);\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));\n  color: var(--bpmnkit-accent, #6b9df7);\n  cursor: pointer;\n  font-weight: 600;\n}\n.bpmnkit-sv-comment-submit:hover {\n  background: var(--bpmnkit-accent, #6b9df7);\n  color: #fff;\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-theme=\"light\"] .bpmnkit-sv-container {\n  background: var(--bpmnkit-bg, #f4f4f8);\n  color: var(--bpmnkit-fg, #1a1a2e);\n}\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card {\n  background: var(--bpmnkit-surface, #ffffff);\n}\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card--start  { border-left-color: var(--bpmnkit-success, #16a34a); }\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card--service { border-left-color: var(--bpmnkit-accent, #1a56db); }\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card--user   { border-left-color: var(--bpmnkit-teal, #0d9488); }\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card--gateway { border-left-color: var(--bpmnkit-warn, #d97706); }\n[data-bpmnkit-theme=\"light\"] .bpmnkit-sv-card--subprocess { border-left-color: #7c3aed; }\n\n/* \u2500\u2500 Share/download 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 */\n.bpmnkit-sv-share {\n  font-size: 11px;\n  padding: 3px 10px;\n  border-radius: 5px;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  font-weight: 600;\n  white-space: nowrap;\n  margin-left: auto;\n}\n.bpmnkit-sv-share:hover {\n  color: var(--bpmnkit-accent, #6b9df7);\n  border-color: var(--bpmnkit-accent, #6b9df7);\n}\n\n/* \u2500\u2500 Resolve 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-sv-comment-resolve {\n  font-size: 10px;\n  padding: 2px 7px;\n  border-radius: 4px;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  background: transparent;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  margin-top: 3px;\n}\n.bpmnkit-sv-comment-resolve:hover {\n  border-color: var(--bpmnkit-success, #22c55e);\n  color: var(--bpmnkit-success, #22c55e);\n}\n.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-text {\n  text-decoration: line-through;\n  opacity: 0.5;\n}\n.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-meta {\n  opacity: 0.5;\n}\n.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-resolve {\n  border-color: var(--bpmnkit-success, #22c55e);\n  color: var(--bpmnkit-success, #22c55e);\n}\n";
+export declare function injectStoryViewStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/story-view/css.js

@@ -0,0 +1,259 @@
+export const STYLE_ID = "bpmnkit-story-view-v1";
+export const CSS = `
+/* ── Container ──────────────────────────────────────────────────────────────── */
+.bpmnkit-sv-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bpmnkit-bg, #0d0d16);
+  color: var(--bpmnkit-fg, #cdd6f4);
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 13px;
+}
+
+/* ── Header ─────────────────────────────────────────────────────────────────── */
+.bpmnkit-sv-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);
+  flex-shrink: 0;
+}
+.bpmnkit-sv-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--bpmnkit-fg, #cdd6f4);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bpmnkit-sv-back {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.bpmnkit-sv-back:hover {
+  color: var(--bpmnkit-accent, #6b9df7);
+  border-color: var(--bpmnkit-accent, #6b9df7);
+}
+
+/* ── Content ────────────────────────────────────────────────────────────────── */
+.bpmnkit-sv-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* ── Lane ────────────────────────────────────────────────────────────────────── */
+.bpmnkit-sv-lane {
+  margin-bottom: 20px;
+}
+.bpmnkit-sv-lane-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  padding: 4px 0 8px;
+  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);
+  margin-bottom: 10px;
+}
+.bpmnkit-sv-lane-cards {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+/* ── Cards ───────────────────────────────────────────────────────────────────── */
+.bpmnkit-sv-card {
+  background: var(--bpmnkit-surface, #161626);
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  padding: 10px 12px;
+  min-width: 120px;
+  max-width: 200px;
+  flex-shrink: 0;
+}
+.bpmnkit-sv-card--start  { border-left: 3px solid var(--bpmnkit-success, #22c55e); }
+.bpmnkit-sv-card--end    { border-left: 3px solid var(--bpmnkit-fg-muted, #8888a8); }
+.bpmnkit-sv-card--service { border-left: 3px solid var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-sv-card--user   { border-left: 3px solid var(--bpmnkit-teal, #2dd4bf); }
+.bpmnkit-sv-card--gateway { border-left: 3px solid var(--bpmnkit-warn, #f59e0b); }
+.bpmnkit-sv-card--parallel { border-left: 3px solid var(--bpmnkit-fg-muted, #8888a8); }
+.bpmnkit-sv-card--subprocess { border-left: 3px solid #a78bfa; }
+.bpmnkit-sv-card--event  { border-left: 3px solid var(--bpmnkit-accent, #6b9df7); }
+.bpmnkit-sv-card--task   { border-left: 3px solid var(--bpmnkit-border, #2a2a42); }
+
+.bpmnkit-sv-card-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  margin-bottom: 3px;
+}
+.bpmnkit-sv-card-body {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--bpmnkit-fg, #cdd6f4);
+  word-break: break-word;
+  min-height: 16px;
+}
+
+/* ── Arrow connector ─────────────────────────────────────────────────────────── */
+.bpmnkit-sv-arrow {
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  font-size: 18px;
+  align-self: center;
+  flex-shrink: 0;
+  padding: 0 2px;
+  margin-top: 12px;
+}
+
+/* ── Comment button ─────────────────────────────────────────────────────────── */
+.bpmnkit-sv-comment-btn {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 10px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  background: transparent;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+}
+.bpmnkit-sv-comment-btn:hover {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+  color: var(--bpmnkit-accent, #6b9df7);
+}
+
+/* ── Comment panel ─────────────────────────────────────────────────────────── */
+.bpmnkit-sv-comment-panel {
+  margin-top: 8px;
+  border-top: 1px solid var(--bpmnkit-border, #2a2a42);
+  padding-top: 8px;
+}
+.bpmnkit-sv-comment-item {
+  padding: 4px 0;
+  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);
+}
+.bpmnkit-sv-comment-item:last-child {
+  border-bottom: none;
+}
+.bpmnkit-sv-comment-text {
+  font-size: 11px;
+  color: var(--bpmnkit-fg, #cdd6f4);
+  line-height: 1.45;
+}
+.bpmnkit-sv-comment-meta {
+  font-size: 10px;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  margin-top: 2px;
+}
+.bpmnkit-sv-comment-input {
+  width: 100%;
+  margin-top: 6px;
+  padding: 5px 8px;
+  border-radius: 5px;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  color: var(--bpmnkit-fg, #cdd6f4);
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 11px;
+  resize: vertical;
+  min-height: 50px;
+}
+.bpmnkit-sv-comment-submit {
+  margin-top: 5px;
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--bpmnkit-accent, #6b9df7);
+  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15));
+  color: var(--bpmnkit-accent, #6b9df7);
+  cursor: pointer;
+  font-weight: 600;
+}
+.bpmnkit-sv-comment-submit:hover {
+  background: var(--bpmnkit-accent, #6b9df7);
+  color: #fff;
+}
+
+/* ── Light theme overrides ─────────────────────────────────────────────────── */
+[data-bpmnkit-theme="light"] .bpmnkit-sv-container {
+  background: var(--bpmnkit-bg, #f4f4f8);
+  color: var(--bpmnkit-fg, #1a1a2e);
+}
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card {
+  background: var(--bpmnkit-surface, #ffffff);
+}
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card--start  { border-left-color: var(--bpmnkit-success, #16a34a); }
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card--service { border-left-color: var(--bpmnkit-accent, #1a56db); }
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card--user   { border-left-color: var(--bpmnkit-teal, #0d9488); }
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card--gateway { border-left-color: var(--bpmnkit-warn, #d97706); }
+[data-bpmnkit-theme="light"] .bpmnkit-sv-card--subprocess { border-left-color: #7c3aed; }
+
+/* ── Share/download button ─────────────────────────────────────────────────── */
+.bpmnkit-sv-share {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-left: auto;
+}
+.bpmnkit-sv-share:hover {
+  color: var(--bpmnkit-accent, #6b9df7);
+  border-color: var(--bpmnkit-accent, #6b9df7);
+}
+
+/* ── Resolve button ─────────────────────────────────────────────────────────── */
+.bpmnkit-sv-comment-resolve {
+  font-size: 10px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  background: transparent;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  margin-top: 3px;
+}
+.bpmnkit-sv-comment-resolve:hover {
+  border-color: var(--bpmnkit-success, #22c55e);
+  color: var(--bpmnkit-success, #22c55e);
+}
+.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-text {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-meta {
+  opacity: 0.5;
+}
+.bpmnkit-sv-comment-item--resolved .bpmnkit-sv-comment-resolve {
+  border-color: var(--bpmnkit-success, #22c55e);
+  color: var(--bpmnkit-success, #22c55e);
+}
+`;
+export function injectStoryViewStyles() {
+    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/story-view/index.d.ts

@@ -0,0 +1,33 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export interface StoryComment {
+    id: string;
+    text: string;
+    author: string;
+    createdAt: number;
+    resolved?: boolean;
+}
+export interface StoryViewOptions {
+    /** Container element to mount the story view into. */
+    container?: HTMLElement;
+    /** Called when user clicks "← Edit" to return to edit mode. */
+    onEditMode?: () => void;
+    /** Optional: return a plain English summary of a FEEL condition. Cache per condition. */
+    summarizeCondition?: (condition: string) => Promise<string>;
+    /** Returns a unique key for the current file (for comment persistence). */
+    getFileKey?: () => string | null;
+    /** Theme passed to renderStoryHtml. */
+    getTheme?: () => "dark" | "light";
+    /** Returns the author name to use when adding comments. Defaults to "You". */
+    getAuthorName?: () => string;
+}
+export interface StoryViewPlugin extends CanvasPlugin {
+    readonly name: "story-view";
+    /** Toggle button that switches between Story and Edit mode. */
+    readonly toggle: HTMLButtonElement;
+    /** Enter story mode programmatically. */
+    enterStoryMode(): void;
+    /** Exit story mode programmatically. */
+    exitStoryMode(): void;
+}
+export declare function createStoryViewPlugin(options?: StoryViewOptions): StoryViewPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/story-view/index.js

@@ -0,0 +1,294 @@
+import { renderStoryHtml } from "@bpmnkit/core";
+import { injectStoryViewStyles } from "./css.js";
+// ── IndexedDB helpers ─────────────────────────────────────────────────────────
+const SV_DB_NAME = "bpmnkit-story-view-v1";
+const SV_STORE = "comments";
+function openSvDb() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(SV_DB_NAME, 1);
+        req.onupgradeneeded = () => {
+            req.result.createObjectStore(SV_STORE);
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+async function loadComments(key) {
+    try {
+        const db = await openSvDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(SV_STORE, "readonly");
+            const req = tx.objectStore(SV_STORE).get(key);
+            req.onsuccess = () => resolve(req.result ?? []);
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        return [];
+    }
+}
+async function saveComments(key, comments) {
+    try {
+        const db = await openSvDb();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(SV_STORE, "readwrite");
+            const req = tx.objectStore(SV_STORE).put(comments, key);
+            req.onsuccess = () => resolve();
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        // ignore
+    }
+}
+// ── Plugin factory ────────────────────────────────────────────────────────────
+export function createStoryViewPlugin(options) {
+    let canvasApi = null;
+    let currentDefs = null;
+    let storyActive = false;
+    const unsubs = [];
+    const conditionCache = new Map();
+    // Mounted story root
+    let storyRoot = null;
+    // Toggle button
+    const toggleEl = document.createElement("button");
+    toggleEl.textContent = "📖 Story";
+    toggleEl.className = "bpmnkit-sv-toggle";
+    // ── Comment panel per card ────────────────────────────────────────────────
+    async function buildCommentPanel(elementId, container) {
+        const fileKey = options?.getFileKey?.() ?? "_";
+        const commentKey = `${fileKey}:${elementId}`;
+        let comments = await loadComments(commentKey);
+        function renderComments() {
+            // Clear existing comment items (keep input/submit)
+            const existing = container.querySelectorAll(".bpmnkit-sv-comment-item");
+            for (const el of existing)
+                el.remove();
+            const input = container.querySelector(".bpmnkit-sv-comment-input");
+            for (const c of comments) {
+                const item = document.createElement("div");
+                item.className = c.resolved
+                    ? "bpmnkit-sv-comment-item bpmnkit-sv-comment-item--resolved"
+                    : "bpmnkit-sv-comment-item";
+                const textEl = document.createElement("div");
+                textEl.className = "bpmnkit-sv-comment-text";
+                textEl.textContent = c.text;
+                const meta = document.createElement("div");
+                meta.className = "bpmnkit-sv-comment-meta";
+                meta.textContent = `${c.author} · ${new Date(c.createdAt).toLocaleString()}`;
+                const resolveBtn = document.createElement("button");
+                resolveBtn.className = "bpmnkit-sv-comment-resolve";
+                resolveBtn.textContent = c.resolved ? "Unresolve" : "Resolve";
+                resolveBtn.addEventListener("click", async () => {
+                    comments = comments.map((x) => (x.id === c.id ? { ...x, resolved: !x.resolved } : x));
+                    await saveComments(commentKey, comments);
+                    renderComments();
+                });
+                item.appendChild(textEl);
+                item.appendChild(meta);
+                item.appendChild(resolveBtn);
+                // Insert before the input
+                if (input !== null) {
+                    container.insertBefore(item, input);
+                }
+                else {
+                    container.appendChild(item);
+                }
+            }
+        }
+        const inputEl = document.createElement("textarea");
+        inputEl.className = "bpmnkit-sv-comment-input";
+        inputEl.placeholder = "Add a comment…";
+        const submitEl = document.createElement("button");
+        submitEl.className = "bpmnkit-sv-comment-submit";
+        submitEl.textContent = "Add";
+        submitEl.addEventListener("click", async () => {
+            const text = inputEl.value.trim();
+            if (!text)
+                return;
+            const comment = {
+                id: `c-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+                text,
+                author: options?.getAuthorName?.() ?? "You",
+                createdAt: Date.now(),
+            };
+            comments = [...comments, comment];
+            await saveComments(commentKey, comments);
+            inputEl.value = "";
+            renderComments();
+            updateBadge();
+        });
+        container.appendChild(inputEl);
+        container.appendChild(submitEl);
+        renderComments();
+        function updateBadge() {
+            const btn = container.closest(".bpmnkit-sv-card")?.querySelector(".bpmnkit-sv-comment-btn");
+            if (btn !== null && btn !== undefined) {
+                btn.textContent = comments.length > 0 ? `💬 ${comments.length}` : "💬";
+            }
+        }
+    }
+    // ── Wire comment buttons in story HTML ───────────────────────────────────
+    async function wireCommentButtons(root) {
+        const cards = root.querySelectorAll("[data-bpmnkit-id]");
+        for (const card of cards) {
+            const elementId = card.getAttribute("data-bpmnkit-id");
+            if (!elementId)
+                continue;
+            const fileKey = options?.getFileKey?.() ?? "_";
+            const commentKey = `${fileKey}:${elementId}`;
+            const comments = await loadComments(commentKey);
+            const btn = document.createElement("button");
+            btn.className = "bpmnkit-sv-comment-btn";
+            btn.textContent = comments.length > 0 ? `💬 ${comments.length}` : "💬";
+            let panelOpen = false;
+            let panelEl = null;
+            btn.addEventListener("click", async () => {
+                panelOpen = !panelOpen;
+                if (panelOpen) {
+                    panelEl = document.createElement("div");
+                    panelEl.className = "bpmnkit-sv-comment-panel";
+                    await buildCommentPanel(elementId, panelEl);
+                    card.appendChild(panelEl);
+                }
+                else if (panelEl !== null) {
+                    panelEl.remove();
+                    panelEl = null;
+                }
+            });
+            card.appendChild(btn);
+        }
+    }
+    // ── AI condition summarizer ──────────────────────────────────────────────
+    async function applyConditionSummaries(root) {
+        if (!options?.summarizeCondition)
+            return;
+        const conditionExprs = root.querySelectorAll(".bks-condition-expr");
+        for (const el of conditionExprs) {
+            const original = el.textContent ?? "";
+            if (!original)
+                continue;
+            const cached = conditionCache.get(original);
+            if (cached !== undefined) {
+                el.title = original;
+                el.textContent = cached;
+                continue;
+            }
+            options
+                .summarizeCondition(original)
+                .then((summary) => {
+                conditionCache.set(original, summary);
+                el.title = original;
+                el.textContent = summary;
+            })
+                .catch(() => {
+                // leave as-is on error
+            });
+        }
+    }
+    // ── Enter / exit story mode ──────────────────────────────────────────────
+    function enterStoryMode() {
+        if (storyActive)
+            return;
+        storyActive = true;
+        toggleEl.classList.add("bpmnkit-sv-toggle--active");
+        const defs = currentDefs;
+        const theme = options?.getTheme?.() ?? "dark";
+        const container = options?.container ?? canvasApi?.container;
+        if (!container)
+            return;
+        const html = defs !== null ? renderStoryHtml(defs, { standalone: false, theme }) : "";
+        storyRoot = document.createElement("div");
+        storyRoot.className = "bpmnkit-sv-container";
+        if (theme === "light")
+            storyRoot.setAttribute("data-bpmnkit-theme", "light");
+        // Header
+        const header = document.createElement("div");
+        header.className = "bpmnkit-sv-header";
+        const title = document.createElement("div");
+        title.className = "bpmnkit-sv-title";
+        title.textContent = defs?.processes[0]?.name ?? "Process Story";
+        const backBtn = document.createElement("button");
+        backBtn.className = "bpmnkit-sv-back";
+        backBtn.textContent = "← Edit";
+        backBtn.addEventListener("click", () => exitStoryMode());
+        header.appendChild(backBtn);
+        header.appendChild(title);
+        const shareBtn = document.createElement("button");
+        shareBtn.className = "bpmnkit-sv-share";
+        shareBtn.textContent = "\u2193 Download";
+        shareBtn.addEventListener("click", () => {
+            if (defs === null)
+                return;
+            const storyHtml = renderStoryHtml(defs, { standalone: true, theme });
+            const blob = new Blob([storyHtml], { type: "text/html" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${defs.processes[0]?.name ?? "process"}-story.html`;
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+        header.appendChild(shareBtn);
+        // Content
+        const content = document.createElement("div");
+        content.className = "bpmnkit-sv-content";
+        content.innerHTML = html;
+        storyRoot.appendChild(header);
+        storyRoot.appendChild(content);
+        container.appendChild(storyRoot);
+        wireCommentButtons(content).catch(() => undefined);
+        applyConditionSummaries(content).catch(() => undefined);
+    }
+    function exitStoryMode() {
+        if (!storyActive)
+            return;
+        storyActive = false;
+        toggleEl.classList.remove("bpmnkit-sv-toggle--active");
+        if (storyRoot !== null) {
+            storyRoot.remove();
+            storyRoot = null;
+        }
+        options?.onEditMode?.();
+    }
+    toggleEl.addEventListener("click", () => {
+        if (storyActive) {
+            exitStoryMode();
+        }
+        else {
+            enterStoryMode();
+        }
+    });
+    return {
+        name: "story-view",
+        toggle: toggleEl,
+        enterStoryMode,
+        exitStoryMode,
+        install(api) {
+            canvasApi = api;
+            injectStoryViewStyles();
+            const onAny = api.on;
+            unsubs.push(onAny("diagram:load", (arg) => {
+                const defs = arg?.definitions ?? null;
+                currentDefs = defs;
+                if (storyActive) {
+                    exitStoryMode();
+                    enterStoryMode();
+                }
+            }));
+            unsubs.push(onAny("diagram:change", (arg) => {
+                const defs = arg?.definitions ?? null;
+                if (defs !== null)
+                    currentDefs = defs;
+            }));
+        },
+        uninstall() {
+            exitStoryMode();
+            for (const unsub of unsubs)
+                unsub();
+            unsubs.length = 0;
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+export declare function injectVariableFlowStyles(): void;
+//# sourceMappingURL=css.d.ts.map