Fix direct call into litegraph internals instead of lib entrypoint

Vibe coded from fix-verbatim-module-syntax

.github/workflows/publish-frontend-types.yaml

@@ -88,8 +88,6 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
 
       - name: Build types
         run: pnpm build:types
@@ -133,7 +131,7 @@ jobs:
 
       - name: Publish package
         if: steps.check_npm.outputs.exists == 'false'
-        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}" --no-git-checks
+        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}"
         working-directory: dist
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

browser_tests/tests/interaction.spec.ts

@@ -1012,8 +1012,6 @@ test.describe('Canvas Navigation', () => {
   test('Shift + mouse wheel should pan canvas horizontally', async ({
     comfyPage
   }) => {
-    await comfyPage.setSetting('Comfy.Canvas.MouseWheelScroll', 'panning')
-
     await comfyPage.page.click('canvas')
     await comfyPage.nextFrame()
 

build/plugins/comfyAPIPlugin.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { Plugin } from 'vite'
+import { type Plugin } from 'vite'
 
 interface ShimResult {
   code: string

build/plugins/generateImportMapPlugin.ts

@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
 import fs from 'fs-extra'
 import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
 
 interface ImportMapSource {
   name: string

eslint.config.js

@@ -5,14 +5,13 @@ import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
-import { defineConfig } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
-import vueParser from 'vue-eslint-parser'
 
-const extraFileExtensions = ['.vue']
-
-export default defineConfig([
+export default [
+  {
+    files: ['src/**/*.{js,mjs,cjs,ts,vue}']
+  },
   {
     ignores: [
       'src/scripts/*',
@@ -25,49 +24,35 @@ export default defineConfig([
     ]
   },
   {
-    files: ['./**/*.{ts,mts}'],
     languageOptions: {
       globals: {
         ...globals.browser,
         __COMFYUI_FRONTEND_VERSION__: 'readonly'
       },
+      parser: tseslint.parser,
       parserOptions: {
-        parser: tseslint.parser,
-        projectService: true,
-        tsConfigRootDir: import.meta.dirname,
+        project: ['./tsconfig.json', './tsconfig.eslint.json'],
         ecmaVersion: 2020,
         sourceType: 'module',
-        extraFileExtensions
-      }
-    }
-  },
-  {
-    files: ['./**/*.vue'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
-      parser: vueParser,
-      parserOptions: {
-        parser: tseslint.parser,
-        projectService: true,
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
+        extraFileExtensions: ['.vue']
       }
     }
   },
   pluginJs.configs.recommended,
-  tseslint.configs.recommended,
-  pluginVue.configs['flat/recommended'],
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
-  storybook.configs['flat/recommended'],
+  {
+    files: ['src/**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser
+      }
+    }
+  },
   {
     plugins: {
       'unused-imports': unusedImports,
-      // @ts-expect-error Bad types in the plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
@@ -75,8 +60,6 @@ export default defineConfig([
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
-      '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-import-type-side-effects': 'error',
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
@@ -84,7 +67,6 @@ export default defineConfig([
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/one-component-per-file': 'off', // TODO: fix
-      'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',
@@ -153,5 +135,6 @@ export default defineConfig([
         }
       ]
     }
-  }
-])
+  },
+  ...storybook.configs['flat/recommended']
+]

knip.config.ts

@@ -25,10 +25,7 @@ const config: KnipConfig = {
     'src/types/generatedManagerTypes.ts',
     'src/types/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts',
-    'src/core/graph/operations/types.ts'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

lint-staged.config.js

@@ -3,13 +3,13 @@ export default {
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
     ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
+    'vue-tsc --noEmit'
   ]
 }
 
 function formatAndEslint(fileNames) {
   return [
-    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
-    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
+    `eslint --fix ${fileNames.join(' ')}`,
+    `prettier --write ${fileNames.join(' ')}`
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.5",
+  "version": "1.27.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -14,9 +14,9 @@
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
+    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
     "test:browser": "npx nx e2e",
     "test:unit": "nx run test tests-ui/tests",
@@ -38,10 +38,10 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.8.0",
     "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
-    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
+    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "@lobehub/i18n-cli": "^1.25.1",
     "@nx/eslint": "21.4.1",
     "@nx/playwright": "21.4.1",
@@ -64,11 +64,11 @@
     "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-storybook": "^9.1.6",
-    "eslint-plugin-unused-imports": "^4.2.0",
-    "eslint-plugin-vue": "^10.4.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-storybook": "^9.1.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "eslint-plugin-vue": "^9.27.0",
     "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
     "happy-dom": "^15.11.0",
@@ -76,33 +76,34 @@
     "jiti": "2.4.2",
     "jsdom": "^26.1.0",
     "knip": "^5.62.0",
+    "kolorist": "^1.8.0",
     "lint-staged": "^15.2.7",
+    "magic-string": "^0.30.19",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
-    "storybook": "^9.1.6",
+    "storybook": "^9.1.1",
     "tailwindcss": "^4.1.12",
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
     "tw-animate-css": "^1.3.8",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.44.0",
+    "typescript-eslint": "^8.42.0",
     "unplugin-icons": "^0.22.0",
     "unplugin-vue-components": "^0.28.0",
     "uuid": "^11.1.0",
     "vite": "^5.4.19",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^4.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
-    "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.0.7",
+    "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/comfyui-electron-types": "^0.4.72",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",

scripts/fix-vue-verbatim-module-syntax.ts

@@ -0,0 +1,282 @@
+#!/usr/bin/env tsx
+import glob from 'fast-glob'
+import { cyan, green, magenta, red, yellow } from 'kolorist'
+import MagicString from 'magic-string'
+import { spawn } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+
+interface ImportError {
+  file: string
+  line: number
+  column: number
+  importName: string
+  isVue: boolean
+}
+
+interface FileToFix {
+  ms: MagicString
+  imports: Array<{
+    name: string
+    line: number
+    column: number
+  }>
+  isVue: boolean
+}
+
+const parseVueTscOutput = (output: string): ImportError[] => {
+  const errors: ImportError[] = []
+  const lines = output.split('\n')
+
+  // Pattern for verbatim module syntax errors
+  // Example: src/components/actionbar/ComfyActionbar.vue(25,10): error TS1484: 'Ref' is a type...
+  const errorPattern =
+    /^(.+?)\((\d+),(\d+)\): error TS(1484|1205): '([^']+)' is a type/
+
+  for (const line of lines) {
+    const match = errorPattern.exec(line)
+    if (match) {
+      const [, filePath, lineNum, colNum, , importName] = match
+      errors.push({
+        file: path.resolve(filePath),
+        line: parseInt(lineNum, 10),
+        column: parseInt(colNum, 10),
+        importName,
+        isVue: filePath.endsWith('.vue')
+      })
+    }
+  }
+
+  return errors
+}
+
+const runVueTsc = (tsconfigPath: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const vueTscPath = path.join(
+      process.cwd(),
+      'node_modules',
+      '.bin',
+      'vue-tsc'
+    )
+
+    const child = spawn(vueTscPath, ['--noEmit', '-p', tsconfigPath], {
+      cwd: process.cwd(),
+      shell: true
+    })
+
+    let output = ''
+    let errorOutput = ''
+
+    child.stdout.on('data', (data) => {
+      output += data.toString()
+    })
+
+    child.stderr.on('data', (data) => {
+      errorOutput += data.toString()
+    })
+
+    child.on('close', (code) => {
+      // vue-tsc returns non-zero when there are type errors, which is expected
+      // We want the error output which contains the diagnostics
+      resolve(errorOutput || output)
+    })
+
+    child.on('error', (err) => {
+      reject(err)
+    })
+  })
+}
+
+const findImportInLine = (line: string, importName: string): number => {
+  // Look for the import name in various import patterns
+  const patterns = [
+    // import { Name } from
+    new RegExp(`\\b${importName}\\b(?=[^']*['"])`),
+    // import Name from (default import)
+    new RegExp(`import\\s+${importName}\\s+from`),
+    // import { Something as Name } from
+    new RegExp(`as\\s+${importName}\\b`),
+    // export { Name } from
+    new RegExp(`export\\s*\\{[^}]*\\b${importName}\\b`)
+  ]
+
+  for (const pattern of patterns) {
+    const match = pattern.exec(line)
+    if (match) {
+      return match.index!
+    }
+  }
+
+  // Fallback: simple indexOf
+  return line.indexOf(importName)
+}
+
+const fixImports = async (
+  errors: ImportError[]
+): Promise<Map<string, FileToFix>> => {
+  const fileMap = new Map<string, FileToFix>()
+
+  for (const error of errors) {
+    if (!fileMap.has(error.file)) {
+      const content = fs.readFileSync(error.file, 'utf-8')
+      fileMap.set(error.file, {
+        ms: new MagicString(content),
+        imports: [],
+        isVue: error.isVue
+      })
+    }
+
+    const file = fileMap.get(error.file)!
+    file.imports.push({
+      name: error.importName,
+      line: error.line,
+      column: error.column
+    })
+  }
+
+  // Apply fixes
+  for (const [filePath, fileData] of fileMap) {
+    const lines = fileData.ms.original.split('\n')
+
+    for (const imp of fileData.imports) {
+      const lineIndex = imp.line - 1
+      if (lineIndex >= 0 && lineIndex < lines.length) {
+        const line = lines[lineIndex]
+
+        // Find the actual position of the import name in the line
+        const nameIndex = findImportInLine(line, imp.name)
+
+        if (nameIndex >= 0) {
+          // Calculate the absolute position in the file
+          let absolutePos = 0
+          for (let i = 0; i < lineIndex; i++) {
+            absolutePos += lines[i].length + 1 // +1 for newline
+          }
+          absolutePos += nameIndex
+
+          // Check if 'type' isn't already there
+          const beforeText = fileData.ms.original.slice(
+            Math.max(0, absolutePos - 5),
+            absolutePos
+          )
+          if (!beforeText.includes('type ')) {
+            fileData.ms.appendLeft(absolutePos, 'type ')
+          }
+        }
+      }
+    }
+  }
+
+  return fileMap
+}
+
+const main = async () => {
+  const args = process.argv.slice(2)
+  const isDry = args.includes('--dry')
+  const helpRequested = args.includes('--help') || args.includes('-h')
+
+  if (helpRequested) {
+    console.log(cyan('🔧 Fix Vue Verbatim Module Syntax'))
+    console.log()
+    console.log(
+      'Usage: npx tsx scripts/fix-vue-verbatim-module-syntax.ts [options] [tsconfig]'
+    )
+    console.log()
+    console.log('Options:')
+    console.log(
+      '  --dry    Run in dry mode (show what would be fixed without modifying files)'
+    )
+    console.log('  --help   Show this help message')
+    console.log()
+    console.log('Examples:')
+    console.log('  npx tsx scripts/fix-vue-verbatim-module-syntax.ts')
+    console.log('  npx tsx scripts/fix-vue-verbatim-module-syntax.ts --dry')
+    console.log(
+      '  npx tsx scripts/fix-vue-verbatim-module-syntax.ts tsconfig.app.json'
+    )
+    return
+  }
+
+  // Find tsconfig path argument
+  let tsconfigPath = 'tsconfig.json'
+  for (const arg of args) {
+    if (!arg.startsWith('--') && arg.endsWith('.json')) {
+      tsconfigPath = arg
+      break
+    }
+  }
+
+  console.log(
+    cyan(
+      '🔧 Fixing verbatim module syntax errors in TypeScript and Vue files...'
+    )
+  )
+  console.log(magenta(`Using: ${tsconfigPath}`))
+  if (isDry) {
+    console.log(yellow('Dry run mode - no files will be modified'))
+  }
+  console.log()
+
+  try {
+    // Run vue-tsc to get all errors
+    console.log(cyan('Running vue-tsc to detect errors...'))
+    const output = await runVueTsc(tsconfigPath)
+
+    // Parse the errors
+    const errors = parseVueTscOutput(output)
+
+    if (errors.length === 0) {
+      console.log(green('✨ No verbatim module syntax errors found!'))
+      return
+    }
+
+    console.log(
+      yellow(`Found ${errors.length} import(s) that need 'type' modifier`)
+    )
+    console.log()
+
+    // Fix the imports
+    const fixes = await fixImports(errors)
+
+    const cwd = process.cwd()
+    for (const [filePath, fileData] of fixes) {
+      if (!isDry) {
+        fs.writeFileSync(filePath, fileData.ms.toString())
+      }
+
+      const fileType = fileData.isVue ? '(Vue)' : '(TS)'
+      console.log(cyan(`${path.relative(cwd, filePath)} ${fileType}`))
+
+      const importNames = fileData.imports.map((imp) => imp.name)
+      console.log(
+        '  ',
+        isDry ? 'Would add type to:' : 'Adding type to:',
+        importNames.map((name) => magenta(name)).join(', ')
+      )
+      console.log()
+    }
+
+    const fileCount = fixes.size
+    const importCount = Array.from(fixes.values()).reduce(
+      (sum, f) => sum + f.imports.length,
+      0
+    )
+
+    console.log(
+      green(
+        `✨ ${isDry ? 'Would fix' : 'Fixed'} ${importCount} import${importCount === 1 ? '' : 's'} in ${fileCount} file${fileCount === 1 ? '' : 's'}`
+      )
+    )
+  } catch (error) {
+    console.error(red('Error:'), error instanceof Error ? error.message : error)
+    process.exit(1)
+  }
+}
+
+// Run if executed directly
+main().catch((error) => {
+  console.error(red('Unhandled error:'), error)
+  process.exit(1)
+})
+
+export { main as fixVerbatimModuleSyntax }

src/assets/css/fonts.css

@@ -1,17 +0,0 @@
-/* Inter Font Family */
-
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/inter-latin-normal.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('/fonts/inter-latin-italic.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
-}

src/assets/css/style.css

@@ -1,6 +1,5 @@
 @layer theme, base, primevue, components, utilities;
 
-@import './fonts.css';
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
 @import 'tw-animate-css';
@@ -53,18 +52,15 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
-  /* Font Families */
-  --font-inter: 'Inter', sans-serif;
-
   /* Palette Colors */
-  --color-charcoal-100: #55565e;
-  --color-charcoal-200: #494a50;
-  --color-charcoal-300: #3c3d42;
-  --color-charcoal-400: #313235;
-  --color-charcoal-500: #2d2e32;
-  --color-charcoal-600: #262729;
-  --color-charcoal-700: #202121;
-  --color-charcoal-800: #171718;
+  --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;
@@ -103,12 +99,12 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-bypass: #6a246a;
+  --color-bypass: #6A246A;
   --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-100) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
+  --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 */
@@ -121,10 +117,10 @@
 }
 
 @theme inline {
-  --color-node-component-surface: var(--color-charcoal-600);
+  --color-node-component-surface: var(--color-charcoal-300);
   --color-node-component-surface-highlight: var(--color-slate-100);
-  --color-node-component-surface-hovered: var(--color-charcoal-400);
-  --color-node-component-surface-selected: var(--color-charcoal-200);
+  --color-node-component-surface-hovered: var(--color-charcoal-500);
+  --color-node-component-surface-selected: var(--color-charcoal-700);
   --color-node-stroke: var(--color-stone-100);
 }
 
@@ -136,7 +132,7 @@
 
 @utility scrollbar-hide {
   scrollbar-width: none;
-  &::-webkit-scrollbar {
+  &::-webkit-scrollbar { 
     width: 1px;
   }
   &::-webkit-scrollbar-thumb {

src/components/MenuHamburger.vue

@@ -21,8 +21,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import type { CSSProperties } from 'vue'
-import { computed, watchEffect } from 'vue'
+import { type CSSProperties, computed, watchEffect } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'

src/components/actionbar/ComfyActionbar.vue

@@ -22,8 +22,15 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import type { Ref } from 'vue'
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import {
+  type Ref,
+  computed,
+  inject,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -26,8 +26,7 @@
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
 import Button from 'primevue/button'
-import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { type Ref, computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
@@ -47,7 +46,7 @@ const hasSelection = ref(false)
 const isHovered = useElementHover(rootEl)
 
 const terminalData = useTerminal(terminalEl)
-emit('created', terminalData, ref(rootEl))
+emit('created', terminalData, rootEl)
 
 const { terminal } = terminalData
 let selectionDisposable: IDisposable | undefined

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IDisposable } from '@xterm/xterm'
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted } from 'vue'
+import { type IDisposable } from '@xterm/xterm'
+import { type Ref, onMounted, onUnmounted } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -15,11 +15,14 @@
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { type Ref, onMounted, onUnmounted, ref } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
+import {
+  type LogEntry,
+  type LogsWsMessage,
+  type TerminalSize
+} from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -47,8 +47,7 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import type { MenuState } from 'primevue/menu'
-import Menu from 'primevue/menu'
+import Menu, { type MenuState } from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'

src/components/common/EditableText.vue

@@ -7,7 +7,7 @@
     <InputText
       v-else
       ref="inputRef"
-      v-model:model-value="inputValue"
+      v-model:modelValue="inputValue"
       v-focus
       type="text"
       size="small"

src/components/common/ExtensionSlot.vue

@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'
 
-import type { CustomExtension, VueExtension } from '@/types/extensionTypes'
+import { type CustomExtension, type VueExtension } from '@/types/extensionTypes'
 
 const props = defineProps<{
   extension: VueExtension | CustomExtension

src/components/common/FormItem.vue

@@ -21,7 +21,7 @@
       <component
         :is="markRaw(getFormComponent(props.item))"
         :id="props.id"
-        v-model:model-value="formValue"
+        v-model:modelValue="formValue"
         :aria-labelledby="`${props.id}-label`"
         v-bind="getFormAttrs(props.item)"
       />
@@ -44,7 +44,7 @@ import FormRadioGroup from '@/components/common/FormRadioGroup.vue'
 import InputKnob from '@/components/common/InputKnob.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
-import type { FormItem } from '@/platform/settings/types'
+import { type FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{

src/components/common/RefreshButton.vue

@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import type { PrimeVueSeverity } from '@/types/primeVueTypes'
+import { type PrimeVueSeverity } from '@/types/primeVueTypes'
 
 const {
   disabled,

src/components/common/TreeExplorer.vue

@@ -1,7 +1,7 @@
 <template>
   <Tree
-    v-model:expanded-keys="expandedKeys"
-    v-model:selection-keys="selectionKeys"
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectionKeys="selectionKeys"
     class="tree-explorer py-0 px-2 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"

src/components/common/TreeExplorerTreeNode.spec.ts

@@ -9,8 +9,10 @@ import { createI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
-import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
+import {
+  InjectKeyHandleEditLabelFunction,
+  type RenderedTreeExplorerNode
+} from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance
 const i18n = createI18n({

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'

src/components/dialog/content/SignInContent.vue

@@ -148,7 +148,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import type { SignInData, SignUpData } from '@/schemas/signInSchema'
+import { type SignInData, type SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'
 
 import ApiKeyForm from './signin/ApiKeyForm.vue'

src/components/dialog/content/UpdatePasswordContent.vue

@@ -17,8 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form } from '@primevue/forms'
+import { Form, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'

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

@@ -16,7 +16,7 @@
     <div class="flex flex-1 relative overflow-hidden">
       <ManagerNavSidebar
         v-if="isSideNavOpen"
-        v-model:selected-tab="selectedTab"
+        v-model:selectedTab="selectedTab"
         :tabs="tabs"
       />
       <div
@@ -57,9 +57,9 @@
             </IconButton>
           </div>
           <RegistrySearchBar
-            v-model:search-query="searchQuery"
-            v-model:search-mode="searchMode"
-            v-model:sort-field="sortField"
+            v-model:searchQuery="searchQuery"
+            v-model:searchMode="searchMode"
+            v-model:sortField="sortField"
             :search-results="searchResults"
             :suggestions="suggestions"
             :is-missing-tab="isMissingTab"
@@ -160,7 +160,7 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 
 const { initialTab } = defineProps<{
   initialTab?: ManagerTab

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

@@ -169,9 +169,9 @@ import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
-import type {
-  ConflictDetail,
-  ConflictDetectionResult
+import {
+  type ConflictDetail,
+  type ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'
 import { getConflictMessage } from '@/utils/conflictMessageUtil'
 

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

@@ -19,7 +19,7 @@
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'
 
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']

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

@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'

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

@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'

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

@@ -93,8 +93,8 @@ import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { components } from '@/types/comfyRegistryTypes'
-import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { type components } from '@/types/comfyRegistryTypes'
+import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
 import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'
 

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'

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

@@ -39,7 +39,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 

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

@@ -31,11 +31,13 @@ import { useConflictDetection } from '@/composables/useConflictDetection'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { ButtonSize } from '@/types/buttonTypes'
+import { type ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
-import type { ConflictDetail } from '@/types/conflictDetectionTypes'
-import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import {
+  type ConflictDetail,
+  type ConflictDetectionResult
+} from '@/types/conflictDetectionTypes'
+import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 

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

@@ -17,9 +17,9 @@
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { ButtonSize } from '@/types/buttonTypes'
+import { type ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -75,7 +75,7 @@ import { useImportFailedDetection } from '@/composables/useImportFailedDetection
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -50,7 +50,7 @@ import PackUninstallButton from '@/components/dialog/content/manager/button/Pack
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -67,7 +67,7 @@ import { usePacksSelection } from '@/composables/nodePack/usePacksSelection'
 import { usePacksStatus } from '@/composables/nodePack/usePacksStatus'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -48,7 +48,7 @@ import { computed, inject, ref, watchEffect } from 'vue'
 import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
 import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
 import WarningTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/MetadataRow.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-const { value = 'N/A', label } = defineProps<{
+const { value = 'N/A', label = 'N/A' } = defineProps<{
   label: string
   value?: string | number
 }>()

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -29,7 +29,7 @@ import { useI18n } from 'vue-i18n'
 import InfoTextSection, {
   type TextSection
 } from '@/components/dialog/content/manager/infoPanel/InfoTextSection.vue'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import { isValidUrl } from '@/utils/formatUtil'
 
 const { t } = useI18n()

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -34,7 +34,7 @@ import { computed, ref, shallowRef, useId } from 'vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import type { components, operations } from '@/types/comfyRegistryTypes'
+import { type components, type operations } from '@/types/comfyRegistryTypes'
 import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'
 
 type ListComfyNodesResponse =

src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -29,8 +29,8 @@ import { computed } from 'vue'
 
 import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { t } from '@/i18n'
-import type { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { type components } from '@/types/comfyRegistryTypes'
+import { type ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { getConflictMessage } from '@/utils/conflictMessageUtil'
 
 const { nodePack, conflictResult } = defineProps<{

src/components/dialog/content/manager/packBanner/PackBanner.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 

src/components/dialog/content/manager/packIcon/PackIconStacked.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 
 const {
   nodePacks,

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

@@ -41,12 +41,12 @@
     <div class="flex mt-3 text-sm">
       <div class="flex gap-6 ml-1">
         <SearchFilterDropdown
-          v-model:model-value="searchMode"
+          v-model:modelValue="searchMode"
           :options="filterOptions"
           :label="$t('g.filter')"
         />
         <SearchFilterDropdown
-          v-model:model-value="sortField"
+          v-model:modelValue="sortField"
           :options="availableSortOptions"
           :label="$t('g.sort')"
         />
@@ -62,8 +62,9 @@
 
 <script setup lang="ts">
 import { stubTrue } from 'es-toolkit/compat'
-import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
-import AutoComplete from 'primevue/autocomplete'
+import AutoComplete, {
+  type AutoCompleteOptionSelectEvent
+} from 'primevue/autocomplete'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -76,7 +77,7 @@ import {
   type SearchOption,
   SortableAlgoliaField
 } from '@/types/comfyManagerTypes'
-import type { components } from '@/types/comfyRegistryTypes'
+import { type components } from '@/types/comfyRegistryTypes'
 import type {
   QuerySuggestion,
   SearchMode,

src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts

@@ -1,5 +1,4 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -96,8 +96,8 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
-import type { AuditLog } from '@/services/customerEventsService'
 import {
+  type AuditLog,
   EventType,
   useCustomerEventsService
 } from '@/services/customerEventsService'

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
-import type { KeyComboImpl } from '@/stores/keybindingStore'
+import { KeyComboImpl } from '@/stores/keybindingStore'
 
 const { keyCombo, isModified = false } = defineProps<{
   keyCombo: KeyComboImpl

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -79,8 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form } from '@primevue/forms'
+import { Form, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignInForm.spec.ts

@@ -1,6 +1,5 @@
 import { Form } from '@primevue/forms'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignInForm.vue

@@ -71,8 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form } from '@primevue/forms'
+import { Form, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignUpForm.vue

@@ -59,8 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
-import { Form, FormField } from '@primevue/forms'
+import { Form, FormField, type FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'

src/components/dialog/header/ManagerProgressHeader.vue

@@ -4,7 +4,7 @@
     class="px-4 py-2 flex items-center"
   >
     <TabMenu
-      v-model:active-index="activeTabIndex"
+      v-model:activeIndex="activeTabIndex"
       :model="tabs"
       class="w-full border-none"
       :pt="{

src/components/graph/DomWidgets.vue

@@ -34,7 +34,7 @@ const updateWidgets = () => {
     const widget = widgetState.widget
 
     // Early exit for non-visible widgets
-    if (!widget.isVisible() || !widgetState.active) {
+    if (!widget.isVisible()) {
       widgetState.visible = false
       continue
     }

src/components/graph/modals/ZoomControlsModal.vue

@@ -135,8 +135,7 @@
 </template>
 
 <script setup lang="ts">
-import type { InputNumberInputEvent } from 'primevue'
-import { Button, InputNumber } from 'primevue'
+import { Button, InputNumber, type InputNumberInputEvent } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 

src/components/graph/selectionToolbox/BypassButton.vue

@@ -7,7 +7,7 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
+    class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]"
     @click="toggleBypass"
   >
     <template #icon>

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -50,8 +50,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import type { Raw } from 'vue'
-import { computed, ref, watch } from 'vue'
+import { type Raw, computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type {

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -20,7 +20,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import { type Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
 
 const { t } = useI18n()

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -17,8 +17,7 @@
 import Button from 'primevue/button'
 
 import { st } from '@/i18n'
-import type { ComfyCommand } from '@/stores/commandStore'
-import { useCommandStore } from '@/stores/commandStore'
+import { type ComfyCommand, useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -48,9 +48,9 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import type {
-  MenuOption,
-  SubMenuOption
+import {
+  type MenuOption,
+  type SubMenuOption
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
 

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -56,10 +56,10 @@ import { computed, nextTick, ref, watch } from 'vue'
 
 import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
 import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
-import type { ComponentWidget } from '@/scripts/domWidget'
+import { type ComponentWidget } from '@/scripts/domWidget'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
-const { widget, history } = defineProps<{
+const { widget, history = '[]' } = defineProps<{
   widget?: ComponentWidget<string>
   history: string
 }>()

src/components/graph/widgets/DomWidget.vue

@@ -19,15 +19,21 @@
 
 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
-import type { CSSProperties } from 'vue'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import {
+  type CSSProperties,
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useDomClipping } from '@/composables/element/useDomClipping'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
-import type { DomWidgetState } from '@/stores/domWidgetStore'
+import { type DomWidgetState } from '@/stores/domWidgetStore'
 
 const { widgetState } = defineProps<{
   widgetState: DomWidgetState

src/components/graph/widgets/TextPreviewWidget.vue

@@ -15,7 +15,7 @@
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import type { NodeId } from '@/lib/litegraph/src/litegraph'
+import { type NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -144,7 +144,7 @@ import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/composables/useManagerState'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ReleaseNote } from '@/platform/updates/common/releaseService'
+import { type ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'

src/components/input/MultiSelect.vue

@@ -106,8 +106,9 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
-import MultiSelect from 'primevue/multiselect'
+import MultiSelect, {
+  type MultiSelectPassThroughMethodOptions
+} from 'primevue/multiselect'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -116,7 +117,7 @@ import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
-import type { SelectOption } from './types'
+import { type SelectOption } from './types'
 
 type Option = SelectOption
 

src/components/input/SingleSelect.vue

@@ -58,14 +58,13 @@
 </template>
 
 <script setup lang="ts">
-import type { SelectPassThroughMethodOptions } from 'primevue/select'
-import Select from 'primevue/select'
+import Select, { type SelectPassThroughMethodOptions } from 'primevue/select'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { cn } from '@/utils/tailwindUtil'
 
-import type { SelectOption } from './types'
+import { type SelectOption } from './types'
 
 defineOptions({
   inheritAttrs: false

src/components/install/MirrorsConfiguration.vue

@@ -34,16 +34,20 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import {
+  type TorchDeviceType,
+  TorchMirrorUrl
+} from '@comfyorg/comfyui-electron-types'
 import Divider from 'primevue/divider'
 import Panel from 'primevue/panel'
-import type { ModelRef } from 'vue'
-import { computed, onMounted, ref } from 'vue'
+import { type ModelRef, computed, onMounted, ref } from 'vue'
 
 import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import type { UVMirror } from '@/constants/uvMirrors'
-import { PYPI_MIRROR, PYTHON_MIRROR } from '@/constants/uvMirrors'
+import {
+  PYPI_MIRROR,
+  PYTHON_MIRROR,
+  type UVMirror
+} from '@/constants/uvMirrors'
 import { t } from '@/i18n'
 import { isInChina } from '@/utils/networkUtil'
 import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'

src/components/install/mirror/MirrorItem.vue

@@ -23,7 +23,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 
 import UrlInput from '@/components/common/UrlInput.vue'
-import type { UVMirror } from '@/constants/uvMirrors'
+import { type UVMirror } from '@/constants/uvMirrors'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { checkMirrorReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'

src/components/load3d/Load3D.vue

@@ -95,11 +95,11 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  CameraType,
-  Load3DNodeType,
-  MaterialMode,
-  UpDirection
+import {
+  type CameraType,
+  type Load3DNodeType,
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'

src/components/load3d/Load3DAnimation.vue

@@ -93,12 +93,12 @@ import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  AnimationItem,
-  CameraType,
-  Load3DAnimationNodeType,
-  MaterialMode,
-  UpDirection
+import {
+  type AnimationItem,
+  type CameraType,
+  type Load3DAnimationNodeType,
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'

src/components/load3d/Load3DAnimationScene.vue

@@ -27,13 +27,13 @@
 import { ref, watch } from 'vue'
 
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
+import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import {
+  type CameraType,
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const props = defineProps<{
   node: any

src/components/load3d/Load3DControls.vue

@@ -99,10 +99,10 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
+import {
+  type CameraType,
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'

src/components/load3d/Load3DScene.vue

@@ -8,15 +8,15 @@
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import type Load3d from '@/extensions/core/load3d/Load3d'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import {
+  type CameraType,
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 

src/components/load3d/Load3dViewerContent.vue

@@ -76,7 +76,7 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 

src/components/load3d/controls/CameraControls.vue

@@ -40,7 +40,7 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import type { CameraType } from '@/extensions/core/load3d/interfaces'
+import { type CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const vTooltip = Tooltip

src/components/load3d/controls/ModelControls.vue

@@ -99,9 +99,9 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import type {
-  MaterialMode,
-  UpDirection
+import {
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'

src/components/load3d/controls/RecordingControls.vue

@@ -79,7 +79,7 @@ import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLoad3dService } from '@/services/load3dService'
 
 const vTooltip = Tooltip

src/components/load3d/controls/ViewerControls.vue

@@ -20,7 +20,7 @@ import Button from 'primevue/button'
 
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -23,7 +23,7 @@ import Select from 'primevue/select'
 import Slider from 'primevue/slider'
 import { computed } from 'vue'
 
-import type { CameraType } from '@/extensions/core/load3d/interfaces'
+import { type CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const cameras = [

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -26,9 +26,9 @@
 import Select from 'primevue/select'
 import { computed } from 'vue'
 
-import type {
-  MaterialMode,
-  UpDirection
+import {
+  type MaterialMode,
+  type UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 

src/components/maintenance/TaskListItem.vue

@@ -47,7 +47,7 @@ import { computed, ref } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import type { PrimeVueSeverity } from '@/types/primeVueTypes'
+import { type PrimeVueSeverity } from '@/types/primeVueTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 import TaskListStatusIcon from './TaskListStatusIcon.vue'

src/components/maintenance/TaskListStatusIcon.vue

@@ -8,8 +8,7 @@
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
-import type { MaybeRef } from 'vue'
-import { computed } from 'vue'
+import { type MaybeRef, computed } from 'vue'
 
 import { t } from '@/i18n'
 

src/components/maintenance/TerminalOutputDrawer.vue

@@ -10,10 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import type { Terminal } from '@xterm/xterm'
+import { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
-import type { Ref } from 'vue'
-import { onMounted } from 'vue'
+import { type Ref, onMounted } from 'vue'
 
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'

src/components/searchbox/NodeSearchBox.vue

@@ -88,8 +88,11 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import {
+  ComfyNodeDefImpl,
+  useNodeDefStore,
+  useNodeFrequencyStore
+} from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import SearchFilterChip from '../common/SearchFilterChip.vue'

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -38,19 +38,21 @@ import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
-import type { Point } from '@/lib/litegraph/src/interfaces'
-import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { type Point } from '@/lib/litegraph/src/interfaces'
+import {
+  LGraphNode,
+  LiteGraph,
+  type LiteGraphCanvasEvent
+} from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { type FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBox from './NodeSearchBox.vue'
 

src/components/searchbox/NodeSearchFilter.vue

@@ -27,9 +27,8 @@ import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { FuseFilter, type FuseFilterWithValue } from '@/utils/fuseUtil'
 
 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
 const selectedFilter = ref<FuseFilter<ComfyNodeDefImpl, string>>()

src/components/searchbox/NodeSearchItem.vue

@@ -53,8 +53,7 @@ import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
 import { highlightQuery } from '@/utils/formatUtil'
 import { formatNumberWithSuffix } from '@/utils/formatUtil'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <SearchBox
-        v-model:model-value="searchQuery"
+        v-model:modelValue="searchQuery"
         class="model-lib-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchModels') + '...'"
         @search="handleSearch"
@@ -31,7 +31,7 @@
       <ElectronDownloadItems v-if="isElectron()" />
 
       <TreeExplorer
-        v-model:expanded-keys="expandedKeys"
+        v-model:expandedKeys="expandedKeys"
         class="model-lib-tree-explorer"
         :root="renderedRoot"
       >
@@ -56,8 +56,12 @@ import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'
-import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
-import { ResourceState, useModelStore } from '@/stores/modelStore'
+import {
+  ComfyModelDef,
+  ModelFolder,
+  ResourceState,
+  useModelStore
+} from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -78,7 +78,7 @@
       <template #header>
         <div>
           <SearchBox
-            v-model:model-value="searchQuery"
+            v-model:modelValue="searchQuery"
             class="node-lib-search-box p-2 2xl:p-4"
             :placeholder="$t('g.searchNodes') + '...'"
             filter-icon="pi pi-filter"
@@ -106,7 +106,7 @@
             class="m-2"
           />
           <TreeExplorer
-            v-model:expanded-keys="expandedKeys"
+            v-model:expandedKeys="expandedKeys"
             class="node-lib-tree-explorer"
             :root="renderedRoot"
           >
@@ -129,11 +129,10 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
-import type { Ref } from 'vue'
-import { computed, h, nextTick, ref, render } from 'vue'
+import { type Ref, computed, h, nextTick, ref, render } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
+import { type SearchFilter } from '@/components/common/SearchFilterChip.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
@@ -149,8 +148,7 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
   GroupingStrategyId,
@@ -158,7 +156,7 @@ import type {
 } from '@/types/nodeOrganizationTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
-import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { type FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
 

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -86,7 +86,7 @@
   <ConfirmPopup />
   <ContextMenu ref="menu" :model="menuItems" />
   <ResultGallery
-    v-model:active-index="galleryActiveIndex"
+    v-model:activeIndex="galleryActiveIndex"
     :all-gallery-items="allGalleryItems"
   />
 </template>
@@ -105,13 +105,16 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { type ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
-import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
-import { useQueueStore } from '@/stores/queueStore'
+import {
+  ResultItemImpl,
+  TaskItemImpl,
+  useQueueStore
+} from '@/stores/queueStore'
 
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import ResultGallery from './queue/ResultGallery.vue'

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -14,7 +14,7 @@
     </template>
     <template #header>
       <SearchBox
-        v-model:model-value="searchQuery"
+        v-model:modelValue="searchQuery"
         class="workflows-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchWorkflows') + '...'"
         @search="handleSearch"
@@ -32,7 +32,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
+            v-model:expandedKeys="dummyExpandedKeys"
             :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
             :selection-keys="selectionKeys"
           >
@@ -74,7 +74,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            v-model:expanded-keys="dummyExpandedKeys"
+            v-model:expandedKeys="dummyExpandedKeys"
             :root="
               renderTreeNode(
                 bookmarkedWorkflowsTree,
@@ -96,7 +96,7 @@
           />
           <TreeExplorer
             v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expanded-keys="expandedKeys"
+            v-model:expandedKeys="expandedKeys"
             :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
             :selection-keys="selectionKeys"
           >
@@ -114,7 +114,7 @@
       </div>
       <div v-else class="comfyui-workflows-search-panel">
         <TreeExplorer
-          v-model:expanded-keys="expandedKeys"
+          v-model:expandedKeys="expandedKeys"
           :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
         >
           <template #node="{ node }">
@@ -150,7 +150,7 @@ import {
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
-import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import { type TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'