@bpmnkit/editor 0.0.35 → 0.2.0

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

@@ -1,5 +1,11 @@
 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

@@ -1,5 +1,9 @@
 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/inject.d.ts

@@ -0,0 +1,3 @@
+/** Injects a CSS string into `<head>` exactly once, keyed by id. */
+export declare function injectStyle(id: string, css: string): void;
+//# sourceMappingURL=inject.d.ts.map

package/dist/inject.js

@@ -0,0 +1,12 @@
+/** Injects a CSS string into `<head>` exactly once, keyed by id. */
+export function injectStyle(id, css) {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=inject.js.map

package/dist/modal.js

@@ -1,5 +1,7 @@
+import { injectChromeStyles } from "./chrome.js";
 const MODAL_STYLE_ID = "bpmnkit-hud-modal-styles";
 function injectModalStyles() {
+    injectChromeStyles();
     if (document.getElementById(MODAL_STYLE_ID))
         return;
     const style = document.createElement("style");
@@ -7,76 +9,54 @@ function injectModalStyles() {
     style.textContent = `
 .bpmnkit-hud-modal-overlay {
   position: fixed; inset: 0; z-index: 300;
-  background: rgba(0,0,0,0.5);
+  background: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 55%, transparent);
   display: flex; align-items: center; justify-content: center;
 }
 .bpmnkit-hud-modal {
-  background: rgba(22, 22, 30, 0.97);
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 10px;
-  padding: 20px;
-  min-width: 300px; max-width: 90vw;
-  color: rgba(255,255,255,0.85);
-  font-family: system-ui, -apple-system, sans-serif;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
-  display: flex; flex-direction: column; gap: 12px;
+  background: var(--bpmnkit-chrome-ground, #ffffff);
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  padding: 24px 26px;
+  min-width: 320px; max-width: 90vw;
+  color: var(--bpmnkit-chrome-ink-2, #c8ccd2);
+  font-family: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);
+  display: flex; flex-direction: column; gap: 14px;
 }
 .bpmnkit-hud-modal-title {
-  font-size: 14px; font-weight: 600;
-  color: rgba(255,255,255,0.95);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--bpmnkit-chrome-ink-4, #9aa1aa);
 }
 .bpmnkit-hud-modal-input {
-  width: 100%; padding: 6px 10px;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 6px;
-  color: rgba(255,255,255,0.9);
-  font-size: 13px;
+  width: 100%; padding: 7px 9px;
+  background: transparent;
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  color: var(--bpmnkit-chrome-ink, #f4f5f7);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
   outline: none;
   box-sizing: border-box;
 }
-.bpmnkit-hud-modal-input:focus { border-color: rgba(60,120,220,0.6); }
-.bpmnkit-hud-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.bpmnkit-hud-modal-input:focus { border-color: var(--bpmnkit-chrome-accent, #c9755c); }
+.bpmnkit-hud-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
 .bpmnkit-hud-modal-btn {
-  font-size: 13px; padding: 6px 14px; border-radius: 6px;
-  cursor: pointer; font-weight: 500;
-  border: 1px solid rgba(255,255,255,0.12);
-  background: rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.8);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 12px; padding: 7px 16px;
+  cursor: pointer;
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  background: transparent;
+  color: var(--bpmnkit-chrome-ink-2, #c8ccd2);
 }
-.bpmnkit-hud-modal-btn:hover { background: rgba(255,255,255,0.1); }
+.bpmnkit-hud-modal-btn:hover { background: var(--bpmnkit-chrome-hover, rgba(255,255,255,0.07)); color: var(--bpmnkit-chrome-ink, #f4f5f7); }
 .bpmnkit-hud-modal-btn--primary {
-  background: rgba(60,120,220,0.5);
-  border-color: rgba(60,120,220,0.7);
+  background: var(--bpmnkit-ds-accent, #a8503a);
+  border-color: var(--bpmnkit-ds-accent, #a8503a);
   color: #fff;
 }
-.bpmnkit-hud-modal-btn--primary:hover { background: rgba(60,120,220,0.65); }
-/* Light theme */
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal {
-  background: rgba(252,252,254,0.98);
-  border-color: rgba(0,0,0,0.1);
-  color: rgba(0,0,0,0.8);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-title { color: rgba(0,0,0,0.88); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-input {
-  background: rgba(0,0,0,0.04);
-  border-color: rgba(0,0,0,0.15);
-  color: rgba(0,0,0,0.9);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-input:focus { border-color: rgba(0,80,200,0.4); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn {
-  border-color: rgba(0,0,0,0.12);
-  background: rgba(0,0,0,0.04);
-  color: rgba(0,0,0,0.7);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn:hover { background: rgba(0,0,0,0.08); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn--primary {
-  background: rgba(0,80,200,0.85);
-  border-color: rgba(0,80,200,0.9);
+.bpmnkit-hud-modal-btn--primary:hover {
+  background: var(--bpmnkit-ds-accent-hover, #8f412e);
+  border-color: var(--bpmnkit-ds-accent-hover, #8f412e);
   color: #fff;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn--primary:hover { background: rgba(0,80,200,1); }
 `;
     document.head.appendChild(style);
 }

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