feat: Implement CRDT-based layout system for Vue nodes

Major refactor to solve snap-back issues and create single source of truth for node positions:

- Add Yjs-based CRDT layout store for conflict-free position management
- Implement layout mutations service with clean API
- Create Vue composables for layout access and node dragging
- Add one-way sync from layout store to LiteGraph
- Disable LiteGraph dragging when Vue nodes mode is enabled
- Add z-index management with bring-to-front on node interaction
- Add comprehensive TypeScript types for layout system
- Include unit tests for layout store operations
- Update documentation to reflect CRDT architecture

This provides a solid foundation for both single-user performance and future real-time collaboration features.

Co-Authored-By: Claude <noreply@anthropic.com>

src/composables/graph/useGraphNodeManager.ts

@@ -4,6 +4,7 @@
  */
 import { nextTick, reactive, readonly } from 'vue'
 
+import { layoutMutations } from '@/services/layoutMutations'
 import type { WidgetValue } from '@/types/simplifiedWidget'
 import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
 
@@ -482,6 +483,11 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       currentPos.y !== node.pos[1]
     ) {
       nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+
+      // Push position change to layout store
+      // Source is already set to 'canvas' in detectChangesInRAF
+      void layoutMutations.moveNode(id, { x: node.pos[0], y: node.pos[1] })
+
       return true
     }
     return false
@@ -499,6 +505,14 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       currentSize.height !== node.size[1]
     ) {
       nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+
+      // Push size change to layout store
+      // Source is already set to 'canvas' in detectChangesInRAF
+      void layoutMutations.resizeNode(id, {
+        width: node.size[0],
+        height: node.size[1]
+      })
+
       return true
     }
     return false
@@ -549,6 +563,9 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     let positionUpdates = 0
     let sizeUpdates = 0
 
+    // Set source for all canvas-driven updates
+    layoutMutations.setSource('canvas')
+
     // Process each node for changes
     for (const node of graph._nodes) {
       const id = String(node.id)
@@ -606,6 +623,15 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     }
     spatialIndex.insert(id, bounds, id)
 
+    // Add node to layout store
+    layoutMutations.setSource('canvas')
+    void layoutMutations.createNode(id, {
+      position: { x: node.pos[0], y: node.pos[1] },
+      size: { width: node.size[0], height: node.size[1] },
+      zIndex: node.order || 0,
+      visible: true
+    })
+
     // Call original callback if provided
     if (originalCallback) {
       void originalCallback(node)
@@ -624,6 +650,10 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     // Remove from spatial index
     spatialIndex.remove(id)
 
+    // Remove node from layout store
+    layoutMutations.setSource('canvas')
+    void layoutMutations.deleteNode(id)
+
     // Clean up all tracking references
     nodeRefs.delete(id)
     vueNodeData.delete(id)