@elixpo/lixsketch 5.5.20 → 5.5.21

package/dist/react/{lineTool-XLOOZE3E.js → lineTool-N5I7IGT7.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDown,
   handleMouseMove,
   handleMouseUp
-} from "./chunk-C72OHQLE.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+} from "./chunk-ILGAFR56.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   handleMouseDown as handleMouseDownLine,
   handleMouseMove as handleMouseMoveLine,
   handleMouseUp as handleMouseUpLine
 };
-//# sourceMappingURL=lineTool-XLOOZE3E.js.map
+//# sourceMappingURL=lineTool-N5I7IGT7.js.map

package/dist/react/{rectangleTool-AEYDDJCA.js → rectangleTool-YUT7ZK2E.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
-} from "./chunk-JOPQ27YH.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+} from "./chunk-4BLMNGTR.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
 };
-//# sourceMappingURL=rectangleTool-AEYDDJCA.js.map
+//# sourceMappingURL=rectangleTool-YUT7ZK2E.js.map

package/dist/react/{textTool-5IJKTWVQ.js → textTool-IQOYPELP.js}

@@ -6,11 +6,11 @@ import {
   handleTextMouseMove,
   handleTextMouseUp,
   updateCodeToggleForShape
-} from "./chunk-SBSM3GQD.js";
-import "./chunk-73VLPCBC.js";
+} from "./chunk-2THKDSWW.js";
+import "./chunk-HFQZYCHJ.js";
 import "./chunk-PAKA6HUX.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   deselectElement as deselectTextElement,
   enterEditMode,
@@ -19,4 +19,4 @@ export {
   handleTextMouseUp,
   updateCodeToggleForShape
 };
-//# sourceMappingURL=textTool-5IJKTWVQ.js.map
+//# sourceMappingURL=textTool-IQOYPELP.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.5.20",
+  "version": "5.5.21",
   "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

@@ -147,7 +147,13 @@ function serializeShape(shape) {
                 width: shape.width,
                 height: shape.height,
                 rotation: shape.rotation,
-                href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
+                href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || '',
+                storageProvider: el.getAttribute('data-storage-provider') || null,
+                storageCloudName: el.getAttribute('data-storage-cloud-name') || null,
+                frameType: shape._frameType || null,
+                graphData: shape._frameType === 'graph' && shape._graphData
+                    ? cloneOptions(shape._graphData)
+                    : null
             };
         }
 
@@ -383,11 +389,22 @@ function createShapeFromData(data, offsetX, offsetY) {
             imgEl.setAttribute('data-shape-height', data.height);
             imgEl.setAttribute('preserveAspectRatio', 'none');
             imgEl.setAttribute('style', 'cursor: pointer;');
+            if (data.storageProvider) imgEl.setAttribute('data-storage-provider', data.storageProvider);
+            if (data.storageCloudName) imgEl.setAttribute('data-storage-cloud-name', data.storageCloudName);
 
             // ImageShape constructor moves element into a group and appends to svg
             svgEl.appendChild(imgEl);
             const imageShape = new ImageShape(imgEl);
             imageShape.rotation = data.rotation;
+            if (data.frameType === 'graph' && data.graphData) {
+                if (typeof window.__hydrateGraphShape === 'function') {
+                    window.__hydrateGraphShape(imageShape, data.graphData);
+                } else {
+                    imageShape._frameType = 'graph';
+                    imageShape._graphData = cloneOptions(data.graphData);
+                    imageShape.element.setAttribute('data-graph-shape', 'true');
+                }
+            }
             return imageShape;
         }
 
@@ -605,15 +622,25 @@ function handlePasteEvent(e) {
                 const rawDataUrl = ev.target.result;
                 const isSvg = (blob.type || '').toLowerCase() === 'image/svg+xml';
                 let placedDataUrl = rawDataUrl;
+                let placedSize = blob.size;
                 if (!isSvg) {
                     try {
                         const compressed = await compressImage(rawDataUrl);
-                        if (compressed?.dataUrl) placedDataUrl = compressed.dataUrl;
+                        if (compressed?.dataUrl) {
+                            placedDataUrl = compressed.dataUrl;
+                            placedSize = compressed.compressedSize || placedSize;
+                        }
                     } catch (err) {
                         console.warn('[CopyPaste] Pre-placement compression failed, using raw:', err);
                     }
                 }
-                placeImageFromDataUrl(placedDataUrl);
+                const limit = Number(window.__roomImageLimitBytes) || 2 * 1024 * 1024;
+                const personalStorage = window.__personalCloudinary?.connected && window.__personalCloudinary?.useForUploads;
+                if (!personalStorage && (window.__roomImageBytesUsed || 0) + placedSize > limit) {
+                    alert(`Workspace image limit reached (${Math.round(limit / (1024 * 1024))} MB).`);
+                    return;
+                }
+                placeImageFromDataUrl(placedDataUrl, placedSize);
             };
             reader.readAsDataURL(blob);
             return; // only handle first image
@@ -621,7 +648,7 @@ function handlePasteEvent(e) {
     }
 }
 
-function placeImageFromDataUrl(dataUrl) {
+function placeImageFromDataUrl(dataUrl, sizeBytes = 0) {
     const svgEl = getSVGElement();
     if (!svgEl || !window.ImageShape) return;
 
@@ -648,6 +675,9 @@ function placeImageFromDataUrl(dataUrl) {
         imgEl.setAttribute('data-shape-height', displayH);
         imgEl.setAttribute('type', 'image');
         imgEl.setAttribute('preserveAspectRatio', 'none');
+        imgEl.__fileSize = sizeBytes;
+        imgEl.setAttribute('data-file-size', String(sizeBytes));
+        window.__roomImageBytesUsed = (window.__roomImageBytesUsed || 0) + sizeBytes;
 
         svgEl.appendChild(imgEl);
         const imageShape = new ImageShape(imgEl);

package/src/core/GraphEngine.js

@@ -1,7 +1,10 @@
 /* eslint-disable */
 /**
- * GraphEngine - Bridge between graph rendering and the sketch canvas.
- * Creates Frames containing rendered graph SVG elements.
+ * GraphEngine - bridge between graph rendering and the sketch canvas.
+ *
+ * Canvas graphs use ImageShape with an SVG data URL. This keeps the graph a
+ * single crisp vector element while reusing the engine's established select,
+ * translate, resize, rotate, copy/paste, and frame-containment behaviour.
  */
 
 import { parseExpression, isValidExpression } from './GraphMathParser.js';
@@ -10,209 +13,150 @@ import { renderGraphSVG, renderGraphPreviewSVG, GRAPH_COLORS } from './GraphRend
 const NS = 'http://www.w3.org/2000/svg';
 const GRAPH_WIDTH = 600;
 const GRAPH_HEIGHT = 420;
+const MAX_PLACED_SCREEN_WIDTH = 480;
+const MAX_VIEWPORT_WIDTH_RATIO = 0.68;
+const MAX_VIEWPORT_HEIGHT_RATIO = 0.58;
+
+function cloneGraphData(equations, settings) {
+    return {
+        equations: (equations || []).map((equation) => ({
+            expression: equation.expression,
+            color: equation.color,
+        })),
+        settings: { ...(settings || {}) },
+    };
+}
+
+function graphSvgDataUrl(svgMarkup) {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+function refreshGraphImage(shape) {
+    if (!shape?._graphData || !shape.element) return false;
+    const svgMarkup = renderGraphSVG(shape._graphData.equations, {
+        ...shape._graphData.settings,
+        width: GRAPH_WIDTH,
+        height: GRAPH_HEIGHT,
+    });
+    if (!svgMarkup) return false;
+    const href = graphSvgDataUrl(svgMarkup);
+    shape.element.setAttribute('href', href);
+    shape.element.setAttribute('data-href', href);
+    return true;
+}
+
+/** Attach graph behaviour to a regular ImageShape, including restored and
+ * pasted graphs. The function is intentionally idempotent. */
+function hydrateGraphShape(shape, graphData) {
+    if (!shape?.element || !graphData) return shape;
+    shape._frameType = 'graph';
+    shape._graphData = cloneGraphData(graphData.equations, graphData.settings);
+    shape.uploadStatus = 'done';
+    shape.element.setAttribute('data-graph-shape', 'true');
+    shape.element.setAttribute('preserveAspectRatio', 'none');
+    shape.element.style.cursor = 'move';
+    shape._refreshGraphImage = () => refreshGraphImage(shape);
+    shape.adaptToBackground = () => refreshGraphImage(shape);
+    return shape;
+}
+
+function selectOnlyGraph(shape) {
+    if (!shape) return;
+
+    if (window.multiSelection?.selectedShapes?.size) {
+        window.multiSelection.clearSelection();
+    }
+    if (window.currentShape && window.currentShape !== shape
+        && typeof window.currentShape.removeSelection === 'function') {
+        window.currentShape.removeSelection();
+    }
+
+    // Generated content always lands ready to manipulate. Use the store bridge
+    // so the toolbar and legacy engine flags change together.
+    window.__sketchStoreApi?.setActiveTool?.('select');
+    window.currentShape = shape;
+    shape.selectShape?.();
+}
+
+function placedGraphSize(viewBox) {
+    const zoom = Math.max(0.001, Number(window.currentZoom) || 1);
+    const byScreen = MAX_PLACED_SCREEN_WIDTH / zoom;
+    const byViewportWidth = viewBox.width * MAX_VIEWPORT_WIDTH_RATIO;
+    const byViewportHeight = viewBox.height * MAX_VIEWPORT_HEIGHT_RATIO * (GRAPH_WIDTH / GRAPH_HEIGHT);
+    const width = Math.max(80 / zoom, Math.min(GRAPH_WIDTH, byScreen, byViewportWidth, byViewportHeight));
+    return { width, height: width * (GRAPH_HEIGHT / GRAPH_WIDTH) };
+}
 
 /**
- * Place a graph on the canvas inside a Frame.
+ * Place a graph as one editable vector-image shape, or update an existing
+ * graph in place without losing its canvas position, size, or rotation.
  */
-function renderGraphOnCanvas(equations, settings) {
-    if (!equations || equations.length === 0) return false;
-    if (!window.svg || !window.Frame) {
+function renderGraphOnCanvas(equations, settings, existingShape = null) {
+    const validEquations = (equations || []).filter((equation) => equation?.expression?.trim());
+    if (validEquations.length === 0) return false;
+    if (!window.svg || !window.ImageShape) {
         console.error('[GraphEngine] Engine not initialized');
         return false;
     }
 
-    // Generate full-size SVG
-    const svgMarkup = renderGraphSVG(equations, {
-        ...settings,
-        width: GRAPH_WIDTH,
-        height: GRAPH_HEIGHT,
-    });
-    if (!svgMarkup) return false;
+    const graphData = cloneGraphData(validEquations, settings);
 
-    // Viewport center
-    const vb = window.currentViewBox || { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
-    const vcx = vb.x + vb.width / 2;
-    const vcy = vb.y + vb.height / 2;
-
-    const frameW = GRAPH_WIDTH + 40;
-    const frameH = GRAPH_HEIGHT + 40;
-    const frameX = vcx - frameW / 2;
-    const frameY = vcy - frameH / 2;
-
-    // Build title from equations
-    const eqLabels = equations
-        .filter(eq => eq.expression && eq.expression.trim())
-        .map(eq => eq.expression.trim())
-        .slice(0, 3);
-    const title = eqLabels.length > 0
-        ? 'Graph: ' + eqLabels.join(', ')
-        : 'Graph';
-
-    // Phase 5 (issue #22): no wrapper frame. The graph is conceptually a
-    // single rendering — axes, grid, curves all interlocked — so we don't
-    // split it into per-curve shapes. Instead the graph becomes ONE
-    // first-class shape on the canvas: a `graphShape` that implements the
-    // shape API the engine relies on (contains / selectShape / etc.) so
-    // it can be selected, dragged, attached to by arrows, picked up by
-    // the rect-drag — exactly like a user-drawn shape.
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgMarkup, 'image/svg+xml');
-        const svgEl = doc.querySelector('svg');
-        if (!svgEl) return false;
-
-        const graphGroup = document.createElementNS(NS, 'g');
-        graphGroup.setAttribute('data-type', 'graph-group');
-        graphGroup.setAttribute('transform', `translate(${frameX + 20}, ${frameY + 20})`);
-
-        // Copy defs (clip paths)
-        const defs = svgEl.querySelector('defs');
-        if (defs) {
-            const defsClone = defs.cloneNode(true);
-            window.svg.querySelector('defs')?.appendChild(defsClone.firstChild) ||
-                window.svg.insertBefore(defsClone, window.svg.firstChild);
-        }
+    if (existingShape?._frameType === 'graph' && existingShape.element) {
+        hydrateGraphShape(existingShape, graphData);
+        if (!refreshGraphImage(existingShape)) return false;
+        selectOnlyGraph(existingShape);
+        window.__adaptCanvasContrast?.(
+            window.getComputedStyle(window.svg).backgroundColor || '#15111f'
+        );
+        return true;
+    }
 
-        while (svgEl.childNodes.length > 0) {
-            const child = svgEl.childNodes[0];
-            if (child.nodeName === 'defs') { svgEl.removeChild(child); continue; }
-            graphGroup.appendChild(child);
+    const viewBox = window.currentViewBox || {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+    const size = placedGraphSize(viewBox);
+    const x = viewBox.x + (viewBox.width - size.width) / 2;
+    const y = viewBox.y + (viewBox.height - size.height) / 2;
+
+    try {
+        const image = document.createElementNS(NS, 'image');
+        image.setAttribute('x', x);
+        image.setAttribute('y', y);
+        image.setAttribute('width', size.width);
+        image.setAttribute('height', size.height);
+        image.setAttribute('data-shape-x', x);
+        image.setAttribute('data-shape-y', y);
+        image.setAttribute('data-shape-width', size.width);
+        image.setAttribute('data-shape-height', size.height);
+
+        const graphShape = hydrateGraphShape(new window.ImageShape(image), graphData);
+        if (!refreshGraphImage(graphShape)) {
+            graphShape.group?.remove();
+            return false;
         }
-        window.svg.appendChild(graphGroup);
-
-        const graphShape = {
-            shapeName: 'graph',                  // first-class shapeName
-            shapeID: `graph-${Date.now().toString(36)}-${Math.floor(Math.random() * 10000)}`,
-            group: graphGroup,
-            element: graphGroup,
-            x: frameX + 20,
-            y: frameY + 20,
-            width: GRAPH_WIDTH,
-            height: GRAPH_HEIGHT,
-            rotation: 0,
-            isSelected: false,
-            _selectionRect: null,
-            _graphData: {
-                equations: equations.map(eq => ({ expression: eq.expression, color: eq.color })),
-                settings: { ...settings },
-            },
-
-            // ── Shape API the engine relies on ────────────────────────
-            contains(px, py) {
-                return px >= this.x && px <= this.x + this.width
-                    && py >= this.y && py <= this.y + this.height;
-            },
-            move(dx, dy) {
-                this.x += dx; this.y += dy;
-                this.group.setAttribute('transform', `translate(${this.x}, ${this.y})`);
-                this._updateSelectionRect();
-            },
-            selectShape() {
-                this.isSelected = true;
-                if (this._selectionRect) return;
-                const r = document.createElementNS(NS, 'rect');
-                r.setAttribute('fill', 'none');
-                r.setAttribute('stroke', '#9b7bf7');
-                r.setAttribute('stroke-width', '1.5');
-                r.setAttribute('stroke-dasharray', '4 3');
-                r.setAttribute('pointer-events', 'none');
-                window.svg.appendChild(r);
-                this._selectionRect = r;
-                this._updateSelectionRect();
-            },
-            removeSelection() {
-                this.isSelected = false;
-                if (this._selectionRect && this._selectionRect.parentNode) {
-                    this._selectionRect.parentNode.removeChild(this._selectionRect);
-                }
-                this._selectionRect = null;
-            },
-            _updateSelectionRect() {
-                if (!this._selectionRect) return;
-                const pad = 4;
-                this._selectionRect.setAttribute('x', this.x - pad);
-                this._selectionRect.setAttribute('y', this.y - pad);
-                this._selectionRect.setAttribute('width', this.width + pad * 2);
-                this._selectionRect.setAttribute('height', this.height + pad * 2);
-            },
-            updateAttachedArrows() {
-                if (typeof window.updateAttachedArrows === 'function') {
-                    window.updateAttachedArrows(this);
-                }
-            },
-            adaptToBackground(background, foreground, muted) {
-                const ensureContrast = window.__ensureCanvasContrast || ((color) => color);
-
-                this.group.querySelectorAll('rect').forEach((rect) => {
-                    const fill = rect.getAttribute('fill');
-                    const stroke = rect.getAttribute('stroke');
-                    if (fill && fill !== 'none') rect.setAttribute('fill', background);
-                    if (stroke && stroke !== 'none') {
-                        rect.setAttribute('stroke', muted);
-                        rect.setAttribute('stroke-opacity', '0.45');
-                    }
-                });
-
-                this.group.querySelectorAll('line').forEach((line) => {
-                    const width = Number.parseFloat(line.getAttribute('stroke-width') || '1');
-                    line.setAttribute('stroke', foreground);
-                    line.setAttribute('stroke-opacity', width <= 0.5 ? '0.18' : '0.5');
-                });
-
-                this.group.querySelectorAll('path[stroke]').forEach((path) => {
-                    const original = path.dataset.graphColor || path.getAttribute('stroke');
-                    if (!original || original === 'none') return;
-                    path.dataset.graphColor = original;
-                    path.setAttribute('stroke', ensureContrast(original, background, 3));
-                });
-
-                this.group.querySelectorAll('circle[fill]').forEach((circle) => {
-                    const original = circle.dataset.graphColor || circle.getAttribute('fill');
-                    if (!original || original === 'none') return;
-                    circle.dataset.graphColor = original;
-                    circle.setAttribute('fill', ensureContrast(original, background, 3));
-                });
-
-                this.group.querySelectorAll('text').forEach((text) => {
-                    const original = text.dataset.graphColor || text.getAttribute('fill');
-                    if (original) text.dataset.graphColor = original;
-                    const isAxisLabel = !original || ['#8b949e', '#62627a'].includes(original.toLowerCase());
-                    text.setAttribute('fill', isAxisLabel
-                        ? muted
-                        : ensureContrast(original, background, 4.5));
-                });
-            },
-        };
 
         window.shapes.push(graphShape);
-        if (window.pushCreateAction) window.pushCreateAction(graphShape);
-
-        // Auto-select so the user sees something landed.
-        window.currentShape = graphShape;
-        graphShape.selectShape();
+        window.pushCreateAction?.(graphShape);
+        selectOnlyGraph(graphShape);
         window.__adaptCanvasContrast?.(
-            window.getComputedStyle(window.svg).backgroundColor || '#13171C'
+            window.getComputedStyle(window.svg).backgroundColor || '#15111f'
         );
-    } catch (err) {
-        console.error('[GraphEngine] SVG insertion failed:', err);
+        return true;
+    } catch (error) {
+        console.error('[GraphEngine] SVG insertion failed:', error);
         return false;
     }
-
-    return true;
 }
 
-/**
- * Initialize the graph engine — expose bridge functions on window.
- */
+/** Initialize graph bridges used by the modal and scene restoration. */
 export function initGraphEngine() {
-    window.__graphPreview = (equations, settings) => {
-        return renderGraphPreviewSVG(equations, settings);
-    };
+    window.__graphPreview = (equations, settings) => renderGraphPreviewSVG(equations, settings);
     window.__graphRenderer = renderGraphOnCanvas;
-    window.__graphParser = (expr) => {
-        const fn = parseExpression(expr);
-        return fn ? true : false;
-    };
+    window.__hydrateGraphShape = hydrateGraphShape;
+    window.__graphParser = (expression) => Boolean(parseExpression(expression));
     window.__graphValidate = isValidExpression;
     window.__graphColors = GRAPH_COLORS;
 }

package/src/core/SceneSerializer.js

@@ -180,6 +180,14 @@ function serializeShape(shape) {
                 width: shape.width, height: shape.height,
                 rotation: shape.rotation,
                 href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || '',
+                sizeBytes: Number(el.__fileSize || el.getAttribute('data-file-size')) || 0,
+                cloudinaryId: el.getAttribute('data-cloudinary-id') || null,
+                storageProvider: el.getAttribute('data-storage-provider') || 'platform_cloudinary',
+                storageCloudName: el.getAttribute('data-storage-cloud-name') || null,
+                frameType: shape._frameType || null,
+                graphData: shape._frameType === 'graph' && shape._graphData
+                    ? cloneOptions(shape._graphData)
+                    : null,
             };
         }
 
@@ -300,10 +308,27 @@ function deserializeShape(data) {
             imgEl.setAttribute('height', data.height);
             imgEl.setAttribute('href', data.href);
             imgEl.setAttribute('preserveAspectRatio', 'none');
+            if (data.sizeBytes) {
+                imgEl.__fileSize = Number(data.sizeBytes) || 0;
+                imgEl.setAttribute('data-file-size', String(imgEl.__fileSize));
+                window.__roomImageBytesUsed = (window.__roomImageBytesUsed || 0) + imgEl.__fileSize;
+            }
+            if (data.cloudinaryId) imgEl.setAttribute('data-cloudinary-id', data.cloudinaryId);
+            if (data.storageProvider) imgEl.setAttribute('data-storage-provider', data.storageProvider);
+            if (data.storageCloudName) imgEl.setAttribute('data-storage-cloud-name', data.storageCloudName);
             svgEl.appendChild(imgEl);
             const shape = new ImageShape(imgEl);
             if (data.rotation) shape.rotation = data.rotation;
             if (data.shapeID) shape.shapeID = data.shapeID;
+            if (data.frameType === 'graph' && data.graphData) {
+                if (typeof window.__hydrateGraphShape === 'function') {
+                    window.__hydrateGraphShape(shape, data.graphData);
+                } else {
+                    shape._frameType = 'graph';
+                    shape._graphData = cloneOptions(data.graphData);
+                    shape.element.setAttribute('data-graph-shape', 'true');
+                }
+            }
             return shape;
         }
 
@@ -387,6 +412,7 @@ export function loadScene(sceneData) {
     // Clear current scene
     const svgEl = window.svg;
     if (!svgEl) return false;
+    window.__roomImageBytesUsed = 0;
 
     // Remove all existing shape DOM elements
     const existingShapes = window.shapes || [];

package/src/core/Selection.js

@@ -2,7 +2,7 @@
 // Multi-selection system - copied from selection.js
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
-import { pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
+import { pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
 import { calculateSnap, clearSnapGuides } from './SnapGuides.js';
 import { registerRotationAnchor } from './ScreenSpaceControls.js';
 
@@ -1943,6 +1943,11 @@ function deleteSelectedShapes() {
 function frameSelectedShapes() {
     if (multiSelection.selectedShapes.size < 2) return;
 
+    const shapesToFrame = Array.from(multiSelection.selectedShapes);
+    // Frames cannot be nested through the Frame it action, and objects that
+    // already belong to a frame must first be detached explicitly.
+    if (shapesToFrame.some(shape => shape?.shapeName === 'frame' || shape?.parentFrame)) return;
+
     const bounds = multiSelection.getBounds();
     if (!bounds) return;
 
@@ -1962,17 +1967,7 @@ function frameSelectedShapes() {
     const frame = new FrameClass(fx, fy, fw, fh);
     shapes.push(frame);
 
-    // Push undo action for frame creation
-    if (window.historyStack) {
-        window.historyStack.push({
-            type: window.ACTION_CREATE || 'create',
-            shape: frame,
-            shapeName: 'frame'
-        });
-    }
-
     // Add each selected shape into the frame
-    const shapesToFrame = Array.from(multiSelection.selectedShapes);
     multiSelection.clearSelection();
 
     for (const shape of shapesToFrame) {
@@ -1996,6 +1991,12 @@ function frameSelectedShapes() {
         }
     }
 
+    // Record after reordering so redo restores the same hit-test/layer index.
+    pushCreateAction(frame, {
+        frameCreation: true,
+        containedShapes: shapesToFrame
+    });
+
     // Select the new frame
     if (typeof frame.selectFrame === 'function') {
         frame.selectFrame();

package/src/core/UndoRedo.js

@@ -34,11 +34,17 @@ export function updateSelectedElement(element) {
 }
 
 // Call this after creating a new shape (e.g., Rectangle)
-export function pushCreateAction(shape) {
-    undoStack.push({
+export function pushCreateAction(shape, meta = null) {
+    const action = {
         type: 'create',
         shape: shape
-    });
+    };
+    if (meta?.frameCreation && shape?.shapeName === 'frame') {
+        action.frameCreation = true;
+        action.containedShapes = [...(meta.containedShapes || shape.containedShapes || [])];
+        action.shapeIndex = Array.isArray(shapes) ? shapes.indexOf(shape) : -1;
+    }
+    undoStack.push(action);
     
     // Clear redo stack when new action is performed
     redoStack.length = 0;
@@ -567,6 +573,23 @@ export function undo() {
     }
 
     if (action.type === 'create') {
+    if (action.frameCreation && action.shape.shapeName === 'frame') {
+        // Treat a manually-created frame and its initial membership as one
+        // atomic action. Children remain on the canvas when the frame is
+        // undone and are clipped back into it on redo.
+        for (const child of action.containedShapes || []) {
+            if (child?.parentFrame === action.shape) action.shape.removeShapeFromFrame(child);
+        }
+        if (currentShape === action.shape) {
+            action.shape.removeSelection?.();
+            currentShape = null;
+        }
+        const idx = shapes.indexOf(action.shape);
+        if (idx !== -1) shapes.splice(idx, 1);
+        action.shape.group?.remove();
+        action.shape.clipGroup?.remove();
+        action.shape.clipPath?.remove();
+    } else
     if (action.shape.type === 'text') {
         // Handle text creation undo
         if (action.shape.element && action.shape.element.parentNode) {
@@ -1049,6 +1072,27 @@ export function redo() {
     }
 
     if (action.type === 'create') {
+    if (action.frameCreation && action.shape.shapeName === 'frame') {
+        const frame = action.shape;
+        let defs = svg?.querySelector('defs');
+        if (!defs && svg) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            svg.appendChild(defs);
+        }
+        if (defs && frame.clipPath && !frame.clipPath.parentNode) defs.appendChild(frame.clipPath);
+        if (svg && frame.group && !frame.group.parentNode) svg.appendChild(frame.group);
+        if (svg && frame.clipGroup && !frame.clipGroup.parentNode) svg.appendChild(frame.clipGroup);
+        if (shapes.indexOf(frame) === -1) {
+            const index = action.shapeIndex >= 0 ? Math.min(action.shapeIndex, shapes.length) : shapes.length;
+            shapes.splice(index, 0, frame);
+        }
+        frame.containedShapes = [];
+        frame.draw();
+        frame.updateClipPath();
+        for (const child of action.containedShapes || []) {
+            if (child && shapes.includes(child)) frame.addShapeToFrame(child);
+        }
+    } else
     if (action.shape.type === 'text') {
         // Handle text creation redo
         if (svg) {