@elixpo/lixsketch 5.4.6 → 5.5.0

package/src/tools/arrowTool.js

@@ -4,13 +4,15 @@ import { pushCreateAction, pushDeleteAction, pushOptionsChangeAction, pushTransf
 import { calculateSnap, clearSnapGuides } from '../core/SnapGuides.js';
 
 
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
+
 let arrowStartX, arrowStartY;
 let currentArrow = null;
 let isResizing = false;
 let isDragging = false;
 let activeAnchor = null;
 let isDrawingArrow = false;
-let arrowStrokeColor = "#fff";
+let arrowStrokeColor = null;
 let arrowStrokeThickness = 2;
 let arrowOutlineStyle = "solid";
 let arrowCurved = "straight";
@@ -68,7 +70,7 @@ const handleMouseDown = (e) => {
     if (isArrowToolActive) {
         isDrawingArrow = true;
         currentArrow = new Arrow({ x, y }, { x, y }, {
-            stroke: arrowStrokeColor,
+            stroke: arrowStrokeColor ?? getThemeStroke(),
             strokeWidth: arrowStrokeThickness,
             arrowOutlineStyle: arrowOutlineStyle,
             arrowHeadStyle: arrowHeadStyle,
@@ -226,6 +228,27 @@ const handleMouseMove = (e) => {
         startX = x;
         startY = y;
 
+        // Issue #24 bug #4: track containing frame during drag of an
+        // existing arrow so mouseUp re-parents correctly. Without this
+        // hoveredFrameArrow stays null and the arrow is detached the
+        // moment the user nudges it inside its own parent frame.
+        let newHover = null;
+        for (const f of shapes) {
+            if (f.shapeName !== 'frame') continue;
+            if (f === currentShape) continue;
+            if (typeof f.isShapeInFrame === 'function' && f.isShapeInFrame(currentShape)) {
+                newHover = f;
+                break;
+            }
+        }
+        if (hoveredFrameArrow && hoveredFrameArrow !== newHover && typeof hoveredFrameArrow.removeHighlight === 'function') {
+            hoveredFrameArrow.removeHighlight();
+        }
+        if (newHover && newHover !== hoveredFrameArrow && typeof newHover.highlightFrame === 'function') {
+            newHover.highlightFrame();
+        }
+        hoveredFrameArrow = newHover;
+
         // Snap guides
         if (window.__sketchStoreApi && window.__sketchStoreApi.getState().snapToObjects) {
             const snap = calculateSnap(currentShape, e.shiftKey, e.clientX, e.clientY);
@@ -319,10 +342,13 @@ if (isDrawingArrow && currentArrow) {
 }
 
 if (isDragging && dragOldPosArrow && currentShape) {
+    // Issue #34 bug #2: containment transfer happens later in this block,
+    // so currentShape.parentFrame is still the OLD frame here. hoveredFrameArrow
+    // tracks the actual destination during mousemove — use that as the truth.
     const newPos = {
         startPoint: { x: currentShape.startPoint.x, y: currentShape.startPoint.y },
         endPoint: { x: currentShape.endPoint.x, y: currentShape.endPoint.y },
-        parentFrame: currentShape.parentFrame  // Add this line
+        parentFrame: hoveredFrameArrow || null,
     };
     const oldPos = {
         ...dragOldPosArrow,
@@ -578,4 +604,4 @@ export {
     handleMouseUp as handleMouseUpArrow,
     cleanupAttachments,
     updateAttachedArrows
-};
+};

package/src/tools/circleTool.js

@@ -4,6 +4,8 @@ import { pushCreateAction, pushDeleteAction, pushOptionsChangeAction, pushTransf
 import { cleanupAttachments } from './arrowTool.js';
 import { calculateSnap, clearSnapGuides } from '../core/SnapGuides.js';
 
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
+
 let isDrawingCircle = false;
 let isDraggingShapeCircle = false;
 let isResizingShapeCircle = false;
@@ -16,7 +18,7 @@ const rc = rough.svg(svg);
 let startX, startY;
 
 
-let circleStrokecolor = "#fff";
+let circleStrokecolor = null;
 let circleBackgroundColor = "transparent";
 let circleFillStyleValue = "none";
 let circleStrokeThicknes = 2;
@@ -83,7 +85,7 @@ const handleMouseDown = (e) => {
             disableAllSideBars();
         }
         let initialOptions = {
-            stroke: circleStrokecolor,
+            stroke: circleStrokecolor ?? getThemeStroke(),
             fill: circleBackgroundColor,
             fillStyle: circleFillStyleValue,
             strokeWidth: circleStrokeThicknes,
@@ -261,6 +263,25 @@ const handleMouseMove = (e) => {
         } else {
             clearSnapGuides();
         }
+
+        // Issue #24 bug #4: track containing frame during drag (see same
+        // block in rectangleTool for the rationale).
+        let newHover = null;
+        for (const f of shapes) {
+            if (f.shapeName !== 'frame') continue;
+            if (f === currentShape) continue;
+            if (typeof f.isShapeInFrame === 'function' && f.isShapeInFrame(currentShape)) {
+                newHover = f;
+                break;
+            }
+        }
+        if (hoveredFrameCircle && hoveredFrameCircle !== newHover && typeof hoveredFrameCircle.removeHighlight === 'function') {
+            hoveredFrameCircle.removeHighlight();
+        }
+        if (newHover && newHover !== hoveredFrameCircle && typeof newHover.highlightFrame === 'function') {
+            newHover.highlightFrame();
+        }
+        hoveredFrameCircle = newHover;
     }
        
     else if(isResizingShapeCircle && currentShape && currentShape.isSelected)
@@ -374,13 +395,16 @@ const handleMouseUp = (e) => {
     }
     
     if((isDraggingShapeCircle || isResizingShapeCircle || isRotatingShapeCircle) && dragOldPosCircle && currentShape) {
-        const newPos = { 
-            x: currentShape.x, 
-            y: currentShape.y, 
-            rx: currentShape.rx, 
-            ry: currentShape.ry, 
+        // Issue #34 bug #2: see rectangleTool — record the hovered frame
+        // as the destination, not the stale `parentFrame` (containment
+        // transfer happens later in this handler).
+        const newPos = {
+            x: currentShape.x,
+            y: currentShape.y,
+            rx: currentShape.rx,
+            ry: currentShape.ry,
             rotation: currentShape.rotation,
-            parentFrame: currentShape.parentFrame 
+            parentFrame: isDraggingShapeCircle ? (hoveredFrameCircle || null) : currentShape.parentFrame,
         };
         const oldPos = {
             ...dragOldPosCircle,
@@ -616,4 +640,4 @@ export {
     handleMouseDown as handleMouseDownCircle,
     handleMouseMove as handleMouseMoveCircle,
     handleMouseUp as handleMouseUpCircle,
-}
+}

package/src/tools/codeTool.js

@@ -11,9 +11,11 @@ import {
 } from '../core/UndoRedo.js';
 import { cleanupAttachments, updateAttachedArrows } from './arrowTool.js';
 
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
+
 let codeTextSize = "25px";
 let codeTextFont = "lixCode";
-let codeTextColor = "#fff";
+let codeTextColor = null;
 let codeTextAlign = "left";
 let codeLanguage = "auto";
 
@@ -118,7 +120,7 @@ function addCodeBlock(event) {
 
     codeElement.setAttribute("x", 0);
     codeElement.setAttribute("y", 0);
-    codeElement.setAttribute("fill", codeTextColor);
+    codeElement.setAttribute("fill", codeTextColor ?? getThemeStroke());
     codeElement.setAttribute("font-size", codeTextSize);
     codeElement.setAttribute("font-family", codeTextFont);
     codeElement.setAttribute("text-anchor", textAlignElement);
@@ -131,7 +133,7 @@ function addCodeBlock(event) {
     gElement.setAttribute("data-y", y);
     codeElement.setAttribute("data-initial-size", codeTextSize);
     codeElement.setAttribute("data-initial-font", codeTextFont);
-    codeElement.setAttribute("data-initial-color", codeTextColor);
+    codeElement.setAttribute("data-initial-color", codeTextColor ?? getThemeStroke());
     codeElement.setAttribute("data-initial-align", codeTextAlign);
     codeElement.setAttribute("data-language", codeLanguage);
     codeElement.setAttribute("data-type", "code");

package/src/tools/frameTool.js

@@ -61,9 +61,21 @@ const handleMouseDown = (e) => {
                         }
                     }
                 }
-                // If a contained shape was clicked, don't select the frame — let the
-                // EventDispatcher fall through to shape-specific handlers
-                if (clickedContainedShape) return;
+                // If a contained shape was clicked, don't select the frame —
+                // and crucially, clear `currentShape` so the EventDispatcher's
+                // `if (handled && prevShape && !currentShape) handled=false` gate
+                // triggers and the dispatcher falls through to shape-specific
+                // handlers. Without this clear, the dispatcher returns with
+                // `handled=true` and the child shape is never selected (Issue
+                // #22, bug #2).
+                if (clickedContainedShape) {
+                    if (currentShape && currentShape.shapeName === 'frame'
+                        && typeof currentShape.removeSelection === 'function') {
+                        currentShape.removeSelection();
+                    }
+                    currentShape = null;
+                    return;
+                }
 
                 if (currentShape && currentShape !== clickedFrame) {
                     currentShape.removeSelection();
@@ -216,12 +228,40 @@ Frame.prototype.isNearAnchor = function(x, y) {
 // Delete functionality
 function deleteCurrentFrame() {
     if (currentShape && currentShape.shapeName === 'frame') {
-        const idx = shapes.indexOf(currentShape);
+        const frame = currentShape;
+        const isDiagramFrame = !!frame._diagramType;
+
+        // Issue #24 bug #7: regular frame → orphan children + snapshot
+        // (mirrors deleteSelectedShapes / EngineShortcuts).
+        let childSnapshot = null;
+        if (!isDiagramFrame) {
+            childSnapshot = [...(frame.containedShapes || [])];
+            for (const child of childSnapshot) {
+                if (!child || child === frame) continue;
+                const el = child.group || child.element;
+                if (el) {
+                    if (frame.clipGroup && el.parentNode === frame.clipGroup) frame.clipGroup.removeChild(el);
+                    if (window.svg && el.parentNode !== window.svg) window.svg.appendChild(el);
+                }
+                child.parentFrame = null;
+                delete child.isBeingMovedByFrame;
+            }
+            frame.containedShapes = [];
+        }
+
+        const idx = shapes.indexOf(frame);
         if (idx !== -1) shapes.splice(idx, 1);
-        if (currentShape.group.parentNode) {
-            currentShape.group.parentNode.removeChild(currentShape.group);
+
+        if (!isDiagramFrame) {
+            if (frame.group && frame.group.parentNode) frame.group.parentNode.removeChild(frame.group);
+            if (frame.clipGroup && frame.clipGroup.parentNode) frame.clipGroup.parentNode.removeChild(frame.clipGroup);
+            if (frame.clipPath && frame.clipPath.parentNode) frame.clipPath.parentNode.removeChild(frame.clipPath);
+        } else if (frame.group && frame.group.parentNode) {
+            frame.group.parentNode.removeChild(frame.group);
         }
-        pushDeleteAction(currentShape);
+
+        if (childSnapshot) pushDeleteAction(frame, { childSnapshot });
+        else pushDeleteAction(frame);
         currentShape = null;
     }
 }

package/src/tools/freehandTool.js

@@ -4,6 +4,8 @@ import { pushCreateAction, pushDeleteAction, pushOptionsChangeAction, pushTransf
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { calculateSnap, clearSnapGuides } from '../core/SnapGuides.js';
 
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
+
 // Expose updateArrowsForShape globally so FreehandStroke.updateAttachedArrows() can call it
 // (FreehandStroke.js is a separate module and cannot import freehandTool's local bindings)
 window.__updateArrowsForShape = updateArrowsForShape;
@@ -13,7 +15,7 @@ const strokeThicknesses = document.querySelectorAll(".strokeThickness span");
 const strokeStyles = document.querySelectorAll(".strokeStyleSpan");
 const strokeTapers = document.querySelectorAll(".strokeTaperSpan");
 const strokeRoughnesses = document.querySelectorAll(".strokeRoughnessSpan");
-let strokeColor = "#fff";
+let strokeColor = null;
 let strokeThickness = 2;
 let strokeStyleValue = "solid";
 let strokeThinning = 0;
@@ -140,7 +142,7 @@ function handleMouseDown(e) {
         lastTime = Date.now();
 
         currentStroke = new FreehandStroke(points, {
-            stroke: strokeColor,
+            stroke: strokeColor ?? getThemeStroke(),
             strokeWidth: strokeThickness
         });
 
@@ -411,9 +413,15 @@ function handleMouseUp(e) {
             ...dragOldPosStroke,
             parentFrame: draggedShapeInitialFrameStroke
         };
+        // Issue #34 bug #2: for drag, hoveredFrameStroke is the actual
+        // destination — currentShape.parentFrame at this point is still
+        // the OLD frame. Resize / rotate don't track hover, fall back to
+        // the shape's own parent.
         const newPosForUndo = {
             ...newPos,
-            parentFrame: currentShape.parentFrame
+            parentFrame: isDraggingStroke
+                ? (hoveredFrameStroke || null)
+                : currentShape.parentFrame,
         };
         
         const frameChanged = oldPos.parentFrame !== newPosForUndo.parentFrame;
@@ -659,4 +667,4 @@ export
     handleMouseDown as handleFreehandMouseDown,
     handleMouseMove as handleFreehandMouseMove,
     handleMouseUp as handleFreehandMouseUp,
-}
+}

package/src/tools/iconTool.js

@@ -1008,9 +1008,15 @@ function stopInteracting() {
             ...oldPos,
             parentFrame: draggedShapeInitialFrameIcon
         };
+        // Issue #34 bug #2: for drag, hoveredFrameIcon tracks the actual
+        // destination — currentShape.parentFrame is still the OLD frame.
+        // Resize / rotate don't track hover, so fall back to whatever the
+        // shape itself reports (parent doesn't change for those gestures).
         const newPosWithFrame = {
             ...newPos,
-            parentFrame: iconShape ? iconShape.parentFrame : null
+            parentFrame: isDragging
+                ? (hoveredFrameIcon || null)
+                : (iconShape ? iconShape.parentFrame : null),
         };
 
         const stateChanged = newPos.x !== oldPos.x || newPos.y !== oldPos.y ||

package/src/tools/imageTool.js

@@ -3,6 +3,7 @@
 import { pushCreateAction, pushDeleteAction, pushTransformAction, pushFrameAttachmentAction } from '../core/UndoRedo.js';
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { compressImage } from '../utils/imageCompressor.js';
+import { isAllowedImage, IMAGE_ACCEPT_ATTR } from '../utils/allowedImageTypes.js';
 
 
 let isDraggingImage = false;
@@ -133,7 +134,7 @@ document.getElementById("importImage")?.addEventListener('click', () => {
     // Create a file input element
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*'; // Accept all image types
+    fileInput.accept = IMAGE_ACCEPT_ATTR; // Static images only — see allowedImageTypes.js
     fileInput.style.display = 'none'; // Hide the input element
     
     // Add the input to the document temporarily
@@ -194,13 +195,16 @@ const loadHardcodedImage = (imagePath) => {
     img.src = imagePath;
 };
 
-const handleImageUpload = (file) => {
+const handleImageUpload = async (file) => {
     if (!file || !isImageToolActive) return;
 
-    // Validate file type
-    if (!file.type.startsWith('image/')) {
-        console.error('Selected file is not an image');
-        alert('Please select a valid image file.');
+    // Validate file type against the canonical allowlist (avif, jpeg, jpg,
+    // png, bmp, svg, webp). Animated GIF, HEIC, TIFF, video, audio, and
+    // arbitrary files are rejected here.
+    if (!isAllowedImage(file)) {
+        console.error('Rejected file type:', file.type, file.name);
+        alert('Unsupported file type. Allowed: AVIF, JPEG, PNG, BMP, SVG, WebP.');
+        isImageToolActive = false;
         return;
     }
 
@@ -222,26 +226,50 @@ const handleImageUpload = (file) => {
 
     console.log('Processing image file:', file.name, 'Size:', file.size, 'Type:', file.type);
 
-    const reader = new FileReader();
-    
-    // Store file size for room limit tracking
-    window.__pendingImageFileSize = file.size;
+    // Read → optionally compress → place. We compress client-side BEFORE
+    // placement so that consumers without an upload pipeline (VS Code
+    // extension, offline npm usage) still embed a compressed data URL
+    // rather than the original. SVGs are passed through unchanged because
+    // rasterizing them would destroy their vector fidelity.
+    try {
+        const rawDataUrl = await readFileAsDataUrl(file);
+        const isSvg = (file.type || '').toLowerCase() === 'image/svg+xml'
+            || (file.name || '').toLowerCase().endsWith('.svg');
+
+        let placedDataUrl = rawDataUrl;
+        let placedSize = file.size;
+        if (!isSvg) {
+            try {
+                const compressed = await compressImage(rawDataUrl);
+                if (compressed?.dataUrl) {
+                    placedDataUrl = compressed.dataUrl;
+                    placedSize = compressed.compressedSize || placedSize;
+                }
+            } catch (err) {
+                console.warn('[ImageTool] Pre-placement compression failed, using raw:', err);
+            }
+        }
 
-    reader.onload = (e) => {
-        imageToPlace = e.target.result;
+        window.__pendingImageFileSize = placedSize;
+        imageToPlace = placedDataUrl;
         isDraggingImage = true;
-        console.log('Image loaded and ready to place');
-    };
-    
-    reader.onerror = (error) => {
-        console.error('Error reading file:', error);
+        console.log('Image loaded and ready to place', { size: placedSize, isSvg });
+    } catch (err) {
+        console.error('Error reading file:', err);
         alert('Error reading the image file. Please try again.');
         isImageToolActive = false;
-    };
-    
-    reader.readAsDataURL(file);
+    }
 };
 
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = (err) => reject(err);
+        reader.readAsDataURL(file);
+    });
+}
+
 // Add coordinate conversion function like in other tools
 function getSVGCoordsFromMouse(e) {
     const viewBox = svg.viewBox.baseVal;
@@ -1089,9 +1117,15 @@ function stopInteracting() {
             ...oldPos,
             parentFrame: draggedShapeInitialFrameImage
         };
+        // Issue #34 bug #2: for drag, hoveredFrameImage tracks the actual
+        // destination — imageShape.parentFrame is still the OLD frame here.
+        // Resize / rotate don't move between frames, so fall back to the
+        // shape's own parent for those.
         const newPosWithFrame = {
             ...newPos,
-            parentFrame: imageShape ? imageShape.parentFrame : null
+            parentFrame: isDragging
+                ? (hoveredFrameImage || null)
+                : (imageShape ? imageShape.parentFrame : null),
         };
 
         // Only push transform action if something actually changed
@@ -1286,7 +1320,7 @@ window.openImageFilePicker = function() {
     isImageToolActive = true;
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*';
+    fileInput.accept = IMAGE_ACCEPT_ATTR;
     fileInput.style.display = 'none';
     document.body.appendChild(fileInput);
 

package/src/tools/lineTool.js

@@ -4,12 +4,14 @@ import { pushCreateAction, pushDeleteAction, pushOptionsChangeAction, pushTransf
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { calculateSnap, clearSnapGuides } from '../core/SnapGuides.js';
 
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
+
 let isDrawingLine = false;
 let currentLine = null;
 let lineStartX = 0;      
 let lineStartY = 0;      
 let currentLineGroup = null;    
-let lineColor = "#fff";
+let lineColor = null;
 let lineStrokeWidth = 3;
 let lineStrokeStyle = "solid";
 let lineEdgeType = 1;
@@ -71,7 +73,7 @@ const handleMouseDown = (e) => {
             { x, y },
             { x, y },
             {
-                stroke: lineColor,
+                stroke: lineColor ?? getThemeStroke(),
                 strokeWidth: lineStrokeWidth,
                 roughness: lineSktetchRate,
                 bowing: lineEdgeType,
@@ -238,6 +240,26 @@ const handleMouseMove = (e) => {
         startX = x;
         startY = y;
 
+        // Issue #24 bug #4: track containing frame during existing-line
+        // drag so mouseUp re-parents from current geometry, not from a
+        // stale hoveredFrameLine.
+        let newHover = null;
+        for (const f of shapes) {
+            if (f.shapeName !== 'frame') continue;
+            if (f === currentShape) continue;
+            if (typeof f.isShapeInFrame === 'function' && f.isShapeInFrame(currentShape)) {
+                newHover = f;
+                break;
+            }
+        }
+        if (hoveredFrameLine && hoveredFrameLine !== newHover && typeof hoveredFrameLine.removeHighlight === 'function') {
+            hoveredFrameLine.removeHighlight();
+        }
+        if (newHover && newHover !== hoveredFrameLine && typeof newHover.highlightFrame === 'function') {
+            newHover.highlightFrame();
+        }
+        hoveredFrameLine = newHover;
+
         // Snap guides
         if (window.__sketchStoreApi && window.__sketchStoreApi.getState().snapToObjects) {
             const snap = calculateSnap(currentShape, e.shiftKey, e.clientX, e.clientY);
@@ -299,11 +321,13 @@ const handleMouseUp = (e) => {
     }
     
     if (isDraggingLine && dragOldPosLine && currentShape) {
+        // Issue #34 bug #2: use hoveredFrameLine (actual destination) instead
+        // of the stale parentFrame — containment transfer hasn't happened yet.
         const newPos = {
             startPoint: { x: currentShape.startPoint.x, y: currentShape.startPoint.y },
             endPoint: { x: currentShape.endPoint.x, y: currentShape.endPoint.y },
             controlPoint: currentShape.controlPoint ? { x: currentShape.controlPoint.x, y: currentShape.controlPoint.y } : null,
-            parentFrame: currentShape.parentFrame
+            parentFrame: hoveredFrameLine || null,
         };
         const oldPos = {
             ...dragOldPosLine,

package/src/tools/rectangleTool.js

@@ -16,7 +16,16 @@ let startRotationMouseAngleSquare = 0;
 let startShapeRotationSquare = 0;
 const rc = rough.svg(svg); 
 let startX, startY;
-let squareStrokecolor = "#fff";
+// Issue #38 follow-up: null sentinel means "use theme default at draw
+// time". The legacy `"#fff"` literal was invisible on the light canvas;
+// reading the body's `theme-dark` class lets the same code produce a
+// readable stroke in either mode. As soon as the user picks a colour
+// from the sidebar this var holds that value verbatim.
+function getThemeStroke() {
+    if (typeof document === 'undefined') return '#fff';
+    return document.body && document.body.classList.contains('theme-dark') ? '#fff' : '#1a1a2e';
+}
+let squareStrokecolor = null;
 let squareBackgroundColor = "transparent";
 let squareFillStyleValue = "none";
 let squareStrokeThicknes = 2;
@@ -76,7 +85,7 @@ const handleMouseDownRect = (e) => {
         }
 
         let initialOptions = {
-            stroke: squareStrokecolor,
+            stroke: squareStrokecolor ?? getThemeStroke(),
             fill: squareBackgroundColor,
             fillStyle: squareFillStyleValue,
             strokeWidth: squareStrokeThicknes,
@@ -241,6 +250,28 @@ const handleMouseMoveRect = (e) => {
         } else {
             clearSnapGuides();
         }
+
+        // Issue #24 bug #4: track the actual containing frame at every
+        // move so the mouseUp logic re-parents correctly. Without this
+        // hoveredFrame stays at null for existing-shape drags and the
+        // shape is detached the moment the user nudges it by 1 px inside
+        // its own parent frame.
+        let newHover = null;
+        for (const f of shapes) {
+            if (f.shapeName !== 'frame') continue;
+            if (f === currentShape) continue;
+            if (typeof f.isShapeInFrame === 'function' && f.isShapeInFrame(currentShape)) {
+                newHover = f;
+                break;
+            }
+        }
+        if (hoveredFrame && hoveredFrame !== newHover && typeof hoveredFrame.removeHighlight === 'function') {
+            hoveredFrame.removeHighlight();
+        }
+        if (newHover && newHover !== hoveredFrame && typeof newHover.highlightFrame === 'function') {
+            newHover.highlightFrame();
+        }
+        hoveredFrame = newHover;
     } else if (isResizingShapeSquare && currentShape && currentShape.isSelected && resizingAnchorIndexSquare !== null) {
         currentShape.updatePosition(resizingAnchorIndexSquare, mouseX, mouseY);
         currentShape._skipAnchors = true;
@@ -341,13 +372,19 @@ const handleMouseUpRect = (e) => {
     }
 
     if ((isDraggingShapeSquare || isResizingShapeSquare || isRotatingShapeSquare) && dragOldPosSquare && currentShape) {
-        const newPos = { 
-            x: currentShape.x, 
-            y: currentShape.y, 
-            width: currentShape.width, 
-            height: currentShape.height, 
+        // Issue #34 bug #2: for drag operations the actual frame transfer
+        // happens AFTER this mouseUp block — so `currentShape.parentFrame`
+        // at this point still points at the OLD frame. Use the hovered
+        // frame (tracked during mousemove) as the authoritative new
+        // destination instead, so the undo action records a real
+        // attachment delta and Ctrl+Z re-attaches the shape correctly.
+        const newPos = {
+            x: currentShape.x,
+            y: currentShape.y,
+            width: currentShape.width,
+            height: currentShape.height,
             rotation: currentShape.rotation,
-            parentFrame: currentShape.parentFrame
+            parentFrame: isDraggingShapeSquare ? (hoveredFrame || null) : currentShape.parentFrame,
         };
         const oldPos = {
             ...dragOldPosSquare,