Merge remote-tracking branch 'origin/main' into bl-more-slots

2026-03-05 05:00:03 +00:00 · 2025-09-23 10:20:10 -07:00
parent 6685e004c0 c004a2b8bd
commit 0aa971bed9
75 changed files with 1896 additions and 1782 deletions
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -929,48 +929,6 @@ audio.comfy-audio.empty-audio-widget {
 }
 /* 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 */
-}

 .lg-node {
  /* Disable text selection on all nodes */
@@ -996,23 +954,52 @@ audio.comfy-audio.empty-audio-widget {
  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;
+/* START LOD specific styles */
+/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
+
+.isLOD .lg-node {
+  box-shadow: none;
+  filter: none;
+  backdrop-filter: none;
+  text-shadow: none;
+  -webkit-mask-image: none;
+  mask-image: none;
+  clip-path: none;
+  background-image: none;
+  text-rendering: optimizeSpeed;
+  border-radius: 0;
+  contain: layout style;
+  transition: none;
+ 
 }

-/* 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;
+.isLOD .lg-node > * {
+  pointer-events: none;
 }
+
+.lod-toggle {
+  visibility: visible;
+}
+
+.isLOD .lod-toggle {
+  visibility: hidden;
+}
+
+
+.lod-fallback {
+  display: none;
+}
+
+.isLOD .lod-fallback {
+  display: block;
+}
+
+.isLOD .image-preview img {
+  image-rendering: pixelated;
+}
+
+
+.isLOD .slot-dot {
+  border-radius: 0;
+}
+/* END LOD specific styles */
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -43,8 +43,6 @@
      v-for="nodeData in allNodes"
      :key="nodeData.id"
      :node-data="nodeData"
-      :position="nodePositions.get(nodeData.id)"
-      :size="nodeSizes.get(nodeData.id)"
      :readonly="false"
      :error="
        executionStore.lastExecutionError?.node_id === nodeData.id
@@ -53,9 +51,6 @@
      "
      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
      :data-node-id="nodeData.id"
-      @node-click="handleNodeSelect"
-      @update:collapsed="handleNodeCollapse"
-      @update:title="handleNodeTitleUpdate"
    />
  </TransformPane>

@@ -121,8 +116,6 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
-import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
-import { useExecutionStateProvider } from '@/renderer/extensions/vueNodes/execution/useExecutionStateProvider'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -173,7 +166,6 @@ const { shouldRenderVueNodes } = useVueFeatureFlags()
 // Vue node system
 const vueNodeLifecycle = useVueNodeLifecycle()
 const viewportCulling = useViewportCulling()
-const nodeEventHandlers = useNodeEventHandlers()

 const handleVueNodeLifecycleReset = async () => {
  if (shouldRenderVueNodes.value) {
@@ -195,21 +187,8 @@ watch(
  }
 )

-const nodePositions = vueNodeLifecycle.nodePositions
-const nodeSizes = vueNodeLifecycle.nodeSizes
 const allNodes = viewportCulling.allNodes
-
-const handleTransformUpdate = () => {
-  viewportCulling.handleTransformUpdate()
-  // TODO: Fix paste position sync in separate PR
-  vueNodeLifecycle.detectChangesInRAF.value()
-}
-const handleNodeSelect = nodeEventHandlers.handleNodeSelect
-const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
-const handleNodeTitleUpdate = nodeEventHandlers.handleNodeTitleUpdate
-
-// Provide execution state to all Vue nodes
-useExecutionStateProvider()
+const handleTransformUpdate = viewportCulling.handleTransformUpdate

 watchEffect(() => {
  nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -33,9 +33,11 @@ const tooltipText = ref('')
 const left = ref<string>()
 const top = ref<string>()

-const hideTooltip = () => (tooltipText.value = '')
+function hideTooltip() {
+  return (tooltipText.value = '')
+}

-const showTooltip = async (tooltip: string | null | undefined) => {
+async function showTooltip(tooltip: string | null | undefined) {
  if (!tooltip) return

  left.value = comfyApp.canvas.mouse[0] + 'px'
@@ -56,9 +58,9 @@ const showTooltip = async (tooltip: string | null | undefined) => {
  }
 }

-const onIdle = () => {
+function onIdle() {
  const { canvas } = comfyApp
-  const node = canvas.node_over
+  const node = canvas?.node_over
  if (!node) return

  const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -11,7 +11,7 @@
        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
        :pt="{
          header: 'hidden',
-          content: 'px-1 py-1 h-10 px-1 flex flex-row gap-1'
+          content: 'p-1 h-10 flex flex-row gap-1'
        }"
        @wheel="canvasInteractions.handleWheel"
      >
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -64,31 +64,29 @@ const litegraphService = useLitegraphService()

 const { visible, newSearchBoxEnabled } = storeToRefs(searchBoxStore)
 const dismissable = ref(true)
-const getNewNodeLocation = (): Point => {
+function getNewNodeLocation(): Point {
  return triggerEvent
    ? [triggerEvent.canvasX, triggerEvent.canvasY]
    : litegraphService.getCanvasCenter()
 }
 const nodeFilters = ref<FuseFilterWithValue<ComfyNodeDefImpl, string>[]>([])
-const addFilter = (filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) => {
+function addFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
  nodeFilters.value.push(filter)
 }
-const removeFilter = (
-  filter: FuseFilterWithValue<ComfyNodeDefImpl, string>
-) => {
+function removeFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
  nodeFilters.value = nodeFilters.value.filter(
    (f) => toRaw(f) !== toRaw(filter)
  )
 }
-const clearFilters = () => {
+function clearFilters() {
  nodeFilters.value = []
 }
-const closeDialog = () => {
+function closeDialog() {
  visible.value = false
 }
 const canvasStore = useCanvasStore()

-const addNode = (nodeDef: ComfyNodeDefImpl) => {
+function addNode(nodeDef: ComfyNodeDefImpl) {
  const node = litegraphService.addNodeOnGraph(nodeDef, {
    pos: getNewNodeLocation()
  })
@@ -106,7 +104,7 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
  window.requestAnimationFrame(closeDialog)
 }

-const showSearchBox = (e: CanvasPointerEvent | null) => {
+function showSearchBox(e: CanvasPointerEvent | null) {
  if (newSearchBoxEnabled.value) {
    if (e?.pointerType === 'touch') {
      setTimeout(() => {
@@ -120,11 +118,12 @@ const showSearchBox = (e: CanvasPointerEvent | null) => {
  }
 }

-const getFirstLink = () =>
-  canvasStore.getCanvas().linkConnector.renderLinks.at(0)
+function getFirstLink() {
+  return canvasStore.getCanvas().linkConnector.renderLinks.at(0)
+}

 const nodeDefStore = useNodeDefStore()
-const showNewSearchBox = (e: CanvasPointerEvent | null) => {
+function showNewSearchBox(e: CanvasPointerEvent | null) {
  const firstLink = getFirstLink()
  if (firstLink) {
    const filter =
@@ -149,7 +148,7 @@ const showNewSearchBox = (e: CanvasPointerEvent | null) => {
  }, 300)
 }

-const showContextMenu = (e: CanvasPointerEvent) => {
+function showContextMenu(e: CanvasPointerEvent) {
  const firstLink = getFirstLink()
  if (!firstLink) return

@@ -226,7 +225,7 @@ watchEffect(() => {
  )
 })

-const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
+function canvasEventHandler(e: LiteGraphCanvasEvent) {
  if (e.detail.subType === 'empty-double-click') {
    showSearchBox(e.detail.originalEvent)
  } else if (e.detail.subType === 'group-double-click') {
@@ -249,8 +248,10 @@ const linkReleaseActionShift = computed(() =>
 )

 // Prevent normal LinkConnector reset (called by CanvasPointer.finally)
-const preventDefault = (e: Event) => e.preventDefault()
-const cancelNextReset = (e: CustomEvent<CanvasPointerEvent>) => {
+function preventDefault(e: Event) {
+  return e.preventDefault()
+}
+function cancelNextReset(e: CustomEvent<CanvasPointerEvent>) {
  e.preventDefault()

  const canvas = canvasStore.getCanvas()
@@ -260,7 +261,7 @@ const cancelNextReset = (e: CustomEvent<CanvasPointerEvent>) => {
  })
 }

-const handleDroppedOnCanvas = (e: CustomEvent<CanvasPointerEvent>) => {
+function handleDroppedOnCanvas(e: CustomEvent<CanvasPointerEvent>) {
  disconnectOnReset = true
  const action = e.detail.shiftKey
    ? linkReleaseActionShift.value
@@ -281,7 +282,7 @@ const handleDroppedOnCanvas = (e: CustomEvent<CanvasPointerEvent>) => {
 }

 // Resets litegraph state
-const reset = () => {
+function reset() {
  listenerController?.abort()
  listenerController = null
  triggerEvent = null
--- a/src/composables/auth/useCurrentUser.ts
+++ b/src/composables/auth/useCurrentUser.ts
@@ -1,4 +1,5 @@
-import { computed, watch } from 'vue'
+import { whenever } from '@vueuse/core'
+import { computed } from 'vue'

 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { t } from '@/i18n'
@@ -33,19 +34,8 @@ export const useCurrentUser = () => {
    return null
  })

-  const onUserResolved = (callback: (user: AuthUserInfo) => void) => {
-    if (resolvedUserInfo.value) {
-      callback(resolvedUserInfo.value)
-    }
-
-    const stop = watch(resolvedUserInfo, (value) => {
-      if (value) {
-        callback(value)
-      }
-    })
-
-    return () => stop()
-  }
+  const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
+    whenever(resolvedUserInfo, callback, { immediate: true })

  const userDisplayName = computed(() => {
    if (isApiKeyLogin.value) {
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -2,42 +2,15 @@
 * Vue node lifecycle management for LiteGraph integration
 * Provides event-driven reactivity with performance optimizations
 */
-import { nextTick, reactive } from 'vue'
+import { reactive } from 'vue'

 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
 import type { WidgetValue } from '@/types/simplifiedWidget'
-import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'

 import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'

-export interface NodeState {
-  visible: boolean
-  dirty: boolean
-  lastUpdate: number
-  culled: boolean
-}
-
-interface NodeMetadata {
-  lastRenderTime: number
-  cachedBounds: DOMRect | null
-  lodLevel: 'high' | 'medium' | 'low'
-  spatialIndex?: QuadTree<string>
-}
-
-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
@@ -63,109 +36,26 @@ export interface VueNodeData {
  }
 }

-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 => {
+export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
  // Get layout mutations composable
-  const { moveNode, resizeNode, createNode, deleteNode, setSource } =
-    useLayoutMutations()
+  const { createNode, deleteNode, setSource } = useLayoutMutations()
  // 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 => {
    // Determine subgraph ID - null for root graph, string for subgraphs
@@ -286,7 +176,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
        ...currentData,
        widgets: updatedWidgets
      })
-      performanceMetrics.callbackUpdateCount++
    } catch (error) {
      // Ignore widget update errors to prevent cascade failures
    }
@@ -356,71 +245,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
    })
  }

-  // 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

@@ -431,11 +255,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
      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)
      }
    }

@@ -451,163 +270,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {

      // 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 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 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
-   */
-  const detectChangesInRAF = () => {
-    const startTime = performance.now()
-
-    if (!graph?._nodes) return
-
-    let positionUpdates = 0
-    let sizeUpdates = 0
-
-    // Set source for all canvas-driven updates
-    setSource(LayoutSource.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)
  }

  /**
@@ -629,32 +292,11 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
    // Extract initial data for Vue (may be incomplete during graph configure)
    vueNodeData.set(id, extractVueNodeData(node))

-    // Set up reactive tracking state
-    nodeState.set(id, {
-      visible: true,
-      dirty: false,
-      lastUpdate: performance.now(),
-      culled: false
-    })
-
    const initializeVueNodeLayout = () => {
      // Extract actual positions after configure() has potentially updated them
      const nodePosition = { x: node.pos[0], y: node.pos[1] }
      const nodeSize = { width: node.size[0], height: node.size[1] }

-      nodePositions.set(id, nodePosition)
-      nodeSizes.set(id, nodeSize)
-      attachMetadata(node)
-
-      // Add to spatial index for viewport culling with final positions
-      const nodeBounds: Bounds = {
-        x: nodePosition.x,
-        y: nodePosition.y,
-        width: nodeSize.width,
-        height: nodeSize.height
-      }
-      spatialIndex.insert(id, nodeBounds, id)
-
      // Add node to layout store with final positions
      setSource(LayoutSource.Canvas)
      void createNode(id, {
@@ -698,9 +340,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
  ) => {
    const id = String(node.id)

-    // Remove from spatial index
-    spatialIndex.remove(id)
-
    // Remove node from layout store
    setSource(LayoutSource.Canvas)
    void deleteNode(id)
@@ -708,10 +347,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
    // 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) {
@@ -733,23 +368,9 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
      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()
    }
  }

@@ -845,18 +466,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {

  return {
    vueNodeData,
-    nodeState,
-    nodePositions,
-    nodeSizes,
    getNode,
-    setupEventListeners,
-    cleanup,
-    scheduleUpdate,
-    forceSync: syncWithGraph,
-    detectChangesInRAF,
-    getVisibleNodeIds,
-    performanceMetrics,
-    spatialMetrics,
-    getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
+    cleanup
  }
 }
--- a/src/composables/graph/useViewportCulling.ts
+++ b/src/composables/graph/useViewportCulling.ts
@@ -6,21 +6,18 @@
 * 2. Set display none on element to avoid cascade resolution overhead
 * 3. Only run when transform changes (event driven)
 */
+import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'

 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
-import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app as comfyApp } from '@/scripts/app'

 export function useViewportCulling() {
  const canvasStore = useCanvasStore()
-  const { shouldRenderVueNodes } = useVueFeatureFlags()
-  const { vueNodeData, nodeDataTrigger, nodeManager } = useVueNodeLifecycle()
+  const { vueNodeData, nodeManager } = useVueNodeLifecycle()

  const allNodes = computed(() => {
-    if (!shouldRenderVueNodes.value) return []
-    void nodeDataTrigger.value // Force re-evaluation when nodeManager initializes
    return Array.from(vueNodeData.value.values())
  })

@@ -28,7 +25,7 @@ export function useViewportCulling() {
   * Update visibility of all nodes based on viewport
   * Queries DOM directly - no cache maintenance needed
   */
-  const updateVisibility = () => {
+  function updateVisibility() {
    if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) return

    const canvas = canvasStore.canvas
@@ -70,31 +67,17 @@ export function useViewportCulling() {
    }
  }

+  const updateVisibilityDebounced = useThrottleFn(updateVisibility, 20)
+
  // RAF throttling for smooth updates during continuous panning
-  let rafId: number | null = null
-
-  /**
-   * Handle transform update - called by TransformPane event
-   * Uses RAF to batch updates for smooth performance
-   */
-  const handleTransformUpdate = () => {
-    if (!shouldRenderVueNodes.value) return
-
-    // Cancel previous RAF if still pending
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-    }
-
-    // Schedule update in next animation frame
-    rafId = requestAnimationFrame(() => {
-      updateVisibility()
-      rafId = null
+  function handleTransformUpdate() {
+    requestAnimationFrame(async () => {
+      await updateVisibilityDebounced()
    })
  }

  return {
    allNodes,
-    handleTransformUpdate,
-    updateVisibility
+    handleTransformUpdate
  }
 }
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -1,20 +1,9 @@
-/**
- * Vue Node Lifecycle Management Composable
- *
- * Handles the complete lifecycle of Vue node rendering system including:
- * - Node manager initialization and cleanup
- * - Layout store synchronization
- * - Slot and link sync management
- * - Reactive state management for node data, positions, and sizes
- * - Memory management and proper cleanup
- */
 import { createSharedComposable } from '@vueuse/core'
-import { computed, readonly, ref, shallowRef, watch } from 'vue'
+import { readonly, ref, shallowRef, watch } from 'vue'

 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type {
  GraphNodeManager,
-  NodeState,
  VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
@@ -42,22 +31,10 @@ function useVueNodeLifecycleIndividual() {

  // Vue node data state
  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()
-  )
-
-  // Change detection function
-  const detectChangesInRAF = ref<() => void>(() => {})

  // Trigger for forcing computed re-evaluation
  const nodeDataTrigger = ref(0)

-  const isNodeManagerReady = computed(() => nodeManager.value !== null)
-
  const initializeNodeManager = () => {
    // Use canvas graph if available (handles subgraph contexts), fallback to app graph
    const activeGraph = comfyApp.canvas?.graph || comfyApp.graph
@@ -70,10 +47,6 @@ function useVueNodeLifecycleIndividual() {

    // Use the manager's data maps
    vueNodeData.value = manager.vueNodeData
-    nodeState.value = manager.nodeState
-    nodePositions.value = manager.nodePositions
-    nodeSizes.value = manager.nodeSizes
-    detectChangesInRAF.value = manager.detectChangesInRAF

    // Initialize layout system with existing nodes from active graph
    const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
@@ -136,12 +109,6 @@ function useVueNodeLifecycleIndividual() {

    // Reset reactive maps to clean state
    vueNodeData.value = new Map()
-    nodeState.value = new Map()
-    nodePositions.value = new Map()
-    nodeSizes.value = new Map()
-
-    // Reset change detection function
-    detectChangesInRAF.value = () => {}
  }

  // Watch for Vue nodes enabled state changes
@@ -235,13 +202,7 @@ function useVueNodeLifecycleIndividual() {

  return {
    vueNodeData,
-    nodeState,
-    nodePositions,
-    nodeSizes,
-    nodeDataTrigger: readonly(nodeDataTrigger),
    nodeManager: readonly(nodeManager),
-    detectChangesInRAF: readonly(detectChangesInRAF),
-    isNodeManagerReady,

    // Lifecycle methods
    initializeNodeManager,
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1548,6 +1548,71 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
    },
    ByteDanceImageReferenceNode: {
      displayPrice: byteDanceVideoPricingCalculator
+    },
+    WanTextToVideoApi: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'size'
+        ) as IComboWidget
+
+        if (!durationWidget || !resolutionWidget) return '$0.05-0.15/second'
+
+        const seconds = parseFloat(String(durationWidget.value))
+        const resolutionStr = String(resolutionWidget.value).toLowerCase()
+
+        const resKey = resolutionStr.includes('1080')
+          ? '1080p'
+          : resolutionStr.includes('720')
+            ? '720p'
+            : resolutionStr.includes('480')
+              ? '480p'
+              : resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? ''
+
+        const pricePerSecond: Record<string, number> = {
+          '480p': 0.05,
+          '720p': 0.1,
+          '1080p': 0.15
+        }
+
+        const pps = pricePerSecond[resKey]
+        if (isNaN(seconds) || !pps) return '$0.05-0.15/second'
+
+        const cost = (pps * seconds).toFixed(2)
+        return `$${cost}/Run`
+      }
+    },
+    WanImageToVideoApi: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!durationWidget || !resolutionWidget) return '$0.05-0.15/second'
+
+        const seconds = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget.value).trim().toLowerCase()
+
+        const pricePerSecond: Record<string, number> = {
+          '480p': 0.05,
+          '720p': 0.1,
+          '1080p': 0.15
+        }
+
+        const pps = pricePerSecond[resolution]
+        if (isNaN(seconds) || !pps) return '$0.05-0.15/second'
+
+        const cost = (pps * seconds).toFixed(2)
+        return `$${cost}/Run`
+      }
+    },
+    WanTextToImageApi: {
+      displayPrice: '$0.03/Run'
    }
  }

@@ -1647,7 +1712,9 @@ export const useNodePricing = () => {
      ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
      ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
      ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
-      ByteDanceImageReferenceNode: ['model', 'duration', 'resolution']
+      ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
+      WanTextToVideoApi: ['duration', 'size'],
+      WanImageToVideoApi: ['duration', 'resolution']
    }
    return widgetMap[nodeType] || []
  }
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -122,14 +122,14 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
      key: '.'
    },
    commandId: 'Comfy.Canvas.FitView',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
  },
  {
    combo: {
      key: 'p'
    },
    commandId: 'Comfy.Canvas.ToggleSelected.Pin',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
  },
  {
    combo: {
@@ -137,7 +137,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
      alt: true
    },
    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Collapse',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
  },
  {
    combo: {
@@ -145,7 +145,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
      ctrl: true
    },
    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Bypass',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
  },
  {
    combo: {
@@ -153,7 +153,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
      ctrl: true
    },
    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Mute',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
  },
  {
    combo: {
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -4032,6 +4032,18 @@ export class LGraphCanvas

    // TODO: Report failures, i.e. `failedNodes`

+    const newPositions = created.map((node) => ({
+      nodeId: String(node.id),
+      bounds: {
+        x: node.pos[0],
+        y: node.pos[1],
+        width: node.size?.[0] ?? 100,
+        height: node.size?.[1] ?? 200
+      }
+    }))
+
+    layoutStore.batchUpdateNodeBounds(newPositions)
+
    this.selectItems(created)

    graph.afterChange()
--- a/src/lib/litegraph/src/LLink.ts
+++ b/src/lib/litegraph/src/LLink.ts
@@ -205,7 +205,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    network: Pick<ReadonlyLinkNetwork, 'reroutes'>,
    linkSegment: LinkSegment
  ): Reroute[] {
-    if (!linkSegment.parentId) return []
+    if (linkSegment.parentId === undefined) return []
    return network.reroutes.get(linkSegment.parentId)?.getReroutes() ?? []
  }

@@ -229,7 +229,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    linkSegment: LinkSegment,
    rerouteId: RerouteId
  ): Reroute | null | undefined {
-    if (!linkSegment.parentId) return
+    if (linkSegment.parentId === undefined) return
    return network.reroutes
      .get(linkSegment.parentId)
      ?.findNextReroute(rerouteId)
@@ -498,7 +498,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
      target_slot: this.target_slot,
      type: this.type
    }
-    if (this.parentId) copy.parentId = this.parentId
+    if (this.parentId !== undefined) copy.parentId = this.parentId
    return copy
  }
 }
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -82,6 +82,7 @@ export interface Positionable extends Parent<Positionable>, HasBoundingRect {
   * @default 0,0
   */
  readonly pos: Point
+  readonly size?: Size
  /** true if this object is part of the selection, otherwise false. */
  selected?: boolean

--- a/src/lib/litegraph/src/litegraph.ts
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -48,7 +48,6 @@ export interface LinkReleaseContextExtended {
  links: ConnectingLink[]
 }

-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface LiteGraphCanvasEvent extends CustomEvent<CanvasEventDetail> {}

 export interface LGraphNodeConstructor<T extends LGraphNode = LGraphNode> {
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,11 +2,6 @@ import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import * as Sentry from '@sentry/vue'
 import { initializeApp } from 'firebase/app'
-import {
-  browserLocalPersistence,
-  browserSessionPersistence,
-  indexedDBLocalPersistence
-} from 'firebase/auth'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -14,7 +9,7 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
-import { VueFire, VueFireAuthWithDependencies } from 'vuefire'
+import { VueFire, VueFireAuth } from 'vuefire'

 import { FIREBASE_CONFIG } from '@/config/firebase'
 import '@/lib/litegraph/public/css/litegraph.css'
@@ -71,18 +66,6 @@ app
  .use(i18n)
  .use(VueFire, {
    firebaseApp,
-    modules: [
-      // Configure Firebase Auth persistence: localStorage first, IndexedDB last.
-      // Localstorage is preferred to IndexedDB for mobile Safari compatibility.
-      VueFireAuthWithDependencies({
-        dependencies: {
-          persistence: [
-            browserLocalPersistence,
-            browserSessionPersistence,
-            indexedDBLocalPersistence
-          ]
-        }
-      })
-    ]
+    modules: [VueFireAuth()]
  })
  .mount('#vue-app')
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -595,7 +595,7 @@ export const CORE_SETTINGS: SettingParams[] = [
    migrateDeprecatedValue: (value: any[]) => {
      return value.map((keybinding) => {
        if (keybinding['targetSelector'] === '#graph-canvas') {
-          keybinding['targetElementId'] = 'graph-canvas'
+          keybinding['targetElementId'] = 'graph-canvas-container'
        }
        return keybinding
      })
--- a/src/renderer/core/canvas/injectionKeys.ts
+++ b/src/renderer/core/canvas/injectionKeys.ts
@@ -1,18 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-import type { NodeProgressState } from '@/schemas/apiSchema'
-
-/**
- * Injection key for providing executing node IDs to Vue node components.
- * Contains a reactive Set of currently executing node IDs (as strings).
- */
-export const ExecutingNodeIdsKey: InjectionKey<Ref<Set<string>>> =
-  Symbol('executingNodeIds')
-
-/**
- * Injection key for providing node progress states to Vue node components.
- * Contains a reactive Record of node IDs to their current progress state.
- */
-export const NodeProgressStatesKey: InjectionKey<
-  Ref<Record<string, NodeProgressState>>
-> = Symbol('nodeProgressStates')
--- a/src/renderer/core/layout/injectionKeys.ts
+++ b/src/renderer/core/layout/injectionKeys.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'

-import type { Point } from '@/renderer/core/layout/types'
+import type { useTransformState } from '@/renderer/core/layout/transform/useTransformState'

 /**
 * Lightweight, injectable transform state used by layout-aware components.
@@ -21,29 +21,11 @@ import type { Point } from '@/renderer/core/layout/types'
 * const state = inject(TransformStateKey)!
 * const screen = state.canvasToScreen({ x: 100, y: 50 })
 */
-interface TransformState {
-  /** Convert a screen-space point (CSS pixels) to canvas space. */
-  screenToCanvas: (p: Point) => Point
-  /** Convert a canvas-space point to screen space (CSS pixels). */
-  canvasToScreen: (p: Point) => Point
-  /** Current pan/zoom; `x`/`y` are offsets, `z` is scale. */
-  camera?: { x: number; y: number; z: number }
-  /**
-   * Test whether a node's rectangle intersects the (expanded) viewport.
-   * Handy for viewport culling and lazy work.
-   *
-   * @param nodePos Top-left in canvas space `[x, y]`
-   * @param nodeSize Size in canvas units `[width, height]`
-   * @param viewport Screen-space viewport `{ width, height }`
-   * @param margin Optional fractional margin (e.g. `0.2` = 20%)
-   */
-  isNodeInViewport?: (
-    nodePos: ArrayLike<number>,
-    nodeSize: ArrayLike<number>,
-    viewport: { width: number; height: number },
-    margin?: number
-  ) => boolean
-}
+interface TransformState
+  extends Pick<
+    ReturnType<typeof useTransformState>,
+    'screenToCanvas' | 'canvasToScreen' | 'camera' | 'isNodeInViewport'
+  > {}

 export const TransformStateKey: InjectionKey<TransformState> =
  Symbol('transformState')
--- a/src/renderer/core/layout/store/layoutStore.ts
+++ b/src/renderer/core/layout/store/layoutStore.ts
@@ -1379,6 +1379,7 @@ class LayoutStoreImpl implements LayoutStore {

        this.spatialIndex.update(nodeId, bounds)
        ynode.set('bounds', bounds)
+        ynode.set('position', { x: bounds.x, y: bounds.y })
        ynode.set('size', { width: bounds.width, height: bounds.height })
      }
    }, this.currentActor)
--- a/src/renderer/core/layout/sync/useSlotLayoutSync.ts
+++ b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
@@ -134,7 +134,11 @@ export function useSlotLayoutSync() {
    restoreHandlers = () => {
      graph.onNodeAdded = origNodeAdded || undefined
      graph.onNodeRemoved = origNodeRemoved || undefined
-      graph.onTrigger = origTrigger || undefined
+      // Only restore onTrigger if Vue nodes are not active
+      // Vue node manager sets its own onTrigger handler
+      if (!LiteGraph.vueNodesMode) {
+        graph.onTrigger = origTrigger || undefined
+      }
      graph.onAfterChange = origAfterChange || undefined
    }

--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -1,7 +1,12 @@
 <template>
  <div
-    class="transform-pane"
-    :class="{ 'transform-pane--interacting': isInteracting }"
+    class="absolute inset-0 w-full h-full pointer-events-none"
+    :class="
+      cn(
+        isInteracting ? 'transform-pane--interacting' : 'will-change-auto',
+        isLOD ? 'isLOD' : ''
+      )
+    "
    :style="transformStyle"
    @pointerdown="handlePointerDown"
  >
@@ -18,6 +23,8 @@ import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useCanvasTransformSync } from '@/renderer/core/layout/transform/useCanvasTransformSync'
 import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { cn } from '@/utils/tailwindUtil'

 interface TransformPaneProps {
  canvas?: LGraphCanvas
@@ -34,6 +41,8 @@ const {
  isNodeInViewport
 } = useTransformState()

+const { isLOD } = useLOD(camera)
+
 const canvasElement = computed(() => props.canvas?.canvas)
 const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
  settleDelay: 200,
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -94,17 +94,20 @@
      </div>
    </div>

-    <!-- Image Dimensions -->
-    <div class="text-white text-xs text-center mt-2">
-      <span v-if="imageError" class="text-red-400">
-        {{ $t('g.errorLoadingImage') }}
-      </span>
-      <span v-else-if="isLoading" class="text-gray-400">
-        {{ $t('g.loading') }}...
-      </span>
-      <span v-else>
-        {{ actualDimensions || $t('g.calculatingDimensions') }}
-      </span>
+    <div class="relative">
+      <!-- Image Dimensions -->
+      <div class="text-white text-xs text-center mt-2">
+        <span v-if="imageError" class="text-red-400">
+          {{ $t('g.errorLoadingImage') }}
+        </span>
+        <span v-else-if="isLoading" class="text-gray-400">
+          {{ $t('g.loading') }}...
+        </span>
+        <span v-else>
+          {{ actualDimensions || $t('g.calculatingDimensions') }}
+        </span>
+      </div>
+      <LODFallback />
    </div>
  </div>
 </template>
@@ -119,6 +122,8 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'

+import LODFallback from './LODFallback.vue'
+
 interface ImagePreviewProps {
  /** Array of image URLs to display */
  readonly imageUrls: readonly string[]
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -10,12 +10,15 @@
    />

    <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.localized_name || slotData.name || `Input ${index}` }}
-    </span>
+    <div class="relative">
+      <span
+        v-if="!dotOnly"
+        class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200 lod-toggle"
+      >
+        {{ slotData.localized_name || slotData.name || `Input ${index}` }}
+      </span>
+      <LODFallback />
+    </div>
  </div>
 </template>

@@ -38,6 +41,7 @@ import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composabl
 import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
 import { cn } from '@/utils/tailwindUtil'

+import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'

 interface InputSlotProps {
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -23,7 +23,7 @@
            bypassed,
          'will-change-transform': isDragging
        },
-        lodCssClass,
+
        shouldHandleNodePointerEvents
          ? 'pointer-events-auto'
          : 'pointer-events-none'
@@ -31,7 +31,7 @@
    "
    :style="[
      {
-        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
        zIndex: zIndex
      },
      dragStyle
@@ -48,21 +48,18 @@
      </template>
      <!-- Header only updates on title/color changes -->
      <NodeHeader
-        v-memo="[nodeData.title, lodLevel, isCollapsed]"
+        v-memo="[nodeData.title, isCollapsed]"
        :node-data="nodeData"
        :readonly="readonly"
-        :lod-level="lodLevel"
        :collapsed="isCollapsed"
        @collapse="handleCollapse"
-        @update:title="handleTitleUpdate"
+        @update:title="handleHeaderTitleUpdate"
        @enter-subgraph="handleEnterSubgraph"
      />
    </div>

    <div
-      v-if="
-        (isMinimalLOD || isCollapsed) && executing && progress !== undefined
-      "
+      v-if="isCollapsed && executing && progress !== undefined"
      :class="
        cn(
          'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
@@ -72,7 +69,7 @@
      :style="{ width: `${Math.min(progress * 100, 100)}%` }"
    />

-    <template v-if="!isMinimalLOD && !isCollapsed">
+    <template v-if="!isCollapsed">
      <div class="mb-4 relative">
        <div :class="separatorClasses" />
        <!-- Progress bar for executing state -->
@@ -96,29 +93,24 @@
      >
        <!-- Slots only rendered at full detail -->
        <NodeSlots
-          v-if="shouldRenderSlots"
-          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
          :node-data="nodeData"
          :readonly="readonly"
-          :lod-level="lodLevel"
-          @slot-click="handleSlotClick"
        />

        <!-- Widgets rendered at reduced+ detail -->
        <NodeWidgets
-          v-if="shouldShowWidgets"
-          v-memo="[nodeData.widgets?.length, lodLevel]"
+          v-if="nodeData.widgets?.length"
+          v-memo="[nodeData.widgets?.length]"
          :node-data="nodeData"
          :readonly="readonly"
-          :lod-level="lodLevel"
        />

        <!-- Custom content at reduced+ detail -->
        <NodeContent
-          v-if="shouldShowContent"
+          v-if="hasCustomContent"
          :node-data="nodeData"
          :readonly="readonly"
-          :lod-level="lodLevel"
          :image-urls="nodeImageUrls"
        />
        <!-- Live preview image -->
@@ -140,15 +132,7 @@

 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import {
-  computed,
-  inject,
-  onErrorCaptured,
-  onMounted,
-  ref,
-  toRef,
-  watch
-} from 'vue'
+import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'

 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -156,13 +140,12 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
-import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useNodePreviewState'
-import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
@@ -181,8 +164,6 @@ import SlotConnectionDot from './SlotConnectionDot.vue'
 // Extended props for main node component
 interface LGraphNodeProps {
  nodeData: VueNodeData
-  position?: { x: number; y: number }
-  size?: { width: number; height: number }
  readonly?: boolean
  error?: string | null
  zoomLevel?: number
@@ -190,30 +171,14 @@ interface LGraphNodeProps {

 const {
  nodeData,
-  position = { x: 0, y: 0 },
-  size = { width: 100, height: 50 },
  error = null,
-  readonly = false,
-  zoomLevel = 1
+  readonly = false
 } = defineProps<LGraphNodeProps>()

-const emit = defineEmits<{
-  'node-click': [
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    wasDragging: boolean
-  ]
-  'slot-click': [
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    slotIndex: number,
-    isInput: boolean
-  ]
-  'update:collapsed': [nodeId: string, collapsed: boolean]
-  'update:title': [nodeId: string, newTitle: string]
-}>()
+const { handleNodeCollapse, handleNodeTitleUpdate, handleNodeSelect } =
+  useNodeEventHandlers()

-useVueElementTracking(nodeData.id, 'node')
+useVueElementTracking(() => nodeData.id, 'node')

 const { selectedNodeIds } = storeToRefs(useCanvasStore())

@@ -226,7 +191,7 @@ const isSelected = computed(() => {
 })

 // Use execution state composable
-const { executing, progress } = useNodeExecutionState(nodeData.id)
+const { executing, progress } = useNodeExecutionState(() => nodeData.id)

 // Direct access to execution store for error state
 const executionStore = useExecutionStore()
@@ -244,19 +209,6 @@ const bypassed = computed((): boolean => nodeData.mode === 4)
 // Use canvas interactions for proper wheel event handling and pointer event capture control
 const { handleWheel, shouldHandleNodePointerEvents } = useCanvasInteractions()

-// LOD (Level of Detail) system based on zoom level
-const zoomRef = toRef(() => zoomLevel)
-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()
@@ -268,40 +220,28 @@ onErrorCaptured((error) => {
 })

 // Use layout system for node position and dragging
-const { position: layoutPosition, zIndex, resize } = useNodeLayout(nodeData.id)
+const { position, size, zIndex, resize } = useNodeLayout(() => nodeData.id)
 const {
  handlePointerDown,
  handlePointerUp,
  handlePointerMove,
  isDragging,
  dragStyle
-} = useNodePointerInteractions(nodeData, (event, nodeData, wasDragging) => {
-  emit('node-click', event, nodeData, wasDragging)
-})
+} = useNodePointerInteractions(() => nodeData, handleNodeSelect)

 onMounted(() => {
-  if (size && transformState?.camera) {
+  if (size.value && transformState?.camera) {
    const scale = transformState.camera.z
    const screenSize = {
-      width: size.width * scale,
-      height: size.height * scale
+      width: size.value.width * scale,
+      height: size.value.height * scale
    }
    resize(screenSize)
  }
 })

 // Track collapsed state
-const isCollapsed = ref(nodeData.flags?.collapsed ?? false)
-
-// Watch for external changes to the collapsed state
-watch(
-  () => nodeData.flags?.collapsed,
-  (newCollapsed: boolean | undefined) => {
-    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
-      isCollapsed.value = newCollapsed
-    }
-  }
-)
+const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)

 // Check if node has custom content (like image outputs)
 const hasCustomContent = computed(() => {
@@ -311,26 +251,16 @@ const hasCustomContent = computed(() => {

 // Computed classes and conditions for better reusability
 const separatorClasses =
-  'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
+  'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full lod-toggle'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'

 const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
-  nodeData.id,
+  () => nodeData.id,
  {
-    isMinimalLOD,
    isCollapsed
  }
 )

-// Common condition computations to avoid repetition
-const shouldShowWidgets = computed(
-  () => shouldRenderWidgets.value && nodeData.widgets?.length
-)
-
-const shouldShowContent = computed(
-  () => shouldRenderContent.value && hasCustomContent.value
-)
-
 const borderClass = computed(() => {
  if (hasAnyError.value) {
    return 'border-error'
@@ -356,31 +286,11 @@ const outlineClass = computed(() => {

 // Event handlers
 const handleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
-  // Emit event so parent can sync with LiteGraph if needed
-  emit('update:collapsed', nodeData.id, isCollapsed.value)
+  handleNodeCollapse(nodeData.id, !isCollapsed.value)
 }

-const handleSlotClick = (
-  event: PointerEvent,
-  slotIndex: number,
-  isInput: boolean
-) => {
-  if (!nodeData) {
-    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
-    return
-  }
-
-  // Don't handle slot clicks when canvas is in panning mode
-  if (!shouldHandleNodePointerEvents.value) {
-    return
-  }
-
-  emit('slot-click', event, nodeData, slotIndex, isInput)
-}
-
-const handleTitleUpdate = (newTitle: string) => {
-  emit('update:title', nodeData.id, newTitle)
+const handleHeaderTitleUpdate = (newTitle: string) => {
+  handleNodeTitleUpdate(nodeData.id, newTitle)
 }

 const handleEnterSubgraph = () => {
@@ -410,15 +320,17 @@ const handleEnterSubgraph = () => {

 const nodeOutputs = useNodeOutputStore()

-const nodeImageUrls = ref<string[]>([])
-const onNodeOutputsUpdate = (newOutputs: ExecutedWsMessage['output']) => {
+const nodeOutputLocatorId = computed(() =>
+  nodeData.subgraphId ? `${nodeData.subgraphId}:${nodeData.id}` : nodeData.id
+)
+const nodeImageUrls = computed(() => {
+  const newOutputs = nodeOutputs.nodeOutputs[nodeOutputLocatorId.value]
  const locatorId = getLocatorIdFromNodeData(nodeData)

  // Use root graph for getNodeByLocatorId since it needs to traverse from root
  const rootGraph = app.graph?.rootGraph || app.graph
  if (!rootGraph) {
-    nodeImageUrls.value = []
-    return
+    return []
  }

  const node = getNodeByLocatorId(rootGraph, locatorId)
@@ -426,23 +338,13 @@ const onNodeOutputsUpdate = (newOutputs: ExecutedWsMessage['output']) => {
  if (node && newOutputs?.images?.length) {
    const urls = nodeOutputs.getNodeImageUrls(node)
    if (urls) {
-      nodeImageUrls.value = urls
+      return urls
    }
-  } else {
-    // Clear URLs if no outputs or no images
-    nodeImageUrls.value = []
  }
-}
+  // Clear URLs if no outputs or no images
+  return []
+})

-const nodeOutputLocatorId = computed(() =>
-  nodeData.subgraphId ? `${nodeData.subgraphId}:${nodeData.id}` : nodeData.id
-)
-
-watch(
-  () => nodeOutputs.nodeOutputs[nodeOutputLocatorId.value],
-  (newOutputs) => {
-    onNodeOutputsUpdate(newOutputs)
-  },
-  { deep: true }
-)
+const nodeContainerRef = ref()
+provide('tooltipContainer', nodeContainerRef)
 </script>
--- a/src/renderer/extensions/vueNodes/components/LODFallback.vue
+++ b/src/renderer/extensions/vueNodes/components/LODFallback.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="lod-fallback absolute inset-0 w-full h-full bg-zinc-800"></div>
+</template>
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -21,7 +21,6 @@ import { computed, onErrorCaptured, ref } from 'vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'

 import ImagePreview from './ImagePreview.vue'

@@ -29,7 +28,6 @@ interface NodeContentProps {
  node?: LGraphNode // For backwards compatibility
  nodeData?: VueNodeData // New clean data structure
  readonly?: boolean
-  lodLevel?: LODLevel
  imageUrls?: string[]
 }

--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -4,41 +4,44 @@
  </div>
  <div
    v-else
-    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move w-full"
+    class="lg-node-header p-4 rounded-t-2xl cursor-move"
    :data-testid="`node-header-${nodeData?.id || ''}`"
    @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-px text-stone-200 dark-theme:text-slate-300"
-      ></i>
-    </button>
+    <div class="flex items-center justify-between relative">
+      <!-- Collapse/Expand Button -->
+      <button
+        v-show="!readonly"
+        class="bg-transparent border-transparent flex items-center lod-toggle"
+        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-px text-stone-200 dark-theme:text-slate-300"
+        ></i>
+      </button>

-    <!-- Node Title -->
-    <div
-      v-tooltip.top="tooltipConfig"
-      class="text-sm font-bold 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"
-      />
+      <!-- Node Title -->
+      <div
+        v-tooltip.top="tooltipConfig"
+        class="text-sm font-bold truncate flex-1 lod-toggle"
+        data-testid="node-title"
+      >
+        <EditableText
+          :model-value="displayTitle"
+          :is-editing="isEditing"
+          :input-attrs="{ 'data-testid': 'node-title-input' }"
+          @edit="handleTitleEdit"
+          @cancel="handleTitleCancel"
+        />
+      </div>
+      <LODFallback />
    </div>

    <!-- Title Buttons -->
-    <div v-if="!readonly" class="flex items-center">
+    <div v-if="!readonly" class="flex items-center lod-toggle">
      <IconButton
        v-if="isSubgraphNode"
        size="sm"
@@ -63,17 +66,17 @@ import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { app } from '@/scripts/app'
 import {
  getLocatorIdFromNodeData,
  getNodeByLocatorId
 } from '@/utils/graphTraversalUtil'

+import LODFallback from './LODFallback.vue'
+
 interface NodeHeaderProps {
  nodeData?: VueNodeData
  readonly?: boolean
-  lodLevel?: LODLevel
  collapsed?: boolean
 }

--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -35,7 +35,6 @@ import { computed, onErrorCaptured, ref } from 'vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { isSlotObject } from '@/utils/typeGuardUtil'

 import InputSlot from './InputSlot.vue'
@@ -44,7 +43,6 @@ import OutputSlot from './OutputSlot.vue'
 interface NodeSlotsProps {
  nodeData?: VueNodeData
  readonly?: boolean
-  lodLevel?: LODLevel
 }

 const { nodeData = null, readonly } = defineProps<NodeSlotsProps>()
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -12,16 +12,17 @@
          : 'pointer-events-none'
      )
    "
-    @pointerdown="handleWidgetPointerEvent"
-    @pointermove="handleWidgetPointerEvent"
-    @pointerup="handleWidgetPointerEvent"
+    @pointerdown.stop="handleWidgetPointerEvent"
+    @pointermove.stop="handleWidgetPointerEvent"
+    @pointerup.stop="handleWidgetPointerEvent"
  >
    <div
      v-for="(widget, index) in processedWidgets"
      :key="`widget-${index}-${widget.name}`"
-      class="lg-widget-container relative flex items-center group"
+      class="lg-widget-container flex items-center group"
    >
      <!-- Widget Input Slot Dot -->
+
      <div
        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
      >
@@ -61,12 +62,10 @@ import type {
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
-import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 // Import widget components directly
 import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
 import {
  getComponent,
-  isEssential,
  shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
@@ -77,10 +76,9 @@ import InputSlot from './InputSlot.vue'
 interface NodeWidgetsProps {
  nodeData?: VueNodeData
  readonly?: boolean
-  lodLevel?: LODLevel
 }

-const { nodeData, readonly, lodLevel } = defineProps<NodeWidgetsProps>()
+const { nodeData, readonly } = defineProps<NodeWidgetsProps>()

 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
  useCanvasInteractions()
@@ -125,18 +123,12 @@ const processedWidgets = computed((): ProcessedWidget[] => {
  const widgets = nodeData.widgets as SafeWidgetData[]
  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 && !isEssential(widget.type)) continue
-
    const vueComponent = getComponent(widget.type) || WidgetInputText

    const simplified: SimplifiedWidget = {
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,14 +1,16 @@
 <template>
  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
  <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
-    <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.name || `Output ${index}` }}
-    </span>
-
+    <div class="relative">
+      <!-- Slot Name -->
+      <span
+        v-if="!dotOnly"
+        class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200 lod-toggle"
+      >
+        {{ slotData.name || `Output ${index}` }}
+      </span>
+      <LODFallback />
+    </div>
    <!-- Connection Dot -->
    <SlotConnectionDot
      ref="connectionDotRef"
@@ -38,6 +40,7 @@ import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composabl
 import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
 import { cn } from '@/utils/tailwindUtil'

+import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'

 interface OutputSlotProps {
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -24,6 +24,7 @@ defineExpose({
  >
    <div
      ref="slot-el"
+      class="slot-dot"
      :style="{ backgroundColor: color }"
      :class="
        cn(
--- a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
+++ b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
@@ -1,295 +1,141 @@
-# Level of Detail (LOD) Implementation Guide for Widgets
+# ComfyUI Widget LOD System: Architecture and Implementation

-## What is Level of Detail (LOD)?
+## Executive Summary

-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.
+The ComfyUI widget Level of Detail (LOD) system has evolved from a reactive, Vue-based approach to a CSS-driven, non-reactive implementation. This architectural shift was driven by performance requirements at scale (300-500+ nodes) and a deeper understanding of browser rendering pipelines. The current system prioritizes consistent performance over granular control, leveraging CSS visibility rules rather than component mounting/unmounting.

-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
+## The Two Approaches: Reactive vs. Static LOD

-## Why LOD Matters
+### Approach 1: Reactive LOD (Original Design)

-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
+The original design envisioned a system where each widget would reactively respond to zoom level changes, controlling its own detail level through Vue's reactivity system. Widgets would import LOD utilities, compute what to show based on zoom level, and conditionally render elements using `v-if` and `v-show` directives.

-With LOD optimization:
- Smooth performance even with large node graphs
- Battery life improvement on laptops
- Better user experience across different zoom levels
+**The promise of this approach was compelling:** widgets could intelligently manage their complexity, progressively revealing detail as users zoomed in, much like how mapping applications work. Developers would have fine-grained control over performance optimization.

-## How to Implement LOD in Your Widget
+### Approach 2: Static LOD with CSS (Current Implementation)

-### Step 1: Get the LOD Context
+The implemented system takes a fundamentally different approach. All widget content is loaded and remains in the DOM at all times. Visual simplification happens through CSS rules, primarily using `visibility: hidden` and simplified visual representations (gray rectangles) at distant zoom levels. No reactive updates occur when zoom changes—only CSS rules apply differently.

-Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+**This approach seems counterintuitive at first:** aren't we wasting resources by keeping everything loaded? The answer reveals a deeper truth about modern browser rendering.

-```vue
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
+## The GPU Texture Bottleneck

-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-  // ... other props
-}>()
+The key insight driving the current architecture comes from understanding how browsers handle CSS transforms:

-// Get LOD information
-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
-</script>
-```
+When you apply a CSS transform to a parent element (the "transformpane" in ComfyUI's case), the browser promotes that entire subtree to a compositor layer. This creates a single GPU texture containing all the transformed content. Here's where traditional performance intuitions break down:

-**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
-**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+### Traditional Assumption

-### Step 2: Choose What to Show at Different Zoom Levels
+"If we render less content, we get better performance. Therefore, hiding complex widgets should improve zoom/pan performance."

-#### 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)
+### Actual Browser Behavior

-#### 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)
+When all nodes are children of a single transformed parent:

-### Step 3: Implement Your Widget's LOD Strategy
+1. The browser creates one large GPU texture for the entire node graph
+2. The texture dimensions are determined by the bounding box of all content
+3. Whether individual pixels are simple (solid rectangles) or complex (detailed widgets) has minimal impact
+4. The performance bottleneck is the texture size itself, not the complexity of rasterization

-Here's a complete example of a slider widget with LOD:
+This means that even if we reduce every node to a simple gray rectangle, we're still paying the cost of a massive GPU texture when viewing hundreds of nodes simultaneously. The texture dimensions remain the same whether it contains simple or complex content.

-```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>
+## Two Distinct Performance Concerns

-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
+The analysis reveals two often-conflated performance considerations that should be understood separately:

-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-}>()
+### 1. Rendering Performance

-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+**Question:** How fast can the browser paint and composite the node graph during interactions?

-// 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
-})
+**Traditional thinking:** Show less content → render faster  
+**Reality with CSS transforms:** GPU texture size dominates performance, not content complexity

-const showValue = computed(() => {
-  // Show precise value only when zoomed in close
-  return lodScore.value > 0.7  // User is focused on this specific widget
-})
+The CSS transform approach means that zoom, pan, and drag operations are already optimized—they're just transforming an existing GPU texture. The cost is in the initial rasterization and texture upload, which happens regardless of content complexity when texture dimensions are fixed.

-const showDescription = computed(() => {
-  // Description only at full detail
-  return lodLevel.value === 'full'  // Maximum zoom level
-})
+### 2. Memory and Lifecycle Management

-// 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>
+**Question:** How much memory do widget instances consume, and what's the cost of maintaining them?

-<style scoped>
-/* Apply different styles based on LOD */
-.widget--minimal {
-  /* Simplified appearance when zoomed out */
-  .widget-slider {
-    height: 4px;  /* Thinner slider */
-    opacity: 0.9;
-  }
-}
+This is where unmounting widgets might theoretically help:

-/* Normal styling */
-.widget-slider {
-  height: 8px;
-  transition: height 0.2s ease;
-}
+- Complex widgets (3D viewers, chart renderers) might hold significant memory
+- Event listeners and reactive watchers consume resources
+- Some widgets might run background processes or animations

-.widget-label {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
+However, the cost of mounting/unmounting hundreds of widgets on zoom changes could create worse performance problems than the memory savings provide. Vue's virtual DOM diffing for hundreds of nodes is expensive, potentially causing noticeable lag during zoom transitions.

-.widget-value {
-  font-family: monospace;
-  font-size: 0.7rem;
-  color: var(--text-accent);
-}
+## Design Philosophy and Trade-offs

-.widget-description {
-  font-size: 0.6rem;
-  color: var(--text-muted);
-  margin-top: 4px;
-}
-</style>
-```
+The current CSS-based approach makes several deliberate trade-offs:

-## Common LOD Patterns
+### What We Optimize For

-### Pattern 1: Essential vs. Nice-to-Have
-```typescript
-// Always show the main functionality
-const showMainControl = computed(() => true)
+1. **Consistent, predictable performance** - No reactivity means no sudden performance cliffs
+2. **Smooth zoom/pan interactions** - CSS transforms are hardware-accelerated
+3. **Simple widget development** - Widget authors don't need to implement LOD logic
+4. **Reliable state preservation** - Widgets never lose state from unmounting

-// Granular control with lodScore
-const showLabels = computed(() => lodScore.value > 0.4)
-const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+### What We Accept

-// Simple control with lodLevel  
-const showExtras = computed(() => lodLevel.value === 'full')
-```
+1. **Higher baseline memory usage** - All widgets remain mounted
+2. **Less granular control** - Widgets can't optimize their own LOD behavior
+3. **Potential waste for exotic widgets** - A 3D renderer widget still runs when hidden

-### 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))
-})
-```
+## Open Questions and Future Considerations

-### 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'
-})
-```
+### Should widgets have any LOD control?

-## LOD Guidelines by Widget Type
+The current system provides a uniform gray rectangle fallback with CSS visibility hiding. This works for 99% of widgets, but raises questions:

-### 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
+**Scenario:** A widget renders a complex 3D scene or runs expensive computations  
+**Current behavior:** Hidden via CSS but still mounted  
+**Question:** Should such widgets be able to opt into unmounting at distance?

-### Button Widgets  
- **Always show**: The button
- **Medium zoom**: Show button text
- **High zoom**: Show button description
- **Full zoom**: Show keyboard shortcuts, tooltips
+The challenge is that introducing selective unmounting would require:

-### 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
+- Maintaining widget state across mount/unmount cycles
+- Accepting the performance cost of remounting when zooming in
+- Adding complexity to the widget API

-### 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
+### Could we reduce GPU texture size?

-## Design Collaboration Guidelines
+Since texture dimensions are the limiting factor, could we:

-### For Designers
-When designing widgets, consider creating variants for different zoom levels:
+- Use multiple compositor layers for different regions (chunk the transformpane)?
+- Render the nodes using the canvas fallback when 500+ nodes and < 30% zoom.

-1. **Minimal Design** (far away view)
-   - Essential elements only
-   - Higher contrast for visibility
-   - Simplified shapes and fewer details
+These approaches would require significant architectural changes and might introduce their own performance trade-offs.

-2. **Standard Design** (normal view)
-   - Balanced detail and simplicity
-   - Clear labels and readable text
-   - Good for most use cases
+### Is there a hybrid approach?

-3. **Full Detail Design** (close-up view)
-   - All labels, descriptions, and help text
-   - Rich visual effects and polish
-   - Maximum information density
+Could we identify specific threshold scenarios where reactive LOD makes sense?

-### 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
+- When node count is low (< 50 nodes)
+- For specifically registered "expensive" widgets
+- At extreme zoom levels only

-## Testing Your LOD Implementation
+## Implementation Guidelines

-### 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
+Given the current architecture, here's how to work within the system:

-### 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
+### For Widget Developers

-### 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
+1. **Build widgets assuming they're always visible** - Don't rely on mount/unmount for cleanup
+2. **Use CSS classes for zoom-responsive styling** - Let CSS handle visual changes
+3. **Minimize background processing** - Assume your widget is always running
+4. **Consider requestAnimationFrame throttling** - For animations that won't be visible when zoomed out

-✅ **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
+### For System Architects

-## Getting Help
+1. **Monitor GPU memory usage** - The single texture approach has memory implications
+2. **Consider viewport culling** - Not rendering off-screen nodes could reduce texture size
+3. **Profile real-world workflows** - Theoretical performance differs from actual usage patterns
+4. **Document the architecture clearly** - The non-obvious performance characteristics need explanation

- 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
+## Conclusion
+
+The ComfyUI LOD system represents a pragmatic choice: accepting higher memory usage and less granular control in exchange for predictable performance and implementation simplicity. By understanding that GPU texture dimensions—not rasterization complexity—drive performance in a CSS-transform-based architecture, the team has chosen an approach that may seem counterintuitive but actually aligns with browser rendering realities.
+
+The system works well for the common case of hundreds of relatively simple widgets. Edge cases involving genuinely expensive widgets may need future consideration, but the current approach provides a solid foundation that avoids the performance pitfalls of reactive LOD at scale.
+
+The key insight—that showing less doesn't necessarily mean rendering faster when everything lives in a single GPU texture—challenges conventional web performance wisdom and demonstrates the importance of understanding the full rendering pipeline when making architectural decisions.
--- a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
@@ -38,7 +38,7 @@ function useNodeEventHandlersIndividual() {
    const node = nodeManager.value.getNode(nodeData.id)
    if (!node) return

-    const isMultiSelect = event.ctrlKey || event.metaKey
+    const isMultiSelect = event.ctrlKey || event.metaKey || event.shiftKey

    if (isMultiSelect) {
      // Ctrl/Cmd+click -> toggle selection
--- a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
@@ -93,10 +93,10 @@ export function useNodeTooltips(
      pt: {
        text: {
          class:
-            'bg-charcoal-100 border border-slate-300 rounded-md px-4 py-2 text-white text-sm font-normal leading-tight max-w-75 shadow-none'
+            'bg-charcoal-800 border border-slate-300 rounded-md px-4 py-2 text-white text-sm font-normal leading-tight max-w-75 shadow-none'
        },
        arrow: {
-          class: 'before:border-charcoal-100'
+          class: 'before:border-slate-300'
        }
      }
    }
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -8,7 +8,13 @@
 * Supports different element types (nodes, slots, widgets, etc.) with
 * customizable data attributes and update handlers.
 */
-import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
+import {
+  type MaybeRefOrGetter,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  toValue
+} from 'vue'

 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -154,9 +160,10 @@ const resizeObserver = new ResizeObserver((entries) => {
 * ```
 */
 export function useVueElementTracking(
-  appIdentifier: string,
+  appIdentifierMaybe: MaybeRefOrGetter<string>,
  trackingType: string
 ) {
+  const appIdentifier = toValue(appIdentifierMaybe)
  onMounted(() => {
    const element = getCurrentInstance()?.proxy?.$el
    if (!(element instanceof HTMLElement) || !appIdentifier) return
--- a/src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts
+++ b/src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts
@@ -1,36 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { computed, provide } from 'vue'
-
-import {
-  ExecutingNodeIdsKey,
-  NodeProgressStatesKey
-} from '@/renderer/core/canvas/injectionKeys'
-import { useExecutionStore } from '@/stores/executionStore'
-
-/**
- * Composable for providing execution state to Vue node children
- *
- * This composable sets up the execution state providers that can be injected
- * by child Vue nodes using useNodeExecutionState.
- *
- * Should be used in the parent component that manages Vue nodes (e.g., GraphCanvas).
- */
-export const useExecutionStateProvider = () => {
-  const executionStore = useExecutionStore()
-  const { executingNodeIds: storeExecutingNodeIds, nodeProgressStates } =
-    storeToRefs(executionStore)
-
-  // Convert execution store data to the format expected by Vue nodes
-  const executingNodeIds = computed(
-    () => new Set(storeExecutingNodeIds.value.map(String))
-  )
-
-  // Provide the execution state to all child Vue nodes
-  provide(ExecutingNodeIdsKey, executingNodeIds)
-  provide(NodeProgressStatesKey, nodeProgressStates)
-
-  return {
-    executingNodeIds,
-    nodeProgressStates
-  }
-}
--- a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
+++ b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
@@ -1,10 +1,7 @@
-import { computed, inject, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'

-import {
-  ExecutingNodeIdsKey,
-  NodeProgressStatesKey
-} from '@/renderer/core/canvas/injectionKeys'
-import type { NodeProgressState } from '@/schemas/apiSchema'
+import { useExecutionStore } from '@/stores/executionStore'

 /**
 * Composable for managing execution state of Vue-based nodes
@@ -12,18 +9,18 @@ import type { NodeProgressState } from '@/schemas/apiSchema'
 * Provides reactive access to execution state and progress for a specific node
 * by injecting execution data from the parent GraphCanvas provider.
 *
- * @param nodeId - The ID of the node to track execution state for
+ * @param nodeIdMaybe - The ID of the node to track execution state for
 * @returns Object containing reactive execution state and progress
 */
-export const useNodeExecutionState = (nodeId: string) => {
-  const executingNodeIds = inject(ExecutingNodeIdsKey, ref(new Set<string>()))
-  const nodeProgressStates = inject(
-    NodeProgressStatesKey,
-    ref<Record<string, NodeProgressState>>({})
-  )
+export const useNodeExecutionState = (
+  nodeIdMaybe: MaybeRefOrGetter<string>
+) => {
+  const nodeId = toValue(nodeIdMaybe)
+  const { uniqueExecutingNodeIdStrings, nodeProgressStates } =
+    storeToRefs(useExecutionStore())

  const executing = computed(() => {
-    return executingNodeIds.value.has(nodeId)
+    return uniqueExecutingNodeIdStrings.value.has(nodeId)
  })

  const progress = computed(() => {
--- a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -1,11 +1,11 @@
 import { storeToRefs } from 'pinia'
-/**
- * Composable for individual Vue node components
- *
- * Uses customRef for shared write access with Canvas renderer.
- * Provides dragging functionality and reactive layout state.
- */
-import { computed, inject } from 'vue'
+import {
+  type CSSProperties,
+  type MaybeRefOrGetter,
+  computed,
+  inject,
+  toValue
+} from 'vue'

 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
@@ -17,7 +17,8 @@ import { LayoutSource, type Point } from '@/renderer/core/layout/types'
 * Composable for individual Vue node components
 * Uses customRef for shared write access with Canvas renderer
 */
-export function useNodeLayout(nodeId: string) {
+export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
+  const nodeId = toValue(nodeIdMaybe)
  const mutations = useLayoutMutations()
  const { selectedNodeIds } = storeToRefs(useCanvasStore())

@@ -187,14 +188,16 @@ export function useNodeLayout(nodeId: string) {
    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'
-    }))
+    nodeStyle: computed(
+      (): CSSProperties => ({
+        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'
+      })
+    )
  }
 }
--- a/src/renderer/extensions/vueNodes/lod/useLOD.ts
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -2,185 +2,33 @@
 * 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'
+ * performance with large node graphs. Uses zoom threshold based on DPR
+ * to determine how much detail to render for each node component.
+ * Default minFontSize = 8px
+ * Default zoomThreshold = 0.57 (On a DPR = 1 monitor)
+ **/
+import { useDevicePixelRatio } from '@vueuse/core'
+import { computed } from 'vue'

-export enum LODLevel {
-  MINIMAL = 'minimal', // zoom <= 0.4
-  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
-  FULL = 'full' // zoom > 0.8
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+interface Camera {
+  z: number // zoom level
 }

-interface LODConfig {
-  renderWidgets: boolean
-  renderSlots: boolean
-  renderContent: boolean
-  renderSlotLabels: boolean
-  renderWidgetLabels: boolean
-  cssClass: string
-}
+export function useLOD(camera: Camera) {
+  const isLOD = computed(() => {
+    const { pixelRatio } = useDevicePixelRatio()
+    const baseFontSize = 14
+    const dprAdjustment = Math.sqrt(pixelRatio.value)

-// 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'
-  }
-}
+    const settingStore = useSettingStore()
+    const minFontSize = settingStore.get('LiteGraph.Canvas.MinFontSizeForLOD') //default 8
+    const threshold =
+      Math.round((minFontSize / (baseFontSize * dprAdjustment)) * 100) / 100 //round to 2 decimal places i.e 0.86

-/**
- * 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))
+    return camera.z < threshold
  })

-  // 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
+  return { isLOD }
 }
--- a/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
+++ b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
@@ -1,16 +1,16 @@
 import { storeToRefs } from 'pinia'
-import { type Ref, computed } from 'vue'
+import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'

 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'

 export const useNodePreviewState = (
-  nodeId: string,
+  nodeIdMaybe: MaybeRefOrGetter<string>,
  options?: {
-    isMinimalLOD?: Ref<boolean>
    isCollapsed?: Ref<boolean>
  }
 ) => {
+  const nodeId = toValue(nodeIdMaybe)
  const workflowStore = useWorkflowStore()
  const { nodePreviewImages } = storeToRefs(useNodeOutputStore())

@@ -31,14 +31,10 @@ export const useNodePreviewState = (
  })

  const shouldShowPreviewImg = computed(() => {
-    if (!options?.isMinimalLOD || !options?.isCollapsed) {
+    if (!options?.isCollapsed) {
      return hasPreview.value
    }
-    return (
-      !options.isMinimalLOD.value &&
-      !options.isCollapsed.value &&
-      hasPreview.value
-    )
+    return !options.isCollapsed.value && hasPreview.value
  })

  return {
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -1,14 +1,17 @@
 <template>
-  <Textarea
-    v-model="localValue"
-    v-bind="filteredProps"
-    :disabled="readonly"
-    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
-    :placeholder="placeholder || widget.name || ''"
-    size="small"
-    rows="3"
-    @update:model-value="onChange"
-  />
+  <div class="relative">
+    <Textarea
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
+      :placeholder="placeholder || widget.name || ''"
+      size="small"
+      rows="3"
+      @update:model-value="onChange"
+    />
+    <LODFallback />
+  </div>
 </template>

 <script setup lang="ts">
@@ -23,6 +26,7 @@ import {
  filterWidgetProps
 } from '@/utils/widgetPropFilter'

+import LODFallback from '../../components/LODFallback.vue'
 import { WidgetInputBaseClass } from './layout'

 const props = defineProps<{
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -3,6 +3,8 @@ import { noop } from 'es-toolkit'

 import type { SimplifiedWidget } from '@/types/simplifiedWidget'

+import LODFallback from '../../../components/LODFallback.vue'
+
 defineProps<{
  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
 }>()
@@ -12,19 +14,25 @@ defineProps<{
  <div
    class="flex items-center justify-between gap-2 h-[30px] overscroll-contain"
  >
-    <p
-      v-if="widget.name"
-      class="text-sm text-stone-200 dark-theme:text-slate-200 font-normal flex-1 truncate w-20"
-    >
-      {{ widget.name }}
-    </p>
-    <div
-      class="w-75 cursor-default"
-      @pointerdown.stop="noop"
-      @pointermove.stop="noop"
-      @pointerup.stop="noop"
-    >
-      <slot />
+    <div class="relative h-6 flex items-center mr-4">
+      <p
+        v-if="widget.name"
+        class="text-sm text-stone-200 dark-theme:text-slate-200 font-normal flex-1 truncate w-20 lod-toggle"
+      >
+        {{ widget.name }}
+      </p>
+      <LODFallback />
+    </div>
+    <div class="relative">
+      <div
+        class="w-75 cursor-default lod-toggle"
+        @pointerdown.stop="noop"
+        @pointermove.stop="noop"
+        @pointerup.stop="noop"
+      >
+        <slot />
+      </div>
+      <LODFallback />
    </div>
  </div>
 </template>
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -596,7 +596,10 @@ export class ComfyApp {
        const keybindingStore = useKeybindingStore()
        const keybinding = keybindingStore.getKeybinding(keyCombo)

-        if (keybinding && keybinding.targetElementId === 'graph-canvas') {
+        if (
+          keybinding &&
+          keybinding.targetElementId === 'graph-canvas-container'
+        ) {
          useCommandStore().execute(keybinding.commandId)

          this.graph.change()
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -43,6 +43,57 @@ interface QueuedPrompt {
  workflow?: ComfyWorkflow
 }

+const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
+  const node = graph.getNodeById(id)
+  if (node?.isSubgraphNode()) return node.subgraph
+}
+
+/**
+ * Recursively get the subgraph objects for the given subgraph instance IDs
+ * @param currentGraph The current graph
+ * @param subgraphNodeIds The instance IDs
+ * @param subgraphs The subgraphs
+ * @returns The subgraphs that correspond to each of the instance IDs.
+ */
+function getSubgraphsFromInstanceIds(
+  currentGraph: LGraph | Subgraph,
+  subgraphNodeIds: string[],
+  subgraphs: Subgraph[] = []
+): Subgraph[] {
+  // Last segment is the node portion; nothing to do.
+  if (subgraphNodeIds.length === 1) return subgraphs
+
+  const currentPart = subgraphNodeIds.shift()
+  if (currentPart === undefined) return subgraphs
+
+  const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
+  if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
+
+  subgraphs.push(subgraph)
+  return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
+}
+
+/**
+ * Convert execution context node IDs to NodeLocatorIds
+ * @param nodeId The node ID from execution context (could be execution ID)
+ * @returns The NodeLocatorId
+ */
+function executionIdToNodeLocatorId(nodeId: string | number): NodeLocatorId {
+  const nodeIdStr = String(nodeId)
+
+  if (!nodeIdStr.includes(':')) {
+    // It's a top-level node ID
+    return nodeIdStr
+  }
+
+  // It's an execution node ID
+  const parts = nodeIdStr.split(':')
+  const localNodeId = parts[parts.length - 1]
+  const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
+  const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
+  return nodeLocatorId
+}
+
 export const useExecutionStore = defineStore('execution', () => {
  const workflowStore = useWorkflowStore()
  const canvasStore = useCanvasStore()
@@ -55,29 +106,6 @@ export const useExecutionStore = defineStore('execution', () => {
  // This is the progress of all nodes in the currently executing workflow
  const nodeProgressStates = ref<Record<string, NodeProgressState>>({})

-  /**
-   * Convert execution context node IDs to NodeLocatorIds
-   * @param nodeId The node ID from execution context (could be execution ID)
-   * @returns The NodeLocatorId
-   */
-  const executionIdToNodeLocatorId = (
-    nodeId: string | number
-  ): NodeLocatorId => {
-    const nodeIdStr = String(nodeId)
-
-    if (!nodeIdStr.includes(':')) {
-      // It's a top-level node ID
-      return nodeIdStr
-    }
-
-    // It's an execution node ID
-    const parts = nodeIdStr.split(':')
-    const localNodeId = parts[parts.length - 1]
-    const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
-    const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
-    return nodeLocatorId
-  }
-
  const mergeExecutionProgressStates = (
    currentState: NodeProgressState | undefined,
    newState: NodeProgressState
@@ -139,9 +167,13 @@ export const useExecutionStore = defineStore('execution', () => {

  // @deprecated For backward compatibility - stores the primary executing node ID
  const executingNodeId = computed<NodeId | null>(() => {
-    return executingNodeIds.value.length > 0 ? executingNodeIds.value[0] : null
+    return executingNodeIds.value[0] ?? null
  })

+  const uniqueExecutingNodeIdStrings = computed(
+    () => new Set(executingNodeIds.value.map(String))
+  )
+
  // For backward compatibility - returns the primary executing node
  const executingNode = computed<ComfyNode | null>(() => {
    if (!executingNodeId.value) return null
@@ -159,36 +191,6 @@ export const useExecutionStore = defineStore('execution', () => {
    )
  })

-  const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
-    const node = graph.getNodeById(id)
-    if (node?.isSubgraphNode()) return node.subgraph
-  }
-
-  /**
-   * Recursively get the subgraph objects for the given subgraph instance IDs
-   * @param currentGraph The current graph
-   * @param subgraphNodeIds The instance IDs
-   * @param subgraphs The subgraphs
-   * @returns The subgraphs that correspond to each of the instance IDs.
-   */
-  const getSubgraphsFromInstanceIds = (
-    currentGraph: LGraph | Subgraph,
-    subgraphNodeIds: string[],
-    subgraphs: Subgraph[] = []
-  ): Subgraph[] => {
-    // Last segment is the node portion; nothing to do.
-    if (subgraphNodeIds.length === 1) return subgraphs
-
-    const currentPart = subgraphNodeIds.shift()
-    if (currentPart === undefined) return subgraphs
-
-    const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-    if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
-
-    subgraphs.push(subgraph)
-    return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
-  }
-
  // This is the progress of the currently executing node (for backward compatibility)
  const _executingNodeProgress = ref<ProgressWsMessage | null>(null)
  const executingNodeProgress = computed(() =>
@@ -423,66 +425,25 @@ export const useExecutionStore = defineStore('execution', () => {
  return {
    isIdle,
    clientId,
-    /**
-     * The id of the prompt that is currently being executed
-     */
    activePromptId,
-    /**
-     * The queued prompts
-     */
    queuedPrompts,
-    /**
-     * The node errors from the previous execution.
-     */
    lastNodeErrors,
-    /**
-     * The error from the previous execution.
-     */
    lastExecutionError,
-    /**
-     * Local node ID for the most recent execution error.
-     */
    lastExecutionErrorNodeId,
-    /**
-     * The id of the node that is currently being executed (backward compatibility)
-     */
    executingNodeId,
-    /**
-     * The list of all nodes that are currently executing
-     */
    executingNodeIds,
-    /**
-     * The prompt that is currently being executed
-     */
    activePrompt,
-    /**
-     * The total number of nodes to execute
-     */
    totalNodesToExecute,
-    /**
-     * The number of nodes that have been executed
-     */
    nodesExecuted,
-    /**
-     * The progress of the execution
-     */
    executionProgress,
-    /**
-     * The node that is currently being executed (backward compatibility)
-     */
    executingNode,
-    /**
-     * The progress of the executing node (backward compatibility)
-     */
    executingNodeProgress,
-    /**
-     * All node progress states from progress_state events
-     */
    nodeProgressStates,
    nodeLocationProgressStates,
    bindExecutionEvents,
    unbindExecutionEvents,
    storePrompt,
+    uniqueExecutingNodeIdStrings,
    // Raw executing progress data for backward compatibility in ComfyApp.
    _executingNodeProgress,
    // NodeLocatorId conversion helpers
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -6,10 +6,12 @@ import {
  GoogleAuthProvider,
  type User,
  type UserCredential,
+  browserLocalPersistence,
  createUserWithEmailAndPassword,
  deleteUser,
  onAuthStateChanged,
  sendPasswordResetEmail,
+  setPersistence,
  signInWithEmailAndPassword,
  signInWithPopup,
  signOut,
@@ -80,6 +82,8 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
  // Retrieves the Firebase Auth instance. Returns `null` on the server.
  // When using this function on the client in TypeScript, you can force the type with `useFirebaseAuth()!`.
  const auth = useFirebaseAuth()!
+  // Set persistence to localStorage (works in both browser and Electron)
+  void setPersistence(auth, browserLocalPersistence)

  onAuthStateChanged(auth, (user) => {
    currentUser.value = user
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -82,7 +82,7 @@ declare module '@/lib/litegraph/src/litegraph' {
  }

  // Add interface augmentations into the class itself
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+
  interface BaseWidget extends IBaseWidget {}

  interface LGraphNode {