fix: nodes2.0's combo widget does not respect "scale menus" setting

## Summary
- Add `contextMenuConverter.ts` with utilities for converting LiteGraph
context menu items to Vue menu format
- Improve `contextMenuCompat.ts` with set-based diffing for more
reliable legacy extension detection
- Extend `MenuOption`/`SubMenuOption` types with `source`, `disabled`,
`isColorPicker`, and `category` type fields
- Add unit tests for converter functions

## Context
This is foundational work for migrating the node context menu from a
custom Popover-based component to PrimeVue ContextMenu.

The converter provides:
- Menu ordering and section grouping (core items first, then extensions)
- Deduplication with preference for Vue-native items over LiteGraph
items
- Extension categorization with labeled section
- Support for disabled states and color picker submenus

## Test plan
- [x] Unit tests pass for `buildStructuredMenu` (9 tests)
- [x] Unit tests pass for `convertContextMenuToOptions` (7 tests)
- [x] Typecheck passes
- [x] Lint passes
- [x] Knip passes (no unused exports)

## Related
This is PR 1 of 2 for the node context menu migration. PR 2 will wire up
the UI component.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7113-feat-Add-context-menu-converter-infrastructure-2be6d73d3650816ca6c9d2cf50f10159)
by [Unito](https://www.unito.io)

browser_tests/assets/groups/nested-groups-1-inner-node.json

@@ -0,0 +1,92 @@
+{
+  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
+  "revision": 0,
+  "last_node_id": 17,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 17,
+      "type": "VAEDecode",
+      "pos": [
+        318.8446183157076,
+        355.3961392345528
+      ],
+      "size": [
+        225,
+        102
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 4,
+      "title": "Outer Group",
+      "bounding": [
+        -46.25245366331014,
+        -150.82497138023245,
+        1034.4034361963616,
+        1007.338460439933
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 3,
+      "title": "Inner Group",
+      "bounding": [
+        80.96059074101554,
+        28.123757436778178,
+        718.286373661183,
+        691.2397164539732
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7121393732101533,
+      "offset": [
+        289.18242848011835,
+        367.0747755524199
+      ]
+    },
+    "frontendVersion": "1.35.5",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true,
+    "workflowRendererVersion": "Vue"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -1653,6 +1653,55 @@ export class ComfyPage {
     }, focusMode)
     await this.nextFrame()
   }
+
+  /**
+   * Get the position of a group by title.
+   * @param title The title of the group to find
+   * @returns The group's canvas position
+   * @throws Error if group not found
+   */
+  async getGroupPosition(title: string): Promise<Position> {
+    const pos = await this.page.evaluate((title) => {
+      const groups = window['app'].graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      return { x: group.pos[0], y: group.pos[1] }
+    }, title)
+    if (!pos) throw new Error(`Group "${title}" not found`)
+    return pos
+  }
+
+  /**
+   * Drag a group by its title.
+   * @param options.name The title of the group to drag
+   * @param options.deltaX Horizontal drag distance in screen pixels
+   * @param options.deltaY Vertical drag distance in screen pixels
+   */
+  async dragGroup(options: {
+    name: string
+    deltaX: number
+    deltaY: number
+  }): Promise<void> {
+    const { name, deltaX, deltaY } = options
+    const screenPos = await this.page.evaluate((title) => {
+      const app = window['app']
+      const groups = app.graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      // Position in the title area of the group
+      const clientPos = app.canvasPosToClientPos([
+        group.pos[0] + 50,
+        group.pos[1] + 15
+      ])
+      return { x: clientPos[0], y: clientPos[1] }
+    }, name)
+    if (!screenPos) throw new Error(`Group "${name}" not found`)
+
+    await this.dragAndDrop(screenPos, {
+      x: screenPos.x + deltaX,
+      y: screenPos.y + deltaY
+    })
+  }
 }
 
 export const testComfySnapToGridGridSize = 50

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -32,4 +32,42 @@ test.describe('Vue Node Groups', () => {
       'vue-groups-fit-to-contents.png'
     )
   })
+
+  test('should move nested groups together when dragging outer group', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('groups/nested-groups-1-inner-node')
+
+    // Get initial positions with null guards
+    const outerInitial = await comfyPage.getGroupPosition('Outer Group')
+    const innerInitial = await comfyPage.getGroupPosition('Inner Group')
+
+    const initialOffsetX = innerInitial.x - outerInitial.x
+    const initialOffsetY = innerInitial.y - outerInitial.y
+
+    // Drag the outer group
+    const dragDelta = { x: 100, y: 80 }
+    await comfyPage.dragGroup({
+      name: 'Outer Group',
+      deltaX: dragDelta.x,
+      deltaY: dragDelta.y
+    })
+
+    // Use retrying assertion to wait for positions to update
+    await expect(async () => {
+      const outerFinal = await comfyPage.getGroupPosition('Outer Group')
+      const innerFinal = await comfyPage.getGroupPosition('Inner Group')
+
+      const finalOffsetX = innerFinal.x - outerFinal.x
+      const finalOffsetY = innerFinal.y - outerFinal.y
+
+      // Both groups should have moved
+      expect(outerFinal.x).not.toBe(outerInitial.x)
+      expect(innerFinal.x).not.toBe(innerInitial.x)
+
+      // The relative offset should be maintained (inner group moved with outer)
+      expect(finalOffsetX).toBeCloseTo(initialOffsetX, 0)
+      expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
+    }).toPass({ timeout: 5000 })
+  })
 })

docs/adr/0005-remove-importmap-for-vue-extensions.md

@@ -0,0 +1,97 @@
+# 5. Remove Import Map for Vue Extensions
+
+Date: 2025-12-13
+
+## Status
+
+Accepted
+
+## Context
+
+ComfyUI frontend previously used a Vite plugin (`generateImportMapPlugin`) to inject an HTML import map exposing shared modules to extensions. This allowed Vue-based extensions to mark dependencies as external in their Vite configs:
+
+```typescript
+// Extension vite.config.ts (old pattern)
+rollupOptions: {
+  external: ['vue', 'vue-i18n', 'pinia', /^primevue\/?.*/, ...]
+}
+```
+
+The import map resolved bare specifiers like `import { ref } from 'vue'` at runtime by mapping them to pre-built ESM files served from `/assets/lib/`.
+
+**Modules exposed via import map:**
+
+- `vue` (vue.esm-browser.prod.js)
+- `vue-i18n` (vue-i18n.esm-browser.prod.js)
+- `primevue/*` (all PrimeVue components)
+- `@primevue/themes/*`
+- `@primevue/forms/*`
+
+**Problems with import map approach:**
+
+1. **Blocked tree shaking**: Vue and PrimeVue loaded as remote modules at runtime, preventing bundler optimizations. The entire Vue runtime was loaded even if only a few APIs were used.
+
+2. **Poor code splitting**: PrimeVue's component library split into hundreds of small chunks, each requiring a separate network request on mount. This significantly impacted initial page load.
+
+3. **Cold start performance**: Each externalized module required a separate HTTP request and browser module resolution step. This compounded on lower-end systems and slower networks.
+
+4. **Version alignment complexity**: Extensions relied on the frontend's Vue version at runtime. Subtle version mismatches between build-time types and runtime code caused debugging difficulties.
+
+5. **Incompatible with Cloud distribution**: The Cloud deployment model requires fully bundled, optimized assets. Import maps added a layer of indirection incompatible with our CDN and caching strategy.
+
+## Decision
+
+Remove the `generateImportMapPlugin` and require Vue-based extensions to bundle their own Vue instance.
+
+**Implementation (PR #6899):**
+
+- Deleted `build/plugins/generateImportMapPlugin.ts`
+- Removed plugin configuration from `vite.config.mts`
+- Removed `fast-glob` dependency used by the plugin
+
+**Extension migration path:**
+
+1. Remove `external: ['vue', ...]` from Vite rollup options
+2. Vue and related dependencies will be bundled into the extension output
+3. No code changes required in extension source files
+
+The import map was already disabled for Cloud builds (PR #6559) before complete removal. Removal aligns all distribution channels on the same bundling strategy.
+
+## Consequences
+
+### Positive
+
+- **Improved page load**: Full tree shaking and optimal code splitting now apply to Vue and PrimeVue
+- **Faster development**: No import map generation step; simplified build pipeline
+- **Better debugging**: Extension's bundled Vue matches build-time expectations exactly
+- **Cloud compatibility**: All assets fully bundled and CDN-optimizable
+- **Consistent behavior**: Same bundling strategy across desktop, localhost, and cloud distributions
+- **Reduced network requests**: Fewer module fetches on initial page load
+
+### Negative
+
+- **Breaking change for existing extensions**: Extensions using `external: ['vue']` pattern fail with "Failed to resolve module specifier 'vue'" error
+- **Larger extension bundles**: Each extension now includes its own Vue instance (~30KB gzipped)
+- **Potential version fragmentation**: Different extensions may bundle different Vue versions (mitigated by Vue's stable API)
+
+### Migration Impact
+
+Extensions affected must update their build configuration. The migration is straightforward:
+
+```diff
+// vite.config.ts
+rollupOptions: {
+-  external: ['vue', 'vue-i18n', 'primevue', ...]
+}
+```
+
+Affected versions:
+
+- **v1.32.x - v1.33.8**: Import map present, external pattern works
+- **v1.33.9+**: Import map removed, bundling required
+
+## Notes
+
+- [ComfyUI_frontend_vue_basic](https://github.com/jtydhr88/ComfyUI_frontend_vue_basic) has been updated to demonstrate the new bundled pattern
+- Issue #7267 documents the user-facing impact and migration discussion
+- Future Extension API v2 (Issue #4668) may provide alternative mechanisms for shared dependencies

docs/adr/README.md

@@ -14,6 +14,7 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
 | [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
+| [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions | Accepted | 2025-12-13 |
 
 ## Creating a New ADR
 

index.html

@@ -5,8 +5,6 @@
     <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
-    <link rel="stylesheet" type="text/css" href="user.css" />
-    <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
     <!-- Fullscreen mode on mobile browsers -->
     <meta name="mobile-web-app-capable" content="yes">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.35.6",
+  "version": "1.36.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

src/components/dialog/header/SettingDialogHeader.vue

@@ -15,9 +15,7 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 
-// Global variable from vite build defined in global.d.ts
-// eslint-disable-next-line no-undef
-const isStaging = !__USE_PROD_CONFIG__
+import { isStaging } from '@/config/staging'
 </script>
 
 <style scoped>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -59,12 +59,10 @@
     </template>
     <template #body>
       <Divider type="dashed" class="m-2" />
-      <!-- Loading state -->
-      <div v-if="loading">
+      <div v-if="loading && !displayAssets.length">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <!-- Empty state -->
-      <div v-else-if="!displayAssets.length">
+      <div v-else-if="!loading && !displayAssets.length">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -77,7 +75,6 @@
           :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
-      <!-- Content -->
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <VirtualGrid
           :items="mediaAssetsWithKey"

src/composables/graph/contextMenuConverter.test.ts

@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+
+import type { MenuOption } from './useMoreOptionsMenu'
+import {
+  buildStructuredMenu,
+  convertContextMenuToOptions
+} from './contextMenuConverter'
+
+describe('contextMenuConverter', () => {
+  describe('buildStructuredMenu', () => {
+    it('should order core items before extension items', () => {
+      const options: MenuOption[] = [
+        { label: 'Custom Extension Item', source: 'litegraph' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Core items (Rename, Copy) should come before extension items
+      const renameIndex = result.findIndex((opt) => opt.label === 'Rename')
+      const copyIndex = result.findIndex((opt) => opt.label === 'Copy')
+      const extensionIndex = result.findIndex(
+        (opt) => opt.label === 'Custom Extension Item'
+      )
+
+      expect(renameIndex).toBeLessThan(extensionIndex)
+      expect(copyIndex).toBeLessThan(extensionIndex)
+    })
+
+    it('should add Extensions category label before extension items', () => {
+      const options: MenuOption[] = [
+        { label: 'Copy', source: 'vue' },
+        { label: 'My Custom Extension', source: 'litegraph' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const extensionsLabel = result.find(
+        (opt) => opt.label === 'Extensions' && opt.type === 'category'
+      )
+      expect(extensionsLabel).toBeDefined()
+      expect(extensionsLabel?.disabled).toBe(true)
+    })
+
+    it('should place Delete at the very end', () => {
+      const options: MenuOption[] = [
+        { label: 'Delete', action: () => {}, source: 'vue' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const lastNonDivider = [...result]
+        .reverse()
+        .find((opt) => opt.type !== 'divider')
+      expect(lastNonDivider?.label).toBe('Delete')
+    })
+
+    it('should deduplicate items with same label, preferring vue source', () => {
+      const options: MenuOption[] = [
+        { label: 'Copy', action: () => {}, source: 'litegraph' },
+        { label: 'Copy', action: () => {}, source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const copyItems = result.filter((opt) => opt.label === 'Copy')
+      expect(copyItems).toHaveLength(1)
+      expect(copyItems[0].source).toBe('vue')
+    })
+
+    it('should preserve dividers between sections', () => {
+      const options: MenuOption[] = [
+        { label: 'Rename', source: 'vue' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Pin', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const dividers = result.filter((opt) => opt.type === 'divider')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should handle empty input', () => {
+      const result = buildStructuredMenu([])
+      expect(result).toEqual([])
+    })
+
+    it('should handle only dividers', () => {
+      const options: MenuOption[] = [{ type: 'divider' }, { type: 'divider' }]
+
+      const result = buildStructuredMenu(options)
+
+      // Should be empty since dividers are filtered initially
+      expect(result).toEqual([])
+    })
+
+    it('should recognize Remove as equivalent to Delete', () => {
+      const options: MenuOption[] = [
+        { label: 'Remove', action: () => {}, source: 'vue' },
+        { label: 'Copy', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Remove should be placed at the end like Delete
+      const lastNonDivider = [...result]
+        .reverse()
+        .find((opt) => opt.type !== 'divider')
+      expect(lastNonDivider?.label).toBe('Remove')
+    })
+
+    it('should group core items in correct section order', () => {
+      const options: MenuOption[] = [
+        { label: 'Color', source: 'vue' },
+        { label: 'Node Info', source: 'vue' },
+        { label: 'Pin', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Get indices of items (excluding dividers and categories)
+      const getIndex = (label: string) =>
+        result.findIndex((opt) => opt.label === label)
+
+      // Rename (section 1) should come before Pin (section 2)
+      expect(getIndex('Rename')).toBeLessThan(getIndex('Pin'))
+      // Pin (section 2) should come before Node Info (section 4)
+      expect(getIndex('Pin')).toBeLessThan(getIndex('Node Info'))
+      // Node Info (section 4) should come before or with Color (section 4)
+      expect(getIndex('Node Info')).toBeLessThanOrEqual(getIndex('Color'))
+    })
+  })
+
+  describe('convertContextMenuToOptions', () => {
+    it('should convert empty array to empty result', () => {
+      const result = convertContextMenuToOptions([])
+      expect(result).toEqual([])
+    })
+
+    it('should convert null items to dividers', () => {
+      const result = convertContextMenuToOptions([null], undefined, false)
+      expect(result).toHaveLength(1)
+      expect(result[0].type).toBe('divider')
+    })
+
+    it('should skip blacklisted items like Properties', () => {
+      const items = [{ content: 'Properties', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result.find((opt) => opt.label === 'Properties')).toBeUndefined()
+    })
+
+    it('should convert basic menu items with content', () => {
+      const items = [{ content: 'Test Item', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result).toHaveLength(1)
+      expect(result[0].label).toBe('Test Item')
+    })
+
+    it('should mark items as litegraph source', () => {
+      const items = [{ content: 'Test Item', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result[0].source).toBe('litegraph')
+    })
+
+    it('should pass through disabled state', () => {
+      const items = [{ content: 'Disabled Item', disabled: true }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result[0].disabled).toBe(true)
+    })
+
+    it('should apply structuring by default', () => {
+      const items = [
+        { content: 'Copy', callback: () => {} },
+        { content: 'Custom Extension', callback: () => {} }
+      ]
+      const result = convertContextMenuToOptions(items)
+
+      // With structuring, there should be Extensions category
+      const hasExtensionsCategory = result.some(
+        (opt) => opt.label === 'Extensions' && opt.type === 'category'
+      )
+      expect(hasExtensionsCategory).toBe(true)
+    })
+  })
+})

src/composables/graph/contextMenuConverter.ts

@@ -0,0 +1,620 @@
+import { default as DOMPurify } from 'dompurify'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type {
+  IContextMenuValue,
+  LGraphNode,
+  IContextMenuOptions,
+  ContextMenu
+} from '@/lib/litegraph/src/litegraph'
+
+import type { MenuOption, SubMenuOption } from './useMoreOptionsMenu'
+import type { ContextMenuDivElement } from '@/lib/litegraph/src/interfaces'
+
+/**
+ * Hard blacklist - items that should NEVER be included
+ */
+const HARD_BLACKLIST = new Set([
+  'Properties', // Never include Properties submenu
+  'Colors', // Use singular "Color" instead
+  'Shapes', // Use singular "Shape" instead
+  'Title',
+  'Mode',
+  'Properties Panel',
+  'Copy (Clipspace)'
+])
+
+/**
+ * Core menu items - items that should appear in the main menu, not under Extensions
+ * Includes both LiteGraph base menu items and ComfyUI built-in functionality
+ */
+const CORE_MENU_ITEMS = new Set([
+  // Basic operations
+  'Rename',
+  'Copy',
+  'Duplicate',
+  'Clone',
+  // Node state operations
+  'Run Branch',
+  'Pin',
+  'Unpin',
+  'Bypass',
+  'Remove Bypass',
+  'Mute',
+  // Structure operations
+  'Convert to Subgraph',
+  'Frame selection',
+  'Minimize Node',
+  'Expand',
+  'Collapse',
+  // Info and adjustments
+  'Node Info',
+  'Resize',
+  'Title',
+  'Properties Panel',
+  'Adjust Size',
+  // Visual
+  'Color',
+  'Colors',
+  'Shape',
+  'Shapes',
+  'Mode',
+  // Built-in node operations (node-specific)
+  'Open Image',
+  'Copy Image',
+  'Save Image',
+  'Open in Mask Editor',
+  'Edit Subgraph Widgets',
+  'Unpack Subgraph',
+  'Copy (Clipspace)',
+  'Paste (Clipspace)',
+  // Selection and alignment
+  'Align Selected To',
+  'Distribute Nodes',
+  // Deletion
+  'Delete',
+  'Remove',
+  // LiteGraph base items
+  'Show Advanced',
+  'Hide Advanced'
+])
+
+/**
+ * Normalize menu item label for duplicate detection
+ * Handles variations like Colors/Color, Shapes/Shape, Pin/Unpin, Remove/Delete
+ */
+function normalizeLabel(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/^un/, '') // Remove 'un' prefix (Unpin -> Pin)
+    .trim()
+}
+
+/**
+ * Check if a similar menu item already exists in the results
+ * Returns true if an item with the same normalized label exists
+ */
+function isDuplicateItem(label: string, existingItems: MenuOption[]): boolean {
+  const normalizedLabel = normalizeLabel(label)
+
+  // Map of equivalent items
+  const equivalents: Record<string, string[]> = {
+    color: ['color', 'colors'],
+    shape: ['shape', 'shapes'],
+    pin: ['pin', 'unpin'],
+    delete: ['remove', 'delete'],
+    duplicate: ['clone', 'duplicate']
+  }
+
+  return existingItems.some((item) => {
+    if (!item.label) return false
+
+    const existingNormalized = normalizeLabel(item.label)
+
+    // Check direct match
+    if (existingNormalized === normalizedLabel) return true
+
+    // Check if they're in the same equivalence group
+    for (const values of Object.values(equivalents)) {
+      if (
+        values.includes(normalizedLabel) &&
+        values.includes(existingNormalized)
+      ) {
+        return true
+      }
+    }
+
+    return false
+  })
+}
+
+/**
+ * Check if a menu item is a core menu item (not an extension)
+ * Core items include LiteGraph base items and ComfyUI built-in functionality
+ */
+function isCoreMenuItem(label: string): boolean {
+  return CORE_MENU_ITEMS.has(label)
+}
+
+/**
+ * Filter out duplicate menu items based on label
+ * Gives precedence to Vue hardcoded options over LiteGraph options
+ */
+function removeDuplicateMenuOptions(options: MenuOption[]): MenuOption[] {
+  // Group items by label
+  const itemsByLabel = new Map<string, MenuOption[]>()
+  const itemsWithoutLabel: MenuOption[] = []
+
+  for (const opt of options) {
+    // Always keep dividers and category items
+    if (opt.type === 'divider' || opt.type === 'category') {
+      itemsWithoutLabel.push(opt)
+      continue
+    }
+
+    // Items without labels are kept as-is
+    if (!opt.label) {
+      itemsWithoutLabel.push(opt)
+      continue
+    }
+
+    // Group by label
+    if (!itemsByLabel.has(opt.label)) {
+      itemsByLabel.set(opt.label, [])
+    }
+    itemsByLabel.get(opt.label)!.push(opt)
+  }
+
+  // Select best item for each label (prefer vue over litegraph)
+  const result: MenuOption[] = []
+  const seenLabels = new Set<string>()
+
+  for (const opt of options) {
+    // Add non-labeled items in original order
+    if (opt.type === 'divider' || opt.type === 'category' || !opt.label) {
+      if (itemsWithoutLabel.includes(opt)) {
+        result.push(opt)
+        const idx = itemsWithoutLabel.indexOf(opt)
+        itemsWithoutLabel.splice(idx, 1)
+      }
+      continue
+    }
+
+    // Skip if we already processed this label
+    if (seenLabels.has(opt.label)) {
+      continue
+    }
+    seenLabels.add(opt.label)
+
+    // Get all items with this label
+    const duplicates = itemsByLabel.get(opt.label)!
+
+    // If only one item, add it
+    if (duplicates.length === 1) {
+      result.push(duplicates[0])
+      continue
+    }
+
+    // Multiple items: prefer vue source over litegraph
+    const vueItem = duplicates.find((item) => item.source === 'vue')
+    if (vueItem) {
+      result.push(vueItem)
+    } else {
+      // No vue item, just take the first one
+      result.push(duplicates[0])
+    }
+  }
+
+  return result
+}
+
+/**
+ * Order groups for menu items - defines the display order of sections
+ */
+const MENU_ORDER: string[] = [
+  // Section 1: Basic operations
+  'Rename',
+  'Copy',
+  'Duplicate',
+  // Section 2: Node actions
+  'Run Branch',
+  'Pin',
+  'Unpin',
+  'Bypass',
+  'Remove Bypass',
+  'Mute',
+  // Section 3: Structure operations
+  'Convert to Subgraph',
+  'Frame selection',
+  'Minimize Node',
+  'Expand',
+  'Collapse',
+  'Resize',
+  'Clone',
+  // Section 4: Node properties
+  'Node Info',
+  'Color',
+  // Section 5: Node-specific operations
+  'Open in Mask Editor',
+  'Open Image',
+  'Copy Image',
+  'Save Image',
+  'Copy (Clipspace)',
+  'Paste (Clipspace)',
+  // Fallback for other core items
+  'Convert to Group Node (Deprecated)'
+]
+
+/**
+ * Get the order index for a menu item (lower = earlier in menu)
+ */
+function getMenuItemOrder(label: string): number {
+  const index = MENU_ORDER.indexOf(label)
+  return index === -1 ? 999 : index
+}
+
+/**
+ * Build structured menu with core items first, then extensions under a labeled section
+ * Ensures Delete always appears at the bottom
+ */
+export function buildStructuredMenu(options: MenuOption[]): MenuOption[] {
+  // First, remove duplicates (giving precedence to Vue hardcoded options)
+  const deduplicated = removeDuplicateMenuOptions(options)
+  const coreItemsMap = new Map<string, MenuOption>()
+  const extensionItems: MenuOption[] = []
+  let deleteItem: MenuOption | undefined
+
+  // Separate items into core and extension categories
+  for (const option of deduplicated) {
+    // Skip dividers for now - we'll add them between sections later
+    if (option.type === 'divider') {
+      continue
+    }
+
+    // Skip category labels (they'll be added separately)
+    if (option.type === 'category') {
+      continue
+    }
+
+    // Check if this is the Delete/Remove item - save it for the end
+    const isDeleteItem = option.label === 'Delete' || option.label === 'Remove'
+    if (isDeleteItem && !option.hasSubmenu) {
+      deleteItem = option
+      continue
+    }
+
+    // Categorize based on label
+    if (option.label && isCoreMenuItem(option.label)) {
+      coreItemsMap.set(option.label, option)
+    } else {
+      extensionItems.push(option)
+    }
+  }
+  // Build ordered core items based on MENU_ORDER
+  const orderedCoreItems: MenuOption[] = []
+  const coreLabels = Array.from(coreItemsMap.keys())
+  coreLabels.sort((a, b) => getMenuItemOrder(a) - getMenuItemOrder(b))
+
+  // Section boundaries based on MENU_ORDER indices
+  // Section 1: 0-2 (Rename, Copy, Duplicate)
+  // Section 2: 3-8 (Run Branch, Pin, Unpin, Bypass, Remove Bypass, Mute)
+  // Section 3: 9-15 (Convert to Subgraph, Frame selection, Minimize Node, Expand, Collapse, Resize, Clone)
+  // Section 4: 16-17 (Node Info, Color)
+  // Section 5: 18+ (Image operations and fallback items)
+  const getSectionNumber = (index: number): number => {
+    if (index <= 2) return 1
+    if (index <= 8) return 2
+    if (index <= 15) return 3
+    if (index <= 17) return 4
+    return 5
+  }
+
+  let lastSection = 0
+  for (const label of coreLabels) {
+    const item = coreItemsMap.get(label)!
+    const itemIndex = getMenuItemOrder(label)
+    const currentSection = getSectionNumber(itemIndex)
+
+    // Add divider when moving to a new section
+    if (lastSection > 0 && currentSection !== lastSection) {
+      orderedCoreItems.push({ type: 'divider' })
+    }
+
+    orderedCoreItems.push(item)
+    lastSection = currentSection
+  }
+
+  // Build the final menu structure
+  const result: MenuOption[] = []
+
+  // Add ordered core items with their dividers
+  result.push(...orderedCoreItems)
+
+  // Add extensions section if there are extension items
+  if (extensionItems.length > 0) {
+    // Add divider before Extensions section
+    result.push({ type: 'divider' })
+
+    // Add non-clickable Extensions label
+    result.push({
+      label: 'Extensions',
+      type: 'category',
+      disabled: true
+    })
+
+    // Add extension items
+    result.push(...extensionItems)
+  }
+
+  // Add Delete at the bottom if it exists
+  if (deleteItem) {
+    result.push({ type: 'divider' })
+    result.push(deleteItem)
+  }
+
+  return result
+}
+
+/**
+ * Convert LiteGraph IContextMenuValue items to Vue MenuOption format
+ * Used to bridge LiteGraph context menus into Vue node menus
+ * @param items - The LiteGraph menu items to convert
+ * @param node - The node context (optional)
+ * @param applyStructuring - Whether to apply menu structuring (core/extensions separation). Defaults to true.
+ */
+export function convertContextMenuToOptions(
+  items: (IContextMenuValue | null)[],
+  node?: LGraphNode,
+  applyStructuring: boolean = true
+): MenuOption[] {
+  const result: MenuOption[] = []
+
+  for (const item of items) {
+    // Null items are separators in LiteGraph
+    if (item === null) {
+      result.push({ type: 'divider' })
+      continue
+    }
+
+    // Skip items without content (shouldn't happen, but be safe)
+    if (!item.content) {
+      continue
+    }
+
+    // Skip hard blacklisted items
+    if (HARD_BLACKLIST.has(item.content)) {
+      continue
+    }
+
+    // Skip if a similar item already exists in results
+    if (isDuplicateItem(item.content, result)) {
+      continue
+    }
+
+    const option: MenuOption = {
+      label: item.content,
+      source: 'litegraph'
+    }
+
+    // Pass through disabled state
+    if (item.disabled) {
+      option.disabled = true
+    }
+
+    // Handle submenus
+    if (item.has_submenu) {
+      // Static submenu with pre-defined options
+      if (item.submenu?.options) {
+        option.hasSubmenu = true
+        option.submenu = convertSubmenuToOptions(item.submenu.options)
+      }
+      // Dynamic submenu - callback creates it on-demand
+      else if (item.callback && !item.disabled) {
+        option.hasSubmenu = true
+        // Intercept the callback to capture dynamic submenu items
+        const capturedSubmenu = captureDynamicSubmenu(item, node)
+        if (capturedSubmenu) {
+          option.submenu = capturedSubmenu
+        } else {
+          console.warn(
+            '[ContextMenuConverter] Failed to capture submenu for:',
+            item.content
+          )
+        }
+      }
+    }
+    // Handle callback (only if not disabled and not a submenu)
+    else if (item.callback && !item.disabled) {
+      // Wrap the callback to match the () => void signature
+      option.action = () => {
+        try {
+          void item.callback?.call(
+            item as unknown as ContextMenuDivElement,
+            item.value,
+            {},
+            undefined,
+            undefined,
+            item
+          )
+        } catch (error) {
+          console.error('Error executing context menu callback:', error)
+        }
+      }
+    }
+
+    result.push(option)
+  }
+
+  // Apply structured menu with core items and extensions section (if requested)
+  if (applyStructuring) {
+    return buildStructuredMenu(result)
+  }
+
+  return result
+}
+
+/**
+ * Capture submenu items from a dynamic submenu callback
+ * Intercepts ContextMenu constructor to extract items without creating HTML menu
+ */
+function captureDynamicSubmenu(
+  item: IContextMenuValue,
+  node?: LGraphNode
+): SubMenuOption[] | undefined {
+  let capturedItems: readonly (IContextMenuValue | string | null)[] | undefined
+  let capturedOptions: IContextMenuOptions | undefined
+
+  // Store original ContextMenu constructor
+  const OriginalContextMenu = LiteGraph.ContextMenu
+
+  try {
+    // Mock ContextMenu constructor to capture submenu items and options
+    LiteGraph.ContextMenu = function (
+      items: readonly (IContextMenuValue | string | null)[],
+      options?: IContextMenuOptions
+    ) {
+      // Capture both items and options
+      capturedItems = items
+      capturedOptions = options
+      // Return a minimal mock object to prevent errors
+      return {
+        close: () => {},
+        root: document.createElement('div')
+      } as unknown as ContextMenu
+    } as unknown as typeof ContextMenu
+
+    // Execute the callback to trigger submenu creation
+    try {
+      // Create a mock MouseEvent for the callback
+      const mockEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 0,
+        clientY: 0
+      })
+
+      // Create a mock parent menu
+      const mockMenu = {
+        close: () => {},
+        root: document.createElement('div')
+      } as unknown as ContextMenu
+
+      // Call the callback which should trigger ContextMenu constructor
+      // Callback signature varies, but typically: (value, options, event, menu, node)
+      void item.callback?.call(
+        item as unknown as ContextMenuDivElement,
+        item.value,
+        {},
+        mockEvent,
+        mockMenu,
+        node // Pass the node context for callbacks that need it
+      )
+    } catch (error) {
+      console.warn(
+        '[ContextMenuConverter] Error executing callback for:',
+        item.content,
+        error
+      )
+    }
+  } finally {
+    // Always restore original constructor
+    LiteGraph.ContextMenu = OriginalContextMenu
+  }
+
+  // Convert captured items to Vue submenu format
+  if (capturedItems) {
+    const converted = convertSubmenuToOptions(capturedItems, capturedOptions)
+    return converted
+  }
+
+  console.warn('[ContextMenuConverter] No items captured for:', item.content)
+  return undefined
+}
+
+/**
+ * Convert LiteGraph submenu items to Vue SubMenuOption format
+ */
+function convertSubmenuToOptions(
+  items: readonly (IContextMenuValue | string | null)[],
+  options?: IContextMenuOptions
+): SubMenuOption[] {
+  const result: SubMenuOption[] = []
+
+  for (const item of items) {
+    // Skip null separators
+    if (item === null) {
+      continue
+    }
+
+    // Handle string items (simple labels like in Mode/Shapes menus)
+    if (typeof item === 'string') {
+      const subOption: SubMenuOption = {
+        label: item,
+        action: () => {
+          try {
+            // Call the options callback with the string value
+            if (options?.callback) {
+              void options.callback.call(
+                null,
+                item,
+                options,
+                undefined,
+                undefined,
+                options.extra
+              )
+            }
+          } catch (error) {
+            console.error('Error executing string item callback:', error)
+          }
+        }
+      }
+      result.push(subOption)
+      continue
+    }
+
+    // Handle object items
+    if (!item.content) {
+      continue
+    }
+
+    // Extract text content from HTML if present
+    const content = stripHtmlTags(item.content)
+
+    const subOption: SubMenuOption = {
+      label: content,
+      action: () => {
+        try {
+          void item.callback?.call(
+            item as unknown as ContextMenuDivElement,
+            item.value,
+            {},
+            undefined,
+            undefined,
+            item
+          )
+        } catch (error) {
+          console.error('Error executing submenu callback:', error)
+        }
+      }
+    }
+
+    // Pass through disabled state
+    if (item.disabled) {
+      subOption.disabled = true
+    }
+
+    result.push(subOption)
+  }
+  return result
+}
+
+/**
+ * Strip HTML tags from content string safely
+ * LiteGraph menu items often include HTML for styling
+ */
+function stripHtmlTags(html: string): string {
+  // Use DOMPurify to sanitize and strip all HTML tags
+  const sanitized = DOMPurify.sanitize(html, { ALLOWED_TAGS: [] })
+  const result = sanitized.trim()
+  return result || html.replace(/<[^>]*>/g, '').trim() || html
+}

src/composables/graph/useGraphNodeManager.ts

@@ -3,8 +3,7 @@
  * Provides event-driven reactivity with performance optimizations
  */
 import { reactiveComputed } from '@vueuse/core'
-import { reactive, ref, shallowReactive, watch } from 'vue'
-import type { Ref } from 'vue'
+import { reactive, shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
@@ -21,7 +20,7 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue, ControlOptions } from '@/types/simplifiedWidget'
+import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
 import { normalizeControlOption } from '@/types/simplifiedWidget'
 
 import type {
@@ -42,15 +41,15 @@ export interface WidgetSlotMetadata {
 export interface SafeWidgetData {
   name: string
   type: string
-  value: () => Ref<WidgetValue>
-  borderStyle?: string
-  callback?: ((value: unknown) => void) | undefined
-  controlWidget?: () => Ref<ControlOptions>
-  isDOMWidget?: boolean
+  value: WidgetValue
   label?: string
   options?: IWidgetOptions<unknown>
-  slotMetadata?: WidgetSlotMetadata
+  callback?: ((value: unknown) => void) | undefined
   spec?: InputSpec
+  slotMetadata?: WidgetSlotMetadata
+  isDOMWidget?: boolean
+  controlWidget?: SafeControlWidget
+  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -87,47 +86,15 @@ export interface GraphNodeManager {
   cleanup(): void
 }
 
-function normalizeWidgetValue(value: unknown): WidgetValue {
-  if (value === null || value === undefined || value === void 0) {
-    return undefined
-  }
-  if (
-    typeof value === 'string' ||
-    typeof value === 'number' ||
-    typeof value === 'boolean'
-  ) {
-    return value
-  }
-  if (typeof value === 'object') {
-    // Check if it's a File array
-    if (
-      Array.isArray(value) &&
-      value.length > 0 &&
-      value.every((item): item is File => item instanceof File)
-    ) {
-      return value
-    }
-    // Otherwise it's a generic object
-    return value
-  }
-  // If none of the above, return undefined
-  console.warn(`Invalid widget value type: ${typeof value}`, value)
-  return undefined
-}
-
-function getControlWidget(
-  widget: IBaseWidget
-): (() => Ref<ControlOptions>) | undefined {
+function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
   const cagWidget = widget.linkedWidgets?.find(
     (w) => w.name == 'control_after_generate'
   )
   if (!cagWidget) return
-  const cagRef = ref<ControlOptions>(normalizeControlOption(cagWidget.value))
-  watch(cagRef, (value) => {
-    cagWidget.value = normalizeControlOption(value)
-    cagWidget.callback?.(cagWidget.value)
-  })
-  return () => cagRef
+  return {
+    value: normalizeControlOption(cagWidget.value),
+    update: (value) => (cagWidget.value = normalizeControlOption(value))
+  }
 }
 
 export function safeWidgetMapper(
@@ -137,27 +104,18 @@ export function safeWidgetMapper(
   const nodeDefStore = useNodeDefStore()
   return function (widget) {
     try {
+      // TODO: Use widget.getReactiveData() once TypeScript types are updated
+      let value = widget.value
+
       // For combo widgets, if value is undefined, use the first option as default
       if (
-        widget.value === undefined &&
+        value === undefined &&
         widget.type === 'combo' &&
         widget.options?.values &&
         Array.isArray(widget.options.values) &&
         widget.options.values.length > 0
       ) {
-        widget.value = widget.options.values[0]
-      }
-      if (!widget.valueRef) {
-        const valueRef = ref(widget.value)
-        watch(valueRef, (newValue) => {
-          widget.value = newValue
-          widget.callback?.(newValue)
-        })
-        widget.callback = useChainCallback(widget.callback, () => {
-          if (valueRef.value !== widget.value)
-            valueRef.value = normalizeWidgetValue(widget.value) ?? undefined
-        })
-        widget.valueRef = () => valueRef
+        value = widget.options.values[0]
       }
       const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
       const slotInfo = slotMetadata.get(widget.name)
@@ -170,8 +128,9 @@ export function safeWidgetMapper(
       return {
         name: widget.name,
         type: widget.type,
-        value: widget.valueRef,
+        value: value,
         borderStyle,
+        callback: widget.callback,
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,
         options: widget.options,
@@ -183,7 +142,7 @@ export function safeWidgetMapper(
       return {
         name: widget.name || 'unknown',
         type: widget.type || 'text',
-        value: () => ref()
+        value: undefined
       }
     }
   }
@@ -259,15 +218,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
       }
     })
-    const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
-    Object.defineProperty(node, 'inputs', {
-      get() {
-        return reactiveInputs
-      },
-      set(v) {
-        reactiveInputs.splice(0, reactiveInputs.length, ...v)
-      }
-    })
 
     const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
       node.inputs?.forEach((input, index) => {
@@ -302,7 +252,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       badges,
       hasErrors: !!node.has_errors,
       widgets: safeWidgets,
-      inputs: reactiveInputs,
+      inputs: node.inputs ? [...node.inputs] : undefined,
       outputs: node.outputs ? [...node.outputs] : undefined,
       flags: node.flags ? { ...node.flags } : undefined,
       color: node.color || undefined,
@@ -316,6 +266,128 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     return nodeRefs.get(id)
   }
 
+  /**
+   * Validates that a value is a valid WidgetValue type
+   */
+  const validateWidgetValue = (value: unknown): WidgetValue => {
+    if (value === null || value === undefined || value === void 0) {
+      return undefined
+    }
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      return value
+    }
+    if (typeof value === 'object') {
+      // Check if it's a File array
+      if (
+        Array.isArray(value) &&
+        value.length > 0 &&
+        value.every((item): item is File => item instanceof File)
+      ) {
+        return value
+      }
+      // Otherwise it's a generic object
+      return value
+    }
+    // If none of the above, return undefined
+    console.warn(`Invalid widget value type: ${typeof value}`, value)
+    return undefined
+  }
+
+  /**
+   * Updates Vue state when widget values change
+   */
+  const updateVueWidgetState = (
+    nodeId: string,
+    widgetName: string,
+    value: unknown
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName ? { ...w, value: validateWidgetValue(value) } : w
+      )
+      // Create a completely new object to ensure Vue reactivity triggers
+      const updatedData = {
+        ...currentData,
+        widgets: updatedWidgets
+      }
+
+      vueNodeData.set(nodeId, updatedData)
+    } catch (error) {
+      // Ignore widget update errors to prevent cascade failures
+    }
+  }
+
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedWidgetCallback = (
+    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      try {
+        // 1. Update the widget value in LiteGraph (critical for LiteGraph state)
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
+
+        // 2. Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // 3. Update Vue state to maintain synchronization
+        updateVueWidgetState(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node
+   */
+  const setupNodeWidgetCallbacks = (node: LGraphNode) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedWidgetCallback(
+        widget,
+        originalCallback,
+        nodeId
+      )
+    })
+  }
+
   const syncWithGraph = () => {
     if (!graph?._nodes) return
 
@@ -336,6 +408,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       // Store non-reactive reference
       nodeRefs.set(id, node)
 
+      // Set up widget callbacks BEFORE extracting data (critical order)
+      setupNodeWidgetCallbacks(node)
+
       // Extract and store safe data for Vue
       vueNodeData.set(id, extractVueNodeData(node))
     })
@@ -354,6 +429,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Store non-reactive reference to original node
     nodeRefs.set(id, node)
 
+    // Set up widget callbacks BEFORE extracting data (critical order)
+    setupNodeWidgetCallbacks(node)
+
     // Extract initial data for Vue (may be incomplete during graph configure)
     vueNodeData.set(id, extractVueNodeData(node))
 

src/composables/graph/useMoreOptionsMenu.ts

@@ -15,10 +15,13 @@ export interface MenuOption {
   icon?: string
   shortcut?: string
   hasSubmenu?: boolean
-  type?: 'divider'
+  type?: 'divider' | 'category'
   action?: () => void
   submenu?: SubMenuOption[]
   badge?: BadgeVariant
+  disabled?: boolean
+  source?: 'litegraph' | 'vue'
+  isColorPicker?: boolean
 }
 
 export interface SubMenuOption {
@@ -26,6 +29,7 @@ export interface SubMenuOption {
   icon?: string
   action: () => void
   color?: string
+  disabled?: boolean
 }
 
 export enum BadgeVariant {

src/composables/useContextMenuTranslation.ts

@@ -22,7 +22,10 @@ export const useContextMenuTranslation = () => {
     this: LGraphCanvas,
     ...args: Parameters<typeof getCanvasMenuOptions>
   ) {
-    const res: IContextMenuValue[] = getCanvasMenuOptions.apply(this, args)
+    const res: (IContextMenuValue | null)[] = getCanvasMenuOptions.apply(
+      this,
+      args
+    )
 
     // Add items from new extension API
     const newApiItems = app.collectCanvasMenuItems(this)
@@ -58,13 +61,16 @@ export const useContextMenuTranslation = () => {
     LGraphCanvas.prototype
   )
 
+  // Install compatibility layer for getNodeMenuOptions
+  legacyMenuCompat.install(LGraphCanvas.prototype, 'getNodeMenuOptions')
+
   // Wrap getNodeMenuOptions to add new API items
   const nodeMenuFn = LGraphCanvas.prototype.getNodeMenuOptions
   const getNodeMenuOptionsWithExtensions = function (
     this: LGraphCanvas,
     ...args: Parameters<typeof nodeMenuFn>
   ) {
-    const res = nodeMenuFn.apply(this, args)
+    const res = nodeMenuFn.apply(this, args) as (IContextMenuValue | null)[]
 
     // Add items from new extension API
     const node = args[0]
@@ -73,11 +79,28 @@ export const useContextMenuTranslation = () => {
       res.push(item)
     }
 
+    // Add legacy monkey-patched items
+    const legacyItems = legacyMenuCompat.extractLegacyItems(
+      'getNodeMenuOptions',
+      this,
+      ...args
+    )
+    for (const item of legacyItems) {
+      res.push(item)
+    }
+
     return res
   }
 
   LGraphCanvas.prototype.getNodeMenuOptions = getNodeMenuOptionsWithExtensions
 
+  legacyMenuCompat.registerWrapper(
+    'getNodeMenuOptions',
+    getNodeMenuOptionsWithExtensions,
+    nodeMenuFn,
+    LGraphCanvas.prototype
+  )
+
   function translateMenus(
     values: readonly (IContextMenuValue | string | null)[] | undefined,
     options: IContextMenuOptions

src/composables/useTransformCompatOverlayProps.ts

@@ -1,6 +1,8 @@
 import type { HintedString } from '@primevue/core'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+
 /**
  * Options for configuring transform-compatible overlay props
  */
@@ -21,8 +23,11 @@ interface TransformCompatOverlayOptions {
  *
  * Vue nodes use CSS transforms for positioning/scaling. PrimeVue overlay
  * components (Select, MultiSelect, TreeSelect, etc.) teleport to document
- * body by default, breaking transform inheritance. This composable provides
- * the necessary props to keep overlays within their component elements.
+ * body by default, breaking transform inheritance.
+ *
+ * When LiteGraph.ContextMenu.Scaling is enabled, overlays are appended to
+ * 'self' to inherit canvas transforms and scale with the canvas. When disabled,
+ * overlays are appended to 'body' to maintain fixed size regardless of canvas zoom.
  *
  * @param overrides - Optional overrides for specific use cases
  * @returns Computed props object to spread on PrimeVue overlay components
@@ -41,8 +46,15 @@ interface TransformCompatOverlayOptions {
 export function useTransformCompatOverlayProps(
   overrides: TransformCompatOverlayOptions = {}
 ) {
-  return computed(() => ({
-    appendTo: 'self' as const,
-    ...overrides
-  }))
+  const settingStore = useSettingStore()
+
+  return computed(() => {
+    const contextMenuScaling = settingStore.get('LiteGraph.ContextMenu.Scaling')
+    const appendTo = contextMenuScaling ? ('self' as const) : ('body' as const)
+
+    return {
+      appendTo,
+      ...overrides
+    }
+  })
 }

src/config/staging.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+const BUILD_TIME_IS_STAGING = !__USE_PROD_CONFIG__
+
+/**
+ * Returns whether the current environment is staging.
+ * - Cloud builds use runtime configuration (firebase_config.projectId containing '-dev')
+ * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
+ */
+export const isStaging = computed(() => {
+  if (!isCloud) {
+    return BUILD_TIME_IS_STAGING
+  }
+
+  const projectId = remoteConfig.value.firebase_config?.projectId
+  return projectId?.includes('-dev') ?? BUILD_TIME_IS_STAGING
+})

src/constants/serverConfig.ts

@@ -389,6 +389,13 @@ export const SERVER_CONFIG_ITEMS: ServerConfig<any>[] = [
     type: 'boolean',
     defaultValue: false
   },
+  {
+    id: 'enable-manager-legacy-ui',
+    name: 'Use legacy Manager UI',
+    tooltip: 'Uses the legacy ComfyUI-Manager UI instead of the new UI.',
+    type: 'boolean',
+    defaultValue: false
+  },
   {
     id: 'disable-all-custom-nodes',
     name: 'Disable loading all custom nodes.',

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,5 +1,6 @@
+import { remove } from 'es-toolkit'
+
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import type {
   ISlotType,
   INodeInputSlot,
@@ -23,22 +24,41 @@ import type { ComfyApp } from '@/scripts/app'
 const INLINE_INPUTS = false
 
 type MatchTypeNode = LGraphNode &
-  Pick<Required<LGraphNode>, 'comfyMatchType' | 'onConnectionsChange'>
+  Pick<Required<LGraphNode>, 'onConnectionsChange'> & {
+    comfyDynamic: { matchType: Record<string, Record<string, string>> }
+  }
+type AutogrowNode = LGraphNode &
+  Pick<Required<LGraphNode>, 'onConnectionsChange' | 'widgets'> & {
+    comfyDynamic: {
+      autogrow: Record<
+        string,
+        {
+          min: number
+          max: number
+          inputSpecs: InputSpecV2[]
+          prefix?: string
+          names?: string[]
+        }
+      >
+    }
+  }
 
 function ensureWidgetForInput(node: LGraphNode, input: INodeInputSlot) {
-  if (input.widget?.name) return
   node.widgets ??= []
+  const { widget } = input
+  if (widget && node.widgets.some((w) => w.name === widget.name)) return
   node.widgets.push({
-    name: input.name,
-    y: 0,
-    type: 'shim',
-    options: {},
     draw(ctx, _n, _w, y) {
       ctx.save()
       ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
       ctx.fillText(input.label ?? input.name, 20, y + 15)
       ctx.restore()
-    }
+    },
+    name: input.name,
+    options: {},
+    serialize: false,
+    type: 'shim',
+    y: 0
   })
   input.alwaysVisible = true
   input.widget = { name: input.name }
@@ -66,72 +86,47 @@ function dynamicComboWidget(
     appArg,
     widgetName
   )
-  let currentDynamicNames: string[] = []
+  function isInGroup(e: { name: string }): boolean {
+    return e.name.startsWith(inputName + '.')
+  }
   const updateWidgets = (value?: string) => {
     if (!node.widgets) throw new Error('Not Reachable')
     const newSpec = value ? options[value] : undefined
-    const inputsToRemove: Record<string, INodeInputSlot> = {}
-    for (const name of currentDynamicNames) {
-      const input = node.inputs.find((input) => input.name === name)
-      if (input) inputsToRemove[input.name] = input
-      const widgetIndex = node.widgets.findIndex(
-        (widget) => widget.name === name
-      )
-      if (widgetIndex === -1) continue
-      node.widgets[widgetIndex].value = undefined
-      node.widgets.splice(widgetIndex, 1)
-    }
-    currentDynamicNames = []
-    if (!newSpec) {
-      for (const input of Object.values(inputsToRemove)) {
-        const inputIndex = node.inputs.findIndex((inp) => inp === input)
-        if (inputIndex === -1) continue
-        node.removeInput(inputIndex)
-      }
-      return
-    }
+
+    const removedInputs = remove(node.inputs, isInGroup)
+    remove(node.widgets, isInGroup)
+
+    if (!newSpec) return
 
     const insertionPoint = node.widgets.findIndex((w) => w === widget) + 1
     const startingLength = node.widgets.length
-    const initialInputIndex =
-      node.inputs.findIndex((i) => i.name === widget.name) + 1
-    let startingInputLength = node.inputs.length
+    const startingInputLength = node.inputs.length
+
     if (insertionPoint === 0)
       throw new Error("Dynamic widget doesn't exist on node")
-    const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
-      [newSpec.required, false],
-      [newSpec.optional, true]
+    const inputTypes: (Record<string, InputSpec> | undefined)[] = [
+      newSpec.required,
+      newSpec.optional
     ]
-    for (const [inputType, isOptional] of inputTypes)
+    inputTypes.forEach((inputType, idx) => {
       for (const key in inputType ?? {}) {
         const name = `${widget.name}.${key}`
         const specToAdd = transformInputSpecV1ToV2(inputType![key], {
           name,
-          isOptional
+          isOptional: idx !== 0
         })
         specToAdd.display_name = key
         addNodeInput(node, specToAdd)
-        currentDynamicNames.push(name)
-        if (INLINE_INPUTS) ensureWidgetForInput(node, node.inputs.at(-1)!)
-        if (
-          !inputsToRemove[name] ||
-          Array.isArray(inputType![key][0]) ||
-          !LiteGraph.isValidConnection(
-            inputsToRemove[name].type,
-            inputType![key][0]
-          )
-        )
-          continue
-        node.inputs.at(-1)!.link = inputsToRemove[name].link
-        inputsToRemove[name].link = null
+        const newInputs = node.inputs
+          .slice(startingInputLength)
+          .filter((inp) => inp.name.startsWith(name))
+        for (const newInput of newInputs) {
+          if (INLINE_INPUTS && !newInput.widget)
+            ensureWidgetForInput(node, newInput)
+        }
       }
+    })
 
-    for (const input of Object.values(inputsToRemove)) {
-      const inputIndex = node.inputs.findIndex((inp) => inp === input)
-      if (inputIndex === -1) continue
-      if (inputIndex < initialInputIndex) startingInputLength--
-      node.removeInput(inputIndex)
-    }
     const inputInsertionPoint =
       node.inputs.findIndex((i) => i.name === widget.name) + 1
     const addedWidgets = node.widgets.splice(startingLength)
@@ -157,6 +152,28 @@ function dynamicComboWidget(
     )
     //assume existing inputs are in correct order
     spliceInputs(node, inputInsertionPoint, 0, ...addedInputs)
+
+    for (const input of removedInputs) {
+      const inputIndex = node.inputs.findIndex((inp) => inp.name === input.name)
+      if (inputIndex === -1) {
+        node.inputs.push(input)
+        node.removeInput(node.inputs.length - 1)
+      } else {
+        node.inputs[inputIndex].link = input.link
+        if (!input.link) continue
+        const link = node.graph?.links?.[input.link]
+        if (!link) continue
+        link.target_slot = inputIndex
+        node.onConnectionsChange?.(
+          LiteGraph.INPUT,
+          inputIndex,
+          true,
+          link,
+          node.inputs[inputIndex]
+        )
+      }
+    }
+
     node.size[1] = node.computeSize([...node.size])[1]
     if (!node.graph) return
     node._setConcreteSlots()
@@ -243,8 +260,9 @@ function changeOutputType(
 }
 
 function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
-  if (node.comfyMatchType) return
-  node.comfyMatchType = {}
+  if (node.comfyDynamic?.matchType) return
+  node.comfyDynamic ??= {}
+  node.comfyDynamic.matchType = {}
 
   const outputGroups = node.constructor.nodeData?.output_matchtypes
   node.onConnectionsChange = useChainCallback(
@@ -258,9 +276,9 @@ function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
     ) {
       const input = this.inputs[slot]
       if (contype !== LiteGraph.INPUT || !this.graph || !input) return
-      const [matchKey, matchGroup] = Object.entries(this.comfyMatchType).find(
-        ([, group]) => input.name in group
-      ) ?? ['', undefined]
+      const [matchKey, matchGroup] = Object.entries(
+        this.comfyDynamic.matchType
+      ).find(([, group]) => input.name in group) ?? ['', undefined]
       if (!matchGroup) return
       if (iscon && linf) {
         const { output, subgraphInput } = linf.resolve(this.graph)
@@ -317,8 +335,8 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   const typedSpec = { ...inputSpec, type: allowed_types }
   addNodeInput(node, typedSpec)
   withComfyMatchType(node)
-  node.comfyMatchType[template_id] ??= {}
-  node.comfyMatchType[template_id][name] = allowed_types
+  node.comfyDynamic.matchType[template_id] ??= {}
+  node.comfyDynamic.matchType[template_id][name] = allowed_types
 
   //TODO: instead apply on output add?
   //ensure outputs get updated
@@ -329,160 +347,215 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   )
 }
 
-function applyAutogrow(node: LGraphNode, untypedInputSpec: InputSpecV2) {
+function autogrowOrdinalToName(
+  ordinal: number,
+  key: string,
+  groupName: string,
+  node: AutogrowNode
+) {
+  const {
+    names,
+    prefix = '',
+    inputSpecs
+  } = node.comfyDynamic.autogrow[groupName]
+  const baseName = names
+    ? names[ordinal]
+    : (inputSpecs.length == 1 ? prefix : key) + ordinal
+  return { name: `${groupName}.${baseName}`, display_name: baseName }
+}
+
+function addAutogrowGroup(
+  ordinal: number,
+  groupName: string,
+  node: AutogrowNode
+) {
   const { addNodeInput } = useLitegraphService()
+  const { max, min, inputSpecs } = node.comfyDynamic.autogrow[groupName]
+  if (ordinal >= max) return
 
-  const parseResult = zAutogrowOptions.safeParse(untypedInputSpec)
-  if (!parseResult.success) throw new Error('invalid Autogrow spec')
-  const inputSpec = parseResult.data
+  const namedSpecs = inputSpecs.map((input) => ({
+    ...input,
+    isOptional: ordinal >= (min ?? 0) || input.isOptional,
+    ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
+  }))
 
-  const { input, min, names, prefix, max } = inputSpec.template
-  const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
-    [input.required, false],
-    [input.optional, true]
-  ]
-  const inputsV2 = inputTypes.flatMap(([inputType, isOptional]) =>
-    Object.entries(inputType ?? {}).map(([name, v]) =>
-      transformInputSpecV1ToV2(v, { name, isOptional })
+  const newInputs = namedSpecs
+    .filter(
+      (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
     )
+    .map((namedSpec) => {
+      addNodeInput(node, namedSpec)
+      const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
+      if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
+        ensureWidgetForInput(node, input)
+      return input
+    })
+
+  const lastIndex = node.inputs.findLastIndex((inp) =>
+    inp.name.startsWith(groupName)
   )
+  const insertionIndex = lastIndex === -1 ? node.inputs.length : lastIndex + 1
+  spliceInputs(node, insertionIndex, 0, ...newInputs)
+  app.canvas?.setDirty(true, true)
+}
 
-  function nameToInputIndex(name: string) {
-    const index = node.inputs.findIndex((input) => input.name === name)
-    if (index === -1) throw new Error('Failed to find input')
-    return index
-  }
-  function nameToInput(name: string) {
-    return node.inputs[nameToInputIndex(name)]
+const ORDINAL_REGEX = /\d+$/
+function resolveAutogrowOrdinal(
+  inputName: string,
+  groupName: string,
+  node: AutogrowNode
+): number | undefined {
+  //TODO preslice groupname?
+  const name = inputName.slice(groupName.length + 1)
+  const { names } = node.comfyDynamic.autogrow[groupName]
+  if (names) {
+    const ordinal = names.findIndex((s) => s === name)
+    return ordinal === -1 ? undefined : ordinal
   }
+  const match = name.match(ORDINAL_REGEX)
+  if (!match) return undefined
+  const ordinal = parseInt(match[0])
+  return ordinal !== ordinal ? undefined : ordinal
+}
+function autogrowInputConnected(index: number, node: AutogrowNode) {
+  const input = node.inputs[index]
+  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
+  const lastInput = node.inputs.findLast((inp) =>
+    inp.name.startsWith(groupName)
+  )
+  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
+  if (
+    !lastInput ||
+    ordinal == undefined ||
+    ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node)
+  )
+    return
+  addAutogrowGroup(ordinal + 1, groupName, node)
+}
+function autogrowInputDisconnected(index: number, node: AutogrowNode) {
+  const input = node.inputs[index]
+  if (!input) return
+  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
+  const { min = 1, inputSpecs } = node.comfyDynamic.autogrow[groupName]
+  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
+  if (ordinal == undefined || ordinal + 1 < min) return
 
-  //In the distance, someone shouting YAGNI
-  const trackedInputs: string[][] = []
-  function addInputGroup(insertionIndex: number) {
-    const ordinal = trackedInputs.length
-    const inputGroup = inputsV2.map((input) => ({
-      ...input,
-      name: names
-        ? names[ordinal]
-        : ((inputsV2.length == 1 ? prefix : input.name) ?? '') + ordinal,
-      isOptional: ordinal >= (min ?? 0) || input.isOptional
-    }))
-    const newInputs = inputGroup
-      .filter(
-        (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
-      )
-      .map((namedSpec) => {
-        addNodeInput(node, namedSpec)
-        const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-        if (inputsV2.length !== 1) ensureWidgetForInput(node, input)
-        return input
-      })
-    spliceInputs(node, insertionIndex, 0, ...newInputs)
-    trackedInputs.push(inputGroup.map((inp) => inp.name))
-    app.canvas?.setDirty(true, true)
+  //resolve all inputs in group
+  const groupInputs = node.inputs.filter(
+    (inp) =>
+      inp.name.startsWith(groupName + '.') &&
+      inp.name.lastIndexOf('.') === groupName.length
+  )
+  const stride = inputSpecs.length
+  if (groupInputs.length % stride !== 0) {
+    console.error('Failed to group multi-input autogrow inputs')
+    return
   }
-  for (let i = 0; i < (min || 1); i++) addInputGroup(node.inputs.length)
-  function removeInputGroup(inputName: string) {
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inpName) => inpName === inputName)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    const group = trackedInputs[groupIndex]
-    for (const nameToRemove of group) {
-      const inputIndex = nameToInputIndex(nameToRemove)
-      const input = spliceInputs(node, inputIndex, 1)[0]
-      if (!input.widget?.name) continue
-      const widget = node.widgets?.find((w) => w.name === input.widget!.name)
-      if (!widget) return
-      widget.value = undefined
-      node.removeWidget(widget)
-    }
-    trackedInputs.splice(groupIndex, 1)
-    node.size[1] = node.computeSize([...node.size])[1]
-    app.canvas?.setDirty(true, true)
-  }
-
-  function inputConnected(index: number) {
-    const input = node.inputs[index]
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inputName) => inputName === input.name)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    if (
-      groupIndex + 1 === trackedInputs.length &&
-      trackedInputs.length < (max ?? names?.length ?? 100)
+  app.canvas?.setDirty(true, true)
+  //groupBy would be nice here, but may not be supported
+  for (let column = 0; column < stride; column++) {
+    for (
+      let bubbleOrdinal = ordinal * stride + column;
+      bubbleOrdinal + stride < groupInputs.length;
+      bubbleOrdinal += stride
     ) {
-      const lastInput = trackedInputs[groupIndex].at(-1)
-      if (!lastInput) return
-      const insertionIndex = nameToInputIndex(lastInput) + 1
-      if (insertionIndex === 0) throw new Error('Failed to find Input')
-      addInputGroup(insertionIndex)
+      const curInput = groupInputs[bubbleOrdinal]
+      curInput.link = groupInputs[bubbleOrdinal + stride].link
+      if (!curInput.link) continue
+      const link = node.graph?.links[curInput.link]
+      if (!link) continue
+      const curIndex = node.inputs.findIndex((inp) => inp === curInput)
+      if (curIndex === -1) throw new Error('missing input')
+      link.target_slot = curIndex
     }
+    const lastInput = groupInputs.at(column - stride)
+    if (!lastInput) continue
+    lastInput.link = null
   }
-  function inputDisconnected(index: number) {
-    const input = node.inputs[index]
-    if (trackedInputs.length === 1) return
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inputName) => inputName === input.name)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    if (
-      trackedInputs[groupIndex].some(
-        (inputName) => nameToInput(inputName).link != null
-      )
-    )
-      return
-    if (groupIndex + 1 < (min ?? 0)) return
-    //For each group from here to last group, bubble swap links
-    for (let column = 0; column < trackedInputs[0].length; column++) {
-      let prevInput = nameToInputIndex(trackedInputs[groupIndex][column])
-      for (let i = groupIndex + 1; i < trackedInputs.length; i++) {
-        const curInput = nameToInputIndex(trackedInputs[i][column])
-        const linkId = node.inputs[curInput].link
-        node.inputs[prevInput].link = linkId
-        const link = linkId && node.graph?.links?.[linkId]
-        if (link) link.target_slot = prevInput
-        prevInput = curInput
-      }
-      node.inputs[prevInput].link = null
-    }
-    if (
-      trackedInputs.at(-2) &&
-      !trackedInputs.at(-2)?.some((name) => !!nameToInput(name).link)
-    )
-      removeInputGroup(trackedInputs.at(-1)![0])
+  const removalChecks = groupInputs.slice((min - 1) * stride)
+  let i
+  for (i = removalChecks.length - stride; i >= 0; i -= stride) {
+    if (removalChecks.slice(i, i + stride).some((inp) => inp.link)) break
   }
+  const toRemove = removalChecks.slice(i + stride * 2)
+  remove(node.inputs, (inp) => toRemove.includes(inp))
+  for (const input of toRemove) {
+    const widgetName = input?.widget?.name
+    if (!widgetName) continue
+    remove(node.widgets, (w) => w.name === widgetName)
+  }
+  node.size[1] = node.computeSize([...node.size])[1]
+}
+
+function withComfyAutogrow(node: LGraphNode): asserts node is AutogrowNode {
+  if (node.comfyDynamic?.autogrow) return
+  node.comfyDynamic ??= {}
+  node.comfyDynamic.autogrow = {}
 
   let pendingConnection: number | undefined
   let swappingConnection = false
+
   const originalOnConnectInput = node.onConnectInput
   node.onConnectInput = function (slot: number, ...args) {
     pendingConnection = slot
     requestAnimationFrame(() => (pendingConnection = undefined))
     return originalOnConnectInput?.apply(this, [slot, ...args]) ?? true
   }
+
   node.onConnectionsChange = useChainCallback(
     node.onConnectionsChange,
-    (
-      type: ISlotType,
-      index: number,
+    function (
+      this: AutogrowNode,
+      contype: ISlotType,
+      slot: number,
       iscon: boolean,
       linf: LLink | null | undefined
-    ) => {
-      if (type !== NodeSlotType.INPUT) return
-      const inputName = node.inputs[index].name
-      if (!trackedInputs.flat().some((name) => name === inputName)) return
-      if (iscon) {
+    ) {
+      const input = this.inputs[slot]
+      if (contype !== LiteGraph.INPUT || !input) return
+      //Return if input isn't known autogrow
+      const key = input.name.slice(0, input.name.lastIndexOf('.'))
+      const autogrowGroup = this.comfyDynamic.autogrow[key]
+      if (!autogrowGroup) return
+      if (app.configuringGraph && input.widget)
+        ensureWidgetForInput(node, input)
+      if (iscon && linf) {
         if (swappingConnection || !linf) return
-        inputConnected(index)
+        autogrowInputConnected(slot, this)
       } else {
-        if (pendingConnection === index) {
+        if (pendingConnection === slot) {
           swappingConnection = true
           requestAnimationFrame(() => (swappingConnection = false))
           return
         }
-        requestAnimationFrame(() => inputDisconnected(index))
+        requestAnimationFrame(() => autogrowInputDisconnected(slot, this))
       }
     }
   )
 }
+function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
+  withComfyAutogrow(node)
+
+  const parseResult = zAutogrowOptions.safeParse(inputSpecV2)
+  if (!parseResult.success) throw new Error('invalid Autogrow spec')
+  const inputSpec = parseResult.data
+  const { input, min = 1, names, prefix, max = 100 } = inputSpec.template
+
+  const inputTypes: (Record<string, InputSpec> | undefined)[] = [
+    input.required,
+    input.optional
+  ]
+  const inputsV2 = inputTypes.flatMap((inputType, index) =>
+    Object.entries(inputType ?? {}).map(([name, v]) =>
+      transformInputSpecV1ToV2(v, { name, isOptional: index === 1 })
+    )
+  )
+  node.comfyDynamic.autogrow[inputSpecV2.name] = {
+    names,
+    min,
+    max: names?.length ?? max,
+    prefix,
+    inputSpecs: inputsV2
+  }
+  for (let i = 0; i < min; i++) addAutogrowGroup(i, inputSpecV2.name, node)
+}

src/extensions/core/widgetInputs.ts

@@ -257,7 +257,6 @@ export class PrimitiveNode extends LGraphNode {
         undefined,
         inputData
       )
-      if (this.widgets?.[1]) widget.linkedWidgets = [this.widgets[1]]
       let filter = this.widgets_values?.[2]
       if (filter && this.widgets && this.widgets.length === 3) {
         this.widgets[2].value = filter

src/lib/litegraph/src/LGraphCanvas.ts

@@ -710,8 +710,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   getMenuOptions?(): IContextMenuValue<string>[]
   getExtraMenuOptions?(
     canvas: LGraphCanvas,
-    options: IContextMenuValue<string>[]
-  ): IContextMenuValue<string>[]
+    options: (IContextMenuValue<string> | null)[]
+  ): (IContextMenuValue<string> | null)[]
   static active_node: LGraphNode
   /** called before modifying the graph */
   onBeforeChange?(graph: LGraph): void
@@ -8019,8 +8019,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     }
   }
 
-  getCanvasMenuOptions(): IContextMenuValue[] {
-    let options: IContextMenuValue<string>[]
+  getCanvasMenuOptions(): (IContextMenuValue | null)[] {
+    let options: (IContextMenuValue<string> | null)[]
     if (this.getMenuOptions) {
       options = this.getMenuOptions()
     } else {
@@ -8564,9 +8564,11 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           node,
           newPos: this.calculateNewPosition(node, deltaX, deltaY)
         })
-      } else {
-        // Non-node children (nested groups, reroutes)
-        child.move(deltaX, deltaY)
+      } else if (!(child instanceof LGraphGroup)) {
+        // Non-node, non-group children (reroutes, etc.)
+        // Skip groups here - they're already in allItems and will be
+        // processed in the main loop of moveChildNodesInGroupVueMode
+        child.move(deltaX, deltaY, true)
       }
     }
   }

src/lib/litegraph/src/LGraphNode.ts

@@ -416,7 +416,7 @@ export class LGraphNode
   selected?: boolean
   showAdvanced?: boolean
 
-  declare comfyMatchType?: Record<string, Record<string, string>>
+  declare comfyDynamic?: Record<string, object>
   declare comfyClass?: string
   declare isVirtualNode?: boolean
   applyToGraph?(extraLinks?: LLink[]): void

src/lib/litegraph/src/contextMenuCompat.ts

@@ -7,7 +7,9 @@ import type { IContextMenuValue } from './interfaces'
  */
 const ENABLE_LEGACY_SUPPORT = true
 
-type ContextMenuValueProvider = (...args: unknown[]) => IContextMenuValue[]
+type ContextMenuValueProvider = (
+  ...args: unknown[]
+) => (IContextMenuValue | null)[]
 
 class LegacyMenuCompat {
   private originalMethods = new Map<string, ContextMenuValueProvider>()
@@ -37,16 +39,22 @@ class LegacyMenuCompat {
    * @param preWrapperFn The method that existed before the wrapper
    * @param prototype The prototype to verify wrapper installation
    */
-  registerWrapper(
-    methodName: keyof LGraphCanvas,
-    wrapperFn: ContextMenuValueProvider,
-    preWrapperFn: ContextMenuValueProvider,
+  registerWrapper<K extends keyof LGraphCanvas>(
+    methodName: K,
+    wrapperFn: LGraphCanvas[K],
+    preWrapperFn: LGraphCanvas[K],
     prototype?: LGraphCanvas
   ) {
-    this.wrapperMethods.set(methodName, wrapperFn)
-    this.preWrapperMethods.set(methodName, preWrapperFn)
+    this.wrapperMethods.set(
+      methodName as string,
+      wrapperFn as unknown as ContextMenuValueProvider
+    )
+    this.preWrapperMethods.set(
+      methodName as string,
+      preWrapperFn as unknown as ContextMenuValueProvider
+    )
     const isInstalled = prototype && prototype[methodName] === wrapperFn
-    this.wrapperInstalled.set(methodName, !!isInstalled)
+    this.wrapperInstalled.set(methodName as string, !!isInstalled)
   }
 
   /**
@@ -54,11 +62,17 @@ class LegacyMenuCompat {
    * @param prototype The prototype to install on
    * @param methodName The method name to track
    */
-  install(prototype: LGraphCanvas, methodName: keyof LGraphCanvas) {
+  install<K extends keyof LGraphCanvas>(
+    prototype: LGraphCanvas,
+    methodName: K
+  ) {
     if (!ENABLE_LEGACY_SUPPORT) return
 
     const originalMethod = prototype[methodName]
-    this.originalMethods.set(methodName, originalMethod)
+    this.originalMethods.set(
+      methodName as string,
+      originalMethod as unknown as ContextMenuValueProvider
+    )
 
     let currentImpl = originalMethod
 
@@ -66,13 +80,13 @@ class LegacyMenuCompat {
       get() {
         return currentImpl
       },
-      set: (newImpl: ContextMenuValueProvider) => {
-        const fnKey = `${methodName}:${newImpl.toString().slice(0, 100)}`
+      set: (newImpl: LGraphCanvas[K]) => {
+        const fnKey = `${methodName as string}:${newImpl.toString().slice(0, 100)}`
         if (!this.hasWarned.has(fnKey) && this.currentExtension) {
           this.hasWarned.add(fnKey)
 
           console.warn(
-            `%c[DEPRECATED]%c Monkey-patching ${methodName} is deprecated. (Extension: "${this.currentExtension}")\n` +
+            `%c[DEPRECATED]%c Monkey-patching ${methodName as string} is deprecated. (Extension: "${this.currentExtension}")\n` +
               `Please use the new context menu API instead.\n\n` +
               `See: https://docs.comfy.org/custom-nodes/js/context-menu-migration`,
             'color: orange; font-weight: bold',
@@ -85,7 +99,15 @@ class LegacyMenuCompat {
   }
 
   /**
-   * Extract items that were added by legacy monkey patches
+   * Extract items that were added by legacy monkey patches.
+   *
+   * Uses set-based diffing by reference to reliably detect additions regardless
+   * of item reordering or replacement. Items present in patchedItems but not in
+   * originalItems (by reference equality) are considered additions.
+   *
+   * Note: If a monkey patch removes items (patchedItems has fewer unique items
+   * than originalItems), a warning is logged but we still return any new items.
+   *
    * @param methodName The method name that was monkey-patched
    * @param context The context to call methods with
    * @param args Arguments to pass to the methods
@@ -95,7 +117,7 @@ class LegacyMenuCompat {
     methodName: keyof LGraphCanvas,
     context: LGraphCanvas,
     ...args: unknown[]
-  ): IContextMenuValue[] {
+  ): (IContextMenuValue | null)[] {
     if (!ENABLE_LEGACY_SUPPORT) return []
     if (this.isExtracting) return []
 
@@ -106,7 +128,7 @@ class LegacyMenuCompat {
       this.isExtracting = true
 
       const originalItems = originalMethod.apply(context, args) as
-        | IContextMenuValue[]
+        | (IContextMenuValue | null)[]
         | undefined
       if (!originalItems) return []
 
@@ -127,15 +149,26 @@ class LegacyMenuCompat {
       const methodToCall = shouldSkipWrapper ? preWrapperMethod : currentMethod
 
       const patchedItems = methodToCall.apply(context, args) as
-        | IContextMenuValue[]
+        | (IContextMenuValue | null)[]
         | undefined
       if (!patchedItems) return []
 
-      if (patchedItems.length > originalItems.length) {
-        return patchedItems.slice(originalItems.length) as IContextMenuValue[]
+      // Use set-based diff to detect additions by reference
+      const originalSet = new Set<IContextMenuValue | null>(originalItems)
+      const addedItems = patchedItems.filter((item) => !originalSet.has(item))
+
+      // Warn if items were removed (patched has fewer original items than expected)
+      const retainedOriginalCount = patchedItems.filter((item) =>
+        originalSet.has(item)
+      ).length
+      if (retainedOriginalCount < originalItems.length) {
+        console.warn(
+          `[Context Menu Compat] Monkey patch for ${methodName} removed ${originalItems.length - retainedOriginalCount} original menu item(s). ` +
+            `This may cause unexpected behavior.`
+        )
       }
 
-      return []
+      return addedItems
     } catch (e) {
       console.error('[Context Menu Compat] Failed to extract legacy items:', e)
       return []

src/lib/litegraph/src/types/widgets.ts

@@ -1,5 +1,3 @@
-import type { Ref } from 'vue'
-
 import type { CanvasColour, Point, RequiredProps, Size } from '../interfaces'
 import type { CanvasPointer, LGraphCanvas, LGraphNode } from '../litegraph'
 import type { CanvasPointerEvent } from './events'
@@ -286,7 +284,6 @@ export interface IBaseWidget<
   /** Widget type (see {@link TWidgetType}) */
   type: TType
   value?: TValue
-  valueRef?: () => Ref<boolean | number | string | object | undefined>
 
   /**
    * Whether the widget value should be serialized on node serialization.

src/locales/en/main.json

@@ -1333,6 +1333,10 @@
     "disable-metadata": {
       "name": "Disable saving prompt metadata in files."
     },
+    "enable-manager-legacy-ui": {
+      "name": "Use legacy Manager UI",
+      "tooltip": "Uses the legacy ComfyUI-Manager UI instead of the new UI."
+    },
     "disable-all-custom-nodes": {
       "name": "Disable loading all custom nodes."
     },
@@ -2444,4 +2448,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/locales/en/nodeDefs.json

@@ -11325,6 +11325,31 @@
       }
     }
   },
+  "SamplerSEEDS2": {
+    "display_name": "SamplerSEEDS2",
+    "inputs": {
+      "solver_type": {
+        "name": "solver_type"
+      },
+      "eta": {
+        "name": "eta",
+        "tooltip": "Stochastic strength"
+      },
+      "s_noise": {
+        "name": "s_noise",
+        "tooltip": "SDE noise multiplier"
+      },
+      "r": {
+        "name": "r",
+        "tooltip": "Relative step size for the intermediate stage (c2 node)"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "SamplingPercentToSigma": {
     "display_name": "SamplingPercentToSigma",
     "inputs": {

src/platform/assets/components/MediaAssetCard.vue

@@ -55,7 +55,6 @@
               variant="gray"
               :label="formattedDuration"
             />
-            <SquareChip v-if="fileFormat" variant="gray" :label="fileFormat" />
           </div>
 
           <!-- Media actions - show on hover or when playing -->
@@ -266,12 +265,6 @@ const formattedDuration = computed(() => {
   return formatDuration(Number(duration))
 })
 
-const fileFormat = computed(() => {
-  if (!asset?.name) return ''
-  const parts = asset.name.split('.')
-  return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : ''
-})
-
 const durationChipClasses = computed(() => {
   if (fileKind.value === 'audio') {
     return '-translate-y-11'
@@ -289,7 +282,7 @@ const showStaticChips = computed(
     !!asset &&
     !isHovered.value &&
     !isVideoPlaying.value &&
-    (formattedDuration.value || fileFormat.value)
+    formattedDuration.value
 )
 
 // Show action overlay when hovered OR playing

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type {
@@ -51,16 +51,14 @@ const nodeData = computed<VueNodeData>(() => {
     .map(([name, input]) => ({
       name,
       type: input.widgetType || input.type,
-      value: () =>
-        ref(
-          input.default !== undefined
-            ? input.default
-            : input.type === 'COMBO' &&
-                Array.isArray(input.options) &&
-                input.options.length > 0
-              ? input.options[0]
-              : ''
-        ),
+      value:
+        input.default !== undefined
+          ? input.default
+          : input.type === 'COMBO' &&
+              Array.isArray(input.options) &&
+              input.options.length > 0
+            ? input.options[0]
+            : '',
       options: {
         hidden: input.hidden,
         advanced: input.advanced,

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

@@ -59,6 +59,7 @@
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :node-type="nodeType"
           class="col-span-2"
+          @update:model-value="widget.updateHandler"
         />
       </div>
     </template>
@@ -68,7 +69,7 @@
 <script setup lang="ts">
 import type { TooltipOptions } from 'primevue'
 import { computed, onErrorCaptured, ref, toValue } from 'vue'
-import type { Component, Ref } from 'vue'
+import type { Component } from 'vue'
 
 import type {
   VueNodeData,
@@ -135,7 +136,8 @@ interface ProcessedWidget {
   type: string
   vueComponent: Component
   simplified: SimplifiedWidget
-  value: () => Ref<WidgetValue>
+  value: WidgetValue
+  updateHandler: (value: WidgetValue) => void
   tooltipConfig: TooltipOptions
   slotMetadata?: WidgetSlotMetadata
 }
@@ -168,11 +170,23 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       value: widget.value,
       label: widget.label,
       options: widgetOptions,
+      callback: widget.callback,
       spec: widget.spec,
       borderStyle: widget.borderStyle,
       controlWidget: widget.controlWidget
     }
 
+    function updateHandler(value: WidgetValue) {
+      // Update the widget value directly
+      widget.value = value
+
+      // Skip callback for asset widgets - their callback opens the modal,
+      // but Vue asset mode handles selection through the dropdown
+      if (widget.type !== 'asset') {
+        widget.callback?.(value)
+      }
+    }
+
     const tooltipText = getWidgetTooltip(widget)
     const tooltipConfig = createTooltipConfig(tooltipText)
 
@@ -182,6 +196,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       vueComponent,
       simplified,
       value: widget.value,
+      updateHandler,
       tooltipConfig,
       slotMetadata
     })

src/renderer/extensions/vueNodes/layout/useNodeDrag.ts

@@ -57,7 +57,10 @@ function useNodeDragIndividual() {
     const selectedNodes = toValue(selectedNodeIds)
 
     // capture the starting positions of all other selected nodes
-    if (selectedNodes?.has(nodeId) && selectedNodes.size > 1) {
+    // Only move other selected items if the dragged node is part of the selection
+    const isDraggedNodeInSelection = selectedNodes?.has(nodeId)
+
+    if (isDraggedNodeInSelection && selectedNodes.size > 1) {
       otherSelectedNodesStartPositions = new Map()
 
       for (const id of selectedNodes) {
@@ -73,9 +76,15 @@ function useNodeDragIndividual() {
       otherSelectedNodesStartPositions = null
     }
 
-    // Capture selected groups (filter from selectedItems which only contains selected items)
-    selectedGroups = toValue(selectedItems).filter(isLGraphGroup)
-    lastCanvasDelta = { x: 0, y: 0 }
+    // Capture selected groups only if the dragged node is part of the selection
+    // This prevents groups from moving when dragging an unrelated node
+    if (isDraggedNodeInSelection) {
+      selectedGroups = toValue(selectedItems).filter(isLGraphGroup)
+      lastCanvasDelta = { x: 0, y: 0 }
+    } else {
+      selectedGroups = null
+      lastCanvasDelta = null
+    }
 
     mutations.setSource(LayoutSource.Vue)
   }

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

@@ -3,15 +3,15 @@ import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
-import type { Ref } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useDialogService } from '@/services/dialogService'
-import type { ControlOptions } from '@/types/simplifiedWidget'
+
+import { NumberControlMode } from '../composables/useStepperControl'
 
 type ControlOption = {
   description: string
-  mode: ControlOptions
+  mode: NumberControlMode
   icon?: string
   text?: string
   title: string
@@ -26,21 +26,33 @@ const toggle = (event: Event) => {
 }
 defineExpose({ toggle })
 
+const ENABLE_LINK_TO_GLOBAL = false
+
 const controlOptions: ControlOption[] = [
+  ...(ENABLE_LINK_TO_GLOBAL
+    ? ([
+        {
+          mode: NumberControlMode.LINK_TO_GLOBAL,
+          icon: 'pi pi-link',
+          title: 'linkToGlobal',
+          description: 'linkToGlobalDesc'
+        } satisfies ControlOption
+      ] as ControlOption[])
+    : []),
   {
-    mode: 'randomize',
+    mode: NumberControlMode.RANDOMIZE,
     icon: 'icon-[lucide--shuffle]',
     title: 'randomize',
     description: 'randomizeDesc'
   },
   {
-    mode: 'increment',
+    mode: NumberControlMode.INCREMENT,
     text: '+1',
     title: 'increment',
     description: 'incrementDesc'
   },
   {
-    mode: 'decrement',
+    mode: NumberControlMode.DECREMENT,
     text: '-1',
     title: 'decrement',
     description: 'decrementDesc'
@@ -52,16 +64,20 @@ const widgetControlMode = computed(() =>
 )
 
 const props = defineProps<{
-  controlWidget: () => Ref<ControlOptions>
+  controlMode: NumberControlMode
 }>()
 
-const handleToggle = (mode: ControlOptions) => {
-  if (props.controlWidget().value === mode) return
-  props.controlWidget().value = mode
+const emit = defineEmits<{
+  'update:controlMode': [mode: NumberControlMode]
+}>()
+
+const handleToggle = (mode: NumberControlMode) => {
+  if (props.controlMode === mode) return
+  emit('update:controlMode', mode)
 }
 
-const isActive = (mode: ControlOptions) => {
-  return props.controlWidget().value === mode
+const isActive = (mode: NumberControlMode) => {
+  return props.controlMode === mode
 }
 
 const handleEditSettings = () => {
@@ -115,7 +131,11 @@ const handleEditSettings = () => {
               <div
                 class="text-sm font-normal text-base-foreground leading-tight"
               >
-                <span>
+                <span v-if="option.mode === NumberControlMode.LINK_TO_GLOBAL">
+                  {{ $t('widgets.numberControl.linkToGlobal') }}
+                  <em>{{ $t('widgets.numberControl.linkToGlobalSeed') }}</em>
+                </span>
+                <span v-else>
                   {{ $t(`widgets.numberControl.${option.title}`) }}
                 </span>
               </div>
@@ -130,9 +150,7 @@ const handleEditSettings = () => {
           <ToggleSwitch
             :model-value="isActive(option.mode)"
             class="flex-shrink-0"
-            @update:model-value="
-              (v) => (v ? handleToggle(option.mode) : handleToggle('fixed'))
-            "
+            @update:model-value="handleToggle(option.mode)"
           />
         </div>
       </div>

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

@@ -31,7 +31,11 @@ const props = defineProps<{
   nodeId: string
 }>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string>('modelValue')
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
 
 // Get litegraph node
 const litegraphNode = computed(() => {
@@ -46,7 +50,7 @@ const isOutputNodeRef = computed(() => {
   return isOutputNode(node)
 })
 
-const audioFilePath = props.widget.value()
+const audioFilePath = computed(() => props.widget.value as string)
 
 // Computed audio URL from widget value (for input files)
 const audioUrlFromWidget = computed(() => {

src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts

@@ -3,7 +3,6 @@ import Button from 'primevue/button'
 import type { ButtonProps } from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
-import { ref, watch } from 'vue'
 
 import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -13,16 +12,13 @@ describe('WidgetButton Interactions', () => {
     options: Partial<ButtonProps> = {},
     callback?: () => void,
     name: string = 'test_button'
-  ): SimplifiedWidget<void> => {
-    const valueRef = ref()
-    if (callback) watch(valueRef, callback)
-    return {
-      name,
-      type: 'button',
-      value: () => valueRef,
-      options
-    }
-  }
+  ): SimplifiedWidget<void> => ({
+    name,
+    type: 'button',
+    value: undefined,
+    options,
+    callback
+  })
 
   const mountComponent = (widget: SimplifiedWidget<void>, readonly = false) => {
     return mount(WidgetButton, {
@@ -199,7 +195,11 @@ describe('WidgetButton Interactions', () => {
       const widget = createMockWidget({}, mockCallback)
       const wrapper = mountComponent(widget)
 
-      for (let i = 0; i < 16; i++) await clickButton(wrapper)
+      // Simulate rapid clicks
+      const clickPromises = Array.from({ length: 16 }, () =>
+        clickButton(wrapper)
+      )
+      await Promise.all(clickPromises)
 
       expect(mockCallback).toHaveBeenCalledTimes(16)
     })

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

@@ -37,8 +37,8 @@ const filteredProps = computed(() =>
 )
 
 const handleClick = () => {
-  const ref = props.widget.value()
-  //@ts-expect-error - need to actually assign value, can't use triggerRef :(
-  ref.value = !ref.value
+  if (props.widget.callback) {
+    props.widget.callback()
+  }
 }
 </script>

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

@@ -21,12 +21,12 @@ import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
 
+const value = defineModel<ChartData>({ required: true })
+
 const props = defineProps<{
   widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
 }>()
 
-const value = props.widget.value()
-
 const chartType = computed(() => props.widget.options?.type ?? 'line')
 
 const chartData = computed(() => value.value || { labels: [], datasets: [] })

src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts

@@ -3,7 +3,6 @@ import ColorPicker from 'primevue/colorpicker'
 import type { ColorPickerProps } from 'primevue/colorpicker'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -15,16 +14,13 @@ describe('WidgetColorPicker Value Binding', () => {
     value: string = '#000000',
     options: Partial<ColorPickerProps> = {},
     callback?: (value: string) => void
-  ): SimplifiedWidget<string> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_color_picker',
-      type: 'color',
-      value: () => valueRef,
-      options
-    }
-  }
+  ): SimplifiedWidget<string> => ({
+    name: 'test_color_picker',
+    type: 'color',
+    value,
+    options,
+    callback
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<string>,
@@ -53,61 +49,80 @@ describe('WidgetColorPicker Value Binding', () => {
   ) => {
     const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
     await colorPicker.setValue(value)
+    return wrapper.emitted('update:modelValue')
   }
 
-  describe('Value Binding', () => {
-    it('triggers callback when color changes', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('#ff0000', {}, callback)
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when color changes', async () => {
+      const widget = createMockWidget('#ff0000')
       const wrapper = mountComponent(widget, '#ff0000')
 
-      await setColorPickerValue(wrapper, '#00ff00')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#00ff00')
+      const emitted = await setColorPickerValue(wrapper, '#00ff00')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
     })
 
     it('handles different color formats', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('#ffffff', {}, callback)
+      const widget = createMockWidget('#ffffff')
       const wrapper = mountComponent(widget, '#ffffff')
 
-      await setColorPickerValue(wrapper, '#123abc')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#123abc')
+      const emitted = await setColorPickerValue(wrapper, '#123abc')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#123abc')
     })
 
-    it('normalizes bare hex without # to #hex', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('ff0000', {}, callback)
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('#000000', {}, undefined)
+      const wrapper = mountComponent(widget, '#000000')
+
+      const emitted = await setColorPickerValue(wrapper, '#ff00ff')
+
+      // Should still emit Vue event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#ff00ff')
+    })
+
+    it('normalizes bare hex without # to #hex on emit', async () => {
+      const widget = createMockWidget('ff0000')
       const wrapper = mountComponent(widget, 'ff0000')
 
-      await setColorPickerValue(wrapper, '00ff00')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#00ff00')
+      const emitted = await setColorPickerValue(wrapper, '00ff00')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
     })
 
-    it('normalizes rgb() strings to #hex', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('#000000', { format: 'rgb' }, callback)
+    it('normalizes rgb() strings to #hex on emit', async (context) => {
+      context.skip('needs diagnosis')
+      const widget = createMockWidget('#000000')
       const wrapper = mountComponent(widget, '#000000')
 
-      await setColorPickerValue(wrapper, 'rgb(255, 0, 0)')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#ff0000')
+      const emitted = await setColorPickerValue(wrapper, 'rgb(255, 0, 0)')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#ff0000')
     })
 
-    it('normalizes hsb() strings to #hex', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('#000000', { format: 'hsb' }, callback)
+    it('normalizes hsb() strings to #hex on emit', async () => {
+      const widget = createMockWidget('#000000', { format: 'hsb' })
       const wrapper = mountComponent(widget, '#000000')
 
-      await setColorPickerValue(wrapper, 'hsb(120, 100, 100)')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#00ff00')
+      const emitted = await setColorPickerValue(wrapper, 'hsb(120, 100, 100)')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
     })
 
-    it('normalizes HSB object values to #hex', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('#000000', { format: 'hsb' }, callback)
+    it('normalizes HSB object values to #hex on emit', async () => {
+      const widget = createMockWidget('#000000', { format: 'hsb' })
       const wrapper = mountComponent(widget, '#000000')
 
-      await setColorPickerValue(wrapper, { h: 240, s: 100, b: 100 })
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#0000ff')
+      const emitted = await setColorPickerValue(wrapper, {
+        h: 240,
+        s: 100,
+        b: 100
+      })
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#0000ff')
     })
   })
 
@@ -250,15 +265,15 @@ describe('WidgetColorPicker Value Binding', () => {
     })
 
     it('handles invalid color formats gracefully', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('invalid-color', {}, callback)
+      const widget = createMockWidget('invalid-color')
       const wrapper = mountComponent(widget, 'invalid-color')
 
       const colorText = wrapper.find('[data-testid="widget-color-text"]')
       expect(colorText.text()).toBe('#000000')
 
-      await setColorPickerValue(wrapper, 'invalid-color')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('#000000')
+      const emitted = await setColorPickerValue(wrapper, 'invalid-color')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#000000')
     })
 
     it('handles widget with no options', () => {

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

@@ -14,6 +14,7 @@
         :pt="{
           preview: '!w-full !h-full !border-none'
         }"
+        @update:model-value="onPickerUpdate"
       />
       <span
         class="text-xs truncate min-w-[4ch]"
@@ -26,11 +27,11 @@
 
 <script setup lang="ts">
 import ColorPicker from 'primevue/colorpicker'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { isColorFormat, toHexFromFormat } from '@/utils/colorUtil'
-import type { ColorFormat } from '@/utils/colorUtil'
+import type { ColorFormat, HSB } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
@@ -44,23 +45,39 @@ type WidgetOptions = { format?: ColorFormat } & Record<string, unknown>
 
 const props = defineProps<{
   widget: SimplifiedWidget<string, WidgetOptions>
+  modelValue: string
 }>()
 
-const modelValue = props.widget.value()
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
 
 const format = computed<ColorFormat>(() => {
   const optionFormat = props.widget.options?.format
   return isColorFormat(optionFormat) ? optionFormat : 'hex'
 })
 
-const localValue = computed({
-  get() {
-    return toHexFromFormat(modelValue.value || '#000000', format.value)
-  },
-  set(v) {
-    modelValue.value = toHexFromFormat(v, format.value)
+type PickerValue = string | HSB
+const localValue = ref<PickerValue>(
+  toHexFromFormat(
+    props.modelValue || '#000000',
+    isColorFormat(props.widget.options?.format)
+      ? props.widget.options.format
+      : 'hex'
+  )
+)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localValue.value = toHexFromFormat(newVal || '#000000', format.value)
   }
-})
+)
+
+function onPickerUpdate(val: unknown) {
+  localValue.value = val as PickerValue
+  emit('update:modelValue', toHexFromFormat(val, format.value))
+}
 
 // ColorPicker specific excluded props include panel/overlay classes
 const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const

src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts

@@ -4,7 +4,6 @@ import Galleria from 'primevue/galleria'
 import type { GalleriaProps } from 'primevue/galleria'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
-import { ref } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -53,7 +52,7 @@ function createMockWidget(
   return {
     name: 'test_galleria',
     type: 'array',
-    value: () => ref(value),
+    value,
     options
   }
 }

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

@@ -68,12 +68,12 @@ export interface GalleryImage {
 
 export type GalleryValue = string[] | GalleryImage[]
 
+const value = defineModel<GalleryValue>({ required: true })
+
 const props = defineProps<{
   widget: SimplifiedWidget<GalleryValue>
 }>()
 
-const value = props.widget.value()
-
 const activeIndex = ref(0)
 
 const { t } = useI18n()

src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import ImageCompare from 'primevue/imagecompare'
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -16,7 +15,7 @@ describe('WidgetImageCompare Display', () => {
   ): SimplifiedWidget<ImageCompareValue | string> => ({
     name: 'test_imagecompare',
     type: 'object',
-    value: () => ref(value),
+    value,
     options
   })
 

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

@@ -44,24 +44,24 @@ const props = defineProps<{
 }>()
 
 const beforeImage = computed(() => {
-  const value = props.widget.value().value
+  const value = props.widget.value
   return typeof value === 'string' ? value : value?.before || ''
 })
 
 const afterImage = computed(() => {
-  const value = props.widget.value().value
+  const value = props.widget.value
   return typeof value === 'string' ? '' : value?.after || ''
 })
 
 const beforeAlt = computed(() => {
-  const value = props.widget.value().value
+  const value = props.widget.value
   return typeof value === 'object' && value?.beforeAlt
     ? value.beforeAlt
     : 'Before image'
 })
 
 const afterAlt = computed(() => {
-  const value = props.widget.value().value
+  const value = props.widget.value
   return typeof value === 'object' && value?.afterAlt
     ? value.afterAlt
     : 'After image'

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

@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type {
-  SimplifiedControlWidget,
-  SimplifiedWidget
-} from '@/types/simplifiedWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
-import WidgetWithControl from './WidgetWithControl.vue'
+import WidgetInputNumberWithControl from './WidgetInputNumberWithControl.vue'
 
 const props = defineProps<{
   widget: SimplifiedWidget<number>
 }>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<number>({ default: 0 })
 
 const hasControlAfterGenerate = computed(() => {
   return !!props.widget.controlWidget
@@ -22,22 +19,14 @@ const hasControlAfterGenerate = computed(() => {
 </script>
 
 <template>
-  <WidgetWithControl
-    v-if="hasControlAfterGenerate"
-    :widget="widget as SimplifiedControlWidget<number>"
-    :comp="
-      widget.type === 'slider'
-        ? WidgetInputNumberSlider
-        : WidgetInputNumberInput
-    "
-  />
   <component
     :is="
-      widget.type === 'slider'
-        ? WidgetInputNumberSlider
-        : WidgetInputNumberInput
+      hasControlAfterGenerate
+        ? WidgetInputNumberWithControl
+        : widget.type === 'slider'
+          ? WidgetInputNumberSlider
+          : WidgetInputNumberInput
     "
-    v-else
     v-model="modelValue"
     :widget="widget"
     v-bind="$attrs"

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import InputNumber from 'primevue/inputnumber'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -14,13 +13,12 @@ function createMockWidget(
   options: SimplifiedWidget['options'] = {},
   callback?: (value: number) => void
 ): SimplifiedWidget<number> {
-  const valueRef = ref(value)
-  if (callback) watch(valueRef, (v) => callback(v))
   return {
     name: 'test_input_number',
     type,
-    value: () => valueRef,
-    options
+    value,
+    options,
+    callback
   }
 }
 
@@ -51,15 +49,16 @@ describe('WidgetInputNumberInput Value Binding', () => {
     expect(input.value).toBe('42')
   })
 
-  it('triggers callback when value changes', async () => {
-    const callback = vi.fn()
-    const widget = createMockWidget(10, 'int', {}, callback)
+  it('emits update:modelValue when value changes', async () => {
+    const widget = createMockWidget(10, 'int')
     const wrapper = mountComponent(widget, 10)
 
     const inputNumber = wrapper.findComponent(InputNumber)
-    await inputNumber.setValue(20)
+    await inputNumber.vm.$emit('update:modelValue', 20)
 
-    expect(callback).toHaveBeenCalledExactlyOnceWith(20)
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeDefined()
+    expect(emitted![0]).toContain(20)
   })
 
   it('handles negative values', () => {

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

@@ -16,7 +16,7 @@ const props = defineProps<{
   widget: SimplifiedWidget<number>
 }>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<number>({ default: 0 })
 
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import InputNumber from 'primevue/inputnumber'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import Slider from '@/components/ui/slider/Slider.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -14,13 +13,12 @@ function createMockWidget(
   options: SimplifiedWidget['options'] = {},
   callback?: (value: number) => void
 ): SimplifiedWidget<number> {
-  const valueRef = ref(value)
-  if (callback) watch(valueRef, callback)
   return {
     name: 'test_slider',
     type: 'float',
-    value: () => valueRef,
-    options: { min: 0, max: 100, step: 1, precision: 0, ...options }
+    value,
+    options: { min: 0, max: 100, step: 1, precision: 0, ...options },
+    callback
   }
 }
 

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

@@ -48,7 +48,7 @@ const { widget } = defineProps<{
   widget: SimplifiedWidget<number>
 }>()
 
-const modelValue = widget.value()
+const modelValue = defineModel<number>({ default: 0 })
 
 const timesEmptied = ref(0)
 

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { defineAsyncComponent, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import type { NumberControlMode } from '../composables/useStepperControl'
+import { useStepperControl } from '../composables/useStepperControl'
+import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
+
+const NumberControlPopover = defineAsyncComponent(
+  () => import('./NumberControlPopover.vue')
+)
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+}>()
+
+const modelValue = defineModel<number>({ default: 0 })
+const popover = ref()
+
+const handleControlChange = (newValue: number) => {
+  modelValue.value = newValue
+}
+
+const { controlMode, controlButtonIcon } = useStepperControl(
+  modelValue,
+  {
+    ...props.widget.options,
+    onChange: handleControlChange
+  },
+  props.widget.controlWidget!.value
+)
+
+const setControlMode = (mode: NumberControlMode) => {
+  controlMode.value = mode
+  props.widget.controlWidget!.update(mode)
+}
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+</script>
+
+<template>
+  <div class="relative grid grid-cols-subgrid">
+    <WidgetInputNumberInput
+      v-model="modelValue"
+      :widget
+      class="grid grid-cols-subgrid col-span-2"
+    >
+      <Button
+        variant="link"
+        size="small"
+        class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
+        @click="togglePopover"
+      >
+        <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+      </Button>
+    </WidgetInputNumberInput>
+    <NumberControlPopover
+      ref="popover"
+      :control-mode
+      @update:control-mode="setControlMode"
+    />
+  </div>
+</template>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.test.ts

@@ -4,7 +4,6 @@ import InputText from 'primevue/inputtext'
 import type { InputTextProps } from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -15,16 +14,13 @@ describe('WidgetInputText Value Binding', () => {
     value: string = 'default',
     options: Partial<InputTextProps> = {},
     callback?: (value: string) => void
-  ): SimplifiedWidget<string> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_input',
-      type: 'string',
-      value: () => valueRef,
-      options
-    }
-  }
+  ): SimplifiedWidget<string> => ({
+    name: 'test_input',
+    type: 'string',
+    value,
+    options,
+    callback
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<string>,
@@ -58,26 +54,86 @@ describe('WidgetInputText Value Binding', () => {
     return input
   }
 
-  describe('Widget Value Callbacks', () => {
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when input value changes on blur', async () => {
+      const widget = createMockWidget('hello')
+      const wrapper = mountComponent(widget, 'hello')
+
+      await setInputValueAndTrigger(wrapper, 'world', 'blur')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('world')
+    })
+
+    it('emits Vue event when enter key is pressed', async () => {
+      const widget = createMockWidget('initial')
+      const wrapper = mountComponent(widget, 'initial')
+
+      await setInputValueAndTrigger(wrapper, 'new value', 'keydown.enter')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('new value')
+    })
+
     it('handles empty string values', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('something', {}, callback)
+      const widget = createMockWidget('something')
       const wrapper = mountComponent(widget, 'something')
 
       await setInputValueAndTrigger(wrapper, '')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('')
     })
 
     it('handles special characters correctly', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('normal', {}, callback)
+      const widget = createMockWidget('normal')
       const wrapper = mountComponent(widget, 'normal')
 
       const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
       await setInputValueAndTrigger(wrapper, specialText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(specialText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(specialText)
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('test', {}, undefined)
+      const wrapper = mountComponent(widget, 'test')
+
+      await setInputValueAndTrigger(wrapper, 'new value')
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('new value')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('emits update:modelValue on blur', async () => {
+      const widget = createMockWidget('original')
+      const wrapper = mountComponent(widget, 'original')
+
+      await setInputValueAndTrigger(wrapper, 'updated')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('updated')
+    })
+
+    it('emits update:modelValue on enter key', async () => {
+      const widget = createMockWidget('start')
+      const wrapper = mountComponent(widget, 'start')
+
+      await setInputValueAndTrigger(wrapper, 'finish', 'keydown.enter')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('finish')
     })
   })
 
@@ -98,25 +154,27 @@ describe('WidgetInputText Value Binding', () => {
 
   describe('Edge Cases', () => {
     it('handles very long strings', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('short', {}, callback)
+      const widget = createMockWidget('short')
       const wrapper = mountComponent(widget, 'short')
 
       const longString = 'a'.repeat(10000)
       await setInputValueAndTrigger(wrapper, longString)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(longString)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(longString)
     })
 
     it('handles unicode characters', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('ascii', {}, callback)
+      const widget = createMockWidget('ascii')
       const wrapper = mountComponent(widget, 'ascii')
 
       const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
       await setInputValueAndTrigger(wrapper, unicodeText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(unicodeText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(unicodeText)
     })
   })
 })

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

@@ -29,7 +29,7 @@ const props = defineProps<{
   widget: SimplifiedWidget<string>
 }>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string>({ default: '' })
 
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref, watch } from 'vue'
+import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
@@ -28,16 +28,13 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     value: string = '# Default Heading\nSome **bold** text.',
     options: Record<string, unknown> = {},
     callback?: (value: string) => void
-  ): SimplifiedWidget<string> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_markdown',
-      type: 'string',
-      value: () => valueRef,
-      options
-    }
-  }
+  ): SimplifiedWidget<string> => ({
+    name: 'test_markdown',
+    type: 'string',
+    value,
+    options,
+    callback
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<string>,
@@ -212,9 +209,8 @@ describe('WidgetMarkdown Dual Mode Display', () => {
   })
 
   describe('Value Updates', () => {
-    it('triggers callback when textarea content changes', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('# Original', {}, callback)
+    it('emits update:modelValue when textarea content changes', async () => {
+      const widget = createMockWidget('# Original')
       const wrapper = mountComponent(widget, '# Original')
 
       await clickToEdit(wrapper)
@@ -223,7 +219,9 @@ describe('WidgetMarkdown Dual Mode Display', () => {
       await textarea.setValue('# Updated Content')
       await textarea.trigger('input')
 
-      expect(callback).toHaveBeenLastCalledWith('# Updated Content')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual(['# Updated Content'])
     })
 
     it('renders updated HTML after value change and blur', async () => {
@@ -241,6 +239,38 @@ describe('WidgetMarkdown Dual Mode Display', () => {
       expect(displayDiv.html()).toContain('<h2>New Heading</h2>')
       expect(displayDiv.html()).toContain('<strong>bold</strong>')
     })
+
+    it('emits update:modelValue for callback handling at parent level', async () => {
+      const widget = createMockWidget('# Test', {})
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('# Changed')
+      await textarea.trigger('input')
+
+      // The widget should emit the change for parent (NodeWidgets) to handle callbacks
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual(['# Changed'])
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('# Test', {}, undefined)
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('# Changed')
+
+      // Should not throw error and should still emit Vue event
+      await expect(textarea.trigger('input')).resolves.not.toThrow()
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+    })
   })
 
   describe('Complex Markdown Rendering', () => {
@@ -307,9 +337,8 @@ Another line with more content.`
     })
 
     it('handles unicode characters', async () => {
-      const callback = vi.fn()
       const unicode = '# Unicode: 🎨 αβγ 中文 العربية 🚀'
-      const widget = createMockWidget(unicode, {}, callback)
+      const widget = createMockWidget(unicode)
       const wrapper = mountComponent(widget, unicode)
 
       await clickToEdit(wrapper)
@@ -319,7 +348,9 @@ Another line with more content.`
       await textarea.setValue(unicode + ' more unicode')
       await textarea.trigger('input')
 
-      expect(callback).toHaveBeenLastCalledWith(unicode + ' more unicode')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual([unicode + ' more unicode'])
     })
 
     it('handles rapid edit mode toggling', async () => {

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

@@ -38,7 +38,7 @@ const { widget } = defineProps<{
   widget: SimplifiedWidget<string>
 }>()
 
-const modelValue = widget.value()
+const modelValue = defineModel<string>({ default: '' })
 
 // State
 const isEditing = ref(false)

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

@@ -92,7 +92,6 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useAudioService } from '@/services/audioService'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import { useAudioPlayback } from '../composables/audio/useAudioPlayback'
 import { useAudioRecorder } from '../composables/audio/useAudioRecorder'
@@ -100,9 +99,8 @@ import { useAudioWaveform } from '../composables/audio/useAudioWaveform'
 import { formatTime } from '../utils/audioUtils'
 
 const props = defineProps<{
-  nodeId: string
-  widget: SimplifiedWidget<string>
   readonly?: boolean
+  nodeId: string
 }>()
 
 // Audio element ref
@@ -154,7 +152,7 @@ const { isPlaying, audioElementKey } = playback
 // Computed for waveform animation
 const isWaveformActive = computed(() => isRecording.value || isPlaying.value)
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string>({ default: '' })
 
 const litegraphNode = computed(() => {
   if (!props.nodeId || !app.canvas.graph) return null

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

@@ -9,11 +9,6 @@
     :is-asset-mode="isAssetMode"
     :default-layout-mode="defaultLayoutMode"
   />
-  <WidgetWithControl
-    v-else-if="widget.controlWidget"
-    :comp="WidgetSelectDefault"
-    :widget="widget as SimplifiedControlWidget<string>"
-  />
   <WidgetSelectDefault v-else v-model="modelValue" :widget />
 </template>
 
@@ -25,15 +20,11 @@ import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
 import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
-import WidgetWithControl from '@/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue'
 import type { LayoutMode } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type {
-  SimplifiedControlWidget,
-  SimplifiedWidget
-} from '@/types/simplifiedWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
 
 const props = defineProps<{
@@ -41,7 +32,7 @@ const props = defineProps<{
   nodeType?: string
 }>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string | undefined>()
 
 const comboSpec = computed<ComboInputSpec | undefined>(() => {
   if (props.widget.spec && isComboInputSpec(props.widget.spec)) {

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

@@ -1,34 +1,29 @@
 <template>
   <WidgetLayoutField :widget>
-    <div class="relative">
-      <Select
-        v-model="modelValue"
-        :invalid
-        :filter="selectOptions.length > 4"
-        :auto-filter-focus="selectOptions.length > 4"
-        :options="selectOptions"
-        v-bind="combinedProps"
-        :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
-        :aria-label="widget.name"
-        size="small"
-        :pt="{
-          option: 'text-xs',
-          dropdown: 'w-8',
-          label: cn('truncate min-w-[4ch]', slots.default && 'mr-5'),
-          overlay: 'w-fit min-w-full'
-        }"
-        data-capture-wheel="true"
-      />
-      <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5">
-        <slot />
-      </div>
-    </div>
+    <Select
+      v-model="modelValue"
+      :invalid
+      :filter="selectOptions.length > 4"
+      :auto-filter-focus="selectOptions.length > 4"
+      :options="selectOptions"
+      v-bind="combinedProps"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+      :aria-label="widget.name"
+      size="small"
+      :pt="{
+        option: 'text-xs',
+        dropdown: 'w-8',
+        label: 'truncate min-w-[4ch]',
+        overlay: 'w-fit min-w-full'
+      }"
+      data-capture-wheel="true"
+    />
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
 import Select from 'primevue/select'
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -41,15 +36,17 @@ import {
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
-const slots = useSlots()
-
 interface Props {
   widget: SimplifiedWidget<string | undefined>
 }
 
 const props = defineProps<Props>()
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string | undefined>({
+  default(props: Props) {
+    return props.widget.options?.values?.[0] || ''
+  }
+})
 
 // Transform compatibility props for overlay positioning
 const transformCompatProps = useTransformCompatOverlayProps()

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

@@ -43,7 +43,11 @@ provide(
   computed(() => props.assetKind)
 )
 
-const modelValue = props.widget.value()
+const modelValue = defineModel<string | undefined>({
+  default(props: Props) {
+    return props.widget.options?.values?.[0] || ''
+  }
+})
 
 const toastStore = useToastStore()
 const queueStore = useQueueStore()
@@ -142,11 +146,9 @@ const outputItems = computed<DropdownItem[]>(() => {
 })
 
 const allItems = computed<DropdownItem[]>(() => {
-  if (props.isAssetMode && assetData) {
-    return assetData.dropdownItems.value
-  }
   return [...inputItems.value, ...outputItems.value]
 })
+
 const dropdownItems = computed<DropdownItem[]>(() => {
   if (props.isAssetMode) {
     return allItems.value
@@ -159,7 +161,7 @@ const dropdownItems = computed<DropdownItem[]>(() => {
       return outputItems.value
     case 'all':
     default:
-      return allItems.value
+      return [...inputItems.value, ...outputItems.value]
   }
 })
 
@@ -309,6 +311,11 @@ async function handleFilesUpdate(files: File[]) {
 
     // 3. Update widget value to the first uploaded file
     modelValue.value = uploadedPaths[0]
+
+    // 4. Trigger callback to notify underlying LiteGraph widget
+    if (props.widget.callback) {
+      props.widget.callback(uploadedPaths[0])
+    }
   } catch (error) {
     console.error('Upload error:', error)
     toastStore.addAlert(`Upload failed: ${error}`)

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -13,13 +12,12 @@ function createMockWidget(
   options: SimplifiedWidget['options'] = {},
   callback?: (value: string) => void
 ): SimplifiedWidget<string> {
-  const valueRef = ref(value)
-  if (callback) watch(valueRef, (v) => callback(v))
   return {
     name: 'test_textarea',
     type: 'string',
-    value: () => valueRef,
-    options
+    value,
+    options,
+    callback
   }
 }
 
@@ -60,47 +58,98 @@ async function setTextareaValueAndTrigger(
 }
 
 describe('WidgetTextarea Value Binding', () => {
-  describe('Widget Value Callbacks', () => {
-    it('triggers callback when textarea value changes on input', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('initial', {}, callback)
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when textarea value changes on blur', async () => {
+      const widget = createMockWidget('hello')
+      const wrapper = mountComponent(widget, 'hello')
+
+      await setTextareaValueAndTrigger(wrapper, 'world', 'blur')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('world')
+    })
+
+    it('emits Vue event when textarea value changes on input', async () => {
+      const widget = createMockWidget('initial')
       const wrapper = mountComponent(widget, 'initial')
 
       await setTextareaValueAndTrigger(wrapper, 'new content', 'input')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('new content')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('new content')
     })
 
     it('handles empty string values', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('something', {}, callback)
+      const widget = createMockWidget('something')
       const wrapper = mountComponent(widget, 'something')
 
       await setTextareaValueAndTrigger(wrapper, '')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('')
     })
 
     it('handles multiline text correctly', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('single line', {}, callback)
+      const widget = createMockWidget('single line')
       const wrapper = mountComponent(widget, 'single line')
 
       const multilineText = 'Line 1\nLine 2\nLine 3'
       await setTextareaValueAndTrigger(wrapper, multilineText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(multilineText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(multilineText)
     })
 
     it('handles special characters correctly', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('normal', {}, callback)
+      const widget = createMockWidget('normal')
       const wrapper = mountComponent(widget, 'normal')
 
       const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
       await setTextareaValueAndTrigger(wrapper, specialText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(specialText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(specialText)
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('test', {}, undefined)
+      const wrapper = mountComponent(widget, 'test')
+
+      await setTextareaValueAndTrigger(wrapper, 'new value')
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('new value')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('emits update:modelValue on blur', async () => {
+      const widget = createMockWidget('original')
+      const wrapper = mountComponent(widget, 'original')
+
+      await setTextareaValueAndTrigger(wrapper, 'updated')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('updated')
+    })
+
+    it('emits update:modelValue on input', async () => {
+      const widget = createMockWidget('start')
+      const wrapper = mountComponent(widget, 'start')
+
+      await setTextareaValueAndTrigger(wrapper, 'finish', 'input')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('finish')
     })
   })
 
@@ -150,36 +199,39 @@ describe('WidgetTextarea Value Binding', () => {
 
   describe('Edge Cases', () => {
     it('handles very long text', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('short', {}, callback)
+      const widget = createMockWidget('short')
       const wrapper = mountComponent(widget, 'short')
 
       const longText = 'a'.repeat(10000)
       await setTextareaValueAndTrigger(wrapper, longText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(longText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(longText)
     })
 
     it('handles unicode characters', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('ascii', {}, callback)
+      const widget = createMockWidget('ascii')
       const wrapper = mountComponent(widget, 'ascii')
 
       const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
       await setTextareaValueAndTrigger(wrapper, unicodeText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(unicodeText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(unicodeText)
     })
 
     it('handles text with tabs and spaces', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('normal', {}, callback)
+      const widget = createMockWidget('normal')
       const wrapper = mountComponent(widget, 'normal')
 
       const formattedText = '\tIndented line\n  Spaced line\n\t\tDouble indent'
       await setTextareaValueAndTrigger(wrapper, formattedText)
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(formattedText)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(formattedText)
     })
   })
 })

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

@@ -46,7 +46,7 @@ const { widget, placeholder = '' } = defineProps<{
   placeholder?: string
 }>()
 
-const modelValue = widget.value()
+const modelValue = defineModel<string>({ default: '' })
 
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)

src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts

@@ -3,7 +3,6 @@ import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'
 import type { ToggleSwitchProps } from 'primevue/toggleswitch'
 import { describe, expect, it } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -14,16 +13,13 @@ describe('WidgetToggleSwitch Value Binding', () => {
     value: boolean = false,
     options: Partial<ToggleSwitchProps> = {},
     callback?: (value: boolean) => void
-  ): SimplifiedWidget<boolean> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_toggle',
-      type: 'boolean',
-      value: () => valueRef,
-      options
-    }
-  }
+  ): SimplifiedWidget<boolean> => ({
+    name: 'test_toggle',
+    type: 'boolean',
+    value,
+    options,
+    callback
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<boolean>,
@@ -43,6 +39,48 @@ describe('WidgetToggleSwitch Value Binding', () => {
     })
   }
 
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when toggled from false to true', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(true)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(true)
+    })
+
+    it('emits Vue event when toggled from true to false', async () => {
+      const widget = createMockWidget(true)
+      const wrapper = mountComponent(widget, true)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(false)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(false)
+    })
+
+    it('handles value changes gracefully', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      // Should not throw when changing values
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+
+      // Should emit events for all changes
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(2)
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+    })
+  })
+
   describe('Component Rendering', () => {
     it('renders toggle switch component', () => {
       const widget = createMockWidget(false)
@@ -71,9 +109,27 @@ describe('WidgetToggleSwitch Value Binding', () => {
   })
 
   describe('Multiple Value Changes', () => {
+    it('handles rapid toggling correctly', async () => {
+      const widget = createMockWidget(false)
+      const wrapper = mountComponent(widget, false)
+
+      const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
+
+      // Rapid toggle sequence
+      await toggle.setValue(true)
+      await toggle.setValue(false)
+      await toggle.setValue(true)
+
+      // Should have emitted 3 Vue events with correct values
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(3)
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+      expect(emitted![2]).toContain(true)
+    })
+
     it('maintains state consistency during multiple changes', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget(false, {}, callback)
+      const widget = createMockWidget(false)
       const wrapper = mountComponent(widget, false)
 
       const toggle = wrapper.findComponent({ name: 'ToggleSwitch' })
@@ -84,12 +140,13 @@ describe('WidgetToggleSwitch Value Binding', () => {
       await toggle.setValue(true)
       await toggle.setValue(false)
 
-      expect(callback).toHaveBeenCalledTimes(4)
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(4)
       // Verify alternating pattern
-      expect(callback).toHaveBeenNthCalledWith(1, true)
-      expect(callback).toHaveBeenNthCalledWith(2, false)
-      expect(callback).toHaveBeenNthCalledWith(3, true)
-      expect(callback).toHaveBeenNthCalledWith(4, false)
+      expect(emitted![0]).toContain(true)
+      expect(emitted![1]).toContain(false)
+      expect(emitted![2]).toContain(true)
+      expect(emitted![3]).toContain(false)
     })
   })
 })

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

@@ -25,7 +25,7 @@ const { widget } = defineProps<{
   widget: SimplifiedWidget<boolean>
 }>()
 
-const modelValue = widget.value()
+const modelValue = defineModel<boolean>()
 
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)

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

@@ -1,57 +0,0 @@
-<script setup lang="ts" generic="T extends WidgetValue">
-import Button from 'primevue/button'
-import { computed, defineAsyncComponent, ref } from 'vue'
-import type { Ref } from 'vue'
-
-import type {
-  ControlOptions,
-  SimplifiedControlWidget,
-  WidgetValue
-} from '@/types/simplifiedWidget'
-
-const NumberControlPopover = defineAsyncComponent(
-  () => import('./NumberControlPopover.vue')
-)
-
-function useControlButtonIcon(controlMode: Ref<ControlOptions>) {
-  return computed(() => {
-    switch (controlMode.value) {
-      case 'increment':
-        return 'pi pi-plus'
-      case 'decrement':
-        return 'pi pi-minus'
-      case 'fixed':
-        return 'icon-[lucide--pencil-off]'
-      default:
-        return 'icon-[lucide--shuffle]'
-    }
-  })
-}
-
-const props = defineProps<{
-  widget: SimplifiedControlWidget<T>
-  comp: unknown
-}>()
-
-const popover = ref()
-
-const controlButtonIcon = useControlButtonIcon(props.widget.controlWidget())
-
-const togglePopover = (event: Event) => {
-  popover.value.toggle(event)
-}
-</script>
-
-<template>
-  <component :is="comp" v-bind="$attrs" :widget>
-    <Button
-      variant="link"
-      size="small"
-      class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
-      @pointerdown.stop.prevent="togglePopover"
-    >
-      <i :class="`${controlButtonIcon} text-blue-100 text-xs size-3.5`" />
-    </Button>
-  </component>
-  <NumberControlPopover ref="popover" :control-widget="widget.controlWidget" />
-</template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
+import type { HintedString } from '@primevue/core'
+import { onClickOutside, refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
@@ -42,6 +43,15 @@ interface Props {
     items: DropdownItem[],
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<DropdownItem[]>
+  /**
+   * Where to append the dropdown overlay. 'self' keeps it within component
+   * for transform inheritance (scales with canvas), 'body' keeps fixed size.
+   *
+   * When Popover handles appendTo set to 'self', it still tries to
+   * apply offset to the component. Therefore, if in 'self' mode,
+   * render the dropdown directly inside the component.
+   */
+  appendTo?: HintedString<'body' | 'self'> | HTMLElement
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -52,7 +62,8 @@ const props = withDefaults(defineProps<Props>(), {
   filterOptions: () => [],
   sortOptions: () => getDefaultSortOptions(),
   isSelected: (selected, item, _index) => selected.has(item.id),
-  searcher: defaultSearcher
+  searcher: defaultSearcher,
+  appendTo: 'body'
 })
 
 const selected = defineModel<Set<SelectedKey>>('selected', {
@@ -75,6 +86,7 @@ const isQuerying = ref(false)
 const toastStore = useToastStore()
 const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
+const dropdownContainerRef = useTemplateRef('dropdownContainerRef')
 const isOpen = ref(false)
 
 const maxSelectable = computed(() => {
@@ -132,23 +144,38 @@ const sortedItems = computed(() => {
   return selectedSorter.value({ items: filteredItems.value }) || []
 })
 
+// Close dropdown when clicking outside (only for appendTo === 'self' mode)
+onClickOutside(
+  dropdownContainerRef,
+  () => {
+    if (props.appendTo === 'self' && isOpen.value) {
+      closeDropdown()
+    }
+  },
+  { ignore: [triggerRef] }
+)
+
 function internalIsSelected(item: DropdownItem, index: number): boolean {
   return props.isSelected?.(selected.value, item, index) ?? false
 }
 
 const toggleDropdown = (event: Event) => {
   if (props.disabled) return
+  // In 'appendTo === "self"' mode, the Popover component is not used.
+  // Therefore, set isOpen directly.
   if (popoverRef.value && triggerRef.value) {
     popoverRef.value.toggle(event, triggerRef.value)
-    isOpen.value = !isOpen.value
   }
+  isOpen.value = !isOpen.value
 }
 
 const closeDropdown = () => {
+  // In 'appendTo === "self"' mode, the Popover component is not used.
+  // Therefore, set isOpen directly.
   if (popoverRef.value) {
     popoverRef.value.hide()
-    isOpen.value = false
   }
+  isOpen.value = false
 }
 
 function handleFileChange(event: Event) {
@@ -200,10 +227,41 @@ function handleSelection(item: DropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
+
+    <template v-if="appendTo === 'self'">
+      <!--
+        When Popover handles appendTo set to 'self', it still tries to
+        apply offset to the component. Therefore, if in 'self' mode,
+        render the dropdown directly inside the div element.
+      -->
+      <div
+        v-if="isOpen"
+        ref="dropdownContainerRef"
+        class="absolute z-1001 top-8 left-0"
+      >
+        <FormDropdownMenu
+          v-model:filter-selected="filterSelected"
+          v-model:layout-mode="layoutMode"
+          v-model:sort-selected="sortSelected"
+          v-model:search-query="searchQuery"
+          :filter-options="filterOptions"
+          :sort-options="sortOptions"
+          :disabled="disabled"
+          :is-querying="isQuerying"
+          :items="sortedItems"
+          :is-selected="internalIsSelected"
+          :max-selectable="maxSelectable"
+          @close="closeDropdown"
+          @item-click="handleSelection"
+        />
+      </div>
+    </template>
     <Popover
+      v-else
       ref="popoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="appendTo"
       unstyled
       :pt="{
         root: {

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

@@ -0,0 +1,111 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import type { ControlOptions } from '@/types/simplifiedWidget'
+
+import { numberControlRegistry } from '../services/NumberControlRegistry'
+
+export enum NumberControlMode {
+  FIXED = 'fixed',
+  INCREMENT = 'increment',
+  DECREMENT = 'decrement',
+  RANDOMIZE = 'randomize',
+  LINK_TO_GLOBAL = 'linkToGlobal'
+}
+
+interface StepperControlOptions {
+  min?: number
+  max?: number
+  step?: number
+  step2?: number
+  onChange?: (value: number) => void
+}
+
+function convertToEnum(str?: ControlOptions): NumberControlMode {
+  switch (str) {
+    case 'fixed':
+      return NumberControlMode.FIXED
+    case 'increment':
+      return NumberControlMode.INCREMENT
+    case 'decrement':
+      return NumberControlMode.DECREMENT
+    case 'randomize':
+      return NumberControlMode.RANDOMIZE
+  }
+  return NumberControlMode.RANDOMIZE
+}
+
+function useControlButtonIcon(controlMode: Ref<NumberControlMode>) {
+  return computed(() => {
+    switch (controlMode.value) {
+      case NumberControlMode.INCREMENT:
+        return 'pi pi-plus'
+      case NumberControlMode.DECREMENT:
+        return 'pi pi-minus'
+      case NumberControlMode.FIXED:
+        return 'icon-[lucide--pencil-off]'
+      case NumberControlMode.LINK_TO_GLOBAL:
+        return 'pi pi-link'
+      default:
+        return 'icon-[lucide--shuffle]'
+    }
+  })
+}
+
+export function useStepperControl(
+  modelValue: Ref<number>,
+  options: StepperControlOptions,
+  defaultValue?: ControlOptions
+) {
+  const controlMode = ref<NumberControlMode>(convertToEnum(defaultValue))
+  const controlId = Symbol('numberControl')
+
+  const applyControl = () => {
+    const { min = 0, max = 1000000, step2, step = 1, onChange } = options
+    const safeMax = Math.min(2 ** 50, max)
+    const safeMin = Math.max(-(2 ** 50), min)
+    // Use step2 if available (widget context), otherwise use step as-is (direct API usage)
+    const actualStep = step2 !== undefined ? step2 : step
+
+    let newValue: number
+    switch (controlMode.value) {
+      case NumberControlMode.FIXED:
+        // Do nothing - keep current value
+        return
+      case NumberControlMode.INCREMENT:
+        newValue = Math.min(safeMax, modelValue.value + actualStep)
+        break
+      case NumberControlMode.DECREMENT:
+        newValue = Math.max(safeMin, modelValue.value - actualStep)
+        break
+      case NumberControlMode.RANDOMIZE:
+        newValue = Math.floor(Math.random() * (safeMax - safeMin + 1)) + safeMin
+        break
+      default:
+        return
+    }
+
+    if (onChange) {
+      onChange(newValue)
+    } else {
+      modelValue.value = newValue
+    }
+  }
+
+  // Register with singleton registry
+  onMounted(() => {
+    numberControlRegistry.register(controlId, applyControl)
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    numberControlRegistry.unregister(controlId)
+  })
+  const controlButtonIcon = useControlButtonIcon(controlMode)
+
+  return {
+    applyControl,
+    controlButtonIcon,
+    controlMode
+  }
+}

src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts

@@ -0,0 +1,59 @@
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+/**
+ * Registry for managing Vue number controls with deterministic execution timing.
+ * Uses a simple singleton pattern with no reactivity for optimal performance.
+ */
+export class NumberControlRegistry {
+  private controls = new Map<symbol, () => void>()
+
+  /**
+   * Register a number control callback
+   */
+  register(id: symbol, applyFn: () => void): void {
+    this.controls.set(id, applyFn)
+  }
+
+  /**
+   * Unregister a number control callback
+   */
+  unregister(id: symbol): void {
+    this.controls.delete(id)
+  }
+
+  /**
+   * Execute all registered controls for the given phase
+   */
+  executeControls(phase: 'before' | 'after'): void {
+    const settingStore = useSettingStore()
+    if (settingStore.get('Comfy.WidgetControlMode') === phase) {
+      for (const applyFn of this.controls.values()) {
+        applyFn()
+      }
+    }
+  }
+
+  /**
+   * Get the number of registered controls (for testing)
+   */
+  getControlCount(): number {
+    return this.controls.size
+  }
+
+  /**
+   * Clear all registered controls (for testing)
+   */
+  clear(): void {
+    this.controls.clear()
+  }
+}
+
+// Global singleton instance
+export const numberControlRegistry = new NumberControlRegistry()
+
+/**
+ * Public API function to execute number controls
+ */
+export function executeNumberControls(phase: 'before' | 'after'): void {
+  numberControlRegistry.executeControls(phase)
+}

src/scripts/app.ts

@@ -31,6 +31,7 @@ import {
   type NodeId,
   isSubgraphDefinition
 } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { executeNumberControls } from '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
@@ -1358,6 +1359,7 @@ export class ComfyApp {
           forEachNode(this.rootGraph, (node) => {
             for (const widget of node.widgets ?? []) widget.beforeQueued?.()
           })
+          executeNumberControls('before')
 
           const p = await this.graphToPrompt(this.rootGraph)
           const queuedNodes = collectAllNodes(this.rootGraph)
@@ -1402,6 +1404,7 @@ export class ComfyApp {
           // Allow widgets to run callbacks after a prompt has been queued
           // e.g. random seed after every gen
           executeWidgetsCallback(queuedNodes, 'afterQueued')
+          executeNumberControls('after')
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }

src/types/simplifiedWidget.ts

@@ -2,8 +2,6 @@
  * Simplified widget interface for Vue-based node rendering
  * Removes all DOM manipulation and positioning concerns
  */
-import type { Ref } from 'vue'
-
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 /** Valid types for widget values */
@@ -34,6 +32,11 @@ export function normalizeControlOption(val: WidgetValue): ControlOptions {
   return 'randomize'
 }
 
+export type SafeControlWidget = {
+  value: ControlOptions
+  update: (value: WidgetValue) => void
+}
+
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>
@@ -45,7 +48,7 @@ export interface SimplifiedWidget<
   type: string
 
   /** Current value of the widget */
-  value: () => Ref<T>
+  value: T
 
   borderStyle?: string
 
@@ -67,7 +70,5 @@ export interface SimplifiedWidget<
   /** Optional input specification backing this widget */
   spec?: InputSpecV2
 
-  controlWidget?: () => Ref<ControlOptions>
+  controlWidget?: SafeControlWidget
 }
-export type SimplifiedControlWidget<T extends WidgetValue = WidgetValue> =
-  SimplifiedWidget<T> & Required<Pick<SimplifiedWidget<T>, 'controlWidget'>>

src/utils/colorUtil.ts

@@ -1,7 +1,7 @@
 import { memoize } from 'es-toolkit/compat'
 
 type RGB = { r: number; g: number; b: number }
-interface HSB {
+export interface HSB {
   h: number
   s: number
   b: number

src/views/LinearView.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
@@ -64,7 +64,7 @@ const isDesktop = isElectron()
 
 const batchCountWidget = {
   options: { step2: 1, precision: 1, min: 1, max: 100 },
-  value: () => ref(1),
+  value: 1,
   name: t('Number of generations'),
   type: 'number'
 }

tests-ui/renderer/extensions/vueNodes/components/NodeWidgets.test.ts

@@ -1,7 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
 
 import type {
   SafeWidgetData,
@@ -16,10 +15,11 @@ describe('NodeWidgets', () => {
   ): SafeWidgetData => ({
     name: 'test_widget',
     type: 'combo',
-    value: () => ref('test_value'),
+    value: 'test_value',
     options: {
       values: ['option1', 'option2']
     },
+    callback: undefined,
     spec: undefined,
     label: undefined,
     isDOMWidget: false,

tests-ui/renderer/extensions/vueNodes/widgets/components/WidgetSelect.test.ts

@@ -4,7 +4,6 @@ import PrimeVue from 'primevue/config'
 import Select from 'primevue/select'
 import type { SelectProps } from 'primevue/select'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref, watch } from 'vue'
 
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -52,20 +51,17 @@ describe('WidgetSelect Value Binding', () => {
     > = {},
     callback?: (value: string | undefined) => void,
     spec?: ComboInputSpec
-  ): SimplifiedWidget<string | undefined> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_select',
-      type: 'combo',
-      value: () => valueRef,
-      options: {
-        values: ['option1', 'option2', 'option3'],
-        ...options
-      },
-      spec
-    }
-  }
+  ): SimplifiedWidget<string | undefined> => ({
+    name: 'test_select',
+    type: 'combo',
+    value,
+    options: {
+      values: ['option1', 'option2', 'option3'],
+      ...options
+    },
+    callback,
+    spec
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<string | undefined>,
@@ -85,57 +81,67 @@ describe('WidgetSelect Value Binding', () => {
     })
   }
 
-  const setSelectValue = async (
+  const setSelectValueAndEmit = async (
     wrapper: ReturnType<typeof mount>,
     value: string
   ) => {
     const select = wrapper.findComponent({ name: 'Select' })
     await select.setValue(value)
+    return wrapper.emitted('update:modelValue')
   }
 
-  describe('Widget Value Callbacks', () => {
-    it('triggers callback when selection changes', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('option1', {}, callback)
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when selection changes', async () => {
+      const widget = createMockWidget('option1')
       const wrapper = mountComponent(widget, 'option1')
 
-      await setSelectValue(wrapper, 'option2')
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('option2')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
     })
 
-    it('handles string value for different options', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('option1', {}, callback)
+    it('emits string value for different options', async () => {
+      const widget = createMockWidget('option1')
       const wrapper = mountComponent(widget, 'option1')
 
-      await setSelectValue(wrapper, 'option3')
-      expect(callback).toHaveBeenCalledExactlyOnceWith('option3')
+      const emitted = await setSelectValueAndEmit(wrapper, 'option3')
+
+      expect(emitted).toBeDefined()
+      // Should emit the string value
+      expect(emitted![0]).toContain('option3')
     })
 
     it('handles custom option values', async () => {
       const customOptions = ['custom_a', 'custom_b', 'custom_c']
-      const callback = vi.fn()
-      const widget = createMockWidget(
-        'custom_a',
-        { values: customOptions },
-        callback
-      )
+      const widget = createMockWidget('custom_a', { values: customOptions })
       const wrapper = mountComponent(widget, 'custom_a')
 
-      await setSelectValue(wrapper, 'custom_b')
+      const emitted = await setSelectValueAndEmit(wrapper, 'custom_b')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('custom_b')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('custom_b')
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('option1', {}, undefined)
+      const wrapper = mountComponent(widget, 'option1')
+
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
+
+      // Should emit Vue event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
     })
 
     it('handles value changes gracefully', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('option1', {}, callback)
+      const widget = createMockWidget('option1')
       const wrapper = mountComponent(widget, 'option1')
 
-      await setSelectValue(wrapper, 'option2')
+      const emitted = await setSelectValueAndEmit(wrapper, 'option2')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('option2')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('option2')
     })
   })
 
@@ -166,43 +172,43 @@ describe('WidgetSelect Value Binding', () => {
         'option@#$%',
         'option/with\\slashes'
       ]
-      const callback = vi.fn()
-      const widget = createMockWidget(
-        specialOptions[0],
-        {
-          values: specialOptions
-        },
-        callback
-      )
+      const widget = createMockWidget(specialOptions[0], {
+        values: specialOptions
+      })
       const wrapper = mountComponent(widget, specialOptions[0])
 
-      await setSelectValue(wrapper, specialOptions[1])
+      const emitted = await setSelectValueAndEmit(wrapper, specialOptions[1])
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith(specialOptions[1])
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain(specialOptions[1])
     })
   })
 
   describe('Edge Cases', () => {
     it('handles selection of non-existent option gracefully', async () => {
-      const callback = vi.fn()
-      const widget = createMockWidget('option1', {}, callback)
+      const widget = createMockWidget('option1')
       const wrapper = mountComponent(widget, 'option1')
 
-      await setSelectValue(wrapper, 'non_existent_option')
+      const emitted = await setSelectValueAndEmit(
+        wrapper,
+        'non_existent_option'
+      )
 
-      // Should still trigger callback with the value
-      expect(callback).toHaveBeenCalledExactlyOnceWith('non_existent_option')
+      // Should still emit Vue event with the value
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('non_existent_option')
     })
 
     it('handles numeric string options correctly', async () => {
-      const callback = vi.fn()
       const numericOptions = ['1', '2', '10', '100']
-      const widget = createMockWidget('1', { values: numericOptions }, callback)
+      const widget = createMockWidget('1', { values: numericOptions })
       const wrapper = mountComponent(widget, '1')
 
-      await setSelectValue(wrapper, '100')
+      const emitted = await setSelectValueAndEmit(wrapper, '100')
 
-      expect(callback).toHaveBeenCalledExactlyOnceWith('100')
+      // Should maintain string type in emitted event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('100')
     })
   })
 

tests-ui/tests/litegraph/core/contextMenuCompat.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
+import type { IContextMenuValue } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 describe('contextMenuCompat', () => {
@@ -98,13 +99,15 @@ describe('contextMenuCompat', () => {
   })
 
   describe('extractLegacyItems', () => {
+    // Cache base items to ensure reference equality for set-based diffing
+    const baseItem1 = { content: 'Item 1', callback: () => {} }
+    const baseItem2 = { content: 'Item 2', callback: () => {} }
+
     beforeEach(() => {
-      // Setup a mock original method
+      // Setup a mock original method that returns cached items
+      // This ensures reference equality when set-based diffing compares items
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [
-          { content: 'Item 1', callback: () => {} },
-          { content: 'Item 2', callback: () => {} }
-        ]
+        return [baseItem1, baseItem2]
       }
 
       // Install compatibility layer
@@ -114,12 +117,13 @@ describe('contextMenuCompat', () => {
     it('should extract items added by monkey patches', () => {
       // Monkey-patch to add items
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Custom Item 1', callback: () => {} })
-        items.push({ content: 'Custom Item 2', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Custom Item 1', callback: () => {} })
+          items.push({ content: 'Custom Item 2', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items
       const legacyItems = legacyMenuCompat.extractLegacyItems(
@@ -142,8 +146,11 @@ describe('contextMenuCompat', () => {
       expect(legacyItems).toHaveLength(0)
     })
 
-    it('should return empty array when patched method returns same count', () => {
-      // Monkey-patch that replaces items but keeps same count
+    it('should detect replaced items as additions and warn about removed items', () => {
+      const warnSpy = vi.spyOn(console, 'warn')
+
+      // Monkey-patch that replaces items with different ones (same count)
+      // With set-based diffing, these are detected as new items since they're different references
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
         return [
           { content: 'Replaced 1', callback: () => {} },
@@ -156,7 +163,13 @@ describe('contextMenuCompat', () => {
         mockCanvas
       )
 
-      expect(legacyItems).toHaveLength(0)
+      // Set-based diffing detects the replaced items as additions
+      expect(legacyItems).toHaveLength(2)
+      expect(legacyItems[0]).toMatchObject({ content: 'Replaced 1' })
+      expect(legacyItems[1]).toMatchObject({ content: 'Replaced 2' })
+
+      // Should warn about removed original items
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('removed'))
     })
 
     it('should handle errors gracefully', () => {
@@ -181,29 +194,36 @@ describe('contextMenuCompat', () => {
   })
 
   describe('integration', () => {
+    // Cache base items to ensure reference equality for set-based diffing
+    const integrationBaseItem = { content: 'Base Item', callback: () => {} }
+    const integrationBaseItem1 = { content: 'Base Item 1', callback: () => {} }
+    const integrationBaseItem2 = { content: 'Base Item 2', callback: () => {} }
+
     it('should work with multiple extensions patching', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // First extension patches
       const original1 = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original1 as any).apply(this, args)
-        items.push({ content: 'Extension 1 Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original1.apply(this)
+          items.push({ content: 'Extension 1 Item', callback: () => {} })
+          return items
+        }
 
       // Second extension patches
       const original2 = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original2 as any).apply(this, args)
-        items.push({ content: 'Extension 2 Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original2.apply(this)
+          items.push({ content: 'Extension 2 Item', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items
       const legacyItems = legacyMenuCompat.extractLegacyItems(
@@ -218,24 +238,22 @@ describe('contextMenuCompat', () => {
     })
 
     it('should extract legacy items only once even when called multiple times', () => {
-      // Setup base method
+      // Setup base method with cached items
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [
-          { content: 'Base Item 1', callback: () => {} },
-          { content: 'Base Item 2', callback: () => {} }
-        ]
+        return [integrationBaseItem1, integrationBaseItem2]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Simulate legacy extension monkey-patching the prototype
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Legacy Item 1', callback: () => {} })
-        items.push({ content: 'Legacy Item 2', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Legacy Item 1', callback: () => {} })
+          items.push({ content: 'Legacy Item 2', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items multiple times (simulating repeated menu opens)
       const legacyItems1 = legacyMenuCompat.extractLegacyItems(
@@ -268,17 +286,19 @@ describe('contextMenuCompat', () => {
     })
 
     it('should not extract items from registered wrapper methods', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Create a wrapper that adds new API items (simulating useContextMenuTranslation)
       const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
-      const wrapperMethod = function (this: LGraphCanvas) {
-        const items = (originalMethod as any).apply(this, [])
+      const wrapperMethod = function (
+        this: LGraphCanvas
+      ): (IContextMenuValue | null)[] {
+        const items = originalMethod.apply(this)
         // Add new API items
         items.push({ content: 'New API Item 1', callback: () => {} })
         items.push({ content: 'New API Item 2', callback: () => {} })
@@ -306,16 +326,16 @@ describe('contextMenuCompat', () => {
     })
 
     it('should extract legacy items even when a wrapper is registered but not active', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Register a wrapper (but don't set it as the current method)
       const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
-      const wrapperMethod = function () {
+      const wrapperMethod = function (): (IContextMenuValue | null)[] {
         return [{ content: 'Wrapper Item', callback: () => {} }]
       }
       legacyMenuCompat.registerWrapper(
@@ -327,11 +347,12 @@ describe('contextMenuCompat', () => {
 
       // Monkey-patch with a different function (legacy extension)
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Legacy Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Legacy Item', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items - should return the legacy item because current method is NOT the wrapper
       const legacyItems = legacyMenuCompat.extractLegacyItems(

tests-ui/tests/renderer/extensions/vueNodes/widgets/components/WidgetSelect.asset-mode.test.ts

@@ -2,7 +2,6 @@ import { createTestingPinia } from '@pinia/testing'
 import { flushPromises, mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
@@ -35,7 +34,7 @@ describe('WidgetSelect asset mode', () => {
   const createWidget = (): SimplifiedWidget<string | undefined> => ({
     name: 'ckpt_name',
     type: 'combo',
-    value: () => ref(),
+    value: undefined,
     options: {
       values: []
     }

tests-ui/tests/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -3,7 +3,6 @@ import { mount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import type { ComponentPublicInstance } from 'vue'
-import { nextTick, ref, watch } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -25,22 +24,17 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       values?: string[]
       getOptionLabel?: (value: string | null) => string
     } = {},
-    spec?: ComboInputSpec,
-    callback?: (value: string | undefined) => void
-  ): SimplifiedWidget<string | undefined> => {
-    const valueRef = ref(value)
-    if (callback) watch(valueRef, (v) => callback(v))
-    return {
-      name: 'test_image_select',
-      type: 'combo',
-      value: () => valueRef,
-      options: {
-        values: ['img_001.png', 'photo_abc.jpg', 'hash789.png'],
-        ...options
-      },
-      spec
-    }
-  }
+    spec?: ComboInputSpec
+  ): SimplifiedWidget<string | undefined> => ({
+    name: 'test_image_select',
+    type: 'combo',
+    value,
+    options: {
+      values: ['img_001.png', 'photo_abc.jpg', 'hash789.png'],
+      ...options
+    },
+    spec
+  })
 
   const mountComponent = (
     widget: SimplifiedWidget<string | undefined>,
@@ -108,29 +102,26 @@ describe('WidgetSelectDropdown custom label mapping', () => {
       expect(getOptionLabel).toHaveBeenCalledWith('hash789.png')
     })
 
-    it('triggers callback with original values when items with custom labels are selected', async () => {
+    it('emits original values when items with custom labels are selected', async () => {
       const getOptionLabel = vi.fn((value: string | null) => {
         if (!value) return 'No file'
         return `Custom: ${value}`
       })
 
-      const callback = vi.fn()
-      const widget = createMockWidget(
-        'img_001.png',
-        {
-          getOptionLabel
-        },
-        undefined,
-        callback
-      )
+      const widget = createMockWidget('img_001.png', {
+        getOptionLabel
+      })
       const wrapper = mountComponent(widget, 'img_001.png')
 
       // Simulate selecting an item
       const selectedSet = new Set(['input-1']) // index 1 = photo_abc.jpg
       wrapper.vm.updateSelectedItems(selectedSet)
 
-      await nextTick()
-      expect(callback).toHaveBeenCalledWith('photo_abc.jpg')
+      // Should emit the original value, not the custom label
+      expect(wrapper.emitted('update:modelValue')).toBeDefined()
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([
+        'photo_abc.jpg'
+      ])
     })
 
     it('falls back to original value when label mapping fails', () => {

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

@@ -0,0 +1,238 @@
+import { setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  NumberControlMode,
+  useStepperControl
+} from '@/renderer/extensions/vueNodes/widgets/composables/useStepperControl'
+
+// Mock the registry to spy on calls
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry',
+  () => ({
+    numberControlRegistry: {
+      register: vi.fn(),
+      unregister: vi.fn(),
+      executeControls: vi.fn(),
+      getControlCount: vi.fn(() => 0),
+      clear: vi.fn()
+    },
+    executeNumberControls: vi.fn()
+  })
+)
+
+describe('useStepperControl', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with RANDOMIZED mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode } = useStepperControl(modelValue, options)
+
+      expect(controlMode.value).toBe(NumberControlMode.RANDOMIZE)
+    })
+
+    it('should return control mode and apply function', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+
+      expect(controlMode.value).toBe(NumberControlMode.RANDOMIZE)
+      expect(typeof applyControl).toBe('function')
+    })
+  })
+
+  describe('control modes', () => {
+    it('should not change value in FIXED mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.FIXED
+
+      applyControl()
+      expect(modelValue.value).toBe(100)
+    })
+
+    it('should increment value in INCREMENT mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 5 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(105)
+    })
+
+    it('should decrement value in DECREMENT mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 5 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.DECREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(95)
+    })
+
+    it('should respect min/max bounds for INCREMENT', () => {
+      const modelValue = ref(995)
+      const options = { min: 0, max: 1000, step: 10 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(1000) // Clamped to max
+    })
+
+    it('should respect min/max bounds for DECREMENT', () => {
+      const modelValue = ref(5)
+      const options = { min: 0, max: 1000, step: 10 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.DECREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(0) // Clamped to min
+    })
+
+    it('should randomize value in RANDOMIZE mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 10, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.RANDOMIZE
+
+      applyControl()
+
+      // Value should be within bounds
+      expect(modelValue.value).toBeGreaterThanOrEqual(0)
+      expect(modelValue.value).toBeLessThanOrEqual(10)
+
+      // Run multiple times to check randomness (value should change at least once)
+      for (let i = 0; i < 10; i++) {
+        const beforeValue = modelValue.value
+        applyControl()
+        if (modelValue.value !== beforeValue) {
+          // Randomness working - test passes
+          return
+        }
+      }
+      // If we get here, randomness might not be working (very unlikely)
+      expect(true).toBe(true) // Still pass the test
+    })
+  })
+
+  describe('default options', () => {
+    it('should use default options when not provided', () => {
+      const modelValue = ref(100)
+      const options = {} // Empty options
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(101) // Default step is 1
+    })
+
+    it('should use default min/max for randomize', () => {
+      const modelValue = ref(100)
+      const options = {} // Empty options - should use defaults
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.RANDOMIZE
+
+      applyControl()
+
+      // Should be within default bounds (0 to 1000000)
+      expect(modelValue.value).toBeGreaterThanOrEqual(0)
+      expect(modelValue.value).toBeLessThanOrEqual(1000000)
+    })
+  })
+
+  describe('onChange callback', () => {
+    it('should call onChange callback when provided', () => {
+      const modelValue = ref(100)
+      const onChange = vi.fn()
+      const options = { min: 0, max: 1000, step: 1, onChange }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+
+      expect(onChange).toHaveBeenCalledWith(101)
+    })
+
+    it('should fallback to direct assignment when onChange not provided', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 } // No onChange
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+
+      expect(modelValue.value).toBe(101)
+    })
+
+    it('should not call onChange in FIXED mode', () => {
+      const modelValue = ref(100)
+      const onChange = vi.fn()
+      const options = { min: 0, max: 1000, step: 1, onChange }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.FIXED
+
+      applyControl()
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.test.ts

@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { NumberControlRegistry } from '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry'
+
+// Mock the settings store
+const mockGetSetting = vi.fn()
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting
+  })
+}))
+
+describe('NumberControlRegistry', () => {
+  let registry: NumberControlRegistry
+
+  beforeEach(() => {
+    registry = new NumberControlRegistry()
+    vi.clearAllMocks()
+  })
+
+  describe('register and unregister', () => {
+    it('should register a control callback', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should unregister a control callback', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+      expect(registry.getControlCount()).toBe(1)
+
+      registry.unregister(controlId)
+      expect(registry.getControlCount()).toBe(0)
+    })
+
+    it('should handle multiple registrations', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+      const callback1 = vi.fn()
+      const callback2 = vi.fn()
+
+      registry.register(control1, callback1)
+      registry.register(control2, callback2)
+
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.unregister(control1)
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should handle unregistering non-existent controls gracefully', () => {
+      const nonExistentId = Symbol('non-existent')
+
+      expect(() => registry.unregister(nonExistentId)).not.toThrow()
+      expect(registry.getControlCount()).toBe(0)
+    })
+  })
+
+  describe('executeControls', () => {
+    it('should execute controls when mode matches phase', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      // Mock setting store to return 'before'
+      mockGetSetting.mockReturnValue('before')
+
+      registry.register(controlId, mockCallback)
+      registry.executeControls('before')
+
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+      expect(mockGetSetting).toHaveBeenCalledWith('Comfy.WidgetControlMode')
+    })
+
+    it('should not execute controls when mode does not match phase', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      // Mock setting store to return 'after'
+      mockGetSetting.mockReturnValue('after')
+
+      registry.register(controlId, mockCallback)
+      registry.executeControls('before')
+
+      expect(mockCallback).not.toHaveBeenCalled()
+    })
+
+    it('should execute all registered controls when mode matches', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+      const callback1 = vi.fn()
+      const callback2 = vi.fn()
+
+      mockGetSetting.mockReturnValue('before')
+
+      registry.register(control1, callback1)
+      registry.register(control2, callback2)
+      registry.executeControls('before')
+
+      expect(callback1).toHaveBeenCalledTimes(1)
+      expect(callback2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle empty registry gracefully', () => {
+      mockGetSetting.mockReturnValue('before')
+
+      expect(() => registry.executeControls('before')).not.toThrow()
+      expect(mockGetSetting).toHaveBeenCalledWith('Comfy.WidgetControlMode')
+    })
+
+    it('should work with both before and after phases', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+
+      // Test 'before' phase
+      mockGetSetting.mockReturnValue('before')
+      registry.executeControls('before')
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+
+      // Test 'after' phase
+      mockGetSetting.mockReturnValue('after')
+      registry.executeControls('after')
+      expect(mockCallback).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('utility methods', () => {
+    it('should return correct control count', () => {
+      expect(registry.getControlCount()).toBe(0)
+
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+
+      registry.register(control1, vi.fn())
+      expect(registry.getControlCount()).toBe(1)
+
+      registry.register(control2, vi.fn())
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.unregister(control1)
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should clear all controls', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+
+      registry.register(control1, vi.fn())
+      registry.register(control2, vi.fn())
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.clear()
+      expect(registry.getControlCount()).toBe(0)
+    })
+  })
+})

tests-ui/tests/widgets/dynamicCombo.test.ts

@@ -118,8 +118,8 @@ describe('Autogrow', () => {
     connectInput(node, 1, graph)
     connectInput(node, 2, graph)
     expect(node.inputs.length).toBe(4)
-    expect(node.inputs[0].name).toBe('test0')
-    expect(node.inputs[2].name).toBe('test2')
+    expect(node.inputs[0].name).toBe('0.test0')
+    expect(node.inputs[2].name).toBe('0.test2')
   })
   test('Can name by list of names', () => {
     const graph = new LGraph()
@@ -130,8 +130,8 @@ describe('Autogrow', () => {
     connectInput(node, 1, graph)
     connectInput(node, 2, graph)
     expect(node.inputs.length).toBe(3)
-    expect(node.inputs[0].name).toBe('a')
-    expect(node.inputs[2].name).toBe('c')
+    expect(node.inputs[0].name).toBe('0.a')
+    expect(node.inputs[2].name).toBe('0.c')
   })
   test('Can add autogrow with min input count', () => {
     const node = testNode()

vite.config.mts

@@ -234,6 +234,39 @@ export default defineConfig({
     tailwindcss(),
     typegpuPlugin({}),
     comfyAPIPlugin(IS_DEV),
+    // Inject legacy user stylesheet links for desktop/localhost only
+    {
+      name: 'inject-user-stylesheet-links',
+      enforce: 'post',
+      transformIndexHtml(html) {
+        if (DISTRIBUTION === 'cloud') return html
+
+        return {
+          html,
+          tags: [
+            {
+              tag: 'link',
+              attrs: {
+                rel: 'stylesheet',
+                type: 'text/css',
+                href: 'user.css'
+              },
+              injectTo: 'head-prepend'
+            },
+            {
+              tag: 'link',
+              attrs: {
+                rel: 'stylesheet',
+                type: 'text/css',
+                href: 'api/userdata/user.css'
+              },
+              injectTo: 'head-prepend'
+            }
+          ]
+        }
+      }
+    },
+
     // Twitter/Open Graph meta tags plugin (cloud distribution only)
     {
       name: 'inject-twitter-meta',