@elixpo/lixsketch 5.6.9 → 5.6.11

package/src/core/MermaidStructuredRenderer.js

@@ -301,8 +301,8 @@ export function renderChartPreviewSVG(chart) {
 function push(shape, frame) {
     if (!shape) return null;
     window.shapes.push(shape);
-    if (window.pushCreateAction) window.pushCreateAction(shape);
     if (frame?.addShapeToFrame) frame.addShapeToFrame(shape);
+    if (window.pushCreateAction) window.pushCreateAction(shape);
     return shape;
 }
 
@@ -343,7 +343,8 @@ function createFrame(x, y, width, height, name, type) {
         frameName: name, labelColor: TK.text,
     });
     frame._diagramType = type;
-    push(frame);
+    window.shapes.push(frame);
+    if (window.pushCreateAction) window.pushCreateAction(frame, { frameCreation: true, containedShapes: [] });
     return frame;
 }
 
@@ -360,6 +361,7 @@ function selectOnlyFrame(frame) {
 
 export function renderEROnCanvas(diagram) {
     if (!diagram?.entities?.length || !window.Rectangle || !window.Arrow || !window.Frame) return false;
+    const undoBatch = window.beginUndoBatch?.();
     const TK = theme();
     const entities = layoutER(diagram);
     const width = Math.max(...entities.map(entity => entity.x + entity.width)) + 40;
@@ -411,6 +413,7 @@ export function renderEROnCanvas(diagram) {
         }
     }
     if (first?.selectShape) { window.currentShape = first; first.selectShape(); }
+    window.endUndoBatch?.(undoBatch, 'mermaid-er-create');
     return true;
 }
 
@@ -432,6 +435,7 @@ function rectBoundaryPoint(box, target) {
 export function renderChartOnCanvas(chart) {
     if (!chart?.series?.length || !window.Rectangle || !window.Circle || !window.Line || !window.FreehandStroke || !window.Frame) return false;
     if (chart.kind === 'pie') return renderPieOnCanvas(chart);
+    const undoBatch = window.beginUndoBatch?.();
     const TK = theme();
     const width = 720;
     const height = 450;
@@ -497,18 +501,20 @@ export function renderChartOnCanvas(chart) {
         }
     });
     selectOnlyFrame(frame);
+    window.endUndoBatch?.(undoBatch, 'mermaid-chart-create');
     return true;
 }
 
 function renderPieOnCanvas(chart) {
     if (!window.FreehandStroke || !window.TextShape) return false;
+    const values = chart.series[0].values.map(value => Math.max(0, value));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    if (total <= 0) return false;
+    const undoBatch = window.beginUndoBatch?.();
     const width = 720;
     const height = 450;
     const origin = canvasOrigin(width, height);
     const frame = createFrame(origin.x, origin.y, width, height, chart.title, 'mermaid-pie');
-    const values = chart.series[0].values.map(value => Math.max(0, value));
-    const total = values.reduce((sum, value) => sum + value, 0);
-    if (total <= 0) return false;
 
     const cx = origin.x + 255;
     const cy = origin.y + 235;
@@ -559,5 +565,6 @@ function renderPieOnCanvas(chart) {
     });
 
     selectOnlyFrame(frame);
+    window.endUndoBatch?.(undoBatch, 'mermaid-pie-create');
     return true;
 }

package/src/core/ScreenSpaceControls.js

@@ -1,16 +1,38 @@
 /* eslint-disable */
 
 const ROTATION_SELECTOR = '[data-screen-space-rotation-anchor="true"]';
+const OUTLINE_SELECTOR = '.selection-outline, .selection-box, .multi-selection-outline';
+const HANDLE_SELECTOR = '.anchor, .resize-anchor, .resize-handle, .multi-selection-anchor';
+
+export const SELECTION_CHROME = Object.freeze({
+    outlineWidth: 1.5,
+    outlineDash: '4 2',
+    handleSize: 10,
+    handleStrokeWidth: 2,
+    rotationRadius: 8,
+    rotationGap: 30,
+});
+
+export function getSelectionChromeMetrics(zoom = 1) {
+    const normalizedZoom = Math.max(0.001, Number(zoom) || 1);
+    return {
+        outlineWidth: SELECTION_CHROME.outlineWidth,
+        outlineDash: SELECTION_CHROME.outlineDash,
+        handleSize: SELECTION_CHROME.handleSize / normalizedZoom,
+        rotationRadius: SELECTION_CHROME.rotationRadius / normalizedZoom,
+        rotationGap: SELECTION_CHROME.rotationGap / normalizedZoom,
+    };
+}
 
 function getZoom() {
-    return Math.max(0.001, Number(window.currentZoom) || 1);
+    return Math.max(0.001, Number(globalThis.window?.currentZoom) || 1);
 }
 
 export function registerRotationAnchor(anchor, options = {}) {
     if (!anchor) return;
     const zoom = getZoom();
-    const radius = Number(options.radius) || 8;
-    const gap = Number(options.gap) || 30;
+    const radius = SELECTION_CHROME.rotationRadius;
+    const gap = SELECTION_CHROME.rotationGap;
     const edgeY = Number(options.edgeY);
 
     anchor.setAttribute('data-screen-space-rotation-anchor', 'true');
@@ -18,6 +40,9 @@ export function registerRotationAnchor(anchor, options = {}) {
     anchor.setAttribute('data-screen-gap', String(gap));
     anchor.setAttribute('data-applied-zoom', String(zoom));
     anchor.setAttribute('r', String(radius / zoom));
+    anchor.setAttribute('stroke', '#5B57D1');
+    anchor.setAttribute('stroke-width', String(SELECTION_CHROME.handleStrokeWidth));
+    anchor.setAttribute('vector-effect', 'non-scaling-stroke');
     if (Number.isFinite(edgeY)) anchor.setAttribute('cy', String(edgeY - gap / zoom));
 
     anchor.__rotationConnector = options.line || null;
@@ -31,6 +56,49 @@ function syncRotationConnector(anchor) {
     const end = anchor.__rotationConnectorEnd === '1' ? '1' : '2';
     line.setAttribute(`x${end}`, anchor.getAttribute('cx'));
     line.setAttribute(`y${end}`, anchor.getAttribute('cy'));
+    line.setAttribute('stroke', '#5B57D1');
+    line.setAttribute('stroke-width', '1');
+    line.setAttribute('stroke-dasharray', SELECTION_CHROME.outlineDash);
+    line.setAttribute('vector-effect', 'non-scaling-stroke');
+}
+
+function resizeHandleInScreenSpace(handle, zoom) {
+    const size = SELECTION_CHROME.handleSize / zoom;
+    const tagName = handle.tagName?.toLowerCase();
+
+    if (tagName === 'rect') {
+        const oldWidth = Number(handle.getAttribute('width')) || size;
+        const oldHeight = Number(handle.getAttribute('height')) || size;
+        const centerX = (Number(handle.getAttribute('x')) || 0) + oldWidth / 2;
+        const centerY = (Number(handle.getAttribute('y')) || 0) + oldHeight / 2;
+        handle.setAttribute('x', String(centerX - size / 2));
+        handle.setAttribute('y', String(centerY - size / 2));
+        handle.setAttribute('width', String(size));
+        handle.setAttribute('height', String(size));
+    } else if (tagName === 'circle' && !handle.matches(ROTATION_SELECTOR)) {
+        handle.setAttribute('r', String(size / 2));
+    }
+
+    handle.setAttribute('stroke', '#5B57D1');
+    handle.setAttribute('stroke-width', String(SELECTION_CHROME.handleStrokeWidth));
+    handle.setAttribute('vector-effect', 'non-scaling-stroke');
+}
+
+export function syncSelectionChromeToZoom(root = document) {
+    if (!root?.querySelectorAll) return;
+    const zoom = getZoom();
+
+    root.querySelectorAll(OUTLINE_SELECTOR).forEach((outline) => {
+        outline.setAttribute('fill', 'none');
+        outline.setAttribute('stroke', '#5B57D1');
+        outline.setAttribute('stroke-width', String(SELECTION_CHROME.outlineWidth));
+        outline.setAttribute('stroke-dasharray', SELECTION_CHROME.outlineDash);
+        outline.setAttribute('vector-effect', 'non-scaling-stroke');
+    });
+
+    root.querySelectorAll(HANDLE_SELECTOR).forEach((handle) => {
+        resizeHandleInScreenSpace(handle, zoom);
+    });
 }
 
 export function syncRotationAnchorsToZoom() {
@@ -38,23 +106,44 @@ export function syncRotationAnchorsToZoom() {
     const zoom = getZoom();
     document.querySelectorAll(ROTATION_SELECTOR).forEach((anchor) => {
         const previousZoom = Math.max(0.001, Number(anchor.getAttribute('data-applied-zoom')) || zoom);
-        if (Math.abs(previousZoom - zoom) < 0.000001) return;
-        const radius = Number(anchor.getAttribute('data-screen-radius')) || 8;
-        const gap = Number(anchor.getAttribute('data-screen-gap')) || 30;
-        const currentY = Number(anchor.getAttribute('cy')) || 0;
-        const edgeY = currentY + gap / previousZoom;
-
-        anchor.setAttribute('cy', String(edgeY - gap / zoom));
+        const radius = SELECTION_CHROME.rotationRadius;
+        const gap = SELECTION_CHROME.rotationGap;
+        if (Math.abs(previousZoom - zoom) >= 0.000001) {
+            const currentY = Number(anchor.getAttribute('cy')) || 0;
+            const edgeY = currentY + gap / previousZoom;
+            anchor.setAttribute('cy', String(edgeY - gap / zoom));
+            anchor.setAttribute('data-applied-zoom', String(zoom));
+        }
         anchor.setAttribute('r', String(radius / zoom));
-        anchor.setAttribute('data-applied-zoom', String(zoom));
+        anchor.setAttribute('stroke', '#5B57D1');
+        anchor.setAttribute('stroke-width', String(SELECTION_CHROME.handleStrokeWidth));
+        anchor.setAttribute('vector-effect', 'non-scaling-stroke');
         syncRotationConnector(anchor);
     });
+    syncSelectionChromeToZoom(document);
 }
 
 export function installScreenSpaceControlSync(svgElement) {
     if (!svgElement || typeof MutationObserver === 'undefined') return;
     window.__screenSpaceControlObserver?.disconnect?.();
-    const observer = new MutationObserver(syncRotationAnchorsToZoom);
-    observer.observe(svgElement, { attributes: true, attributeFilter: ['viewBox'] });
+    let scheduled = false;
+    const scheduleSync = () => {
+        if (scheduled) return;
+        scheduled = true;
+        const run = () => {
+            scheduled = false;
+            syncRotationAnchorsToZoom();
+        };
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run);
+        else queueMicrotask(run);
+    };
+    const observer = new MutationObserver(scheduleSync);
+    observer.observe(svgElement, {
+        attributes: true,
+        attributeFilter: ['viewBox'],
+        childList: true,
+        subtree: true,
+    });
     window.__screenSpaceControlObserver = observer;
+    scheduleSync();
 }

package/src/core/Selection.js

@@ -2,7 +2,7 @@
 // Multi-selection system - copied from selection.js
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
-import { beginUndoBatch, endUndoBatch, pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
+import { beginUndoBatch, captureFrameChildStates, endUndoBatch, pushCreateAction, pushTransformAction, pushFrameAttachmentAction, pushDeleteAction } from './UndoRedo.js';
 import { calculateSnap, clearSnapGuides } from './SnapGuides.js';
 import { registerRotationAnchor } from './ScreenSpaceControls.js';
 
@@ -270,6 +270,15 @@ class MultiSelection {
     }
 
     _captureShapeState(shape) {
+        if (shape.shapeName === 'frame') {
+            return {
+                x: shape.x, y: shape.y,
+                width: shape.width || 0, height: shape.height || 0,
+                rotation: shape.rotation || 0,
+                parentFrame: shape.parentFrame || null,
+                containedShapes: captureFrameChildStates(shape),
+            };
+        }
         switch (shape.shapeName) {
             case 'line':
             case 'arrow':
@@ -300,6 +309,13 @@ class MultiSelection {
             // Check if anything actually changed
             const changed = Object.keys(oldState).some(key => {
                 if (key === 'points' || key === 'startPoint' || key === 'endPoint') return JSON.stringify(oldState[key]) !== JSON.stringify(newState[key]);
+                if (key === 'containedShapes') {
+                    const compact = entries => (entries || []).map(entry => ({
+                        shapeID: entry.shape?.shapeID,
+                        state: entry.state,
+                    }));
+                    return JSON.stringify(compact(oldState[key])) !== JSON.stringify(compact(newState[key]));
+                }
                 return oldState[key] !== newState[key];
             });
             if (changed) {
@@ -475,7 +491,6 @@ class MultiSelection {
     }
 
     createOutline(x, y, width, height) {
-        const zoom = window.currentZoom || 1;
         const outlinePoints = [
             [x, y],
             [x + width, y],
@@ -485,11 +500,12 @@ class MultiSelection {
         ];
 
         this.outline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+        this.outline.setAttribute('class', 'multi-selection-outline');
         this.outline.setAttribute('points', outlinePoints.map(p => p.join(',')).join(' '));
         this.outline.setAttribute('fill', 'none');
         this.outline.setAttribute('stroke', '#5B57D1');
-        this.outline.setAttribute('stroke-width', 2);
-        this.outline.setAttribute('stroke-dasharray', `${8 / zoom} ${4 / zoom}`);
+        this.outline.setAttribute('stroke-width', 1.5);
+        this.outline.setAttribute('stroke-dasharray', '4 2');
         this.outline.setAttribute('vector-effect', 'non-scaling-stroke');
         this.outline.setAttribute('style', 'pointer-events: none;');
         this.group.appendChild(this.outline);
@@ -497,7 +513,7 @@ class MultiSelection {
 
     createResizeAnchors(x, y, width, height) {
         const zoom = window.currentZoom || 1;
-        const anchorSize = 12 / zoom;
+        const anchorSize = 10 / zoom;
         const anchorPositions = [
             { x: x, y: y, index: 0 },
             { x: x + width, y: y, index: 1 },
@@ -558,7 +574,7 @@ class MultiSelection {
         this.rotationLine.setAttribute('y2', y);
         this.rotationLine.setAttribute('stroke', '#5B57D1');
         this.rotationLine.setAttribute('stroke-width', 1);
-        this.rotationLine.setAttribute('stroke-dasharray', `${3 / zoom} ${3 / zoom}`);
+        this.rotationLine.setAttribute('stroke-dasharray', '4 2');
         this.rotationLine.setAttribute('vector-effect', 'non-scaling-stroke');
         this.rotationLine.setAttribute('style', 'pointer-events: none;');
 
@@ -1036,10 +1052,12 @@ createRotatedControls(angleDiff = 0) {
             rect.setAttribute('width', b.width + 6);
             rect.setAttribute('height', b.height + 6);
             rect.setAttribute('fill', 'none');
+            rect.setAttribute('class', 'selection-sub-outline');
             rect.setAttribute('stroke', '#5B57D1');
             rect.setAttribute('stroke-width', 1);
             rect.setAttribute('stroke-opacity', 0.35);
-            rect.setAttribute('stroke-dasharray', '4 3');
+            rect.setAttribute('stroke-dasharray', '4 2');
+            rect.setAttribute('vector-effect', 'non-scaling-stroke');
             rect.setAttribute('rx', 3);
             rect.setAttribute('style', 'pointer-events: none;');
             this.group.appendChild(rect);
@@ -1292,6 +1310,7 @@ createRotatedControls(angleDiff = 0) {
         this.selectedShapes.forEach(shape => {
             let shapeData;
             shape.removeSelection();
+            if (shape.shapeName === 'line') shape.scheduleDragRender?.();
             switch (shape.shapeName) {
                 case 'rectangle':
                 case 'icon':

package/src/core/SelectionGesture.js

@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+function normalizePointerId(pointerId) {
+    return Number.isFinite(Number(pointerId)) ? Number(pointerId) : null;
+}
+
+export function createSelectionGestureOwner() {
+    let activeGesture = null;
+
+    return {
+        captureShape(shape, pointerId) {
+            if (!shape) return null;
+            activeGesture = {
+                kind: 'shape',
+                shape,
+                shapeName: shape.shapeName,
+                pointerId: normalizePointerId(pointerId),
+            };
+            return activeGesture;
+        },
+
+        captureMulti(pointerId) {
+            activeGesture = {
+                kind: 'multi',
+                pointerId: normalizePointerId(pointerId),
+            };
+            return activeGesture;
+        },
+
+        get(pointerId) {
+            if (!activeGesture) return null;
+            const requestedPointer = normalizePointerId(pointerId);
+            if (activeGesture.pointerId !== null && requestedPointer !== null && activeGesture.pointerId !== requestedPointer) {
+                return null;
+            }
+            return activeGesture;
+        },
+
+        clear(pointerId) {
+            const gesture = this.get(pointerId);
+            if (!gesture) return false;
+            activeGesture = null;
+            return true;
+        },
+
+        clearAll() {
+            activeGesture = null;
+        },
+    };
+}

package/src/core/UndoRedo.js

@@ -55,6 +55,14 @@ export function pushCreateAction(shape, meta = null) {
         type: 'create',
         shape: shape
     };
+    const parentFrame = meta?.parentFrame || shape?.parentFrame || null;
+    if (parentFrame) {
+        action.parentFrame = parentFrame;
+        const frameIndex = Number.isInteger(meta?.frameIndex)
+            ? meta.frameIndex
+            : parentFrame.containedShapes?.indexOf(shape);
+        if (Number.isInteger(frameIndex) && frameIndex >= 0) action.frameIndex = frameIndex;
+    }
     if (meta?.frameCreation && shape?.shapeName === 'frame') {
         action.frameCreation = true;
         action.containedShapes = [...(meta.containedShapes || shape.containedShapes || [])];
@@ -108,6 +116,35 @@ export function clearUndoHistory() {
     redoStack.length = 0;
 }
 
+// Collaboration scene loads rebuild shape instances. Keep this client's
+// history private, but point its actions at the newly materialized objects so
+// Ctrl+Z never mutates detached SVG nodes after a peer update.
+export function rebindUndoHistory(currentShapes = []) {
+    const shapeById = new Map(currentShapes
+        .filter(shape => shape?.shapeID)
+        .map(shape => [shape.shapeID, shape]));
+    const visited = new WeakSet();
+
+    const rebind = (value) => {
+        if (!value || typeof value !== 'object') return value;
+        if (value.shapeID) return shapeById.get(value.shapeID) || value;
+        if (visited.has(value)) return value;
+        visited.add(value);
+        if (Array.isArray(value)) {
+            for (let index = 0; index < value.length; index += 1) value[index] = rebind(value[index]);
+            return value;
+        }
+        for (const key of Object.keys(value)) {
+            const child = value[key];
+            if (child && typeof child === 'object') value[key] = rebind(child);
+        }
+        return value;
+    };
+
+    undoStack.forEach(rebind);
+    redoStack.forEach(rebind);
+}
+
 // Enhanced delete action to clean up attached arrows
 export function pushDeleteActionWithAttachments(shape) {
     let affectedArrows = [];
@@ -174,23 +211,20 @@ export function pushCreateActionWithAttachments(shape) {
 
 export function pushTransformAction(shape, oldPos, newPos) {
     if (shape.shapeName === 'frame') {
-        // Handle frame transformation with contained shapes
+        // Frame transforms can resize and rotate heterogeneous children.
+        // Reconstructing their old geometry from the frame delta loses arrow
+        // endpoints, circle radii and freehand points. Prefer the snapshot
+        // captured at pointer-down, with a translation-only fallback for old
+        // callers that have not supplied one yet.
+        const oldSnapshots = new Map((oldPos.containedShapes || []).map(entry => [entry.shape, entry.state]));
         const containedShapesStates = shape.containedShapes.map(containedShape => ({
             shape: containedShape,
-            oldState: {
-                x: containedShape.x - (newPos.x - oldPos.x),
-                y: containedShape.y - (newPos.y - oldPos.y),
-                width: containedShape.width || 0,
-                height: containedShape.height || 0,
-                rotation: containedShape.rotation || 0
+            oldState: oldSnapshots.get(containedShape) || {
+                ...captureShapeGeometry(containedShape),
+                x: typeof containedShape.x === 'number' ? containedShape.x - (newPos.x - oldPos.x) : containedShape.x,
+                y: typeof containedShape.y === 'number' ? containedShape.y - (newPos.y - oldPos.y) : containedShape.y,
             },
-            newState: {
-                x: containedShape.x,
-                y: containedShape.y,
-                width: containedShape.width || 0,
-                height: containedShape.height || 0,
-                rotation: containedShape.rotation || 0
-            }
+            newState: captureShapeGeometry(containedShape),
         }));
 
         undoStack.push({
@@ -451,6 +485,7 @@ export function pushTransformAction(shape, oldPos, newPos) {
             }))
     });
 }
+
     else if (shape.shapeName === 'freehandStroke') {
         // Handle freehand stroke transform
         undoStack.push({
@@ -472,6 +507,47 @@ export function pushTransformAction(shape, oldPos, newPos) {
     notifyCollaboration();
 }
 
+function clonePoint(point) {
+    return point ? { ...point } : point;
+}
+
+export function captureShapeGeometry(shape) {
+    const state = {
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        rotation: shape.rotation || 0,
+    };
+    if (typeof shape.rx === 'number') state.rx = shape.rx;
+    if (typeof shape.ry === 'number') state.ry = shape.ry;
+    if (shape.startPoint) state.startPoint = clonePoint(shape.startPoint);
+    if (shape.endPoint) state.endPoint = clonePoint(shape.endPoint);
+    if (shape.controlPoint1) state.controlPoint1 = clonePoint(shape.controlPoint1);
+    if (shape.controlPoint2) state.controlPoint2 = clonePoint(shape.controlPoint2);
+    if (Array.isArray(shape.points)) state.points = shape.points.map(point => Array.isArray(point) ? [...point] : point);
+    if (typeof shape._moveOffsetX === 'number') state._moveOffsetX = shape._moveOffsetX;
+    if (typeof shape._moveOffsetY === 'number') state._moveOffsetY = shape._moveOffsetY;
+    return state;
+}
+
+export function captureFrameChildStates(frame) {
+    return (frame?.containedShapes || []).map(shape => ({ shape, state: captureShapeGeometry(shape) }));
+}
+
+function restoreShapeGeometry(shape, state) {
+    if (!shape || !state) return;
+    for (const key of ['x', 'y', 'width', 'height', 'rotation', 'rx', 'ry', '_moveOffsetX', '_moveOffsetY']) {
+        if (state[key] !== undefined) shape[key] = state[key];
+    }
+    for (const key of ['startPoint', 'endPoint', 'controlPoint1', 'controlPoint2']) {
+        if (state[key] !== undefined) shape[key] = clonePoint(state[key]);
+    }
+    if (state.points) shape.points = state.points.map(point => Array.isArray(point) ? [...point] : point);
+    if (typeof shape.updateBoundingBox === 'function') shape.updateBoundingBox();
+    if (typeof shape.draw === 'function') shape.draw();
+}
+
 export function pushOptionsChangeAction(shape, oldOptions, newOptions = null) {
     undoStack.push({
         type: 'optionsChange',
@@ -533,6 +609,16 @@ function detachDeletedShapeFrame(action) {
     }
 }
 
+function restoreCreatedShapeFrame(action) {
+    if (!action.parentFrame) return;
+    restoreDeletedShapeFrame(action);
+}
+
+function detachCreatedShapeFrame(action) {
+    if (!action.parentFrame) return;
+    detachDeletedShapeFrame(action);
+}
+
 export function undo() {
     if (undoStack.length === 0) return;
     const action = undoStack.pop();
@@ -565,16 +651,7 @@ export function undo() {
         
         // Restore contained shapes to their old positions
         action.containedShapes.forEach(shapeData => {
-            const shape = shapeData.shape;
-            shape.x = shapeData.oldState.x;
-            shape.y = shapeData.oldState.y;
-            shape.width = shapeData.oldState.width;
-            shape.height = shapeData.oldState.height;
-            shape.rotation = shapeData.oldState.rotation;
-            
-            if (typeof shape.draw === 'function') {
-                shape.draw();
-            }
+            restoreShapeGeometry(shapeData.shape, shapeData.oldState);
         });
         
         action.shape.isSelected = false;
@@ -670,6 +747,7 @@ export function undo() {
     }
 
     if (action.type === 'create') {
+    detachCreatedShapeFrame(action);
     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
@@ -1104,16 +1182,7 @@ export function redo() {
         
         // Restore contained shapes to their new positions
         action.containedShapes.forEach(shapeData => {
-            const shape = shapeData.shape;
-            shape.x = shapeData.newState.x;
-            shape.y = shapeData.newState.y;
-            shape.width = shapeData.newState.width;
-            shape.height = shapeData.newState.height;
-            shape.rotation = shapeData.newState.rotation;
-            
-            if (typeof shape.draw === 'function') {
-                shape.draw();
-            }
+            restoreShapeGeometry(shapeData.shape, shapeData.newState);
         });
         
         action.shape.isSelected = false;
@@ -1245,11 +1314,12 @@ export function redo() {
         }
     } else {
         // Handle other shape creation redo
-        shapes.push(action.shape);
+        if (!shapes.includes(action.shape)) shapes.push(action.shape);
         if (svg) {
             svg.appendChild(action.shape.group);
         }
     }
+    restoreCreatedShapeFrame(action);
     undoStack.push(action);
     return;
 }
@@ -1601,10 +1671,13 @@ document.getElementById('redo')?.addEventListener('click', redo);
 
 // Expose globally for plain scripts
 window.pushCreateAction = pushCreateAction;
+window.beginUndoBatch = beginUndoBatch;
+window.endUndoBatch = endUndoBatch;
 window.pushDeleteAction = pushDeleteAction;
 window.pushCanvasResetAction = pushCanvasResetAction;
 window.invalidateCanvasResetUndo = invalidateCanvasResetUndo;
 window.clearUndoHistory = clearUndoHistory;
+window.rebindUndoHistory = rebindUndoHistory;
 window.pushDeleteActionWithAttachments = pushDeleteActionWithAttachments;
 window.pushTransformAction = pushTransformAction;
 window.pushOptionsChangeAction = pushOptionsChangeAction;

package/src/react/components/sidebars/CircleSidebar.jsx

@@ -4,8 +4,9 @@ import useSketchStore, { TOOLS } from '../../store/useSketchStore'
 import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
 import { useState, useCallback } from 'react'
 import { useTranslation } from '../../hooks/useTranslation'
+import useUIStore from '../../store/useUIStore'
 
-const STROKE_COLORS = ['#1a1a20', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
+const STROKE_COLORS = ['#000000', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
 const BG_COLORS = ['transparent', '#f0f0f0', '#ffcccb', '#90ee90', '#add8e6', '#FFE4B5', '#DDA0DD', '#2d2d2d']
 
 const FILLS = [
@@ -46,7 +47,12 @@ export default function CircleSidebar() {
   const { t } = useTranslation()
   const activeTool = useSketchStore((s) => s.activeTool)
   const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
-  const [strokeColor, setStrokeColor] = useState('#fff')
+  const theme = useUIStore((s) => s.theme)
+  const resolvedTheme = theme === 'system' && typeof window !== 'undefined'
+    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    : theme
+  const [strokeColor, setStrokeColor] = useState(null)
+  const displayedStrokeColor = strokeColor ?? (resolvedTheme === 'light' ? '#000000' : '#ffffff')
   const [bgColor, setBgColor] = useState('transparent')
   const [thickness, setThickness] = useState(2)
   const [lineStyle, setLineStyle] = useState('solid')
@@ -62,10 +68,10 @@ export default function CircleSidebar() {
     <ShapeSidebar visible={activeTool === TOOLS.CIRCLE || selectedShapeSidebar === 'circle'}>
       <ToolbarButton
         tooltip={t('sidebar.strokeColor')}
-        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: strokeColor }} />}
+        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: displayedStrokeColor }} />}
       >
         <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.sectionHeader.stroke')}</p>
-        <ColorGrid colors={STROKE_COLORS} selected={strokeColor} onSelect={updateStroke} />
+        <ColorGrid colors={STROKE_COLORS} selected={displayedStrokeColor} onSelect={updateStroke} />
       </ToolbarButton>
 
       <Divider />
@@ -106,7 +112,7 @@ export default function CircleSidebar() {
             <button key={s.v} onClick={() => updateStyle(s.v)}
               className={`w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? 'bg-[#7667a8]/20' : 'hover:bg-white/[0.06]'}`}
             >
-              <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="#fff" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
+              <svg width="28" height="4" viewBox="0 0 28 4"><line x1="0" y1="2" x2="28" y2="2" stroke="currentColor" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" /></svg>
             </button>
           ))}
         </div>