@elixpo/lixsketch 5.4.7 → 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

@@ -1117,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

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,

package/src/tools/textTool.js

@@ -11,6 +11,8 @@ import {
     updateSelectedElement
 } 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"; }
 import {
     addCodeBlock,
     wrapCodeElement,
@@ -27,7 +29,7 @@ import {
 
 let textSize = "30px";
 let textFont = "lixFont";
-let textColor = "#fff";
+let textColor = null;
 let textAlign = "left";
 
 let textColorOptions = document.querySelectorAll(".textColorSpan");
@@ -118,20 +120,27 @@ function addText(event) {
 
     textElement.setAttribute("x", 0);
     textElement.setAttribute("y", 0);
-    textElement.setAttribute("fill", textColor);
+    textElement.setAttribute("fill", textColor ?? getThemeStroke());
     textElement.setAttribute("font-size", textSize);
     textElement.setAttribute("font-family", textFont);
     textElement.setAttribute("text-anchor", textAlignElement);
     textElement.setAttribute("cursor", "default");
     textElement.setAttribute("white-space", "pre");
     textElement.setAttribute("dominant-baseline", "hanging");
+    // Issue #34 bug #5b: SVG <text> only fires pointer events on the
+    // painted glyphs by default — so a click between letters or in the
+    // padding around the text never bubbles to the <g> and the selection
+    // tool can't pick the shape up. `bounding-box` extends the hit area
+    // to the entire bounding box (SVG 2; supported in Chromium/WebKit/
+    // Firefox), which is what every other shape tool relies on.
+    textElement.setAttribute("pointer-events", "bounding-box");
     textElement.textContent = "";
 
     gElement.setAttribute("data-x", x);
     gElement.setAttribute("data-y", y);
     textElement.setAttribute("data-initial-size", textSize);
     textElement.setAttribute("data-initial-font", textFont);
-    textElement.setAttribute("data-initial-color", textColor);
+    textElement.setAttribute("data-initial-color", textColor ?? getThemeStroke());
     textElement.setAttribute("data-initial-align", textAlign);
     textElement.setAttribute("data-type", "text");
     gElement.appendChild(textElement);
@@ -247,7 +256,12 @@ function makeTextEditable(textElement, groupElement) {
     input.style.lineHeight = "1.2em";
     input.style.textAlign = currentAnchor === "middle" ? "center" : currentAnchor === "end" ? "right" : "left";
     input.style.backgroundColor = "transparent";
-    input.style.border = "none";
+    // Issue #34 bug #5a: dashed creation outline that grows with the
+    // text — same visual cue the frame tool uses while drawing. Inset
+    // padding-box border so the dashes follow the textarea size as the
+    // user types instead of clipping behind the glyphs.
+    input.style.border = "1px dashed rgba(255,255,255,0.55)";
+    input.style.borderRadius = "3px";
     input.style.outline = "none";
     document.body.appendChild(input);
 
@@ -1001,11 +1015,14 @@ const handleMouseUp = (event) => {
                 rotation: extractRotationFromTransform(selectedElement) || 0,
                 parentFrame: draggedShapeInitialFrameText
             };
+            // Issue #34 bug #2: hoveredFrameText is the actual destination
+            // tracked during drag — textShape.parentFrame is still the OLD
+            // frame at this point.
             const newPosWithFrame = {
                 x: finalTranslateX,
                 y: finalTranslateY,
                 rotation: extractRotationFromTransform(selectedElement) || 0,
-                parentFrame: textShape ? textShape.parentFrame : null
+                parentFrame: hoveredFrameText || null,
             };
 
             const stateChanged = initialX !== finalTranslateX || initialY !== finalTranslateY;
@@ -1837,4 +1854,4 @@ window.__setCodeLanguage = function(lang) {
     }
 };
 
-export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement, enterEditMode };
+export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement, enterEditMode };