@bpmnkit/editor 0.1.0 → 0.2.0

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
 import { OverlayManager } from "@bpmnkit/canvas";
-import type { Theme } from "@bpmnkit/canvas";
+import type { Theme, ViewportState } from "@bpmnkit/canvas";
 import type { BpmnDefinitions, DiColor } from "@bpmnkit/core";
 import type { Translate } from "./i18n.js";
 import type { CreateShapeType, EditorEvents, EditorOptions, LabelPosition, Tool } from "./types.js";
@@ -94,10 +94,30 @@ export declare class BpmnEditor {
     }>;
     undo(): void;
     redo(): void;
+    /**
+     * Moves to a document already on the command stack — an undo or a redo.
+     *
+     * It describes itself as a `snapshot` op, which is the only honest option: a
+     * step back through the stack is a state change like any other, and a
+     * listener relaying edits elsewhere that never heard about it would be
+     * silently wrong from then on. There is no smaller description available —
+     * the inverse of an op is not something the stack records.
+     */
+    private _stepTo;
     canUndo(): boolean;
     canRedo(): boolean;
     getDefinitions(): BpmnDefinitions | null;
     applyChange(fn: (defs: BpmnDefinitions) => BpmnDefinitions): void;
+    /**
+     * The raw pan and zoom, for restoring it later.
+     *
+     * Paired with {@link setViewport} so a viewer can hand its view to an editor
+     * taking its place — without it the swap re-fits, and the diagram jumps under
+     * the cursor at the moment someone starts editing.
+     */
+    getViewport(): ViewportState;
+    /** Restores a viewport captured by {@link getViewport}. */
+    setViewport(state: Partial<ViewportState>): void;
     fitView(padding?: number): void;
     /** The host element that receives the `data-theme` attribute. */
     get container(): HTMLElement;
@@ -124,7 +144,15 @@ export declare class BpmnEditor {
     private _getDuplicateIds;
     private _setDuplicateIdWarning;
     private _renderDefs;
-    private _executeCommand;
+    /**
+     * Performs an edit: the editor's single mutation path.
+     *
+     * Every change goes through {@link applyOp}, including the ones typed right
+     * here — see `ops.ts` for why local edits are not allowed their own shortcut.
+     * Returns the ids the op brought into being, which a caller may need for a
+     * follow-up (starting a label edit on a fresh annotation, say).
+     */
+    private _executeOp;
     /** Label of the change `undo()` would revert (for HUD tooltips), or null. */
     getUndoLabel(): string | null;
     /** Label of the change `redo()` would re-apply (for HUD tooltips), or null. */

package/dist/editor.js

@@ -1,11 +1,13 @@
 import { KeyboardHandler, OverlayManager, ViewportController, computeDiagramBounds, createDefs, createGrid, injectStyles, render, } from "@bpmnkit/canvas";
-import { Bpmn, applyAutoLayout } from "@bpmnkit/core";
+import { Bpmn } from "@bpmnkit/core";
 import { CommandStack } from "./command-stack.js";
 import { injectEditorStyles } from "./css.js";
 import { closestPort, computeWaypoints, computeWaypointsAvoiding, computeWaypointsWithPorts, diagramToScreen, labelBoundsForPosition, portFromWaypoint, screenToDiagram, } from "./geometry.js";
 import { defaultTranslate } from "./i18n.js";
+import { newIdSeed } from "./id.js";
 import { LabelEditor } from "./label-editor.js";
-import { changeElementType as changeElementTypeFn, copyElements, createAnnotation, createAnnotationWithLink, createBoundaryEvent, createConnection, createEmptyDefinitions, createShape, deleteElements, insertEdgeWaypoint, insertShapeOnEdge, moveEdgeSegment, moveEdgeWaypoint, moveShapes, pasteElements, removeCollinearWaypoints, resizeShape, updateEdgeEndpoint, updateLabel, updateLabelPosition, updateShapeColor, } from "./modeling.js";
+import { copyElements, createEmptyDefinitions, insertEdgeWaypoint, moveEdgeSegment, moveEdgeWaypoint, } from "./modeling.js";
+import { applyOp } from "./ops.js";
 import { OverlayRenderer } from "./overlay.js";
 import { canAttach, canConnect, canMorph, canResize } from "./rules.js";
 import { EditorStateMachine } from "./state-machine.js";
@@ -376,7 +378,7 @@ export class BpmnEditor {
             previewResize: (bounds) => this._overlay.setResizePreview(bounds),
             commitResize: (id, bounds) => {
                 this._overlay.setResizePreview(null);
-                this._executeCommand((d) => resizeShape(d, id, bounds), "Resize");
+                this._executeOp({ kind: "resize", id, bounds }, { label: "Resize" });
             },
             previewConnect: (ghostEnd, targetId) => {
                 const src = this._connectSourceBounds();
@@ -401,7 +403,7 @@ export class BpmnEditor {
             startLabelEdit: (id) => this._startLabelEdit(id),
             setHovered: (id) => this._overlay.setHovered(id, this._shapes),
             executeDelete: (ids) => {
-                this._executeCommand((d) => deleteElements(d, ids), "Delete");
+                this._executeOp({ kind: "delete", ids }, { label: "Delete" });
                 this._setSelection([]);
             },
             executeCopy: () => this._doCopy(),
@@ -431,7 +433,7 @@ export class BpmnEditor {
                 this._overlay.setEndpointDragGhost(null);
                 this._overlay.setAlignmentGuides([]);
                 const snap = this._snapWaypoint(pt);
-                this._executeCommand((d) => removeCollinearWaypoints(insertEdgeWaypoint(d, edgeId, segIdx, snap.pt), edgeId), "Add waypoint");
+                this._executeOp({ kind: "insertWaypoint", edgeId, segIdx, point: snap.pt }, { label: "Add waypoint" });
             },
             cancelWaypointInsert: () => {
                 this._overlay.setEndpointDragGhost(null);
@@ -450,7 +452,7 @@ export class BpmnEditor {
                 this._overlay.setEndpointDragGhost(null);
                 this._overlay.setAlignmentGuides([]);
                 const snap = this._snapWaypoint(pt);
-                this._executeCommand((d) => removeCollinearWaypoints(moveEdgeWaypoint(d, edgeId, wpIdx, snap.pt), edgeId), "Move waypoint");
+                this._executeOp({ kind: "moveWaypoint", edgeId, wpIdx, point: snap.pt }, { label: "Move waypoint" });
             },
             cancelWaypointMove: () => {
                 this._overlay.setEndpointDragGhost(null);
@@ -465,7 +467,7 @@ export class BpmnEditor {
             },
             commitSegmentMove: (edgeId, segIdx, isHoriz, delta) => {
                 this._overlay.setEndpointDragGhost(null);
-                this._executeCommand((d) => removeCollinearWaypoints(moveEdgeSegment(d, edgeId, segIdx, isHoriz, delta), edgeId), "Move segment");
+                this._executeOp({ kind: "moveSegment", edgeId, segIdx, isHoriz, delta }, { label: "Move segment" });
             },
             cancelSegmentMove: () => {
                 this._overlay.setEndpointDragGhost(null);
@@ -491,7 +493,7 @@ export class BpmnEditor {
         this._stateMachine = new EditorStateMachine(callbacks);
         // ── Label editor ─────────────────────────────────────────────
         this._labelEditor = new LabelEditor(this._host, (id, text) => {
-            this._executeCommand((d) => updateLabel(d, id, text), "Rename", `label:${id}`);
+            this._executeOp({ kind: "rename", id, name: text }, { label: "Rename", coalesceKey: `label:${id}` });
             this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
         }, () => {
             this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
@@ -552,7 +554,7 @@ export class BpmnEditor {
      * The operation is undoable.
      */
     autoLayout() {
-        this._executeCommand(applyAutoLayout, "Auto-layout");
+        this._executeOp({ kind: "autoLayout" }, { label: "Auto-layout" });
         this.fitView();
     }
     loadDefinitions(defs) {
@@ -625,7 +627,7 @@ export class BpmnEditor {
         if (this._selectedIds.length === 0)
             return;
         const ids = [...this._selectedIds];
-        this._executeCommand((d) => deleteElements(d, ids), "Delete");
+        this._executeOp({ kind: "delete", ids }, { label: "Delete" });
         this._setSelection([]);
     }
     /** Bounds of the currently-selected shapes (edges have none, and are skipped). */
@@ -678,7 +680,7 @@ export class BpmnEditor {
                 moves.push({ id: b.id, dx, dy });
         }
         if (moves.length > 0)
-            this._executeCommand((d) => moveShapes(d, moves), "Align");
+            this._executeOp({ kind: "move", moves }, { label: "Align" });
     }
     /**
      * Distributes the selected shapes so the gaps between them are equal along
@@ -713,7 +715,7 @@ export class BpmnEditor {
             cursor += size(b) + gap;
         }
         if (moves.length > 0)
-            this._executeCommand((d) => moveShapes(d, moves), "Distribute");
+            this._executeOp({ kind: "move", moves }, { label: "Distribute" });
     }
     /**
      * Searches the model (recursively, including sub-process children) for
@@ -755,17 +757,27 @@ export class BpmnEditor {
     }
     undo() {
         const prev = this._commandStack.undo();
-        if (prev) {
-            this._renderDefs(prev);
-            this._emit("diagram:change", prev);
-        }
+        if (prev)
+            this._stepTo(prev);
     }
     redo() {
         const next = this._commandStack.redo();
-        if (next) {
-            this._renderDefs(next);
-            this._emit("diagram:change", next);
-        }
+        if (next)
+            this._stepTo(next);
+    }
+    /**
+     * Moves to a document already on the command stack — an undo or a redo.
+     *
+     * It describes itself as a `snapshot` op, which is the only honest option: a
+     * step back through the stack is a state change like any other, and a
+     * listener relaying edits elsewhere that never heard about it would be
+     * silently wrong from then on. There is no smaller description available —
+     * the inverse of an op is not something the stack records.
+     */
+    _stepTo(defs) {
+        this._renderDefs(defs);
+        this._emit("diagram:change", defs);
+        this._emit("diagram:op", { kind: "snapshot", defs }, defs);
     }
     canUndo() {
         return this._commandStack.canUndo();
@@ -777,7 +789,23 @@ export class BpmnEditor {
         return this._defs;
     }
     applyChange(fn) {
-        this._executeCommand(fn);
+        if (this._readOnly || !this._defs)
+            return;
+        this._executeOp({ kind: "snapshot", defs: fn(this._defs) });
+    }
+    /**
+     * The raw pan and zoom, for restoring it later.
+     *
+     * Paired with {@link setViewport} so a viewer can hand its view to an editor
+     * taking its place — without it the swap re-fits, and the diagram jumps under
+     * the cursor at the moment someone starts editing.
+     */
+    getViewport() {
+        return this._viewport.state;
+    }
+    /** Restores a viewport captured by {@link getViewport}. */
+    setViewport(state) {
+        this._viewport.set(state);
     }
     fitView(padding = 40) {
         if (!this._defs)
@@ -988,15 +1016,31 @@ export class BpmnEditor {
         }
         this._emit("diagram:load", defs, { missingShapes: [], missingEdges: [] });
     }
-    _executeCommand(fn, label = "", coalesceKey) {
+    /**
+     * Performs an edit: the editor's single mutation path.
+     *
+     * Every change goes through {@link applyOp}, including the ones typed right
+     * here — see `ops.ts` for why local edits are not allowed their own shortcut.
+     * Returns the ids the op brought into being, which a caller may need for a
+     * follow-up (starting a label edit on a fresh annotation, say).
+     */
+    _executeOp(op, options = {}) {
         if (this._readOnly || !this._defs)
-            return;
-        const newDefs = fn(this._defs);
-        this._commandStack.push(newDefs, label, coalesceKey);
-        this._renderDefs(newDefs);
-        if (label)
-            this._announce(this._t(label));
-        this._emit("diagram:change", newDefs);
+            return [];
+        const { defs, created } = applyOp(this._defs, op);
+        // Selection is set before the render so the new element comes up selected.
+        const select = options.select === "all" ? created : options.select === "first" ? created.slice(0, 1) : null;
+        if (select)
+            this._selectedIds = select;
+        this._commandStack.push(defs, options.label ?? "", options.coalesceKey);
+        this._renderDefs(defs);
+        if (options.label)
+            this._announce(this._t(options.label));
+        this._emit("diagram:change", defs);
+        this._emit("diagram:op", op, defs);
+        if (select)
+            this._emit("editor:select", select);
+        return created;
     }
     /** Label of the change `undo()` would revert (for HUD tooltips), or null. */
     getUndoLabel() {
@@ -1103,10 +1147,10 @@ export class BpmnEditor {
         const moves = this._selectedIds.map((id) => ({ id, dx: snap.dx, dy: snap.dy }));
         const shapeId = this._selectedIds.length === 1 ? this._selectedIds[0] : undefined;
         if (edgeDropId && shapeId) {
-            this._executeCommand((d) => insertShapeOnEdge(moveShapes(d, moves), edgeDropId, shapeId), "Insert on flow");
+            this._executeOp({ kind: "move", moves, onEdge: { edgeId: edgeDropId, shapeId } }, { label: "Insert on flow" });
         }
         else {
-            this._executeCommand((d) => moveShapes(d, moves), "Move");
+            this._executeOp({ kind: "move", moves }, { label: "Move" });
         }
         if (this._isDragging) {
             this._isDragging = false;
@@ -1181,7 +1225,7 @@ export class BpmnEditor {
             }
         }
         if (moves.length > 0) {
-            this._executeCommand((d) => moveShapes(d, moves), "Move");
+            this._executeOp({ kind: "move", moves }, { label: "Move" });
         }
     }
     _cancelSpace() {
@@ -1203,13 +1247,9 @@ export class BpmnEditor {
             return;
         const bounds = defaultBounds(type, actualCenter.x, actualCenter.y);
         if (type === "textAnnotation") {
-            const result = createAnnotation(this._defs, bounds);
-            this._selectedIds = [result.id];
-            this._commandStack.push(result.defs);
-            this._renderDefs(result.defs);
-            this._emit("diagram:change", result.defs);
-            this._emit("editor:select", [result.id]);
-            this._startLabelEdit(result.id);
+            const [id] = this._executeOp({ kind: "createAnnotation", bounds, seed: newIdSeed() }, { select: "first" });
+            if (id)
+                this._startLabelEdit(id);
             return;
         }
         // If hovering over an activity, create a boundary event
@@ -1223,24 +1263,23 @@ export class BpmnEditor {
                 const eventBounds = snapToBoundary(actualCenter, hostBounds, 18);
                 // Map palette type to event definition type
                 const eventDefType = intermediateEventDefType(type);
-                const result = createBoundaryEvent(this._defs, boundaryHostId, eventDefType, eventBounds);
-                this._selectedIds = [result.id];
-                this._commandStack.push(result.defs);
-                this._renderDefs(result.defs);
-                this._emit("diagram:change", result.defs);
-                this._emit("editor:select", [result.id]);
+                this._executeOp({
+                    kind: "createBoundaryEvent",
+                    hostId: boundaryHostId,
+                    eventDefType,
+                    bounds: eventBounds,
+                    seed: newIdSeed(),
+                }, { select: "first" });
                 return;
             }
         }
-        const result = createShape(this._defs, type, bounds);
-        this._selectedIds = [result.id];
-        const finalDefs = pendingEdgeDrop
-            ? insertShapeOnEdge(result.defs, pendingEdgeDrop, result.id)
-            : result.defs;
-        this._commandStack.push(finalDefs);
-        this._renderDefs(finalDefs);
-        this._emit("diagram:change", finalDefs);
-        this._emit("editor:select", [result.id]);
+        this._executeOp({
+            kind: "createShape",
+            type,
+            bounds,
+            onEdge: pendingEdgeDrop ?? undefined,
+            seed: newIdSeed(),
+        }, { select: "first" });
     }
     _doConnect(srcId, tgtId) {
         const srcShape = this._shapeById.get(srcId);
@@ -1255,7 +1294,7 @@ export class BpmnEditor {
             .filter((s) => s.id !== srcId && s.id !== tgtId)
             .map((s) => s.shape.bounds);
         const waypoints = computeWaypointsAvoiding(srcShape.shape.bounds, tgtShape.shape.bounds, obstacles);
-        this._executeCommand((d) => createConnection(d, srcId, tgtId, waypoints).defs, "Connect");
+        this._executeOp({ kind: "createConnection", sourceId: srcId, targetId: tgtId, waypoints, seed: newIdSeed() }, { label: "Connect" });
     }
     _doCopy() {
         if (!this._defs || this._selectedIds.length === 0)
@@ -1265,20 +1304,14 @@ export class BpmnEditor {
     _doPaste() {
         if (!this._clipboard)
             return;
-        const base = this._defs ?? createEmptyDefinitions();
-        const result = pasteElements(base, this._clipboard, 20, 20);
-        this._selectedIds = result.topLevelIds;
-        this._commandStack.push(result.defs, "Paste");
-        this._renderDefs(result.defs);
-        this._emit("diagram:change", result.defs);
-        this._emit("editor:select", result.topLevelIds);
+        this._executeOp({ kind: "paste", clipboard: this._clipboard, offsetX: 20, offsetY: 20, seed: newIdSeed() }, { label: "Paste", select: "all" });
     }
     _doCut() {
         if (!this._defs || this._selectedIds.length === 0)
             return;
         this._doCopy();
         const ids = [...this._selectedIds];
-        this._executeCommand((d) => deleteElements(d, ids), "Cut");
+        this._executeOp({ kind: "delete", ids }, { label: "Cut" });
         this._setSelection([]);
     }
     _startLabelEdit(id) {
@@ -1390,15 +1423,17 @@ export class BpmnEditor {
         }
         const newBounds = this._smartPlaceBounds(srcBounds, sourceId, w, h);
         const obstacles = this._shapes.filter((s) => s.id !== sourceId).map((s) => s.shape.bounds);
-        const r1 = createShape(this._defs, type, newBounds, name);
         const waypoints = computeWaypointsAvoiding(srcBounds, newBounds, obstacles);
-        const r2 = createConnection(r1.defs, sourceId, r1.id, waypoints);
-        this._selectedIds = [r1.id];
-        this._commandStack.push(r2.defs);
-        this._renderDefs(r2.defs);
-        this._emit("diagram:change", r2.defs);
-        this._emit("editor:select", [r1.id]);
-        return r1.id;
+        const [id] = this._executeOp({
+            kind: "createConnected",
+            sourceId,
+            type,
+            name,
+            bounds: newBounds,
+            waypoints,
+            seed: newIdSeed(),
+        }, { select: "first" });
+        return id ?? null;
     }
     _smartPlaceBounds(srcBounds, sourceId, w, h) {
         const GAP = 60;
@@ -1495,7 +1530,7 @@ export class BpmnEditor {
         if (!shape)
             return;
         const labelBounds = labelBoundsForPosition(shape.shape.bounds, position);
-        this._executeCommand((d) => updateLabelPosition(d, shapeId, labelBounds), "Move label");
+        this._executeOp({ kind: "labelPosition", id: shapeId, bounds: labelBounds }, { label: "Move label" });
     }
     /** Starts inline label editing for the element with the given id. */
     editLabel(id) {
@@ -1537,17 +1572,19 @@ export class BpmnEditor {
             width: annW,
             height: annH,
         };
-        const result = createAnnotationWithLink(this._defs, annBounds, sourceId, srcBounds);
-        this._selectedIds = [result.annotationId];
-        this._commandStack.push(result.defs);
-        this._renderDefs(result.defs);
-        this._emit("diagram:change", result.defs);
-        this._emit("editor:select", [result.annotationId]);
-        this._startLabelEdit(result.annotationId);
+        const [id] = this._executeOp({
+            kind: "createAnnotationFor",
+            sourceId,
+            bounds: annBounds,
+            sourceBounds: srcBounds,
+            seed: newIdSeed(),
+        }, { select: "first" });
+        if (id)
+            this._startLabelEdit(id);
     }
     /** Updates the color of a shape in the diagram. Pass `{}` to clear colors. */
     updateColor(id, color) {
-        this._executeCommand((d) => updateShapeColor(d, id, color), "Change colour", `color:${id}`);
+        this._executeOp({ kind: "color", id, color }, { label: "Change colour", coalesceKey: `color:${id}` });
     }
     // ── Private helpers ────────────────────────────────────────────────
     _setEdgeSelected(edgeId) {
@@ -1572,7 +1609,7 @@ export class BpmnEditor {
         const current = this._shapeById.get(id)?.flowElement?.type;
         if (current && !canMorph(current, newType))
             return;
-        this._executeCommand((d) => changeElementTypeFn(d, id, newType), "Change type");
+        this._executeOp({ kind: "changeType", id, type: newType }, { label: "Change type" });
     }
     _findEdgeDropTarget(dx, dy) {
         if (this._selectedIds.length !== 1)
@@ -1677,7 +1714,7 @@ export class BpmnEditor {
         const newPort = isStart
             ? closestPort(diagPoint, srcDi.bounds)
             : closestPort(diagPoint, tgtDi.bounds);
-        this._executeCommand((d) => updateEdgeEndpoint(d, edgeId, isStart, newPort), "Reconnect");
+        this._executeOp({ kind: "reconnect", edgeId, isStart, port: newPort }, { label: "Reconnect" });
     }
     _isResizable(id) {
         const shape = this._shapeById.get(id);

package/dist/headless.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The editor's DOM-free surface: operations, and the ids they mint.
+ *
+ * `@bpmnkit/editor` itself reaches for `document` the moment it is imported —
+ * it is an editor. But the part that decides *what an edit does* never touches
+ * the DOM, and that part has to run in two more places: a Durable Object
+ * replaying a writer's op to verify it, and a watcher applying the same op
+ * without an editor loaded at all.
+ *
+ * So this entry exists to be importable from a Worker. Everything reachable
+ * from here is pure, and the subpath keeps it that way — importing the package
+ * root instead would pull the canvas in behind it.
+ */
+export { applyOp } from "./ops.js";
+export type { EditorOp, OpResult, ShapeMove } from "./ops.js";
+export { createIdFactory, genId, newIdSeed } from "./id.js";
+export type { IdFactory } from "./id.js";
+export { createEmptyDefinitions } from "./modeling.js";
+export type { Clipboard } from "./modeling.js";
+export type { CreateShapeType, PortDir } from "./types.js";
+//# sourceMappingURL=headless.d.ts.map

package/dist/headless.js

@@ -0,0 +1,17 @@
+/**
+ * The editor's DOM-free surface: operations, and the ids they mint.
+ *
+ * `@bpmnkit/editor` itself reaches for `document` the moment it is imported —
+ * it is an editor. But the part that decides *what an edit does* never touches
+ * the DOM, and that part has to run in two more places: a Durable Object
+ * replaying a writer's op to verify it, and a watcher applying the same op
+ * without an editor loaded at all.
+ *
+ * So this entry exists to be importable from a Worker. Everything reachable
+ * from here is pure, and the subpath keeps it that way — importing the package
+ * root instead would pull the canvas in behind it.
+ */
+export { applyOp } from "./ops.js";
+export { createIdFactory, genId, newIdSeed } from "./id.js";
+export { createEmptyDefinitions } from "./modeling.js";
+//# sourceMappingURL=headless.js.map

package/dist/id.d.ts

@@ -1,2 +1,27 @@
+/**
+ * How new element ids are minted.
+ *
+ * Normally this is `Math.random()`, which is exactly right for one person
+ * editing one diagram. It is wrong the moment the same edit has to happen twice
+ * — replayed on a server, or on someone else's screen — because two runs would
+ * invent two different ids for the same new task.
+ *
+ * So the minting functions in `modeling.ts` take an optional {@link IdFactory}.
+ * An operation carries a seed, both sides build the same factory from it, and
+ * the same edit produces byte-identical XML wherever it runs.
+ */
+/** Mints an id for a new element, given the prefix its type wants. */
+export type IdFactory = (prefix: string) => string;
+/** The default: unique enough for one editor, different on every call. */
 export declare function genId(prefix: string): string;
+/**
+ * A factory that yields the same sequence of ids for the same seed.
+ *
+ * Deterministic *in call order*, which is the contract an operation replay
+ * relies on: the same function, given the same arguments, asks for the same
+ * prefixes in the same order, so it gets the same ids back.
+ */
+export declare function createIdFactory(seed: string): IdFactory;
+/** A seed with enough entropy that two operations cannot mint the same ids. */
+export declare function newIdSeed(): string;
 //# sourceMappingURL=id.d.ts.map

package/dist/id.js

@@ -1,4 +1,43 @@
+/**
+ * How new element ids are minted.
+ *
+ * Normally this is `Math.random()`, which is exactly right for one person
+ * editing one diagram. It is wrong the moment the same edit has to happen twice
+ * — replayed on a server, or on someone else's screen — because two runs would
+ * invent two different ids for the same new task.
+ *
+ * So the minting functions in `modeling.ts` take an optional {@link IdFactory}.
+ * An operation carries a seed, both sides build the same factory from it, and
+ * the same edit produces byte-identical XML wherever it runs.
+ */
+/** The default: unique enough for one editor, different on every call. */
 export function genId(prefix) {
     return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 }
+/**
+ * A factory that yields the same sequence of ids for the same seed.
+ *
+ * Deterministic *in call order*, which is the contract an operation replay
+ * relies on: the same function, given the same arguments, asks for the same
+ * prefixes in the same order, so it gets the same ids back.
+ */
+export function createIdFactory(seed) {
+    // FNV-1a over the seed, then xorshift32 per id. Small, dependency-free, and
+    // the output is shaped like `genId`'s so nothing downstream can tell them apart.
+    let state = 2166136261;
+    for (let i = 0; i < seed.length; i++) {
+        state ^= seed.charCodeAt(i);
+        state = Math.imul(state, 16777619);
+    }
+    return (prefix) => {
+        state ^= state << 13;
+        state ^= state >>> 17;
+        state ^= state << 5;
+        return `${prefix}_${(state >>> 0).toString(36).padStart(7, "0").slice(0, 7)}`;
+    };
+}
+/** A seed with enough entropy that two operations cannot mint the same ids. */
+export function newIdSeed() {
+    return Math.random().toString(36).slice(2, 12);
+}
 //# sourceMappingURL=id.js.map

package/dist/index.d.ts

@@ -2,6 +2,10 @@ export { BpmnEditor } from "./editor.js";
 export { CHROME_CSS, CHROME_STYLE_ID, injectChromeStyles } from "./chrome.js";
 export { injectStyle } from "./inject.js";
 export { createEmptyDefinitions } from "./modeling.js";
+export { applyOp } from "./ops.js";
+export type { EditorOp, OpResult, ShapeMove } from "./ops.js";
+export { createIdFactory, genId, newIdSeed } from "./id.js";
+export type { IdFactory } from "./id.js";
 export type { EditorEvents, EditorOptions, LabelPosition, Tool, CreateShapeType, HandleDir, PortDir, } from "./types.js";
 export { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, CONTEXTUAL_ADD_TYPES, getElementGroup, getValidLabelPositions, } from "./element-groups.js";
 export type { ElementGroup } from "./element-groups.js";

package/dist/index.js

@@ -2,6 +2,8 @@ export { BpmnEditor } from "./editor.js";
 export { CHROME_CSS, CHROME_STYLE_ID, injectChromeStyles } from "./chrome.js";
 export { injectStyle } from "./inject.js";
 export { createEmptyDefinitions } from "./modeling.js";
+export { applyOp } from "./ops.js";
+export { createIdFactory, genId, newIdSeed } from "./id.js";
 export { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, CONTEXTUAL_ADD_TYPES, getElementGroup, getValidLabelPositions, } from "./element-groups.js";
 export { initEditorHud } from "./hud.js";
 export { createTranslationRecorder, defaultTranslate, interpolate } from "./i18n.js";

package/dist/modeling.d.ts

@@ -1,16 +1,17 @@
 import type { BpmnBounds, BpmnDefinitions, BpmnDiEdge, BpmnDiShape, BpmnFlowElement, BpmnSequenceFlow, BpmnWaypoint, DiColor } from "@bpmnkit/core";
+import { type IdFactory } from "./id.js";
 import type { CreateShapeType, PortDir } from "./types.js";
 /** Creates a minimal valid BpmnDefinitions with one process and one diagram. */
 export declare function createEmptyDefinitions(): BpmnDefinitions;
-export declare function createShape(defs: BpmnDefinitions, type: CreateShapeType, bounds: BpmnBounds, name?: string): {
+export declare function createShape(defs: BpmnDefinitions, type: CreateShapeType, bounds: BpmnBounds, name?: string, ids?: IdFactory): {
     defs: BpmnDefinitions;
     id: string;
 };
-export declare function createBoundaryEvent(defs: BpmnDefinitions, hostId: string, eventDefType: string | null, bounds: BpmnBounds, cancelActivity?: boolean): {
+export declare function createBoundaryEvent(defs: BpmnDefinitions, hostId: string, eventDefType: string | null, bounds: BpmnBounds, cancelActivity?: boolean, ids?: IdFactory): {
     defs: BpmnDefinitions;
     id: string;
 };
-export declare function createConnection(defs: BpmnDefinitions, sourceId: string, targetId: string, waypoints: BpmnWaypoint[]): {
+export declare function createConnection(defs: BpmnDefinitions, sourceId: string, targetId: string, waypoints: BpmnWaypoint[], ids?: IdFactory): {
     defs: BpmnDefinitions;
     id: string;
 };
@@ -74,16 +75,16 @@ export interface Clipboard {
     edges: BpmnDiEdge[];
 }
 export declare function copyElements(defs: BpmnDefinitions, ids: string[]): Clipboard;
-export declare function pasteElements(defs: BpmnDefinitions, clipboard: Clipboard, offsetX: number, offsetY: number): {
+export declare function pasteElements(defs: BpmnDefinitions, clipboard: Clipboard, offsetX: number, offsetY: number, ids?: IdFactory): {
     defs: BpmnDefinitions;
     newIds: Map<string, string>;
     topLevelIds: string[];
 };
-export declare function createAnnotation(defs: BpmnDefinitions, bounds: BpmnBounds, text?: string): {
+export declare function createAnnotation(defs: BpmnDefinitions, bounds: BpmnBounds, text?: string, ids?: IdFactory): {
     defs: BpmnDefinitions;
     id: string;
 };
-export declare function createAnnotationWithLink(defs: BpmnDefinitions, bounds: BpmnBounds, sourceId: string, sourceBounds: BpmnBounds, text?: string): {
+export declare function createAnnotationWithLink(defs: BpmnDefinitions, bounds: BpmnBounds, sourceId: string, sourceBounds: BpmnBounds, text?: string, ids?: IdFactory): {
     defs: BpmnDefinitions;
     annotationId: string;
     associationId: string;

package/dist/modeling.js

@@ -338,9 +338,9 @@ function updateRefInElements(flowElements, id, updateFn) {
     });
 }
 // ── Create shape ─────────────────────────────────────────────────────────────
-export function createShape(defs, type, bounds, name) {
-    const id = genId(type);
-    const shapeId = genId(`${type}_di`);
+export function createShape(defs, type, bounds, name, ids = genId) {
+    const id = ids(type);
+    const shapeId = ids(`${type}_di`);
     const flowElement = makeFlowElement(type, id, name);
     const process = defs.processes[0];
     if (!process)
@@ -382,9 +382,9 @@ export function createShape(defs, type, bounds, name) {
     return { defs: newDefs, id };
 }
 // ── Create boundary event ─────────────────────────────────────────────────────
-export function createBoundaryEvent(defs, hostId, eventDefType, bounds, cancelActivity = true) {
-    const id = genId("BoundaryEvent");
-    const shapeId = genId("BoundaryEvent_di");
+export function createBoundaryEvent(defs, hostId, eventDefType, bounds, cancelActivity = true, ids = genId) {
+    const id = ids("BoundaryEvent");
+    const shapeId = ids("BoundaryEvent_di");
     const process = defs.processes[0];
     if (!process)
         return { defs, id };
@@ -434,9 +434,9 @@ export function createBoundaryEvent(defs, hostId, eventDefType, bounds, cancelAc
     };
 }
 // ── Create connection ─────────────────────────────────────────────────────────
-export function createConnection(defs, sourceId, targetId, waypoints) {
-    const id = genId("Flow");
-    const edgeId = genId("Flow_di");
+export function createConnection(defs, sourceId, targetId, waypoints, ids = genId) {
+    const id = ids("Flow");
+    const edgeId = ids("Flow_di");
     const process = defs.processes[0];
     if (!process)
         return { defs, id };
@@ -1373,19 +1373,19 @@ export function copyElements(defs, ids) {
     return { elements, flows, shapes, edges };
 }
 /** Assigns a fresh id to `el` and every descendant / nested edge, recording the mapping. */
-function buildIdMap(el, map) {
-    map.set(el.id, genId(el.type));
+function buildIdMap(el, map, ids) {
+    map.set(el.id, ids(el.type));
     if (hasChildren(el)) {
         for (const child of el.flowElements)
-            buildIdMap(child, map);
+            buildIdMap(child, map, ids);
         for (const sf of el.sequenceFlows)
-            map.set(sf.id, genId("Flow"));
+            map.set(sf.id, ids("Flow"));
         for (const ta of el.textAnnotations)
-            map.set(ta.id, genId("TextAnnotation"));
+            map.set(ta.id, ids("TextAnnotation"));
         for (const a of el.associations)
-            map.set(a.id, genId("Association"));
+            map.set(a.id, ids("Association"));
         for (const g of el.groups)
-            map.set(g.id, genId("Group"));
+            map.set(g.id, ids("Group"));
     }
 }
 /** Deep-clones `el`, remapping its own id, refs, and all nested children through `map`. */
@@ -1424,13 +1424,13 @@ function remapFlow(sf, map) {
         targetRef: map.get(sf.targetRef) ?? sf.targetRef,
     };
 }
-export function pasteElements(defs, clipboard, offsetX, offsetY) {
+export function pasteElements(defs, clipboard, offsetX, offsetY, ids = genId) {
     const newIds = new Map();
     // Generate new IDs for every element (recursively) and top-level flow.
     for (const el of clipboard.elements)
-        buildIdMap(el, newIds);
+        buildIdMap(el, newIds, ids);
     for (const sf of clipboard.flows)
-        newIds.set(sf.id, genId("Flow"));
+        newIds.set(sf.id, ids("Flow"));
     const process = defs.processes[0];
     const diagram = defs.diagrams[0];
     if (!process || !diagram)
@@ -1442,7 +1442,7 @@ export function pasteElements(defs, clipboard, offsetX, offsetY) {
         const newElId = newIds.get(s.bpmnElement) ?? s.bpmnElement;
         return {
             ...s,
-            id: genId(`${newElId}_di`),
+            id: ids(`${newElId}_di`),
             bpmnElement: newElId,
             bounds: {
                 ...s.bounds,
@@ -1456,7 +1456,7 @@ export function pasteElements(defs, clipboard, offsetX, offsetY) {
         const newFlowId = newIds.get(e.bpmnElement) ?? e.bpmnElement;
         return {
             ...e,
-            id: genId(`${newFlowId}_di`),
+            id: ids(`${newFlowId}_di`),
             bpmnElement: newFlowId,
             waypoints: e.waypoints.map((wp) => ({
                 x: wp.x + offsetX,
@@ -1492,9 +1492,9 @@ export function pasteElements(defs, clipboard, offsetX, offsetY) {
     return { defs: newDefs, newIds, topLevelIds };
 }
 // ── Create text annotation ────────────────────────────────────────────────────
-export function createAnnotation(defs, bounds, text) {
-    const id = genId("TextAnnotation");
-    const shapeId = genId("TextAnnotation_di");
+export function createAnnotation(defs, bounds, text, ids = genId) {
+    const id = ids("TextAnnotation");
+    const shapeId = ids("TextAnnotation_di");
     const annotation = { id, text, unknownAttributes: {} };
     const diShape = { id: shapeId, bpmnElement: id, bounds, unknownAttributes: {} };
     const process = defs.processes[0];
@@ -1521,11 +1521,11 @@ export function createAnnotation(defs, bounds, text) {
         id,
     };
 }
-export function createAnnotationWithLink(defs, bounds, sourceId, sourceBounds, text) {
-    const annotResult = createAnnotation(defs, bounds, text);
+export function createAnnotationWithLink(defs, bounds, sourceId, sourceBounds, text, ids = genId) {
+    const annotResult = createAnnotation(defs, bounds, text, ids);
     const annotationId = annotResult.id;
-    const assocId = genId("Association");
-    const edgeId = genId("Association_di");
+    const assocId = ids("Association");
+    const edgeId = ids("Association_di");
     const assoc = {
         id: assocId,
         sourceRef: sourceId,

package/dist/ops.d.ts

@@ -0,0 +1,158 @@
+/**
+ * The editor's operations: what a change *was*, rather than what it produced.
+ *
+ * `diagram:change` hands out the whole new document, which is all a single
+ * editor needs. Sending that over a wire on every keystroke is not: a
+ * `moveShapes` op is a few hundred bytes where a serialised `BpmnDefinitions`
+ * is hundreds of kilobytes. So every edit also describes itself, and
+ * {@link applyOp} turns the description back into the edit.
+ *
+ * **`applyOp` is the only way the editor performs these edits**, locally as well
+ * as on replay. That is deliberate: if the editor composed the modeling calls
+ * itself and `applyOp` composed them again, the two could drift, and the whole
+ * point is that the same op yields byte-identical XML wherever it runs. Ids are
+ * the other half of that promise — creating ops carry a seed rather than
+ * inventing ids at random, so a replay mints the same ones (see `id.ts`).
+ */
+import type { BpmnBounds, BpmnDefinitions, BpmnWaypoint, DiColor } from "@bpmnkit/core";
+import { type Clipboard } from "./modeling.js";
+import type { CreateShapeType, PortDir } from "./types.js";
+/** One shape's displacement. */
+export interface ShapeMove {
+    id: string;
+    dx: number;
+    dy: number;
+}
+/**
+ * A single editor edit.
+ *
+ * `seed` appears on every op that creates something: it is what makes the new
+ * element's id a property of the op rather than of the machine that ran it.
+ */
+export type EditorOp = {
+    kind: "createShape";
+    type: CreateShapeType;
+    bounds: BpmnBounds;
+    name?: string;
+    onEdge?: string;
+    seed: string;
+} | {
+    kind: "createBoundaryEvent";
+    hostId: string;
+    eventDefType: string | null;
+    bounds: BpmnBounds;
+    seed: string;
+} | {
+    kind: "createAnnotation";
+    bounds: BpmnBounds;
+    text?: string;
+    seed: string;
+} | {
+    kind: "createAnnotationFor";
+    sourceId: string;
+    bounds: BpmnBounds;
+    sourceBounds: BpmnBounds;
+    seed: string;
+} | {
+    kind: "createConnection";
+    sourceId: string;
+    targetId: string;
+    waypoints: BpmnWaypoint[];
+    seed: string;
+}
+/**
+ * A shape and the flow reaching it, as one edit — the "add element" affordance.
+ *
+ * Placement and routing are decided by the editor, from shapes only it can see,
+ * and travel in the op: a replay that recomputed them would need the same
+ * obstacles on screen to land in the same place.
+ */
+ | {
+    kind: "createConnected";
+    sourceId: string;
+    type: CreateShapeType;
+    name?: string;
+    bounds: BpmnBounds;
+    waypoints: BpmnWaypoint[];
+    seed: string;
+} | {
+    kind: "paste";
+    clipboard: Clipboard;
+    offsetX: number;
+    offsetY: number;
+    seed: string;
+} | {
+    kind: "move";
+    moves: ShapeMove[];
+    onEdge?: {
+        edgeId: string;
+        shapeId: string;
+    };
+} | {
+    kind: "resize";
+    id: string;
+    bounds: BpmnBounds;
+} | {
+    kind: "delete";
+    ids: string[];
+} | {
+    kind: "rename";
+    id: string;
+    name: string;
+} | {
+    kind: "labelPosition";
+    id: string;
+    bounds: BpmnBounds;
+} | {
+    kind: "color";
+    id: string;
+    color: DiColor;
+} | {
+    kind: "changeType";
+    id: string;
+    type: CreateShapeType;
+} | {
+    kind: "reconnect";
+    edgeId: string;
+    isStart: boolean;
+    port: PortDir;
+} | {
+    kind: "insertWaypoint";
+    edgeId: string;
+    segIdx: number;
+    point: BpmnWaypoint;
+} | {
+    kind: "moveWaypoint";
+    edgeId: string;
+    wpIdx: number;
+    point: BpmnWaypoint;
+} | {
+    kind: "moveSegment";
+    edgeId: string;
+    segIdx: number;
+    isHoriz: boolean;
+    delta: number;
+} | {
+    kind: "autoLayout";
+}
+/**
+ * The escape hatch: a whole document, for edits that have no description.
+ *
+ * `applyChange` takes an arbitrary function — the properties panel uses it —
+ * and a function cannot be replayed. Under a single writer a whole-document
+ * op is still correct, just larger on the wire, so nothing is unreplayable;
+ * it simply costs more.
+ */
+ | {
+    kind: "snapshot";
+    defs: BpmnDefinitions;
+};
+/** The result of an op: the new document, and anything it brought into being. */
+export interface OpResult {
+    defs: BpmnDefinitions;
+    /** Ids created by this op, in the order they were made. Empty for edits. */
+    created: string[];
+}
+/** Performs an op. The same op, on the same document, anywhere. */
+export declare function applyOp(defs: BpmnDefinitions, op: EditorOp): OpResult;
+//# sourceMappingURL=ops.d.ts.map

package/dist/ops.js

@@ -0,0 +1,82 @@
+import { applyAutoLayout } from "@bpmnkit/core";
+import { createIdFactory } from "./id.js";
+import { changeElementType, createAnnotation, createAnnotationWithLink, createBoundaryEvent, createConnection, createShape, deleteElements, insertEdgeWaypoint, insertShapeOnEdge, moveEdgeSegment, moveEdgeWaypoint, moveShapes, pasteElements, removeCollinearWaypoints, resizeShape, updateEdgeEndpoint, updateLabel, updateLabelPosition, updateShapeColor, } from "./modeling.js";
+/** Performs an op. The same op, on the same document, anywhere. */
+export function applyOp(defs, op) {
+    switch (op.kind) {
+        case "createShape": {
+            const r = createShape(defs, op.type, op.bounds, op.name, createIdFactory(op.seed));
+            // Dropping a shape onto a flow splices it into that flow.
+            const next = op.onEdge ? insertShapeOnEdge(r.defs, op.onEdge, r.id) : r.defs;
+            return { defs: next, created: [r.id] };
+        }
+        case "createBoundaryEvent": {
+            const r = createBoundaryEvent(defs, op.hostId, op.eventDefType, op.bounds, true, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createAnnotation": {
+            const r = createAnnotation(defs, op.bounds, op.text, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createAnnotationFor": {
+            const r = createAnnotationWithLink(defs, op.bounds, op.sourceId, op.sourceBounds, undefined, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.annotationId, r.associationId] };
+        }
+        case "createConnection": {
+            const r = createConnection(defs, op.sourceId, op.targetId, op.waypoints, createIdFactory(op.seed));
+            return { defs: r.defs, created: [r.id] };
+        }
+        case "createConnected": {
+            // One factory for both halves, so the pair of ids is one sequence.
+            const ids = createIdFactory(op.seed);
+            const shape = createShape(defs, op.type, op.bounds, op.name, ids);
+            const flow = createConnection(shape.defs, op.sourceId, shape.id, op.waypoints, ids);
+            return { defs: flow.defs, created: [shape.id, flow.id] };
+        }
+        case "paste": {
+            const r = pasteElements(defs, op.clipboard, op.offsetX, op.offsetY, createIdFactory(op.seed));
+            return { defs: r.defs, created: r.topLevelIds };
+        }
+        case "move": {
+            const moved = moveShapes(defs, op.moves);
+            const next = op.onEdge ? insertShapeOnEdge(moved, op.onEdge.edgeId, op.onEdge.shapeId) : moved;
+            return { defs: next, created: [] };
+        }
+        case "resize":
+            return { defs: resizeShape(defs, op.id, op.bounds), created: [] };
+        case "delete":
+            return { defs: deleteElements(defs, op.ids), created: [] };
+        case "rename":
+            return { defs: updateLabel(defs, op.id, op.name), created: [] };
+        case "labelPosition":
+            return { defs: updateLabelPosition(defs, op.id, op.bounds), created: [] };
+        case "color":
+            return { defs: updateShapeColor(defs, op.id, op.color), created: [] };
+        case "changeType":
+            return { defs: changeElementType(defs, op.id, op.type), created: [] };
+        case "reconnect":
+            return { defs: updateEdgeEndpoint(defs, op.edgeId, op.isStart, op.port), created: [] };
+        // Every waypoint edit tidies the route afterwards, so a drag that leaves
+        // three points in a line does not leave the middle one behind.
+        case "insertWaypoint":
+            return {
+                defs: removeCollinearWaypoints(insertEdgeWaypoint(defs, op.edgeId, op.segIdx, op.point), op.edgeId),
+                created: [],
+            };
+        case "moveWaypoint":
+            return {
+                defs: removeCollinearWaypoints(moveEdgeWaypoint(defs, op.edgeId, op.wpIdx, op.point), op.edgeId),
+                created: [],
+            };
+        case "moveSegment":
+            return {
+                defs: removeCollinearWaypoints(moveEdgeSegment(defs, op.edgeId, op.segIdx, op.isHoriz, op.delta), op.edgeId),
+                created: [],
+            };
+        case "autoLayout":
+            return { defs: applyAutoLayout(defs), created: [] };
+        case "snapshot":
+            return { defs: op.defs, created: [] };
+    }
+}
+//# sourceMappingURL=ops.js.map

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import type { CanvasEvents, CanvasOptions } from "@bpmnkit/canvas";
 import type { BpmnDefinitions } from "@bpmnkit/core";
 import type { Translate } from "./i18n.js";
+import type { EditorOp } from "./ops.js";
 export type CreateShapeType = "startEvent" | "messageStartEvent" | "timerStartEvent" | "conditionalStartEvent" | "signalStartEvent" | "endEvent" | "messageEndEvent" | "escalationEndEvent" | "errorEndEvent" | "compensationEndEvent" | "signalEndEvent" | "terminateEndEvent" | "intermediateThrowEvent" | "intermediateCatchEvent" | "messageCatchEvent" | "messageThrowEvent" | "timerCatchEvent" | "escalationThrowEvent" | "conditionalCatchEvent" | "linkCatchEvent" | "linkThrowEvent" | "compensationThrowEvent" | "signalCatchEvent" | "signalThrowEvent" | "task" | "serviceTask" | "userTask" | "scriptTask" | "sendTask" | "receiveTask" | "businessRuleTask" | "manualTask" | "callActivity" | "subProcess" | "adHocSubProcess" | "transaction" | "exclusiveGateway" | "parallelGateway" | "inclusiveGateway" | "eventBasedGateway" | "complexGateway" | "textAnnotation";
 /** Element types that support resize handles. */
 export declare const RESIZABLE_TYPES: ReadonlySet<string>;
@@ -25,6 +26,21 @@ export type EditorOptions = CanvasOptions & {
 };
 export interface EditorEvents extends CanvasEvents {
     "diagram:change": (defs: BpmnDefinitions) => void;
+    /**
+     * The same change, described rather than materialised.
+     *
+     * Fires immediately after `diagram:change` for every change to the document,
+     * undo and redo included — those arrive as a whole-document `snapshot` op,
+     * because the stack records states rather than inverses and a relay that
+     * never heard about an undo would be silently wrong from then on.
+     *
+     * The exception is `loadDefinitions`, which is the host replacing the
+     * document rather than the user changing it, and says nothing.
+     *
+     * A listener relaying edits to other people wants this event; a listener that
+     * just needs the current document wants `diagram:change`.
+     */
+    "diagram:op": (op: EditorOp, defs: BpmnDefinitions) => void;
     "editor:select": (ids: string[]) => void;
     "editor:tool": (tool: Tool) => void;
     "editor:drag": (dragging: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,6 +8,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js"
     }
   },
   "files": [
@@ -17,8 +21,8 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.1.0",
-    "@bpmnkit/core": "0.3.0"
+    "@bpmnkit/canvas": "0.2.0",
+    "@bpmnkit/core": "0.4.0"
   },
   "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
   "keywords": [