@bpmnkit/editor 0.0.8

package/dist/icons.d.ts

@@ -0,0 +1,61 @@
+export declare const IC: {
+    select: string;
+    hand: string;
+    undo: string;
+    redo: string;
+    trash: string;
+    duplicate: string;
+    dots: string;
+    arrow: string;
+    search: string;
+    keyboard: string;
+    labelPos: string;
+    zoomIn: string;
+    zoomOut: string;
+    space: string;
+    startEvent: string;
+    endEvent: string;
+    intermediateThrowEvent: string;
+    intermediateCatchEvent: string;
+    task: string;
+    manualTask: string;
+    callActivity: string;
+    subProcess: string;
+    adHocSubProcess: string;
+    transaction: string;
+    serviceTask: string;
+    userTask: string;
+    scriptTask: string;
+    sendTask: string;
+    receiveTask: string;
+    businessRuleTask: string;
+    exclusiveGateway: string;
+    parallelGateway: string;
+    inclusiveGateway: string;
+    eventBasedGateway: string;
+    complexGateway: string;
+    openProcess: string;
+    textAnnotation: string;
+    messageStartEvent: string;
+    timerStartEvent: string;
+    conditionalStartEvent: string;
+    signalStartEvent: string;
+    messageEndEvent: string;
+    escalationEndEvent: string;
+    errorEndEvent: string;
+    compensationEndEvent: string;
+    signalEndEvent: string;
+    terminateEndEvent: string;
+    messageCatchEvent: string;
+    messageThrowEvent: string;
+    timerCatchEvent: string;
+    escalationThrowEvent: string;
+    conditionalCatchEvent: string;
+    linkCatchEvent: string;
+    linkThrowEvent: string;
+    compensationThrowEvent: string;
+    signalCatchEvent: string;
+    signalThrowEvent: string;
+    sparkle: string;
+};
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.js

@@ -0,0 +1,75 @@
+// Internal SVG icon strings — not exported from index.ts
+export const IC = {
+    // ── Navigation tools ───────────────────────────────────────────────────
+    select: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M3 2 3 12.5 5.5 9.5 7.5 14 9.5 13.2 7.5 8.8 12 8.8z"/></svg>`,
+    hand: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M9 2v6M11.5 3v5M14 5.5V8.5a5.5 5.5 0 01-11 0V5a1.5 1.5 0 013 0v3"/></svg>`,
+    // ── History (U-shape curved arrows) ────────────────────────────────────
+    undo: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4H9.5a4.5 4.5 0 0 1 0 9H5"/><polyline points="8,1.5 5,4 8,6.5"/></svg>`,
+    redo: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H6.5a4.5 4.5 0 0 0 0 9H11"/><polyline points="8,1.5 11,4 8,6.5"/></svg>`,
+    // ── Edit actions ────────────────────────────────────────────────────────
+    trash: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="3" y1="4" x2="13" y2="4"/><path d="M5.5 4V2.5h5V4M5 4l.5 9.5h5.1L11 4"/><line x1="6.5" y1="7" x2="6.5" y2="11.5"/><line x1="9.5" y1="7" x2="9.5" y2="11.5"/></svg>`,
+    duplicate: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M4 10.5V3.5A1.5 1.5 0 0 1 5.5 2H12"/></svg>`,
+    dots: `<svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3.5" cy="8" r="1.3"/><circle cx="8" cy="8" r="1.3"/><circle cx="12.5" cy="8" r="1.3"/></svg>`,
+    arrow: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="11" y2="8"/><polyline points="8,5 12,8 8,11"/></svg>`,
+    search: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="10" y1="10" x2="14" y2="14"/></svg>`,
+    keyboard: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1" y="4" width="14" height="8" rx="1.5"/><line x1="4" y1="7.5" x2="4" y2="7.5" stroke-width="2"/><line x1="7" y1="7.5" x2="7" y2="7.5" stroke-width="2"/><line x1="10" y1="7.5" x2="10" y2="7.5" stroke-width="2"/><line x1="4" y1="10" x2="12" y2="10"/></svg>`,
+    labelPos: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 4h10M8 4v7"/><line x1="2" y1="13" x2="14" y2="13" stroke-dasharray="2 2"/></svg>`,
+    zoomIn: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="8" y1="3" x2="8" y2="13"/><line x1="3" y1="8" x2="13" y2="8"/></svg>`,
+    zoomOut: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="3" y1="8" x2="13" y2="8"/></svg>`,
+    // ── Space tool (two vertical bars with outward arrows) ─────────────────
+    space: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="2.5" height="8" rx="0.8"/><rect x="12.5" y="4" width="2.5" height="8" rx="0.8"/><path d="M4 8h8"/><path d="M5.5 6.5 4 8 5.5 9.5"/><path d="M10.5 6.5 12 8 10.5 9.5"/></svg>`,
+    // ── BPMN Events (circles: thin=start, thick=end, double-ring=intermediate) ─
+    startEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/></svg>`,
+    endEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/></svg>`,
+    intermediateThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/></svg>`,
+    intermediateCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/></svg>`,
+    // ── BPMN Activities (rounded rect + type marker top-left) ──────────────
+    task: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/></svg>`,
+    manualTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><path d="M3 9V6.5a1 1 0 012 0V9M5 8V5a1 1 0 012 0v3M7 7a1 1 0 012 0v1M9 8a1 1 0 012 0v1c0 2-1.5 3-4 3H5c-2 0-3.5-1-3.5-3V9" stroke-linecap="round"/></svg>`,
+    callActivity: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2" stroke-width="2.5"/><path d="M6 8h4M8 6v4" stroke-linecap="round"/></svg>`,
+    subProcess: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="5.5" y="9.5" width="5" height="4" rx="0.5"/><path d="M8 10.5v2M7 11.5h2" stroke-linecap="round"/></svg>`,
+    adHocSubProcess: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><path d="M5 11Q6 9 8 11Q10 13 11 11" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    transaction: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="2" y="4" width="12" height="8" rx="1.5"/></svg>`,
+    serviceTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><circle cx="4" cy="6" r="2.2" stroke-width="1.1"/><circle cx="4" cy="6" r="0.9" fill="currentColor" stroke="none"/><path d="M4 3.5v1M4 7.5v1M1.5 6h1M5.5 6h1" stroke-linecap="round" stroke-width="1.1"/></svg>`,
+    userTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><circle cx="4" cy="5.5" r="1.5" stroke-width="1.1"/><path d="M1 10Q1 7.5 4 7.5Q7 7.5 7 10" stroke-linecap="round" stroke-width="1.1"/></svg>`,
+    scriptTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="1" y="3.5" width="4.5" height="6" rx="0.5" stroke-width="1.1"/><path d="M2 5h2.5M2 6.5h2.5M2 8h1.5" stroke-linecap="round" stroke-width="1"/></svg>`,
+    sendTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="1" y="3.5" width="5.5" height="4" fill="currentColor" rx="0.3" stroke-width="1.1"/></svg>`,
+    receiveTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="1" y="3.5" width="5.5" height="4" rx="0.3" stroke-width="1.1"/><path d="M1 3.5l2.75 2 2.75-2" stroke-width="1.1"/></svg>`,
+    businessRuleTask: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="0.5" y="2.5" width="15" height="11" rx="2"/><rect x="1" y="3.5" width="6" height="4.5" stroke-width="1.1"/><path d="M1 5.3h6M3 3.5v4.5" stroke-width="1.1"/></svg>`,
+    // ── BPMN Gateways (diamond + type marker) ──────────────────────────────
+    exclusiveGateway: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="8,1.5 14.5,8 8,14.5 1.5,8"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke-linecap="round" stroke-width="1.5"/></svg>`,
+    parallelGateway: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="8,1.5 14.5,8 8,14.5 1.5,8"/><path d="M8 4.5v7M4.5 8h7" stroke-linecap="round" stroke-width="1.5"/></svg>`,
+    inclusiveGateway: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="8,1.5 14.5,8 8,14.5 1.5,8"/><circle cx="8" cy="8" r="3" stroke-width="1.5"/></svg>`,
+    eventBasedGateway: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="8,1.5 14.5,8 8,14.5 1.5,8"/><circle cx="8" cy="8" r="3.5" stroke-width="1"/><circle cx="8" cy="8" r="2" stroke-width="1"/></svg>`,
+    complexGateway: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="8,1.5 14.5,8 8,14.5 1.5,8"/><path d="M8 5v6M5 8h6M5.5 5.5l5 5M10.5 5.5l-5 5" stroke-linecap="round" stroke-width="1.5"/></svg>`,
+    // ── Navigation ─────────────────────────────────────────────────────────
+    openProcess: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h4v4M13 3l-6 6"/><path d="M7 5H3v8h8V9"/></svg>`,
+    // ── BPMN Annotation ────────────────────────────────────────────────────
+    textAnnotation: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 3L3 3L3 13L6 13"/><line x1="7" y1="6" x2="13" y2="6"/><line x1="7" y1="9" x2="12" y2="9"/><line x1="7" y1="12" x2="10" y2="12"/></svg>`,
+    // ── BPMN Start Event variants ───────────────────────────────────────────
+    messageStartEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><rect x="5" y="6" width="6" height="4" fill="currentColor" stroke="none"/><path d="M5 6l3 2.5L11 6" stroke="white" stroke-width="1" fill="none"/></svg>`,
+    timerStartEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="3.5" stroke-width="1"/><path d="M8 5.5V8l1.5 1.5" stroke-linecap="round" stroke-width="1"/></svg>`,
+    conditionalStartEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><rect x="5.5" y="5.5" width="5" height="5" stroke-width="1"/><line x1="6.5" y1="7" x2="9.5" y2="7" stroke-width="1"/><line x1="6.5" y1="8.5" x2="9.5" y2="8.5" stroke-width="1"/><line x1="6.5" y1="10" x2="8.5" y2="10" stroke-width="1"/></svg>`,
+    signalStartEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><polygon points="8,5 11.5,11 4.5,11" fill="currentColor" stroke="none"/></svg>`,
+    // ── BPMN End Event variants ─────────────────────────────────────────────
+    messageEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><rect x="5" y="6" width="6" height="4" fill="currentColor" stroke="none"/><path d="M5 6l3 2.5L11 6" stroke="white" stroke-width="1" fill="none"/></svg>`,
+    escalationEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><polygon points="8,5 10.5,11 8,9.5 5.5,11" fill="currentColor" stroke="none"/></svg>`,
+    errorEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><path d="M9.5 5.5l-3.5 4h2.5L5 11.5l3.5-4H6z" fill="currentColor" stroke="none"/></svg>`,
+    compensationEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><polygon points="8,6 5,8 8,10" fill="currentColor" stroke="none"/><polygon points="11,6 8,8 11,10" fill="currentColor" stroke="none"/></svg>`,
+    signalEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><polygon points="8,5 11.5,11 4.5,11" fill="currentColor" stroke="none"/></svg>`,
+    terminateEndEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="3"><circle cx="8" cy="8" r="5.5"/><circle cx="8" cy="8" r="3" fill="currentColor" stroke="none"/></svg>`,
+    // ── BPMN Intermediate Event variants ────────────────────────────────────
+    messageCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><rect x="5" y="6" width="6" height="4" stroke-width="1"/><path d="M5 6l3 2.5L11 6" stroke-width="1"/></svg>`,
+    messageThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><rect x="5" y="6" width="6" height="4" fill="currentColor" stroke="none"/><path d="M5 6l3 2.5L11 6" stroke="white" stroke-width="1" fill="none"/></svg>`,
+    timerCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><circle cx="8" cy="8" r="3" stroke-width="1"/><path d="M8 6V8l1.5 1.5" stroke-linecap="round" stroke-width="1"/></svg>`,
+    escalationThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="8,5 10.5,11 8,9.5 5.5,11" fill="currentColor" stroke="none"/></svg>`,
+    conditionalCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><rect x="5.5" y="5.5" width="5" height="5" stroke-width="1"/><line x1="6.5" y1="7" x2="9.5" y2="7" stroke-width="1"/><line x1="6.5" y1="8.5" x2="9.5" y2="8.5" stroke-width="1"/><line x1="6.5" y1="10" x2="8.5" y2="10" stroke-width="1"/></svg>`,
+    linkCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="7,5.5 11,8 7,10.5 7,9 5,9 5,7 7,7" stroke-width="1"/></svg>`,
+    linkThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="7,5.5 11,8 7,10.5 7,9 5,9 5,7 7,7" fill="currentColor" stroke="none"/></svg>`,
+    compensationThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="8,6 5,8 8,10" fill="currentColor" stroke="none"/><polygon points="11,6 8,8 11,10" fill="currentColor" stroke="none"/></svg>`,
+    signalCatchEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="8,5 11.5,11 4.5,11" stroke-width="1"/></svg>`,
+    signalThrowEvent: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6.5"/><circle cx="8" cy="8" r="4.5"/><polygon points="8,5 11.5,11 4.5,11" fill="currentColor" stroke="none"/></svg>`,
+    // ── AI / assistant ──────────────────────────────────────────────────
+    sparkle: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2L9.1 5.9 13 7l-3.9 1.1L8 12 6.9 8.1 3 7l3.9-1.1L8 2z"/><circle cx="12.5" cy="3" r="1" opacity="0.5"/><circle cx="3.5" cy="12.5" r="0.75" opacity="0.4"/></svg>`,
+};
+//# sourceMappingURL=icons.js.map

package/dist/id.d.ts

@@ -0,0 +1,2 @@
+export declare function genId(prefix: string): string;
+//# sourceMappingURL=id.d.ts.map

package/dist/id.js

@@ -0,0 +1,4 @@
+export function genId(prefix) {
+    return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+//# sourceMappingURL=id.js.map

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { BpmnEditor } from "./editor.js";
+export { createEmptyDefinitions } from "./modeling.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";
+export { initEditorHud } from "./hud.js";
+export type { HudOptions } from "./hud.js";
+export { createSideDock } from "./dock.js";
+export type { SideDock } from "./dock.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,6 @@
+export { BpmnEditor } from "./editor.js";
+export { createEmptyDefinitions } from "./modeling.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 { createSideDock } from "./dock.js";
+//# sourceMappingURL=index.js.map

package/dist/label-editor.d.ts

@@ -0,0 +1,23 @@
+import type { ViewportState } from "@bpmnkit/canvas";
+import type { BpmnBounds } from "@bpmnkit/core";
+/**
+ * HTML `contenteditable` label editor positioned over the diagram element.
+ * Commits on blur or Enter; cancels on Escape.
+ */
+export declare class LabelEditor {
+    private readonly _container;
+    private readonly _onCommit;
+    private readonly _onCancel;
+    private _div;
+    private _activeId;
+    constructor(_container: HTMLElement, _onCommit: (id: string, text: string) => void, _onCancel: () => void);
+    get isActive(): boolean;
+    start(id: string, currentText: string, bounds: BpmnBounds, viewport: ViewportState, svgRect: DOMRect): void;
+    stop(): void;
+    destroy(): void;
+    private readonly _onKeyDown;
+    private readonly _onBlur;
+    private _commit;
+    private _cancel;
+}
+//# sourceMappingURL=label-editor.d.ts.map

package/dist/label-editor.js

@@ -0,0 +1,94 @@
+/**
+ * HTML `contenteditable` label editor positioned over the diagram element.
+ * Commits on blur or Enter; cancels on Escape.
+ */
+export class LabelEditor {
+    _container;
+    _onCommit;
+    _onCancel;
+    _div = null;
+    _activeId = null;
+    constructor(_container, _onCommit, _onCancel) {
+        this._container = _container;
+        this._onCommit = _onCommit;
+        this._onCancel = _onCancel;
+    }
+    get isActive() {
+        return this._activeId !== null;
+    }
+    start(id, currentText, bounds, viewport, svgRect) {
+        this.stop();
+        this._activeId = id;
+        const div = document.createElement("div");
+        div.className = "bpmnkit-label-editor";
+        div.contentEditable = "true";
+        div.textContent = currentText;
+        // Position in screen coordinates
+        const screenX = bounds.x * viewport.scale + viewport.tx + svgRect.left;
+        const screenY = bounds.y * viewport.scale + viewport.ty + svgRect.top;
+        const screenW = bounds.width * viewport.scale;
+        const screenH = bounds.height * viewport.scale;
+        // Relative to container
+        const containerRect = this._container.getBoundingClientRect();
+        div.style.left = `${screenX - containerRect.left}px`;
+        div.style.top = `${screenY - containerRect.top}px`;
+        div.style.width = `${Math.max(screenW, 60)}px`;
+        div.style.minHeight = `${Math.max(screenH, 16)}px`;
+        div.addEventListener("keydown", this._onKeyDown);
+        div.addEventListener("blur", this._onBlur);
+        this._container.appendChild(div);
+        this._div = div;
+        // Select all text
+        requestAnimationFrame(() => {
+            div.focus();
+            const range = document.createRange();
+            range.selectNodeContents(div);
+            const sel = window.getSelection();
+            if (sel) {
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        });
+    }
+    stop() {
+        if (!this._div)
+            return;
+        this._div.removeEventListener("keydown", this._onKeyDown);
+        this._div.removeEventListener("blur", this._onBlur);
+        this._div.remove();
+        this._div = null;
+        this._activeId = null;
+    }
+    destroy() {
+        this.stop();
+    }
+    // ── Event handlers ────────────────────────────────────────────────
+    _onKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            this._commit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            this._cancel();
+        }
+    };
+    _onBlur = () => {
+        if (this._activeId !== null) {
+            this._commit();
+        }
+    };
+    _commit() {
+        if (!this._div || !this._activeId)
+            return;
+        const text = this._div.textContent ?? "";
+        const id = this._activeId;
+        this.stop();
+        this._onCommit(id, text);
+    }
+    _cancel() {
+        this.stop();
+        this._onCancel();
+    }
+}
+//# sourceMappingURL=label-editor.js.map

package/dist/modal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shows a simple input modal with a title, pre-filled input, and Cancel/Confirm buttons.
+ * Calls `onConfirm` with the trimmed input value when confirmed (empty values are ignored).
+ */
+export declare function showHudInputModal(title: string, defaultValue: string, onConfirm: (value: string) => void): void;
+//# sourceMappingURL=modal.d.ts.map

package/dist/modal.js

@@ -0,0 +1,141 @@
+const MODAL_STYLE_ID = "bpmnkit-hud-modal-styles";
+function injectModalStyles() {
+    if (document.getElementById(MODAL_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = MODAL_STYLE_ID;
+    style.textContent = `
+.bpmnkit-hud-modal-overlay {
+  position: fixed; inset: 0; z-index: 300;
+  background: rgba(0,0,0,0.5);
+  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;
+}
+.bpmnkit-hud-modal-title {
+  font-size: 14px; font-weight: 600;
+  color: rgba(255,255,255,0.95);
+}
+.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;
+  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-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);
+}
+.bpmnkit-hud-modal-btn:hover { background: rgba(255,255,255,0.1); }
+.bpmnkit-hud-modal-btn--primary {
+  background: rgba(60,120,220,0.5);
+  border-color: rgba(60,120,220,0.7);
+  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);
+  color: #fff;
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn--primary:hover { background: rgba(0,80,200,1); }
+`;
+    document.head.appendChild(style);
+}
+/**
+ * Shows a simple input modal with a title, pre-filled input, and Cancel/Confirm buttons.
+ * Calls `onConfirm` with the trimmed input value when confirmed (empty values are ignored).
+ */
+export function showHudInputModal(title, defaultValue, onConfirm) {
+    injectModalStyles();
+    const overlay = document.createElement("div");
+    overlay.className = "bpmnkit-hud-modal-overlay";
+    const dialog = document.createElement("div");
+    dialog.className = "bpmnkit-hud-modal";
+    const titleEl = document.createElement("div");
+    titleEl.className = "bpmnkit-hud-modal-title";
+    titleEl.textContent = title;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "bpmnkit-hud-modal-input";
+    input.value = defaultValue;
+    const actions = document.createElement("div");
+    actions.className = "bpmnkit-hud-modal-actions";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "bpmnkit-hud-modal-btn";
+    cancelBtn.textContent = "Cancel";
+    const confirmBtn = document.createElement("button");
+    confirmBtn.className = "bpmnkit-hud-modal-btn bpmnkit-hud-modal-btn--primary";
+    confirmBtn.textContent = "Confirm";
+    function close() {
+        overlay.remove();
+        document.removeEventListener("keydown", handleKey);
+    }
+    function confirm() {
+        const value = input.value.trim();
+        if (!value)
+            return;
+        close();
+        onConfirm(value);
+    }
+    cancelBtn.addEventListener("click", close);
+    confirmBtn.addEventListener("click", confirm);
+    function handleKey(e) {
+        if (e.key === "Escape")
+            close();
+        else if (e.key === "Enter")
+            confirm();
+    }
+    document.addEventListener("keydown", handleKey);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            close();
+    });
+    actions.append(cancelBtn, confirmBtn);
+    dialog.append(titleEl, input, actions);
+    overlay.append(dialog);
+    document.body.append(overlay);
+    requestAnimationFrame(() => {
+        input.select();
+        input.focus();
+    });
+}
+//# sourceMappingURL=modal.js.map

package/dist/modeling.d.ts

@@ -0,0 +1,91 @@
+import type { BpmnBounds, BpmnDefinitions, BpmnDiEdge, BpmnDiShape, BpmnFlowElement, BpmnSequenceFlow, BpmnWaypoint, DiColor } from "@bpmnkit/core";
+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): {
+    defs: BpmnDefinitions;
+    id: string;
+};
+export declare function createBoundaryEvent(defs: BpmnDefinitions, hostId: string, eventDefType: string | null, bounds: BpmnBounds, cancelActivity?: boolean): {
+    defs: BpmnDefinitions;
+    id: string;
+};
+export declare function createConnection(defs: BpmnDefinitions, sourceId: string, targetId: string, waypoints: BpmnWaypoint[]): {
+    defs: BpmnDefinitions;
+    id: string;
+};
+export declare function moveShapes(defs: BpmnDefinitions, moves: Array<{
+    id: string;
+    dx: number;
+    dy: number;
+}>): BpmnDefinitions;
+export declare function resizeShape(defs: BpmnDefinitions, id: string, newBounds: BpmnBounds): BpmnDefinitions;
+export declare function deleteElements(defs: BpmnDefinitions, ids: string[]): BpmnDefinitions;
+export declare function updateLabel(defs: BpmnDefinitions, id: string, name: string): BpmnDefinitions;
+/** Updates the DI label bounds for a shape (sets explicit external label position). */
+export declare function updateLabelPosition(defs: BpmnDefinitions, shapeId: string, labelBounds: BpmnBounds): BpmnDefinitions;
+/**
+ * Reconnects one endpoint of an edge to a different port on the same
+ * source or target shape, recomputing the orthogonal route.
+ */
+export declare function updateEdgeEndpoint(defs: BpmnDefinitions, edgeId: string, isStart: boolean, newPort: PortDir): BpmnDefinitions;
+/**
+ * Moves an orthogonal edge segment perpendicularly by `delta` units.
+ * For horizontal segments delta shifts Y; for vertical segments delta shifts X.
+ * Both waypoints of the segment move together, stretching adjacent segments.
+ */
+export declare function moveEdgeSegment(defs: BpmnDefinitions, edgeId: string, segIdx: number, isHoriz: boolean, delta: number): BpmnDefinitions;
+/**
+ * Inserts a new waypoint between waypoints[segIdx] and waypoints[segIdx+1].
+ * Used for free-form bend creation (diagonal movement allowed).
+ */
+export declare function insertEdgeWaypoint(defs: BpmnDefinitions, edgeId: string, segIdx: number, pt: {
+    x: number;
+    y: number;
+}): BpmnDefinitions;
+/**
+ * Moves a single intermediate waypoint (by index) to a new position.
+ * Start (0) and end (last) waypoints are not moveable via this function.
+ */
+export declare function moveEdgeWaypoint(defs: BpmnDefinitions, edgeId: string, wpIdx: number, pt: {
+    x: number;
+    y: number;
+}): BpmnDefinitions;
+/**
+ * Removes intermediate waypoints that lie exactly on the straight line between
+ * their neighbours. Runs iteratively until no more collinear waypoints remain.
+ */
+export declare function removeCollinearWaypoints(defs: BpmnDefinitions, edgeId: string): BpmnDefinitions;
+/**
+ * Replaces a flow element's type while preserving its id, name, and connections.
+ * Use this for gateway type-switching (exclusive ↔ parallel) and task type-switching.
+ */
+export declare function changeElementType(defs: BpmnDefinitions, id: string, newType: CreateShapeType): BpmnDefinitions;
+/**
+ * Splits an existing sequence flow by inserting a shape between its source and
+ * target: removes the original edge and creates two new connections
+ * (source → shapeId and shapeId → target).
+ */
+export declare function insertShapeOnEdge(defs: BpmnDefinitions, edgeId: string, shapeId: string): BpmnDefinitions;
+export interface Clipboard {
+    elements: BpmnFlowElement[];
+    flows: BpmnSequenceFlow[];
+    shapes: BpmnDiShape[];
+    edges: BpmnDiEdge[];
+}
+export declare function copyElements(defs: BpmnDefinitions, ids: string[]): Clipboard;
+export declare function pasteElements(defs: BpmnDefinitions, clipboard: Clipboard, offsetX: number, offsetY: number): {
+    defs: BpmnDefinitions;
+    newIds: Map<string, string>;
+};
+export declare function createAnnotation(defs: BpmnDefinitions, bounds: BpmnBounds, text?: string): {
+    defs: BpmnDefinitions;
+    id: string;
+};
+export declare function createAnnotationWithLink(defs: BpmnDefinitions, bounds: BpmnBounds, sourceId: string, sourceBounds: BpmnBounds, text?: string): {
+    defs: BpmnDefinitions;
+    annotationId: string;
+    associationId: string;
+};
+export declare function updateShapeColor(defs: BpmnDefinitions, id: string, color: DiColor): BpmnDefinitions;
+//# sourceMappingURL=modeling.d.ts.map