@elixpo/lixsketch 5.6.9 → 5.6.11

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

@@ -95,7 +95,10 @@ export default function IconSidebar() {
 
   useEffect(() => {
     if (!visible) return
-    const frame = requestAnimationFrame(() => searchInputRef.current?.focus())
+    // Focusing a transformed, previously off-screen input can make the
+    // browser scroll its nearest canvas pane horizontally. Keep focus for
+    // keyboard search without allowing it to move the viewport.
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus({ preventScroll: true }))
     return () => cancelAnimationFrame(frame)
   }, [visible])
 
@@ -181,11 +184,14 @@ export default function IconSidebar() {
     }
   }, [])
 
+  // Keep the closed picker out of the DOM instead of translating it beyond
+  // the canvas bounds. This guarantees it cannot affect host layout or focus
+  // scrolling in embedded/package consumers.
+  if (!visible) return null
+
   return (
     <div
-      className={`absolute top-[60px] right-2 bottom-[112px] w-[300px] bg-surface border border-border-light rounded-2xl z-[999] font-[lixFont] flex flex-col transition-transform duration-200 ${
-        visible ? 'translate-x-0' : 'translate-x-full'
-      }`}
+      className="absolute top-[60px] right-2 bottom-[112px] w-[300px] bg-surface border border-border-light rounded-2xl z-[999] font-[lixFont] flex flex-col"
     >
       {/* Header */}
       <div className="px-3.5 pt-3.5 pb-2 shrink-0">

package/src/react/components/sidebars/RectangleSidebar.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 RectangleSidebar() {
   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')
@@ -68,10 +74,10 @@ export default function RectangleSidebar() {
       {/* Stroke color */}
       <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 />
@@ -130,7 +136,7 @@ export default function RectangleSidebar() {
               }`}
             >
               <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" />
+                <line x1="0" y1="2" x2="28" y2="2" stroke="currentColor" strokeWidth="2" strokeDasharray={s.d} strokeLinecap="round" />
               </svg>
             </button>
           ))}

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

@@ -7,7 +7,7 @@ import useSketchStore from '../../store/useSketchStore'
  * A toolbar button that opens a popover panel above it on click.
  * Shows an icon (or custom preview) in the bar, popover shows full options.
  */
-export function ToolbarButton({ icon, preview, children, tooltip }) {
+export function ToolbarButton({ icon, preview, children, tooltip, label = tooltip }) {
   const [open, setOpen] = useState(false)
   const ref = useRef(null)
 
@@ -24,15 +24,19 @@ export function ToolbarButton({ icon, preview, children, tooltip }) {
   return (
     <div ref={ref} className="relative flex items-center">
       <button
+        type="button"
         onClick={() => setOpen(!open)}
         title={tooltip}
-        className={`h-9 flex items-center gap-1.5 px-3 rounded-lg transition-all duration-100 ${
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        className={`h-9 flex cursor-pointer items-center gap-1.5 rounded-lg border px-2.5 transition-all duration-100 ${
           open
-            ? 'bg-accent-blue/20 text-accent-blue'
-            : 'text-text-muted hover:text-text-primary hover:bg-surface-hover'
+            ? 'border-border-accent bg-accent-blue/20 text-accent-blue'
+            : 'border-transparent text-text-muted hover:border-border-light hover:bg-surface-hover hover:text-text-primary'
         }`}
       >
         {preview || (icon && <i className={`bx ${icon} text-base`} />)}
+        {label && <span className="whitespace-nowrap text-[11px] font-medium">{label}</span>}
         <svg className={`w-2 h-2 opacity-40 transition-transform duration-100 ${open ? 'rotate-180' : ''}`} viewBox="0 0 8 5" fill="none" stroke="currentColor" strokeWidth="1.5">
           <path d="M1 1l3 3 3-3" />
         </svg>
@@ -55,7 +59,7 @@ export function ToolbarButton({ icon, preview, children, tooltip }) {
  * Simple toolbar divider
  */
 function Divider() {
-  return <div className="w-px h-5 bg-surface-hover mx-0.5 shrink-0" />
+  return <div className="mx-0.5 h-6 w-px shrink-0 bg-border-light" aria-hidden="true" />
 }
 
 /**
@@ -67,13 +71,13 @@ export default function ShapeSidebar({ visible, children }) {
 
   return (
     <div
-      className={`absolute bottom-14 left-1/2 -translate-x-1/2 bg-surface border border-border-light rounded-xl px-2 py-1.5 z-[999] font-[lixFont] transition-all duration-200 ${
+      className={`absolute bottom-14 left-1/2 z-[999] max-w-[calc(100vw-24px)] -translate-x-1/2 overflow-x-auto rounded-xl border border-border-light bg-surface px-1.5 py-1.5 font-[lixFont] transition-all duration-200 ${
         show
           ? 'opacity-100 pointer-events-auto translate-y-0'
           : 'opacity-0 pointer-events-none translate-y-2'
       }`}
     >
-      <div className="flex items-center gap-0.5">
+      <div className="flex min-w-max items-center gap-1">
         {children}
       </div>
     </div>
@@ -93,37 +97,25 @@ function LayerControls() {
     window.__layerOrder[method](shape)
   }
 
+  const actions = [
+    ['sendToBack', 'bx-chevrons-down', t('sidebar.sendToBack', { defaultValue: 'Send to back' })],
+    ['sendBackward', 'bx-chevron-down', t('sidebar.sendBackward')],
+    ['bringForward', 'bx-chevron-up', t('sidebar.bringForward')],
+    ['bringToFront', 'bx-chevrons-up', t('sidebar.bringToFront', { defaultValue: 'Bring to front' })],
+  ]
+
   return (
-    <div className="flex items-center gap-0.5">
-      <button
-        onClick={() => doLayer('sendToBack')}
-        title={t('sidebar.sendToBack', { defaultValue: 'Send to back' })}
-        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
-      >
-        <i className="bx bx-chevrons-down text-base" />
-      </button>
-      <button
-        onClick={() => doLayer('sendBackward')}
-        title={t('sidebar.sendBackward')}
-        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
-      >
-        <i className="bx bx-chevron-down text-base" />
-      </button>
-      <button
-        onClick={() => doLayer('bringForward')}
-        title={t('sidebar.bringForward')}
-        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
-      >
-        <i className="bx bx-chevron-up text-base" />
-      </button>
-      <button
-        onClick={() => doLayer('bringToFront')}
-        title={t('sidebar.bringToFront', { defaultValue: 'Bring to front' })}
-        className="h-9 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-100"
-      >
-        <i className="bx bx-chevrons-up text-base" />
-      </button>
-    </div>
+    <ToolbarButton icon="bx-layer" tooltip="Arrange" label="Arrange">
+      <p className="mb-2 text-xs uppercase tracking-wider text-text-muted">Layer order</p>
+      <div className="grid grid-cols-2 gap-1">
+        {actions.map(([method, icon, label]) => (
+          <button key={method} type="button" onClick={() => doLayer(method)} className="flex min-w-32 cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left text-xs text-text-secondary transition hover:bg-surface-hover hover:text-text-primary">
+            <i className={`bx ${icon} text-base`} aria-hidden="true" />
+            <span>{label}</span>
+          </button>
+        ))}
+      </div>
+    </ToolbarButton>
   )
 }
 

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

@@ -4,8 +4,9 @@ import useSketchStore, { TOOLS } from '../../store/useSketchStore'
 import ShapeSidebar, { ToolbarButton, Divider, LayerControls } from './ShapeSidebar'
 import { useState, useCallback, useEffect } from 'react'
 import { useTranslation } from '../../hooks/useTranslation'
+import useUIStore from '../../store/useUIStore'
 
-const TEXT_COLORS = ['#1a1a20', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
+const TEXT_COLORS = ['#000000', '#ffffff', '#FF8383', '#3A994C', '#56A2E8', '#FFD700', '#FF69B4', '#A855F7']
 
 const FONTS = [
   { value: 'lixFont', label: 'Lix' },
@@ -26,7 +27,12 @@ export default function TextSidebar() {
   const { t } = useTranslation()
   const activeTool = useSketchStore((s) => s.activeTool)
   const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
-  const [textColor, setTextColor] = 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 [textColor, setTextColor] = useState(null)
+  const displayedTextColor = textColor ?? (resolvedTheme === 'light' ? '#000000' : '#ffffff')
   const [fontSize, setFontSize] = useState('S')
   const [font, setFont] = useState('lixFont')
   const [codeMode, setCodeMode] = useState(false)
@@ -81,13 +87,13 @@ export default function TextSidebar() {
     <ShapeSidebar visible={visible}>
       {/* Color */}
       <ToolbarButton tooltip={t('sidebar.textColor')}
-        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: textColor }} />}
+        preview={<span className="w-4 h-4 rounded-md border border-white/20" style={{ backgroundColor: displayedTextColor }} />}
       >
         <p className="text-xs text-text-muted uppercase tracking-wider mb-2">{t('sidebar.color')}</p>
         <div className="grid grid-cols-4 gap-1.5">
           {TEXT_COLORS.map((c) => (
             <button key={c} onClick={() => updateColor(c)}
-              className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${textColor === c ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
+              className={`w-7 h-7 rounded-md border-[1.5px] transition-all duration-100 ${displayedTextColor.toLowerCase() === c.toLowerCase() ? 'border-[#7667a8] scale-110' : 'border-white/[0.08] hover:border-white/20'}`}
               style={{ backgroundColor: c }}
             />
           ))}

package/src/react/store/useUIStore.js

@@ -105,6 +105,13 @@ function invertShapeColors(prevResolved, nextResolved) {
         shape.strokeColor = to
         changed = true
       }
+      if (shape.labelColor !== undefined) {
+        const labelColor = normalize(shape.labelColor)
+        if (labelColor === from || labelColor === '#e0e0e0' || labelColor === '#e8e3f3') {
+          shape.labelColor = to
+          changed = true
+        }
+      }
     }
     if (changed && typeof shape.draw === 'function') {
       shape.draw()
@@ -140,7 +147,7 @@ function applyTheme(theme) {
   body.classList.add(`theme-${resolved}`)
 
   const svgEl = window.svg
-  if (svgEl) svgEl.style.background = resolved === 'light' ? '#fbf9fd' : '#15111f'
+  if (svgEl) svgEl.style.background = resolved === 'light' ? '#ffffff' : '#15111f'
 }
 
 const useUIStore = create((set, get) => ({

package/src/react/styles.css

@@ -35,6 +35,19 @@
 
 .theme-light .lixsketch-canvas-root {
   --lix-icon-filter: none;
+  --lixsketch-bg: #ffffff;
+}
+
+.theme-light .lixsketch-canvas-root :is(
+  .anchor,
+  .resize-anchor,
+  .resize-handle,
+  .rotate-anchor,
+  .rotation-anchor,
+  .multi-selection-anchor,
+  .multi-selection-rotation-anchor
+) {
+  fill: #ffffff !important;
 }
 
 .theme-dark .lixsketch-canvas-root {

package/src/react/utils/canvasBackgrounds.js

@@ -1,6 +1,6 @@
 export const CANVAS_BACKGROUNDS = {
   light: [
-    { color: '#FBE4DB', label: 'menu.canvasBg.white' },
+    { color: '#FFFFFF', label: 'menu.canvasBg.white' },
     { color: '#F6DBC0', label: 'menu.canvasBg.cream' },
     { color: '#F5EED2', label: 'menu.canvasBg.paper' },
     { color: '#F5F2ED', label: 'menu.canvasBg.skyTint' },
@@ -15,13 +15,22 @@ export const CANVAS_BACKGROUNDS = {
   ],
 }
 
-export const DEFAULT_CANVAS_BACKGROUNDS = { dark: '#15111f', light: '#F5F2ED' }
+export const DEFAULT_CANVAS_BACKGROUNDS = { dark: '#15111f', light: '#FFFFFF' }
+const LEGACY_LIGHT_DEFAULT = '#F5F2ED'
+const LIGHT_DEFAULT_MIGRATION_KEY = 'lixsketch-canvas-light-default-v2'
 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))
+    if (resolved === 'light' && storage?.getItem(LIGHT_DEFAULT_MIGRATION_KEY) !== '1') {
+      storage?.setItem?.(LIGHT_DEFAULT_MIGRATION_KEY, '1')
+      if (stored?.toLowerCase() === LEGACY_LIGHT_DEFAULT.toLowerCase()) {
+        storage?.setItem?.(canvasBackgroundStorageKey(resolved), DEFAULT_CANVAS_BACKGROUNDS.light)
+        return DEFAULT_CANVAS_BACKGROUNDS.light
+      }
+    }
     const match = CANVAS_BACKGROUNDS[resolved].find(({ color }) => color.toLowerCase() === stored?.toLowerCase())
     if (match) return match.color
   } catch {}

package/src/shapes/Arrow.js

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import { resolveThemeLabelColor } from '../utils/themeColors.js';
 // Arrow shape class - extracted from drawArrow.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom
 
@@ -54,7 +55,7 @@ class Arrow {
         // Embedded label support
         this.label = options.label || '';
         this.labelElement = null;
-        this.labelColor = options.labelColor || '#e0e0e0';
+        this.labelColor = resolveThemeLabelColor(options.labelColor);
         this.labelFontSize = options.labelFontSize || 12;
         this.labelBg = options.labelBg !== false; // labelBg:false → no knockout rect behind label
         this.labelOffsetY = options.labelOffsetY || 0; // shift label along the perpendicular of the line, e.g. lift it clear of the stroke
@@ -784,7 +785,7 @@ class Arrow {
 
     addAnchors() {
         const anchorSize = 5 / currentZoom;
-        const anchorStrokeWidth = 2 / currentZoom;
+        const anchorStrokeWidth = 2;
 
         let anchorPositions = [this.startPoint, this.endPoint];
 
@@ -2030,4 +2031,4 @@ updateFrameContainment() {
     }
 }
 
-export { Arrow };
+export { Arrow };

package/src/shapes/Circle.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
+import { resolveThemeLabelColor } from '../utils/themeColors.js';
 // Circle shape class - extracted from drawCircle.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
 
@@ -30,6 +31,11 @@ class Circle {
             strokeDasharray: "",
             ...options
         };
+        // RoughJS otherwise generates a different contour on every redraw.
+        // Keep a stable contour for later edits and the final drawing render.
+        if (!Number.isInteger(this.options.seed) || this.options.seed <= 0) {
+            this.options.seed = Math.floor(Math.random() * 0x7fffffff) + 1;
+        }
         this.element = null;
         this.isSelected = false;
         this.rotation = 0;
@@ -48,7 +54,7 @@ class Circle {
         // Embedded label support
         this.label = options.label || '';
         this.labelElement = null;
-        this.labelColor = options.labelColor || '#e0e0e0';
+        this.labelColor = resolveThemeLabelColor(options.labelColor);
         this.labelFontSize = options.labelFontSize || 14;
         this._isEditingLabel = false;
         this._hitArea = null;
@@ -60,6 +66,9 @@ class Circle {
         this.shadeDirection = options.shadeDirection || 'bottom';
         this._shadeEllipse = null;
         this._shadeGradient = null;
+        this.isBeingDrawn = false;
+        this._drawingRenderFrame = null;
+        this._isLivePreviewElement = false;
 
         if(!this.group.parentNode) {
             svg.appendChild(this.group);
@@ -105,7 +114,27 @@ class Circle {
         const isInitialDraw = this.element === null;
         const sizeChanged = this.rx !== this._lastDrawn.rx || this.ry !== this._lastDrawn.ry;
         const optionsChanged = optionsString !== this._lastDrawn.options;
-        if (isInitialDraw || optionsChanged || sizeChanged) {
+        if (this.isBeingDrawn) {
+            if (!this._isLivePreviewElement) {
+                if (this.element && this.element.parentNode === this.group) {
+                    this.group.removeChild(this.element);
+                }
+                this.element = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
+                this.element.setAttribute('class', 'circle-drawing-preview');
+                this.element.setAttribute('pointer-events', 'none');
+                this.group.appendChild(this.element);
+                this._isLivePreviewElement = true;
+            }
+
+            this.element.setAttribute('cx', 0);
+            this.element.setAttribute('cy', 0);
+            this.element.setAttribute('rx', this.rx);
+            this.element.setAttribute('ry', this.ry);
+            this.element.setAttribute('fill', this.options.fill || 'transparent');
+            this.element.setAttribute('stroke', this.options.stroke || '#fff');
+            this.element.setAttribute('stroke-width', this.options.strokeWidth || 2);
+            this.element.setAttribute('stroke-dasharray', this.options.strokeDasharray || '');
+        } else if (isInitialDraw || optionsChanged || sizeChanged || this._isLivePreviewElement) {
             if (this.element && this.element.parentNode === this.group) {
                 this.group.removeChild(this.element);
             }
@@ -113,6 +142,7 @@ class Circle {
             const roughEllipse = rc.ellipse(0, 0, this.rx * 2, this.ry * 2, this.options);
             this.element = roughEllipse;
             this.group.appendChild(roughEllipse);
+            this._isLivePreviewElement = false;
 
             this._lastDrawn.rx = this.rx;
             this._lastDrawn.ry = this.ry;
@@ -151,6 +181,31 @@ class Circle {
         }
     }
 
+    scheduleDrawingRender() {
+        if (this._drawingRenderFrame !== null) return;
+        if (typeof requestAnimationFrame !== 'function') {
+            this.draw();
+            return;
+        }
+        this._drawingRenderFrame = requestAnimationFrame(() => {
+            this._drawingRenderFrame = null;
+            this.draw();
+        });
+    }
+
+    cancelDrawingRender() {
+        if (this._drawingRenderFrame !== null && typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(this._drawingRenderFrame);
+        }
+        this._drawingRenderFrame = null;
+        this.isBeingDrawn = false;
+    }
+
+    finalizeDrawing() {
+        this.cancelDrawingRender();
+        this.draw();
+    }
+
     move(dx, dy) {
         this.x += dx;
         this.y += dy;
@@ -343,6 +398,7 @@ class Circle {
         const pointsAttr = outlinePoints.map(p => p.join(',')).join(' ');
         const outline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
         outline.setAttribute('points', pointsAttr);
+        outline.setAttribute('class', 'selection-outline');
         outline.setAttribute('fill', 'none');
         outline.setAttribute('stroke', '#5B57D1');
         outline.setAttribute('stroke-width', 1.5);

package/src/shapes/Frame.js

@@ -4,6 +4,7 @@
 
 import { cleanupAttachments } from '../tools/arrowTool.js';
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
+import { captureFrameChildStates } from '../core/UndoRedo.js';
 
 function getSVGCoordsFromMouse(e) {
     const viewBox = svg.viewBox.baseVal;
@@ -434,8 +435,9 @@ move(dx, dy) {
                 shape.y += dy;
             }
 
-            // Force redraw for shapes whose move() doesn't auto-redraw
-            if (typeof shape.draw === 'function') {
+            // Line.move() batches its own render to one animation frame.
+            // Calling draw() here would regenerate it immediately as well.
+            if (shape.shapeName !== 'line' && typeof shape.draw === 'function') {
                 shape.draw();
             }
 
@@ -768,6 +770,7 @@ startLabelEdit(labelElement) {
 
         const padding = 20;
         const oldState = { x: this.x, y: this.y, width: this.width, height: this.height, rotation: this.rotation };
+        oldState.containedShapes = captureFrameChildStates(this);
 
         this.x = minX - padding;
         this.y = minY - padding;
@@ -795,7 +798,7 @@ startLabelEdit(labelElement) {
 
     addAnchors() {
     const anchorSize = 8 / currentZoom;
-    const anchorStrokeWidth = 2 / currentZoom;
+    const anchorStrokeWidth = 2;
 
     // Calculate anchor positions (corners + midpoints + rotation handle)
     const anchorPositions = [
@@ -821,6 +824,7 @@ startLabelEdit(labelElement) {
 
     // Create selection outline first (behind anchors)
     const outline = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    outline.setAttribute('class', 'selection-outline');
     outline.setAttribute('x', this.x);
     outline.setAttribute('y', this.y);
     outline.setAttribute('width', this.width);
@@ -855,6 +859,7 @@ startLabelEdit(labelElement) {
             anchor.setAttribute("stroke", "#5B57D1"); 
             anchor.setAttribute("stroke-width", anchorStrokeWidth);
             anchor.setAttribute("vector-effect", "non-scaling-stroke");
+            anchor.setAttribute("class", "rotate-anchor");
 
             // Add rotation line
             const rotationLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -891,6 +896,7 @@ startLabelEdit(labelElement) {
             anchor.setAttribute("stroke", "#5B57D1"); 
             anchor.setAttribute("stroke-width", anchorStrokeWidth);
             anchor.setAttribute("vector-effect", "non-scaling-stroke");
+            anchor.setAttribute("class", "anchor");
         }
 
         // Apply rotation to anchor if needed
@@ -918,7 +924,8 @@ startLabelEdit(labelElement) {
             y: this.y,
             width: this.width,
             height: this.height,
-            rotation: this.rotation
+            rotation: this.rotation,
+            containedShapes: captureFrameChildStates(this),
         };
 
         const startMousePos = getSVGCoordsFromMouse(e);

package/src/shapes/FreehandStroke.js

@@ -573,7 +573,7 @@ class FreehandStroke {
 
     addAnchors() {
     const anchorSize = 10 / currentZoom;
-    const anchorStrokeWidth = 2 / currentZoom;
+    const anchorStrokeWidth = 2;
     
     const expandedX = this.boundingBox.x - this.selectionPadding;
     const expandedY = this.boundingBox.y - this.selectionPadding;
@@ -645,6 +645,7 @@ class FreehandStroke {
     ];
     
     const outline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+    outline.setAttribute('class', 'selection-outline');
     outline.setAttribute('points', outlinePoints.map(p => p.join(',')).join(' '));
     outline.setAttribute('fill', 'none');
     outline.setAttribute('stroke', '#5B57D1');

package/src/shapes/Line.js

@@ -2,14 +2,15 @@
 // Line shape class - extracted from lineTool.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom
 import { updateAttachedArrows as updateArrowsForShape } from '../tools/arrowTool.js';
+import { resolveThemeLabelColor } from '../utils/themeColors.js';
 
 const rc = rough.svg(svg);
 // Issue #38 follow-up: read the default stroke from the active theme
 // instead of pinning to a single colour. White was invisible on the new
-// light canvas, near-black is invisible if the user toggles dark.
+// light canvas, black is invisible if the user toggles dark.
 function getThemeStroke() {
     if (typeof document === 'undefined') return '#fff';
-    return document.body && document.body.classList.contains('theme-dark') ? '#fff' : '#1a1a2e';
+    return document.body && document.body.classList.contains('theme-dark') ? '#fff' : '#000000';
 }
 const lineStrokeWidth = 2;
 let hoveredFrameLine = null;
@@ -19,6 +20,12 @@ class Line {
         this.startPoint = startPoint;
         this.endPoint = endPoint;
         this.options = { ...options };
+        // RoughJS otherwise chooses a fresh random stroke on every redraw.
+        // A stable per-line seed keeps the hand-drawn contour visually fixed
+        // while its endpoints move.
+        if (!Number.isInteger(this.options.seed) || this.options.seed <= 0) {
+            this.options.seed = Math.floor(Math.random() * 0x7fffffff) + 1;
+        }
         this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
         this.isSelected = false;
         this.anchors = [];
@@ -37,11 +44,12 @@ class Line {
         // Embedded label support
         this.label = options.label || '';
         this.labelElement = null;
-        this.labelColor = options.labelColor || '#e0e0e0';
+        this.labelColor = resolveThemeLabelColor(options.labelColor);
         this.labelFontSize = options.labelFontSize || 12;
         this._isEditingLabel = false;
         this._hitArea = null;
         this._labelBg = null;
+        this._dragRenderFrame = null;
 
         svg.appendChild(this.group);
         this._setupLabelDblClick();
@@ -431,7 +439,7 @@ removeSelection() {
     this.anchors = [];
     
     const anchorSize = 10 / (currentZoom || 1);
-    const anchorStrokeWidth = 2 / (currentZoom || 1);
+    const anchorStrokeWidth = 2;
     
     // Start point anchor
     const startAnchor = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
@@ -537,7 +545,38 @@ removeSelection() {
             };
         }
 
-        // Full redraw to keep anchors, hit area, and label in sync
+        this.scheduleDragRender();
+    }
+
+    scheduleDragRender() {
+        if (this._dragRenderFrame !== null) return;
+        if (typeof requestAnimationFrame !== 'function') {
+            this.renderDragGeometry();
+            return;
+        }
+        this._dragRenderFrame = requestAnimationFrame(() => {
+            this._dragRenderFrame = null;
+            this.renderDragGeometry();
+        });
+    }
+
+    renderDragGeometry() {
+        this.updateLineElement();
+        this.updateAnchorPositions();
+        if (this._hitArea) {
+            const path = this.isCurved && this.controlPoint
+                ? `M ${this.startPoint.x} ${this.startPoint.y} Q ${this.controlPoint.x} ${this.controlPoint.y} ${this.endPoint.x} ${this.endPoint.y}`
+                : `M ${this.startPoint.x} ${this.startPoint.y} L ${this.endPoint.x} ${this.endPoint.y}`;
+            this._hitArea.setAttribute('d', path);
+        }
+        this._updateLabelElement();
+    }
+
+    finalizeMove() {
+        if (this._dragRenderFrame !== null && typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(this._dragRenderFrame);
+        }
+        this._dragRenderFrame = null;
         this.draw();
     }
 
@@ -620,21 +659,9 @@ removeSelection() {
             this.controlPoint.y += dy;
         }
 
-        // Update without full redraw to prevent jitter
-        this.updateLineElement();
-        this.updateAnchorPositions();
-
-        // Update hit area path
-        if (this._hitArea) {
-            if (this.isCurved && this.controlPoint) {
-                this._hitArea.setAttribute('d', `M ${this.startPoint.x} ${this.startPoint.y} Q ${this.controlPoint.x} ${this.controlPoint.y} ${this.endPoint.x} ${this.endPoint.y}`);
-            } else {
-                this._hitArea.setAttribute('d', `M ${this.startPoint.x} ${this.startPoint.y} L ${this.endPoint.x} ${this.endPoint.y}`);
-            }
-        }
-
-        // Update label position
-        this._updateLabelElement();
+        // Multiple pointer/snap updates in one browser frame collapse into a
+        // single DOM + RoughJS update.
+        this.scheduleDragRender();
 
         // Only update frame containment if not being moved by a parent frame
         if (!this.isBeingMovedByFrame) {