@elixpo/lixsketch 5.6.9 → 5.6.11

package/dist/react/{lineTool-762KBYOM.js → lineTool-5CY7BHND.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDown,
   handleMouseMove,
   handleMouseUp
-} from "./chunk-CGMUXYPJ.js";
-import "./chunk-X5ENBMGL.js";
-import "./chunk-VZX55VQL.js";
+} from "./chunk-STJERZ25.js";
+import "./chunk-2U47AU6Y.js";
+import "./chunk-TFCBCWL5.js";
 export {
   handleMouseDown as handleMouseDownLine,
   handleMouseMove as handleMouseMoveLine,
   handleMouseUp as handleMouseUpLine
 };
-//# sourceMappingURL=lineTool-762KBYOM.js.map
+//# sourceMappingURL=lineTool-5CY7BHND.js.map

package/dist/react/{rectangleTool-IQK3HZK6.js → rectangleTool-DK4QL4QW.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
-} from "./chunk-I7TVGJFF.js";
-import "./chunk-X5ENBMGL.js";
-import "./chunk-VZX55VQL.js";
+} from "./chunk-Y3FJMYPX.js";
+import "./chunk-2U47AU6Y.js";
+import "./chunk-TFCBCWL5.js";
 export {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
 };
-//# sourceMappingURL=rectangleTool-IQK3HZK6.js.map
+//# sourceMappingURL=rectangleTool-DK4QL4QW.js.map

package/dist/react/styles.css

@@ -6499,6 +6499,10 @@
 }
 .theme-light .lixsketch-canvas-root {
   --lix-icon-filter: none;
+  --lixsketch-bg: #ffffff;
+}
+.theme-light .lixsketch-canvas-root :is(.anchor, .resize-anchor, .resize-handle, .rotate-anchor, .rotation-anchor, .multi-selection-anchor, .multi-selection-rotation-anchor) {
+  fill: #ffffff !important;
 }
 .theme-dark .lixsketch-canvas-root {
   --lix-icon-filter: brightness(0) invert(1);

package/dist/react/{textTool-ITG2SBJK.js → textTool-GP5QQYF3.js}

@@ -6,11 +6,11 @@ import {
   handleTextMouseMove,
   handleTextMouseUp,
   updateCodeToggleForShape
-} from "./chunk-RK3NVAER.js";
-import "./chunk-DODPOWNX.js";
-import "./chunk-PAKA6HUX.js";
-import "./chunk-X5ENBMGL.js";
-import "./chunk-VZX55VQL.js";
+} from "./chunk-75OPJOWN.js";
+import "./chunk-CWE5IFG7.js";
+import "./chunk-MS4TIQ6Z.js";
+import "./chunk-2U47AU6Y.js";
+import "./chunk-TFCBCWL5.js";
 export {
   deselectElement as deselectTextElement,
   enterEditMode,
@@ -19,4 +19,4 @@ export {
   handleTextMouseUp,
   updateCodeToggleForShape
 };
-//# sourceMappingURL=textTool-ITG2SBJK.js.map
+//# sourceMappingURL=textTool-GP5QQYF3.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.6.9",
+  "version": "5.6.11",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/CopyPaste.js

@@ -3,7 +3,7 @@
 // Supports single and multi-selection copy/paste
 // Pastes at mouse pointer position with offset to prevent stacking
 
-import { pushCreateAction } from './UndoRedo.js';
+import { beginUndoBatch, endUndoBatch, pushCreateAction } from './UndoRedo.js';
 import { Rectangle } from '../shapes/Rectangle.js';
 import { Circle } from '../shapes/Circle.js';
 import { Line } from '../shapes/Line.js';
@@ -41,13 +41,15 @@ function getSVGCoordsFromMouse(e) {
 }
 
 function cloneOptions(options) {
-    return JSON.parse(JSON.stringify(options));
+    return options ? JSON.parse(JSON.stringify(options)) : {};
 }
 
 // ============================================================
 // SERIALIZE: Extract copyable data from a shape
 // ============================================================
-function serializeShape(shape) {
+export function serializeShape(shape, visited = new Set()) {
+    if (!shape || visited.has(shape)) return null;
+    visited.add(shape);
     switch (shape.shapeName) {
         case 'rectangle':
             return {
@@ -112,7 +114,17 @@ function serializeShape(shape) {
                 height: shape.height,
                 rotation: shape.rotation,
                 frameName: shape.frameName,
-                options: cloneOptions(shape.options)
+                frameType: shape._frameType || null,
+                webEmbedURL: shape._webEmbedURL || null,
+                diagramType: shape._diagramType || null,
+                fillStyle: shape.fillStyle,
+                fillColor: shape.fillColor,
+                gridSize: shape.gridSize,
+                gridColor: shape.gridColor,
+                options: cloneOptions(shape.options),
+                children: (shape.containedShapes || [])
+                    .map(child => serializeShape(child, visited))
+                    .filter(Boolean),
             };
 
         case 'text': {
@@ -180,6 +192,18 @@ function serializeShape(shape) {
     }
 }
 
+export function getCopyRoots(selectedShapes) {
+    const selectedSet = new Set(selectedShapes);
+    return selectedShapes.filter(shape => {
+        let parent = shape?.parentFrame;
+        while (parent) {
+            if (selectedSet.has(parent)) return false;
+            parent = parent.parentFrame;
+        }
+        return true;
+    });
+}
+
 // ============================================================
 // Get bounding center of a serialized shape
 // ============================================================
@@ -306,9 +330,20 @@ function createShapeFromData(data, offsetX, offsetY) {
                 data.y + offsetY,
                 data.width,
                 data.height,
-                { ...cloneOptions(data.options), frameName: data.frameName, rotation: data.rotation }
+                {
+                    ...cloneOptions(data.options),
+                    frameName: data.frameName,
+                    rotation: data.rotation,
+                    frameType: data.frameType,
+                    webEmbedURL: data.webEmbedURL,
+                    fillStyle: data.fillStyle,
+                    fillColor: data.fillColor,
+                    gridSize: data.gridSize,
+                    gridColor: data.gridColor,
+                }
             );
             newFrame.rotation = data.rotation;
+            if (data.diagramType) newFrame._diagramType = data.diagramType;
             return newFrame;
         }
 
@@ -460,21 +495,23 @@ function createShapeFromData(data, offsetX, offsetY) {
 // COPY: Serialize currently selected shapes
 // ============================================================
 function copySelected() {
-    const shapesToCopy = [];
+    let selectedShapes = [];
 
     // Check multi-selection first
     if (window.multiSelection && window.multiSelection.selectedShapes && window.multiSelection.selectedShapes.size > 0) {
-        window.multiSelection.selectedShapes.forEach(shape => {
-            const data = serializeShape(shape);
-            if (data) shapesToCopy.push(data);
-        });
+        selectedShapes = [...window.multiSelection.selectedShapes];
     }
     // Fall back to single currentShape
     else if (typeof currentShape !== 'undefined' && currentShape && currentShape.isSelected) {
-        const data = serializeShape(currentShape);
-        if (data) shapesToCopy.push(data);
+        selectedShapes = [currentShape];
     }
 
+    // If both a frame and one of its children are selected, serialize the
+    // child only through the frame. This preserves ownership without creating
+    // a second loose duplicate beside the pasted frame.
+    const copyRoots = getCopyRoots(selectedShapes);
+    const shapesToCopy = copyRoots.map(shape => serializeShape(shape)).filter(Boolean);
+
     if (shapesToCopy.length === 0) return false;
 
     // Calculate center of all copied shapes
@@ -532,17 +569,28 @@ function pasteClipboard() {
     }
 
     const pastedShapes = [];
+    const undoBatch = beginUndoBatch();
 
-    clipboard.shapes.forEach(data => {
+    const pasteShapeTree = (data, parentFrame = null) => {
         const newShape = createShapeFromData(data, groupOffsetX, groupOffsetY);
-        if (newShape) {
-            if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {
-                shapes.push(newShape);
-            }
+        if (!newShape) return null;
+        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) shapes.push(newShape);
+        if (parentFrame?.addShapeToFrame) parentFrame.addShapeToFrame(newShape);
+
+        if (data.type === 'frame') {
+            pushCreateAction(newShape, { frameCreation: true, containedShapes: [] });
+            for (const childData of data.children || []) pasteShapeTree(childData, newShape);
+        } else {
             pushCreateAction(newShape);
-            pastedShapes.push(newShape);
         }
+        return newShape;
+    };
+
+    clipboard.shapes.forEach(data => {
+        const newShape = pasteShapeTree(data);
+        if (newShape) pastedShapes.push(newShape);
     });
+    endUndoBatch(undoBatch, 'clipboard-paste');
 
     // Select the pasted shapes
     if (pastedShapes.length === 1) {

package/src/core/EventDispatcher.js

@@ -17,6 +17,37 @@ import { handleShapeRecognitionDown, handleShapeRecognitionMove, handleShapeReco
 import { handlePaintBucketDown } from '../tools/paintBucketTool.js';
 import { handleLassoDown, handleLassoMove, handleLassoUp } from '../tools/lassoTool.js';
 import { handleWebEmbedDown, handleWebEmbedMove, handleWebEmbedUp } from '../tools/webEmbedTool.js';
+import { createSelectionGestureOwner } from './SelectionGesture.js';
+
+const selectionGestureOwner = createSelectionGestureOwner();
+
+const shapePointerHandlers = {
+    rectangle: { down: handleMouseDownRect, move: handleMouseMoveRect, up: handleMouseUpRect },
+    arrow: { down: handleMouseDownArrow, move: handleMouseMoveArrow, up: handleMouseUpArrow },
+    circle: { down: handleMouseDownCircle, move: handleMouseMoveCircle, up: handleMouseUpCircle },
+    image: { down: handleMouseDownImage, move: handleMouseMoveImage, up: handleMouseUpImage },
+    line: { down: handleMouseDownLine, move: handleMouseMoveLine, up: handleMouseUpLine },
+    freehandStroke: { down: handleFreehandMouseDown, move: handleFreehandMouseMove, up: handleFreehandMouseUp },
+    text: { down: handleTextMouseDown, move: handleTextMouseMove, up: handleTextMouseUp },
+    frame: { down: handleMouseDownFrame, move: handleMouseMoveFrame, up: handleMouseUpFrame },
+    icon: { down: handleMouseDownIcon, move: handleMouseMoveIcon, up: handleMouseUpIcon },
+    code: { down: handleCodeMouseDown, move: handleCodeMouseMove, up: handleCodeMouseUp },
+};
+
+function routeShapePointer(phase, event, shape = currentShape) {
+    const handler = shapePointerHandlers[shape?.shapeName]?.[phase];
+    if (!handler) return false;
+    handler(event);
+    return true;
+}
+
+function captureSelectionGesture(event) {
+    if (isMultiSelecting || multiSelection.isDragging || multiSelection.isResizing || multiSelection.isRotating) {
+        selectionGestureOwner.captureMulti(event.pointerId);
+    } else if (currentShape?.isSelected) {
+        selectionGestureOwner.captureShape(currentShape, event.pointerId);
+    }
+}
 
 // === Auto-scroll when dragging near viewport edges ===
 const EDGE_THRESHOLD = 40; // px from edge to start scrolling
@@ -85,6 +116,7 @@ function _onDocumentDragMove(e) {
     const clampedX = Math.max(rect.left, Math.min(rect.right, e.clientX));
     const clampedY = Math.max(rect.top, Math.min(rect.bottom, e.clientY));
     const clampedEvent = new PointerEvent(e.type, {
+        pointerId: e.pointerId,
         clientX: clampedX,
         clientY: clampedY,
         buttons: e.buttons,
@@ -114,6 +146,7 @@ const handleMainMouseDown = (e) => {
     // simultaneously pans (handled in ZoomPan) and starts a selection
     // marquee.
     if (e.button === 1 || e.button === 2 || window.__spacePanActive) return;
+    selectionGestureOwner.clearAll();
     // Safety: remove any stray selection rectangle from a previous interrupted drag
     removeMultiSelectionRect();
 
@@ -178,6 +211,7 @@ const handleMainMouseDown = (e) => {
     else if (isSelectionToolActive) {
         // Try multi-selection first when selection tool is active
         if (handleMultiSelectionMouseDown(e)) {
+            captureSelectionGesture(e);
             return; // Multi-selection handled the event
         }
 
@@ -186,43 +220,7 @@ const handleMainMouseDown = (e) => {
         let handled = false;
 
         // If multi-selection didn't handle it, proceed with shape-specific selection
-        if (currentShape?.shapeName === 'rectangle') {
-            handleMouseDownRect(e);
-            handled = true;
-        } else if (currentShape?.shapeName === 'arrow') {
-            handleMouseDownArrow(e);
-            handled = true;
-        } else if (currentShape?.shapeName === 'circle') {
-            handleMouseDownCircle(e);
-            handled = true;
-        } else if (currentShape?.shapeName === 'image') {
-            handleMouseDownImage(e);
-            handled = true;
-        }
-        else if (currentShape?.shapeName === 'line') {
-            handleMouseDownLine(e);
-            handled = true;
-        }
-        else if (currentShape?.shapeName === 'freehandStroke') {
-            handleFreehandMouseDown(e);
-            handled = true;
-        }
-        else if (currentShape?.shapeName === 'text') {
-            handleTextMouseDown(e);
-            handled = true;
-        }
-        else if (currentShape?.shapeName === 'frame') {
-            handleMouseDownFrame(e);
-            handled = true;
-        }
-        else if (currentShape?.shapeName === 'icon') {
-            handleMouseDownIcon(e);
-            handled = true;
-        }
-        else if( currentShape?.shapeName === 'code') {
-            handleCodeMouseDown(e);
-            handled = true;
-        }
+        handled = routeShapePointer('down', e);
 
         // If the handler deselected (currentShape cleared) but didn't select something new,
         // fall through to try all handlers so clicking another shape type works
@@ -233,25 +231,25 @@ const handleMainMouseDown = (e) => {
         if (!handled) {
             const originalCurrentShape = currentShape;
             handleMouseDownRect(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownCircle(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownArrow(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownImage(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownLine(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleFreehandMouseDown(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleTextMouseDown(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownFrame(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleMouseDownIcon(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             handleCodeMouseDown(e);
-            if (currentShape && currentShape !== originalCurrentShape) return;
+            if (currentShape && currentShape !== originalCurrentShape) { captureSelectionGesture(e); return; }
             if (currentShape === originalCurrentShape) {
                 if (currentShape) {
                     currentShape.removeSelection();
@@ -259,6 +257,7 @@ const handleMainMouseDown = (e) => {
                 }
             }
         }
+        captureSelectionGesture(e);
     }
 };
 
@@ -306,6 +305,16 @@ const handleMainMouseMove = (e) => {
         handleMouseMoveIcon(e);
     }
     else if (isSelectionToolActive) {
+        const activeGesture = selectionGestureOwner.get(e.pointerId);
+        if (activeGesture) {
+            if (activeGesture.kind === 'multi') {
+                handleMultiSelectionMouseMove(e);
+            } else if (currentShape === activeGesture.shape && currentShape?.isSelected) {
+                routeShapePointer('move', e, activeGesture.shape);
+            }
+            return;
+        }
+
         // Handle multi-selection operations first - these take priority
         if (isMultiSelecting || multiSelection.isDragging || multiSelection.isResizing || multiSelection.isRotating) {
             if (handleMultiSelectionMouseMove(e)) {
@@ -400,6 +409,20 @@ const handleMainMouseUp = (e) => {
     }
 
     else if (isSelectionToolActive) {
+        const activeGesture = selectionGestureOwner.get(e.pointerId);
+        if (activeGesture) {
+            try {
+                if (activeGesture.kind === 'multi') {
+                    handleMultiSelectionMouseUp(e);
+                } else if (currentShape === activeGesture.shape) {
+                    routeShapePointer('up', e, activeGesture.shape);
+                }
+            } finally {
+                selectionGestureOwner.clear(e.pointerId);
+            }
+            return;
+        }
+
         // Always try multi-selection cleanup first
         if (isMultiSelecting || multiSelection.isDragging || multiSelection.isResizing || multiSelection.isRotating) {
             handleMultiSelectionMouseUp(e);
@@ -526,6 +549,7 @@ function initEventDispatcher(svgEl) {
 
 function cleanupEventDispatcher() {
     _stopAutoScroll();
+    selectionGestureOwner.clearAll();
     if (_documentDragActive) {
         document.removeEventListener('pointermove', _onDocumentDragMove);
         document.removeEventListener('pointerup', _onDocumentDragUp);

package/src/core/MermaidFlowchartRenderer.js

@@ -348,6 +348,29 @@ function getEdgePoint(node, target) {
     return { x: node.x, y: node.cy };
 }
 
+/**
+ * Resolve canvas connector endpoints on the sides facing the other node.
+ * Passing node centres to autoAttach leaves short rectangles outside its
+ * boundary tolerance, so the connector starts under the label instead.
+ */
+export function getCanvasFlowchartEdgePoints(fromNode, toNode) {
+    const normalize = node => ({
+        x: node.x,
+        y: node.y,
+        w: node.width,
+        h: node.height,
+        cx: node.centerX,
+        cy: node.centerY,
+        type: node.type,
+    });
+    const from = normalize(fromNode);
+    const to = normalize(toNode);
+    return {
+        start: getEdgePoint(from, to),
+        end: getEdgePoint(to, from),
+    };
+}
+
 function parseColor(hex) {
     if (!hex || hex === 'transparent' || hex === 'none') return null;
     let c = hex.replace('#', '');
@@ -432,6 +455,7 @@ export function renderFlowchartOnCanvas(diagram) {
     // instead of getting clipped at the corners.
     const PADDING = 90;
     const frameTitle = diagram.title || 'Mermaid diagram';
+    const undoBatch = window.beginUndoBatch?.();
     const frame = new window.Frame(
         vcx - dw / 2 - PADDING,
         vcy - dh / 2 - PADDING,
@@ -447,7 +471,7 @@ export function renderFlowchartOnCanvas(diagram) {
     );
     frame._diagramType = 'mermaid-flowchart';
     window.shapes.push(frame);
-    if (window.pushCreateAction) window.pushCreateAction(frame);
+    if (window.pushCreateAction) window.pushCreateAction(frame, { frameCreation: true, containedShapes: [] });
 
     const nodeMap = new Map(); // id → shape
 
@@ -491,10 +515,10 @@ export function renderFlowchartOnCanvas(diagram) {
         if (!shape) continue;
 
         window.shapes.push(shape);
-        if (window.pushCreateAction) window.pushCreateAction(shape);
         frame.addShapeToFrame(shape);
+        if (window.pushCreateAction) window.pushCreateAction(shape);
 
-        nodeMap.set(n.id, { shape, x: nx, y: ny, width: nw, height: nh, centerX: cx, centerY: cy });
+        nodeMap.set(n.id, { shape, type: n.type, x: nx, y: ny, width: nw, height: nh, centerX: cx, centerY: cy });
     }
 
     // ── Edges ──────────────────────────────────────────────────────────
@@ -503,10 +527,10 @@ export function renderFlowchartOnCanvas(diagram) {
         const toNode = nodeMap.get(e.to);
         if (!fromNode || !toNode) continue;
 
-        // Connect from the source center to the target center — autoAttach
-        // will snap each endpoint to the appropriate edge of the shape.
-        const sp = { x: fromNode.centerX, y: fromNode.centerY };
-        const ep = { x: toNode.centerX, y: toNode.centerY };
+        // Start on the source side facing the target and finish on the
+        // reciprocal target side. For top-to-bottom diagrams this is the
+        // source's south centre and the target's north centre.
+        const { start: sp, end: ep } = getCanvasFlowchartEdgePoints(fromNode, toNode);
 
         const directed = e.directed !== false;
         const style = e.style || 'normal';
@@ -538,8 +562,8 @@ export function renderFlowchartOnCanvas(diagram) {
         if (!connector) continue;
 
         window.shapes.push(connector);
-        if (window.pushCreateAction) window.pushCreateAction(connector);
         frame.addShapeToFrame(connector);
+        if (window.pushCreateAction) window.pushCreateAction(connector);
 
         // Wire arrow endpoints into the source/target shapes so moving a
         // node drags its connections along. window.__autoAttach is set up
@@ -563,5 +587,7 @@ export function renderFlowchartOnCanvas(diagram) {
         if (typeof first.shape.selectShape === 'function') first.shape.selectShape();
     }
 
+    window.endUndoBatch?.(undoBatch, 'mermaid-flowchart-create');
+
     return true;
 }

package/src/core/MermaidSequenceRenderer.js

@@ -474,6 +474,7 @@ export function renderSequenceOnCanvas(diagram) {
     const PADDING = 60;
     const TK = themeColors();
     const frameTitle = diagram.title || 'Sequence diagram';
+    const undoBatch = window.beginUndoBatch?.();
     const frame = new window.Frame(
         ox - PADDING,
         oy - PADDING,
@@ -489,7 +490,7 @@ export function renderSequenceOnCanvas(diagram) {
     );
     frame._diagramType = 'mermaid-sequence';
     window.shapes.push(frame);
-    if (window.pushCreateAction) window.pushCreateAction(frame);
+    if (window.pushCreateAction) window.pushCreateAction(frame, { frameCreation: true, containedShapes: [] });
 
     const created = [];
 
@@ -513,8 +514,8 @@ export function renderSequenceOnCanvas(diagram) {
                 labelColor: TK.participantText,
             });
             window.shapes.push(topBox);
-            if (window.pushCreateAction) window.pushCreateAction(topBox);
             frame.addShapeToFrame(topBox);
+            if (window.pushCreateAction) window.pushCreateAction(topBox);
             created.push(topBox);
 
             // Lifeline (dashed vertical line spanning the diagram height)
@@ -529,8 +530,8 @@ export function renderSequenceOnCanvas(diagram) {
                 }
             );
             window.shapes.push(lifeline);
-            if (window.pushCreateAction) window.pushCreateAction(lifeline);
             frame.addShapeToFrame(lifeline);
+            if (window.pushCreateAction) window.pushCreateAction(lifeline);
             created.push(lifeline);
 
             // Bottom participant box (mirrors top — Mermaid convention)
@@ -544,8 +545,8 @@ export function renderSequenceOnCanvas(diagram) {
                 labelColor: TK.participantText,
             });
             window.shapes.push(bottomBox);
-            if (window.pushCreateAction) window.pushCreateAction(bottomBox);
             frame.addShapeToFrame(bottomBox);
+            if (window.pushCreateAction) window.pushCreateAction(bottomBox);
             created.push(bottomBox);
         } catch (err) {
             console.warn('[SequenceRenderer] Participant creation failed:', p.name, err);
@@ -575,8 +576,8 @@ export function renderSequenceOnCanvas(diagram) {
                 }
             );
             window.shapes.push(blockShape);
-            if (window.pushCreateAction) window.pushCreateAction(blockShape);
             frame.addShapeToFrame(blockShape);
+            if (window.pushCreateAction) window.pushCreateAction(blockShape);
             created.push(blockShape);
         } catch (err) {
             console.warn('[SequenceRenderer] Block creation failed:', block, err);
@@ -626,8 +627,8 @@ export function renderSequenceOnCanvas(diagram) {
                 ];
                 segments.forEach((segment) => {
                     window.shapes.push(segment);
-                    if (window.pushCreateAction) window.pushCreateAction(segment);
                     frame.addShapeToFrame(segment);
+                    if (window.pushCreateAction) window.pushCreateAction(segment);
                     created.push(segment);
                 });
                 continue;
@@ -636,8 +637,8 @@ export function renderSequenceOnCanvas(diagram) {
                 ? new window.Line(sp, ep, opts)
                 : new window.Arrow(sp, ep, opts);
             window.shapes.push(connector);
-            if (window.pushCreateAction) window.pushCreateAction(connector);
             frame.addShapeToFrame(connector);
+            if (window.pushCreateAction) window.pushCreateAction(connector);
             created.push(connector);
         } catch (err) {
             console.warn('[SequenceRenderer] Message creation failed:', m, err);
@@ -680,8 +681,8 @@ export function renderSequenceOnCanvas(diagram) {
                     }
                 );
                 window.shapes.push(noteShape);
-                if (window.pushCreateAction) window.pushCreateAction(noteShape);
                 frame.addShapeToFrame(noteShape);
+                if (window.pushCreateAction) window.pushCreateAction(noteShape);
                 created.push(noteShape);
             } catch (err) {
                 console.warn('[SequenceRenderer] Note creation failed:', note, err);
@@ -698,6 +699,7 @@ export function renderSequenceOnCanvas(diagram) {
         if (typeof first.selectShape === 'function') first.selectShape();
     }
 
+    window.endUndoBatch?.(undoBatch, 'mermaid-sequence-create');
     console.log(`[SequenceRenderer] Done: ${pCount} participants, ${messages.length} messages`);
     return true;
 }