Revert "Add node slots to layout tree"

This reverts commit 460493a620.

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}

browser_tests/tests/vueNodes/NodeHeader.spec.ts

@@ -0,0 +1,138 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+
+test.describe('NodeHeader', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.setup()
+    // Load single SaveImage node workflow (positioned below menu bar)
+    await comfyPage.loadWorkflow('single_save_image_node')
+  })
+
+  test('displays node title', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('Save Image')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Save Image')
+  })
+
+  test('allows title renaming', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('handles node collapsing', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Initially should not be collapsed
+    expect(await node.isCollapsed()).toBe(false)
+    const body = await vueNode.getBody()
+    await expect(body).toBeVisible()
+
+    // Collapse the node
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(true)
+
+    // Verify node content is hidden
+    const collapsedSize = await node.getSize()
+    await expect(body).not.toBeVisible()
+
+    // Expand again
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(false)
+    await expect(body).toBeVisible()
+
+    // Size should be restored
+    const expandedSize = await node.getSize()
+    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+  })
+
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Check initial expanded state icon
+    let iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+
+    // Collapse and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-right')
+
+    // Expand and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+  })
+
+  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Set custom title
+    await vueNode.setTitle('Test Sampler')
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Collapse
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Expand
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Verify title is still displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Test Sampler')
+  })
+})

docs/architecture/graph-architecture-evolution.md

@@ -0,0 +1,177 @@
+# Graph Architecture Evolution
+
+A visual journey through the architectural transformation of ComfyUI's graph system.
+
+---
+
+## Slide 1: Traditional LiteGraph Architecture
+
+```
+┌─────────────────────────────────────┐
+│           LiteGraph Node            │
+│  ┌─────────────────────────────┐    │
+│  │  • Data (inputs/outputs)    │    │
+│  │  • UI (position, size)      │    │
+│  │  • Rendering (draw methods) │    │
+│  │  • Interaction (mouse)      │    │
+│  │  • Business Logic           │    │
+│  └─────────────────────────────┘    │
+│                                     │
+│  Everything tightly coupled in      │
+│  a single monolithic structure      │
+└─────────────────────────────────────┘
+```
+
+**Problem**: All concerns mixed together - data, UI, rendering, and interaction are inseparable.
+
+---
+
+## Slide 2: Separation of Concerns
+
+```
+┌─────────────────────┐     ┌──────────────────────┐
+│   Graph Data Model  │     │    Layout Tree       │
+├─────────────────────┤     ├──────────────────────┤
+│ • Node connections  │     │ • Node positions     │
+│ • Input/output data │     │ • Node sizes         │
+│ • Execution state   │     │ • Z-index/stacking   │
+│ • Business logic    │     │ • Visibility states  │
+│                     │     │ • Bounds/spatial     │
+│ Pure data structure │     │ Pure UI structure    │
+│ No UI concepts      │     │ No business logic    │
+└─────────────────────┘     └──────────────────────┘
+```
+
+**Benefit**: Clean separation - graph logic vs presentation concerns.
+
+---
+
+## Slide 3: Multiple Renderer Support
+
+```
+                    Layout Tree
+                         │
+        ┌────────────────┼────────────────┐
+        ▼                ▼                ▼
+┌──────────────┐ ┌──────────────┐ ┌──────────────┐
+│ Canvas Render│ │  Vue Render  │ │ Three.js 3D  │
+├──────────────┤ ├──────────────┤ ├──────────────┤
+│              │ │              │ │              │
+│   [Canvas]   │ │ <Component>  │ │   [WebGL]    │
+│              │ │ </Component> │ │              │
+└──────────────┘ └──────────────┘ └──────────────┘
+
+        ┌────────────────┼────────────────┐
+        ▼                ▼                ▼
+┌──────────────┐ ┌──────────────┐ ┌──────────────┐
+│ Native iOS   │ │Native Android│ │   Terminal   │
+├──────────────┤ ├──────────────┤ ├──────────────┤
+│   UIKit      │ │   Compose    │ │    ASCII     │
+└──────────────┘ └──────────────┘ └──────────────┘
+```
+
+**Power**: Same layout tree, infinite rendering possibilities.
+
+---
+
+## Slide 4: Alternative UI Paradigms
+
+```
+         Graph Data Model
+                │
+                ├─────── With Layout Tree ─────► Traditional Node UI
+                │
+                └─────── Without Layout ───────┐
+                                               ▼
+                                    ┌──────────────────┐
+                                    │   Form-Based UI  │
+                                    ├──────────────────┤
+                                    │ ┌──────────────┐ │
+                                    │ │ Input Fields │ │
+                                    │ ├──────────────┤ │
+                                    │ │   Sliders    │ │
+                                    │ ├──────────────┤ │
+                                    │ │   Buttons    │ │
+                                    │ └──────────────┘ │
+                                    │                  │
+                                    │ Like Gradio/A1111│
+                                    └──────────────────┘
+```
+
+**Flexibility**: Renderers can interpret the graph data model however they want.
+
+---
+
+## Slide 5: Service Architecture
+
+```
+┌─────────────────────┐     ┌──────────────────────┐
+│  Graph Mutations    │     │  Layout Mutations    │
+│      Service        │     │      Service         │
+├─────────────────────┤     ├──────────────────────┤
+│ • addNode()         │     │ • moveNode()         │
+│ • connectNodes()    │     │ • resizeNode()       │
+│ • updateNodeData()  │     │ • bringToFront()     │
+│ • executeGraph()    │     │ • setVisibility()    │
+└──────┬──────────────┘     └──────┬───────────────┘
+       │                            │
+       ▼                            ▼
+┌─────────────────────┐     ┌──────────────────────┐
+│   Graph Gateway     │     │   Layout Gateway     │
+│   (Interface)       │     │   (Interface)        │
+└─────────────────────┘     └──────────────────────┘
+```
+
+**Clean APIs**: Well-defined interfaces for all operations.
+
+---
+
+## Slide 6: Deployment Flexibility
+
+```
+┌────────────────────────────────────────────────┐
+│                 Graph Data Model               │
+│                 Layout System                  │
+│                 Service Layer                  │
+└─────────────┬───────────┬───────────┬──────────┘
+              │           │           │
+     Local    │   Cloud   │   Native  │   Hybrid
+         ▼          ▼          ▼          ▼
+    ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
+    │Browser │ │  AWS   │ │  iOS   │ │Electron│
+    │        │ │Lambda  │ │  App   │ │   +    │
+    │  Yjs   │ │   +    │ │   +    │ │  Rust  │
+    │ CRDT   │ │GraphQL │ │ Swift  │ │Backend │
+    └────────┘ └────────┘ └────────┘ └────────┘
+
+    Because everything is behind interfaces, easily switch implementations without major development effort:
+    • Move graph execution to GPU cluster
+    • Run layout calculations in WebAssembly
+    • Store state in any database
+    • Sync across any network protocol
+```
+
+**Ultimate Flexibility**: Plug and play any component, deploy anywhere.
+
+---
+
+## Summary
+
+By separating concerns and defining clear interfaces:
+
+1. **Data Model** → Pure business logic, no UI
+2. **Layout Tree** → Pure spatial data, no logic  
+3. **Renderers** → Consume what they need
+4. **Services** → Clean mutation APIs
+5. **Gateways** → Swappable implementations, automatically map across differing API versions or schemas
+
+This architecture enables:
+- Multiple simultaneous renderers
+- Alternative UI paradigms  
+- Cloud/edge/native deployment
+- Real-time collaboration
+- Time-travel debugging
+- Performance optimization per layer
+- Better performance for state observers and undo/redo
+
+The key insight: **When you separate concerns properly, everything becomes possible.**

docs/architecture/layout-system.md

@@ -0,0 +1,146 @@
+# Layout System Architecture
+
+## Overview
+
+The Layout System provides a single source of truth for node positions, sizes, and spatial data in the ComfyUI frontend. It uses CRDT (Conflict-free Replicated Data Types) via Yjs to eliminate snap-back issues and ownership conflicts between LiteGraph and Vue components.
+
+## Architecture
+
+```
+┌─────────────────────┐     ┌────────────────────┐
+│   Layout Store      │────▶│  LiteGraph Canvas  │
+│   (CRDT/Yjs)       │     │    (One-way sync)  │
+└────────┬────────────┘     └────────────────────┘
+         │
+         │  Mutations API
+         │
+┌────────▼────────────┐
+│   Vue Components    │
+│  (Read + Mutate)    │
+└─────────────────────┘
+```
+
+## Key Components
+
+### 1. Layout Store (`/src/stores/layoutStore.ts`)
+- **Yjs-based CRDT implementation** for conflict-free operations
+- **Single source of truth** for all layout data
+- **Reactive state** with Vue `customRef` for shared write access
+- **Spatial queries** - find nodes at point or in bounds
+- **Operation history** - tracks all changes with actor/source
+
+### 2. Layout Mutations (`/src/services/layoutMutations.ts`)
+- **Clean API** for modifying layout state
+- **Source tracking** - identifies where changes originated (canvas/vue/external)
+- **Direct operations** - no queuing, CRDT handles consistency
+
+### 3. Vue Integration (`/src/composables/graph/useLayout.ts`)
+- **`useLayout()`** - Access store and mutations
+- **`useNodeLayout(nodeId)`** - Per-node reactive data and drag handlers
+- **`useLayoutSync()`** - One-way sync from Layout to LiteGraph
+
+## Usage Examples
+
+### Basic Node Access
+```typescript
+const { store, mutations } = useLayout()
+
+// Get reactive node layout
+const nodeRef = store.getNodeLayoutRef('node-123')
+const position = computed(() => nodeRef.value?.position ?? { x: 0, y: 0 })
+```
+
+### Vue Component Integration
+```vue
+<script setup>
+const {
+  position,
+  nodeStyle,
+  startDrag,
+  handleDrag,
+  endDrag
+} = useNodeLayout(props.nodeId)
+</script>
+
+<template>
+  <div
+    :style="nodeStyle"
+    @pointerdown="startDrag"
+    @pointermove="handleDrag"
+    @pointerup="endDrag"
+  >
+    <!-- Node content -->
+  </div>
+</template>
+```
+
+## Performance Optimizations
+
+### 1. **Spatial Query Caching**
+- Cache for `queryNodesInBounds` results
+- Cleared on any mutation for consistency
+
+### 2. **Direct Transform Updates**
+- CSS `transform: translate()` for GPU acceleration
+- No layout recalculation during dragging
+- Smooth 60fps performance
+
+### 3. **CSS Containment**
+- `contain: layout style paint` on nodes
+- Isolates rendering for better performance
+
+### 4. **One-Way Data Flow**
+- Layout → LiteGraph only
+- Prevents circular updates and conflicts
+- Source tracking avoids sync loops
+
+## CRDT Benefits
+
+Using Yjs even for single-user mode provides:
+- **Zero race conditions** between Vue and Canvas updates
+- **Built-in operation tracking** for debugging
+- **Future-proof** - ready for real-time collaboration
+- **Minimal overhead** - Yjs is optimized for local operations
+
+## Node Stacking/Z-Index
+
+Based on LiteGraph's implementation:
+- Nodes are rendered in array order (later = on top)
+- Clicking a node brings it to front via `bringToFront()`
+- Z-index in layout store tracks rendering order
+- TODO: Implement interaction-based stacking
+
+## API Reference
+
+### LayoutStore Methods
+- `getNodeLayoutRef(nodeId)` - Get reactive node layout
+- `getAllNodes()` - Get all nodes as reactive Map
+- `getNodesInBounds(bounds)` - Reactive spatial query
+- `queryNodeAtPoint(point)` - Non-reactive point query
+- `queryNodesInBounds(bounds)` - Non-reactive bounds query
+- `initializeFromLiteGraph(nodes)` - Initialize from existing graph
+
+### LayoutMutations Methods
+- `moveNode(nodeId, position)` - Update node position
+- `resizeNode(nodeId, size)` - Update node size
+- `setNodeZIndex(nodeId, zIndex)` - Update rendering order
+- `createNode(nodeId, layout)` - Add new node
+- `deleteNode(nodeId)` - Remove node
+- `setSource(source)` - Set mutation source
+- `setActor(actor)` - Set actor for CRDT
+
+## Future Enhancements
+
+- [ ] Interaction-based z-index updates
+- [ ] QuadTree integration for O(log n) spatial queries
+- [ ] Undo/redo via operation history
+- [ ] Real-time collaboration via Yjs network adapters
+- [ ] Performance metrics collection
+
+## Debug Mode
+
+Enable debug logging in development or via console:
+```javascript
+localStorage.setItem('layout-debug', 'true')
+location.reload()
+```

package-lock.json

@@ -28,6 +28,7 @@
         "@xterm/xterm": "^5.5.0",
         "algoliasearch": "^5.21.0",
         "axios": "^1.8.2",
+        "chart.js": "^4.5.0",
         "dompurify": "^3.2.5",
         "dotenv": "^16.4.5",
         "extendable-media-recorder": "^9.2.27",
@@ -48,6 +49,7 @@
         "vue-i18n": "^9.14.3",
         "vue-router": "^4.4.3",
         "vuefire": "^3.2.1",
+        "yjs": "^13.6.27",
         "zod": "^3.23.8",
         "zod-validation-error": "^3.3.0"
       },
@@ -2745,6 +2747,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@langchain/core": {
       "version": "0.2.36",
       "resolved": "https://registry.npmjs.org/@langchain/core/-/core-0.2.36.tgz",
@@ -6321,6 +6329,18 @@
         "node": "*"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -10084,6 +10104,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
@@ -10887,6 +10916,26 @@
       "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
       "dev": true
     },
+    "node_modules/lib0": {
+      "version": "0.2.114",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
+      "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -17898,6 +17947,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/yjs": {
+      "version": "13.6.27",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
+      "integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",

package.json

@@ -94,6 +94,7 @@
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
+    "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "extendable-media-recorder": "^9.2.27",
@@ -114,6 +115,7 @@
     "vue-i18n": "^9.14.3",
     "vue-router": "^4.4.3",
     "vuefire": "^3.2.1",
+    "yjs": "^13.6.27",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   }

src/adapters/layoutAdapter.ts

@@ -0,0 +1,82 @@
+/**
+ * Layout Adapter Interface
+ *
+ * Abstracts the underlying CRDT implementation to allow for different
+ * backends (Yjs, Automerge, etc.) and easier testing.
+ */
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { NodeId, NodeLayout } from '@/types/layoutTypes'
+
+/**
+ * Change event emitted by the adapter
+ */
+export interface AdapterChange {
+  /** Type of change */
+  type: 'set' | 'delete' | 'clear'
+  /** Affected node IDs */
+  nodeIds: NodeId[]
+  /** Actor who made the change */
+  actor?: string
+}
+
+/**
+ * Layout adapter interface for CRDT abstraction
+ */
+export interface LayoutAdapter {
+  /**
+   * Set a node's layout data
+   */
+  setNode(nodeId: NodeId, layout: NodeLayout): void
+
+  /**
+   * Get a node's layout data
+   */
+  getNode(nodeId: NodeId): NodeLayout | null
+
+  /**
+   * Delete a node
+   */
+  deleteNode(nodeId: NodeId): void
+
+  /**
+   * Get all nodes
+   */
+  getAllNodes(): Map<NodeId, NodeLayout>
+
+  /**
+   * Clear all nodes
+   */
+  clear(): void
+
+  /**
+   * Add an operation to the log
+   */
+  addOperation(operation: LayoutOperation): void
+
+  /**
+   * Get operations since a timestamp
+   */
+  getOperationsSince(timestamp: number): LayoutOperation[]
+
+  /**
+   * Get operations by a specific actor
+   */
+  getOperationsByActor(actor: string): LayoutOperation[]
+
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback: (change: AdapterChange) => void): () => void
+
+  /**
+   * Transaction support for atomic updates
+   */
+  transaction(fn: () => void, actor?: string): void
+
+  /**
+   * Network sync methods (for future use)
+   */
+  getStateVector(): Uint8Array
+  getStateAsUpdate(): Uint8Array
+  applyUpdate(update: Uint8Array): void
+}

src/adapters/mockLayoutAdapter.ts

@@ -0,0 +1,137 @@
+/**
+ * Mock Layout Adapter
+ *
+ * Simple in-memory implementation for testing without CRDT overhead.
+ */
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { NodeId, NodeLayout } from '@/types/layoutTypes'
+
+import type { AdapterChange, LayoutAdapter } from './layoutAdapter'
+
+/**
+ * Mock implementation for testing
+ */
+export class MockLayoutAdapter implements LayoutAdapter {
+  private nodes = new Map<NodeId, NodeLayout>()
+  private operations: LayoutOperation[] = []
+  private changeCallbacks = new Set<(change: AdapterChange) => void>()
+  private currentActor?: string
+
+  setNode(nodeId: NodeId, layout: NodeLayout): void {
+    this.nodes.set(nodeId, { ...layout })
+    this.notifyChange({
+      type: 'set',
+      nodeIds: [nodeId],
+      actor: this.currentActor
+    })
+  }
+
+  getNode(nodeId: NodeId): NodeLayout | null {
+    const layout = this.nodes.get(nodeId)
+    return layout ? { ...layout } : null
+  }
+
+  deleteNode(nodeId: NodeId): void {
+    const existed = this.nodes.delete(nodeId)
+    if (existed) {
+      this.notifyChange({
+        type: 'delete',
+        nodeIds: [nodeId],
+        actor: this.currentActor
+      })
+    }
+  }
+
+  getAllNodes(): Map<NodeId, NodeLayout> {
+    // Return a copy to prevent external mutations
+    const copy = new Map<NodeId, NodeLayout>()
+    for (const [id, layout] of this.nodes) {
+      copy.set(id, { ...layout })
+    }
+    return copy
+  }
+
+  clear(): void {
+    const nodeIds = Array.from(this.nodes.keys())
+    this.nodes.clear()
+    this.operations = []
+
+    if (nodeIds.length > 0) {
+      this.notifyChange({
+        type: 'clear',
+        nodeIds,
+        actor: this.currentActor
+      })
+    }
+  }
+
+  addOperation(operation: LayoutOperation): void {
+    this.operations.push({ ...operation })
+  }
+
+  getOperationsSince(timestamp: number): LayoutOperation[] {
+    return this.operations
+      .filter((op) => op.timestamp > timestamp)
+      .map((op) => ({ ...op }))
+  }
+
+  getOperationsByActor(actor: string): LayoutOperation[] {
+    return this.operations
+      .filter((op) => op.actor === actor)
+      .map((op) => ({ ...op }))
+  }
+
+  subscribe(callback: (change: AdapterChange) => void): () => void {
+    this.changeCallbacks.add(callback)
+    return () => this.changeCallbacks.delete(callback)
+  }
+
+  transaction(fn: () => void, actor?: string): void {
+    const previousActor = this.currentActor
+    this.currentActor = actor
+    try {
+      fn()
+    } finally {
+      this.currentActor = previousActor
+    }
+  }
+
+  // Mock network sync methods
+  getStateVector(): Uint8Array {
+    return new Uint8Array([1, 2, 3]) // Mock data
+  }
+
+  getStateAsUpdate(): Uint8Array {
+    // Simple serialization for testing
+    const json = JSON.stringify({
+      nodes: Array.from(this.nodes.entries()),
+      operations: this.operations
+    })
+    return new TextEncoder().encode(json)
+  }
+
+  applyUpdate(update: Uint8Array): void {
+    // Simple deserialization for testing
+    const json = new TextDecoder().decode(update)
+    const data = JSON.parse(json) as {
+      nodes: Array<[NodeId, NodeLayout]>
+      operations: LayoutOperation[]
+    }
+
+    this.nodes.clear()
+    for (const [id, layout] of data.nodes) {
+      this.nodes.set(id, layout)
+    }
+    this.operations = data.operations
+  }
+
+  private notifyChange(change: AdapterChange): void {
+    this.changeCallbacks.forEach((callback) => {
+      try {
+        callback(change)
+      } catch (error) {
+        console.error('Error in mock adapter change callback:', error)
+      }
+    })
+  }
+}

src/adapters/yjsLayoutAdapter.ts

@@ -0,0 +1,202 @@
+/**
+ * Yjs Layout Adapter
+ *
+ * Implements the LayoutAdapter interface using Yjs as the CRDT backend.
+ * Provides efficient local state management with future collaboration support.
+ */
+import * as Y from 'yjs'
+
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { Bounds, NodeId, NodeLayout, Point } from '@/types/layoutTypes'
+
+import type { AdapterChange, LayoutAdapter } from './layoutAdapter'
+
+/**
+ * Yjs implementation of the layout adapter
+ */
+export class YjsLayoutAdapter implements LayoutAdapter {
+  private ydoc: Y.Doc
+  private ynodes: Y.Map<Y.Map<unknown>>
+  private yoperations: Y.Array<LayoutOperation>
+  private changeCallbacks = new Set<(change: AdapterChange) => void>()
+
+  constructor() {
+    this.ydoc = new Y.Doc()
+    this.ynodes = this.ydoc.getMap('nodes')
+    this.yoperations = this.ydoc.getArray('operations')
+
+    // Set up change observation
+    this.ynodes.observe((event, transaction) => {
+      const change: AdapterChange = {
+        type: 'set', // Yjs doesn't distinguish set/delete in observe
+        nodeIds: [],
+        actor: transaction.origin as string | undefined
+      }
+
+      // Collect affected node IDs
+      event.changes.keys.forEach((changeType, key) => {
+        change.nodeIds.push(key)
+        if (changeType.action === 'delete') {
+          change.type = 'delete'
+        }
+      })
+
+      // Notify subscribers
+      this.notifyChange(change)
+    })
+  }
+
+  /**
+   * Set a node's layout data
+   */
+  setNode(nodeId: NodeId, layout: NodeLayout): void {
+    const ynode = this.layoutToYNode(layout)
+    this.ynodes.set(nodeId, ynode)
+  }
+
+  /**
+   * Get a node's layout data
+   */
+  getNode(nodeId: NodeId): NodeLayout | null {
+    const ynode = this.ynodes.get(nodeId)
+    return ynode ? this.yNodeToLayout(ynode) : null
+  }
+
+  /**
+   * Delete a node
+   */
+  deleteNode(nodeId: NodeId): void {
+    this.ynodes.delete(nodeId)
+  }
+
+  /**
+   * Get all nodes
+   */
+  getAllNodes(): Map<NodeId, NodeLayout> {
+    const result = new Map<NodeId, NodeLayout>()
+    for (const [nodeId] of this.ynodes) {
+      const ynode = this.ynodes.get(nodeId)
+      if (ynode) {
+        result.set(nodeId, this.yNodeToLayout(ynode))
+      }
+    }
+    return result
+  }
+
+  /**
+   * Clear all nodes
+   */
+  clear(): void {
+    this.ynodes.clear()
+  }
+
+  /**
+   * Add an operation to the log
+   */
+  addOperation(operation: LayoutOperation): void {
+    this.yoperations.push([operation])
+  }
+
+  /**
+   * Get operations since a timestamp
+   */
+  getOperationsSince(timestamp: number): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op) => {
+      if (op && op.timestamp > timestamp) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  /**
+   * Get operations by a specific actor
+   */
+  getOperationsByActor(actor: string): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op) => {
+      if (op && op.actor === actor) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback: (change: AdapterChange) => void): () => void {
+    this.changeCallbacks.add(callback)
+    return () => this.changeCallbacks.delete(callback)
+  }
+
+  /**
+   * Transaction support for atomic updates
+   */
+  transaction(fn: () => void, actor?: string): void {
+    this.ydoc.transact(fn, actor)
+  }
+
+  /**
+   * Get the current state vector for sync
+   */
+  getStateVector(): Uint8Array {
+    return Y.encodeStateVector(this.ydoc)
+  }
+
+  /**
+   * Get state as update for sending to peers
+   */
+  getStateAsUpdate(): Uint8Array {
+    return Y.encodeStateAsUpdate(this.ydoc)
+  }
+
+  /**
+   * Apply updates from remote peers
+   */
+  applyUpdate(update: Uint8Array): void {
+    Y.applyUpdate(this.ydoc, update)
+  }
+
+  /**
+   * Convert layout to Yjs structure
+   */
+  private layoutToYNode(layout: NodeLayout): Y.Map<unknown> {
+    const ynode = new Y.Map<unknown>()
+    ynode.set('id', layout.id)
+    ynode.set('position', layout.position)
+    ynode.set('size', layout.size)
+    ynode.set('zIndex', layout.zIndex)
+    ynode.set('visible', layout.visible)
+    ynode.set('bounds', layout.bounds)
+    return ynode
+  }
+
+  /**
+   * Convert Yjs structure to layout
+   */
+  private yNodeToLayout(ynode: Y.Map<unknown>): NodeLayout {
+    return {
+      id: ynode.get('id') as string,
+      position: ynode.get('position') as Point,
+      size: ynode.get('size') as { width: number; height: number },
+      zIndex: ynode.get('zIndex') as number,
+      visible: ynode.get('visible') as boolean,
+      bounds: ynode.get('bounds') as Bounds
+    }
+  }
+
+  /**
+   * Notify all change subscribers
+   */
+  private notifyChange(change: AdapterChange): void {
+    this.changeCallbacks.forEach((callback) => {
+      try {
+        callback(change)
+      } catch (error) {
+        console.error('Error in adapter change callback:', error)
+      }
+    })
+  }
+}

src/assets/css/style.css

@@ -5,6 +5,7 @@
   @tailwind utilities;
 }
 
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -134,6 +135,188 @@ body {
   border: thin solid;
 }
 
+/* Shared markdown content styling for consistent rendering across components */
+.comfy-markdown-content {
+  /* Typography */
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.6;
+  word-wrap: break-word;
+}
+
+/* Headings */
+.comfy-markdown-content h1 {
+  font-size: 22px; /* text-[22px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h1:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h2 {
+  font-size: 18px; /* text-[18px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h2:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h3 {
+  font-size: 16px; /* text-[16px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h3:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h4:first-child,
+.comfy-markdown-content h5:first-child,
+.comfy-markdown-content h6:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+/* Paragraphs */
+.comfy-markdown-content p {
+  margin: 0 0 0.5em;
+}
+
+.comfy-markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* First child reset */
+.comfy-markdown-content *:first-child {
+  margin-top: 0; /* mt-0 */
+}
+
+/* Lists */
+.comfy-markdown-content ul,
+.comfy-markdown-content ol {
+  padding-left: 2rem; /* pl-8 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Nested lists */
+.comfy-markdown-content ul ul,
+.comfy-markdown-content ol ol,
+.comfy-markdown-content ul ol,
+.comfy-markdown-content ol ul {
+  padding-left: 1.5rem; /* pl-6 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+.comfy-markdown-content li {
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Code */
+.comfy-markdown-content code {
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
+  font-family: monospace;
+}
+
+.comfy-markdown-content pre {
+  background-color: var(--code-block-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 1rem; /* p-4 */
+  margin: 1rem 0; /* my-4 */
+  overflow-x: auto; /* overflow-x-auto */
+}
+
+.comfy-markdown-content pre code {
+  background-color: transparent; /* bg-transparent */
+  padding: 0; /* p-0 */
+  color: var(--p-text-color);
+}
+
+/* Tables */
+.comfy-markdown-content table {
+  width: 100%; /* w-full */
+  border-collapse: collapse; /* border-collapse */
+}
+
+.comfy-markdown-content th,
+.comfy-markdown-content td {
+  padding: 0.5rem; /* px-2 py-2 */
+}
+
+.comfy-markdown-content th {
+  color: var(--fg-color);
+}
+
+.comfy-markdown-content td {
+  color: var(--drag-text);
+}
+
+.comfy-markdown-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.comfy-markdown-content tr:last-child {
+  border-bottom: none;
+}
+
+.comfy-markdown-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+
+/* Links */
+.comfy-markdown-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+/* Media */
+.comfy-markdown-content img,
+.comfy-markdown-content video {
+  max-width: 100%; /* max-w-full */
+  height: auto; /* h-auto */
+  display: block; /* block */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+/* Blockquotes */
+.comfy-markdown-content blockquote {
+  border-left: 3px solid var(--p-primary-color, var(--primary-bg));
+  padding-left: 0.75em;
+  margin: 0.5em 0;
+  opacity: 0.8;
+}
+
+/* Horizontal rule */
+.comfy-markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--p-border-color, var(--border-color));
+  margin: 1em 0;
+}
+
+/* Strong and emphasis */
+.comfy-markdown-content strong {
+  font-weight: bold;
+}
+
+.comfy-markdown-content em {
+  font-style: italic;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -637,3 +820,92 @@ audio.comfy-audio.empty-audio-widget {
   width: calc(100vw - env(titlebar-area-width, 100vw));
 }
 /* End of [Desktop] Electron window specific styles */
+
+/* Vue Node LOD (Level of Detail) System */
+/* These classes control rendering detail based on zoom level */
+
+/* Minimal LOD (zoom <= 0.4) - Title only for performance */
+.lg-node--lod-minimal {
+  min-height: 32px;
+  transition: min-height 0.2s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+  backdrop-filter: none;
+}
+
+.lg-node--lod-minimal .lg-node-body {
+  display: none !important;
+}
+
+/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
+.lg-node--lod-reduced {
+  transition: opacity 0.1s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+}
+
+.lg-node--lod-reduced .lg-widget-label,
+.lg-node--lod-reduced .lg-slot-label {
+  display: none;
+}
+
+.lg-node--lod-reduced .lg-slot {
+  opacity: 0.6;
+  font-size: 0.75rem;
+}
+
+.lg-node--lod-reduced .lg-widget {
+  margin: 2px 0;
+  font-size: 0.875rem;
+}
+
+/* Full LOD (zoom > 0.8) - Complete detail rendering */
+.lg-node--lod-full {
+  /* Uses default styling - no overrides needed */
+}
+
+/* Smooth transitions between LOD levels */
+.lg-node {
+  transition: min-height 0.2s ease;
+  /* Disable text selection on all nodes */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.lg-node .lg-slot,
+.lg-node .lg-widget {
+  transition: opacity 0.1s ease, font-size 0.1s ease;
+}
+
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
+/* Global performance optimizations for LOD */
+.lg-node--lod-minimal,
+.lg-node--lod-reduced {
+  /* Remove ALL expensive paint effects */
+  box-shadow: none !important;
+  filter: none !important;
+  backdrop-filter: none !important;
+  text-shadow: none !important;
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  clip-path: none !important;
+}
+
+/* Reduce paint complexity for minimal LOD */
+.lg-node--lod-minimal {
+  /* Skip complex borders */
+  border-radius: 0 !important;
+  /* Use solid colors only */
+  background-image: none !important;
+}
+

src/components/common/EditableText.spec.ts

@@ -68,4 +68,73 @@ describe('EditableText', () => {
     // @ts-expect-error fixme ts strict error
     expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
   })
+
+  it('cancels editing on escape key', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Should emit cancel event
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+
+    // Should NOT emit edit event
+    expect(wrapper.emitted('edit')).toBeFalsy()
+
+    // Input value should be reset to original
+    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+      'Original Text'
+    )
+  })
+
+  it('does not save changes when escape is pressed and blur occurs', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape (which triggers blur internally)
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Manually trigger blur to simulate the blur that happens after escape
+    await wrapper.findComponent(InputText).trigger('blur')
+
+    // Should emit cancel but not edit
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+    expect(wrapper.emitted('edit')).toBeFalsy()
+  })
+
+  it('saves changes on enter but not on escape', async () => {
+    // Test Enter key saves changes
+    const enterWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await enterWrapper.findComponent(InputText).setValue('Saved Text')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    // Trigger blur that happens after enter
+    await enterWrapper.findComponent(InputText).trigger('blur')
+    expect(enterWrapper.emitted('edit')).toBeTruthy()
+    // @ts-expect-error fixme ts strict error
+    expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+
+    // Test Escape key cancels changes with a fresh wrapper
+    const escapeWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    expect(escapeWrapper.emitted('cancel')).toBeTruthy()
+    expect(escapeWrapper.emitted('edit')).toBeFalsy()
+  })
 })

src/components/common/EditableText.vue

@@ -14,10 +14,12 @@
       fluid
       :pt="{
         root: {
-          onBlur: finishEditing
+          onBlur: finishEditing,
+          ...inputAttrs
         }
       }"
       @keyup.enter="blurInputElement"
+      @keyup.escape="cancelEditing"
       @click.stop
     />
   </div>
@@ -27,21 +29,41 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-const { modelValue, isEditing = false } = defineProps<{
+const {
+  modelValue,
+  isEditing = false,
+  inputAttrs = {}
+} = defineProps<{
   modelValue: string
   isEditing?: boolean
+  inputAttrs?: Record<string, any>
 }>()
 
-const emit = defineEmits(['update:modelValue', 'edit'])
+const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
 const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
+const isCanceling = ref(false)
 
 const blurInputElement = () => {
   // @ts-expect-error - $el is an internal property of the InputText component
   inputRef.value?.$el.blur()
 }
 const finishEditing = () => {
-  emit('edit', inputValue.value)
+  // Don't save if we're canceling
+  if (!isCanceling.value) {
+    emit('edit', inputValue.value)
+  }
+  isCanceling.value = false
+}
+const cancelEditing = () => {
+  // Set canceling flag to prevent blur from saving
+  isCanceling.value = true
+  // Reset to original value
+  inputValue.value = modelValue
+  // Emit cancel event
+  emit('cancel')
+  // Blur the input to exit edit mode
+  blurInputElement()
 }
 watch(
   () => isEditing,

src/components/graph/DomWidgets.vue

@@ -16,6 +16,7 @@ import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
@@ -27,6 +28,9 @@ const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
+  // Skip updating DOM widgets when Vue nodes mode is enabled
+  if (LiteGraph.vueNodesMode) return
+
   const lowQuality = lgCanvas.low_quality
   const currentGraph = lgCanvas.graph
 

src/components/graph/GraphCanvas.vue

@@ -34,6 +34,54 @@
     class="w-full h-full touch-none"
   />
 
+  <!-- TransformPane for Vue node rendering (development) -->
+  <TransformPane
+    v-if="transformPaneEnabled && canvasStore.canvas && comfyAppReady"
+    :canvas="canvasStore.canvas as LGraphCanvas"
+    :viewport="canvasViewport"
+    :show-debug-overlay="showPerformanceOverlay"
+    @raf-status-change="rafActive = $event"
+    @transform-update="handleTransformUpdate"
+  >
+    <!-- Vue nodes rendered based on graph nodes -->
+    <VueGraphNode
+      v-for="nodeData in nodesToRender"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :position="nodePositions.get(nodeData.id)"
+      :size="nodeSizes.get(nodeData.id)"
+      :selected="nodeData.selected"
+      :readonly="false"
+      :executing="executionStore.executingNodeId === nodeData.id"
+      :error="
+        executionStore.lastExecutionError?.node_id === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
+      :data-node-id="nodeData.id"
+      @node-click="handleNodeSelect"
+      @update:collapsed="handleNodeCollapse"
+      @update:title="handleNodeTitleUpdate"
+    />
+  </TransformPane>
+
+  <!-- Debug Panel (Development Only) -->
+  <VueNodeDebugPanel
+    v-model:debug-override-vue-nodes="debugOverrideVueNodes"
+    v-model:show-performance-overlay="showPerformanceOverlay"
+    :canvas-viewport="canvasViewport"
+    :vue-nodes-count="vueNodesCount"
+    :nodes-in-viewport="nodesInViewport"
+    :performance-metrics="performanceMetrics"
+    :current-f-p-s="currentFPS"
+    :last-transform-time="lastTransformTime"
+    :raf-active="rafActive"
+    :is-dev-mode-enabled="isDevModeEnabled"
+    :should-render-vue-nodes="shouldRenderVueNodes"
+    :transform-pane-enabled="transformPaneEnabled"
+  />
+
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover />
 
@@ -50,7 +98,16 @@
 
 <script setup lang="ts">
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect
+} from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
@@ -61,14 +118,26 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
+import TransformPane from '@/components/graph/TransformPane.vue'
+import VueNodeDebugPanel from '@/components/graph/debug/VueNodeDebugPanel.vue'
+import VueGraphNode from '@/components/graph/vueNodes/LGraphNode.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useTransformState } from '@/composables/element/useTransformState'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type {
+  NodeState,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
+import { useLayout } from '@/composables/graph/useLayout'
+import { useLayoutSync } from '@/composables/graph/useLayoutSync'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { useMinimap } from '@/composables/useMinimap'
@@ -77,7 +146,7 @@ import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -88,6 +157,7 @@ import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { layoutStore } from '@/stores/layoutStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -105,6 +175,7 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
+const { mutations: layoutMutations } = useLayout()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -123,6 +194,330 @@ const minimapRef = ref<InstanceType<typeof MiniMap>>()
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 const minimap = useMinimap()
 
+// Feature flags
+const { shouldRenderVueNodes, isDevModeEnabled } = useFeatureFlags()
+
+// TransformPane enabled when Vue nodes are enabled OR debug override
+const debugOverrideVueNodes = ref(true) // Default to true for development
+const transformPaneEnabled = computed(
+  () => shouldRenderVueNodes.value || debugOverrideVueNodes.value
+)
+// Account for browser zoom/DPI scaling
+const getActualViewport = () => {
+  // Get the actual canvas element dimensions which account for zoom
+  const canvas = canvasRef.value
+  if (canvas) {
+    return {
+      width: canvas.clientWidth,
+      height: canvas.clientHeight
+    }
+  }
+  // Fallback to window dimensions
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+}
+
+const canvasViewport = ref(getActualViewport())
+
+// Debug metrics - use shallowRef for frequently updating values
+const vueNodesCount = shallowRef(0)
+const nodesInViewport = shallowRef(0)
+const currentFPS = shallowRef(0)
+const lastTransformTime = shallowRef(0)
+const rafActive = shallowRef(false)
+
+// Rendering options
+const showPerformanceOverlay = ref(false)
+
+// FPS tracking
+let lastTime = performance.now()
+let frameCount = 0
+let fpsRafId: number | null = null
+
+const updateFPS = () => {
+  frameCount++
+  const currentTime = performance.now()
+  if (currentTime >= lastTime + 1000) {
+    currentFPS.value = Math.round(
+      (frameCount * 1000) / (currentTime - lastTime)
+    )
+    frameCount = 0
+    lastTime = currentTime
+  }
+  if (transformPaneEnabled.value) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  }
+}
+
+// Start FPS tracking when TransformPane is enabled
+watch(transformPaneEnabled, (enabled) => {
+  if (enabled) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  } else {
+    // Stop FPS tracking
+    if (fpsRafId !== null) {
+      cancelAnimationFrame(fpsRafId)
+      fpsRafId = null
+    }
+  }
+})
+
+// Update viewport on resize
+useEventListener(window, 'resize', () => {
+  canvasViewport.value = getActualViewport()
+})
+
+// Also update when canvas is ready
+watch(canvasRef, () => {
+  if (canvasRef.value) {
+    canvasViewport.value = getActualViewport()
+  }
+})
+
+// Vue node lifecycle management - initialize after graph is ready
+let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
+const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
+const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
+const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
+  new Map()
+)
+const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
+  new Map()
+)
+let detectChangesInRAF = () => {}
+const performanceMetrics = reactive({
+  frameTime: 0,
+  updateTime: 0,
+  nodeCount: 0,
+  culledCount: 0,
+  adaptiveQuality: false
+})
+
+// Initialize node manager when graph becomes available
+// Add a reactivity trigger to force computed re-evaluation
+const nodeDataTrigger = ref(0)
+
+const initializeNodeManager = () => {
+  if (!comfyApp.graph || nodeManager) {
+    return
+  }
+
+  nodeManager = useGraphNodeManager(comfyApp.graph)
+
+  // Use the manager's reactive maps directly
+  vueNodeData.value = nodeManager.vueNodeData
+  nodeState.value = nodeManager.nodeState
+  nodePositions.value = nodeManager.nodePositions
+  nodeSizes.value = nodeManager.nodeSizes
+
+  detectChangesInRAF = nodeManager.detectChangesInRAF
+  Object.assign(performanceMetrics, nodeManager.performanceMetrics)
+
+  // Initialize layout system with existing nodes
+  const nodes = comfyApp.graph._nodes.map((node: any) => ({
+    id: node.id.toString(),
+    pos: node.pos,
+    size: node.size
+  }))
+  layoutStore.initializeFromLiteGraph(nodes)
+
+  // Initialize layout sync (one-way: Layout Store → LiteGraph)
+  const { startSync } = useLayoutSync()
+  startSync(canvasStore.canvas)
+
+  // Force computed properties to re-evaluate
+  nodeDataTrigger.value++
+}
+
+// Watch for graph availability
+watch(
+  () => comfyApp.graph,
+  (graph) => {
+    if (graph) {
+      initializeNodeManager()
+    }
+  },
+  { immediate: true }
+)
+
+// Transform state for viewport culling
+const { syncWithCanvas } = useTransformState()
+
+// Replace problematic computed property with proper reactive system
+const nodesToRender = computed(() => {
+  // Access performanceMetrics to trigger on RAF updates
+  void performanceMetrics.updateTime
+  // Access trigger to force re-evaluation after nodeManager initialization
+  void nodeDataTrigger.value
+
+  if (!comfyApp.graph || !transformPaneEnabled.value) {
+    return []
+  }
+
+  const allNodes = Array.from(vueNodeData.value.values())
+
+  // Apply viewport culling - check if node bounds intersect with viewport
+  if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
+    const canvas = canvasStore.canvas
+    const manager = nodeManager
+
+    // Ensure transform is synced before checking visibility
+    syncWithCanvas(comfyApp.canvas)
+
+    const ds = canvas.ds
+
+    // Access transform time to make this reactive to transform changes
+    void lastTransformTime.value
+
+    // Work in screen space - viewport is simply the canvas element size
+    const viewport_width = canvas.canvas.width
+    const viewport_height = canvas.canvas.height
+
+    // Add margin that represents a constant distance in canvas space
+    // Convert canvas units to screen pixels by multiplying by scale
+    const canvasMarginDistance = 200 // Fixed margin in canvas units
+    const margin_x = canvasMarginDistance * ds.scale
+    const margin_y = canvasMarginDistance * ds.scale
+
+    const filtered = allNodes.filter((nodeData) => {
+      const node = manager.getNode(nodeData.id)
+      if (!node) return false
+
+      // Transform node position to screen space (same as DOM widgets)
+      const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
+      const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
+      const screen_width = node.size[0] * ds.scale
+      const screen_height = node.size[1] * ds.scale
+
+      // Check if node bounds intersect with expanded viewport (in screen space)
+      const isVisible = !(
+        screen_x + screen_width < -margin_x ||
+        screen_x > viewport_width + margin_x ||
+        screen_y + screen_height < -margin_y ||
+        screen_y > viewport_height + margin_y
+      )
+
+      return isVisible
+    })
+
+    return filtered
+  }
+
+  return allNodes
+})
+
+// Remove side effects from computed - use watchers instead
+watch(
+  () => vueNodeData.value.size,
+  (count) => {
+    vueNodesCount.value = count
+  },
+  { immediate: true }
+)
+
+watch(
+  () => nodesToRender.value.length,
+  (count) => {
+    nodesInViewport.value = count
+  }
+)
+
+// Update performance metrics when node counts change
+watch(
+  () => [vueNodeData.value.size, nodesToRender.value.length],
+  ([totalNodes, visibleNodes]) => {
+    performanceMetrics.nodeCount = totalNodes
+    performanceMetrics.culledCount = totalNodes - visibleNodes
+  }
+)
+
+// Integrate change detection with TransformPane RAF
+// Track previous transform to detect changes
+let lastScale = 1
+let lastOffsetX = 0
+let lastOffsetY = 0
+
+const handleTransformUpdate = (time: number) => {
+  lastTransformTime.value = time
+
+  // Sync transform state only when it changes (avoids reflows)
+  if (comfyApp.canvas?.ds) {
+    const currentScale = comfyApp.canvas.ds.scale
+    const currentOffsetX = comfyApp.canvas.ds.offset[0]
+    const currentOffsetY = comfyApp.canvas.ds.offset[1]
+
+    if (
+      currentScale !== lastScale ||
+      currentOffsetX !== lastOffsetX ||
+      currentOffsetY !== lastOffsetY
+    ) {
+      syncWithCanvas(comfyApp.canvas)
+      lastScale = currentScale
+      lastOffsetX = currentOffsetX
+      lastOffsetY = currentOffsetY
+    }
+  }
+
+  // Detect node changes during transform updates
+  detectChangesInRAF()
+
+  // Update performance metrics
+  performanceMetrics.frameTime = time
+
+  void nodesToRender.value.length
+}
+
+// Node event handlers
+const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+  if (!canvasStore.canvas || !nodeManager) return
+
+  const node = nodeManager.getNode(nodeData.id)
+  if (!node) return
+
+  if (!event.ctrlKey && !event.metaKey) {
+    canvasStore.canvas.deselectAllNodes()
+  }
+
+  canvasStore.canvas.selectNode(node)
+
+  // Bring node to front when clicked (similar to LiteGraph behavior)
+  // Skip if node is pinned
+  if (!node.flags?.pinned) {
+    layoutMutations.setSource('vue')
+    layoutMutations.bringNodeToFront(nodeData.id)
+  }
+  node.selected = true
+
+  canvasStore.updateSelectedItems()
+}
+
+// Handle node collapse state changes
+const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Use LiteGraph's collapse method if the state needs to change
+  const currentCollapsed = node.flags?.collapsed ?? false
+  if (currentCollapsed !== collapsed) {
+    node.collapse()
+  }
+}
+
+// Handle node title updates
+const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Update the node title in LiteGraph for persistence
+  node.title = newTitle
+}
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -274,7 +669,7 @@ const loadCustomNodesI18n = async () => {
       i18n.global.mergeLocaleMessage(locale, message)
     })
   } catch (error) {
-    console.error('Failed to load custom nodes i18n', error)
+    // Ignore i18n loading errors - not critical
   }
 }
 
@@ -291,6 +686,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
 
   comfyApp.vueAppReady = true
 
@@ -303,9 +699,6 @@ onMounted(async () => {
     await settingStore.loadSettingValues()
   } catch (error) {
     if (error instanceof UnauthorizedError) {
-      console.log(
-        'Failed loading user settings, user unauthorized, cleaning local Comfy.userId'
-      )
       localStorage.removeItem('Comfy.userId')
       localStorage.removeItem('Comfy.userName')
       window.location.reload()
@@ -330,6 +723,11 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Initialize node manager after setup is complete
+  if (comfyApp.graph) {
+    initializeNodeManager()
+  }
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -377,4 +775,18 @@ onMounted(async () => {
 
   emit('ready')
 })
+
+onUnmounted(() => {
+  // Clean up FPS tracking
+  if (fpsRafId !== null) {
+    cancelAnimationFrame(fpsRafId)
+    fpsRafId = null
+  }
+
+  // Clean up node manager
+  if (nodeManager) {
+    nodeManager.cleanup()
+    nodeManager = null
+  }
+})
 </script>

src/components/graph/TransformPane.spec.ts

@@ -0,0 +1,438 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import TransformPane from './TransformPane.vue'
+
+// Mock the transform state composable
+const mockTransformState = {
+  camera: ref({ x: 0, y: 0, z: 1 }),
+  transformStyle: ref({
+    transform: 'scale(1) translate(0px, 0px)',
+    transformOrigin: '0 0'
+  }),
+  syncWithCanvas: vi.fn(),
+  canvasToScreen: vi.fn(),
+  screenToCanvas: vi.fn(),
+  isNodeInViewport: vi.fn()
+}
+
+vi.mock('@/composables/element/useTransformState', () => ({
+  useTransformState: () => mockTransformState
+}))
+
+// Mock requestAnimationFrame/cancelAnimationFrame
+global.requestAnimationFrame = vi.fn((cb) => {
+  setTimeout(cb, 16)
+  return 1
+})
+global.cancelAnimationFrame = vi.fn()
+
+describe('TransformPane', () => {
+  let wrapper: ReturnType<typeof mount>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Create mock canvas with LiteGraph interface
+    mockCanvas = {
+      canvas: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      },
+      ds: {
+        offset: [0, 0],
+        scale: 1
+      }
+    }
+
+    // Reset mock transform state
+    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
+    mockTransformState.transformStyle.value = {
+      transform: 'scale(1) translate(0px, 0px)',
+      transformOrigin: '0 0'
+    }
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('component mounting', () => {
+    it('should mount successfully with minimal props', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should apply transform style from composable', () => {
+      mockTransformState.transformStyle.value = {
+        transform: 'scale(2) translate(100px, 50px)',
+        transformOrigin: '0 0'
+      }
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+      const style = transformPane.attributes('style')
+      expect(style).toContain('transform: scale(2) translate(100px, 50px)')
+    })
+
+    it('should render slot content', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div class="test-content">Test Node</div>'
+        }
+      })
+
+      expect(wrapper.find('.test-content').exists()).toBe(true)
+      expect(wrapper.find('.test-content').text()).toBe('Test Node')
+    })
+  })
+
+  describe('debug overlay', () => {
+    it('should not show debug overlay by default', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(false)
+    })
+
+    it('should show debug overlay when enabled', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(true)
+    })
+
+    it('should display viewport dimensions in debug overlay', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1280, height: 720 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('Viewport: 1280x720')
+    })
+
+    it('should include device pixel ratio in debug overlay', () => {
+      // Mock device pixel ratio
+      Object.defineProperty(window, 'devicePixelRatio', {
+        writable: true,
+        value: 2
+      })
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('DPR: 2')
+    })
+  })
+
+  describe('RAF synchronization', () => {
+    it('should start RAF sync on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Should emit RAF status change to true
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      expect(wrapper.emitted('rafStatusChange')?.[0]).toEqual([true])
+    })
+
+    it('should call syncWithCanvas during RAF updates', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(mockTransformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
+    })
+
+    it('should emit transform update timing', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(wrapper.emitted('transformUpdate')).toBeTruthy()
+      const updateEvent = wrapper.emitted('transformUpdate')?.[0]
+      expect(typeof updateEvent?.[0]).toBe('number')
+      expect(updateEvent?.[0]).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should stop RAF sync on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      const events = wrapper.emitted('rafStatusChange') as any[]
+      expect(events[events.length - 1]).toEqual([false])
+      expect(global.cancelAnimationFrame).toHaveBeenCalled()
+    })
+  })
+
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('interaction state management', () => {
+    it('should apply interacting class during interactions', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // Simulate interaction start by checking internal state
+      // Note: This tests the CSS class application logic
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Initially should not have interacting class
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
+    })
+
+    it('should handle pointer events for node delegation', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Simulate pointer down - we can't test the exact delegation logic
+      // in unit tests due to vue-test-utils limitations, but we can verify
+      // the event handler is set up correctly
+      await transformPane.trigger('pointerdown')
+
+      // The test passes if no errors are thrown during event handling
+      expect(transformPane.exists()).toBe(true)
+    })
+  })
+
+  describe('transform state integration', () => {
+    it('should provide transform utilities to child components', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // The component should provide transform state via Vue's provide/inject
+      // This is tested indirectly through the composable integration
+      expect(mockTransformState.syncWithCanvas).toBeDefined()
+      expect(mockTransformState.canvasToScreen).toBeDefined()
+      expect(mockTransformState.screenToCanvas).toBeDefined()
+    })
+  })
+
+  describe('error handling', () => {
+    it('should handle null canvas gracefully', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: undefined
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should handle missing canvas properties', () => {
+      const incompleteCanvas = {} as any
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: incompleteCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      // Should not throw errors during mount
+    })
+  })
+
+  describe('performance optimizations', () => {
+    it('should use contain CSS property for layout optimization', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // This test verifies the CSS contains the performance optimization
+      // Note: In JSDOM, computed styles might not reflect all CSS properties
+      expect(transformPane.element.className).toContain('transform-pane')
+    })
+
+    it('should disable pointer events on container but allow on children', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div data-node-id="test">Test Node</div>'
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // The CSS should handle pointer events optimization
+      // This is primarily a CSS concern, but we verify the structure
+      expect(transformPane.exists()).toBe(true)
+      expect(wrapper.find('[data-node-id="test"]').exists()).toBe(true)
+    })
+  })
+
+  describe('viewport prop handling', () => {
+    it('should handle missing viewport prop', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          showDebugOverlay: true
+        }
+      })
+
+      // Should not crash when viewport is undefined
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should update debug overlay when viewport changes', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 800, height: 600 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.text()).toContain('800x600')
+
+      await wrapper.setProps({
+        viewport: { width: 1920, height: 1080 }
+      })
+
+      expect(wrapper.text()).toContain('1920x1080')
+    })
+  })
+})

src/components/graph/TransformPane.vue

@@ -0,0 +1,133 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <div
+    class="transform-pane"
+    :class="{ 'transform-pane--interacting': isInteracting }"
+    :style="transformStyle"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+
+    <!-- DEV ONLY: Viewport bounds visualization -->
+    <div
+      v-if="props.showDebugOverlay"
+      class="viewport-debug-overlay"
+      :style="{
+        position: 'absolute',
+        left: '10px',
+        top: '10px',
+        border: '2px solid red',
+        width: (props.viewport?.width || 0) - 20 + 'px',
+        height: (props.viewport?.height || 0) - 20 + 'px',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }"
+    >
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: red;
+          color: white;
+          padding: 2px 5px;
+          font-size: 10px;
+        "
+      >
+        Viewport: {{ props.viewport?.width }}x{{ props.viewport?.height }} DPR:
+        {{ devicePixelRatio }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import { useTransformState } from '@/composables/element/useTransformState'
+import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+interface TransformPaneProps {
+  canvas?: LGraphCanvas
+  viewport?: { width: number; height: number }
+  showDebugOverlay?: boolean
+}
+
+const props = defineProps<TransformPaneProps>()
+
+// Get device pixel ratio for display
+const devicePixelRatio = window.devicePixelRatio || 1
+
+// Transform state management
+const {
+  camera,
+  transformStyle,
+  syncWithCanvas,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+} = useTransformState()
+
+// Transform settling detection for re-rasterization optimization
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming } = useTransformSettling(canvasElement, {
+  settleDelay: 200,
+  trackPan: true
+})
+
+// Use isTransforming for the CSS class (aliased for clarity)
+const isInteracting = isTransforming
+
+// Provide transform utilities to child components
+provide('transformState', {
+  camera,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+})
+
+// Event delegation for node interactions
+const handlePointerDown = (event: PointerEvent) => {
+  const target = event.target as HTMLElement
+  const nodeElement = target.closest('[data-node-id]')
+
+  if (nodeElement) {
+    // TODO: Emit event for node interaction
+    // Node interaction with nodeId will be handled in future implementation
+  }
+}
+
+// Canvas transform synchronization
+const emit = defineEmits<{
+  rafStatusChange: [active: boolean]
+  transformUpdate: [time: number]
+}>()
+
+useCanvasTransformSync(props.canvas, syncWithCanvas, {
+  onStart: () => emit('rafStatusChange', true),
+  onUpdate: (duration) => emit('transformUpdate', duration),
+  onStop: () => emit('rafStatusChange', false)
+})
+</script>
+
+<style scoped>
+.transform-pane {
+  position: absolute;
+  inset: 0;
+  contain: layout style paint;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.transform-pane--interacting {
+  will-change: transform;
+}
+
+/* Allow pointer events on nodes */
+.transform-pane :deep([data-node-id]) {
+  pointer-events: auto;
+}
+</style>

src/components/graph/debug/QuadTreeDebugSection.vue

@@ -0,0 +1,112 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <div class="pt-2 border-t border-surface-200 dark-theme:border-surface-700">
+    <h4 class="font-semibold mb-1">QuadTree Spatial Index</h4>
+
+    <!-- Enable/Disable Toggle -->
+    <div class="mb-2">
+      <label class="flex items-center gap-2">
+        <input
+          :checked="enabled"
+          type="checkbox"
+          @change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
+        />
+        <span>Enable Spatial Indexing</span>
+      </label>
+    </div>
+
+    <!-- Status Message -->
+    <p v-if="!enabled" class="text-muted text-xs italic">
+      {{ statusMessage }}
+    </p>
+
+    <!-- Metrics when enabled -->
+    <template v-if="enabled && metrics">
+      <p class="text-muted">Strategy: {{ strategy }}</p>
+      <p class="text-muted">Total Nodes: {{ metrics.totalNodes }}</p>
+      <p class="text-muted">Visible Nodes: {{ metrics.visibleNodes }}</p>
+      <p class="text-muted">Query Time: {{ metrics.queryTime.toFixed(2) }}ms</p>
+      <p class="text-muted">Tree Depth: {{ metrics.treeDepth }}</p>
+      <p class="text-muted">Culling Efficiency: {{ cullingEfficiency }}</p>
+      <p class="text-muted">Rebuilds: {{ metrics.rebuildCount }}</p>
+
+      <!-- Show debug visualization toggle -->
+      <div class="mt-2">
+        <label class="flex items-center gap-2">
+          <input
+            :checked="showVisualization"
+            type="checkbox"
+            @change="
+              $emit(
+                'toggle-visualization',
+                ($event.target as HTMLInputElement).checked
+              )
+            "
+          />
+          <span>Show QuadTree Boundaries</span>
+        </label>
+      </div>
+    </template>
+
+    <!-- Performance Comparison -->
+    <template v-if="enabled && performanceComparison">
+      <div class="mt-2 text-xs">
+        <p class="text-muted font-semibold">Performance vs Linear:</p>
+        <p class="text-muted">Speedup: {{ performanceComparison.speedup }}x</p>
+        <p class="text-muted">
+          Break-even: ~{{ performanceComparison.breakEvenNodeCount }} nodes
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  enabled: boolean
+  metrics?: {
+    totalNodes: number
+    visibleNodes: number
+    queryTime: number
+    treeDepth: number
+    rebuildCount: number
+  }
+  strategy?: string
+  threshold?: number
+  showVisualization?: boolean
+  performanceComparison?: {
+    speedup: number
+    breakEvenNodeCount: number
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  metrics: undefined,
+  strategy: 'quadtree',
+  threshold: 100,
+  showVisualization: false,
+  performanceComparison: undefined
+})
+
+defineEmits<{
+  toggle: [enabled: boolean]
+  'toggle-visualization': [show: boolean]
+}>()
+
+const statusMessage = computed(() => {
+  if (!props.enabled && props.metrics) {
+    return `Disabled (threshold: ${props.threshold} nodes, current: ${props.metrics.totalNodes})`
+  }
+  return `Spatial indexing will enable at ${props.threshold}+ nodes`
+})
+
+const cullingEfficiency = computed(() => {
+  if (!props.metrics || props.metrics.totalNodes === 0) return 'N/A'
+
+  const culled = props.metrics.totalNodes - props.metrics.visibleNodes
+  const percentage = ((culled / props.metrics.totalNodes) * 100).toFixed(1)
+  return `${culled} nodes (${percentage}%)`
+})
+</script>

src/components/graph/debug/QuadTreeVisualization.vue

@@ -0,0 +1,112 @@
+<template>
+  <svg
+    v-if="visible && debugInfo"
+    :width="svgSize.width"
+    :height="svgSize.height"
+    :style="svgStyle"
+    class="quadtree-visualization"
+  >
+    <!-- QuadTree boundaries -->
+    <g v-for="(node, index) in flattenedNodes" :key="`quad-${index}`">
+      <rect
+        :x="node.bounds.x"
+        :y="node.bounds.y"
+        :width="node.bounds.width"
+        :height="node.bounds.height"
+        :stroke="getDepthColor(node.depth)"
+        :stroke-width="getStrokeWidth(node.depth)"
+        fill="none"
+        :opacity="0.3 + node.depth * 0.05"
+      />
+    </g>
+
+    <!-- Viewport bounds (optional) -->
+    <rect
+      v-if="viewportBounds"
+      :x="viewportBounds.x"
+      :y="viewportBounds.y"
+      :width="viewportBounds.width"
+      :height="viewportBounds.height"
+      stroke="#00ff00"
+      stroke-width="3"
+      fill="none"
+      stroke-dasharray="10,5"
+      opacity="0.8"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+interface Props {
+  visible: boolean
+  debugInfo: any | null
+  transformStyle: any
+  viewportBounds?: Bounds
+}
+
+const props = defineProps<Props>()
+
+// Flatten the tree structure for rendering
+const flattenedNodes = computed(() => {
+  if (!props.debugInfo?.tree) return []
+
+  const nodes: any[] = []
+  const traverse = (node: any, depth = 0) => {
+    nodes.push({
+      bounds: node.bounds,
+      depth,
+      itemCount: node.itemCount,
+      divided: node.divided
+    })
+
+    if (node.children) {
+      node.children.forEach((child: any) => traverse(child, depth + 1))
+    }
+  }
+
+  traverse(props.debugInfo.tree)
+  return nodes
+})
+
+// SVG size (matches the transform pane size)
+const svgSize = ref({ width: 20000, height: 20000 })
+
+// Apply the same transform as the TransformPane
+const svgStyle = computed(() => ({
+  ...props.transformStyle,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none'
+}))
+
+// Color based on depth
+const getDepthColor = (depth: number): string => {
+  const colors = [
+    '#ff6b6b', // Red
+    '#ffa500', // Orange
+    '#ffd93d', // Yellow
+    '#6bcf7f', // Green
+    '#4da6ff', // Blue
+    '#a78bfa' // Purple
+  ]
+  return colors[depth % colors.length]
+}
+
+// Stroke width based on depth
+const getStrokeWidth = (depth: number): number => {
+  return Math.max(0.5, 2 - depth * 0.3)
+}
+</script>
+
+<style scoped>
+.quadtree-visualization {
+  position: absolute;
+  overflow: visible;
+  z-index: 10; /* Above nodes but below UI */
+}
+</style>

src/components/graph/debug/VueNodeDebugPanel.vue

@@ -0,0 +1,165 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <!-- TransformPane Debug Controls -->
+  <div
+    class="fixed top-20 right-4 bg-surface-0 dark-theme:bg-surface-800 p-4 rounded-lg shadow-lg border border-surface-300 dark-theme:border-surface-600 z-50 pointer-events-auto w-80"
+    style="contain: layout style"
+  >
+    <h3 class="font-bold mb-2 text-sm">TransformPane Debug</h3>
+    <div class="space-y-2 text-xs">
+      <div>
+        <label class="flex items-center gap-2">
+          <input v-model="debugOverrideVueNodes" type="checkbox" />
+          <span>Enable TransformPane</span>
+        </label>
+      </div>
+
+      <!-- Canvas Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Canvas State</h4>
+        <p class="text-muted">
+          Status: {{ canvasStore.canvas ? 'Ready' : 'Not Ready' }}
+        </p>
+        <p class="text-muted">
+          Viewport: {{ Math.round(canvasViewport.width) }}x{{
+            Math.round(canvasViewport.height)
+          }}
+        </p>
+        <template v-if="canvasStore.canvas?.ds">
+          <p class="text-muted">
+            Offset: ({{ Math.round(canvasStore.canvas.ds.offset[0]) }},
+            {{ Math.round(canvasStore.canvas.ds.offset[1]) }})
+          </p>
+          <p class="text-muted">
+            Scale: {{ canvasStore.canvas.ds.scale?.toFixed(3) || 1 }}
+          </p>
+        </template>
+      </div>
+
+      <!-- Node Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Graph Metrics</h4>
+        <p class="text-muted">
+          Total Nodes: {{ comfyApp.graph?.nodes?.length || 0 }}
+        </p>
+        <p class="text-muted">
+          Selected Nodes: {{ canvasStore.canvas?.selectedItems?.size || 0 }}
+        </p>
+        <p class="text-muted">Vue Nodes Rendered: {{ vueNodesCount }}</p>
+        <p class="text-muted">Nodes in Viewport: {{ nodesInViewport }}</p>
+        <p class="text-muted">
+          Culled Nodes: {{ performanceMetrics.culledCount }}
+        </p>
+        <p class="text-muted">
+          Cull Percentage:
+          {{
+            Math.round(
+              ((vueNodesCount - nodesInViewport) / Math.max(vueNodesCount, 1)) *
+                100
+            )
+          }}%
+        </p>
+      </div>
+
+      <!-- Performance Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Performance</h4>
+        <p v-memo="[currentFPS]" class="text-muted">FPS: {{ currentFPS }}</p>
+        <p v-memo="[Math.round(lastTransformTime)]" class="text-muted">
+          Transform Update: {{ Math.round(lastTransformTime) }}ms
+        </p>
+        <p
+          v-memo="[Math.round(performanceMetrics.updateTime)]"
+          class="text-muted"
+        >
+          Lifecycle Update: {{ Math.round(performanceMetrics.updateTime) }}ms
+        </p>
+        <p v-memo="[rafActive]" class="text-muted">
+          RAF Active: {{ rafActive ? 'Yes' : 'No' }}
+        </p>
+        <p v-memo="[performanceMetrics.adaptiveQuality]" class="text-muted">
+          Adaptive Quality:
+          {{ performanceMetrics.adaptiveQuality ? 'On' : 'Off' }}
+        </p>
+      </div>
+
+      <!-- Feature Flags Status -->
+      <div
+        v-if="isDevModeEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Feature Flags</h4>
+        <p class="text-muted text-xs">
+          Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
+        </p>
+        <p class="text-muted text-xs">
+          Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
+        </p>
+      </div>
+
+      <!-- Performance Options -->
+      <div
+        v-if="transformPaneEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Debug Options</h4>
+        <label class="flex items-center gap-2">
+          <input v-model="showPerformanceOverlay" type="checkbox" />
+          <span>Show Performance Overlay</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { app as comfyApp } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface Props {
+  debugOverrideVueNodes: boolean
+  canvasViewport: { width: number; height: number }
+  vueNodesCount: number
+  nodesInViewport: number
+  performanceMetrics: {
+    culledCount: number
+    updateTime: number
+    adaptiveQuality: boolean
+  }
+  currentFPS: number
+  lastTransformTime: number
+  rafActive: boolean
+  isDevModeEnabled: boolean
+  shouldRenderVueNodes: boolean
+  transformPaneEnabled: boolean
+  showPerformanceOverlay: boolean
+}
+
+interface Emits {
+  (e: 'update:debugOverrideVueNodes', value: boolean): void
+  (e: 'update:showPerformanceOverlay', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const canvasStore = useCanvasStore()
+
+const debugOverrideVueNodes = computed({
+  get: () => props.debugOverrideVueNodes,
+  set: (value: boolean) => emit('update:debugOverrideVueNodes', value)
+})
+
+const showPerformanceOverlay = computed({
+  get: () => props.showPerformanceOverlay,
+  set: (value: boolean) => emit('update:showPerformanceOverlay', value)
+})
+</script>

src/components/graph/vueNodes/InputSlot.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pr-2 hover:bg-black/5': !dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
+    }"
+    @pointerdown="handleClick"
+  >
+    <!-- Connection Dot -->
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
+
+    <!-- Slot Name -->
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Input ${index}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+import {
+  COMFY_VUE_NODE_DIMENSIONS,
+  INodeSlot,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+
+interface InputSlotProps {
+  node?: LGraphNode
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<InputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
+// Handle click events
+const handleClick = (event: PointerEvent) => {
+  if (!props.readonly) {
+    emit('slot-click', event)
+  }
+}
+</script>

src/components/graph/vueNodes/LGraphNode.vue

@@ -0,0 +1,263 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Render Error
+  </div>
+  <div
+    v-else
+    :data-node-id="nodeData.id"
+    :class="[
+      'lg-node absolute border-2 rounded-lg',
+      'contain-layout contain-style contain-paint',
+      selected ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-600',
+      executing ? 'animate-pulse' : '',
+      nodeData.mode === 4 ? 'opacity-50' : '', // bypassed
+      error ? 'border-red-500 bg-red-50' : '',
+      isDragging ? 'will-change-transform' : '',
+      lodCssClass,
+      'hover:border-green-500' // Debug: visual feedback on hover
+    ]"
+    :style="[
+      {
+        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        width: size ? `${size.width}px` : '200px',
+        height: size ? `${size.height}px` : 'auto',
+        backgroundColor: '#353535',
+        pointerEvents: 'auto'
+      },
+      dragStyle
+    ]"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+  >
+    <!-- Header only updates on title/color changes -->
+    <NodeHeader
+      v-memo="[nodeData.title, lodLevel, isCollapsed]"
+      :node-data="nodeData"
+      :readonly="readonly"
+      :lod-level="lodLevel"
+      :collapsed="isCollapsed"
+      @collapse="handleCollapse"
+      @update:title="handleTitleUpdate"
+    />
+
+    <!-- Node Body - rendered based on LOD level and collapsed state -->
+    <div
+      v-if="!isMinimalLOD && !isCollapsed"
+      class="flex flex-col gap-2"
+      :data-testid="`node-body-${nodeData.id}`"
+    >
+      <!-- Slots only rendered at full detail -->
+      <NodeSlots
+        v-if="shouldRenderSlots"
+        v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+        @slot-click="handleSlotClick"
+      />
+
+      <!-- Widgets rendered at reduced+ detail -->
+      <NodeWidgets
+        v-if="shouldRenderWidgets && nodeData.widgets?.length"
+        v-memo="[nodeData.widgets?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+
+      <!-- Custom content at reduced+ detail -->
+      <NodeContent
+        v-if="shouldRenderContent && hasCustomContent"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+    </div>
+
+    <!-- Progress bar for executing state -->
+    <div
+      v-if="executing && progress !== undefined"
+      class="absolute bottom-0 left-0 h-1 bg-primary-500 transition-all duration-300"
+      :style="{ width: `${progress * 100}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import log from 'loglevel'
+import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
+
+// Import the VueNodeData type
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { LODLevel, useLOD } from '@/composables/graph/useLOD'
+import { useNodeLayout } from '@/composables/graph/useNodeLayout'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import { LiteGraph } from '../../../lib/litegraph/src/litegraph'
+import NodeContent from './NodeContent.vue'
+import NodeHeader from './NodeHeader.vue'
+import NodeSlots from './NodeSlots.vue'
+import NodeWidgets from './NodeWidgets.vue'
+
+// Create logger for vue nodes
+const logger = log.getLogger('vue-nodes')
+// In dev mode, always show debug logs
+if (import.meta.env.DEV) {
+  logger.setLevel('debug')
+}
+
+// Extended props for main node component
+interface LGraphNodeProps {
+  nodeData: VueNodeData
+  position?: { x: number; y: number }
+  size?: { width: number; height: number }
+  readonly?: boolean
+  selected?: boolean
+  executing?: boolean
+  progress?: number
+  error?: string | null
+  zoomLevel?: number
+}
+
+const props = defineProps<LGraphNodeProps>()
+
+const emit = defineEmits<{
+  'node-click': [event: PointerEvent, nodeData: VueNodeData]
+  'slot-click': [
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    slotIndex: number,
+    isInput: boolean
+  ]
+  'update:collapsed': [nodeId: string, collapsed: boolean]
+  'update:title': [nodeId: string, newTitle: string]
+}>()
+
+// LOD (Level of Detail) system based on zoom level
+const zoomRef = toRef(() => props.zoomLevel ?? 1)
+const {
+  lodLevel,
+  shouldRenderWidgets,
+  shouldRenderSlots,
+  shouldRenderContent,
+  lodCssClass
+} = useLOD(zoomRef)
+
+// Computed properties for template usage
+const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false // Prevent error propagation
+})
+
+// Use layout system for node position and dragging
+const {
+  position: layoutPosition,
+  startDrag,
+  handleDrag: handleLayoutDrag,
+  endDrag
+} = useNodeLayout(props.nodeData.id)
+
+// Debug layout position
+watch(
+  layoutPosition,
+  (newPos, oldPos) => {
+    logger.debug(`Layout position changed for node ${props.nodeData.id}:`, {
+      newPos,
+      oldPos,
+      layoutPositionValue: layoutPosition.value
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+logger.debug(`LGraphNode mounted for ${props.nodeData.id}`, {
+  layoutPosition: layoutPosition.value,
+  propsPosition: props.position,
+  nodeDataId: props.nodeData.id
+})
+
+// Drag state for styling
+const isDragging = ref(false)
+const dragStyle = computed(() => ({
+  cursor: isDragging.value ? 'grabbing' : 'grab'
+}))
+
+// Track collapsed state
+const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
+
+// Watch for external changes to the collapsed state
+watch(
+  () => props.nodeData.flags?.collapsed,
+  (newCollapsed) => {
+    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
+      isCollapsed.value = newCollapsed
+    }
+  }
+)
+
+// Check if node has custom content
+const hasCustomContent = computed(() => {
+  // Currently all content is handled through widgets
+  // This remains false but provides extensibility point
+  return false
+})
+
+// Event handlers
+const handlePointerDown = (event: PointerEvent) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
+    return
+  }
+
+  // Start drag using layout system
+  isDragging.value = true
+  startDrag(event)
+
+  // Emit node-click for selection handling in GraphCanvas
+  emit('node-click', event, props.nodeData)
+}
+
+const handlePointerMove = (event: PointerEvent) => {
+  if (isDragging.value) {
+    void handleLayoutDrag(event)
+  }
+}
+
+const handlePointerUp = (event: PointerEvent) => {
+  if (isDragging.value) {
+    isDragging.value = false
+    void endDrag(event)
+  }
+}
+
+const handleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // Emit event so parent can sync with LiteGraph if needed
+  emit('update:collapsed', props.nodeData.id, isCollapsed.value)
+}
+
+const handleSlotClick = (
+  event: PointerEvent,
+  slotIndex: number,
+  isInput: boolean
+) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+    return
+  }
+  emit('slot-click', event, props.nodeData, slotIndex, isInput)
+}
+
+const handleTitleUpdate = (newTitle: string) => {
+  emit('update:title', props.nodeData.id, newTitle)
+}
+</script>

src/components/graph/vueNodes/NodeContent.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Content Error
+  </div>
+  <div v-else class="lg-node-content">
+    <!-- Default slot for custom content -->
+    <slot>
+      <!-- This component serves as a placeholder for future extensibility -->
+      <!-- Currently all node content is rendered through the widget system -->
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
+interface NodeContentProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+defineProps<NodeContentProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>

src/components/graph/vueNodes/NodeHeader.vue

@@ -0,0 +1,149 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Header Error
+  </div>
+  <div
+    v-else
+    class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move"
+    :data-testid="`node-header-${nodeInfo?.id || ''}`"
+    :style="{
+      backgroundColor: headerColor,
+      color: textColor
+    }"
+    @dblclick="handleDoubleClick"
+  >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-show="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
+      @click.stop="handleCollapse"
+      @dblclick.stop
+    >
+      <i
+        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+        class="text-xs leading-none relative top-[1px]"
+      ></i>
+    </button>
+
+    <!-- Node Title -->
+    <div class="text-sm font-medium truncate flex-1" data-testid="node-title">
+      <EditableText
+        :model-value="displayTitle"
+        :is-editing="isEditing"
+        :input-attrs="{ 'data-testid': 'node-title-input' }"
+        @edit="handleTitleEdit"
+        @cancel="handleTitleCancel"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
+interface NodeHeaderProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+  collapsed?: boolean
+}
+
+const props = defineProps<NodeHeaderProps>()
+
+const emit = defineEmits<{
+  collapse: []
+  'update:title': [newTitle: string]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Editing state
+const isEditing = ref(false)
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Local state for title to provide immediate feedback
+const displayTitle = ref(nodeInfo.value?.title || 'Untitled')
+
+// Watch for external changes to the node title
+watch(
+  () => nodeInfo.value?.title,
+  (newTitle) => {
+    if (newTitle && newTitle !== displayTitle.value) {
+      displayTitle.value = newTitle
+    }
+  }
+)
+
+// Compute header color based on node color property or type
+const headerColor = computed(() => {
+  const info = nodeInfo.value
+  if (!info) return '#353535'
+
+  if (info.mode === 4) return '#666' // Bypassed
+  if (info.mode === 2) return '#444' // Muted
+  return '#353535' // Default
+})
+
+// Compute text color for contrast
+const textColor = computed(() => {
+  const color = headerColor.value
+  if (!color || color === '#353535' || color === '#444' || color === '#666') {
+    return '#fff'
+  }
+  const colorStr = String(color)
+  const rgb = parseInt(
+    colorStr.startsWith('#') ? colorStr.slice(1) : colorStr,
+    16
+  )
+  const r = (rgb >> 16) & 255
+  const g = (rgb >> 8) & 255
+  const b = rgb & 255
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000' : '#fff'
+})
+
+// Event handlers
+const handleCollapse = () => {
+  emit('collapse')
+}
+
+const handleDoubleClick = () => {
+  if (!props.readonly) {
+    isEditing.value = true
+  }
+}
+
+const handleTitleEdit = (newTitle: string) => {
+  isEditing.value = false
+  const trimmedTitle = newTitle.trim()
+  if (trimmedTitle && trimmedTitle !== displayTitle.value) {
+    // Emit for litegraph sync
+    emit('update:title', trimmedTitle)
+  }
+}
+
+const handleTitleCancel = () => {
+  isEditing.value = false
+  // Reset displayTitle to the current node title
+  displayTitle.value = nodeInfo.value?.title || 'Untitled'
+}
+</script>

src/components/graph/vueNodes/NodeSlots.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Slots Error
+  </div>
+  <div v-else class="lg-node-slots flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
+        :key="`input-${index}`"
+        :slot-data="input"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+        @slot-click="
+          handleInputSlotClick(getActualInputIndex(input, index), $event)
+        "
+      />
+    </div>
+
+    <div v-if="filteredOutputs.length" class="flex flex-col ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
+        :key="`output-${index}`"
+        :slot-data="output"
+        :index="index"
+        :readonly="readonly"
+        @slot-click="handleOutputSlotClick(index, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
+
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { isSlotObject } from '@/utils/typeGuardUtil'
+
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+import OutputSlot from './OutputSlot.vue'
+
+interface NodeSlotsProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeSlotsProps>()
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Filter out input slots that have corresponding widgets
+const filteredInputs = computed(() => {
+  if (!nodeInfo.value?.inputs) return []
+
+  return nodeInfo.value.inputs
+    .filter((input) => {
+      // Check if this slot has a widget property (indicating it has a corresponding widget)
+      if (isSlotObject(input) && 'widget' in input && input.widget) {
+        // This slot has a widget, so we should not display it separately
+        return false
+      }
+      return true
+    })
+    .map((input) =>
+      isSlotObject(input)
+        ? input
+        : ({
+            name: typeof input === 'string' ? input : '',
+            type: 'any',
+            boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+          } as INodeSlot)
+    )
+})
+
+// Outputs don't have widgets, so we don't need to filter them
+const filteredOutputs = computed(() => {
+  const outputs = nodeInfo.value?.outputs || []
+  return outputs.map((output) =>
+    isSlotObject(output)
+      ? output
+      : ({
+          name: typeof output === 'string' ? output : '',
+          type: 'any',
+          boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+        } as INodeSlot)
+  )
+})
+
+// Get the actual index of an input slot in the node's inputs array
+// (accounting for filtered widget slots)
+const getActualInputIndex = (
+  input: INodeSlot,
+  filteredIndex: number
+): number => {
+  if (!nodeInfo.value?.inputs) return filteredIndex
+
+  // Find the actual index in the unfiltered inputs array
+  const actualIndex = nodeInfo.value.inputs.findIndex((i) => i === input)
+  return actualIndex !== -1 ? actualIndex : filteredIndex
+}
+
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Handle input slot click
+const handleInputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Handle output slot click
+const handleOutputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>

src/components/graph/vueNodes/NodeWidgets.vue

@@ -0,0 +1,167 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Widgets Error
+  </div>
+  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
+    <div
+      v-for="(widget, index) in processedWidgets"
+      :key="`widget-${index}-${widget.name}`"
+      class="lg-widget-container relative flex items-center group"
+    >
+      <!-- Widget Input Slot Dot -->
+      <div
+        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+      >
+        <InputSlot
+          :slot-data="{
+            name: widget.name,
+            type: widget.type,
+            boundingRect: [0, 0, 0, 0]
+          }"
+          :index="index"
+          :readonly="readonly"
+          :dot-only="true"
+          @slot-click="handleWidgetSlotClick($event, widget)"
+        />
+      </div>
+      <!-- Widget Component -->
+      <component
+        :is="widget.vueComponent"
+        :widget="widget.simplified"
+        :model-value="widget.value"
+        :readonly="readonly"
+        class="flex-1"
+        @update:model-value="widget.updateHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
+
+// Import widget components directly
+import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
+import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
+import type {
+  SafeWidgetData,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
+import { LODLevel } from '@/composables/graph/useLOD'
+import {
+  ESSENTIAL_WIDGET_TYPES,
+  useWidgetRenderer
+} from '@/composables/graph/useWidgetRenderer'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+
+interface NodeWidgetsProps {
+  node?: LGraphNode
+  nodeData?: VueNodeData
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeWidgetsProps>()
+
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Use widget renderer composable
+const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+interface ProcessedWidget {
+  name: string
+  type: string
+  vueComponent: any
+  simplified: SimplifiedWidget
+  value: WidgetValue
+  updateHandler: (value: unknown) => void
+}
+
+const processedWidgets = computed((): ProcessedWidget[] => {
+  const info = nodeInfo.value
+  if (!info?.widgets) return []
+
+  const widgets = info.widgets as SafeWidgetData[]
+  const lodLevel = props.lodLevel
+  const result: ProcessedWidget[] = []
+
+  if (lodLevel === LODLevel.MINIMAL) {
+    return []
+  }
+
+  for (const widget of widgets) {
+    if (widget.options?.hidden) continue
+    if (widget.options?.canvasOnly) continue
+    if (!widget.type) continue
+    if (!shouldRenderAsVue(widget)) continue
+
+    if (
+      lodLevel === LODLevel.REDUCED &&
+      !ESSENTIAL_WIDGET_TYPES.has(widget.type)
+    )
+      continue
+
+    const componentName = getWidgetComponent(widget.type)
+    const vueComponent = widgetTypeToComponent[componentName] || WidgetInputText
+
+    const simplified: SimplifiedWidget = {
+      name: widget.name,
+      type: widget.type,
+      value: widget.value,
+      options: widget.options,
+      callback: widget.callback
+    }
+
+    const updateHandler = (value: unknown) => {
+      if (widget.callback) {
+        widget.callback(value)
+      }
+    }
+
+    result.push({
+      name: widget.name,
+      type: widget.type,
+      vueComponent,
+      simplified,
+      value: widget.value,
+      updateHandler
+    })
+  }
+
+  return result
+})
+
+// Handle widget slot click
+const handleWidgetSlotClick = (
+  event: PointerEvent,
+  _widget: ProcessedWidget
+) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+</script>

src/components/graph/vueNodes/OutputSlot.vue

@@ -0,0 +1,87 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pl-2 hover:bg-black/5': !dotOnly,
+      'justify-center': dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
+    }"
+    @pointerdown="handleClick"
+  >
+    <!-- Slot Name -->
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Output ${index}` }}
+    </span>
+
+    <!-- Connection Dot -->
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+interface OutputSlotProps {
+  node?: LGraphNode
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<OutputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
+// Handle click events
+const handleClick = (event: PointerEvent) => {
+  if (!props.readonly) {
+    emit('slot-click', event)
+  }
+}
+</script>

src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md

@@ -0,0 +1,295 @@
+# Level of Detail (LOD) Implementation Guide for Widgets
+
+## What is Level of Detail (LOD)?
+
+Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
+
+For ComfyUI nodes, this means:
+- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
+- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
+
+## Why LOD Matters
+
+Without LOD optimization:
+- 1000+ nodes with full detail = browser lag and poor performance
+- Text that's too small to read still gets rendered (wasted work)
+- Visual effects that are invisible at distance still consume GPU
+
+With LOD optimization:
+- Smooth performance even with large node graphs
+- Battery life improvement on laptops
+- Better user experience across different zoom levels
+
+## How to Implement LOD in Your Widget
+
+### Step 1: Get the LOD Context
+
+Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+
+```vue
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+  // ... other props
+}>()
+
+// Get LOD information
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+</script>
+```
+
+**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
+**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+
+### Step 2: Choose What to Show at Different Zoom Levels
+
+#### Understanding the LOD Score
+- `lodScore` is a number from 0 to 1
+- 0 = completely zoomed out (show minimal detail)
+- 1 = fully zoomed in (show everything)
+- 0.5 = medium zoom (show some details)
+
+#### Understanding LOD Levels
+- `'minimal'` = zoom level 0.4 or below (very zoomed out)
+- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
+- `'full'` = zoom level 0.8 or above (zoomed in close)
+
+### Step 3: Implement Your Widget's LOD Strategy
+
+Here's a complete example of a slider widget with LOD:
+
+```vue
+<template>
+  <div class="number-widget">
+    <!-- The main control always shows -->
+    <input 
+      v-model="value"
+      type="range"
+      :min="widget.min"
+      :max="widget.max"
+      class="widget-slider"
+    />
+    
+    <!-- Show label only when zoomed in enough to read it -->
+    <label 
+      v-if="showLabel"
+      class="widget-label"
+    >
+      {{ widget.name }}
+    </label>
+    
+    <!-- Show precise value only when fully zoomed in -->
+    <span 
+      v-if="showValue"
+      class="widget-value"
+    >
+      {{ formattedValue }}
+    </span>
+    
+    <!-- Show description only at full detail -->
+    <div 
+      v-if="showDescription && widget.description"
+      class="widget-description"
+    >
+      {{ widget.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+}>()
+
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+
+// Define when to show each element
+const showLabel = computed(() => {
+  // Show label when user can actually read it
+  return lodScore.value > 0.4  // Roughly 12px+ text size
+})
+
+const showValue = computed(() => {
+  // Show precise value only when zoomed in close
+  return lodScore.value > 0.7  // User is focused on this specific widget
+})
+
+const showDescription = computed(() => {
+  // Description only at full detail
+  return lodLevel.value === 'full'  // Maximum zoom level
+})
+
+// You can also use LOD for styling
+const widgetClasses = computed(() => {
+  const classes = ['number-widget']
+  
+  if (lodLevel.value === 'minimal') {
+    classes.push('widget--minimal')
+  }
+  
+  return classes
+})
+</script>
+
+<style scoped>
+/* Apply different styles based on LOD */
+.widget--minimal {
+  /* Simplified appearance when zoomed out */
+  .widget-slider {
+    height: 4px;  /* Thinner slider */
+    opacity: 0.9;
+  }
+}
+
+/* Normal styling */
+.widget-slider {
+  height: 8px;
+  transition: height 0.2s ease;
+}
+
+.widget-label {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.widget-value {
+  font-family: monospace;
+  font-size: 0.7rem;
+  color: var(--text-accent);
+}
+
+.widget-description {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+</style>
+```
+
+## Common LOD Patterns
+
+### Pattern 1: Essential vs. Nice-to-Have
+```typescript
+// Always show the main functionality
+const showMainControl = computed(() => true)
+
+// Granular control with lodScore
+const showLabels = computed(() => lodScore.value > 0.4)
+const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+
+// Simple control with lodLevel  
+const showExtras = computed(() => lodLevel.value === 'full')
+```
+
+### Pattern 2: Smooth Opacity Transitions
+```typescript
+// Gradually fade elements based on zoom
+const labelOpacity = computed(() => {
+  // Fade in from zoom 0.3 to 0.6
+  return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
+})
+```
+
+### Pattern 3: Progressive Detail
+```typescript
+const detailLevel = computed(() => {
+  if (lodScore.value < 0.3) return 'none'
+  if (lodScore.value < 0.6) return 'basic'
+  if (lodScore.value < 0.8) return 'standard'
+  return 'full'
+})
+```
+
+## LOD Guidelines by Widget Type
+
+### Text Input Widgets
+- **Always show**: The input field itself
+- **Medium zoom**: Show label
+- **High zoom**: Show placeholder text, validation messages
+- **Full zoom**: Show character count, format hints
+
+### Button Widgets  
+- **Always show**: The button
+- **Medium zoom**: Show button text
+- **High zoom**: Show button description
+- **Full zoom**: Show keyboard shortcuts, tooltips
+
+### Selection Widgets (Dropdown, Radio)
+- **Always show**: The current selection
+- **Medium zoom**: Show option labels
+- **High zoom**: Show all options when expanded
+- **Full zoom**: Show option descriptions, icons
+
+### Complex Widgets (Color Picker, File Browser)
+- **Always show**: Simplified representation (color swatch, filename)
+- **Medium zoom**: Show basic controls
+- **High zoom**: Show full interface
+- **Full zoom**: Show advanced options, previews
+
+## Design Collaboration Guidelines
+
+### For Designers
+When designing widgets, consider creating variants for different zoom levels:
+
+1. **Minimal Design** (far away view)
+   - Essential elements only
+   - Higher contrast for visibility
+   - Simplified shapes and fewer details
+
+2. **Standard Design** (normal view)
+   - Balanced detail and simplicity
+   - Clear labels and readable text
+   - Good for most use cases
+
+3. **Full Detail Design** (close-up view)
+   - All labels, descriptions, and help text
+   - Rich visual effects and polish
+   - Maximum information density
+
+### Design Handoff Checklist
+- [ ] Specify which elements are essential vs. nice-to-have
+- [ ] Define minimum readable sizes for text elements
+- [ ] Provide simplified versions for distant viewing
+- [ ] Consider color contrast at different opacity levels
+- [ ] Test designs at multiple zoom levels
+
+## Testing Your LOD Implementation
+
+### Manual Testing
+1. Create a workflow with your widget
+2. Zoom out until nodes are very small
+3. Verify essential functionality still works
+4. Zoom in gradually and check that details appear smoothly
+5. Test performance with 50+ nodes containing your widget
+
+### Performance Considerations
+- Avoid complex calculations in LOD computed properties
+- Use `v-if` instead of `v-show` for elements that won't render
+- Consider using `v-memo` for expensive widget content
+- Test on lower-end devices
+
+### Common Mistakes
+❌ **Don't**: Hide the main widget functionality at any zoom level
+❌ **Don't**: Use complex animations that trigger at every zoom change  
+❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
+❌ **Don't**: Forget to test with real content and edge cases
+
+✅ **Do**: Keep essential functionality always visible
+✅ **Do**: Use smooth transitions between LOD levels
+✅ **Do**: Test with varying content lengths and types
+✅ **Do**: Consider accessibility at all zoom levels
+
+## Getting Help
+
+- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
+- Ask in the ComfyUI frontend Discord for LOD implementation questions
+- Test your changes with the LOD debug panel (top-right in GraphCanvas)
+- Profile performance impact using browser dev tools

src/components/graph/vueWidgets/WidgetButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  BADGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+// Button specific excluded props
+const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
+)
+
+const handleClick = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback()
+  }
+}
+</script>

src/components/graph/vueWidgets/WidgetChart.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartData } from 'chart.js'
+import Chart from 'primevue/chart'
+import { computed } from 'vue'
+
+import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
+
+const value = defineModel<ChartData>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
+  readonly?: boolean
+}>()
+
+const chartType = computed(() => props.widget.options?.type ?? 'line')
+
+const chartData = computed(() => value.value || { labels: [], datasets: [] })
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#FFF',
+        usePointStyle: true,
+        pointStyle: 'circle'
+      }
+    }
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: true,
+        color: '#9FA2BD',
+        drawTicks: false,
+        drawOnChartArea: true,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    },
+    y: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    }
+  }
+}))
+</script>

src/components/graph/vueWidgets/WidgetColorPicker.vue

@@ -0,0 +1,52 @@
+<!-- Needs custom color picker for alpha support -->
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <ColorPicker
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      inline
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
+// ColorPicker specific excluded props include panel/overlay classes
+const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetFileUpload.vue

@@ -0,0 +1,324 @@
+<template>
+  <!-- Replace entire widget with image preview when image is loaded -->
+  <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
+  <div
+    v-if="hasImageFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above image -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <!-- TODO: finish once we finish value bindings with Litegraph -->
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Image preview -->
+    <!-- TODO: change hardcoded colors when design system incorporated -->
+    <div class="relative group">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+      <!-- Darkening overlay on hover -->
+      <div
+        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+      />
+      <!-- Control buttons in top right on hover -->
+      <div
+        v-if="!readonly"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      >
+        <!-- Edit button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="handleEdit"
+        >
+          <i class="pi pi-pencil text-white text-xs"></i>
+        </button>
+        <!-- Delete button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="clearFile"
+        >
+          <i class="pi pi-times text-white text-xs"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio preview when audio file is loaded -->
+  <div
+    v-else-if="hasAudioFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above audio player -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Audio player -->
+    <div class="relative group px-2">
+      <div
+        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        style="border: 1px solid #262729"
+      >
+        <!-- Audio icon -->
+        <div class="flex-shrink-0">
+          <i class="pi pi-volume-up text-2xl opacity-60"></i>
+        </div>
+
+        <!-- File info and controls -->
+        <div class="flex-1">
+          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="text-xs opacity-60">
+            {{
+              selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+            }}
+          </div>
+        </div>
+
+        <!-- Control buttons -->
+        <div v-if="!readonly" class="flex gap-1">
+          <!-- Delete button -->
+          <button
+            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            @click="clearFile"
+          >
+            <i class="pi pi-times text-white text-sm"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Show normal file upload UI when no image or audio is loaded -->
+  <div
+    v-else
+    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    :style="{ borderColor: '#262729' }"
+  >
+    <div
+      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-[#5B5E7D]"
+      :style="{ borderColor: '#262729' }"
+    >
+      <div class="flex flex-col items-center gap-2 w-full py-4">
+        <!-- Quick and dirty file type detection for testing -->
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-xs opacity-60"> Drop your file or </span>
+        <div>
+          <Button
+            label="Browse Files"
+            size="small"
+            class="text-xs"
+            :disabled="readonly"
+            @click="triggerFileInput"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Hidden file input always available for both states -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    class="hidden"
+    :accept="widget.options?.accept"
+    :multiple="false"
+    :disabled="readonly"
+    @change="handleFileChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+// import { useI18n } from 'vue-i18n' // Commented out for testing
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+// const { t } = useI18n() // Commented out for testing
+
+const props = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
+  }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
+}
+
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
+  }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!props.readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
+  }
+}
+
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
+}
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
+</script>

src/components/graph/vueWidgets/WidgetGalleria.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Galleria
+      v-model:activeIndex="activeIndex"
+      :value="galleryImages"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :show-thumbnails="showThumbnails"
+      :show-nav-buttons="showNavButtons"
+      class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
+    >
+      <template #item="{ item }">
+        <img
+          :src="item.itemImageSrc || item.src || item"
+          :alt="item.alt || 'Gallery image'"
+          class="w-full h-auto max-h-64 object-contain"
+        />
+      </template>
+      <template #thumbnail="{ item }">
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item.thumbnailImageSrc || item.src || item"
+            :alt="item.alt || 'Gallery thumbnail'"
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
+      </template>
+    </Galleria>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { computed, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  GALLERIA_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+interface GalleryImage {
+  itemImageSrc?: string
+  thumbnailImageSrc?: string
+  src?: string
+  alt?: string
+}
+
+type GalleryValue = string[] | GalleryImage[]
+
+const value = defineModel<GalleryValue>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<GalleryValue>
+  readonly?: boolean
+}>()
+
+const activeIndex = ref(0)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, GALLERIA_EXCLUDED_PROPS)
+)
+
+const galleryImages = computed(() => {
+  if (!value.value || !Array.isArray(value.value)) return []
+
+  return value.value.map((item, index) => {
+    if (typeof item === 'string') {
+      return {
+        itemImageSrc: item,
+        thumbnailImageSrc: item,
+        alt: `Image ${index + 1}`
+      }
+    }
+    return item
+  })
+})
+
+const showThumbnails = computed(() => {
+  return (
+    props.widget.options?.showThumbnails !== false &&
+    galleryImages.value.length > 1
+  )
+})
+
+const showNavButtons = computed(() => {
+  return (
+    props.widget.options?.showNavButtons !== false &&
+    galleryImages.value.length > 1
+  )
+})
+</script>
+
+<style scoped>
+/* Ensure thumbnail container doesn't overflow */
+:deep(.p-galleria-thumbnails) {
+  overflow: hidden;
+}
+
+/* Constrain thumbnail items to prevent overlap */
+:deep(.p-galleria-thumbnail-item) {
+  flex-shrink: 0;
+}
+
+/* Ensure thumbnail wrapper maintains aspect ratio */
+:deep(.p-galleria-thumbnail) {
+  overflow: hidden;
+}
+</style>

src/components/graph/vueWidgets/WidgetImage.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Image v-bind="filteredProps" :src="widget.value" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Image from 'primevue/image'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  IMAGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Image widgets typically don't have v-model, they display a source URL/path
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, IMAGE_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetImageCompare.vue

@@ -0,0 +1,70 @@
+<template>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
+</template>
+
+<script setup lang="ts">
+import ImageCompare from 'primevue/imagecompare'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+interface ImageCompareValue {
+  before: string
+  after: string
+  beforeAlt?: string
+  afterAlt?: string
+  initialPosition?: number
+}
+
+// Image compare widgets typically don't have v-model, they display comparison
+const props = defineProps<{
+  widget: SimplifiedWidget<ImageCompareValue | string>
+  readonly?: boolean
+}>()
+
+const beforeImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? value : value?.before || ''
+})
+
+const afterImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? '' : value?.after || ''
+})
+
+const beforeAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.beforeAlt
+    ? value.beforeAlt
+    : 'Before image'
+})
+
+const afterAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.afterAlt
+    ? value.afterAlt
+    : 'After image'
+})
+</script>

src/components/graph/vueWidgets/WidgetInputText.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <InputText
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetMarkdown.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed, nextTick, ref } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// State
+const isEditing = ref(false)
+const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Computed
+const renderedHtml = computed(() => {
+  return renderMarkdownToHtml(localValue.value || '')
+})
+
+// Methods
+const startEditing = async () => {
+  if (props.readonly || isEditing.value) return
+
+  isEditing.value = true
+  await nextTick()
+
+  // Focus the textarea
+  // @ts-expect-error - $el is an internal property of the Textarea component
+  textareaRef.value?.$el?.focus()
+}
+
+const handleBlur = () => {
+  isEditing.value = false
+}
+</script>
+
+<style scoped>
+.widget-markdown {
+  background-color: var(--p-muted-color);
+  border: 1px solid var(--p-border-color);
+  border-radius: var(--p-border-radius);
+}
+
+.widget-markdown:hover:not(:has(textarea)) {
+  background-color: var(--p-content-hover-background);
+}
+</style>

src/components/graph/vueWidgets/WidgetMultiSelect.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <MultiSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MultiSelect from 'primevue/multiselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any[]>
+  modelValue: any[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
+// MultiSelect specific excluded props include overlay styles
+const MULTISELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'overlayStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetSelect.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="flex items-center justify-between gap-4"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  emit
+})
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
+)
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
+</script>

src/components/graph/vueWidgets/WidgetSelectButton.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <SelectButton
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      :pt="{
+        pcToggleButton: {
+          label: 'text-xs'
+        }
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-selectbutton) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-selectbutton:hover) {
+  border-color: currentColor;
+}
+</style>

src/components/graph/vueWidgets/WidgetSlider.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <div class="flex items-center gap-2 flex-1 justify-end">
+      <Slider
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        @update:model-value="onChange"
+      />
+      <InputText
+        v-model="inputDisplayValue"
+        :disabled="readonly"
+        type="number"
+        :min="widget.options?.min"
+        :max="widget.options?.max"
+        :step="stepValue"
+        class="w-[4em] text-center text-xs px-0"
+        size="small"
+        @blur="handleInputBlur"
+        @keydown="handleInputKeydown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import { computed, ref, watch } from 'vue'
+
+import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  modelValue: number
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useNumberWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // If step is explicitly defined in options, use it
+  if (props.widget.options?.step !== undefined) {
+    return String(props.widget.options.step)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return '1'
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
+  }
+  // Default to 'any' for unrestricted stepping
+  return 'any'
+})
+
+// Format a number according to the widget's precision
+const formatNumber = (value: number): string => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return String(value)
+  }
+  // Use toFixed to ensure correct decimal places
+  return value.toFixed(precision.value)
+}
+
+// Apply precision-based rounding to a number
+const applyPrecision = (value: number): number => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return value
+  }
+  if (precision.value === 0) {
+    // Integer precision
+    return Math.round(value)
+  }
+  // Round to the specified decimal places
+  const multiplier = Math.pow(10, precision.value)
+  return Math.round(value * multiplier) / multiplier
+}
+
+// Keep a separate display value for the input field
+const inputDisplayValue = ref(formatNumber(localValue.value))
+
+// Update display value when localValue changes from external sources
+watch(localValue, (newValue) => {
+  inputDisplayValue.value = formatNumber(newValue)
+})
+
+const handleInputBlur = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value || '0'
+  const parsed = parseFloat(value)
+
+  if (!isNaN(parsed)) {
+    // Apply precision-based rounding
+    const roundedValue = applyPrecision(parsed)
+    onChange(roundedValue)
+    // Update display value with proper formatting
+    inputDisplayValue.value = formatNumber(roundedValue)
+  }
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const target = event.target as HTMLInputElement
+    const value = target.value || '0'
+    const parsed = parseFloat(value)
+
+    if (!isNaN(parsed)) {
+      // Apply precision-based rounding
+      const roundedValue = applyPrecision(parsed)
+      onChange(roundedValue)
+      // Update display value with proper formatting
+      inputDisplayValue.value = formatNumber(roundedValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Remove number input spinners */
+:deep(input[type='number']::-webkit-inner-spin-button),
+:deep(input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>

src/components/graph/vueWidgets/WidgetTextarea.vue

@@ -0,0 +1,44 @@
+<template>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    class="w-full text-xs"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetToggleSwitch.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+
+import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<boolean>
+  modelValue: boolean
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useBooleanWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-toggleswitch .p-toggleswitch-slider) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
+  border-color: currentColor;
+}
+</style>

src/components/graph/vueWidgets/WidgetTreeSelect.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <TreeSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeSelect from 'primevue/treeselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+// TreeSelect specific excluded props
+const TREE_SELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/widgetRegistry.ts

@@ -0,0 +1,83 @@
+/**
+ * Widget type registry and component mapping for Vue-based widgets
+ */
+import type { Component } from 'vue'
+
+// Component imports
+import WidgetButton from './WidgetButton.vue'
+import WidgetChart from './WidgetChart.vue'
+import WidgetColorPicker from './WidgetColorPicker.vue'
+import WidgetFileUpload from './WidgetFileUpload.vue'
+import WidgetGalleria from './WidgetGalleria.vue'
+import WidgetImage from './WidgetImage.vue'
+import WidgetImageCompare from './WidgetImageCompare.vue'
+import WidgetInputText from './WidgetInputText.vue'
+import WidgetMarkdown from './WidgetMarkdown.vue'
+import WidgetMultiSelect from './WidgetMultiSelect.vue'
+import WidgetSelect from './WidgetSelect.vue'
+import WidgetSelectButton from './WidgetSelectButton.vue'
+import WidgetSlider from './WidgetSlider.vue'
+import WidgetTextarea from './WidgetTextarea.vue'
+import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
+import WidgetTreeSelect from './WidgetTreeSelect.vue'
+
+/**
+ * Enum of all available widget types
+ */
+export enum WidgetType {
+  BUTTON = 'BUTTON',
+  STRING = 'STRING',
+  INT = 'INT',
+  FLOAT = 'FLOAT',
+  NUMBER = 'NUMBER',
+  BOOLEAN = 'BOOLEAN',
+  COMBO = 'COMBO',
+  COLOR = 'COLOR',
+  MULTISELECT = 'MULTISELECT',
+  SELECTBUTTON = 'SELECTBUTTON',
+  SLIDER = 'SLIDER',
+  TEXTAREA = 'TEXTAREA',
+  TOGGLESWITCH = 'TOGGLESWITCH',
+  CHART = 'CHART',
+  IMAGE = 'IMAGE',
+  IMAGECOMPARE = 'IMAGECOMPARE',
+  GALLERIA = 'GALLERIA',
+  FILEUPLOAD = 'FILEUPLOAD',
+  TREESELECT = 'TREESELECT',
+  MARKDOWN = 'MARKDOWN'
+}
+
+/**
+ * Maps widget types to their corresponding Vue components
+ * Components will be added as they are implemented
+ */
+export const widgetTypeToComponent: Record<string, Component> = {
+  // Components will be uncommented as they are implemented
+  [WidgetType.BUTTON]: WidgetButton,
+  [WidgetType.STRING]: WidgetInputText,
+  [WidgetType.INT]: WidgetSlider,
+  [WidgetType.FLOAT]: WidgetSlider,
+  [WidgetType.NUMBER]: WidgetSlider, // For compatibility
+  [WidgetType.BOOLEAN]: WidgetToggleSwitch,
+  [WidgetType.COMBO]: WidgetSelect,
+  [WidgetType.COLOR]: WidgetColorPicker,
+  [WidgetType.MULTISELECT]: WidgetMultiSelect,
+  [WidgetType.SELECTBUTTON]: WidgetSelectButton,
+  [WidgetType.SLIDER]: WidgetSlider,
+  [WidgetType.TEXTAREA]: WidgetTextarea,
+  [WidgetType.TOGGLESWITCH]: WidgetToggleSwitch,
+  [WidgetType.CHART]: WidgetChart,
+  [WidgetType.IMAGE]: WidgetImage,
+  [WidgetType.IMAGECOMPARE]: WidgetImageCompare,
+  [WidgetType.GALLERIA]: WidgetGalleria,
+  [WidgetType.FILEUPLOAD]: WidgetFileUpload,
+  [WidgetType.TREESELECT]: WidgetTreeSelect,
+  [WidgetType.MARKDOWN]: WidgetMarkdown
+}
+
+/**
+ * Helper function to get widget component by type
+ */
+export function getWidgetComponent(type: string): Component | undefined {
+  return widgetTypeToComponent[type]
+}

src/composables/element/useTransformState.ts

@@ -0,0 +1,242 @@
+/**
+ * Composable for managing transform state synchronized with LiteGraph canvas
+ *
+ * This composable is a critical part of the hybrid rendering architecture that
+ * allows Vue components to render in perfect alignment with LiteGraph's canvas.
+ *
+ * ## Core Concept
+ *
+ * LiteGraph uses a canvas for rendering connections, grid, and handling interactions.
+ * Vue components need to render nodes on top of this canvas. The challenge is
+ * synchronizing the coordinate systems:
+ *
+ * - LiteGraph: Uses canvas coordinates with its own transform matrix
+ * - Vue/DOM: Uses screen coordinates with CSS transforms
+ *
+ * ## Solution: Transform Container Pattern
+ *
+ * Instead of transforming individual nodes (O(n) complexity), we:
+ * 1. Mirror LiteGraph's transform matrix to a single CSS container
+ * 2. Place all Vue nodes as children with simple absolute positioning
+ * 3. Achieve O(1) transform updates regardless of node count
+ *
+ * ## Coordinate Systems
+ *
+ * - **Canvas coordinates**: LiteGraph's internal coordinate system
+ * - **Screen coordinates**: Browser's viewport coordinate system
+ * - **Transform sync**: camera.x/y/z mirrors canvas.ds.offset/scale
+ *
+ * ## Performance Benefits
+ *
+ * - GPU acceleration via CSS transforms
+ * - No layout thrashing (only transform changes)
+ * - Efficient viewport culling calculations
+ * - Scales to 1000+ nodes while maintaining 60 FPS
+ *
+ * @example
+ * ```typescript
+ * const { camera, transformStyle, canvasToScreen } = useTransformState()
+ *
+ * // In template
+ * <div :style="transformStyle">
+ *   <NodeComponent
+ *     v-for="node in nodes"
+ *     :style="{ left: node.x + 'px', top: node.y + 'px' }"
+ *   />
+ * </div>
+ *
+ * // Convert coordinates
+ * const screenPos = canvasToScreen({ x: nodeX, y: nodeY })
+ * ```
+ */
+import { computed, reactive, readonly } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Camera {
+  x: number
+  y: number
+  z: number // scale/zoom
+}
+
+export const useTransformState = () => {
+  // Reactive state mirroring LiteGraph's canvas transform
+  const camera = reactive<Camera>({
+    x: 0,
+    y: 0,
+    z: 1
+  })
+
+  // Computed transform string for CSS
+  const transformStyle = computed(() => ({
+    transform: `scale(${camera.z}) translate(${camera.x}px, ${camera.y}px)`,
+    transformOrigin: '0 0'
+  }))
+
+  /**
+   * Synchronizes Vue's reactive camera state with LiteGraph's canvas transform
+   *
+   * Called every frame via RAF to ensure Vue components stay aligned with canvas.
+   * This is the heart of the hybrid rendering system - it bridges the gap between
+   * LiteGraph's canvas transforms and Vue's reactive system.
+   *
+   * @param canvas - LiteGraph canvas instance with DragAndScale (ds) transform state
+   */
+  const syncWithCanvas = (canvas: LGraphCanvas) => {
+    if (!canvas || !canvas.ds) return
+
+    // Mirror LiteGraph's transform state to Vue's reactive state
+    // ds.offset = pan offset, ds.scale = zoom level
+    camera.x = canvas.ds.offset[0]
+    camera.y = canvas.ds.offset[1]
+    camera.z = canvas.ds.scale || 1
+  }
+
+  /**
+   * Converts canvas coordinates to screen coordinates
+   *
+   * Applies the same transform that LiteGraph uses for rendering.
+   * Essential for positioning Vue components to align with canvas elements.
+   *
+   * Formula: screen = canvas * scale + offset
+   *
+   * @param point - Point in canvas coordinate system
+   * @returns Point in screen coordinate system
+   */
+  const canvasToScreen = (point: Point): Point => {
+    return {
+      x: point.x * camera.z + camera.x,
+      y: point.y * camera.z + camera.y
+    }
+  }
+
+  /**
+   * Converts screen coordinates to canvas coordinates
+   *
+   * Inverse of canvasToScreen. Useful for hit testing and converting
+   * mouse events back to canvas space.
+   *
+   * Formula: canvas = (screen - offset) / scale
+   *
+   * @param point - Point in screen coordinate system
+   * @returns Point in canvas coordinate system
+   */
+  const screenToCanvas = (point: Point): Point => {
+    return {
+      x: (point.x - camera.x) / camera.z,
+      y: (point.y - camera.y) / camera.z
+    }
+  }
+
+  // Get node's screen bounds for culling
+  const getNodeScreenBounds = (
+    pos: ArrayLike<number>,
+    size: ArrayLike<number>
+  ): DOMRect => {
+    const topLeft = canvasToScreen({ x: pos[0], y: pos[1] })
+    const width = size[0] * camera.z
+    const height = size[1] * camera.z
+
+    return new DOMRect(topLeft.x, topLeft.y, width, height)
+  }
+
+  // Helper: Calculate zoom-adjusted margin for viewport culling
+  const calculateAdjustedMargin = (baseMargin: number): number => {
+    if (camera.z < 0.1) return Math.min(baseMargin * 5, 2.0)
+    if (camera.z > 3.0) return Math.max(baseMargin * 0.5, 0.05)
+    return baseMargin
+  }
+
+  // Helper: Check if node is too small to be visible at current zoom
+  const isNodeTooSmall = (nodeSize: ArrayLike<number>): boolean => {
+    const nodeScreenSize = Math.max(nodeSize[0], nodeSize[1]) * camera.z
+    return nodeScreenSize < 4
+  }
+
+  // Helper: Calculate expanded viewport bounds with margin
+  const getExpandedViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+    return {
+      left: -marginX,
+      right: viewport.width + marginX,
+      top: -marginY,
+      bottom: viewport.height + marginY
+    }
+  }
+
+  // Helper: Test if node intersects with viewport bounds
+  const testViewportIntersection = (
+    screenPos: { x: number; y: number },
+    nodeSize: ArrayLike<number>,
+    bounds: { left: number; right: number; top: number; bottom: number }
+  ): boolean => {
+    const nodeRight = screenPos.x + nodeSize[0] * camera.z
+    const nodeBottom = screenPos.y + nodeSize[1] * camera.z
+
+    return !(
+      nodeRight < bounds.left ||
+      screenPos.x > bounds.right ||
+      nodeBottom < bounds.top ||
+      screenPos.y > bounds.bottom
+    )
+  }
+
+  // Check if node is within viewport with frustum and size-based culling
+  const isNodeInViewport = (
+    nodePos: ArrayLike<number>,
+    nodeSize: ArrayLike<number>,
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ): boolean => {
+    // Early exit for tiny nodes
+    if (isNodeTooSmall(nodeSize)) return false
+
+    const screenPos = canvasToScreen({ x: nodePos[0], y: nodePos[1] })
+    const adjustedMargin = calculateAdjustedMargin(margin)
+    const bounds = getExpandedViewportBounds(viewport, adjustedMargin)
+
+    return testViewportIntersection(screenPos, nodeSize, bounds)
+  }
+
+  // Get viewport bounds in canvas coordinates (for spatial index queries)
+  const getViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+
+    const topLeft = screenToCanvas({ x: -marginX, y: -marginY })
+    const bottomRight = screenToCanvas({
+      x: viewport.width + marginX,
+      y: viewport.height + marginY
+    })
+
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: bottomRight.x - topLeft.x,
+      height: bottomRight.y - topLeft.y
+    }
+  }
+
+  return {
+    camera: readonly(camera),
+    transformStyle,
+    syncWithCanvas,
+    canvasToScreen,
+    screenToCanvas,
+    getNodeScreenBounds,
+    isNodeInViewport,
+    getViewportBounds
+  }
+}

src/composables/graph/README.md

@@ -0,0 +1,211 @@
+# Graph Composables - Reactive Layout System
+
+This directory contains composables for the reactive layout system, enabling Vue nodes to handle their own interactions while maintaining synchronization with LiteGraph.
+
+## Composable Architecture
+
+```mermaid
+graph TB
+    subgraph "Composables"
+        URL[useReactiveLayout<br/>- Singleton Management<br/>- Service Access]
+        UVNI[useVueNodeInteraction<br/>- Node Dragging<br/>- CSS Transforms]
+        ULGS[useLiteGraphSync<br/>- Bidirectional Sync<br/>- Position Updates]
+    end
+
+    subgraph "Services"
+        LT[ReactiveLayoutTree]
+        HT[ReactiveHitTester]
+    end
+
+    subgraph "Components"
+        GC[GraphCanvas]
+        VN[Vue Nodes]
+        TP[TransformPane]
+    end
+
+    URL --> LT
+    URL --> HT
+    UVNI --> URL
+    ULGS --> URL
+    
+    GC --> ULGS
+    VN --> UVNI
+    TP --> URL
+</mermaid>
+
+## Interaction Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant VueNode
+    participant UVNI as useVueNodeInteraction
+    participant LT as LayoutTree
+    participant LG as LiteGraph
+
+    User->>VueNode: pointerdown
+    VueNode->>UVNI: startDrag(event)
+    UVNI->>UVNI: Set drag state
+    UVNI->>UVNI: Capture pointer
+    
+    User->>VueNode: pointermove
+    VueNode->>UVNI: handleDrag(event)
+    UVNI->>UVNI: Calculate delta
+    UVNI->>VueNode: Update CSS transform
+    Note over VueNode: Visual feedback only
+    
+    User->>VueNode: pointerup
+    VueNode->>UVNI: endDrag(event)
+    UVNI->>LT: updateNodePosition(finalPos)
+    LT->>LG: Trigger reactive sync
+    LG->>LG: Update canvas
+```
+
+## useReactiveLayout
+
+Singleton management for the reactive layout system.
+
+```mermaid
+classDiagram
+    class useReactiveLayout {
+        +layoutTree: ComputedRef~ReactiveLayoutTree~
+        +hitTester: ComputedRef~ReactiveHitTester~
+        +nodePositions: ComputedRef~Map~
+        +nodeBounds: ComputedRef~Map~
+        +selectedNodes: ComputedRef~Set~
+        -initialize(): void
+    }
+
+    class Singleton {
+        <<pattern>>
+        Shared across all components
+    }
+
+    useReactiveLayout --> Singleton : implements
+```
+
+## useVueNodeInteraction
+
+Handles individual node interactions with CSS transforms.
+
+```mermaid
+flowchart LR
+    subgraph "Drag State"
+        DS[isDragging<br/>dragDelta<br/>dragStartPos]
+    end
+    
+    subgraph "Event Handlers"
+        SD[startDrag]
+        HD[handleDrag]
+        ED[endDrag]
+    end
+    
+    subgraph "Computed Styles"
+        NS[nodeStyle<br/>- position<br/>- dimensions<br/>- z-index]
+        DGS[dragStyle<br/>- transform<br/>- transition]
+    end
+    
+    SD --> DS
+    HD --> DS
+    ED --> DS
+    
+    DS --> NS
+    DS --> DGS
+```
+
+### Transform Calculation
+
+```mermaid
+graph TB
+    subgraph "Mouse Delta"
+        MD[event.clientX/Y - startMouse]
+    end
+    
+    subgraph "Canvas Transform"
+        CT[screenToCanvas conversion]
+    end
+    
+    subgraph "Drag Delta"
+        DD[Canvas-space delta]
+    end
+    
+    subgraph "CSS Transform"
+        CSS[translate(deltaX, deltaY)]
+    end
+    
+    MD --> CT
+    CT --> DD
+    DD --> CSS
+```
+
+## useLiteGraphSync
+
+Bidirectional synchronization between LiteGraph and the reactive layout tree.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Initialize
+    
+    Initialize --> SyncFromLiteGraph
+    SyncFromLiteGraph --> WatchLayoutTree
+    
+    state WatchLayoutTree {
+        [*] --> Listening
+        Listening --> PositionChanged: Layout tree update
+        PositionChanged --> UpdateLiteGraph
+        UpdateLiteGraph --> TriggerRedraw
+        TriggerRedraw --> Listening
+    }
+    
+    state SyncFromLiteGraph {
+        [*] --> ReadNodes
+        ReadNodes --> UpdateLayoutTree
+        UpdateLayoutTree --> [*]
+    }
+```
+
+## Integration Example
+
+```typescript
+// In GraphCanvas.vue
+const { initializeSync } = useLiteGraphSync()
+onMounted(() => {
+  initializeSync() // Start bidirectional sync
+})
+
+// In LGraphNode.vue
+const {
+  isDragging,
+  startDrag,
+  handleDrag,
+  endDrag,
+  dragStyle,
+  updatePosition
+} = useVueNodeInteraction(props.nodeData.id)
+
+// Template
+<div
+  :style="[
+    {
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      // ... other styles
+    },
+    dragStyle // Applied during drag
+  ]"
+  @pointerdown="handlePointerDown"
+  @pointermove="handlePointerMove"
+  @pointerup="handlePointerUp"
+>
+```
+
+## Performance Considerations
+
+1. **CSS Transforms During Drag**: No layout recalculation, GPU accelerated
+2. **Batch Position Updates**: Layout tree updates trigger single LiteGraph sync
+3. **Reactive Efficiency**: Vue's computed properties cache results
+4. **Spatial Indexing**: QuadTree integration for fast hit testing
+
+## Future Migration Path
+
+Currently: Vue nodes use CSS transforms, commit to layout tree on drag end
+Future: Each renderer owns complete interaction handling and layout state

src/composables/graph/useCanvasTransformSync.ts

@@ -0,0 +1,115 @@
+import { onUnmounted, ref } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export interface CanvasTransformSyncOptions {
+  /**
+   * Whether to automatically start syncing when canvas is available
+   * @default true
+   */
+  autoStart?: boolean
+}
+
+export interface CanvasTransformSyncCallbacks {
+  /**
+   * Called when sync starts
+   */
+  onStart?: () => void
+  /**
+   * Called after each sync update with timing information
+   */
+  onUpdate?: (duration: number) => void
+  /**
+   * Called when sync stops
+   */
+  onStop?: () => void
+}
+
+/**
+ * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
+ *
+ * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
+ * on every frame. It handles RAF lifecycle management, provides performance timing,
+ * and ensures proper cleanup.
+ *
+ * The sync function typically reads canvas.ds (draw state) properties like offset and scale
+ * to keep Vue components aligned with the canvas coordinate system.
+ *
+ * @example
+ * ```ts
+ * const { isActive, startSync, stopSync } = useCanvasTransformSync(
+ *   canvas,
+ *   (canvas) => syncWithCanvas(canvas),
+ *   {
+ *     onStart: () => emit('rafStatusChange', true),
+ *     onUpdate: (time) => emit('transformUpdate', time),
+ *     onStop: () => emit('rafStatusChange', false)
+ *   }
+ * )
+ * ```
+ */
+export function useCanvasTransformSync(
+  canvas: LGraphCanvas | undefined | null,
+  syncFn: (canvas: LGraphCanvas) => void,
+  callbacks: CanvasTransformSyncCallbacks = {},
+  options: CanvasTransformSyncOptions = {}
+) {
+  const { autoStart = true } = options
+  const { onStart, onUpdate, onStop } = callbacks
+
+  const isActive = ref(false)
+  let rafId: number | null = null
+
+  const startSync = () => {
+    if (isActive.value || !canvas) return
+
+    isActive.value = true
+    onStart?.()
+
+    const sync = () => {
+      if (!isActive.value || !canvas) return
+
+      try {
+        const startTime = performance.now()
+        syncFn(canvas)
+        const endTime = performance.now()
+
+        onUpdate?.(endTime - startTime)
+      } catch (error) {
+        console.warn('Canvas transform sync error:', error)
+      }
+
+      rafId = requestAnimationFrame(sync)
+    }
+
+    sync()
+  }
+
+  const stopSync = () => {
+    if (!isActive.value) return
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    isActive.value = false
+    onStop?.()
+  }
+
+  // Auto-start if canvas is available and autoStart is enabled
+  if (autoStart && canvas) {
+    startSync()
+  }
+
+  // Clean up on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    isActive,
+    startSync,
+    stopSync
+  }
+}

src/composables/graph/useEventForwarding.ts

@@ -0,0 +1,186 @@
+import { useCanvasStore } from '@/stores/graphStore'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export function useEventForwarding() {
+  const canvasStore = useCanvasStore()
+
+  // Track active drag operation
+  let isDragging = false
+  let dragCleanup: (() => void) | null = null
+  // Store last known position for escape key handling
+  const lastPointerPosition = { x: 0, y: 0 }
+
+  function createSyntheticPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: string
+  ): PointerEvent {
+    // Only copy properties that LiteGraph actually uses
+    return new PointerEvent(eventType, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      // Position properties
+      clientX: originalEvent.clientX,
+      clientY: originalEvent.clientY,
+      // Modifier keys
+      ctrlKey: originalEvent.ctrlKey,
+      shiftKey: originalEvent.shiftKey,
+      altKey: originalEvent.altKey,
+      metaKey: originalEvent.metaKey,
+      // Button state
+      button: originalEvent.button,
+      buttons: originalEvent.buttons,
+      // Pointer tracking
+      pointerId: originalEvent.pointerId,
+      isPrimary: originalEvent.isPrimary,
+      pointerType: originalEvent.pointerType
+    })
+  }
+
+  function forwardPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: 'down' | 'move' | 'up'
+  ) {
+    const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+    if (!canvas) {
+      console.warn('No canvas available for event forwarding')
+      return
+    }
+
+    // Prevent original event from bubbling to canvas
+    originalEvent.stopPropagation()
+    originalEvent.preventDefault()
+
+    // Create synthetic event
+    const syntheticEvent = createSyntheticPointerEvent(
+      originalEvent,
+      `pointer${eventType}`
+    )
+
+    // Create a mutable copy of the event for LiteGraph to modify
+    const mutableEvent = syntheticEvent as PointerEvent & {
+      canvasX?: number
+      canvasY?: number
+      deltaX?: number
+      deltaY?: number
+      safeOffsetX?: number
+      safeOffsetY?: number
+    }
+
+    // Let LiteGraph adjust coordinates to graph space
+    // Using 'as any' to bypass TypeScript assertion limitations
+    ;(canvas.adjustMouseEvent as any)(mutableEvent)
+
+    // Forward to appropriate handler
+    switch (eventType) {
+      case 'down':
+        canvas.processMouseDown(mutableEvent)
+        break
+      case 'move':
+        canvas.processMouseMove(mutableEvent)
+        break
+      case 'up':
+        canvas.processMouseUp(mutableEvent)
+        break
+    }
+  }
+
+  // Pre-create event handlers to avoid recreating on each pointerdown
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging) return
+    // Update last known position
+    lastPointerPosition.x = e.clientX
+    lastPointerPosition.y = e.clientY
+    forwardPointerEvent(e, 'move')
+  }
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isDragging) return
+
+    isDragging = false
+    forwardPointerEvent(e, 'up')
+
+    // Clean up listeners
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Handle escape key to cancel drag
+    if (e.key === 'Escape' && isDragging) {
+      isDragging = false
+
+      // Create minimal synthetic cancel event
+      const cancelEvent = new PointerEvent('pointerup', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        // Use last known position from the current drag operation
+        clientX: lastPointerPosition.x,
+        clientY: lastPointerPosition.y,
+        button: 0,
+        buttons: 0
+      })
+
+      const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+      if (canvas) {
+        const mutableCancelEvent = cancelEvent as PointerEvent & {
+          canvasX?: number
+          canvasY?: number
+          deltaX?: number
+          deltaY?: number
+          safeOffsetX?: number
+          safeOffsetY?: number
+        }
+        ;(canvas.adjustMouseEvent as any)(mutableCancelEvent)
+        canvas.processMouseUp(mutableCancelEvent)
+      }
+
+      // Clean up
+      if (dragCleanup) {
+        dragCleanup()
+        dragCleanup = null
+      }
+    }
+  }
+
+  function handleSlotPointerDown(originalEvent: PointerEvent) {
+    // Forward the initial pointer down
+    forwardPointerEvent(originalEvent, 'down')
+
+    // Set up drag handling
+    isDragging = true
+    // Initialize last known position
+    lastPointerPosition.x = originalEvent.clientX
+    lastPointerPosition.y = originalEvent.clientY
+
+    // Add global listeners for drag handling
+    document.addEventListener('pointermove', handlePointerMove, true)
+    document.addEventListener('pointerup', handlePointerUp, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+
+    // Store cleanup function
+    dragCleanup = () => {
+      document.removeEventListener('pointermove', handlePointerMove, true)
+      document.removeEventListener('pointerup', handlePointerUp, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }
+
+  // Cleanup on unmount
+  function cleanup() {
+    isDragging = false
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  return {
+    handleSlotPointerDown,
+    cleanup
+  }
+}

src/composables/graph/useGraphNodeManager.ts

@@ -0,0 +1,809 @@
+/**
+ * Vue node lifecycle management for LiteGraph integration
+ * Provides event-driven reactivity with performance optimizations
+ */
+import { nextTick, reactive, readonly } from 'vue'
+
+import { layoutMutations } from '@/services/layoutMutations'
+import type { WidgetValue } from '@/types/simplifiedWidget'
+import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
+
+import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
+import { type Bounds, QuadTree } from '../../utils/spatial/QuadTree'
+
+export interface NodeState {
+  visible: boolean
+  dirty: boolean
+  lastUpdate: number
+  culled: boolean
+}
+
+export interface NodeMetadata {
+  lastRenderTime: number
+  cachedBounds: DOMRect | null
+  lodLevel: 'high' | 'medium' | 'low'
+  spatialIndex?: QuadTree<string>
+}
+
+export interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  updateTime: number
+  nodeCount: number
+  culledCount: number
+  callbackUpdateCount: number
+  rafUpdateCount: number
+  adaptiveQuality: boolean
+}
+
+export interface SafeWidgetData {
+  name: string
+  type: string
+  value: WidgetValue
+  options?: Record<string, unknown>
+  callback?: ((value: unknown) => void) | undefined
+}
+
+export interface VueNodeData {
+  id: string
+  title: string
+  type: string
+  mode: number
+  selected: boolean
+  executing: boolean
+  widgets?: SafeWidgetData[]
+  inputs?: unknown[]
+  outputs?: unknown[]
+  flags?: {
+    collapsed?: boolean
+  }
+}
+
+export interface SpatialMetrics {
+  queryTime: number
+  nodesInIndex: number
+}
+
+export interface GraphNodeManager {
+  // Reactive state - safe data extracted from LiteGraph nodes
+  vueNodeData: ReadonlyMap<string, VueNodeData>
+  nodeState: ReadonlyMap<string, NodeState>
+  nodePositions: ReadonlyMap<string, { x: number; y: number }>
+  nodeSizes: ReadonlyMap<string, { width: number; height: number }>
+
+  // Access to original LiteGraph nodes (non-reactive)
+  getNode(id: string): LGraphNode | undefined
+
+  // Lifecycle methods
+  setupEventListeners(): () => void
+  cleanup(): void
+
+  // Update methods
+  scheduleUpdate(
+    nodeId?: string,
+    priority?: 'critical' | 'normal' | 'low'
+  ): void
+  forceSync(): void
+  detectChangesInRAF(): void
+
+  // Spatial queries
+  getVisibleNodeIds(viewportBounds: Bounds): Set<string>
+
+  // Performance
+  performanceMetrics: PerformanceMetrics
+  spatialMetrics: SpatialMetrics
+
+  // Debug
+  getSpatialIndexDebugInfo(): SpatialIndexDebugInfo | null
+}
+
+export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+  // Safe reactive data extracted from LiteGraph nodes
+  const vueNodeData = reactive(new Map<string, VueNodeData>())
+  const nodeState = reactive(new Map<string, NodeState>())
+  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
+  const nodeSizes = reactive(
+    new Map<string, { width: number; height: number }>()
+  )
+
+  // Non-reactive storage for original LiteGraph nodes
+  const nodeRefs = new Map<string, LGraphNode>()
+
+  // WeakMap for heavy data that auto-GCs when nodes are removed
+  const nodeMetadata = new WeakMap<LGraphNode, NodeMetadata>()
+
+  // Performance tracking
+  const performanceMetrics = reactive<PerformanceMetrics>({
+    fps: 0,
+    frameTime: 0,
+    updateTime: 0,
+    nodeCount: 0,
+    culledCount: 0,
+    callbackUpdateCount: 0,
+    rafUpdateCount: 0,
+    adaptiveQuality: false
+  })
+
+  // Spatial indexing using QuadTree
+  const spatialIndex = new QuadTree<string>(
+    { x: -10000, y: -10000, width: 20000, height: 20000 },
+    { maxDepth: 6, maxItemsPerNode: 4 }
+  )
+  let lastSpatialQueryTime = 0
+
+  // Spatial metrics
+  const spatialMetrics = reactive<SpatialMetrics>({
+    queryTime: 0,
+    nodesInIndex: 0
+  })
+
+  // Update batching
+  const pendingUpdates = new Set<string>()
+  const criticalUpdates = new Set<string>()
+  const lowPriorityUpdates = new Set<string>()
+  let updateScheduled = false
+  let batchTimeoutId: number | null = null
+
+  // Change detection state
+  const lastNodesSnapshot = new Map<
+    string,
+    { pos: [number, number]; size: [number, number] }
+  >()
+
+  const attachMetadata = (node: LGraphNode) => {
+    nodeMetadata.set(node, {
+      lastRenderTime: performance.now(),
+      cachedBounds: null,
+      lodLevel: 'high',
+      spatialIndex: undefined
+    })
+  }
+
+  // Extract safe data from LiteGraph node for Vue consumption
+  const extractVueNodeData = (node: LGraphNode): VueNodeData => {
+    // Extract safe widget data
+    const safeWidgets = node.widgets?.map((widget) => {
+      try {
+        // TODO: Use widget.getReactiveData() once TypeScript types are updated
+        let value = widget.value
+
+        // For combo widgets, if value is undefined, use the first option as default
+        if (
+          value === undefined &&
+          widget.type === 'combo' &&
+          widget.options?.values &&
+          Array.isArray(widget.options.values) &&
+          widget.options.values.length > 0
+        ) {
+          value = widget.options.values[0]
+        }
+
+        return {
+          name: widget.name,
+          type: widget.type,
+          value: value,
+          options: widget.options ? { ...widget.options } : undefined,
+          callback: widget.callback
+        }
+      } catch (error) {
+        return {
+          name: widget.name || 'unknown',
+          type: widget.type || 'text',
+          value: undefined, // Already a valid WidgetValue
+          options: undefined,
+          callback: undefined
+        }
+      }
+    })
+
+    return {
+      id: String(node.id),
+      title: node.title || 'Untitled',
+      type: node.type || 'Unknown',
+      mode: node.mode || 0,
+      selected: node.selected || false,
+      executing: false, // Will be updated separately based on execution state
+      widgets: safeWidgets,
+      inputs: node.inputs ? [...node.inputs] : undefined,
+      outputs: node.outputs ? [...node.outputs] : undefined,
+      flags: node.flags ? { ...node.flags } : undefined
+    }
+  }
+
+  // Get access to original LiteGraph node (non-reactive)
+  const getNode = (id: string): LGraphNode | undefined => {
+    return nodeRefs.get(id)
+  }
+
+  /**
+   * Validates that a value is a valid WidgetValue type
+   */
+  const validateWidgetValue = (value: unknown): WidgetValue => {
+    if (value === null || value === undefined || value === void 0) {
+      return undefined
+    }
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      return value
+    }
+    if (typeof value === 'object') {
+      // Check if it's a File array
+      if (Array.isArray(value) && value.every((item) => item instanceof File)) {
+        return value as File[]
+      }
+      // Otherwise it's a generic object
+      return value as object
+    }
+    // If none of the above, return undefined
+    console.warn(`Invalid widget value type: ${typeof value}`, value)
+    return undefined
+  }
+
+  /**
+   * Updates Vue state when widget values change
+   */
+  const updateVueWidgetState = (
+    nodeId: string,
+    widgetName: string,
+    value: unknown
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName ? { ...w, value: validateWidgetValue(value) } : w
+      )
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        widgets: updatedWidgets
+      })
+      performanceMetrics.callbackUpdateCount++
+    } catch (error) {
+      // Ignore widget update errors to prevent cascade failures
+    }
+  }
+
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedWidgetCallback = (
+    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      try {
+        // 1. Update the widget value in LiteGraph (critical for LiteGraph state)
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
+
+        // 2. Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // 3. Update Vue state to maintain synchronization
+        updateVueWidgetState(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node - now with reduced nesting
+   */
+  const setupNodeWidgetCallbacks = (node: LGraphNode) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedWidgetCallback(
+        widget,
+        originalCallback,
+        nodeId
+      )
+    })
+  }
+
+  // Uncomment when needed for future features
+  // const getNodeMetadata = (node: LGraphNode): NodeMetadata => {
+  //   let metadata = nodeMetadata.get(node)
+  //   if (!metadata) {
+  //     attachMetadata(node)
+  //     metadata = nodeMetadata.get(node)!
+  //   }
+  //   return metadata
+  // }
+
+  const scheduleUpdate = (
+    nodeId?: string,
+    priority: 'critical' | 'normal' | 'low' = 'normal'
+  ) => {
+    if (nodeId) {
+      const state = nodeState.get(nodeId)
+      if (state) state.dirty = true
+
+      // Priority queuing
+      if (priority === 'critical') {
+        criticalUpdates.add(nodeId)
+        flush() // Immediate flush for critical updates
+        return
+      } else if (priority === 'low') {
+        lowPriorityUpdates.add(nodeId)
+      } else {
+        pendingUpdates.add(nodeId)
+      }
+    }
+
+    if (!updateScheduled) {
+      updateScheduled = true
+
+      // Adaptive batching strategy
+      if (pendingUpdates.size > 10) {
+        // Many updates - batch in nextTick
+        void nextTick(() => flush())
+      } else {
+        // Few updates - small delay for more batching
+        batchTimeoutId = window.setTimeout(() => flush(), 4)
+      }
+    }
+  }
+
+  const flush = () => {
+    const startTime = performance.now()
+
+    if (batchTimeoutId !== null) {
+      clearTimeout(batchTimeoutId)
+      batchTimeoutId = null
+    }
+
+    // Clear all pending updates
+    criticalUpdates.clear()
+    pendingUpdates.clear()
+    lowPriorityUpdates.clear()
+    updateScheduled = false
+
+    // Sync with graph state
+    syncWithGraph()
+
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+  }
+
+  const syncWithGraph = () => {
+    if (!graph?._nodes) return
+
+    const currentNodes = new Set(graph._nodes.map((n) => String(n.id)))
+
+    // Remove deleted nodes
+    for (const id of Array.from(vueNodeData.keys())) {
+      if (!currentNodes.has(id)) {
+        nodeRefs.delete(id)
+        vueNodeData.delete(id)
+        nodeState.delete(id)
+        nodePositions.delete(id)
+        nodeSizes.delete(id)
+        lastNodesSnapshot.delete(id)
+        spatialIndex.remove(id)
+      }
+    }
+
+    // Add/update existing nodes
+    graph._nodes.forEach((node) => {
+      const id = String(node.id)
+
+      // Store non-reactive reference
+      nodeRefs.set(id, node)
+
+      // Set up widget callbacks BEFORE extracting data (critical order)
+      setupNodeWidgetCallbacks(node)
+
+      // Extract and store safe data for Vue
+      vueNodeData.set(id, extractVueNodeData(node))
+
+      if (!nodeState.has(id)) {
+        nodeState.set(id, {
+          visible: true,
+          dirty: false,
+          lastUpdate: performance.now(),
+          culled: false
+        })
+        nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+        nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+        attachMetadata(node)
+
+        // Add to spatial index
+        const bounds: Bounds = {
+          x: node.pos[0],
+          y: node.pos[1],
+          width: node.size[0],
+          height: node.size[1]
+        }
+        spatialIndex.insert(id, bounds, id)
+      }
+    })
+
+    // Update performance metrics
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (s) => s.culled
+    ).length
+  }
+
+  // Most performant: Direct position sync without re-setting entire node
+  // Query visible nodes using QuadTree spatial index
+  const getVisibleNodeIds = (viewportBounds: Bounds): Set<string> => {
+    const startTime = performance.now()
+
+    // Use QuadTree for fast spatial query
+    const results: string[] = spatialIndex.query(viewportBounds)
+    const visibleIds = new Set(results)
+
+    lastSpatialQueryTime = performance.now() - startTime
+    spatialMetrics.queryTime = lastSpatialQueryTime
+
+    return visibleIds
+  }
+
+  /**
+   * Detects position changes for a single node and updates reactive state
+   */
+  const detectPositionChanges = (node: LGraphNode, id: string): boolean => {
+    const currentPos = nodePositions.get(id)
+
+    if (
+      !currentPos ||
+      currentPos.x !== node.pos[0] ||
+      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
+  }
+
+  /**
+   * Detects size changes for a single node and updates reactive state
+   */
+  const detectSizeChanges = (node: LGraphNode, id: string): boolean => {
+    const currentSize = nodeSizes.get(id)
+
+    if (
+      !currentSize ||
+      currentSize.width !== node.size[0] ||
+      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
+  }
+
+  /**
+   * Updates spatial index for a node if bounds changed
+   */
+  const updateSpatialIndex = (node: LGraphNode, id: string): void => {
+    const bounds: Bounds = {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+    spatialIndex.update(id, bounds)
+  }
+
+  /**
+   * Updates performance metrics after change detection
+   */
+  const updatePerformanceMetrics = (
+    startTime: number,
+    positionUpdates: number,
+    sizeUpdates: number
+  ): void => {
+    const endTime = performance.now()
+    performanceMetrics.updateTime = endTime - startTime
+    performanceMetrics.nodeCount = vueNodeData.size
+    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
+      (state) => state.culled
+    ).length
+    spatialMetrics.nodesInIndex = spatialIndex.size
+
+    if (positionUpdates > 0 || sizeUpdates > 0) {
+      performanceMetrics.rafUpdateCount++
+    }
+  }
+
+  /**
+   * Main RAF change detection function - now simplified with extracted helpers
+   */
+  const detectChangesInRAF = () => {
+    const startTime = performance.now()
+
+    if (!graph?._nodes) return
+
+    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)
+
+      const posChanged = detectPositionChanges(node, id)
+      const sizeChanged = detectSizeChanges(node, id)
+
+      if (posChanged) positionUpdates++
+      if (sizeChanged) sizeUpdates++
+
+      // Update spatial index if geometry changed
+      if (posChanged || sizeChanged) {
+        updateSpatialIndex(node, id)
+      }
+    }
+
+    updatePerformanceMetrics(startTime, positionUpdates, sizeUpdates)
+  }
+
+  /**
+   * Handles node addition to the graph - sets up Vue state and spatial indexing
+   */
+  const handleNodeAdded = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // Store non-reactive reference to original node
+    nodeRefs.set(id, node)
+
+    // Set up widget callbacks BEFORE extracting data (critical order)
+    setupNodeWidgetCallbacks(node)
+
+    // Extract safe data for Vue (now with proper callbacks)
+    vueNodeData.set(id, extractVueNodeData(node))
+
+    // Set up reactive tracking state
+    nodeState.set(id, {
+      visible: true,
+      dirty: false,
+      lastUpdate: performance.now(),
+      culled: false
+    })
+    nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+    nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+    attachMetadata(node)
+
+    // Add to spatial index for viewport culling
+    const bounds: Bounds = {
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1]
+    }
+    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)
+    }
+  }
+
+  /**
+   * Handles node removal from the graph - cleans up all references
+   */
+  const handleNodeRemoved = (
+    node: LGraphNode,
+    originalCallback?: (node: LGraphNode) => void
+  ) => {
+    const id = String(node.id)
+
+    // 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)
+    nodeState.delete(id)
+    nodePositions.delete(id)
+    nodeSizes.delete(id)
+    lastNodesSnapshot.delete(id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      originalCallback(node)
+    }
+  }
+
+  /**
+   * Creates cleanup function for event listeners and state
+   */
+  const createCleanupFunction = (
+    originalOnNodeAdded: ((node: LGraphNode) => void) | undefined,
+    originalOnNodeRemoved: ((node: LGraphNode) => void) | undefined,
+    originalOnTrigger: ((action: string, param: unknown) => void) | undefined
+  ) => {
+    return () => {
+      // Restore original callbacks
+      graph.onNodeAdded = originalOnNodeAdded || undefined
+      graph.onNodeRemoved = originalOnNodeRemoved || undefined
+      graph.onTrigger = originalOnTrigger || undefined
+
+      // Clear pending updates
+      if (batchTimeoutId !== null) {
+        clearTimeout(batchTimeoutId)
+        batchTimeoutId = null
+      }
+
+      // Clear all state maps
+      nodeRefs.clear()
+      vueNodeData.clear()
+      nodeState.clear()
+      nodePositions.clear()
+      nodeSizes.clear()
+      lastNodesSnapshot.clear()
+      pendingUpdates.clear()
+      criticalUpdates.clear()
+      lowPriorityUpdates.clear()
+      spatialIndex.clear()
+    }
+  }
+
+  /**
+   * Sets up event listeners - now simplified with extracted handlers
+   */
+  const setupEventListeners = (): (() => void) => {
+    // Store original callbacks
+    const originalOnNodeAdded = graph.onNodeAdded
+    const originalOnNodeRemoved = graph.onNodeRemoved
+    const originalOnTrigger = graph.onTrigger
+
+    // Set up graph event handlers
+    graph.onNodeAdded = (node: LGraphNode) => {
+      handleNodeAdded(node, originalOnNodeAdded)
+    }
+
+    graph.onNodeRemoved = (node: LGraphNode) => {
+      handleNodeRemoved(node, originalOnNodeRemoved)
+    }
+
+    // Listen for property change events from instrumented nodes
+    graph.onTrigger = (action: string, param: unknown) => {
+      if (
+        action === 'node:property:changed' &&
+        param &&
+        typeof param === 'object'
+      ) {
+        const event = param as {
+          nodeId: string | number
+          property: string
+          oldValue: unknown
+          newValue: unknown
+        }
+
+        const nodeId = String(event.nodeId)
+        const currentData = vueNodeData.get(nodeId)
+
+        if (currentData) {
+          if (event.property === 'title') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              title: String(event.newValue)
+            })
+          } else if (event.property === 'flags.collapsed') {
+            vueNodeData.set(nodeId, {
+              ...currentData,
+              flags: {
+                ...currentData.flags,
+                collapsed: Boolean(event.newValue)
+              }
+            })
+          }
+        }
+      }
+
+      // Call original trigger handler if it exists
+      if (originalOnTrigger) {
+        originalOnTrigger(action, param)
+      }
+    }
+
+    // Initialize state
+    syncWithGraph()
+
+    // Return cleanup function
+    return createCleanupFunction(
+      originalOnNodeAdded || undefined,
+      originalOnNodeRemoved || undefined,
+      originalOnTrigger || undefined
+    )
+  }
+
+  // Set up event listeners immediately
+  const cleanup = setupEventListeners()
+
+  // Process any existing nodes after event listeners are set up
+  if (graph._nodes && graph._nodes.length > 0) {
+    graph._nodes.forEach((node: LGraphNode) => {
+      if (graph.onNodeAdded) {
+        graph.onNodeAdded(node)
+      }
+    })
+  }
+
+  return {
+    vueNodeData: readonly(vueNodeData) as ReadonlyMap<string, VueNodeData>,
+    nodeState: readonly(nodeState) as ReadonlyMap<string, NodeState>,
+    nodePositions: readonly(nodePositions) as ReadonlyMap<
+      string,
+      { x: number; y: number }
+    >,
+    nodeSizes: readonly(nodeSizes) as ReadonlyMap<
+      string,
+      { width: number; height: number }
+    >,
+    getNode,
+    setupEventListeners,
+    cleanup,
+    scheduleUpdate,
+    forceSync: syncWithGraph,
+    detectChangesInRAF,
+    getVisibleNodeIds,
+    performanceMetrics,
+    spatialMetrics: readonly(spatialMetrics),
+    getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
+  }
+}

src/composables/graph/useLOD.ts

@@ -0,0 +1,186 @@
+/**
+ * Level of Detail (LOD) composable for Vue-based node rendering
+ *
+ * Provides dynamic quality adjustment based on zoom level to maintain
+ * performance with large node graphs. Uses zoom thresholds to determine
+ * how much detail to render for each node component.
+ *
+ * ## LOD Levels
+ *
+ * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
+ * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
+ * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
+ *
+ * ## Performance Benefits
+ *
+ * - Reduces DOM element count by up to 80% at low zoom levels
+ * - Minimizes layout calculations and paint operations
+ * - Enables smooth performance with 1000+ nodes
+ * - Maintains visual fidelity when detail is actually visible
+ *
+ * @example
+ * ```typescript
+ * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
+ *
+ * // In template
+ * <NodeWidgets v-if="shouldRenderWidgets" />
+ * <NodeSlots v-if="shouldRenderSlots" />
+ * ```
+ */
+import { type Ref, computed, readonly } from 'vue'
+
+export enum LODLevel {
+  MINIMAL = 'minimal', // zoom <= 0.4
+  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
+  FULL = 'full' // zoom > 0.8
+}
+
+export interface LODConfig {
+  renderWidgets: boolean
+  renderSlots: boolean
+  renderContent: boolean
+  renderSlotLabels: boolean
+  renderWidgetLabels: boolean
+  cssClass: string
+}
+
+// LOD configuration for each level
+const LOD_CONFIGS: Record<LODLevel, LODConfig> = {
+  [LODLevel.FULL]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: true,
+    renderSlotLabels: true,
+    renderWidgetLabels: true,
+    cssClass: 'lg-node--lod-full'
+  },
+  [LODLevel.REDUCED]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-reduced'
+  },
+  [LODLevel.MINIMAL]: {
+    renderWidgets: false,
+    renderSlots: false,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-minimal'
+  }
+}
+
+/**
+ * Create LOD (Level of Detail) state based on zoom level
+ *
+ * @param zoomRef - Reactive reference to current zoom level (camera.z)
+ * @returns LOD state and configuration
+ */
+export function useLOD(zoomRef: Ref<number>) {
+  // Continuous LOD score (0-1) for smooth transitions
+  const lodScore = computed(() => {
+    const zoom = zoomRef.value
+    return Math.max(0, Math.min(1, zoom))
+  })
+
+  // Determine current LOD level based on zoom
+  const lodLevel = computed<LODLevel>(() => {
+    const zoom = zoomRef.value
+
+    if (zoom > 0.8) return LODLevel.FULL
+    if (zoom > 0.4) return LODLevel.REDUCED
+    return LODLevel.MINIMAL
+  })
+
+  // Get configuration for current LOD level
+  const lodConfig = computed<LODConfig>(() => LOD_CONFIGS[lodLevel.value])
+
+  // Convenience computed properties for common rendering decisions
+  const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
+  const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
+  const shouldRenderContent = computed(() => lodConfig.value.renderContent)
+  const shouldRenderSlotLabels = computed(
+    () => lodConfig.value.renderSlotLabels
+  )
+  const shouldRenderWidgetLabels = computed(
+    () => lodConfig.value.renderWidgetLabels
+  )
+
+  // CSS class for styling based on LOD level
+  const lodCssClass = computed(() => lodConfig.value.cssClass)
+
+  // Get essential widgets for reduced LOD (only interactive controls)
+  const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
+    if (lodLevel.value === LODLevel.FULL) return widgets
+    if (lodLevel.value === LODLevel.MINIMAL) return []
+
+    // For reduced LOD, filter to essential widget types only
+    return widgets.filter((widget: any) => {
+      const type = widget?.type?.toLowerCase()
+      return [
+        'combo',
+        'select',
+        'toggle',
+        'boolean',
+        'slider',
+        'number'
+      ].includes(type)
+    })
+  }
+
+  // Performance metrics for debugging
+  const lodMetrics = computed(() => ({
+    level: lodLevel.value,
+    zoom: zoomRef.value,
+    widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
+    slotCount: shouldRenderSlots.value ? 'full' : 'none'
+  }))
+
+  return {
+    // Core LOD state
+    lodLevel: readonly(lodLevel),
+    lodConfig: readonly(lodConfig),
+    lodScore: readonly(lodScore),
+
+    // Rendering decisions
+    shouldRenderWidgets,
+    shouldRenderSlots,
+    shouldRenderContent,
+    shouldRenderSlotLabels,
+    shouldRenderWidgetLabels,
+
+    // Styling
+    lodCssClass,
+
+    // Utilities
+    getEssentialWidgets,
+    lodMetrics
+  }
+}
+
+/**
+ * Get LOD level thresholds for configuration or debugging
+ */
+export const LOD_THRESHOLDS = {
+  FULL_THRESHOLD: 0.8,
+  REDUCED_THRESHOLD: 0.4,
+  MINIMAL_THRESHOLD: 0.0
+} as const
+
+/**
+ * Check if zoom level supports a specific feature
+ */
+export function supportsFeatureAtZoom(
+  zoom: number,
+  feature: keyof LODConfig
+): boolean {
+  const level =
+    zoom > 0.8
+      ? LODLevel.FULL
+      : zoom > 0.4
+        ? LODLevel.REDUCED
+        : LODLevel.MINIMAL
+  return LOD_CONFIGS[level][feature] as boolean
+}

src/composables/graph/useLayout.ts

@@ -0,0 +1,31 @@
+/**
+ * Main composable for accessing the layout system
+ *
+ * Provides unified access to the layout store and mutation API.
+ */
+import { layoutMutations } from '@/services/layoutMutations'
+import { layoutStore } from '@/stores/layoutStore'
+import type { Bounds, NodeId, Point } from '@/types/layoutTypes'
+
+/**
+ * Main composable for accessing the layout system
+ */
+export function useLayout() {
+  return {
+    // Store access
+    store: layoutStore,
+
+    // Mutation API
+    mutations: layoutMutations,
+
+    // Reactive accessors
+    getNodeLayoutRef: (nodeId: NodeId) => layoutStore.getNodeLayoutRef(nodeId),
+    getAllNodes: () => layoutStore.getAllNodes(),
+    getNodesInBounds: (bounds: Bounds) => layoutStore.getNodesInBounds(bounds),
+
+    // Non-reactive queries (for performance)
+    queryNodeAtPoint: (point: Point) => layoutStore.queryNodeAtPoint(point),
+    queryNodesInBounds: (bounds: Bounds) =>
+      layoutStore.queryNodesInBounds(bounds)
+  }
+}

src/composables/graph/useLayoutSync.ts

@@ -0,0 +1,97 @@
+/**
+ * Composable for syncing LiteGraph with the Layout system
+ *
+ * Implements one-way sync from Layout Store to LiteGraph.
+ * The layout store is the single source of truth.
+ */
+import log from 'loglevel'
+import { onUnmounted } from 'vue'
+
+import { layoutStore } from '@/stores/layoutStore'
+
+// Create a logger for layout debugging
+const logger = log.getLogger('layout')
+// In dev mode, always show debug logs
+if (import.meta.env.DEV) {
+  logger.setLevel('debug')
+}
+
+/**
+ * Composable for syncing LiteGraph with the Layout system
+ * This replaces the bidirectional sync with a one-way sync
+ */
+export function useLayoutSync() {
+  let unsubscribe: (() => void) | null = null
+
+  /**
+   * Start syncing from Layout system to LiteGraph
+   * This is one-way: Layout → LiteGraph only
+   */
+  function startSync(canvas: any) {
+    if (!canvas?.graph) return
+
+    // Subscribe to layout changes
+    unsubscribe = layoutStore.onChange((change) => {
+      logger.debug('Layout sync received change:', {
+        source: change.source,
+        nodeIds: change.nodeIds,
+        type: change.type
+      })
+
+      // Apply changes to LiteGraph regardless of source
+      // The layout store is the single source of truth
+      for (const nodeId of change.nodeIds) {
+        const layout = layoutStore.getNodeLayoutRef(nodeId).value
+        if (!layout) continue
+
+        const liteNode = canvas.graph.getNodeById(parseInt(nodeId))
+        if (!liteNode) continue
+
+        // Update position if changed
+        if (
+          liteNode.pos[0] !== layout.position.x ||
+          liteNode.pos[1] !== layout.position.y
+        ) {
+          logger.debug(`Updating LiteGraph node ${nodeId} position:`, {
+            from: { x: liteNode.pos[0], y: liteNode.pos[1] },
+            to: layout.position
+          })
+          liteNode.pos[0] = layout.position.x
+          liteNode.pos[1] = layout.position.y
+        }
+
+        // Update size if changed
+        if (
+          liteNode.size[0] !== layout.size.width ||
+          liteNode.size[1] !== layout.size.height
+        ) {
+          liteNode.size[0] = layout.size.width
+          liteNode.size[1] = layout.size.height
+        }
+      }
+
+      // Trigger single redraw for all changes
+      canvas.setDirty(true, true)
+    })
+  }
+
+  /**
+   * Stop syncing
+   */
+  function stopSync() {
+    if (unsubscribe) {
+      unsubscribe()
+      unsubscribe = null
+    }
+  }
+
+  // Auto-cleanup on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    startSync,
+    stopSync
+  }
+}

src/composables/graph/useNodeChangeDetection.ts

@@ -0,0 +1,180 @@
+/**
+ * Node Change Detection
+ *
+ * RAF-based change detection for node positions and sizes.
+ * Syncs LiteGraph changes to the layout system.
+ */
+import { reactive } from 'vue'
+
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { layoutMutations } from '@/services/layoutMutations'
+
+export interface ChangeDetectionMetrics {
+  updateTime: number
+  positionUpdates: number
+  sizeUpdates: number
+  rafUpdateCount: number
+}
+
+/**
+ * Change detection for node geometry
+ */
+export function useNodeChangeDetection(graph: LGraph) {
+  const metrics = reactive<ChangeDetectionMetrics>({
+    updateTime: 0,
+    positionUpdates: 0,
+    sizeUpdates: 0,
+    rafUpdateCount: 0
+  })
+
+  // Track last known positions/sizes
+  const lastSnapshot = new Map<
+    string,
+    { pos: [number, number]; size: [number, number] }
+  >()
+
+  /**
+   * Detects position changes for a single node
+   */
+  const detectPositionChanges = (
+    node: LGraphNode,
+    nodePositions: Map<string, { x: number; y: number }>
+  ): boolean => {
+    const id = String(node.id)
+    const currentPos = nodePositions.get(id)
+
+    if (
+      !currentPos ||
+      currentPos.x !== node.pos[0] ||
+      currentPos.y !== node.pos[1]
+    ) {
+      nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+
+      // Push position change to layout store
+      void layoutMutations.moveNode(id, { x: node.pos[0], y: node.pos[1] })
+
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Detects size changes for a single node
+   */
+  const detectSizeChanges = (
+    node: LGraphNode,
+    nodeSizes: Map<string, { width: number; height: number }>
+  ): boolean => {
+    const id = String(node.id)
+    const currentSize = nodeSizes.get(id)
+
+    if (
+      !currentSize ||
+      currentSize.width !== node.size[0] ||
+      currentSize.height !== node.size[1]
+    ) {
+      nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+
+      // Push size change to layout store
+      void layoutMutations.resizeNode(id, {
+        width: node.size[0],
+        height: node.size[1]
+      })
+
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Main RAF change detection function
+   */
+  const detectChanges = (
+    nodePositions: Map<string, { x: number; y: number }>,
+    nodeSizes: Map<string, { width: number; height: number }>,
+    onSpatialChange?: (node: LGraphNode, id: string) => void
+  ) => {
+    const startTime = performance.now()
+
+    if (!graph?._nodes) return
+
+    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)
+
+      const posChanged = detectPositionChanges(node, nodePositions)
+      const sizeChanged = detectSizeChanges(node, nodeSizes)
+
+      if (posChanged) positionUpdates++
+      if (sizeChanged) sizeUpdates++
+
+      // Notify spatial change if needed
+      if ((posChanged || sizeChanged) && onSpatialChange) {
+        onSpatialChange(node, id)
+      }
+    }
+
+    // Update metrics
+    const endTime = performance.now()
+    metrics.updateTime = endTime - startTime
+    metrics.positionUpdates = positionUpdates
+    metrics.sizeUpdates = sizeUpdates
+
+    if (positionUpdates > 0 || sizeUpdates > 0) {
+      metrics.rafUpdateCount++
+    }
+  }
+
+  /**
+   * Take a snapshot of current node positions/sizes
+   */
+  const takeSnapshot = () => {
+    if (!graph?._nodes) return
+
+    lastSnapshot.clear()
+    for (const node of graph._nodes) {
+      lastSnapshot.set(String(node.id), {
+        pos: [node.pos[0], node.pos[1]],
+        size: [node.size[0], node.size[1]]
+      })
+    }
+  }
+
+  /**
+   * Check if any nodes have changed since last snapshot
+   */
+  const hasChangedSinceSnapshot = (): boolean => {
+    if (!graph?._nodes) return false
+
+    for (const node of graph._nodes) {
+      const id = String(node.id)
+      const last = lastSnapshot.get(id)
+      if (!last) continue
+
+      if (
+        last.pos[0] !== node.pos[0] ||
+        last.pos[1] !== node.pos[1] ||
+        last.size[0] !== node.size[0] ||
+        last.size[1] !== node.size[1]
+      ) {
+        return true
+      }
+    }
+    return false
+  }
+
+  return {
+    metrics,
+    detectChanges,
+    detectPositionChanges,
+    detectSizeChanges,
+    takeSnapshot,
+    hasChangedSinceSnapshot
+  }
+}

src/composables/graph/useNodeLayout.ts

@@ -0,0 +1,199 @@
+/**
+ * Composable for individual Vue node components
+ *
+ * Uses customRef for shared write access with Canvas renderer.
+ * Provides dragging functionality and reactive layout state.
+ */
+import log from 'loglevel'
+import { computed, inject } from 'vue'
+
+import { layoutMutations } from '@/services/layoutMutations'
+import { layoutStore } from '@/stores/layoutStore'
+import type { Point } from '@/types/layoutTypes'
+
+// Create a logger for layout debugging
+const logger = log.getLogger('layout')
+// In dev mode, always show debug logs
+if (import.meta.env.DEV) {
+  logger.setLevel('debug')
+}
+
+/**
+ * Composable for individual Vue node components
+ * Uses customRef for shared write access with Canvas renderer
+ */
+export function useNodeLayout(nodeId: string) {
+  const store = layoutStore
+  const mutations = layoutMutations
+
+  // Get transform utilities from TransformPane if available
+  const transformState = inject('transformState') as
+    | {
+        canvasToScreen: (point: Point) => Point
+        screenToCanvas: (point: Point) => Point
+      }
+    | undefined
+
+  // Get the customRef for this node (shared write access)
+  const layoutRef = store.getNodeLayoutRef(nodeId)
+
+  logger.debug(`useNodeLayout initialized for node ${nodeId}`, {
+    hasLayout: !!layoutRef.value,
+    initialPosition: layoutRef.value?.position
+  })
+
+  // Computed properties for easy access
+  const position = computed(() => {
+    const layout = layoutRef.value
+    const pos = layout?.position ?? { x: 0, y: 0 }
+    logger.debug(`Node ${nodeId} position computed:`, {
+      pos,
+      hasLayout: !!layout,
+      layoutRefValue: layout
+    })
+    return pos
+  })
+  const size = computed(
+    () => layoutRef.value?.size ?? { width: 200, height: 100 }
+  )
+  const bounds = computed(
+    () =>
+      layoutRef.value?.bounds ?? {
+        x: position.value.x,
+        y: position.value.y,
+        width: size.value.width,
+        height: size.value.height
+      }
+  )
+  const isVisible = computed(() => layoutRef.value?.visible ?? true)
+  const zIndex = computed(() => layoutRef.value?.zIndex ?? 0)
+
+  // Drag state
+  let isDragging = false
+  let dragStartPos: Point | null = null
+  let dragStartMouse: Point | null = null
+
+  /**
+   * Start dragging the node
+   */
+  function startDrag(event: PointerEvent) {
+    if (!layoutRef.value) return
+
+    isDragging = true
+    dragStartPos = { ...position.value }
+    dragStartMouse = { x: event.clientX, y: event.clientY }
+
+    // Set mutation source
+    mutations.setSource('vue')
+
+    // Capture pointer
+    const target = event.target as HTMLElement
+    target.setPointerCapture(event.pointerId)
+  }
+
+  /**
+   * Handle drag movement
+   */
+  const handleDrag = (event: PointerEvent) => {
+    if (!isDragging || !dragStartPos || !dragStartMouse || !transformState) {
+      logger.debug(`Drag skipped for node ${nodeId}:`, {
+        isDragging,
+        hasDragStartPos: !!dragStartPos,
+        hasDragStartMouse: !!dragStartMouse,
+        hasTransformState: !!transformState
+      })
+      return
+    }
+
+    // Calculate mouse delta in screen coordinates
+    const mouseDelta = {
+      x: event.clientX - dragStartMouse.x,
+      y: event.clientY - dragStartMouse.y
+    }
+
+    // Convert to canvas coordinates
+    const canvasOrigin = transformState.screenToCanvas({ x: 0, y: 0 })
+    const canvasWithDelta = transformState.screenToCanvas(mouseDelta)
+    const canvasDelta = {
+      x: canvasWithDelta.x - canvasOrigin.x,
+      y: canvasWithDelta.y - canvasOrigin.y
+    }
+
+    // Calculate new position
+    const newPosition = {
+      x: dragStartPos.x + canvasDelta.x,
+      y: dragStartPos.y + canvasDelta.y
+    }
+
+    logger.debug(`Dragging node ${nodeId}:`, {
+      mouseDelta,
+      canvasDelta,
+      newPosition,
+      currentLayoutPos: layoutRef.value?.position
+    })
+
+    // Apply mutation through the layout system
+    mutations.moveNode(nodeId, newPosition)
+  }
+
+  /**
+   * End dragging
+   */
+  function endDrag(event: PointerEvent) {
+    if (!isDragging) return
+
+    isDragging = false
+    dragStartPos = null
+    dragStartMouse = null
+
+    // Release pointer
+    const target = event.target as HTMLElement
+    target.releasePointerCapture(event.pointerId)
+  }
+
+  /**
+   * Update node position directly (without drag)
+   */
+  function moveTo(position: Point) {
+    mutations.setSource('vue')
+    mutations.moveNode(nodeId, position)
+  }
+
+  /**
+   * Update node size
+   */
+  function resize(newSize: { width: number; height: number }) {
+    mutations.setSource('vue')
+    mutations.resizeNode(nodeId, newSize)
+  }
+
+  return {
+    // Reactive state (via customRef)
+    layoutRef,
+    position,
+    size,
+    bounds,
+    isVisible,
+    zIndex,
+
+    // Mutations
+    moveTo,
+    resize,
+
+    // Drag handlers
+    startDrag,
+    handleDrag,
+    endDrag,
+
+    // Computed styles for Vue templates
+    nodeStyle: computed(() => ({
+      position: 'absolute' as const,
+      left: `${position.value.x}px`,
+      top: `${position.value.y}px`,
+      width: `${size.value.width}px`,
+      height: `${size.value.height}px`,
+      zIndex: zIndex.value,
+      cursor: isDragging ? 'grabbing' : 'grab'
+    }))
+  }
+}

src/composables/graph/useNodeState.ts

@@ -0,0 +1,260 @@
+/**
+ * Node State Management
+ *
+ * Manages node visibility, dirty state, and other UI state.
+ * Provides reactive state for Vue components.
+ */
+import { nextTick, reactive, readonly } from 'vue'
+
+import { PERFORMANCE_CONFIG } from '@/constants/layout'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+import type { SafeWidgetData, VueNodeData, WidgetValue } from './useNodeWidgets'
+
+export interface NodeState {
+  visible: boolean
+  dirty: boolean
+  lastUpdate: number
+  culled: boolean
+}
+
+export interface NodeMetadata {
+  lastRenderTime: number
+  cachedBounds: DOMRect | null
+  lodLevel: 'high' | 'medium' | 'low'
+}
+
+/**
+ * Extract safe Vue data from LiteGraph node
+ */
+export function extractVueNodeData(
+  node: LGraphNode,
+  widgets?: SafeWidgetData[]
+): VueNodeData {
+  return {
+    id: String(node.id),
+    title: node.title || 'Untitled',
+    type: node.type || 'Unknown',
+    mode: node.mode || 0,
+    selected: node.selected || false,
+    executing: false, // Will be updated separately based on execution state
+    widgets,
+    inputs: node.inputs ? [...node.inputs] : undefined,
+    outputs: node.outputs ? [...node.outputs] : undefined,
+    flags: node.flags ? { ...node.flags } : undefined
+  }
+}
+
+/**
+ * Node state management composable
+ */
+export function useNodeState() {
+  // Reactive state maps
+  const vueNodeData = reactive(new Map<string, VueNodeData>())
+  const nodeState = reactive(new Map<string, NodeState>())
+  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
+  const nodeSizes = reactive(
+    new Map<string, { width: number; height: number }>()
+  )
+
+  // Non-reactive node references
+  const nodeRefs = new Map<string, LGraphNode>()
+
+  // WeakMap for heavy metadata that auto-GCs
+  const nodeMetadata = new WeakMap<LGraphNode, NodeMetadata>()
+
+  // Update batching
+  const pendingUpdates = new Set<string>()
+  const criticalUpdates = new Set<string>()
+  const lowPriorityUpdates = new Set<string>()
+  let updateScheduled = false
+  let batchTimeoutId: number | null = null
+
+  /**
+   * Attach metadata to a node
+   */
+  const attachMetadata = (node: LGraphNode) => {
+    nodeMetadata.set(node, {
+      lastRenderTime: performance.now(),
+      cachedBounds: null,
+      lodLevel: 'high'
+    })
+  }
+
+  /**
+   * Get access to original LiteGraph node
+   */
+  const getNode = (id: string): LGraphNode | undefined => {
+    return nodeRefs.get(id)
+  }
+
+  /**
+   * Schedule an update for a node
+   */
+  const scheduleUpdate = (
+    nodeId?: string,
+    priority: 'critical' | 'normal' | 'low' = 'normal'
+  ) => {
+    if (nodeId) {
+      const state = nodeState.get(nodeId)
+      if (state) state.dirty = true
+
+      // Priority queuing
+      if (priority === 'critical') {
+        criticalUpdates.add(nodeId)
+        flush() // Immediate flush for critical updates
+        return
+      } else if (priority === 'low') {
+        lowPriorityUpdates.add(nodeId)
+      } else {
+        pendingUpdates.add(nodeId)
+      }
+    }
+
+    if (!updateScheduled) {
+      updateScheduled = true
+
+      // Adaptive batching strategy
+      if (pendingUpdates.size > 10) {
+        // Many updates - batch in nextTick
+        void nextTick(() => flush())
+      } else {
+        // Few updates - small delay for more batching
+        batchTimeoutId = window.setTimeout(
+          () => flush(),
+          PERFORMANCE_CONFIG.BATCH_UPDATE_DELAY
+        )
+      }
+    }
+  }
+
+  /**
+   * Flush all pending updates
+   */
+  const flush = () => {
+    if (batchTimeoutId !== null) {
+      clearTimeout(batchTimeoutId)
+      batchTimeoutId = null
+    }
+
+    // Clear all pending updates
+    criticalUpdates.clear()
+    pendingUpdates.clear()
+    lowPriorityUpdates.clear()
+    updateScheduled = false
+
+    // Trigger any additional update logic here
+  }
+
+  /**
+   * Initialize node state
+   */
+  const initializeNode = (node: LGraphNode, vueData: VueNodeData): void => {
+    const id = String(node.id)
+
+    // Store references
+    nodeRefs.set(id, node)
+    vueNodeData.set(id, vueData)
+
+    // Initialize state
+    nodeState.set(id, {
+      visible: true,
+      dirty: false,
+      lastUpdate: performance.now(),
+      culled: false
+    })
+
+    // Initialize position and size
+    nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
+    nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
+
+    // Attach metadata
+    attachMetadata(node)
+  }
+
+  /**
+   * Clean up node state
+   */
+  const cleanupNode = (nodeId: string): void => {
+    nodeRefs.delete(nodeId)
+    vueNodeData.delete(nodeId)
+    nodeState.delete(nodeId)
+    nodePositions.delete(nodeId)
+    nodeSizes.delete(nodeId)
+  }
+
+  /**
+   * Update node property
+   */
+  const updateNodeProperty = (
+    nodeId: string,
+    property: string,
+    value: unknown
+  ): void => {
+    const currentData = vueNodeData.get(nodeId)
+    if (!currentData) return
+
+    if (property === 'title') {
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        title: String(value)
+      })
+    } else if (property === 'flags.collapsed') {
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        flags: {
+          ...currentData.flags,
+          collapsed: Boolean(value)
+        }
+      })
+    }
+  }
+
+  /**
+   * Update widget state
+   */
+  const updateWidgetState = (
+    nodeId: string,
+    widgetName: string,
+    value: unknown
+  ): void => {
+    const currentData = vueNodeData.get(nodeId)
+    if (!currentData?.widgets) return
+
+    const updatedWidgets = currentData.widgets.map((w) =>
+      w.name === widgetName ? { ...w, value: value as WidgetValue } : w
+    )
+    vueNodeData.set(nodeId, {
+      ...currentData,
+      widgets: updatedWidgets
+    })
+  }
+
+  return {
+    // State maps (read-only)
+    vueNodeData: readonly(vueNodeData) as ReadonlyMap<string, VueNodeData>,
+    nodeState: readonly(nodeState) as ReadonlyMap<string, NodeState>,
+    nodePositions: readonly(nodePositions) as ReadonlyMap<
+      string,
+      { x: number; y: number }
+    >,
+    nodeSizes: readonly(nodeSizes) as ReadonlyMap<
+      string,
+      { width: number; height: number }
+    >,
+
+    // Methods
+    getNode,
+    attachMetadata,
+    scheduleUpdate,
+    flush,
+    initializeNode,
+    cleanupNode,
+    updateNodeProperty,
+    updateWidgetState,
+
+    // Mutable access for internal use
+    _mutableNodePositions: nodePositions,
+    _mutableNodeSizes: nodeSizes
+  }
+}

src/composables/graph/useNodeWidgets.ts

@@ -0,0 +1,182 @@
+/**
+ * Node Widget Management
+ *
+ * Handles widget state synchronization between LiteGraph and Vue.
+ * Provides wrapped callbacks to maintain consistency.
+ */
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { WidgetValue } from '@/types/simplifiedWidget'
+
+export type { WidgetValue }
+
+export interface SafeWidgetData {
+  name: string
+  type: string
+  value: WidgetValue
+  options?: Record<string, unknown>
+  callback?: ((value: unknown) => void) | undefined
+}
+
+export interface VueNodeData {
+  id: string
+  title: string
+  type: string
+  mode: number
+  selected: boolean
+  executing: boolean
+  widgets?: SafeWidgetData[]
+  inputs?: unknown[]
+  outputs?: unknown[]
+  flags?: {
+    collapsed?: boolean
+  }
+}
+
+/**
+ * Validates that a value is a valid WidgetValue type
+ */
+export function validateWidgetValue(value: unknown): WidgetValue {
+  if (value === null || value === undefined || value === void 0) {
+    return undefined
+  }
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return value
+  }
+  if (typeof value === 'object') {
+    // Check if it's a File array
+    if (Array.isArray(value) && value.every((item) => item instanceof File)) {
+      return value as File[]
+    }
+    // Otherwise it's a generic object
+    return value as object
+  }
+  // If none of the above, return undefined
+  console.warn(`Invalid widget value type: ${typeof value}`, value)
+  return undefined
+}
+
+/**
+ * Extract safe widget data from LiteGraph widgets
+ */
+export function extractWidgetData(
+  widgets?: any[]
+): SafeWidgetData[] | undefined {
+  if (!widgets) return undefined
+
+  return widgets.map((widget) => {
+    try {
+      let value = widget.value
+
+      // For combo widgets, if value is undefined, use the first option as default
+      if (
+        value === undefined &&
+        widget.type === 'combo' &&
+        widget.options?.values &&
+        Array.isArray(widget.options.values) &&
+        widget.options.values.length > 0
+      ) {
+        value = widget.options.values[0]
+      }
+
+      return {
+        name: widget.name,
+        type: widget.type,
+        value: validateWidgetValue(value),
+        options: widget.options ? { ...widget.options } : undefined,
+        callback: widget.callback
+      }
+    } catch (error) {
+      return {
+        name: widget.name || 'unknown',
+        type: widget.type || 'text',
+        value: undefined,
+        options: undefined,
+        callback: undefined
+      }
+    }
+  })
+}
+
+/**
+ * Widget callback management for LiteGraph/Vue sync
+ */
+export function useNodeWidgets() {
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedCallback = (
+    widget: { value?: unknown; name: string },
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string,
+    onUpdate: (nodeId: string, widgetName: string, value: unknown) => void
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      try {
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
+
+        // Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // Update Vue state to maintain synchronization
+        onUpdate(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node
+   */
+  const setupNodeWidgetCallbacks = (
+    node: LGraphNode,
+    onUpdate: (nodeId: string, widgetName: string, value: unknown) => void
+  ) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedCallback(
+        widget,
+        originalCallback,
+        nodeId,
+        onUpdate
+      )
+    })
+  }
+
+  return {
+    validateWidgetValue,
+    extractWidgetData,
+    createWrappedCallback,
+    setupNodeWidgetCallbacks
+  }
+}

src/composables/graph/useSpatialIndex.ts

@@ -0,0 +1,212 @@
+/**
+ * Composable for spatial indexing of nodes using QuadTree
+ * Integrates with useGraphNodeManager for efficient viewport culling
+ */
+import { useDebounceFn } from '@vueuse/core'
+import { computed, reactive, ref } from 'vue'
+
+import { type Bounds, QuadTree } from '@/utils/spatial/QuadTree'
+
+export interface SpatialIndexOptions {
+  worldBounds?: Bounds
+  maxDepth?: number
+  maxItemsPerNode?: number
+  enableDebugVisualization?: boolean
+  updateDebounceMs?: number
+}
+
+interface SpatialMetrics {
+  queryTime: number
+  totalNodes: number
+  visibleNodes: number
+  treeDepth: number
+  rebuildCount: number
+}
+
+export const useSpatialIndex = (options: SpatialIndexOptions = {}) => {
+  // Default world bounds (can be expanded dynamically)
+  const defaultBounds: Bounds = {
+    x: -10000,
+    y: -10000,
+    width: 20000,
+    height: 20000
+  }
+
+  // QuadTree instance
+  const quadTree = ref<QuadTree<string> | null>(null)
+
+  // Performance metrics
+  const metrics = reactive<SpatialMetrics>({
+    queryTime: 0,
+    totalNodes: 0,
+    visibleNodes: 0,
+    treeDepth: 0,
+    rebuildCount: 0
+  })
+
+  // Debug visualization data (unused for now but may be used in future)
+  // const debugBounds = ref<Bounds[]>([])
+
+  // Initialize QuadTree
+  const initialize = (bounds: Bounds = defaultBounds) => {
+    quadTree.value = new QuadTree<string>(bounds, {
+      maxDepth: options.maxDepth ?? 6,
+      maxItemsPerNode: options.maxItemsPerNode ?? 4
+    })
+    metrics.rebuildCount++
+  }
+
+  // Add or update node in spatial index
+  const updateNode = (
+    nodeId: string,
+    position: { x: number; y: number },
+    size: { width: number; height: number }
+  ) => {
+    if (!quadTree.value) {
+      initialize()
+    }
+
+    const bounds: Bounds = {
+      x: position.x,
+      y: position.y,
+      width: size.width,
+      height: size.height
+    }
+
+    // Use insert instead of update - insert handles both new and existing nodes
+    quadTree.value!.insert(nodeId, bounds, nodeId)
+    metrics.totalNodes = quadTree.value!.size
+  }
+
+  // Batch update for multiple nodes
+  const batchUpdate = (
+    updates: Array<{
+      id: string
+      position: { x: number; y: number }
+      size: { width: number; height: number }
+    }>
+  ) => {
+    if (!quadTree.value) {
+      initialize()
+    }
+
+    for (const update of updates) {
+      const bounds: Bounds = {
+        x: update.position.x,
+        y: update.position.y,
+        width: update.size.width,
+        height: update.size.height
+      }
+      // Use insert instead of update - insert handles both new and existing nodes
+      quadTree.value!.insert(update.id, bounds, update.id)
+    }
+
+    metrics.totalNodes = quadTree.value!.size
+  }
+
+  // Remove node from spatial index
+  const removeNode = (nodeId: string) => {
+    if (!quadTree.value) return
+
+    quadTree.value.remove(nodeId)
+    metrics.totalNodes = quadTree.value.size
+  }
+
+  // Query nodes within viewport bounds
+  const queryViewport = (viewportBounds: Bounds): string[] => {
+    if (!quadTree.value) return []
+
+    const startTime = performance.now()
+    const nodeIds = quadTree.value.query(viewportBounds)
+    const queryTime = performance.now() - startTime
+
+    metrics.queryTime = queryTime
+    metrics.visibleNodes = nodeIds.length
+
+    return nodeIds
+  }
+
+  // Get nodes within a radius (for proximity queries)
+  const queryRadius = (
+    center: { x: number; y: number },
+    radius: number
+  ): string[] => {
+    if (!quadTree.value) return []
+
+    const bounds: Bounds = {
+      x: center.x - radius,
+      y: center.y - radius,
+      width: radius * 2,
+      height: radius * 2
+    }
+
+    return quadTree.value.query(bounds)
+  }
+
+  // Clear all nodes
+  const clear = () => {
+    if (!quadTree.value) return
+
+    quadTree.value.clear()
+    metrics.totalNodes = 0
+    metrics.visibleNodes = 0
+  }
+
+  // Rebuild tree (useful after major layout changes)
+  const rebuild = (
+    nodes: Map<
+      string,
+      {
+        position: { x: number; y: number }
+        size: { width: number; height: number }
+      }
+    >
+  ) => {
+    initialize()
+
+    const updates = Array.from(nodes.entries()).map(([id, data]) => ({
+      id,
+      position: data.position,
+      size: data.size
+    }))
+
+    batchUpdate(updates)
+  }
+
+  // Get debug visualization data
+  const getDebugVisualization = () => {
+    if (!quadTree.value || !options.enableDebugVisualization) return null
+
+    return quadTree.value.getDebugInfo()
+  }
+
+  // Debounced update for performance
+  const debouncedUpdateNode = useDebounceFn(
+    updateNode,
+    options.updateDebounceMs ?? 16
+  )
+
+  return {
+    // Core functions
+    initialize,
+    updateNode,
+    batchUpdate,
+    removeNode,
+    queryViewport,
+    queryRadius,
+    clear,
+    rebuild,
+
+    // Debounced version for high-frequency updates
+    debouncedUpdateNode,
+
+    // Metrics
+    metrics: computed(() => metrics),
+
+    // Debug
+    getDebugVisualization,
+
+    // Direct access to QuadTree (for advanced usage)
+    quadTree: computed(() => quadTree.value)
+  }
+}

src/composables/graph/useTransformSettling.ts

@@ -0,0 +1,151 @@
+import { useDebounceFn, useEventListener, useThrottleFn } from '@vueuse/core'
+import { ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+export interface TransformSettlingOptions {
+  /**
+   * Delay in ms before transform is considered "settled" after last interaction
+   * @default 200
+   */
+  settleDelay?: number
+  /**
+   * Whether to track both zoom (wheel) and pan (pointer drag) interactions
+   * @default false
+   */
+  trackPan?: boolean
+  /**
+   * Throttle delay for high-frequency pointermove events (only used when trackPan is true)
+   * @default 16 (~60fps)
+   */
+  pointerMoveThrottle?: number
+  /**
+   * Whether to use passive event listeners (better performance but can't preventDefault)
+   * @default true
+   */
+  passive?: boolean
+}
+
+/**
+ * Tracks when canvas transforms (zoom/pan) are actively changing vs settled.
+ *
+ * This composable helps optimize rendering quality during transformations.
+ * When the user is actively zooming or panning, we can reduce rendering quality
+ * for better performance. Once the transform "settles" (stops changing), we can
+ * trigger high-quality re-rasterization.
+ *
+ * The settling concept prevents constant quality switching during interactions
+ * by waiting for a period of inactivity before considering the transform complete.
+ *
+ * Uses VueUse's useEventListener for automatic cleanup and useDebounceFn for
+ * efficient settle detection.
+ *
+ * @example
+ * ```ts
+ * const { isTransforming } = useTransformSettling(canvasRef, {
+ *   settleDelay: 200,
+ *   trackPan: true
+ * })
+ *
+ * // Use in CSS classes or rendering logic
+ * const cssClass = computed(() => ({
+ *   'low-quality': isTransforming.value,
+ *   'high-quality': !isTransforming.value
+ * }))
+ * ```
+ */
+export function useTransformSettling(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options: TransformSettlingOptions = {}
+) {
+  const {
+    settleDelay = 200,
+    trackPan = false,
+    pointerMoveThrottle = 16,
+    passive = true
+  } = options
+
+  const isTransforming = ref(false)
+  let isPanning = false
+
+  /**
+   * Mark transform as active
+   */
+  const markTransformActive = () => {
+    isTransforming.value = true
+  }
+
+  /**
+   * Mark transform as settled (debounced)
+   */
+  const markTransformSettled = useDebounceFn(() => {
+    isTransforming.value = false
+  }, settleDelay)
+
+  /**
+   * Handle any transform event - mark active then queue settle
+   */
+  const handleTransformEvent = () => {
+    markTransformActive()
+    void markTransformSettled()
+  }
+
+  // Wheel handler
+  const handleWheel = () => {
+    handleTransformEvent()
+  }
+
+  // Pointer handlers for panning
+  const handlePointerDown = () => {
+    if (trackPan) {
+      isPanning = true
+      handleTransformEvent()
+    }
+  }
+
+  // Throttled pointer move handler for performance
+  const handlePointerMove = trackPan
+    ? useThrottleFn(() => {
+        if (isPanning) {
+          handleTransformEvent()
+        }
+      }, pointerMoveThrottle)
+    : undefined
+
+  const handlePointerEnd = () => {
+    if (trackPan) {
+      isPanning = false
+      // Don't immediately stop - let the debounced settle handle it
+    }
+  }
+
+  // Register event listeners with auto-cleanup
+  useEventListener(target, 'wheel', handleWheel, {
+    capture: true,
+    passive
+  })
+
+  if (trackPan) {
+    useEventListener(target, 'pointerdown', handlePointerDown, {
+      capture: true
+    })
+
+    if (handlePointerMove) {
+      useEventListener(target, 'pointermove', handlePointerMove, {
+        capture: true,
+        passive
+      })
+    }
+
+    useEventListener(target, 'pointerup', handlePointerEnd, {
+      capture: true
+    })
+
+    useEventListener(target, 'pointercancel', handlePointerEnd, {
+      capture: true
+    })
+  }
+
+  return {
+    isTransforming
+  }
+}

src/composables/graph/useWidgetRenderer.ts

@@ -0,0 +1,117 @@
+/**
+ * Widget renderer composable for Vue node system
+ * Maps LiteGraph widget types to Vue components
+ */
+import {
+  WidgetType,
+  widgetTypeToComponent
+} from '@/components/graph/vueWidgets/widgetRegistry'
+
+/**
+ * Static mapping of LiteGraph widget types to Vue widget component names
+ * Moved outside function to prevent recreation on every call
+ */
+const TYPE_TO_ENUM_MAP: Record<string, string> = {
+  // Number inputs
+  number: WidgetType.NUMBER,
+  slider: WidgetType.SLIDER,
+  INT: WidgetType.INT,
+  FLOAT: WidgetType.FLOAT,
+
+  // Text inputs
+  text: WidgetType.STRING,
+  string: WidgetType.STRING,
+  STRING: WidgetType.STRING,
+
+  // Selection
+  combo: WidgetType.COMBO,
+  COMBO: WidgetType.COMBO,
+
+  // Boolean
+  toggle: WidgetType.TOGGLESWITCH,
+  boolean: WidgetType.BOOLEAN,
+  BOOLEAN: WidgetType.BOOLEAN,
+
+  // Multiline text
+  multiline: WidgetType.TEXTAREA,
+  textarea: WidgetType.TEXTAREA,
+  customtext: WidgetType.TEXTAREA,
+  MARKDOWN: WidgetType.MARKDOWN,
+
+  // Advanced widgets
+  color: WidgetType.COLOR,
+  COLOR: WidgetType.COLOR,
+  image: WidgetType.IMAGE,
+  IMAGE: WidgetType.IMAGE,
+  imagecompare: WidgetType.IMAGECOMPARE,
+  IMAGECOMPARE: WidgetType.IMAGECOMPARE,
+  galleria: WidgetType.GALLERIA,
+  GALLERIA: WidgetType.GALLERIA,
+  file: WidgetType.FILEUPLOAD,
+  fileupload: WidgetType.FILEUPLOAD,
+  FILEUPLOAD: WidgetType.FILEUPLOAD,
+
+  // Button widget
+  button: WidgetType.BUTTON,
+  BUTTON: WidgetType.BUTTON,
+
+  // Chart widget
+  chart: WidgetType.CHART,
+  CHART: WidgetType.CHART
+} as const
+
+/**
+ * Pre-computed widget support map for O(1) lookups
+ * Maps widget type directly to boolean for fast shouldRenderAsVue checks
+ */
+const WIDGET_SUPPORT_MAP = new Map(
+  Object.entries(TYPE_TO_ENUM_MAP).map(([type, enumValue]) => [
+    type,
+    widgetTypeToComponent[enumValue] !== undefined
+  ])
+)
+
+export const ESSENTIAL_WIDGET_TYPES = new Set([
+  'combo',
+  'COMBO',
+  'select',
+  'toggle',
+  'boolean',
+  'BOOLEAN',
+  'slider',
+  'number',
+  'INT',
+  'FLOAT'
+])
+
+export const useWidgetRenderer = () => {
+  const getWidgetComponent = (widgetType: string): string => {
+    const enumKey = TYPE_TO_ENUM_MAP[widgetType]
+
+    if (enumKey && widgetTypeToComponent[enumKey]) {
+      return enumKey
+    }
+
+    return WidgetType.STRING
+  }
+
+  const shouldRenderAsVue = (widget: {
+    type?: string
+    options?: Record<string, unknown>
+  }): boolean => {
+    if (widget.options?.canvasOnly) return false
+    if (!widget.type) return false
+
+    // Check if widget type is explicitly supported
+    const isSupported = WIDGET_SUPPORT_MAP.get(widget.type)
+    if (isSupported !== undefined) return isSupported
+
+    // Fallback: unknown types are rendered as STRING widget
+    return widgetTypeToComponent[WidgetType.STRING] !== undefined
+  }
+
+  return {
+    getWidgetComponent,
+    shouldRenderAsVue
+  }
+}

src/composables/graph/useWidgetValue.ts

@@ -0,0 +1,155 @@
+/**
+ * Composable for managing widget value synchronization between Vue and LiteGraph
+ * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
+ */
+import { type Ref, ref, watch } from 'vue'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+export interface UseWidgetValueOptions<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** The widget configuration from LiteGraph */
+  widget: SimplifiedWidget<T>
+  /** The current value from parent component */
+  modelValue: T
+  /** Default value if modelValue is null/undefined */
+  defaultValue: T
+  /** Emit function from component setup */
+  emit: (event: 'update:modelValue', value: T) => void
+  /** Optional value transformer before sending to LiteGraph */
+  transform?: (value: U) => T
+}
+
+export interface UseWidgetValueReturn<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** Local value for immediate UI updates */
+  localValue: Ref<T>
+  /** Handler for user interactions */
+  onChange: (newValue: U) => void
+}
+
+/**
+ * Manages widget value synchronization with LiteGraph
+ *
+ * @example
+ * ```vue
+ * const { localValue, onChange } = useWidgetValue({
+ *   widget: props.widget,
+ *   modelValue: props.modelValue,
+ *   defaultValue: ''
+ * })
+ * ```
+ */
+export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
+  widget,
+  modelValue,
+  defaultValue,
+  emit,
+  transform
+}: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
+  // Local value for immediate UI updates
+  const localValue = ref<T>(modelValue ?? defaultValue)
+
+  // Handle user changes
+  const onChange = (newValue: U) => {
+    // Handle different PrimeVue component signatures
+    let processedValue: T
+    if (transform) {
+      processedValue = transform(newValue)
+    } else {
+      // Ensure type safety - only cast when types are compatible
+      if (
+        typeof newValue === typeof defaultValue ||
+        newValue === null ||
+        newValue === undefined
+      ) {
+        processedValue = (newValue ?? defaultValue) as T
+      } else {
+        console.warn(
+          `useWidgetValue: Type mismatch for widget ${widget.name}. Expected ${typeof defaultValue}, got ${typeof newValue}`
+        )
+        processedValue = defaultValue
+      }
+    }
+
+    // 1. Update local state for immediate UI feedback
+    localValue.value = processedValue
+
+    // 2. Emit to parent component
+    emit('update:modelValue', processedValue)
+  }
+
+  // Watch for external updates from LiteGraph
+  watch(
+    () => modelValue,
+    (newValue) => {
+      localValue.value = newValue ?? defaultValue
+    }
+  )
+
+  return {
+    localValue: localValue as Ref<T>,
+    onChange
+  }
+}
+
+/**
+ * Type-specific helper for string widgets
+ */
+export function useStringWidgetValue(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  emit: (event: 'update:modelValue', value: string) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: '',
+    emit,
+    transform: (value: string | undefined) => String(value || '') // Handle undefined from PrimeVue
+  })
+}
+
+/**
+ * Type-specific helper for number widgets
+ */
+export function useNumberWidgetValue(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  emit: (event: 'update:modelValue', value: number) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: 0,
+    emit,
+    transform: (value: number | number[]) => {
+      // Handle PrimeVue Slider which can emit number | number[]
+      if (Array.isArray(value)) {
+        return value.length > 0 ? value[0] ?? 0 : 0
+      }
+      return Number(value) || 0
+    }
+  })
+}
+
+/**
+ * Type-specific helper for boolean widgets
+ */
+export function useBooleanWidgetValue(
+  widget: SimplifiedWidget<boolean>,
+  modelValue: boolean,
+  emit: (event: 'update:modelValue', value: boolean) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: false,
+    emit,
+    transform: (value: boolean) => Boolean(value)
+  })
+}

src/composables/useFeatureFlags.ts

@@ -0,0 +1,82 @@
+/**
+ * Feature flags composable for Vue node system
+ * Provides safe toggles for experimental features
+ */
+import { computed, watch } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import { LiteGraph } from '../lib/litegraph/src/litegraph'
+
+export const useFeatureFlags = () => {
+  const settingStore = useSettingStore()
+
+  /**
+   * Enable Vue-based node rendering
+   * When disabled, falls back to standard LiteGraph canvas rendering
+   */
+  const isVueNodesEnabled = computed(() => {
+    try {
+      return settingStore.get('Comfy.VueNodes.Enabled' as any) ?? true // Default to true for development
+    } catch {
+      return true // Default to true for development
+    }
+  })
+
+  /**
+   * Enable Vue widget rendering within Vue nodes
+   * When disabled, Vue nodes render without widgets (structure only)
+   */
+  const isVueWidgetsEnabled = computed(() => {
+    try {
+      return settingStore.get('Comfy.VueNodes.Widgets' as any) ?? true
+    } catch {
+      return true
+    }
+  })
+
+  /**
+   * Development mode features (debug panel, etc.)
+   * Automatically enabled in development builds
+   */
+  const isDevModeEnabled = computed(() => {
+    try {
+      return (
+        settingStore.get('Comfy.DevMode' as any) ??
+        process.env.NODE_ENV === 'development'
+      )
+    } catch {
+      return process.env.NODE_ENV === 'development'
+    }
+  })
+
+  /**
+   * Check if Vue nodes should be rendered at all
+   * Combines multiple conditions for safety
+   */
+  const shouldRenderVueNodes = computed(
+    () =>
+      isVueNodesEnabled.value &&
+      // Add any other safety conditions here
+      true
+  )
+
+  /**
+   * Sync the Vue nodes feature flag with LiteGraph global settings
+   */
+  const syncVueNodesFlag = () => {
+    LiteGraph.vueNodesMode = isVueNodesEnabled.value
+    console.log('Vue nodes mode:', LiteGraph.vueNodesMode)
+  }
+
+  // Watch for changes and update LiteGraph
+  watch(isVueNodesEnabled, syncVueNodesFlag, { immediate: true })
+
+  return {
+    isVueNodesEnabled,
+    isVueWidgetsEnabled,
+    isDevModeEnabled,
+    shouldRenderVueNodes,
+    syncVueNodesFlag
+  }
+}

src/composables/widgets/useChartWidget.ts

@@ -0,0 +1,29 @@
+import {
+  type ChartInputSpec,
+  type InputSpec as InputSpecV2,
+  isChartInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IChartWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useChartWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IChartWidget => {
+    if (!isChartInputSpec(inputSpec)) {
+      throw new Error('Invalid input spec for chart widget')
+    }
+
+    const { name, options = {} } = inputSpec as ChartInputSpec
+
+    const chartType = options.type || 'line'
+
+    const widget = node.addWidget('chart', name, options.data || {}, () => {}, {
+      serialize: true,
+      type: chartType,
+      ...options
+    }) as IChartWidget
+
+    return widget
+  }
+}

src/composables/widgets/useColorWidget.ts

@@ -0,0 +1,21 @@
+import type {
+  ColorInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IColorWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useColorWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IColorWidget => {
+    const { name, options } = inputSpec as ColorInputSpec
+    const defaultValue = options?.default || '#000000'
+
+    const widget = node.addWidget('color', name, defaultValue, () => {}, {
+      serialize: true
+    }) as IColorWidget
+
+    return widget
+  }
+}

src/composables/widgets/useFileUploadWidget.ts

@@ -0,0 +1,21 @@
+import type {
+  FileUploadInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IFileUploadWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useFileUploadWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IFileUploadWidget => {
+    const { name, options = {} } = inputSpec as FileUploadInputSpec
+
+    const widget = node.addWidget('fileupload', name, '', () => {}, {
+      serialize: true,
+      ...(options as Record<string, unknown>)
+    }) as IFileUploadWidget
+
+    return widget
+  }
+}

src/composables/widgets/useGalleriaWidget.ts

@@ -0,0 +1,27 @@
+import type {
+  GalleriaInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IGalleriaWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useGalleriaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IGalleriaWidget => {
+    const { name, options = {} } = inputSpec as GalleriaInputSpec
+
+    const widget = node.addWidget(
+      'galleria',
+      name,
+      options.images || [],
+      () => {},
+      {
+        serialize: true,
+        ...options
+      }
+    ) as IGalleriaWidget
+
+    return widget
+  }
+}

src/composables/widgets/useImageCompareWidget.ts

@@ -0,0 +1,21 @@
+import type {
+  ImageCompareInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IImageCompareWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useImageCompareWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageCompareWidget => {
+    const { name, options = {} } = inputSpec as ImageCompareInputSpec
+
+    const widget = node.addWidget('imagecompare', name, ['', ''], () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageCompareWidget
+
+    return widget
+  }
+}

src/composables/widgets/useImageWidget.ts

@@ -0,0 +1,21 @@
+import type {
+  ImageInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IImageWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useImageWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageWidget => {
+    const { name, options = {} } = inputSpec as ImageInputSpec
+
+    const widget = node.addWidget('image', name, '', () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageWidget
+
+    return widget
+  }
+}

src/composables/widgets/useMultiSelectWidget.ts

@@ -0,0 +1,22 @@
+import type {
+  InputSpec as InputSpecV2,
+  MultiSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { IMultiSelectWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useMultiSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IMultiSelectWidget => {
+    const { name, options = {} } = inputSpec as MultiSelectInputSpec
+
+    const widget = node.addWidget('multiselect', name, [], () => {}, {
+      serialize: true,
+      values: options.values || [],
+      ...options
+    }) as IMultiSelectWidget
+
+    return widget
+  }
+}

src/composables/widgets/useSelectButtonWidget.ts

@@ -0,0 +1,29 @@
+import type {
+  InputSpec as InputSpecV2,
+  SelectButtonInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ISelectButtonWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useSelectButtonWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ISelectButtonWidget => {
+    const { name, options = {} } = inputSpec as SelectButtonInputSpec
+    const values = options.values || []
+
+    const widget = node.addWidget(
+      'selectbutton',
+      name,
+      values[0] || '',
+      (_value: string) => {},
+      {
+        serialize: true,
+        values,
+        ...options
+      }
+    ) as ISelectButtonWidget
+
+    return widget
+  }
+}

src/composables/widgets/useTextareaWidget.ts

@@ -0,0 +1,29 @@
+import type {
+  InputSpec as InputSpecV2,
+  TextareaInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ITextareaWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useTextareaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITextareaWidget => {
+    const { name, options = {} } = inputSpec as TextareaInputSpec
+
+    const widget = node.addWidget(
+      'textarea',
+      name,
+      options.default || '',
+      () => {},
+      {
+        serialize: true,
+        rows: options.rows || 5,
+        cols: options.cols || 50,
+        ...options
+      }
+    ) as ITextareaWidget
+
+    return widget
+  }
+}

src/composables/widgets/useTreeSelectWidget.ts

@@ -0,0 +1,25 @@
+import type {
+  InputSpec as InputSpecV2,
+  TreeSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+import type { LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type { ITreeSelectWidget } from '../../lib/litegraph/src/types/widgets'
+
+export const useTreeSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITreeSelectWidget => {
+    const { name, options = {} } = inputSpec as TreeSelectInputSpec
+    const isMultiple = options.multiple || false
+    const defaultValue = isMultiple ? [] : ''
+
+    const widget = node.addWidget('treeselect', name, defaultValue, () => {}, {
+      serialize: true,
+      values: options.values || [],
+      multiple: isMultiple,
+      ...options
+    }) as ITreeSelectWidget
+
+    return widget
+  }
+}

src/constants/coreSettings.ts

@@ -891,5 +891,26 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Release seen timestamp',
     type: 'hidden',
     defaultValue: 0
+  },
+
+  // Vue Node System Settings
+  {
+    id: 'Comfy.VueNodes.Enabled' as any,
+    category: ['Comfy', 'Vue Nodes'],
+    experimental: true,
+    name: 'Enable Vue node rendering',
+    tooltip:
+      'Render nodes as Vue components instead of canvas elements. Experimental feature.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'Comfy.VueNodes.Widgets' as any,
+    category: ['Comfy', 'Vue Nodes', 'Widgets'],
+    experimental: true,
+    name: 'Enable Vue widgets',
+    tooltip: 'Render widgets as Vue components within Vue nodes.',
+    type: 'boolean',
+    defaultValue: true
   }
 ]

src/constants/layout.ts

@@ -0,0 +1,73 @@
+/**
+ * Layout System Constants
+ *
+ * Centralized configuration values for the layout system.
+ * These values control spatial indexing, performance, and behavior.
+ */
+
+/**
+ * QuadTree configuration for spatial indexing
+ */
+export const QUADTREE_CONFIG = {
+  /** Default bounds for the QuadTree - covers a large canvas area */
+  DEFAULT_BOUNDS: {
+    x: -10000,
+    y: -10000,
+    width: 20000,
+    height: 20000
+  },
+  /** Maximum tree depth to prevent excessive subdivision */
+  MAX_DEPTH: 6,
+  /** Maximum items per node before subdivision */
+  MAX_ITEMS_PER_NODE: 4
+} as const
+
+/**
+ * Performance and optimization settings
+ */
+export const PERFORMANCE_CONFIG = {
+  /** RAF-based change detection interval (roughly 60fps) */
+  CHANGE_DETECTION_INTERVAL: 16,
+  /** Spatial query cache TTL in milliseconds */
+  SPATIAL_CACHE_TTL: 1000,
+  /** Maximum cache size for spatial queries */
+  SPATIAL_CACHE_MAX_SIZE: 100,
+  /** Batch update delay in milliseconds */
+  BATCH_UPDATE_DELAY: 4
+} as const
+
+/**
+ * Default values for node layout
+ */
+export const NODE_DEFAULTS = {
+  /** Default node size when not specified */
+  SIZE: { width: 200, height: 100 },
+  /** Default z-index for new nodes */
+  Z_INDEX: 0,
+  /** Default visibility state */
+  VISIBLE: true
+} as const
+
+/**
+ * Debug and development settings
+ */
+export const DEBUG_CONFIG = {
+  /** LocalStorage key for enabling layout debug mode */
+  LAYOUT_DEBUG_KEY: 'layout-debug',
+  /** Logger name for layout system */
+  LOGGER_NAME: 'layout',
+  /** Logger name for layout store */
+  STORE_LOGGER_NAME: 'layout-store'
+} as const
+
+/**
+ * Actor and source identifiers
+ */
+export const ACTOR_CONFIG = {
+  /** Prefix for auto-generated actor IDs */
+  USER_PREFIX: 'user-',
+  /** Length of random suffix for actor IDs */
+  ID_LENGTH: 9,
+  /** Default source when not specified */
+  DEFAULT_SOURCE: 'external' as const
+} as const

src/constants/slotColors.ts

@@ -0,0 +1,30 @@
+/**
+ * Default colors for node slot types
+ * Mirrors LiteGraph's slot_default_color_by_type
+ */
+export const SLOT_TYPE_COLORS: Record<string, string> = {
+  number: '#AAD',
+  string: '#DCA',
+  boolean: '#DAA',
+  vec2: '#ADA',
+  vec3: '#ADA',
+  vec4: '#ADA',
+  color: '#DDA',
+  image: '#353',
+  latent: '#858',
+  conditioning: '#FFA',
+  control_net: '#F8F',
+  clip: '#FFD',
+  vae: '#F82',
+  model: '#B98',
+  '*': '#AAA' // Default color
+}
+
+/**
+ * Get the color for a slot type
+ */
+export function getSlotColor(type?: string | number | null): string {
+  if (!type) return SLOT_TYPE_COLORS['*']
+  const typeStr = String(type).toLowerCase()
+  return SLOT_TYPE_COLORS[typeStr] || SLOT_TYPE_COLORS['*']
+}

src/extensions/core/groupNodeManage.ts

@@ -122,7 +122,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
   getGroupData() {
     this.groupNodeType = LiteGraph.registered_node_types[
       `${PREFIX}${SEPARATOR}` + this.selectedGroup
-    ] as LGraphNodeConstructor<LGraphNode>
+    ] as unknown as LGraphNodeConstructor<LGraphNode>
     this.groupNodeDef = this.groupNodeType.nodeData
     this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType)
   }

src/lib/litegraph/CLAUDE.md

@@ -24,39 +24,3 @@
 
 - Be sure to typecheck when you’re done making a series of code changes
 - Prefer running single tests, and not the whole test suite, for performance
-
-# Testing Guidelines
-
-## Avoiding Circular Dependencies in Tests
-
-**CRITICAL**: When writing tests for subgraph-related code, always import from the barrel export to avoid circular dependency issues:
-
-```typescript
-// ✅ CORRECT - Use barrel import
-import { LGraph, Subgraph, SubgraphNode } from "@/litegraph"
-
-// ❌ WRONG - Direct imports cause circular dependency
-import { LGraph } from "@/LGraph"
-import { Subgraph } from "@/subgraph/Subgraph" 
-import { SubgraphNode } from "@/subgraph/SubgraphNode"
-```
-
-**Root cause**: `LGraph` and `Subgraph` have a circular dependency:
-- `LGraph.ts` imports `Subgraph` (creates instances with `new Subgraph()`)
-- `Subgraph.ts` extends `LGraph` 
-
-The barrel export (`@/litegraph`) handles this properly, but direct imports cause module loading failures.
-
-## Test Setup for Subgraphs
-
-Use the provided test helpers for consistent setup:
-
-```typescript
-import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers"
-
-function createTestSetup() {
-  const subgraph = createTestSubgraph()
-  const subgraphNode = createTestSubgraphNode(subgraph)
-  return { subgraph, subgraphNode }
-}
-```

src/lib/litegraph/src/LGraphNode.ts

@@ -1,3 +1,5 @@
+import { LGraphNodeProperties } from '@/lib/litegraph/src/LGraphNodeProperties'
+
 import type { DragAndScale } from './DragAndScale'
 import type { LGraph } from './LGraph'
 import { BadgePosition, LGraphBadge } from './LGraphBadge'
@@ -257,6 +259,10 @@ export class LGraphNode
   properties_info: INodePropertyInfo[] = []
   flags: INodeFlags = {}
   widgets?: IBaseWidget[]
+
+  /** Property manager for this node */
+  changeTracker: LGraphNodeProperties
+
   /**
    * The amount of space available for widgets to grow into.
    * @see {@link layoutWidgets}
@@ -756,6 +762,9 @@ export class LGraphNode
 
       return false // Allow default behavior
     }
+
+    // Initialize property manager with tracked properties
+    this.changeTracker = new LGraphNodeProperties(this)
   }
 
   /** Internal callback for subgraph nodes. Do not implement externally. */
@@ -1958,6 +1967,14 @@ export class LGraphNode
   move(deltaX: number, deltaY: number): void {
     if (this.pinned) return
 
+    // If Vue nodes mode is enabled, skip LiteGraph's direct position update
+    // The layout store will handle the movement and sync back to LiteGraph
+    if (LiteGraph.vueNodesMode) {
+      // Vue nodes handle their own dragging through the layout store
+      // This prevents the snap-back issue from conflicting position updates
+      return
+    }
+
     this.pos[0] += deltaX
     this.pos[1] += deltaY
   }
@@ -3209,6 +3226,70 @@ export class LGraphNode
     return this.outputs.filter((slot: INodeOutputSlot) => !slot.pos)
   }
 
+  /**
+   * Calculate slot position using Vue node dimensions.
+   * This method uses the COMFY_VUE_NODE_DIMENSIONS constants to match Vue component rendering.
+   * @param isInput Whether this is an input slot (true) or output slot (false)
+   * @param slot The slot object (for widget detection)
+   * @param slotIndex The index of the slot in the appropriate array
+   * @returns The [x, y] position of the slot center in graph coordinates
+   */
+  #calculateVueSlotPosition(
+    isInput: boolean,
+    slot: INodeSlot,
+    slotIndex: number
+  ): Point {
+    const {
+      pos: [nodeX, nodeY],
+      size: [width]
+    } = this
+    const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components
+    const spacing = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.spacing
+
+    let slotCenterY: number
+
+    // IMPORTANT: LiteGraph's node position (nodeY) is at the TOP of the body (below the header)
+    // The header is rendered ABOVE this position at negative Y coordinates
+    // So we need to adjust for the difference between LiteGraph's header (30px) and Vue's header (34px)
+    const headerDifference =
+      dimensions.HEADER_HEIGHT - LiteGraph.NODE_TITLE_HEIGHT
+
+    if (isInput && isWidgetInputSlot(slot as INodeInputSlot)) {
+      // Widget input slot - calculate based on widget position
+      // Count regular (non-widget) input slots
+      const regularInputCount = this.#defaultVerticalInputs.length
+
+      // Find widget index
+      const widgetIndex =
+        this.widgets?.findIndex(
+          (w) => w.name === (slot as INodeInputSlot).widget?.name
+        ) ?? 0
+
+      // Y position relative to the node body top (not the header)
+      slotCenterY =
+        headerDifference +
+        regularInputCount * dimensions.SLOT_HEIGHT +
+        (regularInputCount > 0 ? spacing.BETWEEN_SLOTS_AND_BODY : 0) +
+        widgetIndex *
+          (dimensions.STANDARD_WIDGET_HEIGHT + spacing.BETWEEN_WIDGETS) +
+        dimensions.STANDARD_WIDGET_HEIGHT / 2
+    } else {
+      // Regular slot (input or output)
+      // Slots start at the top of the body, but we need to account for Vue's larger header
+      slotCenterY =
+        headerDifference +
+        slotIndex * dimensions.SLOT_HEIGHT +
+        dimensions.SLOT_HEIGHT / 2
+    }
+
+    // Calculate X position
+    // Input slots: 10px from left edge (center of 20x20 connector)
+    // Output slots: 10px from right edge (center of 20x20 connector)
+    const slotCenterX = isInput ? 10 : width - 10
+
+    return [nodeX + slotCenterX, nodeY + slotCenterY]
+  }
+
   /**
    * Gets the position of an input slot, in graph co-ordinates.
    *
@@ -3238,6 +3319,20 @@ export class LGraphNode
     const { pos } = input
     if (pos) return [nodeX + pos[0], nodeY + pos[1]]
 
+    // Check if we should use Vue positioning
+    if (LiteGraph.vueNodesMode) {
+      if (isWidgetInputSlot(input)) {
+        // Widget slot - pass the slot object
+        return this.#calculateVueSlotPosition(true, input, -1)
+      } else {
+        // Regular slot - find its index in default vertical inputs
+        const slotIndex = this.#defaultVerticalInputs.indexOf(input)
+        if (slotIndex !== -1) {
+          return this.#calculateVueSlotPosition(true, input, slotIndex)
+        }
+      }
+    }
+
     // default vertical slots
     const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
     const nodeOffsetY = this.constructor.slot_start_y || 0
@@ -3270,6 +3365,15 @@ export class LGraphNode
     const outputPos = outputs?.[slot]?.pos
     if (outputPos) return [nodeX + outputPos[0], nodeY + outputPos[1]]
 
+    // Check if we should use Vue positioning
+    if (LiteGraph.vueNodesMode) {
+      const outputSlot = this.outputs[slot]
+      const slotIndex = this.#defaultVerticalOutputs.indexOf(outputSlot)
+      if (slotIndex !== -1) {
+        return this.#calculateVueSlotPosition(false, outputSlot, slotIndex)
+      }
+    }
+
     // default vertical slots
     const offsetX = LiteGraph.NODE_SLOT_HEIGHT * 0.5
     const nodeOffsetY = this.constructor.slot_start_y || 0
@@ -3823,12 +3927,33 @@ export class LGraphNode
       ? this.getInputPos(slotIndex)
       : this.getOutputPos(slotIndex)
 
-    slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
-    slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
-    slot.boundingRect[2] = slot.isWidgetInputSlot
-      ? BaseWidget.margin
-      : LiteGraph.NODE_SLOT_HEIGHT
-    slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT
+    if (LiteGraph.vueNodesMode) {
+      // Vue-based slot dimensions
+      const dimensions = LiteGraph.COMFY_VUE_NODE_DIMENSIONS.components
+
+      if (slot.isWidgetInputSlot) {
+        // Widget slots have a 20x20 clickable area centered at the position
+        slot.boundingRect[0] = pos[0] - 10
+        slot.boundingRect[1] = pos[1] - 10
+        slot.boundingRect[2] = 20
+        slot.boundingRect[3] = 20
+      } else {
+        // Regular slots have a 20x20 clickable area for the connector
+        // but the full slot height for vertical spacing
+        slot.boundingRect[0] = pos[0] - 10
+        slot.boundingRect[1] = pos[1] - dimensions.SLOT_HEIGHT / 2
+        slot.boundingRect[2] = 20
+        slot.boundingRect[3] = dimensions.SLOT_HEIGHT
+      }
+    } else {
+      // Traditional LiteGraph dimensions
+      slot.boundingRect[0] = pos[0] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      slot.boundingRect[1] = pos[1] - LiteGraph.NODE_SLOT_HEIGHT * 0.5
+      slot.boundingRect[2] = slot.isWidgetInputSlot
+        ? BaseWidget.margin
+        : LiteGraph.NODE_SLOT_HEIGHT
+      slot.boundingRect[3] = LiteGraph.NODE_SLOT_HEIGHT
+    }
   }
 
   #measureSlots(): ReadOnlyRect | null {
@@ -4024,14 +4149,26 @@ export class LGraphNode
     }
     if (!slotByWidgetName.size) return
 
-    for (const widget of this.widgets) {
-      const slot = slotByWidgetName.get(widget.name)
-      if (!slot) continue
+    // Only set custom pos if not using Vue positioning
+    // Vue positioning calculates widget slot positions dynamically
+    if (!LiteGraph.vueNodesMode) {
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
 
-      const actualSlot = this.#concreteInputs[slot.index]
-      const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
-      actualSlot.pos = [offset, widget.y + offset]
-      this.#measureSlot(actualSlot, slot.index, true)
+        const actualSlot = this.#concreteInputs[slot.index]
+        const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
+        actualSlot.pos = [offset, widget.y + offset]
+        this.#measureSlot(actualSlot, slot.index, true)
+      }
+    } else {
+      // For Vue positioning, just measure the slots without setting pos
+      for (const widget of this.widgets) {
+        const slot = slotByWidgetName.get(widget.name)
+        if (!slot) continue
+
+        this.#measureSlot(this.#concreteInputs[slot.index], slot.index, true)
+      }
     }
   }
 

src/lib/litegraph/src/LGraphNodeProperties.ts

@@ -0,0 +1,176 @@
+import type { LGraphNode } from './LGraphNode'
+
+/**
+ * Default properties to track
+ */
+const DEFAULT_TRACKED_PROPERTIES: string[] = ['title', 'flags.collapsed']
+
+/**
+ * Manages node properties with optional change tracking and instrumentation.
+ */
+export class LGraphNodeProperties {
+  /** The node this property manager belongs to */
+  node: LGraphNode
+
+  /** Set of property paths that have been instrumented */
+  #instrumentedPaths = new Set<string>()
+
+  constructor(node: LGraphNode) {
+    this.node = node
+
+    this.#setupInstrumentation()
+  }
+
+  /**
+   * Sets up property instrumentation for all tracked properties
+   */
+  #setupInstrumentation(): void {
+    for (const path of DEFAULT_TRACKED_PROPERTIES) {
+      this.#instrumentProperty(path)
+    }
+  }
+
+  /**
+   * Instruments a single property to track changes
+   */
+  #instrumentProperty(path: string): void {
+    const parts = path.split('.')
+
+    if (parts.length > 1) {
+      this.#ensureNestedPath(path)
+    }
+
+    let targetObject: any = this.node
+    let propertyName = parts[0]
+
+    if (parts.length > 1) {
+      for (let i = 0; i < parts.length - 1; i++) {
+        targetObject = targetObject[parts[i]]
+      }
+      propertyName = parts.at(-1)!
+    }
+
+    const hasProperty = Object.prototype.hasOwnProperty.call(
+      targetObject,
+      propertyName
+    )
+    const currentValue = targetObject[propertyName]
+
+    if (!hasProperty) {
+      let value: any = undefined
+
+      Object.defineProperty(targetObject, propertyName, {
+        get: () => value,
+        set: (newValue: any) => {
+          const oldValue = value
+          value = newValue
+          this.#emitPropertyChange(path, oldValue, newValue)
+
+          // Update enumerable: true for non-undefined values, false for undefined
+          const shouldBeEnumerable = newValue !== undefined
+          const currentDescriptor = Object.getOwnPropertyDescriptor(
+            targetObject,
+            propertyName
+          )
+          if (
+            currentDescriptor &&
+            currentDescriptor.enumerable !== shouldBeEnumerable
+          ) {
+            Object.defineProperty(targetObject, propertyName, {
+              ...currentDescriptor,
+              enumerable: shouldBeEnumerable
+            })
+          }
+        },
+        enumerable: false,
+        configurable: true
+      })
+    } else {
+      Object.defineProperty(
+        targetObject,
+        propertyName,
+        this.#createInstrumentedDescriptor(path, currentValue)
+      )
+    }
+
+    this.#instrumentedPaths.add(path)
+  }
+
+  /**
+   * Creates a property descriptor that emits change events
+   */
+  #createInstrumentedDescriptor(
+    propertyPath: string,
+    initialValue: any
+  ): PropertyDescriptor {
+    let value = initialValue
+
+    return {
+      get: () => value,
+      set: (newValue: any) => {
+        const oldValue = value
+        value = newValue
+        this.#emitPropertyChange(propertyPath, oldValue, newValue)
+      },
+      enumerable: true,
+      configurable: true
+    }
+  }
+
+  /**
+   * Emits a property change event if the node is connected to a graph
+   */
+  #emitPropertyChange(
+    propertyPath: string,
+    oldValue: any,
+    newValue: any
+  ): void {
+    if (oldValue !== newValue && this.node.graph) {
+      this.node.graph.trigger('node:property:changed', {
+        nodeId: this.node.id,
+        property: propertyPath,
+        oldValue,
+        newValue
+      })
+    }
+  }
+
+  /**
+   * Ensures parent objects exist for nested properties
+   */
+  #ensureNestedPath(path: string): void {
+    const parts = path.split('.')
+    let current: any = this.node
+
+    // Create all parent objects except the last property
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    }
+  }
+
+  /**
+   * Checks if a property is being tracked
+   */
+  isTracked(path: string): boolean {
+    return this.#instrumentedPaths.has(path)
+  }
+
+  /**
+   * Gets the list of tracked properties
+   */
+  getTrackedProperties(): string[] {
+    return [...DEFAULT_TRACKED_PROPERTIES]
+  }
+
+  /**
+   * Custom toJSON method for JSON.stringify
+   * Returns undefined to exclude from serialization since we only use defaults
+   */
+  toJSON(): any {
+    return undefined
+  }
+}

src/lib/litegraph/src/LLink.ts

@@ -14,7 +14,6 @@ import type {
   LinkSegment,
   ReadonlyLinkNetwork
 } from './interfaces'
-import { Subgraph } from './litegraph'
 import type {
   Serialisable,
   SerialisableLLink,
@@ -451,16 +450,6 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
       }
     }
     network.links.delete(this.id)
-
-    if (this.originIsIoNode && network instanceof Subgraph) {
-      const subgraphInput = network.inputs.at(this.origin_slot)
-      if (!subgraphInput)
-        throw new Error('Invalid link - subgraph input not found')
-
-      subgraphInput.events.dispatch('input-disconnected', {
-        input: subgraphInput
-      })
-    }
   }
 
   /**

src/lib/litegraph/src/LiteGraphGlobal.ts

@@ -24,6 +24,32 @@ import {
 } from './types/globalEnums'
 import { createUuidv4 } from './utils/uuid'
 
+/**
+ * Vue node dimensions configuration for the contract between LiteGraph and Vue components.
+ * These values ensure both systems can independently calculate node, slot, and widget positions
+ * to place them in identical locations.
+ *
+ * IMPORTANT: These values must match the actual rendered dimensions of Vue components
+ * for the positioning contract to work correctly.
+ */
+export const COMFY_VUE_NODE_DIMENSIONS = {
+  spacing: {
+    BETWEEN_SLOTS_AND_BODY: 8,
+    BETWEEN_WIDGETS: 8
+  },
+  components: {
+    HEADER_HEIGHT: 34, // 18 header + 16 padding
+    SLOT_HEIGHT: 24,
+    STANDARD_WIDGET_HEIGHT: 30
+  }
+} as const
+
+/**
+ * Type for component height keys
+ */
+export type ComponentHeightKey =
+  keyof typeof COMFY_VUE_NODE_DIMENSIONS.components
+
 /**
  * The Global Scope. It contains all the registered node classes.
  */
@@ -75,6 +101,13 @@ export class LiteGraphGlobal {
   WIDGET_SECONDARY_TEXT_COLOR = '#999'
   WIDGET_DISABLED_TEXT_COLOR = '#666'
 
+  /**
+   * Vue node dimensions configuration for the contract between LiteGraph and Vue components.
+   * These values ensure both systems can independently calculate node, slot, and widget positions
+   * to place them in identical locations.
+   */
+  COMFY_VUE_NODE_DIMENSIONS = COMFY_VUE_NODE_DIMENSIONS
+
   LINK_COLOR = '#9A9'
   EVENT_LINK_COLOR = '#A86'
   CONNECTING_LINK_COLOR = '#AFA'
@@ -328,6 +361,18 @@ export class LiteGraphGlobal {
    */
   saveViewportWithGraph: boolean = true
 
+  /**
+   * Enable Vue nodes mode for rendering and positioning.
+   * When true:
+   * - Nodes will calculate slot positions using Vue component dimensions
+   * - LiteGraph will skip rendering node bodies entirely
+   * - Vue components will handle all node rendering
+   * - LiteGraph continues to render connections, links, and graph background
+   * This should be set by the frontend when the Vue nodes feature is enabled.
+   * @default false
+   */
+  vueNodesMode: boolean = false
+
   // TODO: Remove legacy accessors
   LGraph = LGraph
   LLink = LLink

src/lib/litegraph/src/interfaces.ts

@@ -5,6 +5,7 @@ import type { ContextMenu } from './ContextMenu'
 import type { LGraphNode, NodeId } from './LGraphNode'
 import type { LLink, LinkId } from './LLink'
 import type { Reroute, RerouteId } from './Reroute'
+import { SubgraphInput } from './subgraph/SubgraphInput'
 import type { SubgraphInputNode } from './subgraph/SubgraphInputNode'
 import type { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
 import type { LinkDirection, RenderShape } from './types/globalEnums'
@@ -471,6 +472,7 @@ export interface DefaultConnectionColors {
 
 export interface ISubgraphInput extends INodeInputSlot {
   _listenerController?: AbortController
+  _subgraphSlot: SubgraphInput
 }
 
 /**

src/lib/litegraph/src/litegraph.ts

@@ -8,7 +8,7 @@ import type { CanvasEventDetail } from './types/events'
 import type { RenderShape, TitleMode } from './types/globalEnums'
 
 // Must remain above LiteGraphGlobal (circular dependency due to abstract factory behaviour in `configure`)
-export { Subgraph } from './subgraph/Subgraph'
+export { Subgraph, type GraphOrSubgraph } from './subgraph/Subgraph'
 
 export const LiteGraph = new LiteGraphGlobal()
 
@@ -132,7 +132,11 @@ export {
 } from './LGraphBadge'
 export { LGraphCanvas, type LGraphCanvasState } from './LGraphCanvas'
 export { LGraphGroup } from './LGraphGroup'
-export { LGraphNode, type NodeId } from './LGraphNode'
+export { LGraphNode, type NodeId, type NodeProperty } from './LGraphNode'
+export {
+  COMFY_VUE_NODE_DIMENSIONS,
+  type ComponentHeightKey
+} from './LiteGraphGlobal'
 export { type LinkId, LLink } from './LLink'
 export { clamp, createBounds } from './measure'
 export { Reroute, type RerouteId } from './Reroute'

src/lib/litegraph/src/node/NodeSlot.ts

@@ -73,7 +73,7 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
     slot: OptionalProps<INodeSlot, 'boundingRect'>,
     node: LGraphNode
   ) {
-    // Workaround: Ensure internal properties are not copied to the slot (_listenerController
+    // @ts-expect-error Workaround: Ensure internal properties are not copied to the slot (_listenerController
     // https://github.com/Comfy-Org/litegraph.js/issues/1138
     const maybeSubgraphSlot: OptionalProps<
       ISubgraphInput,

src/lib/litegraph/src/types/widgets.ts

@@ -65,6 +65,17 @@ export type IWidget =
   | ISliderWidget
   | IButtonWidget
   | IKnobWidget
+  | IFileUploadWidget
+  | IColorWidget
+  | IMarkdownWidget
+  | IImageWidget
+  | ITreeSelectWidget
+  | IMultiSelectWidget
+  | IChartWidget
+  | IGalleriaWidget
+  | IImageCompareWidget
+  | ISelectButtonWidget
+  | ITextareaWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -138,6 +149,81 @@ export interface ICustomWidget extends IBaseWidget<string | object, 'custom'> {
   value: string | object
 }
 
+/** File upload widget for selecting and uploading files */
+export interface IFileUploadWidget extends IBaseWidget<string, 'fileupload'> {
+  type: 'fileupload'
+  value: string
+  label?: string
+}
+
+/** Color picker widget for selecting colors */
+export interface IColorWidget extends IBaseWidget<string, 'color'> {
+  type: 'color'
+  value: string
+}
+
+/** Markdown widget for displaying formatted text */
+export interface IMarkdownWidget extends IBaseWidget<string, 'markdown'> {
+  type: 'markdown'
+  value: string
+}
+
+/** Image display widget */
+export interface IImageWidget extends IBaseWidget<string, 'image'> {
+  type: 'image'
+  value: string
+}
+
+/** Tree select widget for hierarchical selection */
+export interface ITreeSelectWidget
+  extends IBaseWidget<string | string[], 'treeselect'> {
+  type: 'treeselect'
+  value: string | string[]
+}
+
+/** Multi-select widget for selecting multiple options */
+export interface IMultiSelectWidget
+  extends IBaseWidget<string[], 'multiselect'> {
+  type: 'multiselect'
+  value: string[]
+}
+
+/** Chart widget for displaying data visualizations */
+export interface IChartWidget extends IBaseWidget<object, 'chart'> {
+  type: 'chart'
+  value: object
+}
+
+/** Gallery widget for displaying multiple images */
+export interface IGalleriaWidget extends IBaseWidget<string[], 'galleria'> {
+  type: 'galleria'
+  value: string[]
+}
+
+/** Image comparison widget for comparing two images side by side */
+export interface IImageCompareWidget
+  extends IBaseWidget<string[], 'imagecompare'> {
+  type: 'imagecompare'
+  value: string[]
+}
+
+/** Select button widget for selecting from a group of buttons */
+export interface ISelectButtonWidget
+  extends IBaseWidget<
+    string,
+    'selectbutton',
+    RequiredProps<IWidgetOptions<string[]>, 'values'>
+  > {
+  type: 'selectbutton'
+  value: string
+}
+
+/** Textarea widget for multi-line text input */
+export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
+  type: 'textarea'
+  value: string
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]

src/lib/litegraph/src/widgets/ChartWidget.ts

@@ -0,0 +1,50 @@
+import type { IChartWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying charts and data visualizations
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ChartWidget
+  extends BaseWidget<IChartWidget>
+  implements IChartWidget
+{
+  override type = 'chart' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Chart: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/ColorWidget.ts

@@ -0,0 +1,50 @@
+import type { IColorWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying a color picker
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ColorWidget
+  extends BaseWidget<IColorWidget>
+  implements IColorWidget
+{
+  override type = 'color' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Color: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/FileUploadWidget.ts

@@ -0,0 +1,50 @@
+import type { IFileUploadWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for handling file uploads
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class FileUploadWidget
+  extends BaseWidget<IFileUploadWidget>
+  implements IFileUploadWidget
+{
+  override type = 'fileupload' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Fileupload: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/GalleriaWidget.ts

@@ -0,0 +1,50 @@
+import type { IGalleriaWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying image galleries
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class GalleriaWidget
+  extends BaseWidget<IGalleriaWidget>
+  implements IGalleriaWidget
+{
+  override type = 'galleria' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Galleria: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/ImageCompareWidget.ts

@@ -0,0 +1,50 @@
+import type { IImageCompareWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for comparing two images side by side
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ImageCompareWidget
+  extends BaseWidget<IImageCompareWidget>
+  implements IImageCompareWidget
+{
+  override type = 'imagecompare' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'ImageCompare: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/ImageWidget.ts

@@ -0,0 +1,50 @@
+import type { IImageWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying images
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class ImageWidget
+  extends BaseWidget<IImageWidget>
+  implements IImageWidget
+{
+  override type = 'image' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Image: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/MarkdownWidget.ts

@@ -0,0 +1,50 @@
+import type { IMarkdownWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for displaying markdown formatted text
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MarkdownWidget
+  extends BaseWidget<IMarkdownWidget>
+  implements IMarkdownWidget
+{
+  override type = 'markdown' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Markdown: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/MultiSelectWidget.ts

@@ -0,0 +1,50 @@
+import type { IMultiSelectWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for selecting multiple options
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class MultiSelectWidget
+  extends BaseWidget<IMultiSelectWidget>
+  implements IMultiSelectWidget
+{
+  override type = 'multiselect' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'MultiSelect: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/SelectButtonWidget.ts

@@ -0,0 +1,50 @@
+import type { ISelectButtonWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for selecting from a group of buttons
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class SelectButtonWidget
+  extends BaseWidget<ISelectButtonWidget>
+  implements ISelectButtonWidget
+{
+  override type = 'selectbutton' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'SelectButton: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/TextareaWidget.ts

@@ -0,0 +1,50 @@
+import type { ITextareaWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for multi-line text input
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TextareaWidget
+  extends BaseWidget<ITextareaWidget>
+  implements ITextareaWidget
+{
+  override type = 'textarea' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'Textarea: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/TreeSelectWidget.ts

@@ -0,0 +1,50 @@
+import type { ITreeSelectWidget } from '../types/widgets'
+import {
+  BaseWidget,
+  type DrawWidgetOptions,
+  type WidgetEventOptions
+} from './BaseWidget'
+
+/**
+ * Widget for hierarchical tree selection
+ * This is a widget that only has a Vue widgets implementation
+ */
+export class TreeSelectWidget
+  extends BaseWidget<ITreeSelectWidget>
+  implements ITreeSelectWidget
+{
+  override type = 'treeselect' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    const { width } = options
+    const { y, height } = this
+
+    const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx
+
+    ctx.fillStyle = this.background_color
+    ctx.fillRect(15, y, width - 30, height)
+
+    ctx.strokeStyle = this.outline_color
+    ctx.strokeRect(15, y, width - 30, height)
+
+    ctx.fillStyle = this.text_color
+    ctx.font = '11px monospace'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    const text = 'TreeSelect: Vue-only'
+    ctx.fillText(text, width / 2, y + height / 2)
+
+    Object.assign(ctx, {
+      fillStyle,
+      strokeStyle,
+      textAlign,
+      textBaseline,
+      font
+    })
+  }
+
+  onClick(_options: WidgetEventOptions): void {
+    // This is a widget that only has a Vue widgets implementation
+  }
+}

src/lib/litegraph/src/widgets/widgetMap.ts

@@ -3,12 +3,23 @@ import type {
   IBaseWidget,
   IBooleanWidget,
   IButtonWidget,
+  IChartWidget,
+  IColorWidget,
   IComboWidget,
   ICustomWidget,
+  IFileUploadWidget,
+  IGalleriaWidget,
+  IImageCompareWidget,
+  IImageWidget,
   IKnobWidget,
+  IMarkdownWidget,
+  IMultiSelectWidget,
   INumericWidget,
+  ISelectButtonWidget,
   ISliderWidget,
   IStringWidget,
+  ITextareaWidget,
+  ITreeSelectWidget,
   IWidget,
   TWidgetType
 } from '@/lib/litegraph/src/types/widgets'
@@ -17,12 +28,23 @@ import { toClass } from '@/lib/litegraph/src/utils/type'
 import { BaseWidget } from './BaseWidget'
 import { BooleanWidget } from './BooleanWidget'
 import { ButtonWidget } from './ButtonWidget'
+import { ChartWidget } from './ChartWidget'
+import { ColorWidget } from './ColorWidget'
 import { ComboWidget } from './ComboWidget'
+import { FileUploadWidget } from './FileUploadWidget'
+import { GalleriaWidget } from './GalleriaWidget'
+import { ImageCompareWidget } from './ImageCompareWidget'
+import { ImageWidget } from './ImageWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
+import { MarkdownWidget } from './MarkdownWidget'
+import { MultiSelectWidget } from './MultiSelectWidget'
 import { NumberWidget } from './NumberWidget'
+import { SelectButtonWidget } from './SelectButtonWidget'
 import { SliderWidget } from './SliderWidget'
 import { TextWidget } from './TextWidget'
+import { TextareaWidget } from './TextareaWidget'
+import { TreeSelectWidget } from './TreeSelectWidget'
 
 export type WidgetTypeMap = {
   button: ButtonWidget
@@ -34,6 +56,17 @@ export type WidgetTypeMap = {
   string: TextWidget
   text: TextWidget
   custom: LegacyWidget
+  fileupload: FileUploadWidget
+  color: ColorWidget
+  markdown: MarkdownWidget
+  image: ImageWidget
+  treeselect: TreeSelectWidget
+  multiselect: MultiSelectWidget
+  chart: ChartWidget
+  galleria: GalleriaWidget
+  imagecompare: ImageCompareWidget
+  selectbutton: SelectButtonWidget
+  textarea: TextareaWidget
   [key: string]: BaseWidget
 }
 
@@ -82,6 +115,28 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(TextWidget, narrowedWidget, node)
     case 'text':
       return toClass(TextWidget, narrowedWidget, node)
+    case 'fileupload':
+      return toClass(FileUploadWidget, narrowedWidget, node)
+    case 'color':
+      return toClass(ColorWidget, narrowedWidget, node)
+    case 'markdown':
+      return toClass(MarkdownWidget, narrowedWidget, node)
+    case 'image':
+      return toClass(ImageWidget, narrowedWidget, node)
+    case 'treeselect':
+      return toClass(TreeSelectWidget, narrowedWidget, node)
+    case 'multiselect':
+      return toClass(MultiSelectWidget, narrowedWidget, node)
+    case 'chart':
+      return toClass(ChartWidget, narrowedWidget, node)
+    case 'galleria':
+      return toClass(GalleriaWidget, narrowedWidget, node)
+    case 'imagecompare':
+      return toClass(ImageCompareWidget, narrowedWidget, node)
+    case 'selectbutton':
+      return toClass(SelectButtonWidget, narrowedWidget, node)
+    case 'textarea':
+      return toClass(TextareaWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }
@@ -135,4 +190,75 @@ export function isCustomWidget(widget: IBaseWidget): widget is ICustomWidget {
   return widget.type === 'custom'
 }
 
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IFileUploadWidget}. */
+export function isFileUploadWidget(
+  widget: IBaseWidget
+): widget is IFileUploadWidget {
+  return widget.type === 'fileupload'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IColorWidget}. */
+export function isColorWidget(widget: IBaseWidget): widget is IColorWidget {
+  return widget.type === 'color'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IMarkdownWidget}. */
+export function isMarkdownWidget(
+  widget: IBaseWidget
+): widget is IMarkdownWidget {
+  return widget.type === 'markdown'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IImageWidget}. */
+export function isImageWidget(widget: IBaseWidget): widget is IImageWidget {
+  return widget.type === 'image'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITreeSelectWidget}. */
+export function isTreeSelectWidget(
+  widget: IBaseWidget
+): widget is ITreeSelectWidget {
+  return widget.type === 'treeselect'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IMultiSelectWidget}. */
+export function isMultiSelectWidget(
+  widget: IBaseWidget
+): widget is IMultiSelectWidget {
+  return widget.type === 'multiselect'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IChartWidget}. */
+export function isChartWidget(widget: IBaseWidget): widget is IChartWidget {
+  return widget.type === 'chart'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IGalleriaWidget}. */
+export function isGalleriaWidget(
+  widget: IBaseWidget
+): widget is IGalleriaWidget {
+  return widget.type === 'galleria'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IImageCompareWidget}. */
+export function isImageCompareWidget(
+  widget: IBaseWidget
+): widget is IImageCompareWidget {
+  return widget.type === 'imagecompare'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISelectButtonWidget}. */
+export function isSelectButtonWidget(
+  widget: IBaseWidget
+): widget is ISelectButtonWidget {
+  return widget.type === 'selectbutton'
+}
+
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextareaWidget}. */
+export function isTextareaWidget(
+  widget: IBaseWidget
+): widget is ITextareaWidget {
+  return widget.type === 'textarea'
+}
+
 // #endregion Type Guards

src/lib/litegraph/test/LGraphNodeProperties.test.ts

@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNodeProperties } from '../src/LGraphNodeProperties'
+
+describe('LGraphNodeProperties', () => {
+  let mockNode: any
+  let mockGraph: any
+
+  beforeEach(() => {
+    mockGraph = {
+      trigger: vi.fn()
+    }
+
+    mockNode = {
+      id: 123,
+      title: 'Test Node',
+      flags: {},
+      graph: mockGraph
+    }
+  })
+
+  describe('constructor', () => {
+    it('should initialize with default tracked properties', () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+      const tracked = propManager.getTrackedProperties()
+
+      expect(tracked).toHaveLength(2)
+      expect(tracked).toContain('title')
+      expect(tracked).toContain('flags.collapsed')
+    })
+  })
+
+  describe('property tracking', () => {
+    it('should track changes to existing properties', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = 'New Title'
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith('node:property:changed', {
+        nodeId: mockNode.id,
+        property: 'title',
+        oldValue: 'Test Node',
+        newValue: 'New Title'
+      })
+    })
+
+    it('should track changes to nested properties', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      expect(mockGraph.trigger).toHaveBeenCalledWith('node:property:changed', {
+        nodeId: mockNode.id,
+        property: 'flags.collapsed',
+        oldValue: undefined,
+        newValue: true
+      })
+    })
+
+    it("should not emit events when value doesn't change", () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.title = 'Test Node' // Same value as original
+
+      expect(mockGraph.trigger).toHaveBeenCalledTimes(0)
+    })
+
+    it('should not emit events when node has no graph', () => {
+      mockNode.graph = null
+      new LGraphNodeProperties(mockNode)
+
+      // Should not throw
+      expect(() => {
+        mockNode.title = 'New Title'
+      }).not.toThrow()
+    })
+  })
+
+  describe('isTracked', () => {
+    it('should correctly identify tracked properties', () => {
+      const propManager = new LGraphNodeProperties(mockNode)
+
+      expect(propManager.isTracked('title')).toBe(true)
+      expect(propManager.isTracked('flags.collapsed')).toBe(true)
+      expect(propManager.isTracked('untracked')).toBe(false)
+    })
+  })
+
+  describe('serialization behavior', () => {
+    it('should not make non-existent properties enumerable', () => {
+      new LGraphNodeProperties(mockNode)
+
+      // flags.collapsed doesn't exist initially
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it('should make properties enumerable when set to non-default values', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(true)
+    })
+
+    it('should make properties non-enumerable when set back to undefined', () => {
+      new LGraphNodeProperties(mockNode)
+
+      mockNode.flags.collapsed = true
+      mockNode.flags.collapsed = undefined
+
+      const descriptor = Object.getOwnPropertyDescriptor(
+        mockNode.flags,
+        'collapsed'
+      )
+      expect(descriptor?.enumerable).toBe(false)
+    })
+
+    it('should keep existing properties enumerable', () => {
+      // title exists initially
+      const initialDescriptor = Object.getOwnPropertyDescriptor(
+        mockNode,
+        'title'
+      )
+      expect(initialDescriptor?.enumerable).toBe(true)
+
+      new LGraphNodeProperties(mockNode)
+
+      const afterDescriptor = Object.getOwnPropertyDescriptor(mockNode, 'title')
+      expect(afterDescriptor?.enumerable).toBe(true)
+    })
+
+    it('should only include non-undefined values in JSON.stringify', () => {
+      new LGraphNodeProperties(mockNode)
+
+      // Initially, flags.collapsed shouldn't appear
+      let json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+
+      // After setting to true, it should appear
+      mockNode.flags.collapsed = true
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(true)
+
+      // After setting to false, it should still appear (false is not undefined)
+      mockNode.flags.collapsed = false
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBe(false)
+
+      // After setting back to undefined, it should disappear
+      mockNode.flags.collapsed = undefined
+      json = JSON.parse(JSON.stringify(mockNode))
+      expect(json.flags.collapsed).toBeUndefined()
+    })
+  })
+})

src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap

@@ -329,3 +329,331 @@ LGraph {
   "version": 1,
 }
 `;
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = `
+LGraph {
+  "_groups": [
+    LGraphGroup {
+      "_bounding": Float32Array [
+        20,
+        20,
+        1,
+        3,
+      ],
+      "_children": Set {},
+      "_nodes": [],
+      "_pos": Float32Array [
+        20,
+        20,
+      ],
+      "_size": Float32Array [
+        1,
+        3,
+      ],
+      "color": "#6029aa",
+      "flags": {},
+      "font": undefined,
+      "font_size": 14,
+      "graph": [Circular],
+      "id": 123,
+      "isPointInside": [Function],
+      "selected": undefined,
+      "setDirtyCanvas": [Function],
+      "title": "A group to test with",
+    },
+  ],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_nodes_by_id": {
+    "1": LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  },
+  "_nodes_executable": [],
+  "_nodes_in_order": [
+    LGraphNode {
+      "_collapsed_width": undefined,
+      "_level": undefined,
+      "_pos": Float32Array [
+        10,
+        10,
+      ],
+      "_posSize": Float32Array [
+        10,
+        10,
+        140,
+        60,
+      ],
+      "_relative_id": undefined,
+      "_shape": undefined,
+      "_size": Float32Array [
+        140,
+        60,
+      ],
+      "action_call": undefined,
+      "action_triggered": undefined,
+      "badgePosition": "top-left",
+      "badges": [],
+      "bgcolor": undefined,
+      "block_delete": undefined,
+      "boxcolor": undefined,
+      "changeTracker": undefined,
+      "clip_area": undefined,
+      "clonable": undefined,
+      "color": undefined,
+      "console": undefined,
+      "exec_version": undefined,
+      "execute_triggered": undefined,
+      "flags": {},
+      "freeWidgetSpace": undefined,
+      "gotFocusAt": undefined,
+      "graph": [Circular],
+      "has_errors": undefined,
+      "id": 1,
+      "ignore_remove": undefined,
+      "inputs": [],
+      "last_serialization": undefined,
+      "locked": undefined,
+      "lostFocusAt": undefined,
+      "mode": 0,
+      "mouseOver": undefined,
+      "order": 0,
+      "outputs": [],
+      "progress": undefined,
+      "properties": {},
+      "properties_info": [],
+      "redraw_on_mouse": undefined,
+      "removable": undefined,
+      "resizable": undefined,
+      "selected": undefined,
+      "serialize_widgets": undefined,
+      "showAdvanced": undefined,
+      "strokeStyles": {
+        "error": [Function],
+        "selected": [Function],
+      },
+      "title": "LGraphNode",
+      "type": "mustBeSet",
+      "widgets": undefined,
+      "widgets_start_y": undefined,
+      "widgets_up": undefined,
+    },
+  ],
+  "_subgraphs": Map {},
+  "_version": 3,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "ca9da7d8-fddd-4707-ad32-67be9be13140",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 123,
+    "lastLinkId": 0,
+    "lastNodeId": 1,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;
+
+exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredMinGraph 1`] = `
+LGraph {
+  "_groups": [],
+  "_input_nodes": undefined,
+  "_last_trigger_time": undefined,
+  "_links": Map {},
+  "_nodes": [],
+  "_nodes_by_id": {},
+  "_nodes_executable": [],
+  "_nodes_in_order": [],
+  "_subgraphs": Map {},
+  "_version": 0,
+  "catch_errors": true,
+  "config": {},
+  "elapsed_time": 0.01,
+  "errors_in_execution": undefined,
+  "events": CustomEventTarget {},
+  "execution_time": undefined,
+  "execution_timer_id": undefined,
+  "extra": {},
+  "filter": undefined,
+  "fixedtime": 0,
+  "fixedtime_lapse": 0.01,
+  "globaltime": 0,
+  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
+  "iteration": 0,
+  "last_update_time": 0,
+  "links": Map {},
+  "list_of_graphcanvas": null,
+  "nodes_actioning": [],
+  "nodes_executedAction": [],
+  "nodes_executing": [],
+  "revision": 0,
+  "runningtime": 0,
+  "starttime": 0,
+  "state": {
+    "lastGroupId": 0,
+    "lastLinkId": 0,
+    "lastNodeId": 0,
+    "lastRerouteId": 0,
+  },
+  "status": 1,
+  "vars": {},
+  "version": 1,
+}
+`;

src/lib/litegraph/test/__snapshots__/LGraph.test.ts.snap

@@ -62,6 +62,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -134,6 +135,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -207,6 +209,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,

src/lib/litegraph/test/__snapshots__/LGraph_constructor.test.ts.snap

@@ -62,6 +62,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -132,6 +133,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,
@@ -203,6 +205,7 @@ LGraph {
       "bgcolor": undefined,
       "block_delete": undefined,
       "boxcolor": undefined,
+      "changeTracker": undefined,
       "clip_area": undefined,
       "clonable": undefined,
       "color": undefined,