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

src/assets/css/style.css

@@ -2,8 +2,9 @@
 
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
+@import 'tw-animate-css';
 
-@plugin "tailwindcss-primeui";
+@plugin 'tailwindcss-primeui';
 
 @config '../../../tailwind.config.ts';
 
@@ -98,6 +99,7 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
+  --color-bypass: #6A246A;
   --color-error: #962a2a;
 
   --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
@@ -114,6 +116,14 @@
   --color-dark-elevation-2: rgba(from white r g b / 0.03);
 }
 
+@theme inline {
+  --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-500);
+  --color-node-component-surface-selected: var(--color-charcoal-700);
+  --color-node-stroke: var(--color-stone-100);
+}
+
 @custom-variant dark-theme {
   .dark-theme & {
     @slot;
@@ -952,9 +962,7 @@ audio.comfy-audio.empty-audio-widget {
   /* Uses default styling - no overrides needed */
 }
 
-/* Smooth transitions between LOD levels */
 .lg-node {
-  transition: min-height 0.2s ease;
   /* Disable text selection on all nodes */
   user-select: none;
   -webkit-user-select: none;

src/assets/icons/custom/mask.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_704_2695)">
+    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
+    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
+    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_704_2695">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

src/base/common/downloadUtil.ts

@@ -0,0 +1,41 @@
+/**
+ * Utility functions for downloading files
+ */
+
+// Constants
+const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
+
+/**
+ * Download a file from a URL by creating a temporary anchor element
+ * @param url - The URL of the file to download (must be a valid URL string)
+ * @param filename - Optional filename override (will use URL filename or default if not provided)
+ * @throws {Error} If the URL is invalid or empty
+ */
+export const downloadFile = (url: string, filename?: string): void => {
+  if (!url || typeof url !== 'string' || url.trim().length === 0) {
+    throw new Error('Invalid URL provided for download')
+  }
+  const link = document.createElement('a')
+  link.href = url
+  link.download =
+    filename || extractFilenameFromUrl(url) || DEFAULT_DOWNLOAD_FILENAME
+
+  // Trigger download
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * Extract filename from a URL's query parameters
+ * @param url - The URL to extract filename from
+ * @returns The extracted filename or null if not found
+ */
+const extractFilenameFromUrl = (url: string): string | null => {
+  try {
+    const urlObj = new URL(url, window.location.origin)
+    return urlObj.searchParams.get('filename')
+  } catch {
+    return null
+  }
+}

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -50,7 +50,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 

src/components/MenuHamburger.vue

@@ -23,8 +23,8 @@
 import Button from 'primevue/button'
 import { CSSProperties, computed, watchEffect } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 

src/components/actionbar/BatchCountEdit.vue

@@ -37,8 +37,8 @@ import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)

src/components/actionbar/ComfyActionbar.vue

@@ -24,7 +24,7 @@ import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
 import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -37,7 +37,7 @@ const visible = computed(() => position.value !== 'Disabled')
 const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
-const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', false)
+const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0

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

@@ -7,9 +7,11 @@
 </template>
 
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import { Ref, onUnmounted, ref } from 'vue'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
@@ -19,6 +21,15 @@ const terminalEl = ref<HTMLElement | undefined>()
 const rootEl = ref<HTMLElement | undefined>()
 emit('created', useTerminal(terminalEl), rootEl)
 
+const showContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  electronAPI()?.showContextMenu({ type: 'text' })
+}
+
+if (isElectron()) {
+  useEventListener(terminalEl, 'contextmenu', showContextMenu)
+}
+
 onUnmounted(() => emit('unmounted'))
 </script>
 

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -38,10 +38,10 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useCanvasStore } from '@/stores/graphStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
 
 const MIN_WIDTH = 28

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -53,11 +53,14 @@ import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { appendJsonExt } from '@/utils/formatUtil'
 
 interface Props {

src/components/common/BackgroundImageUpload.vue

@@ -36,8 +36,8 @@ import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
-import { useToastStore } from '@/stores/toastStore'
 
 const modelValue = defineModel<string>()
 

src/components/common/FormItem.vue

@@ -40,10 +40,11 @@ import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
+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 '@/types/settingTypes'
+import { FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -66,6 +67,7 @@ function getFormAttrs(item: FormItem) {
   }
   switch (item.type) {
     case 'combo':
+    case 'radio':
       attrs['options'] =
         typeof item.options === 'function'
           ? // @ts-expect-error: Audit and deprecate usage of legacy options type:
@@ -97,6 +99,8 @@ function getFormComponent(item: FormItem): Component {
       return InputKnob
     case 'combo':
       return Select
+    case 'radio':
+      return FormRadioGroup
     case 'image':
       return FormImageUpload
     case 'color':

src/components/common/FormRadioGroup.spec.ts

@@ -0,0 +1,245 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import RadioButton from 'primevue/radiobutton'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { createApp } from 'vue'
+
+import type { SettingOption } from '@/platform/settings/types'
+
+import FormRadioGroup from './FormRadioGroup.vue'
+
+describe('FormRadioGroup', () => {
+  beforeAll(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  const mountComponent = (props: any, options = {}) => {
+    return mount(FormRadioGroup, {
+      global: {
+        plugins: [PrimeVue],
+        components: { RadioButton }
+      },
+      props,
+      ...options
+    })
+  }
+
+  describe('normalizedOptions computed property', () => {
+    it('handles string array options', () => {
+      const wrapper = mountComponent({
+        modelValue: 'option1',
+        options: ['option1', 'option2', 'option3'],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('option1')
+      expect(radioButtons[1].props('value')).toBe('option2')
+      expect(radioButtons[2].props('value')).toBe('option3')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('option1')
+      expect(labels[1].text()).toBe('option2')
+      expect(labels[2].text()).toBe('option3')
+    })
+
+    it('handles SettingOption array', () => {
+      const options: SettingOption[] = [
+        { text: 'Small', value: 'sm' },
+        { text: 'Medium', value: 'md' },
+        { text: 'Large', value: 'lg' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'md',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('sm')
+      expect(radioButtons[1].props('value')).toBe('md')
+      expect(radioButtons[2].props('value')).toBe('lg')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Small')
+      expect(labels[1].text()).toBe('Medium')
+      expect(labels[2].text()).toBe('Large')
+    })
+
+    it('handles SettingOption with undefined value (uses text as value)', () => {
+      const options: SettingOption[] = [
+        { text: 'Option A', value: undefined },
+        { text: 'Option B' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'Option A',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('value')).toBe('Option A')
+      expect(radioButtons[1].props('value')).toBe('Option B')
+    })
+
+    it('handles custom object with optionLabel and optionValue', () => {
+      const options = [
+        { name: 'First Option', id: 1 },
+        { name: 'Second Option', id: 2 },
+        { name: 'Third Option', id: 3 }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 2,
+        options,
+        optionLabel: 'name',
+        optionValue: 'id',
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe(1)
+      expect(radioButtons[1].props('value')).toBe(2)
+      expect(radioButtons[2].props('value')).toBe(3)
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('First Option')
+      expect(labels[1].text()).toBe('Second Option')
+      expect(labels[2].text()).toBe('Third Option')
+    })
+
+    it('handles mixed array with strings and SettingOptions', () => {
+      const options: (string | SettingOption)[] = [
+        'Simple String',
+        { text: 'Complex Option', value: 'complex' },
+        'Another String'
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'complex',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('Simple String')
+      expect(radioButtons[1].props('value')).toBe('complex')
+      expect(radioButtons[2].props('value')).toBe('Another String')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Simple String')
+      expect(labels[1].text()).toBe('Complex Option')
+      expect(labels[2].text()).toBe('Another String')
+    })
+
+    it('handles empty options array', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: [],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles undefined options gracefully', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: undefined,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles object with missing properties gracefully', () => {
+      const options = [
+        { label: 'Option 1', val: 'opt1' },
+        { text: 'Option 2', value: 'opt2' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(2)
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Unknown')
+      expect(labels[1].text()).toBe('Option 2')
+    })
+  })
+
+  describe('component functionality', () => {
+    it('sets correct input-id and name attributes', () => {
+      const options = ['A', 'B']
+
+      const wrapper = mountComponent({
+        modelValue: 'A',
+        options,
+        id: 'my-radio-group'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
+      expect(radioButtons[0].props('name')).toBe('my-radio-group')
+      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
+      expect(radioButtons[1].props('name')).toBe('my-radio-group')
+    })
+
+    it('associates labels with radio buttons correctly', () => {
+      const options = ['Yes', 'No']
+
+      const wrapper = mountComponent({
+        modelValue: 'Yes',
+        options,
+        id: 'confirm-radio'
+      })
+
+      const labels = wrapper.findAll('label')
+
+      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
+      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
+    })
+
+    it('sets aria-describedby attribute correctly', () => {
+      const options: SettingOption[] = [
+        { text: 'Option 1', value: 'opt1' },
+        { text: 'Option 2', value: 'opt2' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].attributes('aria-describedby')).toBe(
+        'Option 1-label'
+      )
+      expect(radioButtons[1].attributes('aria-describedby')).toBe(
+        'Option 2-label'
+      )
+    })
+  })
+})

src/components/common/FormRadioGroup.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-row gap-4">
+    <div
+      v-for="option in normalizedOptions"
+      :key="option.value"
+      class="flex items-center"
+    >
+      <RadioButton
+        :input-id="`${id}-${option.value}`"
+        :name="id"
+        :value="option.value"
+        :model-value="modelValue"
+        :aria-describedby="`${option.text}-label`"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
+        {{ option.text }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RadioButton from 'primevue/radiobutton'
+import { computed } from 'vue'
+
+import type { SettingOption } from '@/platform/settings/types'
+
+const props = defineProps<{
+  modelValue: any
+  options: (SettingOption | string)[]
+  optionLabel?: string
+  optionValue?: string
+  id?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const normalizedOptions = computed<SettingOption[]>(() => {
+  if (!props.options) return []
+
+  return props.options.map((option) => {
+    if (typeof option === 'string') {
+      return { text: option, value: option }
+    }
+
+    if ('text' in option) {
+      return {
+        text: option.text,
+        value: option.value ?? option.text
+      }
+    }
+    // Handle optionLabel/optionValue
+    return {
+      text: option[props.optionLabel || 'text'] || 'Unknown',
+      value: option[props.optionValue || 'value']
+    }
+  })
+})
+</script>

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 const settingStore = useSettingStore()
 const workflowStore = useWorkflowStore()

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,4 +1,3 @@
-<!-- Prompt user that the workflow contains API nodes that needs login to run -->
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -94,9 +94,9 @@ import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   message: string

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -60,9 +60,9 @@ import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 

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

@@ -7,7 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -39,7 +39,7 @@ import { useI18n } from 'vue-i18n'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here

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

@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import ManagerHeader from './ManagerHeader.vue'
 

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

@@ -6,7 +6,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import PackVersionBadge from './PackVersionBadge.vue'
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'

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

@@ -10,7 +10,7 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 // SelectedVersion is now using direct strings instead of enum
 

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

@@ -6,7 +6,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 
 import PackEnableToggle from './PackEnableToggle.vue'

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 import { components } from '@/types/comfyRegistryTypes'
 
 import DescriptionTabPanel from './DescriptionTabPanel.vue'

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

@@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import GridSkeleton from './GridSkeleton.vue'
 import PackCardSkeleton from './PackCardSkeleton.vue'

src/components/dialog/content/setting/SettingItem.spec.ts

@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import SettingItem from './SettingItem.vue'
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
 
 const i18n = createI18n({
   legacy: false,

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

@@ -10,7 +10,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import SignInForm from './SignInForm.vue'
 

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -75,16 +75,16 @@ import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
-import { useWorkflowService } from '@/services/workflowService'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()

src/components/graph/DomWidgets.vue

@@ -16,8 +16,8 @@ import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
 

src/components/graph/GraphCanvas.vue

@@ -40,13 +40,12 @@
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
-      v-for="nodeData in nodesToRender"
+      v-for="nodeData in allNodes"
       :key="nodeData.id"
       :node-data="nodeData"
       :position="nodePositions.get(nodeData.id)"
       :size="nodeSizes.get(nodeData.id)"
       :readonly="false"
-      :executing="executionStore.executingNodeId === nodeData.id"
       :error="
         executionStore.lastExecutionError?.node_id === nodeData.id
           ? 'Execution error'
@@ -105,33 +104,34 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
-import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
-import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
-import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
+import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
+import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import TransformPane from '@/renderer/core/layout/TransformPane.vue'
+import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import { useExecutionStateProvider } from '@/renderer/extensions/vueNodes/execution/useExecutionStateProvider'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { newUserService } from '@/services/newUserService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -183,12 +183,12 @@ const nodeEventHandlers = useNodeEventHandlers(vueNodeLifecycle.nodeManager)
 
 const nodePositions = vueNodeLifecycle.nodePositions
 const nodeSizes = vueNodeLifecycle.nodeSizes
-const nodesToRender = viewportCulling.nodesToRender
+const allNodes = viewportCulling.allNodes
 
 const handleTransformUpdate = () => {
-  viewportCulling.handleTransformUpdate(
-    vueNodeLifecycle.detectChangesInRAF.value
-  )
+  viewportCulling.handleTransformUpdate()
+  // TODO: Fix paste position sync in separate PR
+  vueNodeLifecycle.detectChangesInRAF.value()
 }
 const handleNodeSelect = nodeEventHandlers.handleNodeSelect
 const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
@@ -205,6 +205,9 @@ const selectedNodeIds = computed(
 )
 provide(SelectedNodeIdsKey, selectedNodeIds)
 
+// Provide execution state to all Vue nodes
+useExecutionStateProvider()
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -428,7 +431,9 @@ onMounted(async () => {
   workflowPersistence.restoreWorkflowTabsState()
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
-  const { useReleaseStore } = await import('@/stores/releaseStore')
+  const { useReleaseStore } = await import(
+    '@/platform/updates/common/releaseStore'
+  )
   const releaseStore = useReleaseStore()
   void releaseStore.initialize()
 

src/components/graph/GraphCanvasMenu.vue

@@ -127,10 +127,10 @@ import { useI18n } from 'vue-i18n'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import ZoomControlsModal from './modals/ZoomControlsModal.vue'

src/components/graph/NodeTooltip.vue

@@ -19,10 +19,10 @@ import {
   isOverNodeInput,
   isOverNodeOutput
 } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number

src/components/graph/SelectionToolbox.spec.ts

@@ -0,0 +1,500 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useExtensionService } from '@/services/extensionService'
+
+// Mock the composables and services
+vi.mock('@/composables/graph/useCanvasInteractions', () => ({
+  useCanvasInteractions: vi.fn(() => ({
+    handleWheel: vi.fn()
+  }))
+}))
+
+vi.mock('@/composables/canvas/useSelectionToolboxPosition', () => ({
+  useSelectionToolboxPosition: vi.fn(() => ({
+    visible: { value: true }
+  })),
+  resetMoreOptionsState: vi.fn()
+}))
+
+vi.mock('@/composables/element/useRetriggerableAnimation', () => ({
+  useRetriggerableAnimation: vi.fn(() => ({
+    shouldAnimate: { value: false }
+  }))
+}))
+
+vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
+  useMinimap: vi.fn(() => ({
+    containerStyles: {
+      value: {
+        backgroundColor: '#ffffff'
+      }
+    }
+  }))
+}))
+
+vi.mock('@/services/extensionService', () => ({
+  useExtensionService: vi.fn(() => ({
+    extensionCommands: { value: new Map() },
+    invokeExtensions: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true),
+  isImageNode: vi.fn(() => false),
+  isLoad3dNode: vi.fn(() => false)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  isOutputNode: vi.fn(() => false),
+  filterOutputNodes: vi.fn((nodes) => nodes.filter(() => false))
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.Load3D.3DViewerEnable') return true
+      return null
+    })
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    getCommand: vi.fn(() => ({ id: 'test-command', title: 'Test Command' }))
+  })
+}))
+
+let nodeDefMock = {
+  type: 'TestNode',
+  title: 'Test Node'
+} as unknown
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: () => ({
+    fromLGraphNode: vi.fn(() => nodeDefMock)
+  })
+}))
+
+describe('SelectionToolbox', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          info: 'Node Info',
+          bookmark: 'Save to Library',
+          frameNodes: 'Frame Nodes',
+          moreOptions: 'More Options',
+          refreshNode: 'Refresh Node'
+        }
+      }
+    }
+  })
+
+  const mockProvide = {
+    isVisible: { value: true },
+    selectedItems: []
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+
+    // Mock the canvas to avoid "getCanvas: canvas is null" errors
+    canvasStore.canvas = {
+      setDirty: vi.fn(),
+      state: {
+        selectionChanged: false
+      }
+    } as any
+
+    vi.resetAllMocks()
+  })
+
+  const mountComponent = (props = {}) => {
+    return mount(SelectionToolbox, {
+      props,
+      global: {
+        plugins: [i18n, PrimeVue],
+        provide: {
+          [Symbol.for('SelectionOverlay')]: mockProvide
+        },
+        stubs: {
+          Panel: {
+            template:
+              '<div class="panel selection-toolbox absolute left-1/2 rounded-lg"><slot /></div>',
+            props: ['pt', 'style', 'class']
+          },
+          InfoButton: { template: '<div class="info-button" />' },
+          ColorPickerButton: {
+            template:
+              '<button data-testid="color-picker-button" class="color-picker-button" />'
+          },
+          FrameNodes: { template: '<div class="frame-nodes" />' },
+          PublishButton: {
+            template:
+              '<button data-testid="add-to-library" class="bookmark-button" />'
+          },
+          BypassButton: {
+            template:
+              '<button data-testid="bypass-button" class="bypass-button" />'
+          },
+          PinButton: { template: '<div class="pin-button" />' },
+          Load3DViewerButton: {
+            template: '<div class="load-3d-viewer-button" />'
+          },
+          MaskEditorButton: { template: '<div class="mask-editor-button" />' },
+          DeleteButton: {
+            template:
+              '<button data-testid="delete-button" class="delete-button" />'
+          },
+          RefreshSelectionButton: {
+            template: '<div class="refresh-button" />'
+          },
+          ExecuteButton: { template: '<div class="execute-button" />' },
+          ConvertToSubgraphButton: {
+            template:
+              '<button data-testid="convert-to-subgraph-button" class="convert-to-subgraph-button" />'
+          },
+          ExtensionCommandButton: {
+            template: '<div class="extension-command-button" />'
+          },
+          MoreOptions: {
+            template:
+              '<button data-testid="more-options-button" class="more-options" />'
+          },
+          VerticalDivider: { template: '<div class="vertical-divider" />' }
+        }
+      }
+    })
+  }
+
+  describe('Button Visibility Logic', () => {
+    beforeEach(() => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+    })
+
+    it('should show info button only for single selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.info-button').exists()).toBe(true)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.info-button').exists()).toBe(false)
+    })
+
+    it('should not show info button when node definition is not found', () => {
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      // mock nodedef and return null
+      nodeDefMock = null
+      // remount component
+      const wrapper = mountComponent()
+      expect(wrapper.find('.info-button').exists()).toBe(false)
+    })
+
+    it('should show color picker for all selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
+        true
+      )
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(
+        wrapper2.find('[data-testid="color-picker-button"]').exists()
+      ).toBe(true)
+    })
+
+    it('should show frame nodes only for multiple selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
+    })
+
+    it('should show bypass button for appropriate selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
+    })
+
+    it('should show common buttons for all selections', () => {
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
+      expect(
+        wrapper.find('[data-testid="convert-to-subgraph-button"]').exists()
+      ).toBe(true)
+      expect(wrapper.find('[data-testid="more-options-button"]').exists()).toBe(
+        true
+      )
+    })
+
+    it('should show mask editor only for single image nodes', async () => {
+      const mockUtils = await import('@/utils/litegraphUtil')
+      const isImageNodeSpy = vi.spyOn(mockUtils, 'isImageNode')
+
+      // Single image node
+      isImageNodeSpy.mockReturnValue(true)
+      canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
+
+      // Single non-image node
+      isImageNodeSpy.mockReturnValue(false)
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
+    })
+
+    it('should show Color picker button only for single Load3D nodes', async () => {
+      const mockUtils = await import('@/utils/litegraphUtil')
+      const isLoad3dNodeSpy = vi.spyOn(mockUtils, 'isLoad3dNode')
+
+      // Single Load3D node
+      isLoad3dNodeSpy.mockReturnValue(true)
+      canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
+
+      // Single non-Load3D node
+      isLoad3dNodeSpy.mockReturnValue(false)
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
+    })
+
+    it('should show ExecuteButton only when output nodes are selected', async () => {
+      const mockNodeFilterUtil = await import('@/utils/nodeFilterUtil')
+      const isOutputNodeSpy = vi.spyOn(mockNodeFilterUtil, 'isOutputNode')
+      const filterOutputNodesSpy = vi.spyOn(
+        mockNodeFilterUtil,
+        'filterOutputNodes'
+      )
+
+      // With output node selected
+      isOutputNodeSpy.mockReturnValue(true)
+      filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
+      canvasStore.selectedItems = [
+        { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
+      ] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.execute-button').exists()).toBe(true)
+
+      // Without output node selected
+      isOutputNodeSpy.mockReturnValue(false)
+      filterOutputNodesSpy.mockReturnValue([])
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.execute-button').exists()).toBe(false)
+
+      // No selection at all
+      canvasStore.selectedItems = []
+      wrapper2.unmount()
+      const wrapper3 = mountComponent()
+      expect(wrapper3.find('.execute-button').exists()).toBe(false)
+    })
+  })
+
+  describe('Divider Visibility Logic', () => {
+    it('should show dividers between button groups when both groups have buttons', () => {
+      // Setup single node to show info + other buttons
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const dividers = wrapper.findAll('.vertical-divider')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should not show dividers when adjacent groups are empty', () => {
+      // No selection should show minimal buttons and dividers
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      const buttons = wrapper.find('.panel').element.children
+      expect(buttons.length).toBeGreaterThan(0) // At least MoreOptions should show
+    })
+  })
+
+  describe('Extension Commands', () => {
+    it('should render extension command buttons when available', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: {
+          value: new Map([
+            ['test-command', { id: 'test-command', title: 'Test Command' }]
+          ])
+        },
+        invokeExtensions: vi.fn(() => ['test-command'])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.extension-command-button').exists()).toBe(true)
+    })
+
+    it('should not render extension commands when none available', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.extension-command-button').exists()).toBe(false)
+    })
+  })
+
+  describe('Container Styling', () => {
+    it('should apply minimap container styles', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.exists()).toBe(true)
+    })
+
+    it('should have correct CSS classes', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.classes()).toContain('selection-toolbox')
+      expect(panel.classes()).toContain('absolute')
+      expect(panel.classes()).toContain('left-1/2')
+      expect(panel.classes()).toContain('rounded-lg')
+    })
+
+    it('should handle animation class conditionally', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.exists()).toBe(true)
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('should handle wheel events', async () => {
+      const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
+      const handleWheelSpy = vi.fn()
+      mockCanvasInteractions.mockReturnValue({
+        handleWheel: handleWheelSpy
+      } as any)
+
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      await panel.trigger('wheel')
+
+      expect(handleWheelSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('No Selection State', () => {
+    beforeEach(() => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+    })
+
+    it('should still show MoreOptions when no items selected', () => {
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.more-options').exists()).toBe(true)
+    })
+
+    it('should hide most buttons when no items selected', () => {
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.info-button').exists()).toBe(false)
+      expect(wrapper.find('.color-picker-button').exists()).toBe(false)
+      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+      expect(wrapper.find('.bookmark-button').exists()).toBe(false)
+    })
+  })
+})

src/components/graph/SelectionToolbox.vue

@@ -8,28 +8,37 @@
       <Panel
         v-if="visible"
         class="rounded-lg selection-toolbox pointer-events-auto"
+        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',
-          content: 'p-0 flex flex-row'
+          content: 'px-1 py-1 h-10 px-1 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.handleWheel"
       >
-        <ExecuteButton />
-        <ColorPickerButton />
-        <BypassButton />
-        <PinButton />
-        <Load3DViewerButton />
-        <MaskEditorButton />
-        <ConvertToSubgraphButton />
-        <PublishSubgraphButton />
-        <DeleteButton />
-        <RefreshSelectionButton />
+        <DeleteButton v-if="showDelete" />
+        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
+        <InfoButton v-if="showInfoButton" />
+
+        <ColorPickerButton v-if="showColorPicker" />
+        <FrameNodes v-if="showFrameNodes" />
+        <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
+        <PublishSubgraphButton v-if="showPublishSubgraph" />
+        <MaskEditorButton v-if="showMaskEditor" />
+        <VerticalDivider
+          v-if="showAnyPrimaryActions && showAnyControlActions"
+        />
+
+        <BypassButton v-if="showBypass" />
+        <RefreshSelectionButton v-if="showRefresh" />
+        <Load3DViewerButton v-if="showLoad3DViewer" />
+
         <ExtensionCommandButton
           v-for="command in extensionToolboxCommands"
           :key="command.id"
           :command="command"
         />
-        <HelpButton />
+        <ExecuteButton v-if="showExecute" />
+        <MoreOptions />
       </Panel>
     </Transition>
   </div>
@@ -45,22 +54,29 @@ import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/Convert
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
-import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
 import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
-import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
+
+import FrameNodes from './selectionToolbox/FrameNodes.vue'
+import MoreOptions from './selectionToolbox/MoreOptions.vue'
+import VerticalDivider from './selectionToolbox/VerticalDivider.vue'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
+const minimap = useMinimap()
+const containerStyles = minimap.containerStyles
 
 const toolboxRef = ref<HTMLElement | undefined>()
 const { visible } = useSelectionToolboxPosition(toolboxRef)
@@ -80,6 +96,44 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
     .map((commandId) => commandStore.getCommand(commandId))
     .filter((command): command is ComfyCommandImpl => command !== undefined)
 })
+
+const {
+  hasAnySelection,
+  hasMultipleSelection,
+  isSingleNode,
+  isSingleSubgraph,
+  isSingleImageNode,
+  hasAny3DNodeSelected,
+  hasOutputNodesSelected,
+  nodeDef
+} = useSelectionState()
+const showInfoButton = computed(() => !!nodeDef.value)
+
+const showColorPicker = computed(() => hasAnySelection.value)
+const showConvertToSubgraph = computed(() => hasAnySelection.value)
+const showFrameNodes = computed(() => hasMultipleSelection.value)
+const showPublishSubgraph = computed(() => isSingleSubgraph.value)
+
+const showBypass = computed(
+  () =>
+    isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
+)
+const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
+const showMaskEditor = computed(() => isSingleImageNode.value)
+
+const showDelete = computed(() => hasAnySelection.value)
+const showRefresh = computed(() => hasAnySelection.value)
+const showExecute = computed(() => hasOutputNodesSelected.value)
+
+const showAnyPrimaryActions = computed(
+  () =>
+    showColorPicker.value ||
+    showConvertToSubgraph.value ||
+    showFrameNodes.value ||
+    showPublishSubgraph.value
+)
+
+const showAnyControlActions = computed(() => showBypass.value)
 </script>
 
 <style scoped>

src/components/graph/TitleEditor.vue

@@ -24,9 +24,12 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import {
+  useCanvasStore,
+  useTitleEditorStore
+} from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
 

src/components/graph/modals/ZoomControlsModal.vue

@@ -139,10 +139,10 @@ import { Button, InputNumber, InputNumberInputEvent } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const minimap = useMinimap()

src/components/graph/selectionToolbox/BypassButton.spec.ts

@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node',
+  mode: LGraphEventMode.ALWAYS
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
+}))
+
+describe('BypassButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let commandStore: ReturnType<typeof useCommandStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        selectionToolbox: {
+          bypassButton: {
+            tooltip: 'Toggle bypass mode'
+          }
+        }
+      }
+    }
+  })
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    commandStore = useCommandStore()
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(BypassButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:ban': true
+        }
+      }
+    })
+  }
+
+  it('should render bypass button', () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should have correct test id', () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('[data-testid="bypass-button"]')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should execute bypass command when clicked', async () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
+
+    const wrapper = mountComponent()
+    await wrapper.find('button').trigger('click')
+
+    expect(executeSpy).toHaveBeenCalledWith(
+      'Comfy.Canvas.ToggleSelectedNodes.Bypass'
+    )
+  })
+
+  it('should show normal styling when node is not bypassed', () => {
+    const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
+    canvasStore.selectedItems = [normalNode] as any
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.classes()).not.toContain(
+      'dark-theme:[&:not(:active)]:!bg-[#262729]'
+    )
+  })
+
+  it('should show bypassed styling when node is bypassed', async () => {
+    const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
+    canvasStore.selectedItems = [bypassedNode] as any
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
+    const wrapper = mountComponent()
+
+    // Click to trigger the reactivity update
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should handle multiple selected items', () => {
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
+    canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+})

src/components/graph/selectionToolbox/BypassButton.vue

@@ -1,6 +1,5 @@
 <template>
   <Button
-    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
@@ -8,12 +7,11 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    @click="
-      () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-    "
+    class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]"
+    @click="toggleBypass"
   >
     <template #icon>
-      <i-game-icons:detour />
+      <i-lucide:ban class="w-4 h-4" />
     </template>
   </Button>
 </template>
@@ -23,9 +21,11 @@ import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+
+const toggleBypass = async () => {
+  await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+}
 </script>

src/components/graph/selectionToolbox/ColorPickerButton.spec.ts

@@ -7,8 +7,8 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 // Mock the litegraph module
 vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -95,17 +95,6 @@ describe('ColorPickerButton', () => {
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
-  it('should not render when nothing is selected', () => {
-    // Keep selectedItems empty
-    canvasStore.selectedItems = []
-    const wrapper = createWrapper()
-    // The button exists but is hidden with v-show
-    expect(wrapper.find('button').exists()).toBe(true)
-    expect(wrapper.find('button').attributes('style')).toContain(
-      'display: none'
-    )
-  })
-
   it('should toggle color picker visibility on button click', async () => {
     canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
     const wrapper = createWrapper()

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="relative">
     <Button
-      v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
       v-tooltip.top="{
         value: localizedCurrentColorName ?? t('color.noColor'),
-        showDelay: 512
+        showDelay: 1000
       }"
+      data-testid="color-picker-button"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"
     >
-      <template #icon>
-        <div class="flex items-center gap-1">
-          <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
-          <i class="pi pi-chevron-down" :style="{ fontSize: '0.5rem' }" />
-        </div>
-      </template>
+      <div class="flex items-center gap-1 px-0">
+        <i
+          class="w-4 h-4 pi pi-circle-fill"
+          :style="{ color: currentColor ?? '' }"
+        />
+        <i
+          class="w-4 h-4 pi pi-chevron-down py-1"
+          :style="{ fontSize: '0.5rem' }"
+        />
+      </div>
     </Button>
     <div
       v-if="showColorPicker"
@@ -46,17 +50,20 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import { computed, ref, watch } from 'vue'
+import { Raw, computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { ColorOption as CanvasColorOption } from '@/lib/litegraph/src/litegraph'
+import type {
+  ColorOption as CanvasColorOption,
+  Positionable
+} from '@/lib/litegraph/src/litegraph'
 import {
   LGraphCanvas,
   LiteGraph,
   isColorable
 } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { getItemsColorOption } from '@/utils/litegraphUtil'
@@ -140,13 +147,17 @@ const localizedCurrentColorName = computed(() => {
   )
   return colorOption?.localizedName ?? NO_COLOR_OPTION.localizedName
 })
-
+const updateColorSelectionFromNode = (
+  newSelectedItems: Raw<Positionable[]>
+) => {
+  showColorPicker.value = false
+  selectedColorOption.value = null
+  currentColorOption.value = getItemsColorOption(newSelectedItems)
+}
 watch(
   () => canvasStore.selectedItems,
   (newSelectedItems) => {
-    showColorPicker.value = false
-    selectedColorOption.value = null
-    currentColorOption.value = getItemsColorOption(newSelectedItems)
+    updateColorSelectionFromNode(newSelectedItems)
   },
   { immediate: true }
 )

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -6,11 +6,12 @@
       showDelay: 1000
     }"
     severity="secondary"
+    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i-lucide:expand />
+      <i-lucide:expand class="w-4 h-4" />
     </template>
   </Button>
   <Button
@@ -20,6 +21,7 @@
       showDelay: 1000
     }"
     severity="secondary"
+    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
@@ -34,25 +36,15 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { isSingleSubgraph, hasAnySelection } = useSelectionState()
 
-const isUnpackVisible = computed(() => {
-  return (
-    canvasStore.selectedItems?.length === 1 &&
-    canvasStore.selectedItems[0] instanceof SubgraphNode
-  )
-})
-const isConvertVisible = computed(() => {
-  return (
-    canvasStore.groupSelected ||
-    canvasStore.rerouteSelected ||
-    canvasStore.nodeSelected
-  )
-})
+const isUnpackVisible = isSingleSubgraph
+const isConvertVisible = computed(
+  () => hasAnySelection.value && !isSingleSubgraph.value
+)
 </script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -5,9 +5,11 @@
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    severity="danger"
+    severity="secondary"
     text
+    icon-class="w-4 h-4"
     icon="pi pi-trash"
+    data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
   />
 </template>
@@ -17,14 +19,15 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { selectedItems } = useSelectionState()
 
 const isDeletable = computed(() =>
-  canvasStore.selectedItems.some((x) => x.removable !== false)
+  selectedItems.value.some((x: Positionable) => x.removable !== false)
 )
 </script>

src/components/graph/selectionToolbox/ExecuteButton.spec.ts

@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+// Mock the stores
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn()
+}))
+
+// Mock the utils
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn((node) => !!node?.type)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  isOutputNode: vi.fn((node) => !!node?.constructor?.nodeData?.output_node)
+}))
+
+// Mock the composables
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: vi.fn(() => ({
+    selectedNodes: {
+      value: []
+    }
+  }))
+}))
+
+describe('ExecuteButton', () => {
+  let mockCanvas: any
+  let mockCanvasStore: any
+  let mockCommandStore: any
+  let mockSelectedNodes: any[]
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        selectionToolbox: {
+          executeButton: {
+            tooltip: 'Execute selected nodes'
+          }
+        }
+      }
+    }
+  })
+
+  beforeEach(async () => {
+    setActivePinia(createPinia())
+
+    // Reset mocks
+    mockCanvas = {
+      setDirty: vi.fn()
+    }
+
+    mockSelectedNodes = []
+
+    mockCanvasStore = {
+      getCanvas: vi.fn(() => mockCanvas),
+      selectedItems: []
+    }
+
+    mockCommandStore = {
+      execute: vi.fn()
+    }
+
+    // Setup store mocks
+    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
+    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+
+    // Update the useSelectionState mock
+    const { useSelectionState } = vi.mocked(
+      await import('@/composables/graph/useSelectionState')
+    )
+    useSelectionState.mockReturnValue({
+      selectedNodes: {
+        value: mockSelectedNodes
+      }
+    } as any)
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(ExecuteButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:play': { template: '<div class="play-icon" />' }
+        }
+      }
+    })
+  }
+
+  describe('Rendering', () => {
+    it('should be able to render', () => {
+      const wrapper = mountComponent()
+      const button = wrapper.find('button')
+      expect(button.exists()).toBe(true)
+    })
+  })
+
+  describe('Click Handler', () => {
+    it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
+      const wrapper = mountComponent()
+      const button = wrapper.find('button')
+
+      await button.trigger('click')
+
+      expect(mockCommandStore.execute).toHaveBeenCalledWith(
+        'Comfy.QueueSelectedOutputNodes'
+      )
+      expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
+    })
+  })
+})

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -1,20 +1,16 @@
 <template>
   <Button
-    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
-      value: isDisabled
-        ? t('selectionToolbox.executeButton.disabledTooltip')
-        : t('selectionToolbox.executeButton.tooltip'),
+      value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    :severity="isDisabled ? 'secondary' : 'success'"
+    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
     text
-    :disabled="isDisabled"
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i-lucide:play />
+    <i-lucide:play class="fill-path-white w-4 h-4" />
   </Button>
 </template>
 
@@ -23,26 +19,24 @@ import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
+import { isOutputNode } from '@/utils/nodeFilterUtil'
 
 const { t } = useI18n()
-const canvasStore = useCanvasStore()
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+const { selectedNodes } = useSelectionState()
 
 const canvas = canvasStore.getCanvas()
 const buttonHovered = ref(false)
-const selectedOutputNodes = computed(
-  () =>
-    canvasStore.selectedItems.filter(
-      (item) => isLGraphNode(item) && item.constructor.nodeData?.output_node
-    ) as LGraphNode[]
+const selectedOutputNodes = computed(() =>
+  selectedNodes.value.filter(isLGraphNode).filter(isOutputNode)
 )
 
-const isDisabled = computed(() => selectedOutputNodes.value.length === 0)
-
 function outputNodeStokeStyle(this: LGraphNode) {
   if (
     this.selected &&
@@ -70,3 +64,9 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
+<style scoped>
+:deep.fill-path-white > path {
+  fill: white;
+  stroke: unset;
+}
+</style>

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -7,6 +7,7 @@
     }"
     severity="secondary"
     text
+    icon-class="w-4 h-4"
     :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
     @click="() => commandStore.execute(command.id)"
   />

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: $t('g.frameNodes'),
+      showDelay: 1000
+    }"
+    class="frame-nodes-button"
+    text
+    severity="secondary"
+    @click="frameNodes"
+  >
+    <i-lucide:frame class="w-4 h-4" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useFrameNodes } from '@/composables/graph/useFrameNodes'
+
+const { frameNodes } = useFrameNodes()
+</script>

src/components/graph/selectionToolbox/HelpButton.vue

@@ -1,49 +0,0 @@
-<template>
-  <Button
-    v-show="nodeDef"
-    v-tooltip.top="{
-      value: $t('g.help'),
-      showDelay: 1000
-    }"
-    class="help-button"
-    text
-    icon="pi pi-question-circle"
-    severity="secondary"
-    @click="showHelp"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
-import { useCanvasStore } from '@/stores/graphStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-import { isLGraphNode } from '@/utils/litegraphUtil'
-
-const canvasStore = useCanvasStore()
-const nodeDefStore = useNodeDefStore()
-const sidebarTabStore = useSidebarTabStore()
-const nodeHelpStore = useNodeHelpStore()
-const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
-
-const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
-  if (canvasStore.selectedItems.length !== 1) return null
-  const item = canvasStore.selectedItems[0]
-  if (!isLGraphNode(item)) return null
-  return nodeDefStore.fromLGraphNode(item)
-})
-
-const showHelp = () => {
-  const def = nodeDef.value
-  if (!def) return
-  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
-    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-  }
-  nodeHelpStore.openHelp(def)
-}
-</script>

src/components/graph/selectionToolbox/InfoButton.spec.ts

@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
+// NOTE: The component import must come after mocks so they take effect.
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node'
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+  useNodeLibrarySidebarTab: () => ({
+    id: 'node-library'
+  })
+}))
+
+const openHelpMock = vi.fn()
+const closeHelpMock = vi.fn()
+const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
+vi.mock('@/stores/workspace/nodeHelpStore', () => ({
+  useNodeHelpStore: () => ({
+    openHelp: (def: any) => {
+      nodeHelpState.currentHelpNode = def
+      openHelpMock(def)
+    },
+    closeHelp: () => {
+      nodeHelpState.currentHelpNode = null
+      closeHelpMock()
+    },
+    get currentHelpNode() {
+      return nodeHelpState.currentHelpNode
+    },
+    get isHelpOpen() {
+      return nodeHelpState.currentHelpNode !== null
+    }
+  })
+}))
+
+const toggleSidebarTabMock = vi.fn((id: string) => {
+  sidebarState.activeSidebarTabId =
+    sidebarState.activeSidebarTabId === id ? null : id
+})
+const sidebarState: { activeSidebarTabId: string | null } = {
+  activeSidebarTabId: 'other-tab'
+}
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: () => ({
+    get activeSidebarTabId() {
+      return sidebarState.activeSidebarTabId
+    },
+    toggleSidebarTab: toggleSidebarTabMock
+  })
+}))
+
+describe('InfoButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let nodeDefStore: ReturnType<typeof useNodeDefStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          info: 'Node Info'
+        }
+      }
+    }
+  })
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    nodeDefStore = useNodeDefStore()
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(InfoButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:info': true,
+          Button: {
+            template:
+              '<button class="help-button" severity="secondary"><slot /></button>',
+            props: ['severity', 'text', 'class'],
+            emits: ['click']
+          }
+        }
+      }
+    })
+  }
+
+  it('should handle click without errors', async () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    await button.trigger('click')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should have correct CSS classes', () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.classes()).toContain('help-button')
+    expect(button.attributes('severity')).toBe('secondary')
+  })
+
+  it('should have correct tooltip', () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.exists()).toBe(true)
+  })
+})

src/components/graph/selectionToolbox/InfoButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: $t('g.info'),
+      showDelay: 1000
+    }"
+    data-testid="info-button"
+    text
+    severity="secondary"
+    @click="toggleHelp"
+  >
+    <i-lucide:info class="w-4 h-4" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+
+const { showNodeHelp: toggleHelp } = useSelectionState()
+</script>

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -1,6 +1,5 @@
 <template>
   <Button
-    v-show="is3DNode"
     v-tooltip.top="{
       value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
@@ -8,29 +7,18 @@
     severity="secondary"
     text
     icon="pi pi-pencil"
+    icon-class="w-4 h-4"
     @click="open3DViewer"
   />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
 
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const is3DNode = computed(() => {
-  const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
-  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
-
-  return nodes.length === 1 && nodes.some(isLoad3dNode) && enable3DViewer
-})
 
 const open3DViewer = () => {
   void commandStore.execute('Comfy.3DViewer.Open3DViewer')

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -7,28 +7,21 @@
     }"
     severity="secondary"
     text
-    icon="pi pi-pencil"
     @click="openMaskEditor"
-  />
+  >
+    <i-comfy:mask class="!w-4 !h-4" />
+  </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const isSingleImageNode = computed(() => {
-  const { selectedItems } = canvasStore
-  const item = selectedItems[0]
-  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
-})
+const { isSingleImageNode } = useSelectionState()
 
 const openMaskEditor = () => {
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="option.type === 'divider'"
+    class="h-px bg-gray-200 dark-theme:bg-zinc-700 my-1"
+  />
+  <div
+    v-else
+    role="button"
+    class="flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer"
+    @click="handleClick"
+  >
+    <i v-if="option.icon" :class="[option.icon, 'w-4 h-4']" />
+    <span class="flex-1">{{ option.label }}</span>
+    <span v-if="option.shortcut" class="text-xs opacity-60">
+      {{ option.shortcut }}
+    </span>
+    <i-lucide:chevron-right
+      v-if="option.hasSubmenu"
+      :size="14"
+      class="opacity-60"
+    />
+    <Badge
+      v-if="option.badge"
+      :severity="option.badge === 'new' ? 'info' : 'secondary'"
+      :value="t(option.badge)"
+      :class="{
+        'bg-[#31B9F4] dark-theme:bg-[#0B8CE9] rounded-4xl':
+          option.badge === 'new',
+        'bg-[#9C9EAB] dark-theme:bg-[#000] rounded-4xl':
+          option.badge === 'deprecated',
+        'text-white uppercase text-[9px] h-4 px-1 gap-2.5': true
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from 'primevue/badge'
+import { useI18n } from 'vue-i18n'
+
+import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
+
+const { t } = useI18n()
+
+interface Props {
+  option: MenuOption
+}
+
+interface Emits {
+  (e: 'click', option: MenuOption, event: Event): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const handleClick = (event: Event) => {
+  emit('click', props.option, event)
+}
+</script>

src/components/graph/selectionToolbox/MoreOptions.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="relative inline-flex items-center">
+    <Button
+      ref="buttonRef"
+      v-tooltip.top="{
+        value: $t('g.moreOptions'),
+        showDelay: 1000
+      }"
+      data-testid="more-options-button"
+      text
+      class="h-8 w-8 px-0"
+      severity="secondary"
+      @click="toggle"
+    >
+      <i-lucide:more-vertical class="w-4 h-4" />
+    </Button>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+    >
+      <div class="flex flex-col p-2 min-w-48">
+        <MenuOptionItem
+          v-for="(option, index) in menuOptions"
+          :key="option.label || `divider-${index}`"
+          :option="option"
+          @click="handleOptionClick"
+        />
+      </div>
+    </Popover>
+
+    <SubmenuPopover
+      v-for="option in menuOptionsWithSubmenu"
+      :key="`submenu-${option.label}`"
+      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
+      :option="option"
+      :container-styles="containerStyles"
+      @submenu-click="handleSubmenuClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
+import {
+  forceCloseMoreOptionsSignal,
+  moreOptionsOpen,
+  moreOptionsRestorePending,
+  restoreMoreOptionsSignal
+} from '@/composables/canvas/useSelectionToolboxPosition'
+import {
+  type MenuOption,
+  type SubMenuOption,
+  useMoreOptionsMenu
+} from '@/composables/graph/useMoreOptionsMenu'
+import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
+
+import MenuOptionItem from './MenuOptionItem.vue'
+import SubmenuPopover from './SubmenuPopover.vue'
+
+const popover = ref<InstanceType<typeof Popover>>()
+const buttonRef = ref<InstanceType<typeof Button> | HTMLElement | null>(null)
+// Track open state ourselves so we can restore after drag/move
+const isOpen = ref(false)
+const wasOpenBeforeHide = ref(false)
+// Track why the popover was hidden so we only auto-reopen after drag.
+type HideReason = 'manual' | 'drag'
+const lastProgrammaticHideReason = ref<HideReason | null>(null)
+const submenuRefs = ref<Record<string, InstanceType<typeof SubmenuPopover>>>({})
+const currentSubmenu = ref<string | null>(null)
+
+const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
+const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
+
+const minimap = useMinimap()
+const containerStyles = minimap.containerStyles
+
+function getButtonEl(): HTMLElement | null {
+  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  return el instanceof HTMLElement ? el : null
+}
+
+let lastLogTs = 0
+const LOG_INTERVAL = 120 // ms
+let overlayElCache: HTMLElement | null = null
+
+function resolveOverlayEl(): HTMLElement | null {
+  // Prefer cached element (cleared on hide)
+  if (overlayElCache && overlayElCache.isConnected) return overlayElCache
+  // PrimeVue Popover root element (component instance $el)
+  const direct = (popover.value as any)?.$el
+  if (direct instanceof HTMLElement) {
+    overlayElCache = direct
+    return direct
+  }
+  // Fallback: try to locate a recent popover root near the button (same z-index class + absolute)
+  const btn = getButtonEl()
+  if (btn) {
+    const candidates = Array.from(
+      document.querySelectorAll('div.absolute.z-50')
+    ) as HTMLElement[]
+    // Heuristic: pick the one closest (vertically) below the button
+    const rect = btn.getBoundingClientRect()
+    let best: { el: HTMLElement; dist: number } | null = null
+    for (const el of candidates) {
+      const r = el.getBoundingClientRect()
+      const dist = Math.abs(r.top - rect.bottom)
+      if (!best || dist < best.dist) best = { el, dist }
+    }
+    if (best && best.el) {
+      overlayElCache = best.el
+      return best.el
+    }
+  }
+  return null
+}
+
+const repositionPopover = () => {
+  if (!isOpen.value) return
+  const btn = getButtonEl()
+  const overlayEl = resolveOverlayEl()
+  if (!btn || !overlayEl) return
+  const rect = btn.getBoundingClientRect()
+  const marginY = 8 // tailwind mt-2 ~ 0.5rem = 8px
+  const left = rect.left + rect.width / 2
+  const top = rect.bottom + marginY
+  try {
+    overlayEl.style.position = 'fixed'
+    overlayEl.style.left = `${left}px`
+    overlayEl.style.top = `${top}px`
+    overlayEl.style.transform = 'translate(-50%, 0)'
+  } catch (e) {
+    console.warn('[MoreOptions] Failed to set overlay style', e)
+    return
+  }
+  const now = performance.now()
+  if (now - lastLogTs > LOG_INTERVAL) {
+    lastLogTs = now
+  }
+}
+
+const { startSync, stopSync } = useCanvasTransformSync(repositionPopover, {
+  autoStart: false
+})
+
+function openPopover(triggerEvent?: Event): boolean {
+  const el = getButtonEl()
+  if (!el || !el.isConnected) return false
+  bump()
+  popover.value?.show(triggerEvent ?? new Event('reopen'), el)
+  isOpen.value = true
+  moreOptionsOpen.value = true
+  moreOptionsRestorePending.value = false
+  return true
+}
+
+function closePopover(reason: HideReason = 'manual') {
+  lastProgrammaticHideReason.value = reason
+  popover.value?.hide()
+  isOpen.value = false
+  moreOptionsOpen.value = false
+  stopSync()
+  hideAll()
+  if (reason !== 'drag') {
+    wasOpenBeforeHide.value = false
+    // Natural hide: cancel any pending restore
+    moreOptionsRestorePending.value = false
+  } else {
+    if (!moreOptionsRestorePending.value) {
+      wasOpenBeforeHide.value = true
+      moreOptionsRestorePending.value = true
+    }
+  }
+}
+
+let restoreAttempts = 0
+function attemptRestore() {
+  if (isOpen.value) return
+  if (!wasOpenBeforeHide.value && !moreOptionsRestorePending.value) return
+  // Try immediately
+  if (openPopover(new Event('reopen'))) {
+    wasOpenBeforeHide.value = false
+    restoreAttempts = 0
+    return
+  }
+  // Defer with limited retries (layout / mount race)
+  if (restoreAttempts >= 5) return
+  restoreAttempts++
+  requestAnimationFrame(() => attemptRestore())
+}
+
+const toggle = (event: Event) => {
+  if (isOpen.value) closePopover('manual')
+  else openPopover(event)
+}
+
+const hide = (reason: HideReason = 'manual') => closePopover(reason)
+
+const hideAll = () => {
+  hideAllSubmenus(
+    menuOptionsWithSubmenu.value,
+    submenuRefs.value,
+    currentSubmenu
+  )
+}
+
+const handleOptionClick = (option: MenuOption, event: Event) => {
+  if (!option.hasSubmenu && option.action) {
+    option.action()
+    hide()
+  } else if (option.hasSubmenu) {
+    event.stopPropagation()
+    const submenuKey = `submenu-${option.label}`
+    const submenu = submenuRefs.value[submenuKey]
+
+    if (submenu) {
+      void toggleSubmenu(
+        option,
+        event,
+        submenu,
+        currentSubmenu,
+        menuOptionsWithSubmenu.value,
+        submenuRefs.value
+      )
+    }
+  }
+}
+
+const handleSubmenuClick = (subOption: SubMenuOption) => {
+  subOption.action()
+  hide('manual')
+}
+
+const setSubmenuRef = (key: string, el: any) => {
+  if (el) {
+    submenuRefs.value[key] = el
+  } else {
+    delete submenuRefs.value[key]
+  }
+}
+
+const pt = computed(() => ({
+  root: {
+    class: 'absolute z-50 w-[300px] px-[12]'
+  },
+  content: {
+    class: [
+      'mt-2 text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ],
+    style: {
+      backgroundColor: containerStyles.value.backgroundColor
+    }
+  }
+}))
+
+// Distinguish outside click (PrimeVue dismiss) from programmatic hides.
+const onPopoverShow = () => {
+  overlayElCache = resolveOverlayEl()
+  // Delay first reposition slightly to ensure DOM fully painted
+  requestAnimationFrame(() => repositionPopover())
+  startSync()
+}
+
+const onPopoverHide = () => {
+  if (lastProgrammaticHideReason.value == null) {
+    isOpen.value = false
+    hideAll()
+    wasOpenBeforeHide.value = false
+    moreOptionsOpen.value = false
+    moreOptionsRestorePending.value = false
+  }
+  overlayElCache = null
+  stopSync()
+  lastProgrammaticHideReason.value = null
+}
+
+// Watch for forced close (drag start)
+watch(
+  () => forceCloseMoreOptionsSignal.value,
+  () => {
+    if (isOpen.value) hide('drag')
+    else
+      wasOpenBeforeHide.value =
+        wasOpenBeforeHide.value || moreOptionsRestorePending.value
+  }
+)
+
+watch(
+  () => restoreMoreOptionsSignal.value,
+  () => attemptRestore()
+)
+
+onMounted(() => {
+  if (moreOptionsRestorePending.value && !isOpen.value) {
+    requestAnimationFrame(() => attemptRestore())
+  }
+})
+
+onUnmounted(() => {
+  stopSync()
+})
+</script>

src/components/graph/selectionToolbox/PinButton.vue

@@ -1,25 +0,0 @@
-<template>
-  <Button
-    v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon="pi pi-thumbtack"
-    @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-</script>

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -1,17 +1,22 @@
 <template>
   <Button
     v-show="isRefreshable"
-    severity="info"
+    v-tooltip.top="t('g.refreshNode')"
+    severity="secondary"
     text
-    icon="pi pi-refresh"
+    data-testid="refresh-button"
     @click="refreshSelected"
-  />
+  >
+    <i-lucide:refresh-cw class="w-4 h-4" />
+  </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
 
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 
+const { t } = useI18n()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
 </script>

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -21,8 +21,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -0,0 +1,127 @@
+<template>
+  <Popover
+    ref="popover"
+    :auto-z-index="true"
+    :base-z-index="1100"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="submenuPt"
+  >
+    <div
+      :class="
+        isColorSubmenu
+          ? 'flex flex-col gap-1 p-2'
+          : 'flex flex-col p-2 min-w-40'
+      "
+    >
+      <div
+        v-for="subOption in option.submenu"
+        :key="subOption.label"
+        :class="
+          isColorSubmenu
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+        "
+        :title="subOption.label"
+        @click="handleSubmenuClick(subOption)"
+      >
+        <div
+          v-if="subOption.color"
+          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          :style="{ backgroundColor: subOption.color }"
+        />
+        <template v-else-if="!subOption.color">
+          <i-lucide:check
+            v-if="isShapeSelected(subOption)"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <div v-else class="w-4 flex-shrink-0" />
+          <span>{{ subOption.label }}</span>
+        </template>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import {
+  type MenuOption,
+  type SubMenuOption
+} from '@/composables/graph/useMoreOptionsMenu'
+import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
+
+interface Props {
+  option: MenuOption
+  containerStyles: {
+    width: string
+    height: string
+    backgroundColor: string
+    border: string
+    borderRadius: string
+  }
+}
+
+interface Emits {
+  (e: 'submenu-click', subOption: SubMenuOption): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { getCurrentShape } = useNodeCustomization()
+
+const popover = ref<InstanceType<typeof Popover>>()
+
+const show = (event: Event, target?: HTMLElement) => {
+  popover.value?.show(event, target)
+}
+
+const hide = () => {
+  popover.value?.hide()
+}
+
+defineExpose({
+  show,
+  hide
+})
+
+const handleSubmenuClick = (subOption: SubMenuOption) => {
+  emit('submenu-click', subOption)
+}
+
+const isShapeSelected = (subOption: SubMenuOption): boolean => {
+  if (subOption.color) return false
+
+  const currentShape = getCurrentShape()
+  if (!currentShape) return false
+
+  return currentShape.localizedName === subOption.label
+}
+
+const isColorSubmenu = computed(() => {
+  return (
+    props.option.submenu &&
+    props.option.submenu.length > 0 &&
+    props.option.submenu.every((item) => item.color && !item.icon)
+  )
+})
+
+const submenuPt = computed(() => ({
+  root: {
+    class: 'absolute z-[60]'
+  },
+  content: {
+    class: [
+      'text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ],
+    style: {
+      backgroundColor: props.containerStyles.backgroundColor
+    }
+  }
+}))
+</script>

src/components/graph/selectionToolbox/VerticalDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-6 w-px bg-gray-300/10 dark-theme:bg-gray-600/10 self-center" />
+</template>

src/components/graph/widgets/DomWidget.vue

@@ -23,10 +23,10 @@ import { 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 { DomWidgetState } from '@/stores/domWidgetStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const { widgetState } = defineProps<{
   widgetState: DomWidgetState

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -143,10 +143,10 @@ import { useI18n } from 'vue-i18n'
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/composables/useManagerState'
-import { type ReleaseNote } from '@/services/releaseService'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { type ReleaseNote } from '@/platform/updates/common/releaseService'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useReleaseStore } from '@/stores/releaseStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'

src/components/input/MultiSelect.accessibility.stories.ts

@@ -0,0 +1,380 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { MultiSelectProps } from 'primevue/multiselect'
+import { ref } from 'vue'
+
+import MultiSelect from './MultiSelect.vue'
+import { type SelectOption } from './types'
+
+// Combine our component props with PrimeVue MultiSelect props
+interface ExtendedProps extends Partial<MultiSelectProps> {
+  // Our custom props
+  label?: string
+  showSearchBox?: boolean
+  showSelectedCount?: boolean
+  showClearButton?: boolean
+  searchPlaceholder?: string
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
+  // Override modelValue type to match our Option type
+  modelValue?: SelectOption[]
+}
+
+const meta: Meta<ExtendedProps> = {
+  title: 'Components/Input/MultiSelect/Accessibility',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# MultiSelect Accessibility Guide
+
+This MultiSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
+
+## Keyboard Navigation
+
+- **Tab** - Focus the trigger button
+- **Enter/Space** - Open/close dropdown when focused
+- **Arrow Up/Down** - Navigate through options when dropdown is open
+- **Enter/Space** - Select/deselect options when navigating
+- **Escape** - Close dropdown
+
+## Screen Reader Support
+
+- Uses \`role="combobox"\` to identify as dropdown
+- \`aria-haspopup="listbox"\` indicates popup contains list
+- \`aria-expanded\` shows dropdown state
+- \`aria-label\` provides accessible name with i18n fallback
+- Selected count announced to screen readers
+
+## Testing Instructions
+
+1. **Tab Navigation**: Use Tab key to focus the component
+2. **Keyboard Opening**: Press Enter or Space to open dropdown
+3. **Option Navigation**: Use Arrow keys to navigate options
+4. **Selection**: Press Enter/Space to select options
+5. **Closing**: Press Escape to close dropdown
+6. **Screen Reader**: Test with screen reader software
+
+Try these stories with keyboard-only navigation!
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the trigger button'
+    },
+    showSearchBox: {
+      control: 'boolean',
+      description: 'Show search box in dropdown header'
+    },
+    showSelectedCount: {
+      control: 'boolean',
+      description: 'Show selected count in dropdown header'
+    },
+    showClearButton: {
+      control: 'boolean',
+      description: 'Show clear all button in dropdown header'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const frameworkOptions = [
+  { name: 'React', value: 'react' },
+  { name: 'Vue', value: 'vue' },
+  { name: 'Angular', value: 'angular' },
+  { name: 'Svelte', value: 'svelte' },
+  { name: 'TypeScript', value: 'typescript' },
+  { name: 'JavaScript', value: 'javascript' }
+]
+
+export const KeyboardNavigationDemo: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedFrameworks = ref<SelectOption[]>([])
+      const searchQuery = ref('')
+
+      return {
+        args: {
+          ...args,
+          options: frameworkOptions,
+          modelValue: selectedFrameworks,
+          'onUpdate:modelValue': (value: SelectOption[]) => {
+            selectedFrameworks.value = value
+          },
+          'onUpdate:searchQuery': (value: string) => {
+            searchQuery.value = value
+          }
+        },
+        selectedFrameworks,
+        searchQuery
+      }
+    },
+    template: `
+      <div class="space-y-4 p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Use your keyboard to navigate this MultiSelect:
+          </p>
+          <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
+            <li><strong>Tab</strong> to focus the dropdown</li>
+            <li><strong>Enter/Space</strong> to open dropdown</li>
+            <li><strong>Arrow Up/Down</strong> to navigate options</li>
+            <li><strong>Enter/Space</strong> to select options</li>
+            <li><strong>Escape</strong> to close dropdown</li>
+          </ol>
+        </div>
+
+        <div class="space-y-2">
+          <label class="block text-sm font-medium text-gray-700">
+            Select Frameworks (Keyboard Navigation Test)
+          </label>
+          <MultiSelect v-bind="args" class="w-80" />
+          <p class="text-xs text-gray-500">
+            Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
+          </p>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    label: 'Choose Frameworks',
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  }
+}
+
+export const ScreenReaderFriendly: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedColors = ref<SelectOption[]>([])
+      const selectedSizes = ref<SelectOption[]>([])
+
+      const colorOptions = [
+        { name: 'Red', value: 'red' },
+        { name: 'Blue', value: 'blue' },
+        { name: 'Green', value: 'green' },
+        { name: 'Yellow', value: 'yellow' }
+      ]
+
+      const sizeOptions = [
+        { name: 'Small', value: 'sm' },
+        { name: 'Medium', value: 'md' },
+        { name: 'Large', value: 'lg' },
+        { name: 'Extra Large', value: 'xl' }
+      ]
+
+      return {
+        selectedColors,
+        selectedSizes,
+        colorOptions,
+        sizeOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
+          <p class="text-sm text-gray-600 mb-2">
+            These dropdowns have proper ARIA attributes and labels for screen readers:
+          </p>
+          <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+            <li><code>role="combobox"</code> identifies as dropdown</li>
+            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
+            <li><code>aria-expanded</code> shows open/closed state</li>
+            <li><code>aria-label</code> provides accessible name</li>
+            <li>Selection count announced to assistive technology</li>
+          </ul>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">
+              Color Preferences
+            </label>
+            <MultiSelect
+              v-model="selectedColors"
+              :options="colorOptions"
+              label="Select colors"
+              :show-selected-count="true"
+              :show-clear-button="true"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              {{ selectedColors.length }} color(s) selected
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">
+              Size Preferences
+            </label>
+            <MultiSelect
+              v-model="selectedSizes"
+              :options="sizeOptions"
+              label="Select sizes"
+              :show-selected-count="true"
+              :show-search-box="true"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              {{ selectedSizes.length }} size(s) selected
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const FocusManagement: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedItems = ref<SelectOption[]>([])
+      const focusTestOptions = [
+        { name: 'Option A', value: 'a' },
+        { name: 'Option B', value: 'b' },
+        { name: 'Option C', value: 'c' }
+      ]
+
+      return {
+        selectedItems,
+        focusTestOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-4 p-4">
+        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Test focus behavior with multiple form elements:
+          </p>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Before MultiSelect
+            </label>
+            <input
+              type="text"
+              placeholder="Previous field"
+              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              MultiSelect (Test Focus Ring)
+            </label>
+            <MultiSelect
+              v-model="selectedItems"
+              :options="focusTestOptions"
+              label="Focus test dropdown"
+              :show-selected-count="true"
+              class="w-64"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              After MultiSelect
+            </label>
+            <input
+              type="text"
+              placeholder="Next field"
+              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <button
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            Submit Button
+          </button>
+        </div>
+
+        <div class="text-sm text-gray-600 mt-4">
+          <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AccessibilityChecklist: Story = {
+  render: () => ({
+    template: `
+      <div class="max-w-4xl mx-auto p-6 space-y-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+          <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
+              <ul class="space-y-2 text-sm">
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Color Contrast:</strong> Meets WCAG AA requirements</span>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
+              <ol class="space-y-2 text-sm list-decimal list-inside">
+                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
+                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
+                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
+                <li><strong>Tab Order:</strong> Verify logical progression</li>
+                <li><strong>Announcements:</strong> Check state changes are announced</li>
+                <li><strong>Escape Behavior:</strong> Escape always closes dropdown</li>
+              </ol>
+            </div>
+          </div>
+
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-300">
+              Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
+              If you can successfully navigate and make selections, the accessibility implementation is working!
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}

src/components/input/MultiSelect.stories.ts

@@ -3,6 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
+import { type SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 // Since we use v-bind="$attrs", all PrimeVue props are available
@@ -17,7 +18,7 @@ interface ExtendedProps extends Partial<MultiSelectProps> {
   popoverMinWidth?: string
   popoverMaxWidth?: string
   // Override modelValue type to match our Option type
-  modelValue?: Array<{ name: string; value: string }>
+  modelValue?: SelectOption[]
 }
 
 const meta: Meta<ExtendedProps> = {

src/components/input/MultiSelect.vue

@@ -14,6 +14,11 @@
     unstyled
     :max-selected-labels="0"
     :pt="pt"
+    :aria-label="label || t('g.multiSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"
@@ -105,14 +110,16 @@ import MultiSelect, {
   MultiSelectPassThroughMethodOptions
 } from 'primevue/multiselect'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/input/SearchBox.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
+import { type SelectOption } from './types'
 
-type Option = { name: string; value: string }
+type Option = SelectOption
 
 defineOptions({
   inheritAttrs: false
@@ -153,6 +160,8 @@ const selectedItems = defineModel<Option[]>({
   required: true
 })
 const searchQuery = defineModel<string>('searchQuery')
+
+const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
 
 const popoverStyle = usePopoverSizing({
@@ -162,7 +171,7 @@ const popoverStyle = usePopoverSizing({
 
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-    class: [
+    class: cn(
       'h-10 relative inline-flex cursor-pointer select-none',
       'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
       'transition-all duration-200 ease-in-out',
@@ -170,8 +179,9 @@ const pt = computed(() => ({
       selectedCount.value > 0
         ? 'border-blue-400 dark-theme:border-blue-500'
         : 'border-transparent',
+      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
       { 'opacity-60 cursor-default': props.disabled }
-    ]
+    )
   }),
   labelContainer: {
     class:

src/components/input/SingleSelect.accessibility.stories.ts

@@ -0,0 +1,464 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SingleSelect from './SingleSelect.vue'
+
+interface SingleSelectProps {
+  label?: string
+  options?: Array<{ name: string; value: string }>
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
+  modelValue?: string | null
+}
+
+const meta: Meta<SingleSelectProps> = {
+  title: 'Components/Input/SingleSelect/Accessibility',
+  component: SingleSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# SingleSelect Accessibility Guide
+
+This SingleSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
+
+## Keyboard Navigation
+
+- **Tab** - Focus the trigger button
+- **Enter/Space** - Open/close dropdown when focused
+- **Arrow Up/Down** - Navigate through options when dropdown is open
+- **Enter/Space** - Select option when navigating
+- **Escape** - Close dropdown
+
+## Screen Reader Support
+
+- Uses \`role="combobox"\` to identify as dropdown
+- \`aria-haspopup="listbox"\` indicates popup contains list
+- \`aria-expanded\` shows dropdown state
+- \`aria-label\` provides accessible name with i18n fallback
+- Selected option announced to screen readers
+
+## Testing Instructions
+
+1. **Tab Navigation**: Use Tab key to focus the component
+2. **Keyboard Opening**: Press Enter or Space to open dropdown
+3. **Option Navigation**: Use Arrow keys to navigate options
+4. **Selection**: Press Enter/Space to select an option
+5. **Closing**: Press Escape to close dropdown
+6. **Screen Reader**: Test with screen reader software
+
+Try these stories with keyboard-only navigation!
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the trigger button'
+    },
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of dropdown list'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sortOptions = [
+  { name: 'Name A → Z', value: 'name-asc' },
+  { name: 'Name Z → A', value: 'name-desc' },
+  { name: 'Most Popular', value: 'popular' },
+  { name: 'Most Recent', value: 'recent' },
+  { name: 'File Size', value: 'size' }
+]
+
+const priorityOptions = [
+  { name: 'High Priority', value: 'high' },
+  { name: 'Medium Priority', value: 'medium' },
+  { name: 'Low Priority', value: 'low' },
+  { name: 'No Priority', value: 'none' }
+]
+
+export const KeyboardNavigationDemo: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const selectedSort = ref<string | null>(null)
+      const selectedPriority = ref<string | null>('medium')
+
+      return {
+        args,
+        selectedSort,
+        selectedPriority,
+        sortOptions,
+        priorityOptions
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Use your keyboard to navigate these SingleSelect dropdowns:
+          </p>
+          <ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
+            <li><strong>Tab</strong> to focus the dropdown</li>
+            <li><strong>Enter/Space</strong> to open dropdown</li>
+            <li><strong>Arrow Up/Down</strong> to navigate options</li>
+            <li><strong>Enter/Space</strong> to select option</li>
+            <li><strong>Escape</strong> to close dropdown</li>
+          </ol>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+              Sort Order
+            </label>
+            <SingleSelect
+              v-model="selectedSort"
+              :options="sortOptions"
+              label="Choose sort order"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500">
+              Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+              Task Priority (With Icon)
+            </label>
+            <SingleSelect
+              v-model="selectedPriority"
+              :options="priorityOptions"
+              label="Set priority level"
+              class="w-full"
+            >
+              <template #icon>
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
+                </svg>
+              </template>
+            </SingleSelect>
+            <p class="text-xs text-gray-500">
+              Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const ScreenReaderFriendly: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const selectedLanguage = ref<string | null>('en')
+      const selectedTheme = ref<string | null>(null)
+
+      const languageOptions = [
+        { name: 'English', value: 'en' },
+        { name: 'Spanish', value: 'es' },
+        { name: 'French', value: 'fr' },
+        { name: 'German', value: 'de' },
+        { name: 'Japanese', value: 'ja' }
+      ]
+
+      const themeOptions = [
+        { name: 'Light Theme', value: 'light' },
+        { name: 'Dark Theme', value: 'dark' },
+        { name: 'Auto (System)', value: 'auto' },
+        { name: 'High Contrast', value: 'contrast' }
+      ]
+
+      return {
+        selectedLanguage,
+        selectedTheme,
+        languageOptions,
+        themeOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
+            These dropdowns have proper ARIA attributes and labels for screen readers:
+          </p>
+          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
+            <li><code>role="combobox"</code> identifies as dropdown</li>
+            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
+            <li><code>aria-expanded</code> shows open/closed state</li>
+            <li><code>aria-label</code> provides accessible name</li>
+            <li>Selected option value announced to assistive technology</li>
+          </ul>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
+              Preferred Language
+            </label>
+            <SingleSelect
+              v-model="selectedLanguage"
+              :options="languageOptions"
+              label="Select language"
+              class="w-full"
+              aria-labelledby="language-label"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
+              Interface Theme
+            </label>
+            <SingleSelect
+              v-model="selectedTheme"
+              :options="themeOptions"
+              label="Select theme"
+              class="w-full"
+              aria-labelledby="theme-label"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
+            </p>
+          </div>
+        </div>
+
+        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
+          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
+            <li>• Listen for role announcements when focusing</li>
+            <li>• Verify dropdown state changes are announced</li>
+            <li>• Check that selected values are spoken clearly</li>
+            <li>• Ensure option navigation is announced</li>
+          </ul>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const FormIntegration: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const formData = ref({
+        category: null as string | null,
+        status: 'draft' as string | null,
+        assignee: null as string | null
+      })
+
+      const categoryOptions = [
+        { name: 'Bug Report', value: 'bug' },
+        { name: 'Feature Request', value: 'feature' },
+        { name: 'Documentation', value: 'docs' },
+        { name: 'Question', value: 'question' }
+      ]
+
+      const statusOptions = [
+        { name: 'Draft', value: 'draft' },
+        { name: 'Review', value: 'review' },
+        { name: 'Approved', value: 'approved' },
+        { name: 'Published', value: 'published' }
+      ]
+
+      const assigneeOptions = [
+        { name: 'Alice Johnson', value: 'alice' },
+        { name: 'Bob Smith', value: 'bob' },
+        { name: 'Carol Davis', value: 'carol' },
+        { name: 'David Wilson', value: 'david' }
+      ]
+
+      const handleSubmit = () => {
+        alert('Form submitted with: ' + JSON.stringify(formData.value, null, 2))
+      }
+
+      return {
+        formData,
+        categoryOptions,
+        statusOptions,
+        assigneeOptions,
+        handleSubmit,
+        args
+      }
+    },
+    template: `
+      <div class="max-w-2xl mx-auto p-6">
+        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
+          <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300">
+            Test keyboard navigation through a complete form with SingleSelect components.
+            Tab order should be logical and all elements should be accessible.
+          </p>
+        </div>
+
+        <form @submit.prevent="handleSubmit" class="space-y-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Title *
+            </label>
+            <input
+              type="text"
+              required
+              placeholder="Enter a title"
+              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Category *
+            </label>
+            <SingleSelect
+              v-model="formData.category"
+              :options="categoryOptions"
+              label="Select category"
+              required
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Status
+            </label>
+            <SingleSelect
+              v-model="formData.status"
+              :options="statusOptions"
+              label="Select status"
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Assignee
+            </label>
+            <SingleSelect
+              v-model="formData.assignee"
+              :options="assigneeOptions"
+              label="Select assignee"
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Description
+            </label>
+            <textarea
+              rows="4"
+              placeholder="Enter description"
+              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div class="flex gap-3">
+            <button
+              type="submit"
+              class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              Submit
+            </button>
+            <button
+              type="button"
+              class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+
+        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
+          <h4 class="font-semibold mb-2">Current Form Data:</h4>
+          <pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AccessibilityChecklist: Story = {
+  render: () => ({
+    template: `
+      <div class="max-w-4xl mx-auto p-6 space-y-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+          <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
+              <ul class="space-y-2 text-sm">
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Form Integration:</strong> Works properly in forms with other elements</span>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
+              <ol class="space-y-2 text-sm list-decimal list-inside">
+                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
+                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
+                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
+                <li><strong>Tab Order:</strong> Verify logical progression in forms</li>
+                <li><strong>Announcements:</strong> Check state changes are announced</li>
+                <li><strong>Selection:</strong> Verify selected value is announced</li>
+              </ol>
+            </div>
+          </div>
+
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+              Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
+              If you can successfully navigate and make selections, the accessibility implementation is working!
+            </p>
+          </div>
+
+          <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
+            <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+              These accessibility features are built into the component with minimal performance impact.
+              The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}

src/components/input/SingleSelect.vue

@@ -14,6 +14,11 @@
     option-value="value"
     unstyled
     :pt="pt"
+    :aria-label="label || t('g.singleSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
   >
     <!-- Trigger value -->
     <template #value="slotProps">
@@ -55,9 +60,12 @@
 <script setup lang="ts">
 import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { cn } from '@/utils/tailwindUtil'
 
+import { type SelectOption } from './types'
+
 defineOptions({
   inheritAttrs: false
 })
@@ -75,10 +83,7 @@ const {
    * Cannot rely on $attrs alone because we need to access options
    * in getLabel() to map values to their display names.
    */
-  options?: {
-    name: string
-    value: string
-  }[]
+  options?: SelectOption[]
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */
@@ -89,6 +94,8 @@ const {
 
 const selectedItem = defineModel<string | null>({ required: true })
 
+const { t } = useI18n()
+
 /**
  * Maps a value to its display label.
  * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
@@ -118,16 +125,16 @@ const optionStyle = computed(() => {
  * - Text/icon scale: compact size matching MultiSelect
  */
 const pt = computed(() => ({
-  root: ({
-    props
-  }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
+  root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
     class: [
       // container
       'h-10 relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
-      'rounded-md',
-      'bg-transparent text-neutral dark-theme:text-white',
-      'border-0',
+      'rounded-lg',
+      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
+      'border-[2.5px] border-solid border-transparent',
+      'transition-all duration-200 ease-in-out',
+      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
       // disabled
       { 'opacity-60 cursor-default': props.disabled }
     ]
@@ -158,9 +165,7 @@ const pt = computed(() => ({
       // Same list tone/size as MultiSelect
       'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
   },
-  option: ({
-    context
-  }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
+  option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
     class: [
       // Row layout
       'flex items-center justify-between gap-3 px-2 py-3 rounded',

src/components/input/types.ts

@@ -0,0 +1 @@
+export type SelectOption = { name: string; value: string }

src/components/load3d/Load3D.vue

@@ -101,10 +101,10 @@ import {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
 
 const { t } = useI18n()
 const { widget } = defineProps<{

src/components/load3d/controls/LightControls.vue

@@ -38,7 +38,7 @@ import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { t } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const vTooltip = Tooltip
 

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

@@ -14,7 +14,7 @@
 import Slider from 'primevue/slider'
 
 import { t } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const lightIntensity = defineModel<number>('lightIntensity')
 

src/components/searchbox/NodeSearchBox.vue

@@ -87,12 +87,12 @@ import NodePreview from '@/components/node/NodePreview.vue'
 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 { useSettingStore } from '@/stores/settingStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import SearchFilterChip from '../common/SearchFilterChip.vue'

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -45,11 +45,11 @@ import {
   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 { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import { FuseFilterWithValue } from '@/utils/fuseUtil'

src/components/searchbox/NodeSearchItem.vue

@@ -51,9 +51,9 @@ import Chip from 'primevue/chip'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { NodeSourceType } from '@/types/nodeSource'
 import { highlightQuery } from '@/utils/formatUtil'
 import { formatNumberWithSuffix } from '@/utils/formatUtil'

src/components/sidebar/SideToolbar.vue

@@ -37,8 +37,8 @@ import { computed } from 'vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -62,14 +62,14 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
-import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
-import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
+import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
+import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
-import { useReleaseStore } from '@/stores/releaseStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 

src/components/sidebar/SidebarTemplatesButton.vue

@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -54,6 +54,7 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import {
   ComfyModelDef,
@@ -62,7 +63,6 @@ import {
   useModelStore
 } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
-import { useSettingStore } from '@/stores/settingStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { isElectron } from '@/utils/envUtil'

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -104,7 +104,8 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import { ComfyNode } from '@/schemas/comfyWorkflowSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -114,7 +115,6 @@ import {
   TaskItemImpl,
   useQueueStore
 } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import ResultGallery from './queue/ResultGallery.vue'

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -141,13 +141,13 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { useWorkflowService } from '@/services/workflowService'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   useWorkflowBookmarkStore,
   useWorkflowStore
-} from '@/stores/workflowStore'
-import { ComfyWorkflow } from '@/stores/workflowStore'
+} from '@/platform/workflow/management/stores/workflowStore'
+import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import { TreeExplorerNode } from '@/types/treeExplorerTypes'

src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

@@ -30,8 +30,8 @@ import {
 } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { ComfyModelDef } from '@/stores/modelStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 import ModelPreview from './ModelPreview.vue'

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -83,9 +83,9 @@ import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 

src/components/sidebar/tabs/queue/ResultGallery.spec.ts

@@ -4,7 +4,7 @@ import Galleria from 'primevue/galleria'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultGallery from './ResultGallery.vue'

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -24,8 +24,8 @@
 import { computed, onMounted, ref } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { ResultItemImpl } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'

src/components/sidebar/tabs/queue/ResultVideo.vue

@@ -8,9 +8,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { ResultItemImpl } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   result: ResultItemImpl

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -78,7 +78,7 @@ import Button from 'primevue/button'
 import Tag from 'primevue/tag'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { ComfyNode } from '@/schemas/comfyWorkflowSchema'
+import { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { useLitegraphService } from '@/services/litegraphService'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'

src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue

@@ -17,7 +17,10 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
+import {
+  ComfyWorkflow,
+  useWorkflowBookmarkStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const { node } = defineProps<{

src/components/templates/TemplateWorkflowCard.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
-import { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('@/components/templates/thumbnails/AudioThumbnail.vue', () => ({
   default: {
@@ -64,13 +64,16 @@ vi.mock('@/stores/dialogStore', () => ({
   })
 }))
 
-vi.mock('@/stores/workflowTemplatesStore', () => ({
-  useWorkflowTemplatesStore: () => ({
-    isLoaded: true,
-    loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
-    groupedTemplates: []
+vi.mock(
+  '@/platform/workflow/templates/repositories/workflowTemplatesStore',
+  () => ({
+    useWorkflowTemplatesStore: () => ({
+      isLoaded: true,
+      loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
+      groupedTemplates: []
+    })
   })
-}))
+)
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
@@ -78,35 +81,42 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-vi.mock('@/composables/useTemplateWorkflows', () => ({
-  useTemplateWorkflows: () => ({
-    getTemplateThumbnailUrl: (
-      template: TemplateInfo,
-      sourceModule: string,
-      index = ''
-    ) => {
-      const basePath =
-        sourceModule === 'default'
-          ? `/fileURL/templates/${template.name}`
-          : `/apiURL/workflow_templates/${sourceModule}/${template.name}`
-      const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
-      return `${basePath}${indexSuffix}.${template.mediaSubtype}`
-    },
-    getTemplateTitle: (template: TemplateInfo, sourceModule: string) => {
-      const fallback =
-        template.title ?? template.name ?? `${sourceModule} Template`
-      return sourceModule === 'default'
-        ? template.localizedTitle ?? fallback
-        : fallback
-    },
-    getTemplateDescription: (template: TemplateInfo, sourceModule: string) => {
-      return sourceModule === 'default'
-        ? template.localizedDescription ?? ''
-        : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
-    },
-    loadWorkflowTemplate: vi.fn()
+vi.mock(
+  '@/platform/workflow/templates/composables/useTemplateWorkflows',
+  () => ({
+    useTemplateWorkflows: () => ({
+      getTemplateThumbnailUrl: (
+        template: TemplateInfo,
+        sourceModule: string,
+        index = ''
+      ) => {
+        const basePath =
+          sourceModule === 'default'
+            ? `/fileURL/templates/${template.name}`
+            : `/apiURL/workflow_templates/${sourceModule}/${template.name}`
+        const indexSuffix =
+          sourceModule === 'default' && index ? `-${index}` : ''
+        return `${basePath}${indexSuffix}.${template.mediaSubtype}`
+      },
+      getTemplateTitle: (template: TemplateInfo, sourceModule: string) => {
+        const fallback =
+          template.title ?? template.name ?? `${sourceModule} Template`
+        return sourceModule === 'default'
+          ? template.localizedTitle ?? fallback
+          : fallback
+      },
+      getTemplateDescription: (
+        template: TemplateInfo,
+        sourceModule: string
+      ) => {
+        return sourceModule === 'default'
+          ? template.localizedDescription ?? ''
+          : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
+      },
+      loadWorkflowTemplate: vi.fn()
+    })
   })
-}))
+)
 
 describe('TemplateWorkflowCard', () => {
   const createTemplate = (overrides = {}): TemplateInfo => ({

src/components/templates/TemplateWorkflowCard.vue

@@ -86,8 +86,8 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const UPSCALE_ZOOM_SCALE = 16 // for upscale templates, exaggerate the hover zoom
 const DEFAULT_ZOOM_SCALE = 5

src/components/templates/TemplateWorkflowList.vue

@@ -38,8 +38,8 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import { computed, ref } from 'vue'
 
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const { sourceModule, loading, templates } = defineProps<{
   sourceModule: string

src/components/templates/TemplateWorkflowView.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
-import { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('primevue/dataview', () => ({
   default: {

src/components/templates/TemplateWorkflowView.vue

@@ -88,7 +88,7 @@ import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vu
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
-import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const { t } = useI18n()
 

src/components/templates/TemplateWorkflowsContent.vue

@@ -61,8 +61,8 @@ import { watch } from 'vue'
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
 import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import type { WorkflowTemplates } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import type { WorkflowTemplates } from '@/platform/workflow/templates/types/template'
 
 const {
   isSmallScreen,

src/components/templates/TemplateWorkflowsSideNav.vue

@@ -33,7 +33,7 @@ import ScrollPanel from 'primevue/scrollpanel'
 import type {
   TemplateGroup,
   WorkflowTemplates
-} from '@/types/workflowTemplateTypes'
+} from '@/platform/workflow/templates/types/template'
 
 defineProps<{
   tabs: TemplateGroup[]

src/components/toast/GlobalToast.vue

@@ -7,8 +7,8 @@ import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { nextTick, watch } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 const toast = useToast()
 const toastStore = useToastStore()

src/components/toast/RerouteMigrationToast.vue

@@ -23,9 +23,9 @@ import Button from 'primevue/button'
 import Toast from 'primevue/toast'
 import { useI18n } from 'vue-i18n'
 
-import type { WorkflowJSON04 } from '@/schemas/comfyWorkflowSchema'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { WorkflowJSON04 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { app } from '@/scripts/app'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { migrateLegacyRerouteNodes } from '@/utils/migration/migrateReroute'
 
 const { t } = useI18n()

src/components/topbar/CommandMenubar.vue

@@ -81,14 +81,14 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import { useManagerState } from '@/composables/useManagerState'
+import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 import { showNativeSystemMenu } from '@/utils/envUtil'

src/components/topbar/CurrentUserButton.spec.ts

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserButton from './CurrentUserButton.vue'
 

src/components/topbar/CurrentUserPopover.spec.ts

@@ -4,7 +4,7 @@ import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
 

src/components/topbar/TopMenubar.vue

@@ -39,8 +39,8 @@ import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 

src/components/topbar/WorkflowOverflowMenu.vue

@@ -23,8 +23,8 @@ import Button from 'primevue/button'
 import Menu from 'primevue/menu'
 import { computed, ref } from 'vue'
 
-import { useWorkflowService } from '@/services/workflowService'
-import type { ComfyWorkflow } from '@/stores/workflowStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 
 const props = defineProps<{
   workflows: ComfyWorkflow[]