@elixpo/lixsketch 5.6.5 → 5.6.7

package/src/core/UndoRedo.js

@@ -5,6 +5,22 @@
 const undoStack = [];
 const redoStack = [];
 
+export function beginUndoBatch() {
+    return { startIndex: undoStack.length };
+}
+
+export function endUndoBatch(batch, label = 'batch') {
+    if (!batch || !Number.isInteger(batch.startIndex)) return;
+    const startIndex = Math.min(Math.max(batch.startIndex, 0), undoStack.length);
+    let actions = undoStack.splice(startIndex);
+    if (actions.length === 0) return;
+    const groupedAction = actions.length === 1 ? actions[0] : { type: 'batch', label, actions };
+    undoStack.push(groupedAction);
+    redoStack.length = 0;
+    notifyCollaboration();
+    return groupedAction;
+}
+
 // Import references to text-related variables and functions
 let selectedElement = null;
 let updateSelectionFeedback = null;
@@ -58,6 +74,9 @@ export function pushDeleteAction(shape, meta = null) {
     // when the frame is restored, instead of leaving an empty box.
     const action = { type: 'delete', shape };
     if (meta && meta.childSnapshot) action.childSnapshot = meta.childSnapshot;
+    if (Number.isInteger(meta?.shapeIndex)) action.shapeIndex = meta.shapeIndex;
+    if (meta?.parentFrame) action.parentFrame = meta.parentFrame;
+    if (Number.isInteger(meta?.frameIndex)) action.frameIndex = meta.frameIndex;
     undoStack.push(action);
 
     // Clear redo stack when new action is performed
@@ -65,6 +84,30 @@ export function pushDeleteAction(shape, meta = null) {
     notifyCollaboration();
 }
 
+export function pushCanvasResetAction(snapshot, restore, reset) {
+    if (!snapshot || typeof restore !== 'function' || typeof reset !== 'function') return;
+    // A reset is a new history boundary. Older per-shape actions reference
+    // objects that the scene loader will replace, so only the atomic reset
+    // snapshot remains undoable.
+    undoStack.length = 0;
+    redoStack.length = 0;
+    undoStack.push({ type: 'canvasReset', snapshot, restore, reset });
+}
+
+export function invalidateCanvasResetUndo() {
+    for (let index = undoStack.length - 1; index >= 0; index -= 1) {
+        if (undoStack[index]?.type === 'canvasReset') undoStack.splice(index, 1);
+    }
+    for (let index = redoStack.length - 1; index >= 0; index -= 1) {
+        if (redoStack[index]?.type === 'canvasReset') redoStack.splice(index, 1);
+    }
+}
+
+export function clearUndoHistory() {
+    undoStack.length = 0;
+    redoStack.length = 0;
+}
+
 // Enhanced delete action to clean up attached arrows
 export function pushDeleteActionWithAttachments(shape) {
     let affectedArrows = [];
@@ -442,6 +485,15 @@ export function pushOptionsChangeAction(shape, oldOptions, newOptions = null) {
     notifyCollaboration();
 }
 
+function applyOptionsSnapshot(shape, options) {
+    shape.options = { ...options };
+    if (shape.shapeName === 'frame') {
+        shape.fillColor = options.fillColor;
+        shape.fillStyle = options.fillStyle;
+    }
+    shape.draw();
+}
+
 // Issue #34 bug #4: refresh the multi-selection outline + handles so it
 // follows the reverted geometry. Without this the selection rect stays
 // pinned to the pre-undo coordinates and the user sees a ghost rect
@@ -454,10 +506,54 @@ function refreshSelectionAfterAction() {
     try { ms.updateControls(); } catch (err) { console.warn('[UndoRedo] selection refresh failed:', err); }
 }
 
+function restoreDeletedShapeFrame(action) {
+    const frame = action.parentFrame;
+    const shape = action.shape;
+    if (!frame || !shape || typeof frame.addShapeToFrame !== 'function') return;
+    frame.addShapeToFrame(shape);
+    if (Number.isInteger(action.frameIndex) && Array.isArray(frame.containedShapes)) {
+        const currentIndex = frame.containedShapes.indexOf(shape);
+        if (currentIndex >= 0) frame.containedShapes.splice(currentIndex, 1);
+        const targetIndex = Math.min(Math.max(action.frameIndex, 0), frame.containedShapes.length);
+        frame.containedShapes.splice(targetIndex, 0, shape);
+        const element = shape.group || shape.element;
+        const nextShape = frame.containedShapes[targetIndex + 1];
+        const nextElement = nextShape?.group || nextShape?.element;
+        if (element && frame.clipGroup && nextElement?.parentNode === frame.clipGroup) {
+            frame.clipGroup.insertBefore(element, nextElement);
+        }
+    }
+}
+
+function detachDeletedShapeFrame(action) {
+    const frame = action.parentFrame;
+    const shape = action.shape;
+    if (frame && shape && typeof frame.removeShapeFromFrame === 'function' && shape.parentFrame === frame) {
+        frame.removeShapeFromFrame(shape);
+    }
+}
+
 export function undo() {
     if (undoStack.length === 0) return;
     const action = undoStack.pop();
     try {
+    if (action.type === 'batch') {
+        for (let index = action.actions.length - 1; index >= 0; index -= 1) {
+            undoStack.push(action.actions[index]);
+            undo();
+            redoStack.pop();
+        }
+        redoStack.push(action);
+        return;
+    }
+
+    if (action.type === 'canvasReset') {
+        action.restore(action.snapshot);
+        redoStack.push(action);
+        notifyCollaboration();
+        return;
+    }
+
     if (action.type === 'frameTransform') {
         // Handle frame transformation undo
         action.shape.x = action.oldPos.x;
@@ -652,7 +748,12 @@ export function undo() {
             action.shape.restore();
         } else {
             // Handle other shape deletion undo
-            shapes.push(action.shape);
+            if (shapes.indexOf(action.shape) === -1) {
+                const index = Number.isInteger(action.shapeIndex)
+                    ? Math.min(Math.max(action.shapeIndex, 0), shapes.length)
+                    : shapes.length;
+                shapes.splice(index, 0, action.shape);
+            }
             if (svg) {
                 svg.appendChild(action.shape.group);
             }
@@ -684,6 +785,7 @@ export function undo() {
                 }
             }
         }
+        restoreDeletedShapeFrame(action);
         redoStack.push(action);
         return;
     }
@@ -959,8 +1061,7 @@ export function undo() {
             action.shape.draw();
         } else {
             // Handle other shape options change undo
-            action.shape.options = action.oldOptions;
-            action.shape.draw();
+            applyOptionsSnapshot(action.shape, action.oldOptions);
         }
         redoStack.push(action);
         return;
@@ -975,6 +1076,23 @@ export function redo() {
     if (redoStack.length === 0) return;
     const action = redoStack.pop();
     try {
+    if (action.type === 'batch') {
+        for (const childAction of action.actions) {
+            redoStack.push(childAction);
+            redo();
+            undoStack.pop();
+        }
+        undoStack.push(action);
+        return;
+    }
+
+    if (action.type === 'canvasReset') {
+        action.reset();
+        undoStack.push(action);
+        notifyCollaboration();
+        return;
+    }
+
     if (action.type === 'frameTransform') {
         // Handle frame transformation redo
         action.shape.x = action.newPos.x;
@@ -1137,6 +1255,7 @@ export function redo() {
 }
     
     if (action.type === 'delete') {
+        detachDeletedShapeFrame(action);
         if (action.shape.type === 'text') {
             // Handle text deletion redo
             if ((action.shape.element || action.shape).parentNode) {
@@ -1453,8 +1572,7 @@ export function redo() {
             action.shape.arrowCurveAmount = action.newOptions.arrowCurveAmount;
             action.shape.draw();
         } else {
-            action.shape.options = { ...action.newOptions };
-            action.shape.draw();
+            applyOptionsSnapshot(action.shape, action.newOptions);
         }
         undoStack.push(action);
         return;
@@ -1484,6 +1602,9 @@ document.getElementById('redo')?.addEventListener('click', redo);
 // Expose globally for plain scripts
 window.pushCreateAction = pushCreateAction;
 window.pushDeleteAction = pushDeleteAction;
+window.pushCanvasResetAction = pushCanvasResetAction;
+window.invalidateCanvasResetUndo = invalidateCanvasResetUndo;
+window.clearUndoHistory = clearUndoHistory;
 window.pushDeleteActionWithAttachments = pushDeleteActionWithAttachments;
 window.pushTransformAction = pushTransformAction;
 window.pushOptionsChangeAction = pushOptionsChangeAction;

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;