refactor: Reorganize Vue nodes system to domain-driven design architecture

Move Vue nodes code from scattered technical layers to domain-focused structure:

- Widget system → src/renderer/extensions/vueNodes/widgets/
- LOD optimization → src/renderer/extensions/vueNodes/lod/
- Layout logic → src/renderer/extensions/vueNodes/layout/
- Node components → src/renderer/extensions/vueNodes/components/
- Test structure mirrors source organization

Benefits:
- Clear domain boundaries instead of technical layers
- Everything Vue nodes related in renderer domain (not workbench)
- camelCase naming (vueNodes vs vue-nodes)
- Tests co-located with source domains

Author: christian-byrne

src/components/graph/vueNodes/LGraphNode.vue

@@ -91,9 +91,9 @@ import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
 
 // Import the VueNodeData type
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { LODLevel, useLOD } from '@/composables/graph/useLOD'
+import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useNodeLayout } from '@/renderer/extensions/vue-nodes/composables/useNodeLayout'
+import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 
 import { LiteGraph } from '../../../lib/litegraph/src/litegraph'
 import NodeContent from './NodeContent.vue'

src/components/graph/vueNodes/NodeContent.vue

@@ -16,7 +16,7 @@
 import { onErrorCaptured, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'

src/components/graph/vueNodes/NodeHeader.vue

@@ -45,7 +45,7 @@ import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'

src/components/graph/vueNodes/NodeSlots.vue

@@ -35,7 +35,7 @@ import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
 import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { isSlotObject } from '@/utils/typeGuardUtil'
 

src/components/graph/vueNodes/NodeWidgets.vue

@@ -42,22 +42,22 @@
 import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
 // Import widget components directly
-import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
-import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+import { widgetTypeToComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type {
   SafeWidgetData,
   VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
-import { LODLevel } from '@/composables/graph/useLOD'
+import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import {
   ESSENTIAL_WIDGET_TYPES,
   useWidgetRenderer
-} from '@/composables/graph/useWidgetRenderer'
+} from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 
-import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import InputSlot from './InputSlot.vue'
 
 interface NodeWidgetsProps {

src/composables/node/useNodeCanvasImagePreview.ts

@@ -1,4 +1,4 @@
-import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
+import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'

src/composables/node/useNodeChatHistory.ts

@@ -1,5 +1,5 @@
 import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
+import { useChatHistoryWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'

src/composables/node/useNodeProgressText.ts

@@ -1,4 +1,4 @@
-import { useTextPreviewWidget } from '@/composables/widgets/useProgressTextWidget'
+import { useTextPreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'

src/renderer/extensions/vueNodes/components/InputSlot.vue

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