fix: element creation fails with empty layer_id (FOREIGN KEY constraint)

Three fixes:
1. interaction/index.ts: Add layerId to created element in confirmDraw()
2. CanvasArea.tsx: Sync layers to LayerManager via layerManagerRef
3. App.tsx: Fallback to activeLayerId in handleElementCreated if layerId missing

Root cause: LayerManager.activeLayerId was empty because layers were never
synced from React state to the interaction layer LayerManager. New elements
got layer_id="" which failed SQLite FOREIGN KEY constraint.

Also includes Yjs sync race condition fix from previous commit.

frontend/src/App.tsx

@@ -277,10 +277,25 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
     // Skip if collab data is empty (not yet loaded)
     if (collab.elements.length === 0 && collab.layers.length === 0 && collab.blocks.length === 0) return;
 
-    // Only update local state if remote data differs
-    const sameElements = collab.elements.length === elements.length &&
-      collab.elements.every((el, i) => el.id === elements[i]?.id);
-    if (!sameElements) setElements(collab.elements);
+    // Only update local state if remote data differs AND local is not ahead of remote
+    // (prevents race condition where local element is overwritten by stale Yjs sync)
+    const localIds = new Set(elements.map(e => e.id));
+    const remoteIds = new Set(collab.elements.map(e => e.id));
+    const localHasExtra = elements.some(e => !remoteIds.has(e.id));
+    const remoteHasExtra = collab.elements.some(e => !localIds.has(e.id));
+    // Only sync from remote if remote has elements local doesn't have AND local doesn't have unsaved elements
+    if (remoteHasExtra && !localHasExtra) {
+      setElements(collab.elements);
+    } else if (remoteHasExtra && localHasExtra) {
+      // Merge: keep local elements, update any that changed remotely
+      const merged = elements.map(el => {
+        const remote = collab.elements.find(e => e.id === el.id);
+        return remote || el;
+      });
+      // Add remote-only elements
+      collab.elements.forEach(el => { if (!localIds.has(el.id)) merged.push(el); });
+      setElements(merged);
+    }
 
     const sameLayers = collab.layers.length === layers.length &&
       collab.layers.every((l, i) => l.id === layers[i]?.id);
@@ -293,8 +308,9 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
   }, [collab.elements, collab.layers, collab.blocks, collab.status]);
 
   const handleElementCreated = useCallback((el: CADElement) => {
+    const elWithLayer = el.layerId ? el : { ...el, layerId: activeLayerId };
     setElements((prev) => {
-      const newElements = [...prev, el];
+      const newElements = [...prev, elWithLayer];
       historyManagerRef.current.pushSnapshot({
         elements: newElements, layers, blocks, groups, bgConfig,
       }, 'Element erstellt');
@@ -302,18 +318,18 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
     });
     syncHistory();
     // Push to Yjs CRDT for real-time sync
-    collab.setElement(el);
+    collab.setElement(elWithLayer);
     // Save to backend
     if (drawingId && token) {
       setSavedStatus('Speichert…');
-      createElementTyped(token, drawingId, el).then(() => {
+      createElementTyped(token, drawingId, elWithLayer).then(() => {
         setSavedStatus('gespeichert');
       }).catch((err) => {
         console.error('Failed to save element:', err);
         setSavedStatus('Fehler beim Speichern');
       });
     }
-  }, [layers, blocks, groups, bgConfig, syncHistory, drawingId, token, collab]);
+  }, [layers, blocks, groups, bgConfig, syncHistory, drawingId, token, collab, activeLayerId]);
 
   const handleElementsDeleted = useCallback((ids: string[]) => {
     setElements((prev) => {