@bpmnkit/editor 0.0.30 → 0.0.32

package/dist/hud.js

@@ -57,6 +57,7 @@ const SHORTCUTS = [
     ["Delete / Backspace", "Delete selected"],
     ["Ctrl+A", "Select all"],
     ["Ctrl+C", "Copy"],
+    ["Ctrl+X", "Cut"],
     ["Ctrl+V", "Paste"],
     ["Ctrl+F", "Find element"],
     ["Ctrl+K", "Command palette"],
@@ -69,6 +70,7 @@ const SHORTCUTS = [
 ];
 export function initEditorHud(editor, options = {}) {
     injectHudStyles();
+    const t = editor.translate;
     // ── Create and inject HUD DOM ──────────────────────────────────────────────
     function hudBtn(id, title) {
         const b = document.createElement("button");
@@ -176,10 +178,10 @@ export function initEditorHud(editor, options = {}) {
     simBannerEl.id = "bpmnkit-sim-banner";
     simBannerEl.className = "hidden";
     const simBannerText = document.createElement("span");
-    simBannerText.textContent = "Simulation active — editing is disabled";
+    simBannerText.textContent = t("Simulation active — editing is disabled");
     const simBannerExit = document.createElement("button");
     simBannerExit.id = "bpmnkit-sim-banner-exit";
-    simBannerExit.textContent = "Exit simulation";
+    simBannerExit.textContent = t("Exit simulation");
     simBannerExit.addEventListener("click", () => options.onExitSimulation?.());
     simBannerEl.append(simBannerText, simBannerExit);
     // Right-click context menu
@@ -193,14 +195,14 @@ export function initEditorHud(editor, options = {}) {
     const searchInput = document.createElement("input");
     searchInput.id = "bpmnkit-search-input";
     searchInput.type = "text";
-    searchInput.placeholder = "Search elements…";
-    searchInput.setAttribute("aria-label", "Search diagram elements");
+    searchInput.placeholder = t("Search elements…");
+    searchInput.setAttribute("aria-label", t("Search diagram elements"));
     const searchCount = document.createElement("span");
     searchCount.id = "bpmnkit-search-count";
     const searchClose = document.createElement("button");
     searchClose.id = "bpmnkit-search-close";
     searchClose.textContent = "×";
-    searchClose.title = "Close search (Escape)";
+    searchClose.title = t("Close search (Escape)");
     searchBarEl.append(searchInput, searchCount, searchClose);
     // Keyboard shortcuts modal
     const shortcutsModal = document.createElement("div");
@@ -209,13 +211,13 @@ export function initEditorHud(editor, options = {}) {
     const shortcutsInner = document.createElement("div");
     shortcutsInner.id = "bpmnkit-shortcuts-inner";
     const shortcutsTitle = document.createElement("h3");
-    shortcutsTitle.textContent = "Keyboard shortcuts";
+    shortcutsTitle.textContent = t("Keyboard shortcuts");
     shortcutsInner.appendChild(shortcutsTitle);
     for (const [key, desc] of SHORTCUTS) {
         const row = document.createElement("div");
         row.className = "bpmnkit-sc-row";
         const descEl = document.createElement("span");
-        descEl.textContent = desc;
+        descEl.textContent = t(desc);
         const keyEl = document.createElement("kbd");
         keyEl.className = "bpmnkit-sc-key";
         keyEl.textContent = key;
@@ -224,7 +226,7 @@ export function initEditorHud(editor, options = {}) {
     }
     const shortcutsClose = document.createElement("button");
     shortcutsClose.id = "bpmnkit-shortcuts-close";
-    shortcutsClose.textContent = "Close";
+    shortcutsClose.textContent = t("Close");
     shortcutsClose.addEventListener("click", () => shortcutsModal.classList.add("hidden"));
     shortcutsModal.addEventListener("click", (e) => {
         if (e.target === shortcutsModal)
@@ -310,13 +312,13 @@ export function initEditorHud(editor, options = {}) {
         picker.className = "group-picker";
         const label = document.createElement("span");
         label.className = "group-picker-label";
-        label.textContent = group.title;
+        label.textContent = t(group.title);
         picker.appendChild(label);
         for (const item of group.items) {
             const btn = document.createElement("button");
             btn.className = item.type === groupActiveType[group.id] ? "hud-btn active" : "hud-btn";
             btn.innerHTML = item.icon;
-            btn.title = item.title;
+            btn.title = t(item.title);
             btn.addEventListener("click", (e) => {
                 e.stopPropagation();
                 groupActiveType[group.id] = item.type;
@@ -352,13 +354,13 @@ export function initEditorHud(editor, options = {}) {
         picker.className = "group-picker";
         const label = document.createElement("span");
         label.className = "group-picker-label";
-        label.textContent = group.title;
+        label.textContent = t(group.title);
         picker.appendChild(label);
         for (const item of group.items) {
             const btn = document.createElement("button");
             btn.className = item.type === sourceType ? "hud-btn active" : "hud-btn";
             btn.innerHTML = item.icon;
-            btn.title = item.title;
+            btn.title = t(item.title);
             btn.addEventListener("click", (e) => {
                 e.stopPropagation();
                 if (item.type !== sourceType)
@@ -441,7 +443,7 @@ export function initEditorHud(editor, options = {}) {
         btn.className = "hud-btn";
         btn.dataset.group = group.id;
         btn.innerHTML = group.groupIcon;
-        btn.title = `${group.title} (hold for options)`;
+        btn.title = t("{name} (hold for options)", { name: t(group.title) });
         let longPressTimer = null;
         let isLongPress = false;
         btn.addEventListener("pointerdown", (e) => {
@@ -648,6 +650,45 @@ export function initEditorHud(editor, options = {}) {
                 },
             ],
         ];
+        // Align / distribute — only meaningful for a multi-selection.
+        if (selectedIds.length >= 2) {
+            const aligns = [
+                ["Align left", "left"],
+                ["Align centre", "center"],
+                ["Align right", "right"],
+                ["Align top", "top"],
+                ["Align middle", "middle"],
+                ["Align bottom", "bottom"],
+            ];
+            for (const [label, edge] of aligns) {
+                items.push([
+                    label,
+                    IC.dots,
+                    () => {
+                        editor.alignSelected(edge);
+                        closeAllDropdowns();
+                    },
+                ]);
+            }
+        }
+        if (selectedIds.length >= 3) {
+            items.push([
+                "Distribute horizontally",
+                IC.dots,
+                () => {
+                    editor.distributeSelected("horizontal");
+                    closeAllDropdowns();
+                },
+            ]);
+            items.push([
+                "Distribute vertically",
+                IC.dots,
+                () => {
+                    editor.distributeSelected("vertical");
+                    closeAllDropdowns();
+                },
+            ]);
+        }
         if (options.optimizeButton) {
             items.push([
                 "Optimize diagram",
@@ -702,6 +743,10 @@ export function initEditorHud(editor, options = {}) {
         btnRedo.disabled = !editor.canRedo();
         btnDelete.disabled = selectedIds.length === 0;
         btnDuplicate.disabled = selectedIds.length === 0;
+        const undoLabel = editor.getUndoLabel();
+        const redoLabel = editor.getRedoLabel();
+        btnUndo.title = undoLabel ? `Undo ${undoLabel} (Ctrl+Z)` : "Undo (Ctrl+Z)";
+        btnRedo.title = redoLabel ? `Redo ${redoLabel} (Ctrl+Y)` : "Redo (Ctrl+Y)";
     }
     updateActionBar();
     btnUndo.addEventListener("click", () => {
@@ -790,7 +835,7 @@ export function initEditorHud(editor, options = {}) {
                 const btn = document.createElement("button");
                 btn.className = "hud-btn";
                 btn.innerHTML = opt.icon;
-                btn.title = opt.title;
+                btn.title = t(opt.title);
                 btn.addEventListener("click", () => {
                     editor.addConnectedElement(sourceId, opt.type);
                     closeAllDropdowns();
@@ -856,7 +901,7 @@ export function initEditorHud(editor, options = {}) {
             const typeBtn = document.createElement("button");
             typeBtn.className = "hud-btn active";
             typeBtn.innerHTML = currentItem?.icon ?? group.groupIcon;
-            typeBtn.title = `${currentItem?.title ?? group.title} (click to change)`;
+            typeBtn.title = t("{name} (click to change)", { name: t(currentItem?.title ?? group.title) });
             typeBtn.addEventListener("click", () => showTypePicker(typeBtn, group, sourceId, sourceType));
             cfgToolbar.appendChild(typeBtn);
         }
@@ -1461,7 +1506,7 @@ export function initEditorHud(editor, options = {}) {
     function makeCtxItem(icon, label, onClick) {
         const btn = document.createElement("button");
         btn.className = "drop-item";
-        btn.innerHTML = `<span class="di-check"></span><span class="di-icon">${icon}</span><span>${label}</span>`;
+        btn.innerHTML = `<span class="di-check"></span><span class="di-icon">${icon}</span><span>${t(label)}</span>`;
         btn.addEventListener("click", onClick);
         return btn;
     }
@@ -1518,12 +1563,45 @@ export function initEditorHud(editor, options = {}) {
             editor.duplicate();
             closeAllDropdowns();
         }));
+        ctxMenuEl.appendChild(makeCtxItem(IC.duplicate, "Cut", () => {
+            editor.cut();
+            closeAllDropdowns();
+        }));
         ctxMenuEl.appendChild(makeCtxItem(IC.trash, "Delete", () => {
             editor.deleteSelected();
             closeAllDropdowns();
         }));
         openCtxMenu(e.clientX, e.clientY);
     });
+    // Touch: a long-press opens the same context menu (dispatched as a synthetic
+    // contextmenu event at the press point, so the handler above is reused).
+    let lpTimer = null;
+    let lpStart = null;
+    const cancelLongPress = () => {
+        if (lpTimer) {
+            clearTimeout(lpTimer);
+            lpTimer = null;
+        }
+    };
+    editor.container.addEventListener("pointerdown", (e) => {
+        if (e.pointerType !== "touch")
+            return;
+        lpStart = { x: e.clientX, y: e.clientY };
+        lpTimer = setTimeout(() => {
+            lpTimer = null;
+            if (!lpStart)
+                return;
+            editor.container.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, clientX: lpStart.x, clientY: lpStart.y }));
+        }, 500);
+    });
+    editor.container.addEventListener("pointermove", (e) => {
+        // A drag past the slop threshold is a pan/move, not a long-press.
+        if (lpTimer && lpStart && Math.hypot(e.clientX - lpStart.x, e.clientY - lpStart.y) > 10) {
+            cancelLongPress();
+        }
+    });
+    editor.container.addEventListener("pointerup", cancelLongPress);
+    editor.container.addEventListener("pointercancel", cancelLongPress);
     // ── Element search (Ctrl+F) ─────────────────────────────────────────────────
     let searchMatches = [];
     let searchMatchIdx = 0;
@@ -1554,31 +1632,17 @@ export function initEditorHud(editor, options = {}) {
         }
     }
     function runSearch() {
-        const q = searchInput.value.trim().toLowerCase();
+        const q = searchInput.value.trim();
         if (!q) {
             searchCount.textContent = "";
             searchMatches = [];
             editor.setSelection([]);
             return;
         }
-        const defs = editor.getDefinitions();
-        if (!defs)
-            return;
-        const ids = [];
-        for (const proc of defs.processes) {
-            for (const el of proc.flowElements) {
-                if (el.name?.toLowerCase().includes(q))
-                    ids.push(el.id);
-            }
-            for (const el of proc.textAnnotations) {
-                if (el.text?.toLowerCase().includes(q))
-                    ids.push(el.id);
-            }
-        }
-        searchMatches = ids;
+        searchMatches = editor.find(q).map((m) => m.id);
         searchMatchIdx = 0;
         updateSearchCount();
-        const firstId = ids[0];
+        const firstId = searchMatches[0];
         if (firstId) {
             selectSearchMatch(firstId);
         }
@@ -1586,21 +1650,30 @@ export function initEditorHud(editor, options = {}) {
             editor.setSelection([]);
         }
     }
+    /** Moves to the next/previous match, wrapping, and selects it. */
+    function stepSearch(dir) {
+        if (searchMatches.length === 0)
+            return;
+        searchMatchIdx = (searchMatchIdx + dir + searchMatches.length) % searchMatches.length;
+        const id = searchMatches[searchMatchIdx];
+        updateSearchCount();
+        if (id)
+            selectSearchMatch(id);
+    }
     searchInput.addEventListener("input", runSearch);
     searchInput.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
             e.preventDefault();
             closeSearch();
         }
-        if (e.key === "Enter") {
+        else if (e.key === "Enter" || e.key === "ArrowDown") {
             e.preventDefault();
-            if (searchMatches.length > 0) {
-                searchMatchIdx = (searchMatchIdx + 1) % searchMatches.length;
-                const nextId = searchMatches[searchMatchIdx];
-                updateSearchCount();
-                if (nextId)
-                    selectSearchMatch(nextId);
-            }
+            // Enter on the first result keeps it selected; subsequent presses step.
+            stepSearch(1);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            stepSearch(-1);
         }
     });
     searchClose.addEventListener("click", closeSearch);

package/dist/i18n.d.ts

@@ -0,0 +1,14 @@
+/** Interpolation variables for a translation template. */
+export type TranslateVars = Record<string, string | number>;
+/**
+ * A translation hook. Receives an English template string (used as the lookup
+ * key) plus optional `{name}` interpolation variables and returns the localized
+ * string. Keys that are not localized should be returned unchanged (after
+ * interpolation) — {@link defaultTranslate} does exactly that.
+ */
+export type Translate = (template: string, vars?: TranslateVars) => string;
+/** Fills `{name}` placeholders in `template` from `vars`. */
+export declare function interpolate(template: string, vars?: TranslateVars): string;
+/** The default (identity) translator: no localization, just placeholder interpolation. */
+export declare function defaultTranslate(template: string, vars?: TranslateVars): string;
+//# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.js

@@ -0,0 +1,11 @@
+/** Fills `{name}` placeholders in `template` from `vars`. */
+export function interpolate(template, vars) {
+    if (!vars)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (match, key) => key in vars ? String(vars[key]) : match);
+}
+/** The default (identity) translator: no localization, just placeholder interpolation. */
+export function defaultTranslate(template, vars) {
+    return interpolate(template, vars);
+}
+//# sourceMappingURL=i18n.js.map

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, CONTEXTUAL_A
 export type { ElementGroup } from "./element-groups.js";
 export { initEditorHud } from "./hud.js";
 export type { HudOptions } from "./hud.js";
+export { defaultTranslate, interpolate } from "./i18n.js";
+export type { Translate, TranslateVars } from "./i18n.js";
 export { createSideDock } from "./dock.js";
 export type { SideDock } from "./dock.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -2,5 +2,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 { defaultTranslate, interpolate } from "./i18n.js";
 export { createSideDock } from "./dock.js";
 //# sourceMappingURL=index.js.map

package/dist/modeling.d.ts

@@ -77,6 +77,7 @@ export declare function copyElements(defs: BpmnDefinitions, ids: string[]): Clip
 export declare function pasteElements(defs: BpmnDefinitions, clipboard: Clipboard, offsetX: number, offsetY: number): {
     defs: BpmnDefinitions;
     newIds: Map<string, string>;
+    topLevelIds: string[];
 };
 export declare function createAnnotation(defs: BpmnDefinitions, bounds: BpmnBounds, text?: string): {
     defs: BpmnDefinitions;

package/dist/modeling.js

@@ -29,6 +29,7 @@ export function createEmptyDefinitions() {
                 sequenceFlows: [],
                 textAnnotations: [],
                 associations: [],
+                groups: [],
                 unknownAttributes: {},
             },
         ],
@@ -142,6 +143,7 @@ function makeFlowElement(type, id, name) {
                 sequenceFlows: [],
                 textAnnotations: [],
                 associations: [],
+                groups: [],
             };
         case "adHocSubProcess":
             return {
@@ -151,6 +153,7 @@ function makeFlowElement(type, id, name) {
                 sequenceFlows: [],
                 textAnnotations: [],
                 associations: [],
+                groups: [],
             };
         case "transaction":
             return {
@@ -160,6 +163,7 @@ function makeFlowElement(type, id, name) {
                 sequenceFlows: [],
                 textAnnotations: [],
                 associations: [],
+                groups: [],
             };
         case "exclusiveGateway":
             return { ...base, type: "exclusiveGateway" };
@@ -1071,6 +1075,21 @@ export function removeCollinearWaypoints(defs, edgeId) {
     };
 }
 // ── Change element type ───────────────────────────────────────────────────────
+/** Activity types that carry `loopCharacteristics` (multi-instance / loop markers). */
+const ACTIVITY_LOOP_TYPES = new Set([
+    "task",
+    "serviceTask",
+    "userTask",
+    "scriptTask",
+    "sendTask",
+    "receiveTask",
+    "businessRuleTask",
+    "manualTask",
+    "callActivity",
+    "subProcess",
+    "adHocSubProcess",
+    "transaction",
+]);
 /**
  * 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.
@@ -1090,6 +1109,8 @@ export function changeElementType(defs, id, newType) {
         name: el.name,
         incoming: el.incoming,
         outgoing: el.outgoing,
+        documentation: el.documentation,
+        isForCompensation: el.isForCompensation,
         extensionElements: el.extensionElements,
         unknownAttributes: el.unknownAttributes,
     };
@@ -1214,6 +1235,7 @@ export function changeElementType(defs, id, newType) {
                 sequenceFlows: el.type === "subProcess" ? el.sequenceFlows : [],
                 textAnnotations: el.type === "subProcess" ? el.textAnnotations : [],
                 associations: el.type === "subProcess" ? el.associations : [],
+                groups: el.type === "subProcess" ? el.groups : [],
             };
             break;
         case "adHocSubProcess":
@@ -1224,6 +1246,7 @@ export function changeElementType(defs, id, newType) {
                 sequenceFlows: el.type === "adHocSubProcess" ? el.sequenceFlows : [],
                 textAnnotations: el.type === "adHocSubProcess" ? el.textAnnotations : [],
                 associations: el.type === "adHocSubProcess" ? el.associations : [],
+                groups: el.type === "adHocSubProcess" ? el.groups : [],
             };
             break;
         case "transaction":
@@ -1234,6 +1257,7 @@ export function changeElementType(defs, id, newType) {
                 sequenceFlows: el.type === "transaction" ? el.sequenceFlows : [],
                 textAnnotations: el.type === "transaction" ? el.textAnnotations : [],
                 associations: el.type === "transaction" ? el.associations : [],
+                groups: el.type === "transaction" ? el.groups : [],
             };
             break;
         case "exclusiveGateway":
@@ -1254,6 +1278,14 @@ export function changeElementType(defs, id, newType) {
         case "textAnnotation":
             throw new Error("textAnnotation is not a flow element — use createAnnotation()");
     }
+    // Preserve a multi-instance/loop marker when morphing between activity types
+    // that both support one (e.g. serviceTask ⇄ userTask, task → subProcess).
+    const loop = "loopCharacteristics" in el ? el.loopCharacteristics : undefined;
+    if (loop && ACTIVITY_LOOP_TYPES.has(newEl.type)) {
+        ;
+        newEl.loopCharacteristics =
+            loop;
+    }
     const newElements = [...process.flowElements];
     newElements[elIndex] = newEl;
     return {
@@ -1285,6 +1317,33 @@ export function insertShapeOnEdge(defs, edgeId, shapeId) {
     const r2 = createConnection(r1.defs, shapeId, flow.targetRef, computeWaypoints(newDi.bounds, tgtDi.bounds));
     return r2.defs;
 }
+/** True when a flow element is a container carrying its own children. */
+function hasChildren(el) {
+    return "flowElements" in el;
+}
+/** Collects every id that owns a DI shape within `el` (itself + recursive children). */
+function collectShapeIds(el, out) {
+    out.add(el.id);
+    if (hasChildren(el)) {
+        for (const child of el.flowElements)
+            collectShapeIds(child, out);
+        for (const ta of el.textAnnotations)
+            out.add(ta.id);
+        for (const g of el.groups)
+            out.add(g.id);
+    }
+}
+/** Collects every id that owns a DI edge within `el` (nested flows + associations). */
+function collectEdgeIds(el, out) {
+    if (hasChildren(el)) {
+        for (const sf of el.sequenceFlows)
+            out.add(sf.id);
+        for (const a of el.associations)
+            out.add(a.id);
+        for (const child of el.flowElements)
+            collectEdgeIds(child, out);
+    }
+}
 export function copyElements(defs, ids) {
     const idSet = new Set(ids);
     const process = defs.processes[0];
@@ -1292,45 +1351,93 @@ export function copyElements(defs, ids) {
     if (!process || !diagram) {
         return { elements: [], flows: [], shapes: [], edges: [] };
     }
-    const elements = process.flowElements.filter((el) => idSet.has(el.id));
-    const flows = process.sequenceFlows.filter((sf) => idSet.has(sf.sourceRef) && idSet.has(sf.targetRef));
-    const flowIds = new Set(flows.map((sf) => sf.id));
-    const shapes = diagram.plane.shapes.filter((s) => idSet.has(s.bpmnElement));
-    const edges = diagram.plane.edges.filter((e) => flowIds.has(e.bpmnElement));
+    const selected = process.flowElements.filter((el) => idSet.has(el.id));
+    // Auto-include boundary events attached to any copied host (bpmn-js parity).
+    const selectedIds = new Set(selected.map((el) => el.id));
+    const boundaries = process.flowElements.filter((el) => el.type === "boundaryEvent" && selectedIds.has(el.attachedToRef) && !selectedIds.has(el.id));
+    const elements = [...selected, ...boundaries];
+    const topIds = new Set(elements.map((el) => el.id));
+    // All shape/edge ids within the copied subtree (recurses into sub-processes).
+    const shapeIds = new Set();
+    const edgeIds = new Set();
+    for (const el of elements) {
+        collectShapeIds(el, shapeIds);
+        collectEdgeIds(el, edgeIds);
+    }
+    // Top-level flows whose endpoints are both copied.
+    const flows = process.sequenceFlows.filter((sf) => topIds.has(sf.sourceRef) && topIds.has(sf.targetRef));
+    for (const sf of flows)
+        edgeIds.add(sf.id);
+    const shapes = diagram.plane.shapes.filter((s) => shapeIds.has(s.bpmnElement));
+    const edges = diagram.plane.edges.filter((e) => edgeIds.has(e.bpmnElement));
     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));
+    if (hasChildren(el)) {
+        for (const child of el.flowElements)
+            buildIdMap(child, map);
+        for (const sf of el.sequenceFlows)
+            map.set(sf.id, genId("Flow"));
+        for (const ta of el.textAnnotations)
+            map.set(ta.id, genId("TextAnnotation"));
+        for (const a of el.associations)
+            map.set(a.id, genId("Association"));
+        for (const g of el.groups)
+            map.set(g.id, genId("Group"));
+    }
+}
+/** Deep-clones `el`, remapping its own id, refs, and all nested children through `map`. */
+function remapElement(el, map) {
+    const clone = {
+        ...el,
+        id: map.get(el.id) ?? el.id,
+        incoming: el.incoming.map((r) => map.get(r)).filter((r) => r !== undefined),
+        outgoing: el.outgoing.map((r) => map.get(r)).filter((r) => r !== undefined),
+    };
+    if (clone.type === "boundaryEvent" && el.type === "boundaryEvent") {
+        clone.attachedToRef = map.get(el.attachedToRef) ?? el.attachedToRef;
+    }
+    if (hasChildren(el) && hasChildren(clone)) {
+        clone.flowElements = el.flowElements.map((c) => remapElement(c, map));
+        clone.sequenceFlows = el.sequenceFlows.map((sf) => remapFlow(sf, map));
+        clone.textAnnotations = el.textAnnotations.map((ta) => ({
+            ...ta,
+            id: map.get(ta.id) ?? ta.id,
+        }));
+        clone.associations = el.associations.map((a) => ({
+            ...a,
+            id: map.get(a.id) ?? a.id,
+            sourceRef: map.get(a.sourceRef) ?? a.sourceRef,
+            targetRef: map.get(a.targetRef) ?? a.targetRef,
+        }));
+        clone.groups = el.groups.map((g) => ({ ...g, id: map.get(g.id) ?? g.id }));
+    }
+    return clone;
+}
+function remapFlow(sf, map) {
+    return {
+        ...sf,
+        id: map.get(sf.id) ?? sf.id,
+        sourceRef: map.get(sf.sourceRef) ?? sf.sourceRef,
+        targetRef: map.get(sf.targetRef) ?? sf.targetRef,
+    };
+}
 export function pasteElements(defs, clipboard, offsetX, offsetY) {
     const newIds = new Map();
-    // Generate new IDs for elements
-    for (const el of clipboard.elements) {
-        newIds.set(el.id, genId(el.type));
-    }
-    for (const sf of clipboard.flows) {
+    // Generate new IDs for every element (recursively) and top-level flow.
+    for (const el of clipboard.elements)
+        buildIdMap(el, newIds);
+    for (const sf of clipboard.flows)
         newIds.set(sf.id, genId("Flow"));
-    }
     const process = defs.processes[0];
     const diagram = defs.diagrams[0];
     if (!process || !diagram)
-        return { defs, newIds };
-    // Create new flow elements with new IDs, offset positions handled via DI
-    const newElements = clipboard.elements.map((el) => {
-        const newId = newIds.get(el.id) ?? genId(el.type);
-        const newIncoming = el.incoming
-            .map((ref) => newIds.get(ref))
-            .filter((r) => r !== undefined);
-        const newOutgoing = el.outgoing
-            .map((ref) => newIds.get(ref))
-            .filter((r) => r !== undefined);
-        return { ...el, id: newId, incoming: newIncoming, outgoing: newOutgoing };
-    });
-    // Create new sequence flows
-    const newFlows = clipboard.flows.map((sf) => {
-        const newId = newIds.get(sf.id) ?? genId("Flow");
-        const newSrc = newIds.get(sf.sourceRef) ?? sf.sourceRef;
-        const newTgt = newIds.get(sf.targetRef) ?? sf.targetRef;
-        return { ...sf, id: newId, sourceRef: newSrc, targetRef: newTgt };
-    });
-    // Create new DI shapes with offset
+        return { defs, newIds, topLevelIds: [] };
+    const newElements = clipboard.elements.map((el) => remapElement(el, newIds));
+    const newFlows = clipboard.flows.map((sf) => remapFlow(sf, newIds));
+    // Create new DI shapes with offset (covers nested descendants too).
     const newDiShapes = clipboard.shapes.map((s) => {
         const newElId = newIds.get(s.bpmnElement) ?? s.bpmnElement;
         return {
@@ -1344,7 +1451,7 @@ export function pasteElements(defs, clipboard, offsetX, offsetY) {
             },
         };
     });
-    // Create new DI edges with offset waypoints
+    // Create new DI edges with offset waypoints (covers nested flows/associations).
     const newDiEdges = clipboard.edges.map((e) => {
         const newFlowId = newIds.get(e.bpmnElement) ?? e.bpmnElement;
         return {
@@ -1379,7 +1486,10 @@ export function pasteElements(defs, clipboard, offsetX, offsetY) {
             ...defs.diagrams.slice(1),
         ],
     };
-    return { defs: newDefs, newIds };
+    const topLevelIds = clipboard.elements
+        .map((el) => newIds.get(el.id))
+        .filter((id) => id !== undefined);
+    return { defs: newDefs, newIds, topLevelIds };
 }
 // ── Create text annotation ────────────────────────────────────────────────────
 export function createAnnotation(defs, bounds, text) {

package/dist/overlay.d.ts

@@ -42,7 +42,7 @@ export declare class OverlayRenderer {
     }>): void;
     setRubberBand(origin: DiagPoint | null, current?: DiagPoint): void;
     setResizePreview(bounds: BpmnBounds | null): void;
-    setGhostConnection(waypoints: BpmnWaypoint[] | null): void;
+    setGhostConnection(waypoints: BpmnWaypoint[] | null, invalid?: boolean): void;
     setEdgeEndpoints(waypoints: BpmnWaypoint[] | null, edgeId: string): void;
     setEndpointDragGhost(waypoints: BpmnWaypoint[] | null): void;
     setSpacePreview(axis: "h" | "v" | null, splitValue?: number): void;