Decouple link and slot hit-testing out of Litegraph (#5134)

* [feat] TransformPane - Viewport synchronization layer for Vue nodes (#4304) Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: github-actions <github-actions@github.com> * Update locales [skip ci] * Update locales [skip ci] * Add vue node feature flag (#4927) * feat: Implement CRDT-based layout system for Vue nodes (#4959) * feat: Implement CRDT-based layout system for Vue nodes Major refactor to solve snap-back issues and create single source of truth for node positions: - Add Yjs-based CRDT layout store for conflict-free position management - Implement layout mutations service with clean API - Create Vue composables for layout access and node dragging - Add one-way sync from layout store to LiteGraph - Disable LiteGraph dragging when Vue nodes mode is enabled - Add z-index management with bring-to-front on node interaction - Add comprehensive TypeScript types for layout system - Include unit tests for layout store operations - Update documentation to reflect CRDT architecture This provides a solid foundation for both single-user performance and future real-time collaboration features. Co-Authored-By: Claude <noreply@anthropic.com> * style: Apply linter fixes to layout system * fix: Remove unnecessary README files and revert services README - Remove unnecessary types/README.md file - Revert unrelated changes to services/README.md - Keep only relevant documentation for the layout system implementation These were issues identified during PR review that needed to be addressed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Clean up layout store and implement proper CRDT operations - Created dedicated layoutOperations.ts with production-grade CRDT interfaces - Integrated existing QuadTree spatial index instead of simple cache - Split composables into separate files (useLayout, useNodeLayout, useLayoutSync) - Cleaned up operation handlers using specific types instead of Extract - Added proper operation interfaces with type guards and extensibility - Updated all type references to use new operation structure The layout store now properly uses the existing QuadTree infrastructure for efficient spatial queries and follows CRDT best practices with well-defined operation interfaces. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Extract services and split composables for better organization - Created SpatialIndexManager to handle QuadTree operations separately - Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations) - Split GraphNodeManager into focused composables: - useNodeWidgets: Widget state and callback management - useNodeChangeDetection: RAF-based geometry change detection - useNodeState: Node visibility and reactive state management - Extracted constants for magic numbers and configuration values - Updated layout store to use SpatialIndexManager and constants This improves code organization, testability, and makes it easier to swap CRDT implementations or mock services for testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a620. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Revert "Totally not scuffed renderer and adapter" This reverts commit 2b9d83efb8. * Revert "Remove slots from layoutTypes" This reverts commit 18f78ff786. * Reapply "Add node slots to layout tree" This reverts commit 236fecb549. * Revert "Add node slots to layout tree" This reverts commit 460493a620. * docs: Replace architecture docs with comprehensive ADR - Add ADR-0002 for CRDT-based layout system decision - Follow established ADR template with persuasive reasoning - Include performance benefits, collaboration readiness, and architectural advantages - Update ADR index --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com> * [chore] Extract link rendering out of LGraphCanvas (#4994) * feat: Implement CRDT-based layout system for Vue nodes Major refactor to solve snap-back issues and create single source of truth for node positions: - Add Yjs-based CRDT layout store for conflict-free position management - Implement layout mutations service with clean API - Create Vue composables for layout access and node dragging - Add one-way sync from layout store to LiteGraph - Disable LiteGraph dragging when Vue nodes mode is enabled - Add z-index management with bring-to-front on node interaction - Add comprehensive TypeScript types for layout system - Include unit tests for layout store operations - Update documentation to reflect CRDT architecture This provides a solid foundation for both single-user performance and future real-time collaboration features. Co-Authored-By: Claude <noreply@anthropic.com> * style: Apply linter fixes to layout system * fix: Remove unnecessary README files and revert services README - Remove unnecessary types/README.md file - Revert unrelated changes to services/README.md - Keep only relevant documentation for the layout system implementation These were issues identified during PR review that needed to be addressed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Clean up layout store and implement proper CRDT operations - Created dedicated layoutOperations.ts with production-grade CRDT interfaces - Integrated existing QuadTree spatial index instead of simple cache - Split composables into separate files (useLayout, useNodeLayout, useLayoutSync) - Cleaned up operation handlers using specific types instead of Extract - Added proper operation interfaces with type guards and extensibility - Updated all type references to use new operation structure The layout store now properly uses the existing QuadTree infrastructure for efficient spatial queries and follows CRDT best practices with well-defined operation interfaces. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Extract services and split composables for better organization - Created SpatialIndexManager to handle QuadTree operations separately - Added LayoutAdapter interface for CRDT abstraction (Yjs, mock implementations) - Split GraphNodeManager into focused composables: - useNodeWidgets: Widget state and callback management - useNodeChangeDetection: RAF-based geometry change detection - useNodeState: Node visibility and reactive state management - Extracted constants for magic numbers and configuration values - Updated layout store to use SpatialIndexManager and constants This improves code organization, testability, and makes it easier to swap CRDT implementations or mock services for testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a620. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Revert "Totally not scuffed renderer and adapter" This reverts commit 2b9d83efb8. * Revert "Remove slots from layoutTypes" This reverts commit 18f78ff786. * Reapply "Add node slots to layout tree" This reverts commit 236fecb549. * Revert "Add node slots to layout tree" This reverts commit 460493a620. * docs: Replace architecture docs with comprehensive ADR - Add ADR-0002 for CRDT-based layout system decision - Follow established ADR template with persuasive reasoning - Include performance benefits, collaboration readiness, and architectural advantages - Update ADR index * Add node slots to layout tree * Revert "Add node slots to layout tree" This reverts commit 460493a620. * Remove slots from layoutTypes * Totally not scuffed renderer and adapter * Remove unused methods in LGLA * Extract slot position calculations to shared utility - Create slotCalculations.ts utility for centralized slot position logic - Update LGraphNode to delegate to helper while maintaining compatibility - Modify LitegraphLinkAdapter to use layout tree positions when available - Enable link rendering to use layout system coordinates instead of litegraph positions This allows the layout tree to control link rendering positions, enabling proper synchronization between Vue components and canvas rendering. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [fix] Restore original link rendering behavior after refactor This commit fixes several rendering discrepancies introduced during the link rendering refactor to ensure exact parity with the original litegraph implementation: Path Shape Fixes: - STRAIGHT_LINK: Now correctly applies l=10 offset to create innerA/innerB points and uses midX=(innerA.x+innerB.x)*0.5 for elbow placement, matching the original 6-segment path - LINEAR_LINK: Restored 4-point path with l=15 directional offsets (start → innerA → innerB → end) Arrow Rendering: - computeConnectionPoint: Now always uses bezier math with 0.25 factor spline offsets regardless of render mode, ensuring arrow positions match original - Arrow positions: Fixed to render at 0.25 and 0.75 positions along the path - Arrow gating: Moved scale>=0.6 and highQuality checks to adapter layer to maintain PathRenderer purity - Arrow shape: Restored original triangle dimensions (-5,-3) to (0,+7) to (+5,-3) Center Marker: - Fixed 'None' option: Center marker now correctly hidden when LinkMarkerShape.None is selected - Center point calculation: Updated for all render modes to match original positions - STRAIGHT_LINK center: Uses midX and average of innerA/innerB y-coordinates - LINEAR_LINK center: Uses midpoint between innerA and innerB control points These fixes ensure backward compatibility while maintaining the clean separation between the pure PathRenderer and litegraph-specific LitegraphLinkAdapter. Fixes #Issue-Number --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> * feat: Add slot registration and spatial indexing for hit detection - Implement slot registration for all nodes (Vue and LiteGraph) - Add spatial indexes for slots and reroutes to improve hit detection performance - Register slots when nodes are drawn via new registerSlots() method - Update LayoutStore to use spatial indexing for O(log n) queries instead of O(n) Resolves #5125 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Revert "feat: Add slot registration and spatial indexing for hit detection" This reverts commit 70fbfd0f5e. * feat: Add slot registration and spatial indexing for hit detection - Implement slot registration for all nodes (Vue and LiteGraph) - Add spatial indexes for slots and reroutes to improve hit detection performance - Register slots when nodes are drawn via new registerSlots() method - Update LayoutStore to use spatial indexing for O(log n) queries instead of O(n) Resolves #5125 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * relocate slot update to layoutstore * Revert "relocate slot update to layoutstore" This reverts commit 0b17ef148bdded35cb231bef25b8d5c77dc14c1f. * add useSlotLayoutSync * feat: Extend Layout Store with CRDT support for links and reroutes Move links and reroutes to be first-class CRDT entities in the Layout Store, eliminating per-frame registration during rendering. This provides a ~100x reduction in spatial index operations by using event-driven updates instead of polling. Key changes: - Add CRDT maps for links and reroutes with automatic observers - Add mutation operations for link/reroute lifecycle management - Update LiteGraph to use mutations instead of direct store calls - Remove per-frame updateLinkLayout and updateRerouteLayout calls 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Scuffed diff, change to dirty later * Fix reroute move desync * Terrible reroute fixes * Use LinkId for LinkLayout * refactor: Remove unused duplicate layout type files Deleted src/types/layoutTypes.ts and src/types/layoutOperations.ts which were duplicates of src/renderer/core/layout/types.ts. These files had zero imports and were creating confusion in the codebase. The active types are in src/renderer/core/layout/types.ts which is properly integrated with the current architecture. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Extract layout source strings into LayoutSource enum Replace hardcoded 'canvas' | 'vue' | 'external' string literals with a proper TypeScript enum for better type safety and maintainability. This change provides a single source of truth for layout source types and makes future modifications easier. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Unify CRDT layout operations under type-safe entity bases Replace node-centric BaseOperation with a clean hierarchy: - Add OperationMeta base containing common fields (timestamp, actor, source, type) - Introduce entity-specific bases (NodeOpBase, LinkOpBase, RerouteOpBase) - Each operation now extends its appropriate entity base with proper typing - Add entity discriminator field for runtime type narrowing Benefits: - Eliminates duplicate meta fields across link/reroute operations - Provides type-safe discriminated unions for each entity type - Enables clean extension path for future operation types - Zero breaking changes - type-only refactor with no runtime impact Also adds helper functions: - getAffectedNodeIds() to extract node IDs affected by any operation - Entity-specific helper checks for operation classification 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix initial link seeding * fix: Fix reroute hit detection and type consistency issues - Use instanceof Reroute type guard instead of structural 'linkIds' check - Remove unnecessary Number() conversions for reroute IDs (already numeric) - Fix parentId truthiness bug (0 is valid parent ID) - Pass numeric IDs directly in GraphCanvas seeding - Add missing link/reroute methods to LayoutMutations interface - Make hit test tolerance scale-aware using ctx.lineWidth and DPI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Add debug logs * Add missing reroute path * cleanup * feat: Implement event-driven link layout sync Remove layout store writes from render loop and update link geometry only on actual changes (node move/resize, link/reroute operations, collapse toggles). Key improvements: - No layout writes during canvas render (decoupled from draw cycle) - Link layouts update only on causal events via useLinkLayoutSync - Hit testing remains precise using stored Path2D objects - Optimized adapter: calculations only when enableLayoutStoreWrites=true - Store-level deduplication prevents spatial index churn Performance impact: - Render path: Zero layout work, no equality checks, no store writes - Event path: Direct writes with cheap store-level dedup - Significant CPU savings per frame on complex graphs 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: Implement DOM-based slot registration with unified position system - Add centralized getSlotPosition() function in SlotCalculations - Create SlotIdentifier utilities for consistent slot key generation - Implement DOM-based slot registration composable with performance optimizations: - Cache slot offsets to avoid DOM reads during drag operations - Batch measurements via requestAnimationFrame - Skip redundant updates when bounds unchanged - Update Vue slot components to register DOM positions - Fix widget-to-input index mapping in NodeWidgets - Prevent double registration when Vue nodes enabled This improves slot hit-detection accuracy by using actual DOM positions while maintaining performance through intelligent caching and batching. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> * Remove unused files * Remove duplicated markdown file * Remove duplicated files and address knip concerns * Remove outdated test * warning comment * Update test snapshots --------- Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com>
2026-03-06 13:40:25 +00:00 · 2025-09-01 17:01:17 -04:00
parent 08309595e0
commit 2a5e0d231e
89 changed files with 2464 additions and 5731 deletions
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -142,6 +142,9 @@ import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 import { useLayout } from '@/renderer/core/layout/sync/useLayout'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
+import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
+import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
+import { LayoutSource } from '@/renderer/core/layout/types'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -283,6 +286,10 @@ watch(canvasRef, () => {
 // Vue node lifecycle management - initialize after graph is ready
 let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
 let cleanupNodeManager: (() => void) | null = null
+
+// Slot layout sync management
+let slotSync: ReturnType<typeof useSlotLayoutSync> | null = null
+let linkSync: ReturnType<typeof useLinkLayoutSync> | 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 }>>(
@@ -324,15 +331,46 @@ const initializeNodeManager = () => {
  }))
  layoutStore.initializeFromLiteGraph(nodes)

+  // Seed reroutes into the Layout Store so hit-testing uses the new path
+  for (const reroute of comfyApp.graph.reroutes.values()) {
+    const [x, y] = reroute.pos
+    const parent = reroute.parentId ?? undefined
+    const linkIds = Array.from(reroute.linkIds)
+    layoutMutations.createReroute(reroute.id, { x, y }, parent, linkIds)
+  }
+
+  // Seed existing links into the Layout Store (topology only)
+  for (const link of comfyApp.graph._links.values()) {
+    layoutMutations.createLink(
+      link.id,
+      link.origin_id,
+      link.origin_slot,
+      link.target_id,
+      link.target_slot
+    )
+  }
+
  // Initialize layout sync (one-way: Layout Store → LiteGraph)
  const { startSync } = useLayoutSync()
  startSync(canvasStore.canvas)

+  // Initialize slot layout sync for hit detection
+  slotSync = useSlotLayoutSync()
+  if (canvasStore.canvas) {
+    slotSync.start(canvasStore.canvas as LGraphCanvas)
+  }
+
+  // Initialize link layout sync for event-driven updates
+  linkSync = useLinkLayoutSync()
+  if (canvasStore.canvas) {
+    linkSync.start(canvasStore.canvas as LGraphCanvas)
+  }
+
  // Force computed properties to re-evaluate
  nodeDataTrigger.value++
 }

-const disposeNodeManager = () => {
+const disposeNodeManagerAndSyncs = () => {
  if (!nodeManager) return
  try {
    cleanupNodeManager?.()
@@ -341,6 +379,19 @@ const disposeNodeManager = () => {
  }
  nodeManager = null
  cleanupNodeManager = null
+
+  // Clean up slot layout sync
+  if (slotSync) {
+    slotSync.stop()
+    slotSync = null
+  }
+
+  // Clean up link layout sync
+  if (linkSync) {
+    linkSync.stop()
+    linkSync = null
+  }
+
  // Reset reactive maps to inert defaults
  vueNodeData.value = new Map()
  nodeState.value = new Map()
@@ -360,7 +411,7 @@ watch(
    if (enabled) {
      initializeNodeManager()
    } else {
-      disposeNodeManager()
+      disposeNodeManagerAndSyncs()
    }
  },
  { immediate: true }
@@ -509,7 +560,7 @@ const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
  // Bring node to front when clicked (similar to LiteGraph behavior)
  // Skip if node is pinned
  if (!node.flags?.pinned) {
-    layoutMutations.setSource('vue')
+    layoutMutations.setSource(LayoutSource.Vue)
    layoutMutations.bringNodeToFront(nodeData.id)
  }
  node.selected = true
@@ -827,5 +878,17 @@ onUnmounted(() => {
    nodeManager.cleanup()
    nodeManager = null
  }
+
+  // Clean up slot layout sync
+  if (slotSync) {
+    slotSync.stop()
+    slotSync = null
+  }
+
+  // Clean up link layout sync
+  if (linkSync) {
+    linkSync.stop()
+    linkSync = null
+  }
 })
 </script>
--- a/src/components/graph/debug/QuadTreeDebugSection.vue
+++ b/src/components/graph/debug/QuadTreeDebugSection.vue
@@ -1,112 +0,0 @@
-<!-- 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>
--- a/src/components/graph/debug/QuadTreeVisualization.vue
+++ b/src/components/graph/debug/QuadTreeVisualization.vue
@@ -1,112 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetButton.vue
+++ b/src/components/graph/vueWidgets/WidgetButton.vue
@@ -1,43 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetChart.vue
+++ b/src/components/graph/vueWidgets/WidgetChart.vue
@@ -1,78 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetColorPicker.vue
+++ b/src/components/graph/vueWidgets/WidgetColorPicker.vue
@@ -1,52 +0,0 @@
-<!-- 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>
--- a/src/components/graph/vueWidgets/WidgetFileUpload.vue
+++ b/src/components/graph/vueWidgets/WidgetFileUpload.vue
@@ -1,324 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetGalleria.vue
+++ b/src/components/graph/vueWidgets/WidgetGalleria.vue
@@ -1,123 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetImage.vue
+++ b/src/components/graph/vueWidgets/WidgetImage.vue
@@ -1,29 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetImageCompare.vue
+++ b/src/components/graph/vueWidgets/WidgetImageCompare.vue
@@ -1,70 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetInputText.vue
+++ b/src/components/graph/vueWidgets/WidgetInputText.vue
@@ -1,46 +0,0 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <InputText
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
-<script setup lang="ts">
-import InputText from 'primevue/inputtext'
-import { computed } from 'vue'
-
-import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
-import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
-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>
--- a/src/components/graph/vueWidgets/WidgetMarkdown.vue
+++ b/src/components/graph/vueWidgets/WidgetMarkdown.vue
@@ -1,95 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetMultiSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetMultiSelect.vue
@@ -1,56 +0,0 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <MultiSelect
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      :pt="{
-        option: 'text-xs'
-      }"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
-<script setup lang="ts">
-import MultiSelect from 'primevue/multiselect'
-import { computed } from 'vue'
-
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
-import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
-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>
--- a/src/components/graph/vueWidgets/WidgetSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetSelect.vue
@@ -1,72 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetSelectButton.vue
+++ b/src/components/graph/vueWidgets/WidgetSelectButton.vue
@@ -1,63 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetSlider.vue
+++ b/src/components/graph/vueWidgets/WidgetSlider.vue
@@ -1,163 +0,0 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <div class="flex items-center gap-2 w-full">
-      <Slider
-        v-model="localValue"
-        v-bind="filteredProps"
-        :disabled="readonly"
-        class="flex-grow 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>
-  </WidgetLayoutField>
-</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 WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-import {
-  STANDARD_EXCLUDED_PROPS,
-  filterWidgetProps
-} from '@/utils/widgetPropFilter'
-
-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
-)
-
-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>
--- a/src/components/graph/vueWidgets/WidgetTextarea.vue
+++ b/src/components/graph/vueWidgets/WidgetTextarea.vue
@@ -1,44 +0,0 @@
-<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>
--- a/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
+++ b/src/components/graph/vueWidgets/WidgetToggleSwitch.vue
@@ -1,54 +0,0 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <ToggleSwitch
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
-<script setup lang="ts">
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed } from 'vue'
-
-import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
-import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
-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>
--- a/src/components/graph/vueWidgets/WidgetTreeSelect.vue
+++ b/src/components/graph/vueWidgets/WidgetTreeSelect.vue
@@ -1,54 +0,0 @@
-<template>
-  <WidgetLayoutField :widget="widget">
-    <TreeSelect
-      v-model="localValue"
-      v-bind="filteredProps"
-      :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      @update:model-value="onChange"
-    />
-  </WidgetLayoutField>
-</template>
-
-<script setup lang="ts">
-import TreeSelect from 'primevue/treeselect'
-import { computed } from 'vue'
-
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
-import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
-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>