@elixpo/lixsketch 5.6.4 → 5.6.6

package/src/react/components/AppMenu.jsx

@@ -7,23 +7,7 @@ import useSketchStore from '../store/useSketchStore'
 import { useAuthStore } from '../hooks/inertStores'
 import { triggerCloudSync } from '../hooks/inertStores'
 import { useTranslation } from '../hooks/useTranslation'
-
-// Issue #38 follow-up: theme-paired swatches. The menu picks the
-// matching list at render time based on the active theme.
-const CANVAS_BACKGROUNDS_LIGHT = [
-  { color: '#ffffff', label: 'menu.canvasBg.white' },
-  { color: '#fbf9fd', label: 'menu.canvasBg.cream' },
-  { color: '#f5f3ed', label: 'menu.canvasBg.paper' },
-  { color: '#f0f5fb', label: 'menu.canvasBg.skyTint' },
-  { color: '#f0f5ef', label: 'menu.canvasBg.sageTint' },
-]
-const CANVAS_BACKGROUNDS_DARK = [
-  { color: '#000000', label: 'menu.canvasBg.black' },
-  { color: '#161718', label: 'menu.canvasBg.darkGray' },
-  { color: '#15111f', label: 'menu.canvasBg.blueBlack' },
-  { color: '#181605', label: 'menu.canvasBg.darkYellow' },
-  { color: '#1B1615', label: 'menu.canvasBg.darkBrown' },
-]
+import { CANVAS_BACKGROUNDS } from '../utils/canvasBackgrounds'
 
 function DangerWarningDialog({ action, workspaceName, onCancel, onConfirm }) {
   useEffect(() => {
@@ -130,6 +114,8 @@ export default function AppMenu() {
   const toggleGrid = useSketchStore((s) => s.toggleGrid)
   const rulersEnabled = useSketchStore((s) => s.rulersEnabled)
   const toggleRulers = useSketchStore((s) => s.toggleRulers)
+  const rulerUnit = useSketchStore((s) => s.rulerUnit)
+  const setRulerUnit = useSketchStore((s) => s.setRulerUnit)
 
   const viewMode = useSketchStore((s) => s.viewMode)
   const zenMode = useSketchStore((s) => s.zenMode)
@@ -300,6 +286,21 @@ export default function AppMenu() {
                 <option value="en">English</option>
                 <option value="bg">Български</option>
                 <option value="de">Deutsch</option>
+                <option value="hi">हिन्दी</option>
+              </select>
+            </div>
+
+            <div className="w-full flex items-center justify-between px-3 py-2 border-b border-border-light text-text-secondary text-[11px]">
+              <span>Ruler unit</span>
+              <select
+                aria-label="Ruler unit"
+                className="cursor-pointer rounded border border-border-light bg-surface-hover px-1 text-[10px] uppercase text-text-primary outline-none"
+                value={rulerUnit}
+                onChange={(event) => setRulerUnit(event.target.value)}
+              >
+                <option value="px">px</option>
+                <option value="cm">cm</option>
+                <option value="in">in</option>
               </select>
             </div>
             
@@ -453,10 +454,10 @@ export default function AppMenu() {
             {t('menu.canvasBackground')}
           </p>
           <div className="flex items-center gap-1.5">
-            {(theme === 'dark' ? CANVAS_BACKGROUNDS_DARK : CANVAS_BACKGROUNDS_LIGHT).map((bg) => (
+            {CANVAS_BACKGROUNDS[theme === 'light' ? 'light' : 'dark'].map((bg) => (
               <button
                 key={bg.color}
-                onClick={() => setCanvasBackground(bg.color)}
+                onClick={() => setCanvasBackground(bg.color, theme === 'light' ? 'light' : 'dark')}
                 title={t(bg.label)}
                 className={`w-7 h-7 rounded-full border-2 cursor-pointer transition-all duration-200 ${
                   canvasBackground === bg.color

package/src/react/components/canvas/CanvasRulers.jsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from 'react'
+import { formatRulerValue, normalizeRulerUnit } from './rulerUnits.js'
 
 const GRID_SIZE = 20
 const MIN_LABEL_GAP = 52
@@ -16,14 +17,6 @@ function getRulerStep(zoom) {
   return GRID_SIZE
 }
 
-function formatDimension(value) {
-  const rounded = Math.round(value)
-  const absolute = Math.abs(rounded)
-  if (absolute >= 1000000) return `${Number((rounded / 1000000).toFixed(1))}m`
-  if (absolute >= 10000) return `${Number((rounded / 1000).toFixed(1))}k`
-  return String(rounded)
-}
-
 function buildTicks(start, extent, zoom, step) {
   const first = Math.floor(start / step) * step
   const last = start + extent / zoom
@@ -34,7 +27,8 @@ function buildTicks(start, extent, zoom, step) {
   return ticks
 }
 
-export default function CanvasRulers({ enabled, svgRef }) {
+export default function CanvasRulers({ enabled, svgRef, unit = 'px' }) {
+  const rulerUnit = normalizeRulerUnit(unit)
   const [viewport, setViewport] = useState({ x: 0, y: 0, zoom: 1, width: 0, height: 0, rulerLeft: 64, rulerTop: 48 })
   const [pointer, setPointer] = useState({ x: 0, y: 0, visible: false })
 
@@ -113,28 +107,29 @@ export default function CanvasRulers({ enabled, svgRef }) {
       <div className="absolute right-0 overflow-hidden border-b border-border-light bg-surface/95 shadow-sm backdrop-blur-sm" style={{ height: RULER_SIZE, left: horizontalStart, top: viewport.rulerTop }}>
         {horizontalTicks.map(({ value, position }) => (
           <div key={value} className="absolute bottom-0 h-2 border-l border-text-dim" style={{ left: position - horizontalStart }}>
-            <span className="absolute bottom-2 left-1 font-mono text-[9px] leading-none tabular-nums">{formatDimension(value)}</span>
+            <span className="absolute bottom-2 left-1 font-mono text-[9px] leading-none tabular-nums">{formatRulerValue(value, rulerUnit)}</span>
           </div>
         ))}
         {pointerInDrawingArea && (
           <div className="absolute inset-y-0 border-l border-accent" style={{ left: pointer.x - horizontalStart }}>
-            <span className="absolute left-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm">{formatDimension(pointerWorldX)}</span>
+            <span className="absolute left-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm">{formatRulerValue(pointerWorldX, rulerUnit, true)}</span>
           </div>
         )}
       </div>
       <div className="absolute bottom-0 overflow-hidden border-r border-border-light bg-surface/95 shadow-sm backdrop-blur-sm" style={{ width: RULER_SIZE, left: viewport.rulerLeft, top: verticalStart }}>
         {verticalTicks.map(({ value, position }) => (
           <div key={value} className="absolute right-0 w-2 border-t border-text-dim" style={{ top: position - verticalStart }}>
-            <span className="absolute right-2 top-1 font-mono text-[9px] leading-none tabular-nums" style={{ transform: 'rotate(-90deg)', transformOrigin: 'top right' }}>{formatDimension(value)}</span>
+            <span className="absolute right-2 top-1 font-mono text-[9px] leading-none tabular-nums" style={{ transform: 'rotate(-90deg)', transformOrigin: 'top right' }}>{formatRulerValue(value, rulerUnit)}</span>
           </div>
         ))}
         {pointerInDrawingArea && (
           <div className="absolute inset-x-0 border-t border-accent" style={{ top: pointer.y - verticalStart }}>
-            <span className="absolute right-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm" style={{ transform: 'rotate(-90deg)', transformOrigin: 'top right' }}>{formatDimension(pointerWorldY)}</span>
+            <span className="absolute right-1 top-1 rounded bg-accent px-1 font-mono text-[9px] leading-4 text-white shadow-sm" style={{ transform: 'rotate(-90deg)', transformOrigin: 'top right' }}>{formatRulerValue(pointerWorldY, rulerUnit, true)}</span>
           </div>
         )}
       </div>
       <div className="absolute border-b border-r border-border-light bg-accent/20" style={{ width: RULER_SIZE, height: RULER_SIZE, left: viewport.rulerLeft, top: viewport.rulerTop }}>
+        <span className="absolute bottom-0.5 left-1 font-mono text-[8px] uppercase text-accent">{rulerUnit}</span>
         <span className="absolute left-1/2 top-1/2 h-2.5 -translate-x-1/2 -translate-y-1/2 border-l border-accent" />
         <span className="absolute left-1/2 top-1/2 w-2.5 -translate-x-1/2 -translate-y-1/2 border-t border-accent" />
       </div>

package/src/react/components/canvas/SVGCanvas.jsx

@@ -14,6 +14,7 @@ export default function SVGCanvas() {
   const gridEnabled = useSketchStore((s) => s.gridEnabled)
   const hydrateGrid = useSketchStore((s) => s.hydrateGrid)
   const rulersEnabled = useSketchStore((s) => s.rulersEnabled)
+  const rulerUnit = useSketchStore((s) => s.rulerUnit)
   const hydrateRulers = useSketchStore((s) => s.hydrateRulers)
   const getCursor = useSketchStore((s) => s.getCursor)
   const cursor = getCursor()
@@ -152,7 +153,7 @@ export default function SVGCanvas() {
         />
       )}
     </svg>
-    <CanvasRulers enabled={rulersEnabled} svgRef={svgRef} />
+    <CanvasRulers enabled={rulersEnabled} svgRef={svgRef} unit={rulerUnit} />
     </>
   )
 }

package/src/react/components/canvas/rulerUnits.js

@@ -0,0 +1,28 @@
+export const RULER_UNITS = ['px', 'cm', 'in']
+
+const PIXELS_PER_UNIT = { px: 1, cm: 96 / 2.54, in: 96 }
+
+export function normalizeRulerUnit(unit) {
+  return RULER_UNITS.includes(unit) ? unit : 'px'
+}
+
+export function convertRulerValue(pixelValue, unit = 'px') {
+  return pixelValue / PIXELS_PER_UNIT[normalizeRulerUnit(unit)]
+}
+
+export function formatRulerValue(pixelValue, unit = 'px', suffix = false) {
+  const normalized = normalizeRulerUnit(unit)
+  const converted = convertRulerValue(pixelValue, normalized)
+  let label
+  if (normalized === 'px') {
+    const rounded = Math.round(converted)
+    const absolute = Math.abs(rounded)
+    if (absolute >= 1000000) label = `${Number((rounded / 1000000).toFixed(1))}m`
+    else if (absolute >= 10000) label = `${Number((rounded / 1000).toFixed(1))}k`
+    else label = String(rounded)
+  } else {
+    const precision = Math.abs(converted) < 10 ? 2 : Math.abs(converted) < 100 ? 1 : 0
+    label = String(Number(converted.toFixed(precision)))
+  }
+  return suffix ? `${label} ${normalized}` : label
+}

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

@@ -43,7 +43,7 @@ export default function PaintBucketSidebar() {
           {FILLS.map((fill) => <button key={fill.value} type="button" onClick={() => setFillStyle(fill.value)} className={`flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition ${fillStyle === fill.value ? 'bg-accent text-white' : 'text-text-secondary hover:bg-surface-hover'}`}><span className="h-1.5 w-1.5 rounded-full bg-current" />{fill.label}</button>)}
         </div>
       </ToolbarButton>
-      <div className="max-w-[185px] px-2 text-[10px] leading-4 text-text-dim">Click a rectangle or circle to apply the selected fill.</div>
+      <div className="max-w-[185px] px-2 text-[10px] leading-4 text-text-dim">Fill rectangles, circles, frames, and closed freehand shapes. Lines and arrows are left unchanged.</div>
     </ShapeSidebar>
   )
 }

package/src/react/store/useSketchStore.js

@@ -1,7 +1,9 @@
 import { create } from 'zustand'
+import { DEFAULT_CANVAS_BACKGROUNDS, canvasBackgroundStorageKey, readCanvasBackground } from '../utils/canvasBackgrounds'
 
 const GRID_STORAGE_KEY = 'lixsketch-grid-enabled'
 const RULER_STORAGE_KEY = 'lixsketch-rulers-enabled'
+const RULER_UNIT_STORAGE_KEY = 'lixsketch-ruler-unit'
 
 // Tool enum replaces 15 boolean flags
 export const TOOLS = {
@@ -193,13 +195,22 @@ const useSketchStore = create((set, get) => ({
   setPanStart: (p) => set({ panStart: p }),
 
   // --- Canvas background ---
-  canvasBackground: 'var(--lixsketch-bg, #15111f)',
-  setCanvasBackground: (color) => {
-    set({ canvasBackground: color })
+  canvasBackground: DEFAULT_CANVAS_BACKGROUNDS.dark,
+  canvasBackgrounds: { ...DEFAULT_CANVAS_BACKGROUNDS },
+  setCanvasBackground: (color, theme = 'dark') => {
+    const resolved = theme === 'light' ? 'light' : 'dark'
+    set((state) => ({ canvasBackground: color, canvasBackgrounds: { ...state.canvasBackgrounds, [resolved]: color } }))
     if (typeof window !== 'undefined') {
+      try { localStorage.setItem(canvasBackgroundStorageKey(resolved), color) } catch {}
       requestAnimationFrame(() => window.__adaptCanvasContrast?.(color))
     }
   },
+  restoreCanvasBackground: (theme) => {
+    const resolved = theme === 'light' ? 'light' : 'dark'
+    const color = readCanvasBackground(resolved, typeof window === 'undefined' ? null : localStorage)
+    set((state) => ({ canvasBackground: color, canvasBackgrounds: { ...state.canvasBackgrounds, [resolved]: color } }))
+    if (typeof window !== 'undefined') requestAnimationFrame(() => window.__adaptCanvasContrast?.(color))
+  },
 
   // --- Grid ---
   gridEnabled: false,
@@ -222,6 +233,7 @@ const useSketchStore = create((set, get) => ({
 
   // --- Rulers ---
   rulersEnabled: false,
+  rulerUnit: 'px',
   toggleRulers: () => set((s) => {
     const rulersEnabled = !s.rulersEnabled
     if (typeof window !== 'undefined') {
@@ -229,6 +241,13 @@ const useSketchStore = create((set, get) => ({
     }
     return { rulersEnabled }
   }),
+  setRulerUnit: (unit) => {
+    const rulerUnit = ['px', 'cm', 'in'].includes(unit) ? unit : 'px'
+    if (typeof window !== 'undefined') {
+      try { localStorage.setItem(RULER_UNIT_STORAGE_KEY, rulerUnit) } catch {}
+    }
+    set({ rulerUnit })
+  },
   hydrateRulers: () => {
     if (typeof window === 'undefined') return
     try {
@@ -236,6 +255,8 @@ const useSketchStore = create((set, get) => ({
       if (saved === 'true' || saved === 'false') {
         set({ rulersEnabled: saved === 'true' })
       }
+      const savedUnit = localStorage.getItem(RULER_UNIT_STORAGE_KEY)
+      if (['px', 'cm', 'in'].includes(savedUnit)) set({ rulerUnit: savedUnit })
     } catch {}
   },
 

package/src/react/store/useUIStore.js

@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import useSketchStore from './useSketchStore'
 
 export const MAX_WORKSPACE_NAME_LENGTH = 20
 
@@ -111,6 +112,20 @@ function invertShapeColors(prevResolved, nextResolved) {
   }
 }
 
+function readStoredTheme() {
+  if (typeof window === 'undefined') return 'dark'
+  try {
+    const theme = localStorage.getItem('theme')
+    if (theme && ['dark', 'light', 'system'].includes(theme)) return theme
+  } catch {}
+  try {
+    const prefs = JSON.parse(localStorage.getItem('lix_ui_prefs') || '{}')
+    return ['dark', 'light', 'system'].includes(prefs.theme) ? prefs.theme : 'dark'
+  } catch {
+    return 'dark'
+  }
+}
+
 function applyTheme(theme) {
   // Issue #38 bug #1: scope theme to body classes so light mode only
   // affects the canvas, not the landing/blog pages. Token values live
@@ -215,7 +230,7 @@ const useUIStore = create((set, get) => ({
   setCanvasLoading: (loading, message) => set({ canvasLoading: loading, canvasLoadingMessage: message || 'Loading canvas...' }),
 
   // --- Theme ---
-  theme: 'dark',
+  theme: readStoredTheme(),
   setTheme: (newTheme) => {
     const prev = get().theme
     const resolve = (t) => t === 'system'
@@ -224,6 +239,14 @@ const useUIStore = create((set, get) => ({
     invertShapeColors(resolve(prev), resolve(newTheme))
     applyTheme(newTheme)
     set({ theme: newTheme })
+    useSketchStore.getState().restoreCanvasBackground(resolve(newTheme))
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('theme', newTheme)
+        const prefs = JSON.parse(localStorage.getItem('lix_ui_prefs') || '{}')
+        localStorage.setItem('lix_ui_prefs', JSON.stringify({ ...prefs, theme: newTheme }))
+      } catch {}
+    }
   },
 
   // --- Language / i18n ---

package/src/react/utils/canvasBackgrounds.js

@@ -0,0 +1,29 @@
+export const CANVAS_BACKGROUNDS = {
+  light: [
+    { color: '#FBE4DB', label: 'menu.canvasBg.white' },
+    { color: '#F6DBC0', label: 'menu.canvasBg.cream' },
+    { color: '#F5EED2', label: 'menu.canvasBg.paper' },
+    { color: '#F5F2ED', label: 'menu.canvasBg.skyTint' },
+    { color: '#F5DABF', label: 'menu.canvasBg.sageTint' },
+  ],
+  dark: [
+    { color: '#000000', label: 'menu.canvasBg.black' },
+    { color: '#161718', label: 'menu.canvasBg.darkGray' },
+    { color: '#15111f', label: 'menu.canvasBg.blueBlack' },
+    { color: '#181605', label: 'menu.canvasBg.darkYellow' },
+    { color: '#1B1615', label: 'menu.canvasBg.darkBrown' },
+  ],
+}
+
+export const DEFAULT_CANVAS_BACKGROUNDS = { dark: '#15111f', light: '#F5F2ED' }
+export const canvasBackgroundStorageKey = (theme) => `lixsketch-canvas-background-${theme}`
+
+export function readCanvasBackground(theme, storage) {
+  const resolved = theme === 'light' ? 'light' : 'dark'
+  try {
+    const stored = storage?.getItem(canvasBackgroundStorageKey(resolved))
+    const match = CANVAS_BACKGROUNDS[resolved].find(({ color }) => color.toLowerCase() === stored?.toLowerCase())
+    if (match) return match.color
+  } catch {}
+  return DEFAULT_CANVAS_BACKGROUNDS[resolved]
+}

package/src/shapes/Circle.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
+import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
 // Circle shape class - extracted from drawCircle.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
 
@@ -432,18 +433,17 @@ class Circle {
     }
     isNearAnchor(x, y) {
         if (!this.isSelected) return null;
-        const buffer = 10 / currentZoom; // Scale buffer by zoom level
-        const anchorSize = 10 / currentZoom; // Scale anchor size by zoom level
+        const zoom = window.currentZoom || 1;
+        const buffer = 10 / zoom; // Scale buffer by zoom level
+        const anchorSize = 10 / zoom; // Scale anchor size by zoom level
+        const transform = { x: this.x, y: this.y, rotation: this.rotation, centerX: 0, centerY: 0 };
 
         // Iterate through anchors
         for (let i = 0; i < this.anchors.length; i++) {
             const anchor = this.anchors[i];
             const anchorLocalX = parseFloat(anchor.getAttribute('x')) + anchorSize / 2;
             const anchorLocalY = parseFloat(anchor.getAttribute('y')) + anchorSize / 2;
-            const svgPoint = svg.createSVGPoint();
-            svgPoint.x = anchorLocalX;
-            svgPoint.y = anchorLocalY;
-            const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+            const transformedPoint = localToCanvas({ x: anchorLocalX, y: anchorLocalY }, transform);
             
             const anchorLeft = transformedPoint.x - anchorSize/2 - buffer;
             const anchorRight = transformedPoint.x + anchorSize/2 + buffer;
@@ -459,12 +459,9 @@ class Circle {
         if (this.rotationAnchor) {
             const rotateAnchorLocalX = parseFloat(this.rotationAnchor.getAttribute('cx'));
             const rotateAnchorLocalY = parseFloat(this.rotationAnchor.getAttribute('cy'));
-            const svgPoint = svg.createSVGPoint();
-            svgPoint.x = rotateAnchorLocalX;
-            svgPoint.y = rotateAnchorLocalY;
-            const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+            const transformedPoint = localToCanvas({ x: rotateAnchorLocalX, y: rotateAnchorLocalY }, transform);
             
-            const rotateAnchorRadius = parseFloat(this.rotationAnchor.getAttribute('r')) / currentZoom;
+            const rotateAnchorRadius = parseFloat(this.rotationAnchor.getAttribute('r'));
             const distSq = (x - transformedPoint.x)**2 + (y - transformedPoint.y)**2;
             if (distSq <= (rotateAnchorRadius + buffer)**2) {
                 return { type: 'rotate' };
@@ -475,14 +472,10 @@ class Circle {
     }
 
     updatePosition(anchorIndex, newMouseX, newMouseY) {
-        const CTM = this.group.getCTM();
-        if (!CTM) return;
-    
-        const inverseCTM = CTM.inverse();
-        const svgPoint = svg.createSVGPoint();
-        svgPoint.x = newMouseX;
-        svgPoint.y = newMouseY;
-        const transformedPoint = svgPoint.matrixTransform(inverseCTM);
+        const transformedPoint = canvasToLocal(
+            { x: newMouseX, y: newMouseY },
+            { x: this.x, y: this.y, rotation: this.rotation, centerX: 0, centerY: 0 },
+        );
     
         const dx = transformedPoint.x;
         const dy = transformedPoint.y;

package/src/shapes/Frame.js

@@ -101,6 +101,36 @@ class Frame {
         let fillValue = "transparent";
         if (this.fillStyle === 'solid') {
             fillValue = this.fillColor;
+        } else if (['hachure', 'cross-hatch', 'dots'].includes(this.fillStyle)) {
+            const patternId = `frame-fill-${this.shapeID}`;
+            let pattern = defs.querySelector(`#${patternId}`);
+            if (!pattern) {
+                pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
+                pattern.setAttribute('id', patternId);
+                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+                defs.appendChild(pattern);
+            }
+            pattern.setAttribute('width', 10);
+            pattern.setAttribute('height', 10);
+            while (pattern.firstChild) pattern.removeChild(pattern.firstChild);
+            if (this.fillStyle === 'dots') {
+                const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                dot.setAttribute('cx', 5);
+                dot.setAttribute('cy', 5);
+                dot.setAttribute('r', 1.5);
+                dot.setAttribute('fill', this.fillColor);
+                pattern.appendChild(dot);
+            } else {
+                const hatch = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                hatch.setAttribute('d', this.fillStyle === 'cross-hatch'
+                    ? 'M-2 2L2-2M0 10L10 0M8 12L12 8M-2 8L2 12M0 0L10 10M8-2L12 2'
+                    : 'M-2 2L2-2M0 10L10 0M8 12L12 8');
+                hatch.setAttribute('fill', 'none');
+                hatch.setAttribute('stroke', this.fillColor);
+                hatch.setAttribute('stroke-width', 1.5);
+                pattern.appendChild(hatch);
+            }
+            fillValue = `url(#${patternId})`;
         } else if (this.fillStyle === 'grid') {
             // Create or update a grid pattern unique to this frame
             const patternId = `frame-grid-${this.shapeID}`;
@@ -426,6 +456,14 @@ move(dx, dy) {
     this.updateClipPath();
 }
 
+finalizeMove() {
+    this.containedShapes.forEach(shape => {
+        if (shape && typeof shape.finalizeMove === 'function') {
+            shape.finalizeMove();
+        }
+    });
+}
+
     handleResizeLegacy(anchorIndex, currentPos, startPos, initialFrame) {
     // Legacy version - superseded by the handleResize below with contained shapes scaling
     const dx = currentPos.x - startPos.x;
@@ -1409,75 +1447,6 @@ restoreToFrame(shape) {
         this.draw();
     }
 
-    destroy() {
-        const isDiagramFrame = !!this._diagramType;
-
-        [...this.containedShapes].forEach(shape => {
-            if (isDiagramFrame) {
-                // Diagram/graph frame: destroy contained shapes with the frame
-                if (typeof window.cleanupAttachments === 'function') {
-                    window.cleanupAttachments(shape);
-                }
-                const el = shape.group || shape.element;
-                if (el && el.parentNode) {
-                    el.parentNode.removeChild(el);
-                }
-                if (shape.shapeName === 'frame') {
-                    if (shape.clipGroup && shape.clipGroup.parentNode) {
-                        shape.clipGroup.parentNode.removeChild(shape.clipGroup);
-                    }
-                    if (shape.clipPath && shape.clipPath.parentNode) {
-                        shape.clipPath.parentNode.removeChild(shape.clipPath);
-                    }
-                }
-                const idx = shapes.indexOf(shape);
-                if (idx > -1) {
-                    shapes.splice(idx, 1);
-                }
-            } else {
-                // Regular frame: release contained shapes back to canvas
-                const el = shape.group || shape.element;
-                if (el) {
-                    if (el.parentNode === this.clipGroup) {
-                        this.clipGroup.removeChild(el);
-                    }
-                    svg.appendChild(el);
-                }
-                if (shape.shapeName === 'frame' && shape.clipGroup) {
-                    if (shape.clipGroup.parentNode === this.clipGroup) {
-                        this.clipGroup.removeChild(shape.clipGroup);
-                    }
-                    svg.appendChild(shape.clipGroup);
-                }
-            }
-            shape.parentFrame = null;
-            delete shape.isBeingMovedByFrame;
-        });
-        this.containedShapes = [];
-
-        // Remove clip path
-        if (this.clipPath && this.clipPath.parentNode) {
-            this.clipPath.parentNode.removeChild(this.clipPath);
-        }
-
-        // Remove groups (clipGroup should be empty now)
-        if (this.clipGroup && this.clipGroup.parentNode) {
-            this.clipGroup.parentNode.removeChild(this.clipGroup);
-        }
-
-        if (this.group && this.group.parentNode) {
-            this.group.parentNode.removeChild(this.group);
-        }
-
-        const index = shapes.indexOf(this);
-        if (index > -1) {
-            shapes.splice(index, 1);
-        }
-        if (currentShape === this) {
-            currentShape = null;
-        }
-    }
-
     /**
      * Set a background image for this frame from a URL.
      * The image will fit/cover the frame dimensions.

package/src/shapes/FreehandStroke.js

@@ -69,6 +69,8 @@ class FreehandStroke {
         this.selectionOutline = null;
         this.boundingBox = { x: 0, y: 0, width: 0, height: 0 };
         this.shapeName = "freehandStroke";
+        this.shapeID = `freehand-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 10000)}`;
+        this.group.setAttribute('id', this.shapeID);
         this._moveOffsetX = 0;
         this._moveOffsetY = 0;
 
@@ -304,7 +306,16 @@ class FreehandStroke {
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         const pathData = this.getPathData();
         path.setAttribute('d', pathData);
-        path.setAttribute('fill', this.options.stroke);
+        const closedFillStyle = this.options.fillStyle || 'solid';
+        const closedFill = closedFillStyle === 'none'
+            ? 'transparent'
+            : (this.options.fill || this.options.stroke);
+        const patternedFill = this.options.closedFill
+            && !['none', 'solid'].includes(closedFillStyle)
+            && typeof rough !== 'undefined';
+        path.setAttribute('fill', this.options.closedFill
+            ? (patternedFill ? 'transparent' : closedFill)
+            : this.options.stroke);
         path.setAttribute('fill-opacity', this.options.strokeOpacity);
         path.setAttribute('stroke', this.options.closedFill ? (this.options.outlineStroke || 'none') : 'none');
         if (this.options.closedFill) {
@@ -330,6 +341,18 @@ class FreehandStroke {
             this.group.appendChild(overlay);
         }
 
+        if (patternedFill) {
+            const fillGroup = rough.svg(svg).path(pathData, {
+                stroke: 'none',
+                fill: closedFill,
+                fillStyle: closedFillStyle,
+                fillWeight: Math.max(1, (this.options.strokeWidth || 2) / 2),
+                roughness: 0.8,
+            });
+            fillGroup.setAttribute('data-freehand-fill-pattern', closedFillStyle);
+            this.group.appendChild(fillGroup);
+        }
+
         this.element = path;
         this.group.appendChild(path);
 

package/src/shapes/Rectangle.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
+import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
 // Rectangle shape class - extracted from drawSquare.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
 
@@ -640,18 +641,17 @@ class Rectangle {
      // Helper to check if a point is near an anchor
      isNearAnchor(x, y) {
          if (!this.isSelected) return null;
-         const buffer = 10; 
-         const anchorSize = 10; 
+         const zoom = window.currentZoom || 1;
+         const buffer = 10 / zoom;
+         const anchorSize = 10 / zoom;
+         const transform = { x: this.x, y: this.y, rotation: this.rotation, centerX: this.width / 2, centerY: this.height / 2 };
 
          // Iterate through anchors
          for (let i = 0; i < this.anchors.length; i++) {
              const anchor = this.anchors[i];
              const anchorLocalX = parseFloat(anchor.getAttribute('x')) + anchorSize / 2;
              const anchorLocalY = parseFloat(anchor.getAttribute('y')) + anchorSize / 2;
-             const svgPoint = svg.createSVGPoint();
-             svgPoint.x = anchorLocalX;
-             svgPoint.y = anchorLocalY;
-             const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+             const transformedPoint = localToCanvas({ x: anchorLocalX, y: anchorLocalY }, transform);
              const anchorLeft = transformedPoint.x - anchorSize/2 - buffer;
              const anchorRight = transformedPoint.x + anchorSize/2 + buffer;
              const anchorTop = transformedPoint.y - anchorSize/2 - buffer;
@@ -665,10 +665,7 @@ class Rectangle {
          if (this.rotationAnchor) {
              const rotateAnchorLocalX = parseFloat(this.rotationAnchor.getAttribute('cx'));
              const rotateAnchorLocalY = parseFloat(this.rotationAnchor.getAttribute('cy'));
-             const svgPoint = svg.createSVGPoint();
-             svgPoint.x = rotateAnchorLocalX;
-             svgPoint.y = rotateAnchorLocalY;
-             const transformedPoint = svgPoint.matrixTransform(this.group.getCTM());
+             const transformedPoint = localToCanvas({ x: rotateAnchorLocalX, y: rotateAnchorLocalY }, transform);
              const rotateAnchorRadius = parseFloat(this.rotationAnchor.getAttribute('r'));
              const distSq = (x - transformedPoint.x)**2 + (y - transformedPoint.y)**2;
              if (distSq <= (rotateAnchorRadius + buffer)**2) {
@@ -729,16 +726,10 @@ updateFrameContainment() {
 }
 
     updatePosition(anchorIndex, newMouseX, newMouseY) {
-        const CTM = this.group.getCTM();
-        if (!CTM) return;
-        const inverseCTM = CTM.inverse();
-        const svgPoint = svg.createSVGPoint();
-        svgPoint.x = newMouseX;
-        svgPoint.y = newMouseY;
-        const localMouse = svgPoint.matrixTransform(inverseCTM);
-
         const oldW = this.width;
         const oldH = this.height;
+        const transform = { x: this.x, y: this.y, rotation: this.rotation, centerX: oldW / 2, centerY: oldH / 2 };
+        const localMouse = canvasToLocal({ x: newMouseX, y: newMouseY }, transform);
 
         // Determine fixed point in old local coords and compute raw new dimensions
         let fixedOldX, fixedOldY, rawW, rawH;
@@ -754,10 +745,7 @@ updateFrameContainment() {
         }
 
         // Get world position of the fixed point using current CTM
-        const fp = svg.createSVGPoint();
-        fp.x = fixedOldX;
-        fp.y = fixedOldY;
-        const fixedWorld = fp.matrixTransform(CTM);
+        const fixedWorld = localToCanvas({ x: fixedOldX, y: fixedOldY }, transform);
 
         // Handle negative dimensions (dragged past opposite edge)
         const newW = Math.abs(rawW);