@elixpo/lixsketch 5.6.5 → 5.6.7

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

@@ -3,12 +3,12 @@ import {
   handleMouseDown,
   handleMouseMove,
   handleMouseUp
-} from "./chunk-RGMDWLRJ.js";
-import "./chunk-XYUFEIZR.js";
-import "./chunk-6GPEWDRB.js";
+} from "./chunk-CGMUXYPJ.js";
+import "./chunk-X5ENBMGL.js";
+import "./chunk-VZX55VQL.js";
 export {
   handleMouseDown as handleMouseDownLine,
   handleMouseMove as handleMouseMoveLine,
   handleMouseUp as handleMouseUpLine
 };
-//# sourceMappingURL=lineTool-ZMR27U5L.js.map
+//# sourceMappingURL=lineTool-762KBYOM.js.map

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

@@ -3,12 +3,12 @@ import {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
-} from "./chunk-7CM5XQDN.js";
-import "./chunk-XYUFEIZR.js";
-import "./chunk-6GPEWDRB.js";
+} from "./chunk-I7TVGJFF.js";
+import "./chunk-X5ENBMGL.js";
+import "./chunk-VZX55VQL.js";
 export {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
 };
-//# sourceMappingURL=rectangleTool-EJKK6UTX.js.map
+//# sourceMappingURL=rectangleTool-IQK3HZK6.js.map

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

@@ -6,11 +6,11 @@ import {
   handleTextMouseMove,
   handleTextMouseUp,
   updateCodeToggleForShape
-} from "./chunk-GQUZPON4.js";
-import "./chunk-M6TMN76K.js";
+} from "./chunk-RK3NVAER.js";
+import "./chunk-DODPOWNX.js";
 import "./chunk-PAKA6HUX.js";
-import "./chunk-XYUFEIZR.js";
-import "./chunk-6GPEWDRB.js";
+import "./chunk-X5ENBMGL.js";
+import "./chunk-VZX55VQL.js";
 export {
   deselectElement as deselectTextElement,
   enterEditMode,
@@ -19,4 +19,4 @@ export {
   handleTextMouseUp,
   updateCodeToggleForShape
 };
-//# sourceMappingURL=textTool-S4XXZHZH.js.map
+//# sourceMappingURL=textTool-ITG2SBJK.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.6.5",
+  "version": "5.6.7",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",
@@ -82,10 +82,13 @@
     }
   },
   "devDependencies": {
-    "esbuild": "^0.24.0"
+    "esbuild": "^0.24.0",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "node build.mjs",
+    "test": "npm run test:unit && npm run test:mcp",
+    "test:unit": "vitest run",
     "test:mcp": "node --test test/mcp-*.test.js",
     "prepublishOnly": "npm run build"
   }

package/src/core/AIRenderer.js

@@ -44,8 +44,14 @@ export function parseMermaid(src) {
     const classDefs = new Map();   // classDef name -> { fill, stroke, strokeWidth }
     const classAssigns = [];        // { nodeIds: [...], className }
     const nodeStyles = new Map();   // Mermaid `style A fill:...,stroke:...`
-    const darkTheme = typeof document === 'undefined'
-        || document.body?.classList.contains('theme-dark');
+    const darkTheme = (() => {
+        if (typeof document === 'undefined') return true;
+        if (document.body) {
+            if (document.body.classList.contains('theme-dark')) return true;
+            if (document.body.classList.contains('theme-light')) return false;
+        }
+        return !document.documentElement || document.documentElement.classList.contains('dark');
+    })();
     const palette = darkTheme
         ? [
             { fill: '#352b52', stroke: '#9d86df' },

package/src/core/CanvasSpace.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+// Tool pointer coordinates are already in SVG viewBox space. getCTM() also
+// includes viewport pan/zoom, so controls use these helpers for shape-only
+// translation and rotation.
+export function localToCanvas(point, transform) {
+    const rotation = (Number(transform.rotation) || 0) * Math.PI / 180;
+    const centerX = Number(transform.centerX) || 0;
+    const centerY = Number(transform.centerY) || 0;
+    const dx = point.x - centerX;
+    const dy = point.y - centerY;
+    return {
+        x: (Number(transform.x) || 0) + centerX + dx * Math.cos(rotation) - dy * Math.sin(rotation),
+        y: (Number(transform.y) || 0) + centerY + dx * Math.sin(rotation) + dy * Math.cos(rotation),
+    };
+}
+
+export function canvasToLocal(point, transform) {
+    const rotation = -(Number(transform.rotation) || 0) * Math.PI / 180;
+    const centerX = Number(transform.centerX) || 0;
+    const centerY = Number(transform.centerY) || 0;
+    const dx = point.x - (Number(transform.x) || 0) - centerX;
+    const dy = point.y - (Number(transform.y) || 0) - centerY;
+    return {
+        x: centerX + dx * Math.cos(rotation) - dy * Math.sin(rotation),
+        y: centerY + dx * Math.sin(rotation) + dy * Math.cos(rotation),
+    };
+}

package/src/core/GraphRenderer.js

@@ -17,9 +17,14 @@ const GRAPH_COLORS = [
 // labels stay readable on the warm off-white canvas. The equation
 // curves themselves keep their colours from GRAPH_COLORS.
 function graphThemeTokens() {
-    const isDark = typeof document !== 'undefined'
-        && document.body
-        && document.body.classList.contains('theme-dark');
+    const isDark = (() => {
+        if (typeof document === 'undefined') return true;
+        if (document.body) {
+            if (document.body.classList.contains('theme-dark')) return true;
+            if (document.body.classList.contains('theme-light')) return false;
+        }
+        return !document.documentElement || document.documentElement.classList.contains('dark');
+    })();
     if (isDark) {
         return {
             outerBg:   '#0d1117',

package/src/core/LixScriptParser.js

@@ -50,11 +50,17 @@ function tokenize(source) {
  * Returns { variables, shapes, errors }
  */
 export function parseLixScript(source) {
-  const tokens = tokenize(source)
   const variables = {}
   const shapes = []
   const errors = []
 
+  if (typeof source !== 'string') {
+    errors.push({ line: 0, message: 'LixScript source must be a string' })
+    return { variables, shapes, errors }
+  }
+
+  const tokens = tokenize(source)
+
   let i = 0
 
   while (i < tokens.length) {

package/src/core/MermaidFlowchartRenderer.js

@@ -22,7 +22,11 @@ const FONT_FAMILY = 'lixFont, sans-serif';
 // so a single render call uses whichever palette is active.
 function isThemeDark() {
     if (typeof document === 'undefined') return true;
-    return !!(document.body && document.body.classList.contains('theme-dark'));
+    if (document.body) {
+        if (document.body.classList.contains('theme-dark')) return true;
+        if (document.body.classList.contains('theme-light')) return false;
+    }
+    return !document.documentElement || document.documentElement.classList.contains('dark');
 }
 function nodeStrokeColor() { return isThemeDark() ? '#fff' : '#1a1a2e'; }
 function edgeStrokeColor() { return isThemeDark() ? '#888' : '#444'; }

package/src/core/MermaidSequenceParser.js

@@ -28,6 +28,7 @@ const ARROW_TYPES = {
 const ARROW_PATTERNS = Object.keys(ARROW_TYPES).sort((a, b) => b.length - a.length);
 
 export function parseSequenceDiagram(src) {
+    if (typeof src !== 'string') return null;
     const lines = src.trim().split('\n').map(l => l.trim()).filter(l => l && !l.startsWith('%%'));
     if (lines.length === 0) return null;
 

package/src/core/MermaidSequenceRenderer.js

@@ -32,9 +32,14 @@ const CODE_FONT = 'lixCode, monospace';
 // string preview path (`renderSequenceSVG`), which is rendered inside
 // the modal's preview pane.
 function themeColors() {
-    const isDark = typeof document !== 'undefined'
-        && document.body
-        && document.body.classList.contains('theme-dark');
+    const isDark = (() => {
+        if (typeof document === 'undefined') return true;
+        if (document.body) {
+            if (document.body.classList.contains('theme-dark')) return true;
+            if (document.body.classList.contains('theme-light')) return false;
+        }
+        return !document.documentElement || document.documentElement.classList.contains('dark');
+    })();
     if (isDark) return DARK_THEME;
     return {
         bg: '#fbfaf6',

package/src/core/MermaidStructuredRenderer.js

@@ -37,7 +37,12 @@ function contrastText(fill) {
 }
 
 function isDark() {
-    return typeof document !== 'undefined' && document.body?.classList.contains('theme-dark');
+    if (typeof document === 'undefined') return true;
+    if (document.body) {
+        if (document.body.classList.contains('theme-dark')) return true;
+        if (document.body.classList.contains('theme-light')) return false;
+    }
+    return !document.documentElement || document.documentElement.classList.contains('dark');
 }
 
 function theme() {

package/src/core/SceneSerializer.js

@@ -17,8 +17,14 @@ import { TextShape } from '../shapes/TextShape.js';
 import { CodeShape } from '../shapes/CodeShape.js';
 import { ImageShape } from '../shapes/ImageShape.js';
 import { IconShape } from '../shapes/IconShape.js';
+import { clearUndoHistory, pushCanvasResetAction } from './UndoRedo.js';
 
 const FORMAT_VERSION = 1;
+const GZIP_MAGIC = [0x1f, 0x8b];
+const SUPPORTED_SHAPE_TYPES = new Set([
+    'rectangle', 'circle', 'line', 'arrow', 'freehandStroke',
+    'frame', 'text', 'code', 'image', 'icon',
+]);
 
 // Generate a unique session ID for each scene
 let _sessionID = null;
@@ -413,8 +419,9 @@ export function saveScene(workspaceName = 'Untitled') {
 // LOAD: Deserialize .lixsketch JSON and recreate scene
 // ============================================================
 export function loadScene(sceneData) {
-    if (!sceneData || sceneData.format !== 'lixsketch') {
-        console.error('[SceneSerializer] Invalid scene format');
+    const validation = validateScene(sceneData);
+    if (!validation.valid) {
+        console.error('[SceneSerializer] Invalid scene:', validation.error);
         return false;
     }
 
@@ -525,6 +532,20 @@ export function loadScene(sceneData) {
         }
     }
 
+    // Shape-array order is the scene's z-order. Frames are constructed first
+    // so their clip groups exist before children are attached, but that is an
+    // implementation detail and must not change the saved stacking order.
+    const restoredInSceneOrder = sceneData.shapes
+        .map(data => data.shapeID && idMap.get(data.shapeID))
+        .filter(Boolean);
+    const restoredSet = new Set(restoredInSceneOrder);
+    window.shapes.splice(
+        0,
+        window.shapes.length,
+        ...restoredInSceneOrder,
+        ...window.shapes.filter(shape => !restoredSet.has(shape)),
+    );
+
     // ── Fourth pass: frame containment reconciliation (issue #24 bug #10) ──
     //
     // The pass above attaches each child via `frame.addShapeToFrame(child)`,
@@ -608,21 +629,62 @@ export function loadScene(sceneData) {
 }
 
 // ============================================================
-// DOWNLOAD: Trigger browser download of .lixsketch file
+// DOWNLOAD: Trigger browser download of an optimized .lixjson file
 // ============================================================
-export function downloadScene(workspaceName = 'Untitled') {
+function sceneFileTimestamp(date = new Date()) {
+    const iso = date.toISOString();
+    return `${iso.slice(0, 10).replace(/-/g, '')}-${iso.slice(11, 19).replace(/:/g, '')}`;
+}
+
+function safeWorkspaceFileName(workspaceName) {
+    const safe = String(workspaceName || 'Untitled')
+        .trim()
+        .replace(/[^a-zA-Z0-9_-]+/g, '_')
+        .replace(/^_+|_+$/g, '');
+    return safe || 'Untitled';
+}
+
+export async function encodeSceneFile(scene) {
+    const json = JSON.stringify(scene);
+    if (typeof CompressionStream === 'undefined') {
+        return new Blob([json], { type: 'application/json' });
+    }
+
+    const compressed = new Blob([json])
+        .stream()
+        .pipeThrough(new CompressionStream('gzip'));
+    const buffer = await new Response(compressed).arrayBuffer();
+    return new Blob([buffer], { type: 'application/vnd.lixsketch.scene+gzip' });
+}
+
+export async function decodeSceneFile(buffer) {
+    const bytes = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+    const isGzip = bytes[0] === GZIP_MAGIC[0] && bytes[1] === GZIP_MAGIC[1];
+    if (!isGzip) return new TextDecoder().decode(bytes);
+    if (typeof DecompressionStream === 'undefined') {
+        throw new Error('This browser cannot open compressed .lixjson files.');
+    }
+
+    const decompressed = new Blob([bytes])
+        .stream()
+        .pipeThrough(new DecompressionStream('gzip'));
+    return new Response(decompressed).text();
+}
+
+export async function downloadScene(workspaceName = 'Untitled') {
     const scene = saveScene(workspaceName);
-    const json = JSON.stringify(scene, null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
+    const blob = await encodeSceneFile(scene);
     const url = URL.createObjectURL(blob);
+    const fileName = `${safeWorkspaceFileName(workspaceName)}-${sceneFileTimestamp()}.lixjson`;
 
     const a = document.createElement('a');
     a.href = url;
-    a.download = `${workspaceName.replace(/[^a-zA-Z0-9_-]/g, '_')}.lixjson`;
+    a.download = fileName;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+    return { fileName, sizeBytes: blob.size, compressed: blob.type.includes('gzip') };
 }
 
 // ============================================================
@@ -634,6 +696,15 @@ export function validateScene(data) {
     if (data.format !== 'lixsketch') return { valid: false, error: 'Not a LixSketch scene file (missing format field)' };
     if (!data.version || data.version > FORMAT_VERSION) return { valid: false, error: `Unsupported version: ${data.version}` };
     if (!Array.isArray(data.shapes)) return { valid: false, error: 'Invalid scene: missing shapes array' };
+    for (let index = 0; index < data.shapes.length; index += 1) {
+        const shape = data.shapes[index];
+        if (!shape || typeof shape !== 'object' || Array.isArray(shape)) {
+            return { valid: false, error: `Invalid shape at index ${index}` };
+        }
+        if (!SUPPORTED_SHAPE_TYPES.has(shape.type)) {
+            return { valid: false, error: `Unsupported shape type at index ${index}: ${String(shape.type)}` };
+        }
+    }
     return {
         valid: true,
         name: data.name || 'Untitled',
@@ -648,29 +719,26 @@ export function uploadScene() {
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = '.lixjson,.json';
-        input.onchange = (e) => {
+        input.onchange = async (e) => {
             const file = e.target.files[0];
             if (!file) return resolve(false);
 
-            const reader = new FileReader();
-            reader.onload = (ev) => {
-                try {
-                    const data = JSON.parse(ev.target.result);
-                    const validation = validateScene(data);
-                    if (!validation.valid) {
-                        console.error('[SceneSerializer] Invalid file:', validation.error);
-                        resolve({ success: false, error: validation.error });
-                        return;
-                    }
-                    resetSessionID(); // New session for loaded scene
-                    const result = loadScene(data);
-                    resolve({ success: result, validation });
-                } catch (err) {
-                    console.error('[SceneSerializer] Failed to parse file:', err);
-                    resolve({ success: false, error: 'Failed to parse JSON file' });
+            try {
+                const json = await decodeSceneFile(await file.arrayBuffer());
+                const data = JSON.parse(json);
+                const validation = validateScene(data);
+                if (!validation.valid) {
+                    console.error('[SceneSerializer] Invalid file:', validation.error);
+                    resolve({ success: false, error: validation.error });
+                    return;
                 }
-            };
-            reader.readAsText(file);
+                resetSessionID(); // New session for loaded scene
+                const result = loadScene(data);
+                resolve({ success: result, validation });
+            } catch (err) {
+                console.error('[SceneSerializer] Failed to parse file:', err);
+                resolve({ success: false, error: err.message || 'Failed to parse .lixjson file' });
+            }
         };
         input.click();
     });
@@ -808,12 +876,15 @@ export function exportAsPDF() {
 // ============================================================
 // RESET: Clear the entire canvas
 // ============================================================
-export function resetCanvas() {
+export function resetCanvas({ undoable = true, clearStorage = true, clearHistory = true, workspaceName = 'Untitled' } = {}) {
     const svgEl = window.svg;
     if (!svgEl) return;
 
     // Remove all shape DOM elements + frame clipGroups/clipPaths
     const existingShapes = window.shapes || [];
+    const resetSnapshot = undoable && existingShapes.length > 0
+        ? saveScene(workspaceName)
+        : null;
     existingShapes.forEach(shape => {
         if (shape.shapeName === 'frame') {
             if (shape.clipGroup && shape.clipGroup.parentNode) {
@@ -848,16 +919,28 @@ export function resetCanvas() {
         window.disableAllSideBars();
     }
 
-    // Clear auto-save (both legacy and session-scoped keys)
-    try {
-        localStorage.removeItem('lixsketch-autosave');
-        localStorage.removeItem('lixsketch-autosave-meta');
-        const sid = window.__sessionID;
-        if (sid) {
-            localStorage.removeItem(`lixsketch-autosave-${sid}`);
-            localStorage.removeItem(`lixsketch-autosave-meta-${sid}`);
-        }
-    } catch (_) {}
+    if (clearStorage) {
+        // Clear auto-save (both legacy and session-scoped keys)
+        try {
+            localStorage.removeItem('lixsketch-autosave');
+            localStorage.removeItem('lixsketch-autosave-meta');
+            const sid = window.__sessionID;
+            if (sid) {
+                localStorage.removeItem(`lixsketch-autosave-${sid}`);
+                localStorage.removeItem(`lixsketch-autosave-meta-${sid}`);
+            }
+        } catch (_) {}
+    }
+
+    if (resetSnapshot) {
+        pushCanvasResetAction(
+            resetSnapshot,
+            (snapshot) => loadScene(snapshot),
+            () => resetCanvas({ undoable: false, clearStorage: true, clearHistory: false, workspaceName }),
+        );
+    } else if (clearHistory) {
+        clearUndoHistory();
+    }
 
     console.log('[SceneSerializer] Canvas reset');
     if (typeof window.__collabSceneChanged === 'function') {

package/src/core/Selection.js

@@ -2,7 +2,7 @@
 // Multi-selection system - copied from selection.js
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
-import { pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
+import { beginUndoBatch, endUndoBatch, pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
 import { calculateSnap, clearSnapGuides } from './SnapGuides.js';
 import { registerRotationAnchor } from './ScreenSpaceControls.js';
 
@@ -278,19 +278,21 @@ class MultiSelection {
                     endPoint: { ...shape.endPoint },
                     x: shape.x, y: shape.y,
                     width: shape.width || 0, height: shape.height || 0,
-                    rotation: shape.rotation || 0
+                    rotation: shape.rotation || 0,
+                    parentFrame: shape.parentFrame || null
                 };
             case 'circle':
-                return { x: shape.x, y: shape.y, rx: shape.rx, ry: shape.ry, rotation: shape.rotation || 0, width: shape.width, height: shape.height };
+                return { x: shape.x, y: shape.y, rx: shape.rx, ry: shape.ry, rotation: shape.rotation || 0, width: shape.width, height: shape.height, parentFrame: shape.parentFrame || null };
             case 'freehandStroke':
-                return { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rotation: shape.rotation || 0, points: JSON.parse(JSON.stringify(shape.points)) };
+                return { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rotation: shape.rotation || 0, points: JSON.parse(JSON.stringify(shape.points)), parentFrame: shape.parentFrame || null };
             default:
-                return { x: shape.x || 0, y: shape.y || 0, width: shape.width || 0, height: shape.height || 0, rotation: shape.rotation || 0 };
+                return { x: shape.x || 0, y: shape.y || 0, width: shape.width || 0, height: shape.height || 0, rotation: shape.rotation || 0, parentFrame: shape.parentFrame || null };
         }
     }
 
     // Push undo actions for all shapes that changed
-    _pushUndoForAll() {
+    _pushUndoForAll(existingBatch = null) {
+        const batch = existingBatch || beginUndoBatch();
         this.selectedShapes.forEach(shape => {
             const oldState = this._undoSnapshots.get(shape);
             if (!oldState) return;
@@ -305,6 +307,7 @@ class MultiSelection {
             }
         });
         this._undoSnapshots.clear();
+        if (!existingBatch) endUndoBatch(batch, 'multi-transform');
     }
 
     addShape(shape) {
@@ -1392,6 +1395,8 @@ createRotatedControls(angleDiff = 0) {
             shape.isSelected = true;
         });
 
+        const undoBatch = beginUndoBatch();
+
         // Re-parent any selected shape that now sits inside a different frame
         // (Issue #22, bug #9). The per-tool drag handlers (rectangleTool, etc.)
         // do this for single-shape drags, but a multi-selection drag bypassed
@@ -1418,11 +1423,6 @@ createRotatedControls(angleDiff = 0) {
                 }
                 if (target && typeof target.addShapeToFrame === 'function') {
                     target.addShapeToFrame(shape);
-                    if (typeof pushFrameAttachmentAction === 'function') {
-                        pushFrameAttachmentAction(target, shape, 'attach', current);
-                    }
-                } else if (current && typeof pushFrameAttachmentAction === 'function') {
-                    pushFrameAttachmentAction(current, shape, 'detach', current);
                 }
             });
         }
@@ -1430,7 +1430,8 @@ createRotatedControls(angleDiff = 0) {
         this.initialPositions.clear();
 
         // Push undo for all moved shapes
-        this._pushUndoForAll();
+        this._pushUndoForAll(undoBatch);
+        endUndoBatch(undoBatch, 'multi-move');
 
         // Refresh bounds and controls after finalizeMove may have changed positions
         this.updateControls();
@@ -1864,8 +1865,19 @@ document.addEventListener('keydown', (e) => {
 function deleteSelectedShapes() {
     if (multiSelection.selectedShapes.size === 0) return;
 
+    if (
+        Array.isArray(window.shapes) &&
+        window.shapes.length > 0 &&
+        multiSelection.selectedShapes.size >= window.shapes.length &&
+        typeof window.__requestCanvasResetConfirmation === 'function'
+    ) {
+        window.__requestCanvasResetConfirmation();
+        return;
+    }
+
     const shapesToDelete = Array.from(multiSelection.selectedShapes);
     multiSelection.clearSelection();
+    const undoBatch = beginUndoBatch();
 
     // Issue #24 bug #3: when deleting a (regular, non-diagram) frame, its
     // children are released back to the canvas — capture them here so we
@@ -1876,6 +1888,8 @@ function deleteSelectedShapes() {
     shapesToDelete.forEach(shape => {
         const isFrame = shape.shapeName === 'frame';
         const isDiagramFrame = isFrame && !!shape._diagramType;
+        const parentFrame = shape.parentFrame || null;
+        const frameIndex = parentFrame?.containedShapes?.indexOf(shape) ?? -1;
 
         // Issue #24 bug #7: for a regular (non-diagram) frame, we don't
         // want destroy() — it empties containedShapes and tears down the
@@ -1938,14 +1952,15 @@ function deleteSelectedShapes() {
         // snapshot so undo can re-attach them.
         try {
             if (childSnapshot) {
-                pushDeleteAction(shape, { childSnapshot });
+                pushDeleteAction(shape, { childSnapshot, shapeIndex: idx, parentFrame, frameIndex });
             } else {
-                pushDeleteAction(shape);
+                pushDeleteAction(shape, { shapeIndex: idx, parentFrame, frameIndex });
             }
         } catch (err) {
             console.warn('[deleteSelectedShapes] pushDeleteAction failed:', err);
         }
     });
+    endUndoBatch(undoBatch, 'multi-delete');
 
     // Bug #3 follow-through: auto-select the released children and switch
     // to the pointer tool so the user can immediately keep manipulating