feat: click-drag drawing, layer tree, settings modal, UI improvements

- interaction: click-drag drawing for 2-point tools (line, rect, circle, dimension, leader)
- interaction: preview rendering during drag with setPreviewElement
- interaction: handleDrawDown only sets phase=drawing on first point
- CanvasArea: sync activeLayerId to LayerManager
- CanvasArea: callback refresh useEffect prevents stale closures
- App.tsx: functional setElements updates for handleElementCreated/Deleted/Modified
- LayerPanel: tree structure with sub-layers (onReorder, onAddSubLayer)
- TreeView: drag-and-drop reordering support
- RightSidebar: onReorder, onAddSubLayer, onUpdateElement props
- PropertiesPanel: onUpdateElement prop
- SettingsModal: personal/password/language/theme/users/plugins/AI tabs
- styles.css: extensive UI styling additions
- types: updated RightSidebarProps, CanvasAreaProps, LayerPanelProps

frontend/src/canvas/RenderEngine.ts

@@ -43,6 +43,7 @@ export class RenderEngine {
   private selection: SelectionState;
   private snapPoints: SnapPoint[] = [];
   private activeSnapPoint: SnapPoint | null = null;
+  private previewElement: CADElement | null = null;
   private dpr = 1;
 
   constructor(
@@ -102,6 +103,10 @@ export class RenderEngine {
     this.activeSnapPoint = pt;
   }
 
+  setPreviewElement(el: CADElement | null): void {
+    this.previewElement = el;
+  }
+
   resize(width: number, height: number): void {
     this.dpr = window.devicePixelRatio || 1;
     this.canvas.width = width * this.dpr;
@@ -152,6 +157,16 @@ export class RenderEngine {
       }
     }
 
+    // Draw preview element with dashed style
+    if (this.previewElement) {
+      this.ctx.save();
+      this.ctx.setLineDash([6, 4]);
+      const previewEl: CADElement = { ...this.previewElement, properties: { ...this.previewElement.properties, stroke: '#00aaff', strokeWidth: 2 } };
+      const previewLayer: CADLayer = { id: '__preview__', name: 'Preview', visible: true, locked: false, color: '#00aaff', lineType: 'solid', transparency: 0, sortOrder: 999, parentId: null };
+      this.drawElement(previewEl, previewLayer);
+      this.ctx.restore();
+    }
+
     this.drawSelectionBox();
     if (this.options.showSnapPoints) this.drawSnapPoints();
     if (this.options.showOrtho) this.drawOrtho();