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

2026-03-05 13:10:24 +00:00 · 2025-09-17 15:13:41 -07:00
parent 16ddd4d481 08220d50d9
commit 777e419a50
265 changed files with 2741 additions and 1517 deletions
--- a/.github/workflows/publish-frontend-types.yaml
+++ b/.github/workflows/publish-frontend-types.yaml
@@ -88,6 +88,8 @@ jobs:

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'

      - name: Build types
        run: pnpm build:types
@@ -131,7 +133,7 @@ jobs:

      - name: Publish package
        if: steps.check_npm.outputs.exists == 'false'
-        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}"
+        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}" --no-git-checks
        working-directory: dist
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -1012,6 +1012,8 @@ 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()

--- a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,13 +5,14 @@ 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'

-export default [
-  {
-    files: ['src/**/*.{js,mjs,cjs,ts,vue}']
-  },
+const extraFileExtensions = ['.vue']
+
+export default defineConfig([
  {
    ignores: [
      'src/scripts/*',
@@ -24,35 +25,49 @@ export default [
    ]
  },
  {
+    files: ['./**/*.{ts,mts}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        __COMFYUI_FRONTEND_VERSION__: 'readonly'
      },
-      parser: tseslint.parser,
      parserOptions: {
-        project: ['./tsconfig.json', './tsconfig.eslint.json'],
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
        ecmaVersion: 2020,
        sourceType: 'module',
-        extraFileExtensions: ['.vue']
+        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
      }
    }
  },
  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
+  tseslint.configs.recommended,
+  pluginVue.configs['flat/recommended'],
  eslintPluginPrettierRecommended,
-  {
-    files: ['src/**/*.vue'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser
-      }
-    }
-  },
+  storybook.configs['flat/recommended'],
  {
    plugins: {
      'unused-imports': unusedImports,
+      // @ts-expect-error Bad types in the plugin
      '@intlify/vue-i18n': pluginI18n
    },
    rules: {
@@ -60,6 +75,8 @@ export default [
      '@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
@@ -67,6 +84,7 @@ export default [
      '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',
@@ -135,6 +153,5 @@ export default [
        }
      ]
    }
-  },
-  ...storybook.configs['flat/recommended']
-]
+  }
+])
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -25,7 +25,9 @@ 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'
+    'src/scripts/ui/components/splitButton.ts',
+    // Staged for for use with subgraph widget promotion
+    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
  ],
  compilers: {
    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -3,13 +3,13 @@ export default {

  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
    ...formatAndEslint(stagedFiles),
-    'vue-tsc --noEmit'
+    'pnpm typecheck'
  ]
 }

 function formatAndEslint(fileNames) {
  return [
-    `eslint --fix ${fileNames.join(' ')}`,
-    `prettier --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
  ]
 }
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@comfyorg/comfyui-frontend",
  "private": true,
-  "version": "1.27.4",
+  "version": "1.27.5",
  "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",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
+    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
    "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.8.0",
+    "@eslint/js": "^9.35.0",
    "@iconify-json/lucide": "^1.2.66",
    "@iconify/tailwind": "^1.2.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.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.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",
+    "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",
    "fs-extra": "^11.2.0",
    "globals": "^15.9.0",
    "happy-dom": "^15.11.0",
@@ -79,29 +79,30 @@
    "lint-staged": "^15.2.7",
    "nx": "21.4.1",
    "prettier": "^3.3.2",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.6",
    "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.42.0",
+    "typescript-eslint": "^8.44.0",
    "unplugin-icons": "^0.22.0",
    "unplugin-vue-components": "^0.28.0",
    "uuid": "^11.1.0",
    "vite": "^5.4.19",
-    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dts": "^4.5.4",
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-vue-devtools": "^7.7.6",
    "vitest": "^3.2.4",
-    "vue-tsc": "^2.1.10",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.7",
    "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.72",
+    "@comfyorg/comfyui-electron-types": "0.4.73-0",
    "@iconify/json": "^2.2.380",
    "@primeuix/forms": "0.0.2",
    "@primeuix/styled": "0.3.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/fonts/inter-latin-italic.woff2
+++ b/public/fonts/inter-latin-italic.woff2
--- a/public/fonts/inter-latin-normal.woff2
+++ b/public/fonts/inter-latin-normal.woff2
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -0,0 +1,17 @@
+/* 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;
+}
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,5 +1,6 @@
@layer theme, base, primevue, components, utilities;

+@import './fonts.css';
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);
@import 'tw-animate-css';
@@ -52,15 +53,18 @@
  --text-xxs: 0.625rem;
  --text-xxs--line-height: calc(1 / 0.625);

+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
  /* 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-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-stone-100: #444444;
  --color-stone-200: #828282;
@@ -99,12 +103,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-800) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) 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-100) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);

  /* PrimeVue pulled colors */
@@ -117,10 +121,10 @@
 }

@theme inline {
-  --color-node-component-surface: var(--color-charcoal-300);
+  --color-node-component-surface: var(--color-charcoal-600);
  --color-node-component-surface-highlight: var(--color-slate-100);
-  --color-node-component-surface-hovered: var(--color-charcoal-500);
-  --color-node-component-surface-selected: var(--color-charcoal-700);
+  --color-node-component-surface-hovered: var(--color-charcoal-400);
+  --color-node-component-surface-selected: var(--color-charcoal-200);
  --color-node-stroke: var(--color-stone-100);
 }

@@ -132,7 +136,7 @@

@utility scrollbar-hide {
  scrollbar-width: none;
-  &::-webkit-scrollbar { 
+  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -21,7 +21,8 @@

 <script setup lang="ts">
 import Button from 'primevue/button'
-import { CSSProperties, computed, watchEffect } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, watchEffect } from 'vue'

 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -22,7 +22,8 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'

 import { useSettingStore } from '@/platform/settings/settingStore'

--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -3,15 +3,38 @@
    <div class="p-terminal rounded-none h-full w-full p-2">
      <div ref="terminalEl" class="h-full terminal-host" />
    </div>
+    <Button
+      v-tooltip.left="{
+        value: tooltipText,
+        showDelay: 300
+      }"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
+      :class="
+        cn('absolute top-2 right-8 transition-opacity', {
+          'opacity-0 pointer-events-none select-none': !isHovered
+        })
+      "
+      :aria-label="tooltipText"
+      @click="handleCopy"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { Ref, onUnmounted, ref } from 'vue'
+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 { useI18n } from 'vue-i18n'

 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI, isElectron } from '@/utils/envUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()

 const emit = defineEmits<{
  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
@@ -19,7 +42,39 @@ const emit = defineEmits<{
 }>()
 const terminalEl = ref<HTMLElement | undefined>()
 const rootEl = ref<HTMLElement | undefined>()
-emit('created', useTerminal(terminalEl), rootEl)
+const hasSelection = ref(false)
+
+const isHovered = useElementHover(rootEl)
+
+const terminalData = useTerminal(terminalEl)
+emit('created', terminalData, ref(rootEl))
+
+const { terminal } = terminalData
+let selectionDisposable: IDisposable | undefined
+
+const tooltipText = computed(() => {
+  return hasSelection.value
+    ? t('serverStart.copySelectionTooltip')
+    : t('serverStart.copyAllTooltip')
+})
+
+const handleCopy = async () => {
+  const existingSelection = terminal.getSelection()
+  const shouldSelectAll = !existingSelection
+  if (shouldSelectAll) terminal.selectAll()
+
+  const selectedText = shouldSelectAll
+    ? terminal.getSelection()
+    : existingSelection
+
+  if (selectedText) {
+    await navigator.clipboard.writeText(selectedText)
+
+    if (shouldSelectAll) {
+      terminal.clearSelection()
+    }
+  }
+}

 const showContextMenu = (event: MouseEvent) => {
  event.preventDefault()
@@ -30,7 +85,16 @@ if (isElectron()) {
  useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }

-onUnmounted(() => emit('unmounted'))
+onMounted(() => {
+  selectionDisposable = terminal.onSelectionChange(() => {
+    hasSelection.value = terminal.hasSelection()
+  })
+})
+
+onUnmounted(() => {
+  selectionDisposable?.dispose()
+  emit('unmounted')
+})
 </script>

 <style scoped>
--- a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
@@ -3,8 +3,9 @@
 </template>

 <script setup lang="ts">
-import { IDisposable } from '@xterm/xterm'
-import { Ref, onMounted, onUnmounted } from 'vue'
+import type { IDisposable } from '@xterm/xterm'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'

 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -15,10 +15,11 @@
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'

 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
+import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'

--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -47,7 +47,8 @@

 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import Menu, { MenuState } from 'primevue/menu'
+import type { MenuState } from 'primevue/menu'
+import Menu from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -7,7 +7,7 @@
    <InputText
      v-else
      ref="inputRef"
-      v-model:modelValue="inputValue"
+      v-model:model-value="inputValue"
      v-focus
      type="text"
      size="small"
--- a/src/components/common/ExtensionSlot.vue
+++ b/src/components/common/ExtensionSlot.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'

-import { CustomExtension, VueExtension } from '@/types/extensionTypes'
+import type { CustomExtension, VueExtension } from '@/types/extensionTypes'

 const props = defineProps<{
  extension: VueExtension | CustomExtension
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -21,7 +21,7 @@
      <component
        :is="markRaw(getFormComponent(props.item))"
        :id="props.id"
-        v-model:modelValue="formValue"
+        v-model:model-value="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 { FormItem } from '@/platform/settings/types'
+import type { FormItem } from '@/platform/settings/types'

 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
--- a/src/components/common/RefreshButton.vue
+++ b/src/components/common/RefreshButton.vue
@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'

-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'

 const {
  disabled,
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,7 +1,7 @@
 <template>
  <Tree
-    v-model:expandedKeys="expandedKeys"
-    v-model:selectionKeys="selectionKeys"
+    v-model:expanded-keys="expandedKeys"
+    v-model:selection-keys="selectionKeys"
    class="tree-explorer py-0 px-2 2xl:px-4"
    :class="props.class"
    :value="renderedRoot.children"
--- a/src/components/common/TreeExplorerTreeNode.spec.ts
+++ b/src/components/common/TreeExplorerTreeNode.spec.ts
@@ -9,10 +9,8 @@ import { createI18n } from 'vue-i18n'

 import EditableText from '@/components/common/EditableText.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import {
-  InjectKeyHandleEditLabelFunction,
-  RenderedTreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'

 // Create a mock i18n instance
 const i18n = createI18n({
--- a/src/components/dialog/content/ManagerProgressDialogContent.test.ts
+++ b/src/components/dialog/content/ManagerProgressDialogContent.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
--- a/src/components/dialog/content/SignInContent.vue
+++ b/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 { SignInData, SignUpData } from '@/schemas/signInSchema'
+import type { SignInData, SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'

 import ApiKeyForm from './signin/ApiKeyForm.vue'
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -17,7 +17,8 @@
 </template>

 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/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:selectedTab="selectedTab"
+        v-model:selected-tab="selectedTab"
        :tabs="tabs"
      />
      <div
@@ -57,9 +57,9 @@
            </IconButton>
          </div>
          <RegistrySearchBar
-            v-model:searchQuery="searchQuery"
-            v-model:searchMode="searchMode"
-            v-model:sortField="sortField"
+            v-model:search-query="searchQuery"
+            v-model:search-mode="searchMode"
+            v-model:sort-field="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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'

 const { initialTab } = defineProps<{
  initialTab?: ManagerTab
--- a/src/components/dialog/content/manager/NodeConflictDialogContent.vue
+++ b/src/components/dialog/content/manager/NodeConflictDialogContent.vue
@@ -169,7 +169,7 @@ import { useI18n } from 'vue-i18n'

 import ContentDivider from '@/components/common/ContentDivider.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
-import {
+import type {
  ConflictDetail,
  ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'
--- a/src/components/dialog/content/manager/PackStatusMessage.vue
+++ b/src/components/dialog/content/manager/PackStatusMessage.vue
@@ -19,7 +19,7 @@
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'

-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'

 type PackVersionStatus = components['schemas']['NodeVersionStatus']
--- a/src/components/dialog/content/manager/PackVersionBadge.test.ts
+++ b/src/components/dialog/content/manager/PackVersionBadge.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+++ b/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
-import { 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'

--- a/src/components/dialog/content/manager/button/PackEnableToggle.test.ts
+++ b/src/components/dialog/content/manager/button/PackEnableToggle.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'
--- a/src/components/dialog/content/manager/button/PackEnableToggle.vue
+++ b/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 { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'

 const TOGGLE_DEBOUNCE_MS = 256

--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -31,13 +31,11 @@ import { useConflictDetection } from '@/composables/useConflictDetection'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import {
-  type ConflictDetail,
-  ConflictDetectionResult
-} from '@/types/conflictDetectionTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'

 type NodePack = components['schemas']['Node']

--- a/src/components/dialog/content/manager/button/PackUninstallButton.vue
+++ b/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 { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'

 type NodePack = components['schemas']['Node']

--- a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'

--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'

--- a/src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'

--- a/src/components/dialog/content/manager/infoPanel/InfoTabs.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'

--- a/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
+++ b/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
@@ -8,7 +8,7 @@
 </template>

 <script setup lang="ts">
-const { value = 'N/A', label = 'N/A' } = defineProps<{
+const { value = 'N/A', label } = defineProps<{
  label: string
  value?: string | number
 }>()
--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
+++ b/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'

 import enMessages from '@/locales/en/main.json' with { type: 'json' }
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'

 import DescriptionTabPanel from './DescriptionTabPanel.vue'

--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { isValidUrl } from '@/utils/formatUtil'

 const { t } = useI18n()
--- a/src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/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 { components, operations } from '@/types/comfyRegistryTypes'
+import type { components, operations } from '@/types/comfyRegistryTypes'
 import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'

 type ListComfyNodesResponse =
--- a/src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
-import { 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<{
--- a/src/components/dialog/content/manager/packBanner/PackBanner.vue
+++ b/src/components/dialog/content/manager/packBanner/PackBanner.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'

-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'

 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'

--- a/src/components/dialog/content/manager/packIcon/PackIcon.vue
+++ b/src/components/dialog/content/manager/packIcon/PackIcon.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'

-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'

 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'

--- a/src/components/dialog/content/manager/packIcon/PackIconStacked.vue
+++ b/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 { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'

 const {
  nodePacks,
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/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:modelValue="searchMode"
+          v-model:model-value="searchMode"
          :options="filterOptions"
          :label="$t('g.filter')"
        />
        <SearchFilterDropdown
-          v-model:modelValue="sortField"
+          v-model:model-value="sortField"
          :options="availableSortOptions"
          :label="$t('g.sort')"
        />
@@ -62,9 +62,8 @@

 <script setup lang="ts">
 import { stubTrue } from 'es-toolkit/compat'
-import AutoComplete, {
-  AutoCompleteOptionSelectEvent
-} from 'primevue/autocomplete'
+import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
+import AutoComplete from 'primevue/autocomplete'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

@@ -77,7 +76,7 @@ import {
  type SearchOption,
  SortableAlgoliaField
 } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type {
  QuerySuggestion,
  SearchMode,
--- a/src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
+++ b/src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/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 {
-  AuditLog,
  EventType,
  useCustomerEventsService
 } from '@/services/customerEventsService'
--- a/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
+++ b/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'

-import { KeyComboImpl } from '@/stores/keybindingStore'
+import type { KeyComboImpl } from '@/stores/keybindingStore'

 const { keyCombo, isModified = false } = defineProps<{
  keyCombo: KeyComboImpl
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -79,7 +79,8 @@
 </template>

 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
--- a/src/components/dialog/content/signin/SignInForm.spec.ts
+++ b/src/components/dialog/content/signin/SignInForm.spec.ts
@@ -1,5 +1,6 @@
 import { Form } from '@primevue/forms'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -71,7 +71,8 @@
 </template>

 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -59,7 +59,8 @@
 </template>

 <script setup lang="ts">
-import { Form, FormField, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
--- a/src/components/dialog/header/ManagerProgressHeader.vue
+++ b/src/components/dialog/header/ManagerProgressHeader.vue
@@ -4,7 +4,7 @@
    class="px-4 py-2 flex items-center"
  >
    <TabMenu
-      v-model:activeIndex="activeTabIndex"
+      v-model:active-index="activeTabIndex"
      :model="tabs"
      class="w-full border-none"
      :pt="{
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -34,7 +34,7 @@ const updateWidgets = () => {
    const widget = widgetState.widget

    // Early exit for non-visible widgets
-    if (!widget.isVisible()) {
+    if (!widget.isVisible() || !widgetState.active) {
      widgetState.visible = false
      continue
    }
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -135,7 +135,8 @@
 </template>

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

--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,7 +7,7 @@
    severity="secondary"
    text
    data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]"
+    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
    @click="toggleBypass"
  >
    <template #icon>
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -50,7 +50,8 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import { Raw, computed, ref, watch } from 'vue'
+import type { Raw } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

 import type {
--- a/src/components/graph/selectionToolbox/DeleteButton.vue
+++ b/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 { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'

 const { t } = useI18n()
--- a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
+++ b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
@@ -17,7 +17,8 @@
 import Button from 'primevue/button'

 import { st } from '@/i18n'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommand } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'

 defineProps<{
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -48,9 +48,9 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'

-import {
-  type MenuOption,
-  type SubMenuOption
+import type {
+  MenuOption,
+  SubMenuOption
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'

--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/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 { 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
 }>()
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -19,14 +19,15 @@

 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
-import { CSSProperties, computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { 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 { DomWidgetState } from '@/stores/domWidgetStore'
+import type { DomWidgetState } from '@/stores/domWidgetStore'

 const { widgetState } = defineProps<{
  widgetState: DomWidgetState
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -15,7 +15,7 @@
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'

-import { 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'

--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/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'
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'

 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'

 // Combine our component props with PrimeVue MultiSelect props
 interface ExtendedProps extends Partial<MultiSelectProps> {
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'

 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'

 // Combine our component props with PrimeVue MultiSelect props
 // Since we use v-bind="$attrs", all PrimeVue props are available
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -106,9 +106,8 @@

 <script setup lang="ts">
 import Button from 'primevue/button'
-import MultiSelect, {
-  MultiSelectPassThroughMethodOptions
-} from 'primevue/multiselect'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

@@ -117,7 +116,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

--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -58,13 +58,14 @@
 </template>

 <script setup lang="ts">
-import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select 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
--- a/src/components/install/MirrorsConfiguration.vue
+++ b/src/components/install/MirrorsConfiguration.vue
@@ -34,16 +34,16 @@
 </template>

 <script setup lang="ts">
-import {
-  TorchDeviceType,
-  TorchMirrorUrl
-} from '@comfyorg/comfyui-electron-types'
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
 import Divider from 'primevue/divider'
 import Panel from 'primevue/panel'
-import { ModelRef, computed, onMounted, ref } from 'vue'
+import type { ModelRef } from 'vue'
+import { computed, onMounted, ref } from 'vue'

 import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import { PYPI_MIRROR, PYTHON_MIRROR, UVMirror } from '@/constants/uvMirrors'
+import type { UVMirror } from '@/constants/uvMirrors'
+import { PYPI_MIRROR, PYTHON_MIRROR } from '@/constants/uvMirrors'
 import { t } from '@/i18n'
 import { isInChina } from '@/utils/networkUtil'
 import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'
--- a/src/components/install/mirror/MirrorItem.vue
+++ b/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 { 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'
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -95,7 +95,7 @@ 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 {
+import type {
  CameraType,
  Load3DNodeType,
  MaterialMode,
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -93,7 +93,7 @@ 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 {
+import type {
  AnimationItem,
  CameraType,
  Load3DAnimationNodeType,
--- a/src/components/load3d/Load3DAnimationScene.vue
+++ b/src/components/load3d/Load3DAnimationScene.vue
@@ -27,13 +27,13 @@
 import { ref, watch } from 'vue'

 import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
  CameraType,
  MaterialMode,
  UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'

 const props = defineProps<{
  node: any
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -99,7 +99,7 @@ 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 {
+import type {
  CameraType,
  MaterialMode,
  UpDirection
--- a/src/components/load3d/Load3DScene.vue
+++ b/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 Load3d from '@/extensions/core/load3d/Load3d'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
  CameraType,
  MaterialMode,
  UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'

--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/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 { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'

--- a/src/components/load3d/controls/CameraControls.vue
+++ b/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 { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'

 const vTooltip = Tooltip
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -99,7 +99,10 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'

-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'

--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -79,7 +79,7 @@ import { Tooltip } from 'primevue'
 import Button from 'primevue/button'

 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLoad3dService } from '@/services/load3dService'

 const vTooltip = Tooltip
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/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 { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'

--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/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 { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'

 const cameras = [
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -26,7 +26,10 @@
 import Select from 'primevue/select'
 import { computed } from 'vue'

-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'

 const upDirection = defineModel<UpDirection>('upDirection')
--- a/src/components/maintenance/TaskListItem.vue
+++ b/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 { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'

 import TaskListStatusIcon from './TaskListStatusIcon.vue'
--- a/src/components/maintenance/TaskListStatusIcon.vue
+++ b/src/components/maintenance/TaskListStatusIcon.vue
@@ -8,7 +8,8 @@
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
-import { MaybeRef, computed } from 'vue'
+import type { MaybeRef } from 'vue'
+import { computed } from 'vue'

 import { t } from '@/i18n'

--- a/src/components/maintenance/TerminalOutputDrawer.vue
+++ b/src/components/maintenance/TerminalOutputDrawer.vue
@@ -10,9 +10,10 @@
 </template>

 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
+import type { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
-import { Ref, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted } from 'vue'

 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -88,11 +88,8 @@ 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 {
-  ComfyNodeDefImpl,
-  useNodeDefStore,
-  useNodeFrequencyStore
-} from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'

 import SearchFilterChip from '../common/SearchFilterChip.vue'
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -38,21 +38,19 @@ import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'

-import { Point } from '@/lib/litegraph/src/interfaces'
-import {
-  LGraphNode,
-  LiteGraph,
-  LiteGraphCanvasEvent
-} from '@/lib/litegraph/src/litegraph'
+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 { 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 { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import { FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'

 import NodeSearchBox from './NodeSearchBox.vue'

--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -27,8 +27,9 @@ import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'

-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'

 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
 const selectedFilter = ref<FuseFilter<ComfyNodeDefImpl, string>>()
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -53,7 +53,8 @@ import { computed } from 'vue'

 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
 import { highlightQuery } from '@/utils/formatUtil'
 import { formatNumberWithSuffix } from '@/utils/formatUtil'
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -21,7 +21,7 @@
    </template>
    <template #header>
      <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="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:expandedKeys="expandedKeys"
+        v-model:expanded-keys="expandedKeys"
        class="model-lib-tree-explorer"
        :root="renderedRoot"
      >
@@ -56,12 +56,8 @@ 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 {
-  ComfyModelDef,
-  ModelFolder,
-  ResourceState,
-  useModelStore
-} from '@/stores/modelStore'
+import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
+import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -78,7 +78,7 @@
      <template #header>
        <div>
          <SearchBox
-            v-model:modelValue="searchQuery"
+            v-model:model-value="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:expandedKeys="expandedKeys"
+            v-model:expanded-keys="expandedKeys"
            class="node-lib-tree-explorer"
            :root="renderedRoot"
          >
@@ -129,10 +129,11 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
-import { Ref, computed, h, nextTick, ref, render } from 'vue'
+import type { Ref } from 'vue'
+import { computed, h, nextTick, ref, render } from 'vue'

 import SearchBox from '@/components/common/SearchBox.vue'
-import { 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'
@@ -148,7 +149,8 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
  GroupingStrategyId,
@@ -156,7 +158,7 @@ import type {
 } from '@/types/nodeOrganizationTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
-import { FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'

 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'

--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -86,7 +86,7 @@
  <ConfirmPopup />
  <ContextMenu ref="menu" :model="menuItems" />
  <ResultGallery
-    v-model:activeIndex="galleryActiveIndex"
+    v-model:active-index="galleryActiveIndex"
    :all-gallery-items="allGalleryItems"
  />
 </template>
@@ -105,16 +105,13 @@ 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 { 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 {
-  ResultItemImpl,
-  TaskItemImpl,
-  useQueueStore
-} from '@/stores/queueStore'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'

 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import ResultGallery from './queue/ResultGallery.vue'
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -14,7 +14,7 @@
    </template>
    <template #header>
      <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="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:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
            :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
            :selection-keys="selectionKeys"
          >
@@ -74,7 +74,7 @@
            class="ml-2"
          />
          <TreeExplorer
-            v-model:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
            :root="
              renderTreeNode(
                bookmarkedWorkflowsTree,
@@ -96,7 +96,7 @@
          />
          <TreeExplorer
            v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expandedKeys="expandedKeys"
+            v-model:expanded-keys="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:expandedKeys="expandedKeys"
+          v-model:expanded-keys="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 { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'

--- a/Show More
+++ b/Show More