add i/o slot component component tests

.env_example

@@ -33,4 +33,3 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
-

.github/workflows/claude-pr-review.yml

@@ -47,7 +47,6 @@ jobs:
     needs: wait-for-ci
     if: needs.wait-for-ci.outputs.should-proceed == 'true'
     runs-on: ubuntu-latest
-    timeout-minutes: 30
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -70,17 +69,19 @@ jobs:
           pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@v1.0.6
+        uses: anthropics/claude-code-action@main
         with:
           label_trigger: "claude-review"
-          prompt: |
+          direct_prompt: |
             Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
             
             CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
             DO NOT create a summary comment. 
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
+          max_turns: 256
+          timeout_minutes: 30
+          allowed_tools: "Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch"
         env:
           PR_NUMBER: ${{ github.event.pull_request.number }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -51,7 +51,6 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
-browser-tests/local/
 
 .env
 

browser_tests/tests/selectionToolbox.spec.ts

@@ -149,7 +149,7 @@ test.describe('Selection Toolbox', () => {
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
       const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-      expect(await selectedNode.getProperty('color')).not.toBeNull()
+      expect(selectedNode.getProperty('color')).not.toBeNull()
     })
 
     test('color picker shows current color of selected nodes', async ({

knip.config.ts

@@ -51,7 +51,8 @@ const config: KnipConfig = {
   tags: [
     '-knipIgnoreUnusedButUsedByCustomNodes',
     '-knipIgnoreUnusedButUsedByVueNodesBranch'
-  ]
+  ],
+  ignoreUnresolved: ['^~icons/']
 }
 
 export default config

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.26.10",
+  "version": "1.27.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,10 +25,10 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
-    "lint": "eslint src --cache --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:fix": "eslint src --fix --cache --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:no-cache": "eslint src --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:fix:no-cache": "eslint src --fix --concurrency=$npm_package_config_eslint_concurrency",
+    "lint": "eslint src --cache --concurrency=auto",
+    "lint:fix": "eslint src --cache --fix --concurrency=auto",
+    "lint:no-cache": "eslint src",
+    "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
@@ -37,12 +37,8 @@
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
-  "config": {
-    "eslint_concurrency": "4"
-  },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "@lobehub/i18n-cli": "^1.25.1",
@@ -80,6 +76,7 @@
     "jsdom": "^26.1.0",
     "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
+    "lucide-vue-next": "^0.540.0",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
     "storybook": "^9.1.1",

pnpm-lock.yaml

@@ -171,9 +171,6 @@ importers:
       '@eslint/js':
         specifier: ^9.8.0
         version: 9.12.0
-      '@iconify-json/lucide':
-        specifier: ^1.2.66
-        version: 1.2.66
       '@iconify/tailwind':
         specifier: ^1.2.0
         version: 1.2.0
@@ -285,6 +282,9 @@ importers:
       lint-staged:
         specifier: ^15.2.7
         version: 15.2.7
+      lucide-vue-next:
+        specifier: ^0.540.0
+        version: 0.540.0(vue@3.5.13(typescript@5.9.2))
       nx:
         specifier: 21.4.1
         version: 21.4.1
@@ -1595,9 +1595,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/lucide@1.2.66':
-    resolution: {integrity: sha512-TrhmfThWY2FHJIckjz7g34gUx3+cmja61DcHNdmu0rVDBQHIjPMYO1O8mMjoDSqIXEllz9wDZxCqT3lFuI+f/A==}
-
   '@iconify/json@2.2.380':
     resolution: {integrity: sha512-+Al/Q+mMB/nLz/tawmJEOkCs6+RKKVUS/Yg9I80h2yRpu0kIzxVLQRfF0NifXz/fH92vDVXbS399wio4lMVF4Q==}
 
@@ -4739,6 +4736,11 @@ packages:
     resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
     engines: {node: '>=16.14'}
 
+  lucide-vue-next@0.540.0:
+    resolution: {integrity: sha512-H7qhKVNKLyoFMo05pWcGSWBiLPiI3zJmWV65SuXWHlrIGIcvDer10xAyWcRJ0KLzIH5k5+yi7AGw/Xi1VF8Pbw==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -8022,10 +8024,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify-json/lucide@1.2.66':
-    dependencies:
-      '@iconify/types': 2.0.0
-
   '@iconify/json@2.2.380':
     dependencies:
       '@iconify/types': 2.0.0
@@ -11565,6 +11563,10 @@ snapshots:
 
   lru-cache@8.0.5: {}
 
+  lucide-vue-next@0.540.0(vue@3.5.13(typescript@5.9.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.9.2)
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.17:

src/assets/css/style.css

@@ -7,6 +7,7 @@
 
 @config '../../../tailwind.config.ts';
 
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -47,91 +48,6 @@
   }
 }
 
-@theme {
-  --text-xxs: 0.625rem;
-  --text-xxs--line-height: calc(1 / 0.625);
-
-  /* Palette Colors */
-  --color-charcoal-100: #171718;
-  --color-charcoal-200: #202121;
-  --color-charcoal-300: #262729;
-  --color-charcoal-400: #2d2e32;
-  --color-charcoal-500: #313235;
-  --color-charcoal-600: #3c3d42;
-  --color-charcoal-700: #494a50;
-  --color-charcoal-800: #55565e;
-
-  --color-stone-100: #444444;
-  --color-stone-200: #828282;
-  --color-stone-300: #bbbbbb;
-
-  --color-ivory-100: #fdfbfa;
-  --color-ivory-200: #faf9f5;
-  --color-ivory-300: #f0eee6;
-
-  --color-gray-100: #f3f3f3;
-  --color-gray-200: #e9e9e9;
-  --color-gray-300: #e1e1e1;
-  --color-gray-400: #d9d9d9;
-  --color-gray-500: #c5c5c5;
-  --color-gray-600: #b4b4b4;
-  --color-gray-700: #a0a0a0;
-  --color-gray-800: #8a8a8a;
-
-  --color-sand-100: #e1ded5;
-  --color-sand-200: #d6cfc2;
-  --color-sand-300: #888682;
-
-  --color-slate-100: #9c9eab;
-  --color-slate-200: #9fa2bd;
-  --color-slate-300: #5b5e7d;
-
-  --color-brand-yellow: #f0ff41;
-  --color-brand-blue: #172dd7;
-
-  --color-blue-100: #0b8ce9;
-  --color-blue-200: #31b9f4;
-  --color-success-100: #00cd72;
-  --color-success-200: #47e469;
-  --color-warning-100: #fd9903;
-  --color-warning-200: #fcbf64;
-  --color-danger-100: #c02323;
-  --color-danger-200: #d62952;
-
-  --color-error: #962a2a;
-
-  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
-  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
-  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
-
-  /* PrimeVue pulled colors */
-  --color-muted: var(--p-text-muted-color);
-  --color-highlight: var(--p-primary-color);
-
-  /* Special Colors (temporary) */
-  --color-dark-elevation-1.5: rgba(from white r g b/ 0.015);
-  --color-dark-elevation-2: rgba(from white r g b / 0.03);
-}
-
-@custom-variant dark-theme {
-  .dark-theme & {
-    @slot;
-  }
-}
-
-@utility scrollbar-hide {
-  scrollbar-width: none;
-  &::-webkit-scrollbar { 
-    width: 1px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-
-/* Everthing below here to be cleaned up over time. */
-
 body {
   width: 100vw;
   height: 100vh;
@@ -874,7 +790,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d,
 .comfy-load-3d-animation,
 .comfy-preview-3d,
-.comfy-preview-3d-animation {
+.comfy-preview-3d-animation{
   display: flex;
   flex-direction: column;
   background: transparent;
@@ -887,7 +803,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
 .comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas {
+.comfy-load-3d-viewer canvas{
   display: flex;
   width: 100% !important;
   height: 100% !important;
@@ -964,9 +880,7 @@ audio.comfy-audio.empty-audio-widget {
 
 .lg-node .lg-slot,
 .lg-node .lg-widget {
-  transition:
-    opacity 0.1s ease,
-    font-size 0.1s ease;
+  transition: opacity 0.1s ease, font-size 0.1s ease;
 }
 
 /* Performance optimization during canvas interaction */
@@ -998,3 +912,4 @@ audio.comfy-audio.empty-audio-widget {
   /* Use solid colors only */
   background-image: none !important;
 }
+

src/components/button/IconButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Bell, Download, Heart, Settings, Trophy, X } from 'lucide-vue-next'
 
 import IconButton from './IconButton.vue'
 
@@ -32,13 +33,13 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Trophy },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--trophy] size-4" />
+        <Trophy :size="16" />
       </IconButton>
     `
   }),
@@ -50,13 +51,13 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Settings },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--settings] size-4" />
+        <Settings :size="16" />
       </IconButton>
     `
   }),
@@ -68,13 +69,13 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, X },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--x] size-4" />
+        <X :size="16" />
       </IconButton>
     `
   }),
@@ -86,13 +87,13 @@ export const Transparent: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Bell },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--bell] size-3" />
+        <Bell :size="12" />
       </IconButton>
     `
   }),
@@ -104,42 +105,42 @@ export const Small: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { IconButton },
+    components: { IconButton, Trophy, Settings, X, Bell, Heart, Download },
     template: `
       <div class="flex flex-col gap-4">
         <div class="flex gap-2 items-center">
           <IconButton type="primary" size="sm" @click="() => {}">
-            <i class="icon-[lucide--trophy] size-3" />
+            <Trophy :size="12" />
           </IconButton>
           <IconButton type="primary" size="md" @click="() => {}">
-            <i class="icon-[lucide--trophy] size-4" />
+            <Trophy :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="secondary" size="sm" @click="() => {}">
-            <i class="icon-[lucide--settings] size-3" />
+            <Settings :size="12" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <i class="icon-[lucide--settings] size-4" />
+            <Settings :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="transparent" size="sm" @click="() => {}">
-            <i class="icon-[lucide--x] size-3" />
+            <X :size="12" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <i class="icon-[lucide--x] size-4" />
+            <X :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="primary" size="md" @click="() => {}">
-            <i class="icon-[lucide--bell] size-4" />
+            <Bell :size="16" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <i class="icon-[lucide--heart] size-4" />
+            <Heart :size="16" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <i class="icon-[lucide--download] size-4" />
+            <Download :size="16" />
           </IconButton>
         </div>
       </div>

src/components/button/IconButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <slot></slot>
   </Button>
 </template>
@@ -26,10 +20,6 @@ interface IconButtonProps extends BaseButtonProps {
   onClick: (event: Event) => void
 }
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const {
   size = 'md',
   type = 'secondary',

src/components/button/IconGroup.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ExternalLink, Heart } from 'lucide-vue-next'
 
 import IconButton from './IconButton.vue'
 import IconGroup from './IconGroup.vue'
@@ -16,17 +17,17 @@ type Story = StoryObj<typeof IconGroup>
 
 export const Basic: Story = {
   render: () => ({
-    components: { IconGroup, IconButton },
+    components: { IconGroup, IconButton, Download, ExternalLink, Heart },
     template: `
       <IconGroup>
         <IconButton @click="console.log('Hello World!!')">
-          <i class="icon-[lucide--heart] size-4" />
+          <Heart :size="16" />
         </IconButton>
         <IconButton @click="console.log('Hello World!!')">
-          <i class="icon-[lucide--download] size-4" />
+          <Download :size="16" />
         </IconButton>
         <IconButton @click="console.log('Hello World!!')">
-          <i class="icon-[lucide--external-link] size-4" />
+          <ExternalLink :size="16" />
         </IconButton>
       </IconGroup>
     `

src/components/button/IconTextButton.stories.ts

@@ -1,4 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Package,
+  Save,
+  Settings,
+  Trash2,
+  X
+} from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 
@@ -39,14 +49,14 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Package },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--package] size-4" />
+          <Package :size="16" />
         </template>
       </IconTextButton>
     `
@@ -60,14 +70,14 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Settings },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--settings] size-4" />
+          <Settings :size="16" />
         </template>
       </IconTextButton>
     `
@@ -81,14 +91,14 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, X },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--x] size-4" />
+          <X :size="16" />
         </template>
       </IconTextButton>
     `
@@ -102,14 +112,14 @@ export const Transparent: Story = {
 
 export const WithIconRight: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, ChevronRight },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--chevron-right] size-4" />
+          <ChevronRight :size="16" />
         </template>
       </IconTextButton>
     `
@@ -124,14 +134,14 @@ export const WithIconRight: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Save },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--save] size-3" />
+          <Save :size="12" />
         </template>
       </IconTextButton>
     `
@@ -146,60 +156,66 @@ export const Small: Story = {
 export const AllVariants: Story = {
   render: () => ({
     components: {
-      IconTextButton
+      IconTextButton,
+      Download,
+      Settings,
+      Trash2,
+      ChevronRight,
+      ChevronLeft,
+      Save
     },
     template: `
       <div class="flex flex-col gap-4">
         <div class="flex gap-2 items-center">
           <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--download] size-3" />
+              <Download :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--download] size-4" />
+              <Download :size="16" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--settings] size-3" />
+              <Settings :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--settings] size-4" />
+              <Settings :size="16" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--trash-2] size-3" />
+              <Trash2 :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--trash-2] size-4" />
+              <Trash2 :size="16" />
             </template>
           </IconTextButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--chevron-right] size-4" />
+              <ChevronRight :size="16" />
             </template>
           </IconTextButton>
           <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--chevron-left] size-4" />
+              <ChevronLeft :size="16" />
             </template>
           </IconTextButton>
           <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--save] size-4" />
+              <Save :size="16" />
             </template>
           </IconTextButton>
         </div>

src/components/button/IconTextButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <slot v-if="iconPosition !== 'right'" name="icon"></slot>
     <span>{{ label }}</span>
     <slot v-if="iconPosition === 'right'" name="icon"></slot>
@@ -24,10 +18,6 @@ import {
   getButtonTypeClasses
 } from '@/types/buttonTypes'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 interface IconTextButtonProps extends BaseButtonProps {
   iconPosition?: 'left' | 'right'
   label: string

src/components/button/MoreButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ScrollText } from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 import MoreButton from './MoreButton.vue'
@@ -17,7 +18,7 @@ type Story = StoryObj<typeof MoreButton>
 
 export const Basic: Story = {
   render: () => ({
-    components: { MoreButton, IconTextButton },
+    components: { MoreButton, IconTextButton, Download, ScrollText },
     template: `
       <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
         <MoreButton>
@@ -28,7 +29,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <i class="icon-[lucide--download] size-4" />
+                <Download :size="16" />
               </template>
             </IconTextButton>
 
@@ -38,7 +39,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <i class="icon-[lucide--scroll-text] size-4" />
+                <ScrollText :size="16" />
               </template>
             </IconTextButton>
           </template>

src/components/button/TextButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <span>{{ label }}</span>
   </Button>
 </template>
@@ -27,10 +21,6 @@ interface TextButtonProps extends BaseButtonProps {
   onClick: () => void
 }
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const {
   size = 'md',
   type = 'primary',

src/components/card/Card.stories.ts

@@ -1,4 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  Download,
+  Folder,
+  Heart,
+  Info,
+  MoreVertical,
+  Star,
+  Upload
+} from 'lucide-vue-next'
 import { ref } from 'vue'
 
 import IconButton from '../button/IconButton.vue'
@@ -140,7 +149,14 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     IconButton,
-    SquareChip
+    SquareChip,
+    Info,
+    Folder,
+    Heart,
+    Download,
+    Star,
+    Upload,
+    MoreVertical
   },
   setup() {
     const favorited = ref(false)
@@ -186,14 +202,14 @@ const createCardTemplate = (args: CardStoryArgs) => ({
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
-                <i class="icon-[lucide--info] size-4" />
+                <Info :size="16" />
               </IconButton>
               <IconButton
                 class="!bg-white/90"
                 :class="favorited ? '!text-red-500' : '!text-neutral-900'"
                 @click="toggleFavorite"
               >
-                <i class="icon-[lucide--heart] size-4" :class="favorited ? 'fill-current' : ''" />
+                <Heart :size="16" :fill="favorited ? 'currentColor' : 'none'" />
               </IconButton>
             </template>
             
@@ -206,7 +222,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
               <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
               <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
-                  <i class="icon-[lucide--folder] size-3" />
+                  <Folder :size="12" />
                 </template>
               </SquareChip>
             </template>
@@ -393,7 +409,11 @@ export const GridOfCards: Story = {
       CardTitle,
       CardDescription,
       IconButton,
-      SquareChip
+      SquareChip,
+      Info,
+      Folder,
+      Heart,
+      Download
     },
     setup() {
       const cards = ref([
@@ -480,7 +500,7 @@ export const GridOfCards: Story = {
                     class="!bg-white/90 !text-neutral-900"
                     @click="() => console.log('Info:', card.title)"
                   >
-                    <i class="icon-[lucide--info] size-4" />
+                    <Info :size="16" />
                   </IconButton>
                 </template>
                 
@@ -491,7 +511,7 @@ export const GridOfCards: Story = {
                     :label="tag"
                   >
                     <template v-if="tag === 'LoRA'" #icon>
-                      <i class="icon-[lucide--folder] size-3" />
+                      <Folder :size="12" />
                     </template>
                   </SquareChip>
                   <SquareChip :label="card.size" />

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -2,8 +2,8 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    :title="$t('loadWorkflowWarning.missingNodesTitle')"
-    :message="$t('loadWorkflowWarning.missingNodesDescription')"
+    title="Some Nodes Are Missing"
+    message="When loading the graph, the following node types were not found"
   />
   <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
@@ -53,16 +53,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed, nextTick, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -124,35 +121,6 @@ const openManager = async () => {
     showToastOnLegacyError: true
   })
 }
-
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-
-// Computed to check if all missing nodes have been installed
-const allMissingNodesInstalled = computed(() => {
-  return (
-    !isLoading.value &&
-    !isInstalling.value &&
-    missingNodePacks.value?.length === 0
-  )
-})
-// Watch for completion and close dialog
-watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (allInstalled) {
-    // Use nextTick to ensure state updates are complete
-    await nextTick()
-
-    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
-
-    // Show success toast
-    useToastStore().add({
-      severity: 'success',
-      summary: t('g.success'),
-      detail: t('manager.allMissingNodesInstalled'),
-      life: 3000
-    })
-  }
-})
 </script>
 
 <style scoped>

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -1,7 +1,6 @@
 import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -32,14 +31,11 @@ const mockInstalledPacks = {
   'installed-pack': { ver: '2.0.0' }
 }
 
-const mockIsPackEnabled = vi.fn(() => true)
-
 vi.mock('@/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     installedPacks: mockInstalledPacks,
     isPackInstalled: (id: string) =>
-      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks],
-    isPackEnabled: mockIsPackEnabled
+      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks]
   }))
 }))
 
@@ -64,7 +60,6 @@ describe('PackVersionBadge', () => {
   beforeEach(() => {
     mockToggle.mockReset()
     mockHide.mockReset()
-    mockIsPackEnabled.mockReturnValue(true) // Reset to default enabled state
   })
 
   const mountComponent = ({
@@ -84,9 +79,6 @@ describe('PackVersionBadge', () => {
       },
       global: {
         plugins: [PrimeVue, createPinia(), i18n],
-        directives: {
-          tooltip: Tooltip
-        },
         stubs: {
           Popover: PopoverStub,
           PackVersionSelectorPopover: true
@@ -237,63 +229,4 @@ describe('PackVersionBadge', () => {
       expect(mockHide).not.toHaveBeenCalled()
     })
   })
-
-  describe('disabled state', () => {
-    beforeEach(() => {
-      mockIsPackEnabled.mockReturnValue(false) // Set all packs as disabled for these tests
-    })
-
-    it('adds disabled styles when pack is disabled', () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.classes()).toContain('cursor-not-allowed')
-      expect(badge.classes()).toContain('opacity-60')
-    })
-
-    it('does not show chevron icon when disabled', () => {
-      const wrapper = mountComponent()
-
-      const chevronIcon = wrapper.find('.pi-chevron-right')
-      expect(chevronIcon.exists()).toBe(false)
-    })
-
-    it('does not show update arrow when disabled', () => {
-      const wrapper = mountComponent()
-
-      const updateIcon = wrapper.find('.pi-arrow-circle-up')
-      expect(updateIcon.exists()).toBe(false)
-    })
-
-    it('does not toggle popover when clicked while disabled', async () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('click')
-
-      // Since it's disabled, the popover should not be toggled
-      expect(mockToggle).not.toHaveBeenCalled()
-    })
-
-    it('has correct tabindex when disabled', () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.attributes('tabindex')).toBe('-1')
-    })
-
-    it('does not respond to keyboard events when disabled', async () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('keydown.enter')
-      await badge.trigger('keydown.space')
-
-      expect(mockToggle).not.toHaveBeenCalled()
-    })
-  })
 })

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -1,28 +1,21 @@
 <template>
   <div>
     <div
-      v-tooltip.top="
-        isDisabled ? $t('manager.enablePackToChangeVersion') : null
-      "
-      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
-      :class="{
-        'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
-        'cursor-pointer': !isDisabled,
-        'cursor-not-allowed opacity-60': isDisabled
-      }"
-      :aria-haspopup="!isDisabled"
-      :role="isDisabled ? 'text' : 'button'"
-      :tabindex="isDisabled ? -1 : 0"
-      @click="!isDisabled && toggleVersionSelector($event)"
-      @keydown.enter="!isDisabled && toggleVersionSelector($event)"
-      @keydown.space="!isDisabled && toggleVersionSelector($event)"
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill }"
+      aria-haspopup="true"
+      role="button"
+      tabindex="0"
+      @click="toggleVersionSelector"
+      @keydown.enter="toggleVersionSelector"
+      @keydown.space="toggleVersionSelector"
     >
       <i
         v-if="isUpdateAvailable"
         class="pi pi-arrow-circle-up text-blue-600 text-xs"
       />
       <span>{{ installedVersion }}</span>
-      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
+      <i class="pi pi-chevron-right text-xxs" />
     </div>
 
     <Popover
@@ -68,11 +61,6 @@ const popoverRef = ref()
 
 const managerStore = useComfyManagerStore()
 
-const isInstalled = computed(() => managerStore.isPackInstalled(nodePack?.id))
-const isDisabled = computed(
-  () => isInstalled.value && !managerStore.isPackEnabled(nodePack?.id)
-)
-
 const installedVersion = computed(() => {
   if (!nodePack.id) return 'nightly'
   const version =

src/components/dialog/content/manager/button/PackUpdateButton.vue

@@ -1,8 +1,5 @@
 <template>
   <IconTextButton
-    v-tooltip.top="
-      hasDisabledUpdatePacks ? $t('manager.disabledNodesWontUpdate') : null
-    "
     v-bind="$attrs"
     type="transparent"
     :label="$t('manager.updateAll')"
@@ -27,9 +24,8 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks, hasDisabledUpdatePacks } = defineProps<{
+const { nodePacks } = defineProps<{
   nodePacks: NodePack[]
-  hasDisabledUpdatePacks?: boolean
 }>()
 
 const isUpdating = ref<boolean>(false)

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -34,8 +34,7 @@
       />
       <PackUpdateButton
         v-if="isUpdateAvailableTab && hasUpdateAvailable"
-        :node-packs="enabledUpdateAvailableNodePacks"
-        :has-disabled-update-packs="hasDisabledUpdatePacks"
+        :node-packs="updateAvailableNodePacks"
       />
     </div>
     <div class="flex mt-3 text-sm">
@@ -104,11 +103,8 @@ const { t } = useI18n()
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 
 // Use the composable to get update available nodes
-const {
-  hasUpdateAvailable,
-  enabledUpdateAvailableNodePacks,
-  hasDisabledUpdatePacks
-} = useUpdateAvailableNodes()
+const { hasUpdateAvailable, updateAvailableNodePacks } =
+  useUpdateAvailableNodes()
 
 const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length

src/components/graph/GraphCanvas.vue

@@ -36,7 +36,6 @@
     v-if="isVueNodesEnabled && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
     @transform-update="handleTransformUpdate"
-    @wheel.capture="canvasInteractions.forwardEventToCanvas"
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
@@ -97,7 +96,6 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -149,8 +147,6 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
-const canvasInteractions = useCanvasInteractions()
-
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )

src/components/input/SingleSelect.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ArrowUpDown } from 'lucide-vue-next'
 import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
@@ -56,7 +57,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   render: () => ({
-    components: { SingleSelect },
+    components: { SingleSelect, ArrowUpDown },
     setup() {
       const selected = ref<string | null>('popular')
       const options = sampleOptions
@@ -66,7 +67,7 @@ export const WithIcon: Story = {
       <div>
         <SingleSelect v-model="selected" :options="options" label="Sorting Type">
           <template #icon>
-            <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
+            <ArrowUpDown :size="14" />
           </template>
         </SingleSelect>
         <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
@@ -93,7 +94,7 @@ export const Preselected: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { SingleSelect },
+    components: { SingleSelect, ArrowUpDown },
     setup() {
       const options = sampleOptions
       const a = ref<string | null>(null)
@@ -109,7 +110,7 @@ export const AllVariants: Story = {
         <div class="flex items-center gap-3">
           <SingleSelect v-model="b" :options="options" label="With Icon">
             <template #icon>
-              <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
+              <ArrowUpDown :size="14" />
             </template>
           </SingleSelect>
         </div>

src/components/widget/SampleModelSelector.vue

@@ -136,6 +136,10 @@
 <script setup lang="ts">
 import { provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import DownloadIcon from '~icons/lucide/download'
+import Grid3x3Icon from '~icons/lucide/grid-3-x-3'
+import LayersIcon from '~icons/lucide/layers'
+import TagIcon from '~icons/lucide/tag'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
@@ -173,20 +177,20 @@ const sortOptions = ref([
 ])
 
 const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
-  { id: 'installed', label: 'Installed', icon: 'icon-[lucide--download]' },
+  { id: 'installed', label: 'Installed', icon: DownloadIcon },
   {
     title: 'TAGS',
     items: [
-      { id: 'tag-sd15', label: 'SD 1.5', icon: 'icon-[lucide--tag]' },
-      { id: 'tag-sdxl', label: 'SDXL', icon: 'icon-[lucide--tag]' },
-      { id: 'tag-utility', label: 'Utility', icon: 'icon-[lucide--tag]' }
+      { id: 'tag-sd15', label: 'SD 1.5', icon: TagIcon },
+      { id: 'tag-sdxl', label: 'SDXL', icon: TagIcon },
+      { id: 'tag-utility', label: 'Utility', icon: TagIcon }
     ]
   },
   {
     title: 'CATEGORIES',
     items: [
-      { id: 'cat-models', label: 'Models', icon: 'icon-[lucide--layers]' },
-      { id: 'cat-nodes', label: 'Nodes', icon: 'icon-[lucide--grid-3x3]' }
+      { id: 'cat-models', label: 'Models', icon: LayersIcon },
+      { id: 'cat-nodes', label: 'Nodes', icon: Grid3x3Icon }
     ]
   }
 ])

src/components/widget/layout/BaseWidget.stories.ts

@@ -1,5 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { provide, ref } from 'vue'
+import {
+  Download,
+  Filter,
+  Folder,
+  Info,
+  PanelLeft,
+  PanelLeftClose,
+  PanelRight,
+  PanelRightClose,
+  Puzzle,
+  Scroll,
+  Settings,
+  Upload,
+  X
+} from 'lucide-vue-next'
+import { h, provide, ref } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
@@ -79,7 +94,20 @@ const createStoryTemplate = (args: StoryArgs) => ({
     CardContainer,
     CardTop,
     CardBottom,
-    SquareChip
+    SquareChip,
+    Settings,
+    Upload,
+    Download,
+    Scroll,
+    Info,
+    Filter,
+    Folder,
+    Puzzle,
+    PanelLeft,
+    PanelLeftClose,
+    PanelRight,
+    PanelRightClose,
+    X
   },
   setup() {
     const t = (k: string) => k
@@ -93,7 +121,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
       {
         id: 'installed',
         label: 'Installed',
-        icon: 'icon-[lucide--folder]'
+        icon: { render: () => h(Folder, { size: 14 }) } as any
       },
       {
         title: 'TAGS',
@@ -101,17 +129,17 @@ const createStoryTemplate = (args: StoryArgs) => ({
           {
             id: 'tag-sd15',
             label: 'SD 1.5',
-            icon: 'icon-[lucide--tag]'
+            icon: { render: () => h(Folder, { size: 14 }) } as any
           },
           {
             id: 'tag-sdxl',
             label: 'SDXL',
-            icon: 'icon-[lucide--tag]'
+            icon: { render: () => h(Folder, { size: 14 }) } as any
           },
           {
             id: 'tag-utility',
             label: 'Utility',
-            icon: 'icon-[lucide--tag]'
+            icon: { render: () => h(Folder, { size: 14 }) } as any
           }
         ]
       },
@@ -121,12 +149,12 @@ const createStoryTemplate = (args: StoryArgs) => ({
           {
             id: 'cat-models',
             label: 'Models',
-            icon: 'icon-[lucide--layers]'
+            icon: { render: () => h(Folder, { size: 14 }) } as any
           },
           {
             id: 'cat-nodes',
             label: 'Nodes',
-            icon: 'icon-[lucide--grid-3x3]'
+            icon: { render: () => h(Folder, { size: 14 }) } as any
           }
         ]
       }
@@ -177,7 +205,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+              <Puzzle :size="16" class="text-neutral" />
             </template>
             <template #header-title>
               <span class="text-neutral text-base">Title</span>
@@ -199,7 +227,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
           <div class="flex gap-2">
             <IconTextButton type="primary" label="Upload Model" @click="() => {}">
               <template #icon>
-                <i class="icon-[lucide--upload] size-3" />
+                <Upload :size="12" />
               </template>
             </IconTextButton>
 
@@ -211,7 +239,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--download] size-3" />
+                    <Download :size="12" />
                   </template>
                 </IconTextButton>
 
@@ -221,7 +249,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--scroll] size-3" />
+                    <Scroll :size="12" />
                   </template>
                 </IconTextButton>
               </template>
@@ -252,7 +280,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <i class="icon-[lucide--filter] size-3" />
+                <Filter :size="12" />
               </template>
             </SingleSelect>
           </div>
@@ -273,7 +301,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   </template>
                   <template #top-right>
                     <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
-                      <i class="icon-[lucide--info] size-4" />
+                      <Info :size="16" />
                     </IconButton>
                   </template>
                   <template #bottom-right>
@@ -281,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <i class="icon-[lucide--folder] size-3" />
+                        <Folder :size="12" />
                       </template>
                     </SquareChip>
                   </template>
@@ -301,7 +329,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
         <template v-if="args.hasLeftPanel" #leftPanel>
           <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
             <template #header-icon>
-              <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+              <Puzzle :size="16" class="text-neutral" />
             </template>
             <template #header-title>
               <span class="text-neutral text-base">Title</span>
@@ -323,7 +351,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
           <div class="flex gap-2">
             <IconTextButton type="primary" label="Upload Model" @click="() => {}">
               <template #icon>
-                <i class="icon-[lucide--upload] size-3" />
+                <Upload :size="12" />
               </template>
             </IconTextButton>
 
@@ -335,7 +363,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--download] size-3" />
+                    <Download :size="12" />
                   </template>
                 </IconTextButton>
 
@@ -345,7 +373,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   @click="() => { close() }"
                 >
                   <template #icon>
-                    <i class="icon-[lucide--scroll] size-3" />
+                    <Scroll :size="12" />
                   </template>
                 </IconTextButton>
               </template>
@@ -373,7 +401,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
               class="w-[135px]"
             >
               <template #icon>
-                <i class="icon-[lucide--filter] size-3" />
+                <Filter :size="12" />
               </template>
             </SingleSelect>
           </div>
@@ -394,7 +422,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                   </template>
                   <template #top-right>
                     <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
-                      <i class="icon-[lucide--info] size-4" />
+                      <Info :size="16" />
                     </IconButton>
                   </template>
                   <template #bottom-right>
@@ -402,7 +430,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     <SquareChip label="1.2 MB" />
                     <SquareChip label="LoRA">
                       <template #icon>
-                        <i class="icon-[lucide--folder] size-3" />
+                        <Folder :size="12" />
                       </template>
                     </SquareChip>
                   </template>

src/components/widget/nav/NavIcon.vue

@@ -1,5 +1,7 @@
 <template>
-  <i :class="icon" class="text-xs text-neutral" />
+  <span v-if="icon" class="text-xs text-neutral">
+    <component :is="icon" />
+  </span>
 </template>
 
 <script setup lang="ts">

src/components/widget/nav/NavItem.stories.ts

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, Folder, Grid3x3, Layers, Tag, Wrench } from 'lucide-vue-next'
+import { h } from 'vue'
 
 import NavItem from './NavItem.vue'
 
@@ -32,6 +34,31 @@ const meta: Meta<typeof NavItem> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+export const Interactive: Story = {
+  args: {
+    icon: Folder,
+    active: false,
+    default: 'Navigation Item'
+  },
+  render: (args) => ({
+    components: { NavItem },
+    setup() {
+      const IconComponent = args.icon
+      const WrappedIcon = {
+        render() {
+          return h(IconComponent, { size: 14 })
+        }
+      }
+      return { args, WrappedIcon }
+    },
+    template: `
+      <NavItem :icon="WrappedIcon" :active="args.active" :on-click="() => {}">
+        {{ args.default }}
+      </NavItem>
+    `
+  })
+}
+
 export const InteractiveList: Story = {
   render: () => ({
     components: { NavItem },
@@ -40,7 +67,7 @@ export const InteractiveList: Story = {
         <NavItem
           v-for="item in items"
           :key="item.id"
-          :icon="item.icon"
+          :icon="item.wrappedIcon"
           :active="selectedId === item.id"
           :on-click="() => selectedId = item.id"
         >
@@ -58,32 +85,32 @@ export const InteractiveList: Story = {
         {
           id: 'downloads',
           label: 'Downloads',
-          icon: 'icon-[lucide--download]'
+          wrappedIcon: () => h(Download, { size: 14 })
         },
         {
           id: 'models',
           label: 'Models',
-          icon: 'icon-[lucide--layers]'
+          wrappedIcon: () => h(Layers, { size: 14 })
         },
         {
           id: 'nodes',
           label: 'Nodes',
-          icon: 'icon-[lucide--grid-3x3]'
+          wrappedIcon: () => h(Grid3x3, { size: 14 })
         },
         {
           id: 'tags',
           label: 'Tags',
-          icon: 'icon-[lucide--tag]'
+          wrappedIcon: () => h(Tag, { size: 14 })
         },
         {
           id: 'settings',
           label: 'Settings',
-          icon: 'icon-[lucide--wrench]'
+          wrappedIcon: () => h(Wrench, { size: 14 })
         },
         {
           id: 'default',
           label: 'Default Icon',
-          icon: 'icon-[lucide--folder]'
+          wrappedIcon: () => h(Folder, { size: 14 })
         }
       ]
 

src/components/widget/panel/LeftSidePanel.stories.ts

@@ -1,5 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
+import {
+  Download,
+  Folder,
+  Grid3x3,
+  Layers,
+  Puzzle,
+  Settings,
+  Tag,
+  Wrench,
+  Zap
+} from 'lucide-vue-next'
+import { h, ref } from 'vue'
 
 import LeftSidePanel from './LeftSidePanel.vue'
 
@@ -37,22 +48,22 @@ export const Default: Story = {
       {
         id: 'installed',
         label: 'Installed',
-        icon: 'icon-[lucide--download]'
+        icon: () => h(Download, { size: 14 })
       },
       {
         id: 'models',
         label: 'Models',
-        icon: 'icon-[lucide--layers]'
+        icon: () => h(Layers, { size: 14 })
       },
       {
         id: 'nodes',
         label: 'Nodes',
-        icon: 'icon-[lucide--grid-3x3]'
+        icon: () => h(Grid3x3, { size: 14 })
       }
     ]
   },
   render: (args) => ({
-    components: { LeftSidePanel },
+    components: { LeftSidePanel, Puzzle },
     setup() {
       const selectedItem = ref(args.modelValue)
       return { args, selectedItem }
@@ -61,7 +72,7 @@ export const Default: Story = {
       <div style="height: 500px; width: 256px;">
         <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
           <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+            <Puzzle :size="16" class="text-neutral" />
           </template>
           <template #header-title>
             <span class="text-neutral text-base">Navigation</span>
@@ -79,7 +90,7 @@ export const WithGroups: Story = {
       {
         id: 'installed',
         label: 'Installed',
-        icon: 'icon-[lucide--download]'
+        icon: () => h(Download, { size: 14 })
       },
       {
         title: 'TAGS',
@@ -87,17 +98,17 @@ export const WithGroups: Story = {
           {
             id: 'tag-sd15',
             label: 'SD 1.5',
-            icon: 'icon-[lucide--tag]'
+            icon: () => h(Tag, { size: 14 })
           },
           {
             id: 'tag-sdxl',
             label: 'SDXL',
-            icon: 'icon-[lucide--tag]'
+            icon: () => h(Tag, { size: 14 })
           },
           {
             id: 'tag-utility',
             label: 'Utility',
-            icon: 'icon-[lucide--tag]'
+            icon: () => h(Tag, { size: 14 })
           }
         ]
       },
@@ -107,19 +118,19 @@ export const WithGroups: Story = {
           {
             id: 'cat-models',
             label: 'Models',
-            icon: 'icon-[lucide--layers]'
+            icon: () => h(Layers, { size: 14 })
           },
           {
             id: 'cat-nodes',
             label: 'Nodes',
-            icon: 'icon-[lucide--grid-3x3]'
+            icon: () => h(Grid3x3, { size: 14 })
           }
         ]
       }
     ]
   },
   render: (args) => ({
-    components: { LeftSidePanel },
+    components: { LeftSidePanel, Puzzle },
     setup() {
       const selectedItem = ref(args.modelValue)
       return { args, selectedItem }
@@ -128,7 +139,7 @@ export const WithGroups: Story = {
       <div style="height: 500px; width: 256px;">
         <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
           <template #header-icon>
-            <i class="icon-[lucide--puzzle] size-4 text-neutral" />
+            <Puzzle :size="16" class="text-neutral" />
           </template>
           <template #header-title>
             <span class="text-neutral text-base">Model Selector</span>
@@ -149,27 +160,27 @@ export const DefaultIcons: Story = {
       {
         id: 'home',
         label: 'Home',
-        icon: 'icon-[lucide--folder]'
+        icon: () => h(Folder, { size: 14 })
       },
       {
         id: 'documents',
         label: 'Documents',
-        icon: 'icon-[lucide--folder]'
+        icon: () => h(Folder, { size: 14 })
       },
       {
         id: 'downloads',
         label: 'Downloads',
-        icon: 'icon-[lucide--folder]'
+        icon: () => h(Folder, { size: 14 })
       },
       {
         id: 'desktop',
         label: 'Desktop',
-        icon: 'icon-[lucide--folder]'
+        icon: () => h(Folder, { size: 14 })
       }
     ]
   },
   render: (args) => ({
-    components: { LeftSidePanel },
+    components: { LeftSidePanel, Folder },
     setup() {
       const selectedItem = ref(args.modelValue)
       return { args, selectedItem }
@@ -178,7 +189,7 @@ export const DefaultIcons: Story = {
       <div style="height: 400px; width: 256px;">
         <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
           <template #header-icon>
-            <i class="icon-[lucide--folder] size-4 text-neutral" />
+            <Folder :size="16" class="text-neutral" />
           </template>
           <template #header-title>
             <span class="text-neutral text-base">Files</span>
@@ -196,12 +207,12 @@ export const LongLabels: Story = {
       {
         id: 'general',
         label: 'General Settings',
-        icon: 'icon-[lucide--wrench]'
+        icon: () => h(() => Wrench, { size: 14 })
       },
       {
         id: 'appearance',
         label: 'Appearance & Themes Configuration',
-        icon: 'icon-[lucide--wrench]'
+        icon: () => h(() => Wrench, { size: 14 })
       },
       {
         title: 'ADVANCED OPTIONS',
@@ -209,19 +220,19 @@ export const LongLabels: Story = {
           {
             id: 'performance',
             label: 'Performance & Optimization Settings',
-            icon: 'icon-[lucide--zap]'
+            icon: () => h(() => Zap, { size: 14 })
           },
           {
             id: 'experimental',
             label: 'Experimental Features (Beta)',
-            icon: 'icon-[lucide--puzzle]'
+            icon: () => h(() => Puzzle, { size: 14 })
           }
         ]
       }
     ]
   },
   render: (args) => ({
-    components: { LeftSidePanel },
+    components: { LeftSidePanel, Settings },
     setup() {
       const selectedItem = ref(args.modelValue)
       return { args, selectedItem }
@@ -230,7 +241,7 @@ export const LongLabels: Story = {
       <div style="height: 500px; width: 256px;">
         <LeftSidePanel v-model="selectedItem" :nav-items="args.navItems">
           <template #header-icon>
-            <i class="icon-[lucide--settings] size-4 text-neutral" />
+            <Settings :size="16" class="text-neutral" />
           </template>
           <template #header-title>
             <span class="text-neutral text-base">Settings</span>

src/composables/canvas/useSelectedLiteGraphItems.ts

@@ -123,14 +123,12 @@ export function useSelectedLiteGraphItems() {
     for (const i in selectedNodes) {
       selectedNodeArray.push(selectedNodes[i])
     }
-    const allNodesMatch = !selectedNodeArray.some(
-      (selectedNode) => selectedNode.mode !== mode
-    )
-    const newModeForSelectedNode = allNodesMatch ? LGraphEventMode.ALWAYS : mode
 
     // Process each selected node independently to determine its target state and apply to children
     selectedNodeArray.forEach((selectedNode) => {
       // Apply standard toggle logic to the selected node itself
+      const newModeForSelectedNode =
+        selectedNode.mode === mode ? LGraphEventMode.ALWAYS : mode
 
       selectedNode.mode = newModeForSelectedNode
 

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -3,12 +3,8 @@ import type { Ref } from 'vue'
 
 import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { createBounds } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
-import { computeUnionBounds } from '@/utils/mathUtil'
 
 /**
  * Manages the position of the selection toolbox independently.
@@ -20,7 +16,6 @@ export function useSelectionToolboxPosition(
   const canvasStore = useCanvasStore()
   const lgCanvas = canvasStore.getCanvas()
   const { getSelectableItems } = useSelectedLiteGraphItems()
-  const { shouldRenderVueNodes } = useVueFeatureFlags()
 
   // World position of selection center
   const worldPosition = ref({ x: 0, y: 0 })
@@ -39,40 +34,17 @@ export function useSelectionToolboxPosition(
     }
 
     visible.value = true
+    const bounds = createBounds(selectableItems)
 
-    // Get bounds for all selected items
-    const allBounds: ReadOnlyRect[] = []
-    for (const item of selectableItems) {
-      // Skip items without valid IDs
-      if (item.id == null) continue
-
-      if (shouldRenderVueNodes.value && typeof item.id === 'string') {
-        // Use layout store for Vue nodes (only works with string IDs)
-        const layout = layoutStore.getNodeLayoutRef(item.id).value
-        if (layout) {
-          allBounds.push([
-            layout.bounds.x,
-            layout.bounds.y,
-            layout.bounds.width,
-            layout.bounds.height
-          ])
-        }
-      } else {
-        // Fallback to LiteGraph bounds for regular nodes or non-string IDs
-        if (item instanceof LGraphNode) {
-          const bounds = item.getBounding()
-          allBounds.push([bounds[0], bounds[1], bounds[2], bounds[3]] as const)
-        }
-      }
+    if (!bounds) {
+      return
     }
 
-    // Compute union bounds
-    const unionBounds = computeUnionBounds(allBounds)
-    if (!unionBounds) return
+    const [xBase, y, width] = bounds
 
     worldPosition.value = {
-      x: unionBounds.x + unionBounds.width / 2,
-      y: unionBounds.y - 10
+      x: xBase + width / 2,
+      y: y
     }
 
     updateTransform()

src/composables/graph/useCanvasInteractions.ts

@@ -24,12 +24,14 @@ export function useCanvasInteractions() {
   const handleWheel = (event: WheelEvent) => {
     // In standard mode, Ctrl+wheel should go to canvas for zoom
     if (isStandardNavMode.value && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault() // Prevent browser zoom
       forwardEventToCanvas(event)
       return
     }
 
     // In legacy mode, all wheel events go to canvas for zoom
     if (!isStandardNavMode.value) {
+      event.preventDefault()
       forwardEventToCanvas(event)
       return
     }
@@ -66,30 +68,9 @@ export function useCanvasInteractions() {
   ) => {
     const canvasEl = app.canvas?.canvas
     if (!canvasEl) return
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (event instanceof WheelEvent) {
-      const { clientX, clientY, deltaX, deltaY, ctrlKey, metaKey, shiftKey } =
-        event
-      canvasEl.dispatchEvent(
-        new WheelEvent('wheel', {
-          clientX,
-          clientY,
-          deltaX,
-          deltaY,
-          ctrlKey,
-          metaKey,
-          shiftKey
-        })
-      )
-      return
-    }
 
     // Create new event with same properties
-    const EventConstructor = event.constructor as
-      | typeof MouseEvent
-      | typeof PointerEvent
+    const EventConstructor = event.constructor as typeof WheelEvent
     const newEvent = new EventConstructor(event.type, event)
     canvasEl.dispatchEvent(newEvent)
   }

src/composables/node/useNodePricing.ts

@@ -1511,32 +1511,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return 'Token-based'
       }
     },
-    ByteDanceSeedreamNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const sequentialGenerationWidget = node.widgets?.find(
-          (w) => w.name === 'sequential_image_generation'
-        ) as IComboWidget
-        const maxImagesWidget = node.widgets?.find(
-          (w) => w.name === 'max_images'
-        ) as IComboWidget
-
-        if (!sequentialGenerationWidget || !maxImagesWidget)
-          return '$0.03/Run ($0.03 for one output image)'
-
-        if (
-          String(sequentialGenerationWidget.value).toLowerCase() === 'disabled'
-        ) {
-          return '$0.03/Run'
-        }
-
-        const maxImages = Number(maxImagesWidget.value)
-        if (maxImages === 1) {
-          return '$0.03/Run'
-        }
-        const cost = (0.03 * maxImages).toFixed(2)
-        return `$${cost}/Run ($0.03 for one output image)`
-      }
-    },
     ByteDanceTextToVideoNode: {
       displayPrice: byteDanceVideoPricingCalculator
     },
@@ -1639,11 +1613,6 @@ export const useNodePricing = () => {
       // ByteDance
       ByteDanceImageNode: ['model'],
       ByteDanceImageEditNode: ['model'],
-      ByteDanceSeedreamNode: [
-        'model',
-        'sequential_image_generation',
-        'max_images'
-      ],
       ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],

src/composables/nodePack/useUpdateAvailableNodes.ts

@@ -44,24 +44,9 @@ export const useUpdateAvailableNodes = () => {
     return filterOutdatedPacks(installedPacks.value)
   })
 
-  // Filter only enabled outdated packs
-  const enabledUpdateAvailableNodePacks = computed(() => {
-    return updateAvailableNodePacks.value.filter((pack) =>
-      comfyManagerStore.isPackEnabled(pack.id)
-    )
-  })
-
-  // Check if there are any enabled outdated packs
+  // Check if there are any outdated packs
   const hasUpdateAvailable = computed(() => {
-    return enabledUpdateAvailableNodePacks.value.length > 0
-  })
-
-  // Check if there are disabled packs with updates
-  const hasDisabledUpdatePacks = computed(() => {
-    return (
-      updateAvailableNodePacks.value.length >
-      enabledUpdateAvailableNodePacks.value.length
-    )
+    return updateAvailableNodePacks.value.length > 0
   })
 
   // Automatically fetch installed pack data when composable is used
@@ -73,9 +58,7 @@ export const useUpdateAvailableNodes = () => {
 
   return {
     updateAvailableNodePacks,
-    enabledUpdateAvailableNodePacks,
     hasUpdateAvailable,
-    hasDisabledUpdatePacks,
     isLoading,
     error
   }

src/constants/coreSettings.ts

@@ -977,7 +977,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Assets.UseAssetAPI',
     name: 'Use Asset API for model library',
     type: 'boolean',
-    tooltip: 'Use new Asset API for model browsing',
+    tooltip:
+      'Use new asset API instead of experiment endpoints for model browsing',
     defaultValue: false,
     experimental: true
   }

src/locales/en/main.json

@@ -193,8 +193,6 @@
     "updateSelected": "Update Selected",
     "updateAll": "Update All",
     "updatingAllPacks": "Updating all packages",
-    "disabledNodesWontUpdate": "Disabled nodes will not be updated",
-    "enablePackToChangeVersion": "Enable this pack to change versions",
     "license": "License",
     "nightlyVersion": "Nightly",
     "latestVersion": "Latest",
@@ -213,7 +211,6 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All Missing Nodes",
-    "allMissingNodesInstalled": "All missing nodes have been successfully installed",
     "packsSelected": "packs selected",
     "mixedSelectionMessage": "Cannot perform bulk action on mixed selection",
     "notAvailable": "Not Available",
@@ -1473,8 +1470,6 @@
     "missingModelsMessage": "When loading the graph, the following models were not found"
   },
   "loadWorkflowWarning": {
-    "missingNodesTitle": "Some Nodes Are Missing",
-    "missingNodesDescription": "When loading the graph, the following node types were not found.\nThis may also happen if your installed version is lower and that node type can’t be found.",
     "outdatedVersion": "Some nodes require a newer version of ComfyUI (current: {version}). Please update to use all nodes.",
     "outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
     "coreNodesFromVersion": "Requires ComfyUI {version}:"
@@ -1762,9 +1757,6 @@
     "copiedTooltip": "Copied",
     "copyTooltip": "Copy message to clipboard"
   },
-  "widgets": {
-    "selectModel": "Select model"
-  },
   "nodeHelpPage": {
     "inputs": "Inputs",
     "outputs": "Outputs",

src/renderer/core/layout/store/layoutStore.ts

@@ -19,7 +19,6 @@ import type {
   LayoutOperation,
   MoveNodeOperation,
   MoveRerouteOperation,
-  NodeBoundsUpdate,
   ResizeNodeOperation,
   SetNodeZIndexOperation
 } from '@/renderer/core/layout/types'
@@ -1426,31 +1425,6 @@ class LayoutStoreImpl implements LayoutStore {
   getStateAsUpdate(): Uint8Array {
     return Y.encodeStateAsUpdate(this.ydoc)
   }
-
-  /**
-   * Batch update node bounds using Yjs transaction for atomicity.
-   */
-  batchUpdateNodeBounds(updates: NodeBoundsUpdate[]): void {
-    if (updates.length === 0) return
-
-    // Set source to Vue for these DOM-driven updates
-    const originalSource = this.currentSource
-    this.currentSource = LayoutSource.Vue
-
-    this.ydoc.transact(() => {
-      for (const { nodeId, bounds } of updates) {
-        const ynode = this.ynodes.get(nodeId)
-        if (!ynode) continue
-
-        this.spatialIndex.update(nodeId, bounds)
-        ynode.set('bounds', bounds)
-        ynode.set('size', { width: bounds.width, height: bounds.height })
-      }
-    }, this.currentActor)
-
-    // Restore original source
-    this.currentSource = originalSource
-  }
 }
 
 // Create singleton instance

src/renderer/core/layout/types.ts

@@ -31,11 +31,6 @@ export interface Bounds {
   height: number
 }
 
-export interface NodeBoundsUpdate {
-  nodeId: NodeId
-  bounds: Bounds
-}
-
 export type NodeId = string
 export type LinkId = number
 export type RerouteId = number
@@ -325,9 +320,4 @@ export interface LayoutStore {
   setActor(actor: string): void
   getCurrentSource(): LayoutSource
   getCurrentActor(): string
-
-  // Batch updates
-  batchUpdateNodeBounds(
-    updates: Array<{ nodeId: NodeId; bounds: Bounds }>
-  ): void
 }

src/renderer/extensions/vueNodes/components/InputOutputSlot.spec.ts

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import { useDomSlotRegistration } from '@/renderer/core/layout/slots/useDomSlotRegistration'
+
+import InputSlot from './InputSlot.vue'
+import OutputSlot from './OutputSlot.vue'
+
+// Mock composable used by InputSlot/OutputSlot so we can assert call params
+vi.mock('@/renderer/core/layout/slots/useDomSlotRegistration', () => ({
+  useDomSlotRegistration: vi.fn(() => ({ remeasure: vi.fn() }))
+}))
+
+const mountWithProviders = (component: any, props: Record<string, unknown>) =>
+  mount(component, {
+    global: {
+      plugins: [
+        createI18n({
+          legacy: false,
+          locale: 'en',
+          messages: { en: enMessages }
+        }),
+        createPinia()
+      ]
+    },
+    props
+  })
+
+describe('InputSlot/OutputSlot', () => {
+  it('InputSlot registers with correct options', () => {
+    vi.mocked(useDomSlotRegistration).mockClear()
+
+    mountWithProviders(InputSlot, {
+      nodeId: 'node-1',
+      index: 3,
+      slotData: { name: 'A', type: 'any', boundingRect: [0, 0, 0, 0] }
+    })
+
+    const call = vi.mocked(useDomSlotRegistration).mock.calls.at(-1)![0]
+    expect(call).toMatchObject({
+      nodeId: 'node-1',
+      slotIndex: 3,
+      isInput: true
+    })
+  })
+
+  it('OutputSlot registers with correct options', () => {
+    vi.mocked(useDomSlotRegistration).mockClear()
+
+    mountWithProviders(OutputSlot, {
+      nodeId: 'node-2',
+      index: 1,
+      slotData: { name: 'B', type: 'any', boundingRect: [0, 0, 0, 0] }
+    })
+
+    const call = vi.mocked(useDomSlotRegistration).mock.calls.at(-1)![0]
+    expect(call).toMatchObject({
+      nodeId: 'node-2',
+      slotIndex: 1,
+      isInput: false
+    })
+  })
+})

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

@@ -7,16 +7,16 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-white dark-theme:bg-charcoal-100',
+        'bg-white dark-theme:bg-[#15161A]',
         'min-w-[445px]',
         'lg-node absolute border border-solid rounded-2xl',
-        'outline-transparent outline-2',
+        'outline outline-transparent outline-2',
         {
           'outline-black dark-theme:outline-white': isSelected
         },
         {
           'border-blue-500 ring-2 ring-blue-300': isSelected,
-          'border-sand-100 dark-theme:border-charcoal-300': !isSelected,
+          'border-[#e1ded5] dark-theme:border-[#292A30]': !isSelected,
           'animate-pulse': executing,
           'opacity-50': nodeData.mode === 4,
           'border-red-500 bg-red-50': error,
@@ -113,6 +113,7 @@
 <script setup lang="ts">
 import { computed, inject, onErrorCaptured, ref, toRef, watch } from 'vue'
 
+// Import the VueNodeData type
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -121,7 +122,6 @@ import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayo
 import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useVueElementTracking } from '../composables/useVueNodeResizeTracking'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
@@ -154,8 +154,6 @@ const emit = defineEmits<{
   'update:title': [nodeId: string, newTitle: string]
 }>()
 
-useVueElementTracking(props.nodeData.id, 'node')
-
 // Inject selection state from parent
 const selectedNodeIds = inject(SelectedNodeIdsKey)
 if (!selectedNodeIds) {
@@ -228,8 +226,7 @@ const hasCustomContent = computed(() => {
 })
 
 // Computed classes and conditions for better reusability
-const separatorClasses =
-  'bg-sand-primary dark-theme:bg-charcoal-tertiary h-[1px] mx-0'
+const separatorClasses = 'bg-[#e1ded5] dark-theme:bg-[#292A30] h-[1px] mx-0'
 
 // Common condition computations to avoid repetition
 const shouldShowWidgets = computed(

src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts

@@ -180,16 +180,12 @@ describe('NodeSlots.vue', () => {
     const all = [
       ...wrapper
         .findAll('.stub-input-slot')
-        .filter((w) => w.element instanceof HTMLElement)
         .map((w) => w.element as HTMLElement),
       ...wrapper
         .findAll('.stub-output-slot')
-        .filter((w) => w.element instanceof HTMLElement)
         .map((w) => w.element as HTMLElement)
     ]
     expect(all.length).toBe(2)
-    for (const el of all) {
-      expect.soft(el.dataset.readonly).toBe('true')
-    }
+    all.forEach((el) => expect(el.dataset.readonly).toBe('true'))
   })
 })

src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

@@ -1,155 +0,0 @@
-/**
- * Generic Vue Element Tracking System
- *
- * Automatically tracks DOM size and position changes for Vue-rendered elements
- * and syncs them to the layout store. Uses a single shared ResizeObserver for
- * performance, with elements identified by configurable data attributes.
- *
- * Supports different element types (nodes, slots, widgets, etc.) with
- * customizable data attributes and update handlers.
- */
-import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
-
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import type { Bounds, NodeId } from '@/renderer/core/layout/types'
-
-/**
- * Generic update item for element bounds tracking
- */
-interface ElementBoundsUpdate {
-  /** Element identifier (could be nodeId, widgetId, slotId, etc.) */
-  id: string
-  /** Updated bounds */
-  bounds: Bounds
-}
-
-/**
- * Configuration for different types of tracked elements
- */
-interface ElementTrackingConfig {
-  /** Data attribute name (e.g., 'nodeId') */
-  dataAttribute: string
-  /** Handler for processing bounds updates */
-  updateHandler: (updates: ElementBoundsUpdate[]) => void
-}
-
-/**
- * Registry of tracking configurations by element type
- */
-const trackingConfigs: Map<string, ElementTrackingConfig> = new Map([
-  [
-    'node',
-    {
-      dataAttribute: 'nodeId',
-      updateHandler: (updates) => {
-        const nodeUpdates = updates.map(({ id, bounds }) => ({
-          nodeId: id as NodeId,
-          bounds
-        }))
-        layoutStore.batchUpdateNodeBounds(nodeUpdates)
-      }
-    }
-  ]
-])
-
-// Single ResizeObserver instance for all Vue elements
-const resizeObserver = new ResizeObserver((entries) => {
-  // Group updates by element type
-  const updatesByType = new Map<string, ElementBoundsUpdate[]>()
-
-  for (const entry of entries) {
-    if (!(entry.target instanceof HTMLElement)) continue
-    const element = entry.target
-
-    // Find which type this element belongs to
-    let elementType: string | undefined
-    let elementId: string | undefined
-
-    for (const [type, config] of trackingConfigs) {
-      const id = element.dataset[config.dataAttribute]
-      if (id) {
-        elementType = type
-        elementId = id
-        break
-      }
-    }
-
-    if (!elementType || !elementId) continue
-
-    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0]
-    const rect = element.getBoundingClientRect()
-
-    const bounds: Bounds = {
-      x: rect.left,
-      y: rect.top,
-      width,
-      height: height
-    }
-
-    if (!updatesByType.has(elementType)) {
-      updatesByType.set(elementType, [])
-    }
-    const updates = updatesByType.get(elementType)
-    if (updates) {
-      updates.push({ id: elementId, bounds })
-    }
-  }
-
-  // Process updates by type
-  for (const [type, updates] of updatesByType) {
-    const config = trackingConfigs.get(type)
-    if (config && updates.length > 0) {
-      config.updateHandler(updates)
-    }
-  }
-})
-
-/**
- * Tracks DOM element size/position changes for a Vue component and syncs to layout store
- *
- * Sets up automatic ResizeObserver tracking when the component mounts and cleans up
- * when unmounted. The tracked element is identified by a data attribute set on the
- * component's root DOM element.
- *
- * @param appIdentifier - Application-level identifier for this tracked element (not a DOM ID)
- *                       Example: node ID like 'node-123', widget ID like 'widget-456'
- * @param trackingType - Type of element being tracked, determines which tracking config to use
- *                      Example: 'node' for Vue nodes, 'widget' for UI widgets
- *
- * @example
- * ```ts
- * // Track a Vue node component with ID 'my-node-123'
- * useVueElementTracking('my-node-123', 'node')
- *
- * // Would set data-node-id="my-node-123" on the component's root element
- * // and sync size changes to layoutStore.batchUpdateNodeBounds()
- * ```
- */
-export function useVueElementTracking(
-  appIdentifier: string,
-  trackingType: string
-) {
-  onMounted(() => {
-    const element = getCurrentInstance()?.proxy?.$el
-    if (!(element instanceof HTMLElement) || !appIdentifier) return
-
-    const config = trackingConfigs.get(trackingType)
-    if (config) {
-      // Set the appropriate data attribute
-      element.dataset[config.dataAttribute] = appIdentifier
-      resizeObserver.observe(element)
-    }
-  })
-
-  onUnmounted(() => {
-    const element = getCurrentInstance()?.proxy?.$el
-    if (!(element instanceof HTMLElement)) return
-
-    const config = trackingConfigs.get(trackingType)
-    if (config) {
-      // Remove the data attribute
-      delete element.dataset[config.dataAttribute]
-      resizeObserver.unobserve(element)
-    }
-  })
-}

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

@@ -18,7 +18,7 @@
       :disabled="readonly"
       class="w-full text-xs"
       size="small"
-      :rows="6"
+      rows="6"
       :pt="{
         root: {
           onBlur: handleBlur

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -1,12 +1,8 @@
 import { ref } from 'vue'
 
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type {
-  IBaseWidget,
-  IComboWidget
-} from '@/lib/litegraph/src/types/widgets'
+import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   ComboInputSpec,
@@ -22,8 +18,6 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidgets
 } from '@/scripts/widgets'
-import { assetService } from '@/services/assetService'
-import { useSettingStore } from '@/stores/settingStore'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -34,10 +28,7 @@ const getDefaultValue = (inputSpec: ComboInputSpec) => {
   return undefined
 }
 
-const addMultiSelectWidget = (
-  node: LGraphNode,
-  inputSpec: ComboInputSpec
-): IBaseWidget => {
+const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   const widgetValue = ref<string[]>([])
   const widget = new ComponentWidgetImpl({
     node,
@@ -57,36 +48,7 @@ const addMultiSelectWidget = (
   return widget
 }
 
-const addComboWidget = (
-  node: LGraphNode,
-  inputSpec: ComboInputSpec
-): IBaseWidget => {
-  const settingStore = useSettingStore()
-  const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
-  const isEligible = assetService.isAssetBrowserEligible(
-    inputSpec.name,
-    node.comfyClass || ''
-  )
-
-  if (isUsingAssetAPI && isEligible) {
-    // Create button widget for Asset Browser
-    const currentValue = getDefaultValue(inputSpec)
-
-    const widget = node.addWidget(
-      'button',
-      inputSpec.name,
-      t('widgets.selectModel'),
-      () => {
-        console.log(
-          `Asset Browser would open here for:\nNode: ${node.type}\nWidget: ${inputSpec.name}\nCurrent Value:${currentValue}`
-        )
-      }
-    )
-
-    return widget
-  }
-
-  // Create normal combo widget
+const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   const defaultValue = getDefaultValue(inputSpec)
   const comboOptions = inputSpec.options ?? []
   const widget = node.addWidget(
@@ -97,14 +59,14 @@ const addComboWidget = (
     {
       values: comboOptions
     }
-  )
+  ) as IComboWidget
 
   if (inputSpec.remote) {
     const remoteWidget = useRemoteWidget({
       remoteConfig: inputSpec.remote,
       defaultValue,
       node,
-      widget: widget as IComboWidget
+      widget
     })
     if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
 
@@ -122,7 +84,7 @@ const addComboWidget = (
   if (inputSpec.control_after_generate) {
     widget.linkedWidgets = addValueControlWidgets(
       node,
-      widget as IComboWidget,
+      widget,
       undefined,
       undefined,
       transformInputSpecV2ToV1(inputSpec)

src/schemas/assetSchema.ts

@@ -1,39 +0,0 @@
-import { z } from 'zod'
-
-// Zod schemas for asset API validation
-const zAsset = z.object({
-  id: z.string(),
-  name: z.string(),
-  tags: z.array(z.string()),
-  size: z.number(),
-  created_at: z.string().optional()
-})
-
-const zAssetResponse = z.object({
-  assets: z.array(zAsset).optional(),
-  total: z.number().optional(),
-  has_more: z.boolean().optional()
-})
-
-const zModelFolder = z.object({
-  name: z.string(),
-  folders: z.array(z.string())
-})
-
-// Export schemas following repository patterns
-export const assetResponseSchema = zAssetResponse
-
-// Export types derived from Zod schemas
-export type AssetResponse = z.infer<typeof zAssetResponse>
-export type ModelFolder = z.infer<typeof zModelFolder>
-
-// Common interfaces for API responses
-export interface ModelFile {
-  name: string
-  pathIndex: number
-}
-
-export interface ModelFolderInfo {
-  name: string
-  folders: string[]
-}

src/scripts/api.ts

@@ -30,7 +30,6 @@ import type {
   User,
   UserDataFullInfo
 } from '@/schemas/apiSchema'
-import type { ModelFile, ModelFolderInfo } from '@/schemas/assetSchema'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON,
@@ -676,14 +675,15 @@ export class ComfyApi extends EventTarget {
    * Gets a list of model folder keys (eg ['checkpoints', 'loras', ...])
    * @returns The list of model folder keys
    */
-  async getModelFolders(): Promise<ModelFolderInfo[]> {
+  async getModelFolders(): Promise<{ name: string; folders: string[] }[]> {
     const res = await this.fetchApi(`/experiment/models`)
     if (res.status === 404) {
       return []
     }
     const folderBlacklist = ['configs', 'custom_nodes']
     return (await res.json()).filter(
-      (folder: ModelFolderInfo) => !folderBlacklist.includes(folder.name)
+      (folder: { name: string; folders: string[] }) =>
+        !folderBlacklist.includes(folder.name)
     )
   }
 
@@ -692,7 +692,9 @@ export class ComfyApi extends EventTarget {
    * @param {string} folder The folder to list models from, such as 'checkpoints'
    * @returns The list of model filenames within the specified folder
    */
-  async getModels(folder: string): Promise<ModelFile[]> {
+  async getModels(
+    folder: string
+  ): Promise<{ name: string; pathIndex: number }[]> {
     const res = await this.fetchApi(`/experiment/models/${folder}`)
     if (res.status === 404) {
       return []

src/services/assetService.ts

@@ -1,32 +1,63 @@
-import { fromZodError } from 'zod-validation-error'
-
-import {
-  type AssetResponse,
-  type ModelFile,
-  type ModelFolder,
-  assetResponseSchema
-} from '@/schemas/assetSchema'
 import { api } from '@/scripts/api'
-import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
 const ASSETS_ENDPOINT = '/assets'
 const MODELS_TAG = 'models'
 const MISSING_TAG = 'missing'
 
-/**
- * Input names that are eligible for asset browser
- */
-const WHITELISTED_INPUTS = new Set(['ckpt_name', 'lora_name', 'vae_name'])
+// Types for asset API responses
+interface AssetResponse {
+  assets?: Asset[]
+  total?: number
+  has_more?: boolean
+}
+
+interface Asset {
+  id: string
+  name: string
+  tags: string[]
+  size: number
+  created_at?: string
+}
 
 /**
- * Validates asset response data using Zod schema
+ * Type guard for validating asset structure
  */
-function validateAssetResponse(data: unknown): AssetResponse {
-  const result = assetResponseSchema.safeParse(data)
-  if (result.success) return result.data
+function isValidAsset(asset: unknown): asset is Asset {
+  return (
+    asset !== null &&
+    typeof asset === 'object' &&
+    'id' in asset &&
+    'name' in asset &&
+    'tags' in asset &&
+    Array.isArray((asset as Asset).tags)
+  )
+}
 
-  const error = fromZodError(result.error)
-  throw new Error(`Invalid asset response against zod schema:\n${error}`)
+/**
+ * Creates predicate for filtering assets by folder and excluding missing ones
+ */
+function createAssetFolderFilter(folder?: string) {
+  return (asset: unknown): asset is Asset => {
+    if (!isValidAsset(asset) || asset.tags.includes(MISSING_TAG)) {
+      return false
+    }
+    if (folder && !asset.tags.includes(folder)) {
+      return false
+    }
+    return true
+  }
+}
+
+/**
+ * Creates predicate for filtering folder assets (requires name)
+ */
+function createFolderAssetFilter(folder: string) {
+  return (asset: unknown): asset is Asset => {
+    if (!isValidAsset(asset) || !asset.name) {
+      return false
+    }
+    return asset.tags.includes(folder) && !asset.tags.includes(MISSING_TAG)
+  }
 }
 
 /**
@@ -35,7 +66,7 @@ function validateAssetResponse(data: unknown): AssetResponse {
  */
 function createAssetService() {
   /**
-   * Handles API response with consistent error handling and Zod validation
+   * Handles API response with consistent error handling
    */
   async function handleAssetRequest(
     url: string,
@@ -47,8 +78,7 @@ function createAssetService() {
         `Unable to load ${context}: Server returned ${res.status}. Please try again.`
       )
     }
-    const data = await res.json()
-    return validateAssetResponse(data)
+    return await res.json()
   }
   /**
    * Gets a list of model folder keys from the asset API
@@ -60,7 +90,9 @@ function createAssetService() {
    *
    * @returns The list of model folder keys
    */
-  async function getAssetModelFolders(): Promise<ModelFolder[]> {
+  async function getAssetModelFolders(): Promise<
+    { name: string; folders: string[] }[]
+  > {
     const data = await handleAssetRequest(
       `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG}`,
       'model folders'
@@ -70,17 +102,22 @@ function createAssetService() {
     const blacklistedDirectories = ['configs']
 
     // Extract directory names from assets that actually exist, exclude missing assets
-    const discoveredFolders = new Set<string>(
-      data?.assets
-        ?.filter((asset) => !asset.tags.includes(MISSING_TAG))
-        ?.flatMap((asset) => asset.tags)
-        ?.filter(
+    const discoveredFolders = new Set<string>()
+    if (data?.assets) {
+      const directoryTags = data.assets
+        .filter(createAssetFolderFilter())
+        .flatMap((asset) => asset.tags)
+        .filter(
           (tag) => tag !== MODELS_TAG && !blacklistedDirectories.includes(tag)
-        ) ?? []
-    )
+        )
+
+      for (const tag of directoryTags) {
+        discoveredFolders.add(tag)
+      }
+    }
 
     // Return only discovered folders in alphabetical order
-    const sortedFolders = Array.from(discoveredFolders).toSorted()
+    const sortedFolders = Array.from(discoveredFolders).sort()
     return sortedFolders.map((name) => ({ name, folders: [] }))
   }
 
@@ -89,48 +126,25 @@ function createAssetService() {
    * @param folder The folder to list models from, such as 'checkpoints'
    * @returns The list of model filenames within the specified folder
    */
-  async function getAssetModels(folder: string): Promise<ModelFile[]> {
+  async function getAssetModels(
+    folder: string
+  ): Promise<{ name: string; pathIndex: number }[]> {
     const data = await handleAssetRequest(
       `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG},${folder}`,
       `models for ${folder}`
     )
 
-    return (
-      data?.assets
-        ?.filter(
-          (asset) =>
-            !asset.tags.includes(MISSING_TAG) && asset.tags.includes(folder)
-        )
-        ?.map((asset) => ({
+    return data?.assets
+      ? data.assets.filter(createFolderAssetFilter(folder)).map((asset) => ({
           name: asset.name,
           pathIndex: 0
-        })) ?? []
-    )
-  }
-
-  /**
-   * Checks if a widget input should use the asset browser based on both input name and node comfyClass
-   *
-   * @param inputName - The input name (e.g., 'ckpt_name', 'lora_name')
-   * @param nodeType - The ComfyUI node comfyClass (e.g., 'CheckpointLoaderSimple', 'LoraLoader')
-   * @returns true if this input should use asset browser
-   */
-  function isAssetBrowserEligible(
-    inputName: string,
-    nodeType: string
-  ): boolean {
-    return (
-      // Must be an approved input name
-      WHITELISTED_INPUTS.has(inputName) &&
-      // Must be a registered node type
-      useModelToNodeStore().getRegisteredNodeTypes().has(nodeType)
-    )
+        }))
+      : []
   }
 
   return {
     getAssetModelFolders,
-    getAssetModels,
-    isAssetBrowserEligible
+    getAssetModels
   }
 }
 

src/services/litegraphService.ts

@@ -484,18 +484,7 @@ export const useLitegraphService = () => {
         ) ?? {}
 
         if (widget) {
-          // Check if this is an Asset Browser button widget
-          const isAssetBrowserButton =
-            widget.type === 'button' && widget.value === 'Select model'
-
-          if (isAssetBrowserButton) {
-            // Preserve Asset Browser button label (don't translate)
-            widget.label = String(widget.value)
-          } else {
-            // Apply normal translation for other widgets
-            widget.label = st(nameKey, widget.label ?? inputName)
-          }
-
+          widget.label = st(nameKey, widget.label ?? inputName)
           widget.options ??= {}
           Object.assign(widget.options, {
             advanced: inputSpec.advanced,

src/stores/modelStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import type { ModelFile } from '@/schemas/assetSchema'
 import { api } from '@/scripts/api'
 import { assetService } from '@/services/assetService'
 import { useSettingStore } from '@/stores/settingStore'
@@ -158,7 +157,9 @@ export class ModelFolder {
 
   constructor(
     public directory: string,
-    private getModelsFunc: (folder: string) => Promise<ModelFile[]>
+    private getModelsFunc: (
+      folder: string
+    ) => Promise<{ name: string; pathIndex: number }[]>
   ) {}
 
   get key(): string {

src/stores/modelToNodeStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 
@@ -22,22 +22,6 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
   const modelToNodeMap = ref<Record<string, ModelNodeProvider[]>>({})
   const nodeDefStore = useNodeDefStore()
   const haveDefaultsLoaded = ref(false)
-
-  /** Internal computed for reactive caching of registered node types */
-  const registeredNodeTypes = computed(() => {
-    return new Set(
-      Object.values(modelToNodeMap.value)
-        .flat()
-        .map((provider) => provider.nodeDef.name)
-    )
-  })
-
-  /** Get set of all registered node types for efficient lookup */
-  function getRegisteredNodeTypes(): Set<string> {
-    registerDefaults()
-    return registeredNodeTypes.value
-  }
-
   /**
    * Get the node provider for the given model type name.
    * @param modelType The name of the model type to get the node provider for.
@@ -107,7 +91,6 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
 
   return {
     modelToNodeMap,
-    getRegisteredNodeTypes,
     getNodeProvider,
     getAllNodeProviders,
     registerNodeProvider,

src/types/navTypes.ts

@@ -1,7 +1,9 @@
+import { DefineComponent, FunctionalComponent } from 'vue'
+
 export interface NavItemData {
   id: string
   label: string
-  icon: string
+  icon: DefineComponent | FunctionalComponent
 }
 
 export interface NavGroupData {

src/utils/mathUtil.ts

@@ -1,6 +1,3 @@
-import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import type { Bounds } from '@/renderer/core/layout/types'
-
 /**
  * Finds the greatest common divisor (GCD) for two numbers.
  *
@@ -8,7 +5,7 @@ import type { Bounds } from '@/renderer/core/layout/types'
  * @param b - The second number.
  * @returns The GCD of the two numbers.
  */
-export const gcd = (a: number, b: number): number => {
+const gcd = (a: number, b: number): number => {
   return b === 0 ? a : gcd(b, a % b)
 }
 
@@ -22,48 +19,3 @@ export const gcd = (a: number, b: number): number => {
 export const lcm = (a: number, b: number): number => {
   return Math.abs(a * b) / gcd(a, b)
 }
-
-/**
- * Computes the union (bounding box) of multiple rectangles using a single-pass algorithm.
- *
- * Finds the minimum and maximum x/y coordinates across all rectangles to create
- * a single bounding rectangle that contains all input rectangles. Optimized for
- * performance with V8-friendly tuple access patterns.
- *
- * @param rectangles - Array of rectangle tuples in [x, y, width, height] format
- * @returns Bounds object with union rectangle, or null if no rectangles provided
- */
-export function computeUnionBounds(
-  rectangles: readonly ReadOnlyRect[]
-): Bounds | null {
-  const n = rectangles.length
-  if (n === 0) {
-    return null
-  }
-
-  const r0 = rectangles[0]
-  let minX = r0[0]
-  let minY = r0[1]
-  let maxX = minX + r0[2]
-  let maxY = minY + r0[3]
-
-  for (let i = 1; i < n; i++) {
-    const r = rectangles[i]
-    const x1 = r[0]
-    const y1 = r[1]
-    const x2 = x1 + r[2]
-    const y2 = y1 + r[3]
-
-    if (x1 < minX) minX = x1
-    if (y1 < minY) minY = y1
-    if (x2 > maxX) maxX = x2
-    if (y2 > maxY) maxY = y2
-  }
-
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  }
-}

tailwind.config.ts

@@ -1,4 +1,3 @@
-import lucide from '@iconify-json/lucide/icons.json'
 import { addDynamicIconSelectors } from '@iconify/tailwind'
 
 import { iconCollection } from './build/customIconCollection'
@@ -6,13 +5,257 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
+  theme: {
+    fontSize: {
+      xxs: '0.625rem',
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem'
+    },
+
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      '3xl': '1800px',
+      '4xl': '2500px',
+      '5xl': '3200px'
+    },
+
+    spacing: {
+      px: '1px',
+      0: '0px',
+      0.5: '0.125rem',
+      1: '0.25rem',
+      1.5: '0.375rem',
+      2: '0.5rem',
+      2.5: '0.625rem',
+      3: '0.75rem',
+      3.5: '0.875rem',
+      4: '1rem',
+      4.5: '1.125rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+      11: '2.75rem',
+      12: '3rem',
+      14: '3.5rem',
+      16: '4rem',
+      18: '4.5rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      75: '18.75rem',
+      80: '20rem',
+      84: '22rem',
+      90: '24rem',
+      96: '26rem',
+      100: '28rem',
+      110: '32rem'
+    },
+
+    extend: {
+      colors: {
+        zinc: {
+          50: '#fafafa',
+          100: '#8282821a',
+          200: '#e4e4e7',
+          300: '#d4d4d8',
+          400: '#A1A3AE',
+          500: '#71717a',
+          600: '#52525b',
+          700: '#38393b',
+          800: '#262729',
+          900: '#18181b',
+          950: '#09090b'
+        },
+
+        gray: {
+          50: '#f8fbfc',
+          100: '#f3f6fa',
+          200: '#edf2f7',
+          300: '#e2e8f0',
+          400: '#cbd5e0',
+          500: '#a0aec0',
+          600: '#718096',
+          700: '#4a5568',
+          800: '#2d3748',
+          900: '#1a202c',
+          950: '#0a1016'
+        },
+
+        teal: {
+          50: '#f0fdfa',
+          100: '#e0fcff',
+          200: '#bef8fd',
+          300: '#87eaf2',
+          400: '#54d1db',
+          500: '#38bec9',
+          600: '#2cb1bc',
+          700: '#14919b',
+          800: '#0e7c86',
+          900: '#005860',
+          950: '#022c28'
+        },
+
+        blue: {
+          50: '#eff6ff',
+          100: '#ebf8ff',
+          200: '#bee3f8',
+          300: '#90cdf4',
+          400: '#63b3ed',
+          500: '#4299e1',
+          600: '#3182ce',
+          700: '#2b6cb0',
+          800: '#2c5282',
+          900: '#2a4365',
+          950: '#172554'
+        },
+
+        green: {
+          50: '#fcfff5',
+          100: '#fafff3',
+          200: '#eaf9c9',
+          300: '#d1efa0',
+          400: '#b2e16e',
+          500: '#96ce4c',
+          600: '#7bb53d',
+          700: '#649934',
+          800: '#507b2e',
+          900: '#456829',
+          950: '#355819'
+        },
+
+        fuchsia: {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          200: '#f5d0fe',
+          300: '#f0abfc',
+          400: '#e879f9',
+          500: '#d946ef',
+          600: '#c026d3',
+          700: '#a21caf',
+          800: '#86198f',
+          900: '#701a75',
+          950: '#4a044e'
+        },
+
+        orange: {
+          50: '#fff7ed',
+          100: '#ffedd5',
+          200: '#fedbb8',
+          300: '#fbd38d',
+          400: '#f6ad55',
+          500: '#ed8936',
+          600: '#dd6b20',
+          700: '#c05621',
+          800: '#9c4221',
+          900: '#7b341e',
+          950: '#431407'
+        },
+
+        yellow: {
+          50: '#fffef5',
+          100: '#fffce8',
+          200: '#fff8c5',
+          300: '#fff197',
+          400: '#ffcc00',
+          500: '#ffc000',
+          600: '#e6a800',
+          700: '#cc9600',
+          800: '#b38400',
+          900: '#997200',
+          950: '#664d00'
+        }
+      },
+
+      textColor: {
+        muted: 'var(--p-text-muted-color)',
+        highlight: 'var(--p-primary-color)'
+      },
+
+      /**
+       * Box shadows for different elevation levels
+       * https://m3.material.io/styles/elevation/overview
+       */
+      boxShadow: {
+        'elevation-0': 'none',
+        'elevation-1':
+          '0 0 2px 0px rgb(0 0 0 / 0.01), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
+        'elevation-1.5':
+          '0 0 2px 0px rgb(0 0 0 / 0.025), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
+        'elevation-2':
+          '0 0 10px 0px rgb(0 0 0 / 0.06), 0 6px 8px -2px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
+        'elevation-3':
+          '0 0 15px 0px rgb(0 0 0 / 0.10), 0 8px 12px -3px rgb(0 0 0 / 0.09), 0 3px 5px -4px rgb(0 0 0 / 0.06)',
+        'elevation-4':
+          '0 0 18px 0px rgb(0 0 0 / 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.11), 0 4px 6px -4px rgb(0 0 0 / 0.08)',
+        'elevation-5':
+          '0 0 20px 0px rgb(0 0 0 / 0.14), 0 12px 16px -4px rgb(0 0 0 / 0.13), 0 5px 7px -5px rgb(0 0 0 / 0.10)'
+      },
+
+      /**
+       * Background colors for different elevation levels
+       * https://m3.material.io/styles/elevation/overview
+       */
+      backgroundColor: {
+        'dark-elevation-0': 'rgba(255, 255, 255, 0)',
+        'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
+        'dark-elevation-1.5': 'rgba(255, 255, 255, 0.015)',
+        'dark-elevation-2': 'rgba(255, 255, 255, 0.03)',
+        'dark-elevation-3': 'rgba(255, 255, 255, 0.04)',
+        'dark-elevation-4': 'rgba(255, 255, 255, 0.08)',
+        'dark-elevation-5': 'rgba(2 55, 255, 255, 0.12)'
+      }
+    }
+  },
+
   plugins: [
     addDynamicIconSelectors({
       iconSets: {
-        comfy: iconCollection,
-        lucide
-      },
-      prefix: 'icon'
-    })
+        comfy: iconCollection
+      }
+    }),
+    function ({ addVariant }) {
+      addVariant('dark-theme', '.dark-theme &')
+    },
+    function ({ addUtilities }) {
+      const newUtilities = {
+        '.scrollbar-hide': {
+          /* Firefox */
+          'scrollbar-width': 'none',
+          /* Webkit-based browsers */
+          '&::-webkit-scrollbar': {
+            width: '1px'
+          },
+          '&::-webkit-scrollbar-thumb': {
+            'background-color': 'transparent'
+          }
+        }
+      }
+      addUtilities(newUtilities)
+    }
   ]
 }

tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -237,9 +237,9 @@ describe('useSelectedLiteGraphItems', () => {
       toggleSelectedNodesMode(LGraphEventMode.NEVER)
 
       // node1 should change from ALWAYS to NEVER
-      // node2 should stay NEVER (since a selected node exists which is not NEVER)
+      // node2 should change from NEVER to ALWAYS (since it was already NEVER)
       expect(node1.mode).toBe(LGraphEventMode.NEVER)
-      expect(node2.mode).toBe(LGraphEventMode.NEVER)
+      expect(node2.mode).toBe(LGraphEventMode.ALWAYS)
     })
 
     it('toggleSelectedNodesMode should set mode to ALWAYS when already in target mode', () => {

tests-ui/tests/composables/graph/useCanvasInteractions.test.ts

@@ -1,19 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 // Mock stores
-vi.mock('@/stores/graphStore', () => {
-  const getCanvas = vi.fn()
-  return { useCanvasStore: vi.fn(() => ({ getCanvas })) }
-})
-vi.mock('@/stores/settingStore', () => {
-  const getFn = vi.fn()
-  return { useSettingStore: vi.fn(() => ({ get: getFn })) }
-})
+vi.mock('@/stores/graphStore')
+vi.mock('@/stores/settingStore')
 vi.mock('@/scripts/app', () => ({
   app: {
     canvas: {
@@ -24,86 +17,105 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
-function createMockLGraphCanvas(read_only = true): LGraphCanvas {
-  const mockCanvas: Partial<LGraphCanvas> = { read_only }
-  return mockCanvas as LGraphCanvas
-}
-
-function createMockPointerEvent(
-  buttons: PointerEvent['buttons'] = 1
-): PointerEvent {
-  const mockEvent: Partial<PointerEvent> = {
-    buttons,
-    preventDefault: vi.fn(),
-    stopPropagation: vi.fn()
-  }
-  return mockEvent as PointerEvent
-}
-
-function createMockWheelEvent(ctrlKey = false, metaKey = false): WheelEvent {
-  const mockEvent: Partial<WheelEvent> = {
-    ctrlKey,
-    metaKey,
-    preventDefault: vi.fn(),
-    stopPropagation: vi.fn()
-  }
-  return mockEvent as WheelEvent
-}
-
 describe('useCanvasInteractions', () => {
   beforeEach(() => {
-    vi.resetAllMocks()
+    vi.clearAllMocks()
+    vi.mocked(useCanvasStore, { partial: true }).mockReturnValue({
+      getCanvas: vi.fn()
+    })
+    vi.mocked(useSettingStore, { partial: true }).mockReturnValue({
+      get: vi.fn()
+    })
   })
 
   describe('handlePointer', () => {
-    it('should intercept left mouse events when canvas is read_only to enable space+drag navigation', () => {
+    it('should forward space+drag events to canvas when read_only is true', () => {
+      // Setup
+      const mockCanvas = { read_only: true }
       const { getCanvas } = useCanvasStore()
-      const mockCanvas = createMockLGraphCanvas(true)
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
 
       const { handlePointer } = useCanvasInteractions()
 
-      const mockEvent = createMockPointerEvent(1) // Left Mouse Button
-      handlePointer(mockEvent)
+      // Create mock pointer event
+      const mockEvent = {
+        buttons: 1, // Left mouse button
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn()
+      } satisfies Partial<PointerEvent>
 
+      // Test
+      handlePointer(mockEvent as unknown as PointerEvent)
+
+      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
       expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should forward middle mouse button events to canvas', () => {
+      // Setup
+      const mockCanvas = { read_only: false }
       const { getCanvas } = useCanvasStore()
-      const mockCanvas = createMockLGraphCanvas(false)
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
+
       const { handlePointer } = useCanvasInteractions()
 
-      const mockEvent = createMockPointerEvent(4) // Middle mouse button
-      handlePointer(mockEvent)
+      // Create mock pointer event with middle button
+      const mockEvent = {
+        buttons: 4, // Middle mouse button
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn()
+      } satisfies Partial<PointerEvent>
 
+      // Test
+      handlePointer(mockEvent as unknown as PointerEvent)
+
+      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
       expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should not prevent default when canvas is not in read_only mode and not middle button', () => {
+      // Setup
+      const mockCanvas = { read_only: false }
       const { getCanvas } = useCanvasStore()
-      const mockCanvas = createMockLGraphCanvas(false)
-      vi.mocked(getCanvas).mockReturnValue(mockCanvas)
+      vi.mocked(getCanvas).mockReturnValue(mockCanvas as any)
+
       const { handlePointer } = useCanvasInteractions()
 
-      const mockEvent = createMockPointerEvent(1)
-      handlePointer(mockEvent)
+      // Create mock pointer event
+      const mockEvent = {
+        buttons: 1, // Left mouse button
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn()
+      } satisfies Partial<PointerEvent>
 
+      // Test
+      handlePointer(mockEvent as unknown as PointerEvent)
+
+      // Verify - should not prevent default (let media handle normally)
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
       expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
     })
 
     it('should return early when canvas is null', () => {
+      // Setup
       const { getCanvas } = useCanvasStore()
-      vi.mocked(getCanvas).mockReturnValue(null as unknown as LGraphCanvas) // TODO: Fix misaligned types
+      vi.mocked(getCanvas).mockReturnValue(null as any)
+
       const { handlePointer } = useCanvasInteractions()
 
-      const mockEvent = createMockPointerEvent(1)
-      handlePointer(mockEvent)
+      // Create mock pointer event that would normally trigger forwarding
+      const mockEvent = {
+        buttons: 1, // Left mouse button - would trigger space+drag if canvas had read_only=true
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn()
+      } satisfies Partial<PointerEvent>
 
+      // Test
+      handlePointer(mockEvent as unknown as PointerEvent)
+
+      // Verify early return - no event methods should be called at all
       expect(getCanvas).toHaveBeenCalled()
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
       expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
@@ -112,42 +124,66 @@ describe('useCanvasInteractions', () => {
 
   describe('handleWheel', () => {
     it('should forward ctrl+wheel events to canvas in standard nav mode', () => {
+      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('standard')
 
       const { handleWheel } = useCanvasInteractions()
 
-      // Ctrl key pressed
-      const mockEvent = createMockWheelEvent(true)
+      // Create mock wheel event with ctrl key
+      const mockEvent = {
+        ctrlKey: true,
+        metaKey: false,
+        preventDefault: vi.fn()
+      } satisfies Partial<WheelEvent>
 
-      handleWheel(mockEvent)
+      // Test
+      handleWheel(mockEvent as unknown as WheelEvent)
 
+      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
-      expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should forward all wheel events to canvas in legacy nav mode', () => {
+      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('legacy')
+
       const { handleWheel } = useCanvasInteractions()
 
-      const mockEvent = createMockWheelEvent()
-      handleWheel(mockEvent)
+      // Create mock wheel event without modifiers
+      const mockEvent = {
+        ctrlKey: false,
+        metaKey: false,
+        preventDefault: vi.fn()
+      } satisfies Partial<WheelEvent>
 
+      // Test
+      handleWheel(mockEvent as unknown as WheelEvent)
+
+      // Verify
       expect(mockEvent.preventDefault).toHaveBeenCalled()
-      expect(mockEvent.stopPropagation).toHaveBeenCalled()
     })
 
     it('should not prevent default for regular wheel events in standard nav mode', () => {
+      // Setup
       const { get } = useSettingStore()
       vi.mocked(get).mockReturnValue('standard')
+
       const { handleWheel } = useCanvasInteractions()
 
-      const mockEvent = createMockWheelEvent()
-      handleWheel(mockEvent)
+      // Create mock wheel event without modifiers
+      const mockEvent = {
+        ctrlKey: false,
+        metaKey: false,
+        preventDefault: vi.fn()
+      } satisfies Partial<WheelEvent>
 
+      // Test
+      handleWheel(mockEvent as unknown as WheelEvent)
+
+      // Verify - should not prevent default (let component handle normally)
       expect(mockEvent.preventDefault).not.toHaveBeenCalled()
-      expect(mockEvent.stopPropagation).not.toHaveBeenCalled()
     })
   })
 })

tests-ui/tests/composables/node/useNodePricing.test.ts

@@ -1781,38 +1781,6 @@ describe('useNodePricing', () => {
     })
   })
 
-  describe('dynamic pricing - ByteDanceSeedreamNode', () => {
-    it('should return fallback when widgets are missing', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceSeedreamNode', [])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.03/Run ($0.03 for one output image)')
-    })
-
-    it('should return $0.03/Run when sequential generation is disabled', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceSeedreamNode', [
-        { name: 'sequential_image_generation', value: 'disabled' },
-        { name: 'max_images', value: 5 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.03/Run')
-    })
-
-    it('should multiply by max_images when sequential generation is enabled', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('ByteDanceSeedreamNode', [
-        { name: 'sequential_image_generation', value: 'enabled' },
-        { name: 'max_images', value: 4 }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.12/Run ($0.03 for one output image)')
-    })
-  })
-
   describe('dynamic pricing - ByteDance Seedance video nodes', () => {
     it('should return base 10s range for PRO 1080p on ByteDanceTextToVideoNode', () => {
       const { getNodeDisplayPrice } = useNodePricing()

tests-ui/tests/composables/useUpdateAvailableNodes.test.ts

@@ -63,14 +63,12 @@ describe('useUpdateAvailableNodes', () => {
   const mockStartFetchInstalled = vi.fn()
   const mockIsPackInstalled = vi.fn()
   const mockGetInstalledPackVersion = vi.fn()
-  const mockIsPackEnabled = vi.fn()
 
   beforeEach(() => {
     vi.clearAllMocks()
 
     // Default setup
     mockIsPackInstalled.mockReturnValue(true)
-    mockIsPackEnabled.mockReturnValue(true) // Default: all packs are enabled
     mockGetInstalledPackVersion.mockImplementation((id: string) => {
       switch (id) {
         case 'pack-1':
@@ -102,8 +100,7 @@ describe('useUpdateAvailableNodes', () => {
 
     mockUseComfyManagerStore.mockReturnValue({
       isPackInstalled: mockIsPackInstalled,
-      getInstalledPackVersion: mockGetInstalledPackVersion,
-      isPackEnabled: mockIsPackEnabled
+      getInstalledPackVersion: mockGetInstalledPackVersion
     } as any)
 
     mockUseInstalledPacks.mockReturnValue({
@@ -360,127 +357,4 @@ describe('useUpdateAvailableNodes', () => {
       expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-4')
     })
   })
-
-  describe('enabledUpdateAvailableNodePacks', () => {
-    it('returns only enabled packs with updates', () => {
-      mockIsPackEnabled.mockImplementation((id: string) => {
-        // pack-1 is disabled
-        return id !== 'pack-1'
-      })
-
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0], mockInstalledPacks[1]]),
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
-        useUpdateAvailableNodes()
-
-      // pack-1 has updates but is disabled
-      expect(updateAvailableNodePacks.value).toHaveLength(1)
-      expect(updateAvailableNodePacks.value[0].id).toBe('pack-1')
-
-      // enabledUpdateAvailableNodePacks should be empty
-      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(0)
-    })
-
-    it('returns all packs when all are enabled', () => {
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
-        useUpdateAvailableNodes()
-
-      expect(updateAvailableNodePacks.value).toHaveLength(1)
-      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(1)
-      expect(enabledUpdateAvailableNodePacks.value[0].id).toBe('pack-1')
-    })
-  })
-
-  describe('hasDisabledUpdatePacks', () => {
-    it('returns true when there are disabled packs with updates', () => {
-      mockIsPackEnabled.mockImplementation((id: string) => {
-        // pack-1 is disabled
-        return id !== 'pack-1'
-      })
-
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
-
-      expect(hasDisabledUpdatePacks.value).toBe(true)
-    })
-
-    it('returns false when all packs with updates are enabled', () => {
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
-
-      expect(hasDisabledUpdatePacks.value).toBe(false)
-    })
-
-    it('returns false when no packs have updates', () => {
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
-
-      expect(hasDisabledUpdatePacks.value).toBe(false)
-    })
-  })
-
-  describe('hasUpdateAvailable with disabled packs', () => {
-    it('returns false when only disabled packs have updates', () => {
-      mockIsPackEnabled.mockReturnValue(false) // All packs disabled
-
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { hasUpdateAvailable } = useUpdateAvailableNodes()
-
-      expect(hasUpdateAvailable.value).toBe(false)
-    })
-
-    it('returns true when at least one enabled pack has updates', () => {
-      mockIsPackEnabled.mockImplementation((id: string) => {
-        // Only pack-1 is enabled
-        return id === 'pack-1'
-      })
-
-      mockUseInstalledPacks.mockReturnValue({
-        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
-        isLoading: ref(false),
-        error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
-
-      const { hasUpdateAvailable } = useUpdateAvailableNodes()
-
-      expect(hasUpdateAvailable.value).toBe(true)
-    })
-  })
 })

tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts

@@ -1,116 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
-import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
-
-vi.mock(
-  '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking',
-  () => ({
-    useVueElementTracking: vi.fn()
-  })
-)
-
-vi.mock('@/composables/useErrorHandling', () => ({
-  useErrorHandling: () => ({
-    toastErrorHandler: vi.fn()
-  })
-}))
-
-vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
-  useNodeLayout: () => ({
-    position: { x: 100, y: 50 },
-    startDrag: vi.fn(),
-    handleDrag: vi.fn(),
-    endDrag: vi.fn()
-  })
-}))
-
-vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
-  useLOD: () => ({
-    lodLevel: { value: 0 },
-    shouldRenderWidgets: { value: true },
-    shouldRenderSlots: { value: true },
-    shouldRenderContent: { value: false },
-    lodCssClass: { value: '' }
-  }),
-  LODLevel: { MINIMAL: 0 }
-}))
-
-describe('LGraphNode', () => {
-  const mockNodeData: VueNodeData = {
-    id: 'test-node-123',
-    title: 'Test Node',
-    type: 'TestNode',
-    mode: 0,
-    flags: {},
-    inputs: [],
-    outputs: [],
-    widgets: [],
-    selected: false,
-    executing: false
-  }
-
-  const mountLGraphNode = (props: any, selectedNodeIds = new Set()) => {
-    return mount(LGraphNode, {
-      props,
-      global: {
-        provide: {
-          [SelectedNodeIdsKey as symbol]: ref(selectedNodeIds)
-        }
-      }
-    })
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should call resize tracking composable with node ID', () => {
-    mountLGraphNode({ nodeData: mockNodeData })
-
-    expect(useVueElementTracking).toHaveBeenCalledWith('test-node-123', 'node')
-  })
-
-  it('should render with data-node-id attribute', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
-
-    expect(wrapper.attributes('data-node-id')).toBe('test-node-123')
-  })
-
-  it('should render node title', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
-
-    expect(wrapper.text()).toContain('Test Node')
-  })
-
-  it('should apply selected styling when selected prop is true', () => {
-    const wrapper = mountLGraphNode(
-      { nodeData: mockNodeData, selected: true },
-      new Set(['test-node-123'])
-    )
-
-    expect(wrapper.classes()).toContain('border-blue-500')
-    expect(wrapper.classes()).toContain('ring-2')
-    expect(wrapper.classes()).toContain('ring-blue-300')
-  })
-
-  it('should apply executing animation when executing prop is true', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData, executing: true })
-
-    expect(wrapper.classes()).toContain('animate-pulse')
-  })
-
-  it('should emit node-click event on pointer down', async () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
-
-    await wrapper.trigger('pointerdown')
-
-    expect(wrapper.emitted('node-click')).toHaveLength(1)
-    expect(wrapper.emitted('node-click')?.[0]).toHaveLength(2)
-    expect(wrapper.emitted('node-click')?.[0][1]).toEqual(mockNodeData)
-  })
-})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

@@ -1,211 +1,39 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { assetService } from '@/services/assetService'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
 }))
 
-const mockSettingStoreGet = vi.fn(() => false)
-vi.mock('@/stores/settingStore', () => ({
-  useSettingStore: vi.fn(() => ({
-    get: mockSettingStoreGet
-  }))
-}))
-
-vi.mock('@/i18n', () => ({
-  t: vi.fn((key: string) =>
-    key === 'widgets.selectModel' ? 'Select model' : key
-  )
-}))
-
-vi.mock('@/services/assetService', () => ({
-  assetService: {
-    isAssetBrowserEligible: vi.fn(() => false)
-  }
-}))
-
-// Test factory functions
-function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
-  return {
-    type: 'combo',
-    options: {},
-    name: 'testWidget',
-    value: undefined,
-    ...overrides
-  } as IBaseWidget
-}
-
-function createMockNode(comfyClass = 'TestNode'): LGraphNode {
-  const node = new LGraphNode('TestNode')
-  node.comfyClass = comfyClass
-
-  // Spy on the addWidget method
-  vi.spyOn(node, 'addWidget').mockReturnValue(createMockWidget())
-
-  return node
-}
-
-function createMockInputSpec(overrides: Partial<InputSpec> = {}): InputSpec {
-  return {
-    type: 'COMBO',
-    name: 'testInput',
-    ...overrides
-  } as InputSpec
-}
-
 describe('useComboWidget', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset to defaults
-    mockSettingStoreGet.mockReturnValue(false)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
   })
 
   it('should handle undefined spec', () => {
     const constructor = useComboWidget()
-    const mockWidget = createMockWidget()
-    const mockNode = createMockNode()
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({ name: 'inputName' })
+    const mockNode = {
+      addWidget: vi.fn().mockReturnValue({ options: {} } as any)
+    }
 
-    const widget = constructor(mockNode, inputSpec)
+    const inputSpec: InputSpec = {
+      type: 'COMBO',
+      name: 'inputName'
+    }
+
+    const widget = constructor(mockNode as any, inputSpec)
 
     expect(mockNode.addWidget).toHaveBeenCalledWith(
       'combo',
       'inputName',
-      undefined,
-      expect.any(Function),
+      undefined, // default value
+      expect.any(Function), // callback
       expect.objectContaining({
         values: []
       })
     )
-    expect(widget).toBe(mockWidget)
-  })
-
-  it('should create normal combo widget when asset API is disabled', () => {
-    mockSettingStoreGet.mockReturnValue(false)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
-
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget()
-    const mockNode = createMockNode('CheckpointLoaderSimple')
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'ckpt_name',
-      options: ['model1.safetensors', 'model2.safetensors']
-    })
-
-    const widget = constructor(mockNode, inputSpec)
-
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'combo',
-      'ckpt_name',
-      'model1.safetensors',
-      expect.any(Function),
-      { values: ['model1.safetensors', 'model2.safetensors'] }
-    )
-    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
-    expect(widget).toBe(mockWidget)
-  })
-
-  it('should create normal combo widget when widget is not eligible for asset browser', () => {
-    mockSettingStoreGet.mockReturnValue(true)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
-
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget()
-    const mockNode = createMockNode()
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'not_eligible_widget',
-      options: ['option1', 'option2']
-    })
-
-    const widget = constructor(mockNode, inputSpec)
-
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'combo',
-      'not_eligible_widget',
-      'option1',
-      expect.any(Function),
-      { values: ['option1', 'option2'] }
-    )
-    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
-      'not_eligible_widget',
-      'TestNode'
-    )
-    expect(widget).toBe(mockWidget)
-  })
-
-  it('should create asset browser button widget when API enabled and widget eligible', () => {
-    mockSettingStoreGet.mockReturnValue(true)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
-
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget({
-      type: 'button',
-      name: 'ckpt_name',
-      value: 'Select model'
-    })
-    const mockNode = createMockNode('CheckpointLoaderSimple')
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'ckpt_name',
-      options: ['model1.safetensors', 'model2.safetensors']
-    })
-
-    const widget = constructor(mockNode, inputSpec)
-
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'button',
-      'ckpt_name',
-      'Select model',
-      expect.any(Function)
-    )
-    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
-    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
-      'ckpt_name',
-      'CheckpointLoaderSimple'
-    )
-    expect(widget).toBe(mockWidget)
-  })
-
-  it('should use asset browser button even when inputSpec has a default value but no options', () => {
-    mockSettingStoreGet.mockReturnValue(true)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
-
-    const constructor = useComboWidget()
-    const mockWidget = createMockWidget({
-      type: 'button',
-      name: 'ckpt_name',
-      value: 'Select model'
-    })
-    const mockNode = createMockNode('CheckpointLoaderSimple')
-    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
-    const inputSpec = createMockInputSpec({
-      name: 'ckpt_name',
-      default: 'fallback.safetensors'
-      // Note: no options array provided
-    })
-
-    const widget = constructor(mockNode, inputSpec)
-
-    expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'button',
-      'ckpt_name',
-      'Select model',
-      expect.any(Function)
-    )
-    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
-    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
-      'ckpt_name',
-      'CheckpointLoaderSimple'
-    )
-    expect(widget).toBe(mockWidget)
+    expect(widget).toEqual({ options: {} })
   })
 })

tests-ui/tests/services/assetService.test.ts

@@ -3,20 +3,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { api } from '@/scripts/api'
 import { assetService } from '@/services/assetService'
 
-vi.mock('@/stores/modelToNodeStore', () => ({
-  useModelToNodeStore: vi.fn(() => ({
-    getRegisteredNodeTypes: vi.fn(
-      () =>
-        new Set([
-          'CheckpointLoaderSimple',
-          'LoraLoader',
-          'VAELoader',
-          'TestNode'
-        ])
-    )
-  }))
-}))
-
 // Test data constants
 const MOCK_ASSETS = {
   checkpoints: {
@@ -97,20 +83,19 @@ describe('assetService', () => {
       expect(folderNames).not.toContain('configs')
     })
 
-    it('should handle empty responses', async () => {
+    it('should handle errors and empty responses', async () => {
+      // Empty response
       mockApiResponse([])
       const emptyResult = await assetService.getAssetModelFolders()
       expect(emptyResult).toHaveLength(0)
-    })
 
-    it('should handle network errors', async () => {
+      // Network error
       vi.mocked(api.fetchApi).mockRejectedValueOnce(new Error('Network error'))
       await expect(assetService.getAssetModelFolders()).rejects.toThrow(
         'Network error'
       )
-    })
 
-    it('should handle HTTP errors', async () => {
+      // HTTP error
       mockApiError(500)
       await expect(assetService.getAssetModelFolders()).rejects.toThrow(
         'Unable to load model folders: Server returned 500. Please try again.'
@@ -122,6 +107,7 @@ describe('assetService', () => {
     it('should return filtered models for folder', async () => {
       const assets = [
         { ...MOCK_ASSETS.checkpoints, name: 'valid.safetensors' },
+        { ...MOCK_ASSETS.checkpoints, name: undefined }, // Invalid name
         { ...MOCK_ASSETS.loras, name: 'lora.safetensors' }, // Wrong tag
         {
           id: 'uuid-4',
@@ -161,43 +147,4 @@ describe('assetService', () => {
       )
     })
   })
-
-  describe('isAssetBrowserEligible', () => {
-    it('should return true for eligible widget names with registered node types', () => {
-      expect(
-        assetService.isAssetBrowserEligible(
-          'ckpt_name',
-          'CheckpointLoaderSimple'
-        )
-      ).toBe(true)
-      expect(
-        assetService.isAssetBrowserEligible('lora_name', 'LoraLoader')
-      ).toBe(true)
-      expect(assetService.isAssetBrowserEligible('vae_name', 'VAELoader')).toBe(
-        true
-      )
-    })
-
-    it('should return false for non-eligible widget names', () => {
-      expect(assetService.isAssetBrowserEligible('seed', 'TestNode')).toBe(
-        false
-      )
-      expect(assetService.isAssetBrowserEligible('steps', 'TestNode')).toBe(
-        false
-      )
-      expect(
-        assetService.isAssetBrowserEligible('sampler_name', 'TestNode')
-      ).toBe(false)
-      expect(assetService.isAssetBrowserEligible('', 'TestNode')).toBe(false)
-    })
-
-    it('should return false for eligible widget names with unregistered node types', () => {
-      expect(
-        assetService.isAssetBrowserEligible('ckpt_name', 'UnknownNode')
-      ).toBe(false)
-      expect(
-        assetService.isAssetBrowserEligible('lora_name', 'UnknownNode')
-      ).toBe(false)
-    })
-  })
 })

tests-ui/tests/store/modelStore.test.ts

@@ -38,9 +38,7 @@ function enableMocks(useAssetAPI = false) {
       return false
     })
   }
-  vi.mocked(useSettingStore, { partial: true }).mockReturnValue(
-    mockSettingStore
-  )
+  vi.mocked(useSettingStore).mockReturnValue(mockSettingStore as any)
 
   // Mock experimental API - returns objects with name and folders properties
   vi.mocked(api.getModels).mockResolvedValue([

tests-ui/tests/store/modelToNodeStore.test.ts

@@ -21,44 +21,45 @@ const EXPECTED_DEFAULT_TYPES = [
 
 type NodeDefStoreType = typeof import('@/stores/nodeDefStore')
 
-// Create minimal but valid ComfyNodeDefImpl for testing
-function createMockNodeDef(name: string): ComfyNodeDefImpl {
-  const def: ComfyNodeDefV1 = {
-    name,
-    display_name: name,
-    category: 'test',
-    python_module: 'nodes',
-    description: '',
-    input: { required: {}, optional: {} },
-    output: [],
-    output_name: [],
-    output_is_list: [],
-    output_node: false
-  }
-  return new ComfyNodeDefImpl(def)
-}
-
-const MOCK_NODE_NAMES = [
-  'CheckpointLoaderSimple',
-  'ImageOnlyCheckpointLoader',
-  'LoraLoader',
-  'LoraLoaderModelOnly',
-  'VAELoader',
-  'ControlNetLoader',
-  'UNETLoader',
-  'UpscaleModelLoader',
-  'StyleModelLoader',
-  'GLIGENLoader'
-] as const
-
-const mockNodeDefsByName = Object.fromEntries(
-  MOCK_NODE_NAMES.map((name) => [name, createMockNodeDef(name)])
-)
-
 // Mock nodeDefStore dependency - modelToNodeStore relies on this for registration
 // Most tests expect this to be populated; tests that need empty state can override
 vi.mock('@/stores/nodeDefStore', async (importOriginal) => {
   const original = await importOriginal<NodeDefStoreType>()
+  const { ComfyNodeDefImpl } = original
+
+  // Create minimal but valid ComfyNodeDefImpl for testing
+  function createMockNodeDef(name: string): ComfyNodeDefImpl {
+    const def: ComfyNodeDefV1 = {
+      name,
+      display_name: name,
+      category: 'test',
+      python_module: 'nodes',
+      description: '',
+      input: { required: {}, optional: {} },
+      output: [],
+      output_name: [],
+      output_is_list: [],
+      output_node: false
+    }
+    return new ComfyNodeDefImpl(def)
+  }
+
+  const MOCK_NODE_NAMES = [
+    'CheckpointLoaderSimple',
+    'ImageOnlyCheckpointLoader',
+    'LoraLoader',
+    'LoraLoaderModelOnly',
+    'VAELoader',
+    'ControlNetLoader',
+    'UNETLoader',
+    'UpscaleModelLoader',
+    'StyleModelLoader',
+    'GLIGENLoader'
+  ] as const
+
+  const mockNodeDefsByName = Object.fromEntries(
+    MOCK_NODE_NAMES.map((name) => [name, createMockNodeDef(name)])
+  )
 
   return {
     ...original,
@@ -71,7 +72,6 @@ vi.mock('@/stores/nodeDefStore', async (importOriginal) => {
 describe('useModelToNodeStore', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
-    vi.clearAllMocks()
   })
 
   describe('modelToNodeMap', () => {
@@ -288,58 +288,12 @@ describe('useModelToNodeStore', () => {
     })
 
     it('should not register when nodeDefStore is empty', () => {
-      // Create fresh Pinia for this test to avoid state persistence
-      setActivePinia(createPinia())
-
       vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
         nodeDefsByName: {}
       })
       const modelToNodeStore = useModelToNodeStore()
       modelToNodeStore.registerDefaults()
       expect(modelToNodeStore.getNodeProvider('checkpoints')).toBeUndefined()
-
-      // Restore original mock for subsequent tests
-      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
-        nodeDefsByName: mockNodeDefsByName
-      })
-    })
-  })
-
-  describe('getRegisteredNodeTypes', () => {
-    it('should return a Set instance', () => {
-      const modelToNodeStore = useModelToNodeStore()
-      const result = modelToNodeStore.getRegisteredNodeTypes()
-      expect(result).toBeInstanceOf(Set)
-    })
-
-    it('should return empty set when nodeDefStore is empty', () => {
-      // Create fresh Pinia for this test to avoid state persistence
-      setActivePinia(createPinia())
-
-      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
-        nodeDefsByName: {}
-      })
-      const modelToNodeStore = useModelToNodeStore()
-
-      const result = modelToNodeStore.getRegisteredNodeTypes()
-      expect(result.size).toBe(0)
-
-      // Restore original mock for subsequent tests
-      vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
-        nodeDefsByName: mockNodeDefsByName
-      })
-    })
-
-    it('should contain node types for efficient Set.has() lookups', () => {
-      const modelToNodeStore = useModelToNodeStore()
-      modelToNodeStore.registerDefaults()
-
-      const result = modelToNodeStore.getRegisteredNodeTypes()
-
-      // Test Set.has() functionality which assetService depends on
-      expect(result.has('CheckpointLoaderSimple')).toBe(true)
-      expect(result.has('LoraLoader')).toBe(true)
-      expect(result.has('NonExistentNode')).toBe(false)
     })
   })
 

tests-ui/tests/utils/mathUtil.test.ts

@@ -1,97 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import { computeUnionBounds, gcd, lcm } from '@/utils/mathUtil'
-
-describe('mathUtil', () => {
-  describe('gcd', () => {
-    it('should compute greatest common divisor correctly', () => {
-      expect(gcd(48, 18)).toBe(6)
-      expect(gcd(100, 25)).toBe(25)
-      expect(gcd(17, 13)).toBe(1)
-      expect(gcd(0, 5)).toBe(5)
-      expect(gcd(5, 0)).toBe(5)
-    })
-  })
-
-  describe('lcm', () => {
-    it('should compute least common multiple correctly', () => {
-      expect(lcm(4, 6)).toBe(12)
-      expect(lcm(15, 20)).toBe(60)
-      expect(lcm(7, 11)).toBe(77)
-    })
-  })
-
-  describe('computeUnionBounds', () => {
-    it('should return null for empty input', () => {
-      expect(computeUnionBounds([])).toBe(null)
-    })
-
-    // Tests for tuple format (ReadOnlyRect)
-    it('should work with ReadOnlyRect tuple format', () => {
-      const tuples: ReadOnlyRect[] = [
-        [10, 20, 30, 40] as const, // bounds: 10,20 to 40,60
-        [50, 10, 20, 30] as const // bounds: 50,10 to 70,40
-      ]
-
-      const result = computeUnionBounds(tuples)
-
-      expect(result).toEqual({
-        x: 10, // min(10, 50)
-        y: 10, // min(20, 10)
-        width: 60, // max(40, 70) - min(10, 50) = 70 - 10
-        height: 50 // max(60, 40) - min(20, 10) = 60 - 10
-      })
-    })
-
-    it('should handle single ReadOnlyRect tuple', () => {
-      const tuple: ReadOnlyRect = [10, 20, 30, 40] as const
-      const result = computeUnionBounds([tuple])
-
-      expect(result).toEqual({
-        x: 10,
-        y: 20,
-        width: 30,
-        height: 40
-      })
-    })
-
-    it('should handle tuple format with negative dimensions', () => {
-      const tuples: ReadOnlyRect[] = [
-        [100, 50, -20, -10] as const, // x+width=80, y+height=40
-        [90, 45, 15, 20] as const // x+width=105, y+height=65
-      ]
-
-      const result = computeUnionBounds(tuples)
-
-      expect(result).toEqual({
-        x: 90, // min(100, 90)
-        y: 45, // min(50, 45)
-        width: 15, // max(80, 105) - min(100, 90) = 105 - 90
-        height: 20 // max(40, 65) - min(50, 45) = 65 - 45
-      })
-    })
-
-    it('should maintain optimal performance with SoA tuples', () => {
-      // Test that array access is as expected for typical selection sizes
-      const tuples: ReadOnlyRect[] = Array.from(
-        { length: 10 },
-        (_, i) =>
-          [
-            i * 20, // x
-            i * 15, // y
-            100 + i * 5, // width
-            80 + i * 3 // height
-          ] as const
-      )
-
-      const result = computeUnionBounds(tuples)
-
-      expect(result).toBeTruthy()
-      expect(result!.x).toBe(0)
-      expect(result!.y).toBe(0)
-      expect(result!.width).toBe(325)
-      expect(result!.height).toBe(242)
-    })
-  })
-})

tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2023",
+    "target": "ES2022",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2023", "ES2023.Array", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
     "incremental": true,
     "sourceMap": true,