@bpmnkit/canvas 0.0.16 → 0.0.20

package/README.md

@@ -6,6 +6,8 @@
   [![npm](https://img.shields.io/npm/v/@bpmnkit/canvas?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/canvas)
   [![license](https://img.shields.io/npm/l/@bpmnkit/canvas?style=flat-square)](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
   [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmnkit/monorepo)
+  [![ai-assisted](https://img.shields.io/badge/AI--assisted-claude-8b5cf6?style=flat-square)](https://github.com/bpmnkit/monorepo)
+  [![experimental](https://img.shields.io/badge/status-experimental-f59e0b?style=flat-square)](https://github.com/bpmnkit/monorepo)
 
   [Website](https://bpmnkit.com) · [Documentation](https://docs.bpmnkit.com) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
 </div>

package/dist/renderer.js

@@ -203,14 +203,24 @@ function gatewayMarker(type) {
     }
 }
 // ── Sub-process bottom markers ────────────────────────────────────────────────
-function subProcessMarker(type) {
+function subProcessMarker(type, multiInstance) {
+    let base;
     if (type === "adHocSubProcess") {
-        // Tilde (~) for ad-hoc
-        return `<path d="M-7 0Q-4 -4 0 0Q4 4 7 0" class="bpmnkit-icon"/>`;
+        base = `<path d="M-7 0Q-4 -4 0 0Q4 4 7 0" class="bpmnkit-icon"/>`;
     }
-    // Standard expand marker: + in a small box
-    return `<rect x="-7" y="-7" width="14" height="14" rx="1" class="bpmnkit-icon"/>
+    else {
+        base = `<rect x="-7" y="-7" width="14" height="14" rx="1" class="bpmnkit-icon"/>
 <path d="M0 -4v8M-4 0h8" class="bpmnkit-icon"/>`;
+    }
+    if (multiInstance === "sequential") {
+        // Three horizontal lines ≡ (sequential)
+        base += `<g transform="translate(16 0)"><path d="M-4 -4h8M-4 0h8M-4 4h8" class="bpmnkit-icon"/></g>`;
+    }
+    else if (multiInstance === "parallel") {
+        // Three vertical lines ||| (parallel)
+        base += `<g transform="translate(16 0)"><path d="M-4 -4v8M0 -4v8M4 -4v8" class="bpmnkit-icon"/></g>`;
+    }
+    return base;
 }
 function buildIndex(defs) {
     const elements = new Map();
@@ -393,9 +403,11 @@ function renderTask(shape, el, instanceId) {
         el?.type === "adHocSubProcess" ||
         el?.type === "eventSubProcess" ||
         el?.type === "transaction") {
+        const lc = "loopCharacteristics" in el ? el.loopCharacteristics : undefined;
+        const multiInstance = lc ? (lc.isSequential ? "sequential" : "parallel") : undefined;
         const markerG = svgEl("g");
         attr(markerG, { transform: `translate(${width / 2} ${height - 10})` });
-        markerG.innerHTML = subProcessMarker(el.type);
+        markerG.innerHTML = subProcessMarker(el.type, multiInstance);
         g.appendChild(markerG);
     }
     const label = el?.name ?? el?.type ?? "task";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/canvas",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/core": "0.0.16"
+    "@bpmnkit/core": "0.0.20"
   },
   "description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
   "keywords": [