[automated] Apply ESLint and Oxfmt fixes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.github/workflows/api-update-electron-api-types.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Update electron types

.github/workflows/api-update-manager-api-types.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/api-update-registry-api-types.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-oss-assets-validation.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/cloud-dispatch-build.yaml

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled]
+    types: [labeled, synchronize]
   workflow_dispatch:
 
 permissions: {}
@@ -26,11 +26,18 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch when the 'preview' label is added.
+    # For pull_request events, only dispatch for preview labels.
+    # - labeled: fires when a label is added; check the added label name.
+    # - synchronize: fires on push; check existing labels on the PR.
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       github.event.label.name == 'preview')
+       (github.event.action == 'labeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
+       (github.event.action == 'synchronize' &&
+        (contains(github.event.pull_request.labels.*.name, 'preview') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

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

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.github/workflows/pr-perf-report.yaml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version-file: '.nvmrc'
 
       - name: Download PR metadata
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
 
       - name: Read desktop-ui version
         id: get_version

.github/workflows/publish-desktop-ui.yaml

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - name: Install dependencies
         working-directory: frontend

.github/workflows/release-branch-create.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - name: Check version bump type
         id: check_version

.github/workflows/release-draft-create.yaml

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-npm-types.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-version-bump.yaml

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
 
       - name: Bump version
         id: bump-version

.github/workflows/version-bump-desktop-ui.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

.github/workflows/weekly-docs-check.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,7 +26,6 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
-.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v24) and pnpm
+  - Node.js (see `.nvmrc`, currently v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

browser_tests/README.md

@@ -27,7 +27,8 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
+Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
+Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -1,47 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        { "name": "IMAGE", "type": "IMAGE", "links": null },
-        { "name": "MASK", "type": "MASK", "links": null }
-      ],
-      "properties": { "Node name for S&R": "LoadImage" },
-      "widgets_values": ["example.png", "image"]
-    },
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": [500, 50],
-      "size": [315, 262],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
-      "properties": { "Node name for S&R": "KSampler" },
-      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": { "offset": [0, 0], "scale": 1 }
-  },
-  "version": 0.4
-}

browser_tests/tests/imagePastePriority.spec.ts

@@ -1,58 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Image paste priority over stale node metadata',
-  { tag: ['@node'] },
-  () => {
-    test('Should not paste copied node when a LoadImage node is selected and clipboard has stale node metadata', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
-
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBe(2)
-
-      // Copy the KSampler node (puts data-metadata in clipboard)
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      await ksamplerNodes[0].copy()
-
-      // Select the LoadImage node
-      const loadImageNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      await loadImageNodes[0].click('title')
-
-      // Simulate pasting when clipboard has stale node metadata (text/html
-      // with data-metadata) but no image file items. This replicates the bug
-      // scenario: user copied a node, then copied a web image (which replaces
-      // clipboard files but may leave stale text/html with node metadata).
-      await comfyPage.page.evaluate(() => {
-        const nodeData = { nodes: [{ type: 'KSampler', id: 99 }] }
-        const base64 = btoa(JSON.stringify(nodeData))
-        const html =
-          '<meta charset="utf-8"><div><span data-metadata="' +
-          base64 +
-          '"></span></div><span style="white-space:pre-wrap;">Text</span>'
-
-        const dataTransfer = new DataTransfer()
-        dataTransfer.setData('text/html', html)
-
-        const event = new ClipboardEvent('paste', {
-          clipboardData: dataTransfer,
-          bubbles: true,
-          cancelable: true
-        })
-        document.dispatchEvent(event)
-      })
-
-      await comfyPage.nextFrame()
-
-      // Node count should remain the same — stale node metadata should NOT
-      // be deserialized when a media node is selected.
-      const finalCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(finalCount).toBe(initialCount)
-    })
-  }
-)

docs/release-process.md

@@ -0,0 +1,62 @@
+# Release Process
+
+## Bump Types
+
+All releases use `release-version-bump.yaml`. Effects differ by bump type:
+
+| Bump       | Target     | Creates branches?                     | GitHub release               |
+| ---------- | ---------- | ------------------------------------- | ---------------------------- |
+| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
+| Patch      | `main`     | No                                    | Published, "latest"          |
+| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
+| Prerelease | any        | No                                    | Draft + prerelease           |
+
+**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
+and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
+bumps on `main` are convenience snapshots — no branches created.
+
+**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
+"latest" so `main` stays current.
+
+### Dual-homed commits
+
+When a minor bump happens, unreleased commits appear in both places:
+
+```
+v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
+                │
+                └── core/1.40
+```
+
+A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
+later ship as v1.40.2). Same commits, no divergence — the branch just prevents
+1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
+
+## Backporting
+
+1. Add `needs-backport` + version label to the merged PR
+2. `pr-backport.yaml` cherry-picks and creates a backport PR
+3. Conflicts produce a comment with details and an agent prompt
+
+## Publishing
+
+Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
+publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
+and npm (`@comfyorg/comfyui-frontend-types`).
+
+## Bi-weekly ComfyUI Integration
+
+`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
+branch has unreleased commits, it triggers a patch bump and drafts a PR to
+`Comfy-Org/ComfyUI` updating `requirements.txt`.
+
+## Workflows
+
+| Workflow                        | Purpose                                          |
+| ------------------------------- | ------------------------------------------------ |
+| `release-version-bump.yaml`     | Bump version, create Release PR                  |
+| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
+| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
+| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
+| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
+| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.17",
+  "version": "1.42.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,6 +195,9 @@
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },
+  "engines": {
+    "node": "24.x"
+  },
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

src/components/TopMenuSection.test.ts

@@ -166,13 +166,22 @@ describe('TopMenuSection', () => {
   })
 
   describe('authentication state', () => {
+    function createLegacyTabBarWrapper() {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      const settingStore = useSettingStore(pinia)
+      vi.mocked(settingStore.get).mockImplementation((key) =>
+        key === 'Comfy.UI.TabBarLayout' ? 'Legacy' : undefined
+      )
+      return createWrapper({ pinia })
+    }
+
     describe('when user is logged in', () => {
       beforeEach(() => {
         mockData.isLoggedIn = true
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createWrapper()
+        const wrapper = createLegacyTabBarWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -186,7 +195,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -194,7 +203,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })

src/components/TopMenuSection.vue

@@ -34,17 +34,7 @@
             </Button>
           </div>
 
-          <div
-            ref="actionbarContainerRef"
-            :class="
-              cn(
-                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
-                hasAnyError
-                  ? 'border-destructive-background-hover'
-                  : 'border-interface-stroke'
-              )
-            "
-          >
+          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
@@ -55,6 +45,7 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
+              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -70,7 +61,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[lucide--share-2] size-4" />
+              <i class="icon-[comfy--send] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>
@@ -123,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLocalStorage } from '@vueuse/core'
+import { useLocalStorage, useMutationObserver } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -145,6 +136,7 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -168,6 +160,7 @@ const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const executionErrorStore = useExecutionErrorStore()
+const actionBarButtonStore = useActionBarButtonStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
@@ -182,8 +175,45 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
+/**
+ * Whether the actionbar container has any visible docked buttons
+ * (excluding ComfyActionbar, which uses position:fixed when floating
+ * and does not contribute to the container's visual layout).
+ */
+const hasDockedButtons = computed(() => {
+  if (actionBarButtonStore.buttons.length > 0) return true
+  if (hasLegacyContent.value) return true
+  if (isLoggedIn.value && !isIntegratedTabBar.value) return true
+  if (isDesktop && !isIntegratedTabBar.value) return true
+  if (isCloud && flags.workflowSharingEnabled) return true
+  if (!isRightSidePanelOpen.value) return true
+  return false
+})
+const isActionbarContainerEmpty = computed(
+  () => isActionbarFloating.value && !hasDockedButtons.value
+)
+const actionbarContainerClass = computed(() => {
+  const base =
+    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
+
+  if (isActionbarContainerEmpty.value) {
+    return cn(
+      base,
+      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
+      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
+      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
+    )
+  }
+
+  const borderClass =
+    !isActionbarFloating.value && hasAnyError.value
+      ? 'border-destructive-background-hover'
+      : 'border-interface-stroke'
+
+  return cn(base, 'px-2', borderClass)
+})
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()
@@ -233,6 +263,25 @@ const rightSidePanelTooltipConfig = computed(() =>
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
+const hasLegacyContent = ref(false)
+
+function checkLegacyContent() {
+  const el = legacyCommandsContainerRef.value
+  if (!el) {
+    hasLegacyContent.value = false
+    return
+  }
+  // Mirror the CSS: [&:not(:has(*>*:not(:empty)))]:hidden
+  hasLegacyContent.value =
+    el.querySelector(':scope > * > *:not(:empty)') !== null
+}
+
+useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
+  childList: true,
+  subtree: true,
+  characterData: true
+})
+
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'

src/components/actionbar/ComfyActionbar.vue

@@ -119,9 +119,14 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
+const {
+  topMenuContainer,
+  queueOverlayExpanded = false,
+  hasAnyError = false
+} = defineProps<{
   topMenuContainer?: HTMLElement | null
   queueOverlayExpanded?: boolean
+  hasAnyError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -435,7 +440,12 @@ const panelClass = computed(() =>
     isDragging.value && 'pointer-events-none select-none',
     isDocked.value
       ? 'static border-none bg-transparent p-0'
-      : 'fixed shadow-interface'
+      : [
+          'fixed shadow-interface',
+          hasAnyError
+            ? 'border-destructive-background-hover'
+            : 'border-interface-stroke'
+        ]
   )
 )
 </script>

src/components/common/DropdownItem.vue

@@ -54,12 +54,11 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5 shrink-0" :class="item.icon" />
-    <div class="mr-auto truncate" v-text="item.label" />
-    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
+    <i class="size-5" :class="item.icon" />
+    {{ item.label }}
     <div
-      v-else-if="item.new"
-      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-if="item.new"
+      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )

src/components/common/ScrubableNumberInput.vue

@@ -33,20 +33,19 @@
         spellcheck="false"
         @blur="handleBlur"
         @keyup.enter="handleBlur"
-        @keydown.up.prevent="updateValueBy(step)"
-        @keydown.down.prevent="updateValueBy(-step)"
-        @keydown.page-up.prevent="updateValueBy(10 * step)"
-        @keydown.page-down.prevent="updateValueBy(-10 * step)"
+        @dragstart.prevent
       />
       <div
-        ref="swipeElement"
         :class="
           cn(
-            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
+            'absolute inset-0 z-10 cursor-ew-resize',
             textEdit && 'pointer-events-none hidden'
           )
         "
+        @pointerdown="handlePointerDown"
+        @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
+        @pointercancel="resetDrag"
       />
     </div>
     <slot />
@@ -66,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -74,8 +73,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  min = -Number.MAX_VALUE,
-  max = Number.MAX_VALUE,
+  min,
+  max,
   step = 1,
   disabled = false,
   hideButtons = false,
@@ -97,7 +96,6 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
-const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)
 
 onClickOutside(container, () => {
@@ -105,11 +103,21 @@ onClickOutside(container, () => {
 })
 
 function clamp(value: number): number {
-  return Math.min(max, Math.max(min, value))
+  const lo = min ?? -Infinity
+  const hi = max ?? Infinity
+  return Math.min(hi, Math.max(lo, value))
 }
 
-const canDecrement = computed(() => modelValue.value > min && !disabled)
-const canIncrement = computed(() => modelValue.value < max && !disabled)
+const canDecrement = computed(
+  () => modelValue.value > (min ?? -Infinity) && !disabled
+)
+const canIncrement = computed(
+  () => modelValue.value < (max ?? Infinity) && !disabled
+)
+
+const dragging = ref(false)
+const dragDelta = ref(0)
+const hasDragged = ref(false)
 
 function handleBlur(e: Event) {
   const target = e.target as HTMLInputElement
@@ -127,27 +135,41 @@ function handleBlur(e: Event) {
   textEdit.value = false
 }
 
-let dragDelta = 0
-function handlePointerUp() {
-  if (isSwiping.value) return
-
-  textEdit.value = true
-  inputField.value?.focus()
-  inputField.value?.select()
+function handlePointerDown(e: PointerEvent) {
+  if (e.button !== 0) return
+  if (disabled) return
+  const target = e.target as HTMLElement
+  target.setPointerCapture(e.pointerId)
+  dragging.value = true
+  dragDelta.value = 0
+  hasDragged.value = false
 }
 
-const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
-  onSwipeEnd: () => (dragDelta = 0)
-})
+function handlePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragDelta.value += e.movementX
+  const steps = (dragDelta.value / 10) | 0
+  if (steps === 0) return
+  hasDragged.value = true
+  const unclipped = modelValue.value + steps * step
+  dragDelta.value %= 10
+  modelValue.value = clamp(unclipped)
+}
 
-whenever(distanceX, () => {
-  if (disabled) return
-  const delta = ((distanceX.value - dragDelta) / 10) | 0
-  dragDelta += delta * 10
-  modelValue.value = clamp(modelValue.value - delta * step)
-})
+function handlePointerUp() {
+  if (!dragging.value) return
 
-function updateValueBy(delta: number) {
-  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
+  if (!hasDragged.value) {
+    textEdit.value = true
+    inputField.value?.focus()
+    inputField.value?.select()
+  }
+
+  resetDrag()
+}
+
+function resetDrag() {
+  dragging.value = false
+  dragDelta.value = 0
 }
 </script>

src/components/common/SearchBox.stories.ts

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
-interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
-  component: Omit<ComponentExposed<C>, 'focus'>
-}
-
-const meta: GenericMeta<typeof SearchBox> = {
-  title: 'Components/Input/SearchBox',
-  component: SearchBox,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text'
-    },
-    placeholder: {
-      control: 'text'
-    },
-    showBorder: {
-      control: 'boolean',
-      description: 'Toggle border prop'
-    },
-    size: {
-      control: 'select',
-      options: ['md', 'lg'],
-      description: 'Size variant of the search box'
-    },
-    'onUpdate:modelValue': { action: 'update:modelValue' },
-    onSearch: { action: 'search' }
-  },
-  args: {
-    modelValue: '',
-    placeholder: 'Search...',
-    showBorder: false,
-    size: 'md'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { SearchBox },
-    setup() {
-      const searchText = ref('')
-      return { searchText, args }
-    },
-    template: `
-      <div style="max-width: 320px;">
-        <SearchBox v-bind="args" v-model="searchText" />
-      </div>
-    `
-  })
-}
-
-export const WithBorder: Story = {
-  ...Default,
-  args: {
-    showBorder: true
-  }
-}
-
-export const NoBorder: Story = {
-  ...Default,
-  args: {
-    showBorder: false
-  }
-}
-
-export const MediumSize: Story = {
-  ...Default,
-  args: {
-    size: 'md',
-    showBorder: false
-  }
-}
-
-export const LargeSize: Story = {
-  ...Default,
-  args: {
-    size: 'lg',
-    showBorder: false
-  }
-}
-
-export const LargeSizeWithBorder: Story = {
-  ...Default,
-  args: {
-    size: 'lg',
-    showBorder: true
-  }
-}

src/components/common/SearchBox.test.ts

@@ -1,193 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      templateWidgets: {
-        sort: {
-          searchPlaceholder: 'Search...'
-        }
-      }
-    }
-  }
-})
-
-describe('SearchBox', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  const createWrapper = (props = {}) => {
-    return mount(SearchBox, {
-      props: {
-        modelValue: '',
-        ...props
-      },
-      global: {
-        plugins: [i18n]
-      }
-    })
-  }
-
-  describe('debounced search functionality', () => {
-    it('should debounce search input by 300ms', async () => {
-      const wrapper = createWrapper()
-      const input = wrapper.find('input')
-
-      // Type search query
-      await input.setValue('test')
-
-      // Model should not update immediately
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      // Advance timers by 299ms (just before debounce delay)
-      await vi.advanceTimersByTimeAsync(299)
-      await nextTick()
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      // Advance timers by 1ms more (reaching 300ms)
-      await vi.advanceTimersByTimeAsync(1)
-      await nextTick()
-
-      // Model should now be updated
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test'])
-    })
-
-    it('should reset debounce timer on each keystroke', async () => {
-      const wrapper = createWrapper()
-      const input = wrapper.find('input')
-
-      // Type first character
-      await input.setValue('t')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      // Type second character (should reset timer)
-      await input.setValue('te')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      // Type third character (should reset timer again)
-      await input.setValue('tes')
-      await vi.advanceTimersByTimeAsync(200)
-      await nextTick()
-
-      // Should not have emitted yet (only 200ms passed since last keystroke)
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      // Advance final 100ms to reach 300ms
-      await vi.advanceTimersByTimeAsync(100)
-      await nextTick()
-
-      // Should now emit with final value
-      expect(wrapper.emitted('search')).toBeTruthy()
-      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
-    })
-
-    it('should only emit final value after rapid typing', async () => {
-      const wrapper = createWrapper()
-      const input = wrapper.find('input')
-
-      // Simulate rapid typing
-      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
-      for (const term of searchTerms) {
-        await input.setValue(term)
-        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
-      }
-      await nextTick()
-
-      // Should not have emitted yet
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      // Complete the debounce delay
-      await vi.advanceTimersByTimeAsync(350)
-      await nextTick()
-
-      // Should emit only once with final value
-      expect(wrapper.emitted('search')).toHaveLength(1)
-      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
-    })
-
-    describe('bidirectional model sync', () => {
-      it('should sync external model changes to internal state', async () => {
-        const wrapper = createWrapper({ modelValue: 'initial' })
-        const input = wrapper.find('input')
-
-        expect(input.element.value).toBe('initial')
-
-        // Update model externally
-        await wrapper.setProps({ modelValue: 'external update' })
-        await nextTick()
-
-        // Internal state should sync
-        expect(input.element.value).toBe('external update')
-      })
-    })
-
-    describe('placeholder', () => {
-      it('should use custom placeholder when provided', () => {
-        const wrapper = createWrapper({ placeholder: 'Custom search...' })
-        const input = wrapper.find('input')
-
-        expect(input.attributes('placeholder')).toBe('Custom search...')
-        expect(input.attributes('aria-label')).toBe('Custom search...')
-      })
-
-      it('should use default placeholder when not provided', () => {
-        const wrapper = createWrapper()
-        const input = wrapper.find('input')
-
-        expect(input.attributes('placeholder')).toBe('Search...')
-        expect(input.attributes('aria-label')).toBe('Search...')
-      })
-    })
-
-    describe('autofocus', () => {
-      it('should focus input when autofocus is true', async () => {
-        const wrapper = createWrapper({ autofocus: true })
-        await nextTick()
-
-        const input = wrapper.find('input')
-        const inputElement = input.element as HTMLInputElement
-
-        // Note: In JSDOM, focus() doesn't actually set document.activeElement
-        // We can only verify that the focus method exists and doesn't throw
-        expect(inputElement.focus).toBeDefined()
-      })
-
-      it('should not autofocus when autofocus is false', () => {
-        const wrapper = createWrapper({ autofocus: false })
-        const input = wrapper.find('input')
-
-        expect(document.activeElement).not.toBe(input.element)
-      })
-    })
-
-    describe('click to focus', () => {
-      it('should focus input when wrapper is clicked', async () => {
-        const wrapper = createWrapper()
-        const wrapperDiv = wrapper.find('[class*="flex"]')
-
-        await wrapperDiv.trigger('click')
-        await nextTick()
-
-        // Input should receive focus
-        const input = wrapper.find('input').element as HTMLInputElement
-        expect(input.focus).toBeDefined()
-      })
-    })
-  })
-})

src/components/common/SearchBox.vue

@@ -1,139 +0,0 @@
-<template>
-  <div
-    :class="
-      cn(
-        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
-        customClass,
-        wrapperStyle
-      )
-    "
-  >
-    <InputText
-      ref="inputRef"
-      v-model="modelValue"
-      :placeholder
-      :autofocus
-      unstyled
-      :class="
-        cn(
-          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
-          isLarge ? 'pl-11' : 'pl-8'
-        )
-      "
-      :aria-label="placeholder"
-    />
-    <Button
-      v-if="filterIcon"
-      size="icon"
-      variant="textonly"
-      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
-      @click="$emit('showFilter', $event)"
-    >
-      <i :class="filterIcon" />
-    </Button>
-    <InputIcon v-if="!modelValue" :class="icon" />
-    <Button
-      v-if="modelValue"
-      :class="cn('clear-button absolute', isLarge ? 'left-2' : 'left-0')"
-      variant="textonly"
-      size="icon"
-      @click="modelValue = ''"
-    >
-      <i class="icon-[lucide--x] size-4" />
-    </Button>
-  </div>
-  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
-    <SearchFilterChip
-      v-for="filter in filters"
-      :key="filter.id"
-      :text="filter.text"
-      :badge="filter.badge"
-      :badge-class="filter.badgeClass"
-      @remove="$emit('removeFilter', filter)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts" generic="TFilter extends SearchFilter">
-import { cn } from '@comfyorg/tailwind-utils'
-import { watchDebounced } from '@vueuse/core'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { computed, ref } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-
-import type { SearchFilter } from './SearchFilterChip.vue'
-import SearchFilterChip from './SearchFilterChip.vue'
-
-const {
-  placeholder = 'Search...',
-  icon = 'pi pi-search',
-  debounceTime = 300,
-  filterIcon,
-  filters = [],
-  autofocus = false,
-  showBorder = false,
-  size = 'md',
-  class: customClass
-} = defineProps<{
-  placeholder?: string
-  icon?: string
-  debounceTime?: number
-  filterIcon?: string
-  filters?: TFilter[]
-  autofocus?: boolean
-  showBorder?: boolean
-  size?: 'md' | 'lg'
-  class?: string
-}>()
-
-const isLarge = computed(() => size === 'lg')
-
-const emit = defineEmits<{
-  (e: 'search', value: string, filters: TFilter[]): void
-  (e: 'showFilter', event: Event): void
-  (e: 'removeFilter', filter: TFilter): void
-}>()
-
-const modelValue = defineModel<string>({ required: true })
-
-const inputRef = ref()
-
-defineExpose({
-  focus: () => {
-    inputRef.value?.$el?.focus()
-  }
-})
-
-watchDebounced(
-  modelValue,
-  (value: string) => {
-    emit('search', value, filters)
-  },
-  { debounce: debounceTime }
-)
-
-const wrapperStyle = computed(() => {
-  if (showBorder) {
-    return cn(
-      'box-border rounded-sm border border-solid border-border-default p-2',
-      isLarge.value ? 'h-10' : 'h-8'
-    )
-  }
-
-  // Size-specific classes matching button sizes for consistency
-  const sizeClasses = {
-    md: 'h-8 px-2 py-1.5', // Matches button sm size
-    lg: 'h-10 px-4 py-2' // Matches button md size
-  }[size]
-
-  return cn('rounded-lg', sizeClasses)
-})
-</script>
-
-<style scoped>
-:deep(.p-inputtext) {
-  --p-form-field-padding-x: 0.625rem;
-}
-</style>

src/components/common/SearchBoxV2.test.ts

@@ -1,90 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import SearchBoxV2 from './SearchBoxV2.vue'
-
-vi.mock('@vueuse/core', () => ({
-  watchDebounced: vi.fn(() => vi.fn())
-}))
-
-describe('SearchBoxV2', () => {
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        g: {
-          clear: 'Clear',
-          searchPlaceholder: 'Search...'
-        }
-      }
-    }
-  })
-
-  function mountComponent(props = {}) {
-    return mount(SearchBoxV2, {
-      global: {
-        plugins: [i18n],
-        stubs: {
-          ComboboxRoot: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxAnchor: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxInput: {
-            template:
-              '<input :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ['placeholder', 'modelValue', 'autoFocus']
-          }
-        }
-      },
-      props: {
-        modelValue: '',
-        ...props
-      }
-    })
-  }
-
-  it('uses i18n placeholder when no placeholder prop provided', () => {
-    const wrapper = mountComponent()
-    const input = wrapper.find('input')
-    expect(input.attributes('placeholder')).toBe('Search...')
-  })
-
-  it('uses custom placeholder when provided', () => {
-    const wrapper = mountComponent({
-      placeholder: 'Custom placeholder'
-    })
-    const input = wrapper.find('input')
-    expect(input.attributes('placeholder')).toBe('Custom placeholder')
-  })
-
-  it('shows search icon when search term is empty', () => {
-    const wrapper = mountComponent({ modelValue: '' })
-    expect(wrapper.find('i.icon-\\[lucide--search\\]').exists()).toBe(true)
-  })
-
-  it('shows clear button when search term is not empty', () => {
-    const wrapper = mountComponent({ modelValue: 'test' })
-    expect(wrapper.find('button').exists()).toBe(true)
-  })
-
-  it('clears search term when clear button is clicked', async () => {
-    const wrapper = mountComponent({ modelValue: 'test' })
-    const clearButton = wrapper.find('button')
-    await clearButton.trigger('click')
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
-  })
-
-  it('applies large size classes when size is lg', () => {
-    const wrapper = mountComponent({ size: 'lg' })
-    expect(wrapper.html()).toContain('size-5')
-  })
-
-  it('applies medium size classes when size is md', () => {
-    const wrapper = mountComponent({ size: 'md' })
-    expect(wrapper.html()).toContain('size-4')
-  })
-})

src/components/common/SearchBoxV2.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="flex flex-auto flex-col gap-2">
-    <ComboboxRoot :ignore-filter="true" :open="false">
-      <ComboboxAnchor
-        :class="
-          cn(
-            'relative flex w-full cursor-text items-center',
-            'rounded-lg bg-comfy-input text-comfy-input-foreground',
-            showBorder &&
-              'box-border border border-solid border-border-default',
-            sizeClasses,
-            className
-          )
-        "
-      >
-        <i
-          v-if="!searchTerm"
-          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
-        />
-        <Button
-          v-else
-          class="absolute left-2"
-          variant="textonly"
-          size="icon"
-          :aria-label="$t('g.clear')"
-          @click="clearSearch"
-        >
-          <i class="icon-[lucide--x] size-4" />
-        </Button>
-
-        <ComboboxInput
-          ref="inputRef"
-          v-model="searchTerm"
-          :class="
-            cn(
-              'size-full border-none bg-transparent text-sm outline-none',
-              inputPadding
-            )
-          "
-          :placeholder="placeholderText"
-          :auto-focus="autofocus"
-        />
-      </ComboboxAnchor>
-    </ComboboxRoot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
-import { watchDebounced } from '@vueuse/core'
-import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-const { t } = useI18n()
-
-const {
-  placeholder,
-  icon = 'icon-[lucide--search]',
-  debounceTime = 300,
-  autofocus = false,
-  showBorder = false,
-  size = 'md',
-  class: className
-} = defineProps<{
-  placeholder?: string
-  icon?: string
-  debounceTime?: number
-  autofocus?: boolean
-  showBorder?: boolean
-  size?: 'md' | 'lg'
-  class?: string
-}>()
-
-const emit = defineEmits<{
-  search: [value: string]
-}>()
-
-const searchTerm = defineModel<string>({ required: true })
-
-const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
-
-defineExpose({
-  focus: () => {
-    inputRef.value?.$el?.focus()
-  }
-})
-
-const isLarge = computed(() => size === 'lg')
-const placeholderText = computed(
-  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
-)
-
-const sizeClasses = computed(() => {
-  if (showBorder) {
-    return isLarge.value ? 'h-10 p-2' : 'h-8 p-2'
-  }
-  return isLarge.value ? 'h-12 px-4 py-2' : 'h-10 px-4 py-2'
-})
-
-const iconClass = computed(() => (isLarge.value ? 'size-5' : 'size-4'))
-const inputPadding = computed(() => (isLarge.value ? 'pl-8' : 'pl-6'))
-
-function clearSearch() {
-  searchTerm.value = ''
-}
-
-watchDebounced(
-  searchTerm,
-  (value: string) => {
-    emit('search', value)
-  },
-  { debounce: debounceTime }
-)
-</script>

src/components/common/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <Avatar
-    class="bg-interface-panel-selected-surface"
+    class="aspect-square bg-interface-panel-selected-surface"
     :image="photoUrl ?? undefined"
     :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
     :pt:icon:class="{ 'size-4': !hasAvatar }"

src/components/common/VirtualGrid.test.ts

@@ -155,6 +155,93 @@ describe('VirtualGrid', () => {
     wrapper.unmount()
   })
 
+  it('emits approach-end for single-column list when scrolled near bottom', async () => {
+    const items = createItems(50)
+    mockedWidth.value = 400
+    mockedHeight.value = 600
+    mockedScrollY.value = 0
+
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: {
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr)'
+        },
+        defaultItemHeight: 48,
+        defaultItemWidth: 200,
+        maxColumns: 1,
+        bufferRows: 1
+      },
+      slots: {
+        item: `<template #item="{ item }">
+          <div class="test-item">{{ item.name }}</div>
+        </template>`
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    expect(wrapper.emitted('approach-end')).toBeUndefined()
+
+    // Scroll near the end: 50 items * 48px = 2400px total
+    // viewRows = ceil(600/48) = 13, buffer = 1
+    // Need toCol >= items.length - cols*bufferRows = 50 - 1 = 49
+    // toCol = (offsetRows + bufferRows + viewRows) * cols
+    // offsetRows = floor(scrollY / 48)
+    // Need (offsetRows + 1 + 13) * 1 >= 49 → offsetRows >= 35
+    // scrollY = 35 * 48 = 1680
+    mockedScrollY.value = 1680
+    await nextTick()
+
+    expect(wrapper.emitted('approach-end')).toBeDefined()
+
+    wrapper.unmount()
+  })
+
+  it('does not emit approach-end without maxColumns in single-column layout', async () => {
+    // Demonstrates the bug: without maxColumns=1, cols is calculated
+    // from width/itemWidth (400/200 = 2), causing incorrect row math
+    const items = createItems(50)
+    mockedWidth.value = 400
+    mockedHeight.value = 600
+    mockedScrollY.value = 0
+
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: {
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr)'
+        },
+        defaultItemHeight: 48,
+        defaultItemWidth: 200,
+        // No maxColumns — cols will be floor(400/200) = 2
+        bufferRows: 1
+      },
+      slots: {
+        item: `<template #item="{ item }">
+          <div class="test-item">{{ item.name }}</div>
+        </template>`
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    // Same scroll position as the passing test
+    mockedScrollY.value = 1680
+    await nextTick()
+
+    // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
+    // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
+    // The approach-end never fires at the correct scroll position
+    expect(wrapper.emitted('approach-end')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
   it('forces cols to maxColumns when maxColumns is finite', async () => {
     mockedWidth.value = 100
     mockedHeight.value = 200

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -14,10 +14,10 @@
     </template>
 
     <template #header>
-      <SearchBox
+      <SearchInput
         v-model="searchQuery"
         size="lg"
-        class="max-w-[384px]"
+        class="max-w-96 flex-1"
         autofocus
       />
     </template>
@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="tall"
+            size="compact"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,20 +318,6 @@
                       </Button>
                     </div>
                   </div>
-                  <div class="flex">
-                    <span
-                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
-                    >
-                      <template v-if="isAppTemplate(template)">
-                        <i class="icon-[lucide--panels-top-left]" />
-                        {{ $t('builderToolbar.app', 'App') }}
-                      </template>
-                      <template v-else>
-                        <i class="icon-[lucide--workflow]" />
-                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
-                      </template>
-                    </span>
-                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -403,7 +389,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
@@ -497,8 +483,6 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
-const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
-
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

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

@@ -1,6 +1,6 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchBox
+    <SearchInput
       v-model="filters['global'].value"
       :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
     />
@@ -155,7 +155,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { KeybindingImpl } from '@/platform/keybindings/keybinding'

src/components/graph/GraphCanvas.vue

@@ -535,7 +535,7 @@ onMounted(async () => {
 
   // Restore saved workflow and workflow tabs state
   await workflowPersistence.initializeWorkflow()
-  await workflowPersistence.restoreWorkflowTabsState()
+  workflowPersistence.restoreWorkflowTabsState()
 
   const sharedWorkflowLoadStatus =
     await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()

src/components/helpcenter/HelpCenterPopups.vue

@@ -5,11 +5,8 @@
       v-if="isHelpCenterVisible"
       class="help-center-popup"
       :class="{
-        'sidebar-left':
-          triggerLocation === 'sidebar' && sidebarLocation === 'left',
-        'sidebar-right':
-          triggerLocation === 'sidebar' && sidebarLocation === 'right',
-        'topbar-right': triggerLocation === 'topbar',
+        'sidebar-left': sidebarLocation === 'left',
+        'sidebar-right': sidebarLocation === 'right',
         'small-sidebar': isSmall
       }"
     >
@@ -63,7 +60,6 @@ const { isSmall = false } = defineProps<{
 
 const {
   isHelpCenterVisible,
-  triggerLocation,
   sidebarLocation,
   closeHelpCenter,
   handleWhatsNewDismissed
@@ -101,25 +97,6 @@ const {
   right: 1rem;
 }
 
-.help-center-popup.topbar-right {
-  top: 2rem;
-  right: 1rem;
-  bottom: auto;
-  animation: slideInDown 0.2s ease-out;
-}
-
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes slideInUp {
   from {
     opacity: 0;

src/components/input/MultiSelect.stories.ts

@@ -1,73 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
 import type { SelectOption } from './types'
 
-// Combine our component props with PrimeVue MultiSelect props
-// Since we use v-bind="$attrs", all PrimeVue props are available
-interface ExtendedProps extends Partial<MultiSelectProps> {
-  // Our custom props
-  label?: string
-  showSearchBox?: boolean
-  showSelectedCount?: boolean
-  showClearButton?: boolean
-  searchPlaceholder?: string
-  listMaxHeight?: string
-  popoverMinWidth?: string
-  popoverMaxWidth?: string
-  // Override modelValue type to match our Option type
-  modelValue?: SelectOption[]
-}
-
-const meta: Meta<ExtendedProps> = {
-  title: 'Components/Input/MultiSelect',
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Select/MultiSelect',
   component: MultiSelect,
   tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ],
   argTypes: {
-    label: {
-      control: 'text'
+    label: { control: 'text' },
+    size: {
+      control: { type: 'select' },
+      options: ['lg', 'md']
     },
-    options: {
-      control: 'object'
-    },
-    showSearchBox: {
-      control: 'boolean',
-      description: 'Toggle searchBar visibility'
-    },
-    showSelectedCount: {
-      control: 'boolean',
-      description: 'Toggle selected count visibility'
-    },
-    showClearButton: {
-      control: 'boolean',
-      description: 'Toggle clear button visibility'
-    },
-    searchPlaceholder: {
-      control: 'text'
-    },
-    listMaxHeight: {
-      control: 'text',
-      description: 'Maximum height of the dropdown list'
-    },
-    popoverMinWidth: {
-      control: 'text',
-      description: 'Minimum width of the popover'
-    },
-    popoverMaxWidth: {
-      control: 'text',
-      description: 'Maximum width of the popover'
-    }
+    showSearchBox: { control: 'boolean' },
+    showSelectedCount: { control: 'boolean' },
+    showClearButton: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' }
   },
   args: {
-    label: 'Select',
-    options: [
-      { name: 'Vue', value: 'vue' },
-      { name: 'React', value: 'react' },
-      { name: 'Angular', value: 'angular' },
-      { name: 'Svelte', value: 'svelte' }
-    ],
+    label: 'Category',
+    size: 'lg',
     showSearchBox: false,
     showSelectedCount: false,
     showClearButton: false,
@@ -78,352 +38,125 @@ const meta: Meta<ExtendedProps> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const sampleOptions: SelectOption[] = [
+  { name: 'Vue', value: 'vue' },
+  { name: 'React', value: 'react' },
+  { name: 'Angular', value: 'angular' },
+  { name: 'Svelte', value: 'svelte' }
+]
+
 export const Default: Story = {
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const selected = ref([])
-      const options = args.options || [
-        { name: 'Vue', value: 'vue' },
-        { name: 'React', value: 'react' },
-        { name: 'Angular', value: 'angular' },
-        { name: 'Svelte', value: 'svelte' }
-      ]
-      return { selected, options, args }
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
     },
-    template: `
-      <div>
-        <MultiSelect 
-          v-model="selected" 
-          :options="options"
-          :label="args.label"
-          :showSearchBox="args.showSearchBox"
-          :showSelectedCount="args.showSelectedCount"
-          :showClearButton="args.showClearButton"
-          :searchPlaceholder="args.searchPlaceholder"
-        />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" :label="args.label" :size="args.size" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
   })
 }
 
-export const WithPreselectedValues: Story = {
-  render: (args) => ({
+export const MediumSize: Story = {
+  render: () => ({
     components: { MultiSelect },
     setup() {
-      const options = args.options || [
-        { name: 'JavaScript', value: 'js' },
-        { name: 'TypeScript', value: 'ts' },
-        { name: 'Python', value: 'python' },
-        { name: 'Go', value: 'go' },
-        { name: 'Rust', value: 'rust' }
-      ]
-      const selected = ref([options[0], options[1]])
-      return { selected, options, args }
+      const selected = ref<SelectOption[]>([sampleOptions[0]])
+      return { selected, sampleOptions }
     },
-    template: `
-      <div>
-        <MultiSelect 
-          v-model="selected" 
-          :options="options"
-          :label="args.label"
-          :showSearchBox="args.showSearchBox"
-          :showSelectedCount="args.showSelectedCount"
-          :showClearButton="args.showClearButton"
-          :searchPlaceholder="args.searchPlaceholder"
-        />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
   }),
-  args: {
-    label: 'Select Languages',
-    options: [
-      { name: 'JavaScript', value: 'js' },
-      { name: 'TypeScript', value: 'ts' },
-      { name: 'Python', value: 'python' },
-      { name: 'Go', value: 'go' },
-      { name: 'Rust', value: 'rust' }
-    ],
-    showSearchBox: false,
-    showSelectedCount: false,
-    showClearButton: false,
-    searchPlaceholder: 'Search...'
-  }
+  parameters: { controls: { disable: true } }
 }
 
-export const MultipleSelectors: Story = {
+export const WithPreselectedValues: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([sampleOptions[0], sampleOptions[1]])
+      return { selected, sampleOptions }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([sampleOptions[0]])
+      return { selected, sampleOptions }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const WithSearchBox: Story = {
+  args: { showSearchBox: true },
   render: (args) => ({
     components: { MultiSelect },
     setup() {
-      const frameworkOptions = ref([
-        { name: 'Vue', value: 'vue' },
-        { name: 'React', value: 'react' },
-        { name: 'Angular', value: 'angular' },
-        { name: 'Svelte', value: 'svelte' }
-      ])
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" />'
+  })
+}
 
-      const projectOptions = ref([
-        { name: 'Project A', value: 'proj-a' },
-        { name: 'Project B', value: 'proj-b' },
-        { name: 'Project C', value: 'proj-c' },
-        { name: 'Project D', value: 'proj-d' }
-      ])
+export const AllHeaderFeatures: Story = {
+  args: {
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  },
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([])
+      return { selected, sampleOptions, args }
+    },
+    template:
+      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" :show-selected-count="args.showSelectedCount" :show-clear-button="args.showClearButton" />'
+  })
+}
 
-      const tagOptions = ref([
-        { name: 'Frontend', value: 'frontend' },
-        { name: 'Backend', value: 'backend' },
-        { name: 'Database', value: 'database' },
-        { name: 'DevOps', value: 'devops' },
-        { name: 'Testing', value: 'testing' }
-      ])
-
-      const selectedFrameworks = ref([])
-      const selectedProjects = ref([])
-      const selectedTags = ref([])
-
-      return {
-        frameworkOptions,
-        projectOptions,
-        tagOptions,
-        selectedFrameworks,
-        selectedProjects,
-        selectedTags,
-        args
-      }
+export const AllStates: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const a = ref<SelectOption[]>([])
+      const b = ref<SelectOption[]>([sampleOptions[0]])
+      const c = ref<SelectOption[]>([sampleOptions[0]])
+      return { sampleOptions, a, b, c }
     },
     template: `
-      <div class="space-y-4">
-        <div class="flex gap-2">
-          <MultiSelect 
-            v-model="selectedFrameworks" 
-            :options="frameworkOptions"
-            label="Select Frameworks"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
-          <MultiSelect 
-            v-model="selectedProjects" 
-            :options="projectOptions"
-            label="Select Projects"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
-          <MultiSelect 
-            v-model="selectedTags" 
-            :options="tagOptions"
-            label="Select Tags"
-            :showSearchBox="args.showSearchBox"
-            :showSelectedCount="args.showSelectedCount"
-            :showClearButton="args.showClearButton"
-            :searchPlaceholder="args.searchPlaceholder"
-          />
+      <div class="flex flex-col gap-6">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
+          <div class="flex flex-col gap-3">
+            <MultiSelect v-model="a" :options="sampleOptions" label="Default" />
+            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" />
+            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" disabled />
+          </div>
         </div>
-        
-        <div class="p-4 bg-base-background rounded">
-          <h4 class="font-medium mt-0">Current Selection:</h4>
-          <div class="flex flex-col text-sm">
-            <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
-            <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
-            <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
+          <div class="flex flex-col gap-3">
+            <MultiSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
+            <MultiSelect v-model="b" :options="sampleOptions" label="With Selection" size="md" />
+            <MultiSelect v-model="c" :options="sampleOptions" label="Disabled" size="md" disabled />
           </div>
         </div>
       </div>
     `
   }),
-  args: {
-    showSearchBox: false,
-    showSelectedCount: false,
-    showClearButton: false,
-    searchPlaceholder: 'Search...'
-  }
-}
-
-export const WithSearchBox: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true
-  }
-}
-
-export const WithSelectedCount: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSelectedCount: true
-  }
-}
-
-export const WithClearButton: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showClearButton: true
-  }
-}
-
-export const AllHeaderFeatures: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true,
-    showSelectedCount: true,
-    showClearButton: true
-  }
-}
-
-export const CustomSearchPlaceholder: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showSearchBox: true,
-    searchPlaceholder: 'Filter packages...'
-  }
-}
-
-export const CustomMaxHeight: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
-        name: `Option ${i + 1}`,
-        value: `option${i + 1}`
-      }))
-      return { selected1, selected2, selected3, manyOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
-          <MultiSelect 
-            v-model="selected1" 
-            :options="manyOptions" 
-            label="Small Dropdown" 
-            list-max-height="10rem"
-            show-selected-count 
-          />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
-          <MultiSelect 
-            v-model="selected2" 
-            :options="manyOptions" 
-            label="Default Dropdown"
-            list-max-height="28rem"
-            show-selected-count 
-          />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
-          <MultiSelect 
-            v-model="selected3" 
-            :options="manyOptions" 
-            label="Large Dropdown" 
-            list-max-height="32rem"
-            show-selected-count 
-          />
-        </div>
-      </div>
-    `
-  }),
   parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMinWidth: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const options = [
-        { name: 'A', value: 'a' },
-        { name: 'B', value: 'b' },
-        { name: 'Very Long Option Name Here', value: 'long' }
-      ]
-      return { selected1, selected2, selected3, options }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <MultiSelect v-model="selected1" :options="options" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 18rem</h3>
-          <MultiSelect v-model="selected2" :options="options" label="Min 18rem" popover-min-width="18rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 28rem</h3>
-          <MultiSelect v-model="selected3" :options="options" label="Min 28rem" popover-min-width="28rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxWidth: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected1 = ref([])
-      const selected2 = ref([])
-      const selected3 = ref([])
-      const longOptions = [
-        { name: 'Short', value: 'short' },
-        {
-          name: 'This is a very long option name that would normally expand the dropdown',
-          value: 'long1'
-        },
-        {
-          name: 'Another extremely long option that demonstrates max-width constraint',
-          value: 'long2'
-        }
-      ]
-      return { selected1, selected2, selected3, longOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <MultiSelect v-model="selected1" :options="longOptions" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Max Width 18rem</h3>
-          <MultiSelect v-model="selected2" :options="longOptions" label="Max 18rem" popover-max-width="18rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min 12rem Max 22rem</h3>
-          <MultiSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="12rem" popover-max-width="22rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
+    controls: { disable: true }
   }
 }

src/components/input/MultiSelect.vue

@@ -1,189 +1,173 @@
 <template>
-  <!--
-    Note: Unlike SingleSelect, we don't need an explicit options prop because:
-    1. Our value template only shows a static label (not dynamic based on selection)
-    2. We display a count badge instead of actual selected labels
-    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    option-label="name" is required because our option template directly accesses option.name
-    max-selected-labels="0" is required to show count badge instead of selected item labels
-  -->
-  <MultiSelect
-    v-model="selectedItems"
-    v-bind="{ ...$attrs, options: filteredOptions }"
-    option-label="name"
-    unstyled
-    :max-selected-labels="0"
-    :pt="{
-      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'relative inline-flex h-10 cursor-pointer select-none',
+  <PopoverRoot v-model:open="isOpen">
+    <PopoverTrigger
+      :disabled
+      :class="
+        cn(
+          'relative inline-flex cursor-pointer items-center select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
-          'border-[2.5px] border-solid',
-          selectedCount > 0
-            ? 'border-node-component-border'
-            : 'border-transparent',
-          'focus-within:border-node-component-border',
-          { 'cursor-default opacity-60': props.disabled }
-        )
-      }),
-      labelContainer: {
-        class:
-          'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
-      },
-      label: {
-        class: 'p-0'
-      },
-      dropdown: {
-        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-      },
-      header: () => ({
-        class:
-          showSearchBox || showSelectedCount || showClearButton
-            ? 'block'
-            : 'hidden'
-      }),
-      // Overlay & list visuals unchanged
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background',
-          'text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      // Option row hover and focus tone
-      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
           'hover:bg-secondary-background-hover',
-          // Add focus/highlight state for keyboard navigation
-          context?.focused &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+          'border-[2.5px] border-solid',
+          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
+          'focus:border-base-foreground',
+          disabled && 'cursor-default opacity-30 hover:bg-secondary-background'
         )
-      }),
-      // Hide built-in checkboxes entirely via PT (no :deep)
-      pcHeaderCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      pcOptionCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      emptyMessage: {
-        class: 'px-3 pb-4 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.multiSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <template
-      v-if="showSearchBox || showSelectedCount || showClearButton"
-      #header
+      "
+      :aria-label="label || t('g.multiSelectDropdown')"
+      role="combobox"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
     >
-      <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchBox
-          v-if="showSearchBox"
-          v-model="searchQuery"
-          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :show-order="true"
-          :show-border="true"
-          :place-holder="searchPlaceholder"
-        />
-        <div
-          v-if="showSelectedCount || showClearButton"
-          class="mt-2 flex items-center justify-between"
-        >
-          <span
-            v-if="showSelectedCount"
-            class="px-1 text-sm text-base-foreground"
-          >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
-          </span>
-          <Button
-            v-if="showClearButton"
-            variant="textonly"
-            size="md"
-            @click.stop="selectedItems = []"
-          >
-            {{ $t('g.clearAll') }}
-          </Button>
-        </div>
-        <div class="my-4 h-px bg-border-default"></div>
-      </div>
-    </template>
-
-    <!-- Trigger value (keep text scale identical) -->
-    <template #value>
-      <span class="text-sm">
-        {{ label }}
-      </span>
-      <span
-        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
-      >
-        {{ selectedCount }}
-      </span>
-    </template>
-
-    <!-- Chevron size identical to current -->
-    <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-    </template>
-
-    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-    <template #option="slotProps">
       <div
-        role="button"
-        class="flex cursor-pointer items-center gap-2"
-        :style="popoverStyle"
+        :class="
+          cn(
+            'flex flex-1 items-center whitespace-nowrap',
+            size === 'md' ? 'pl-3' : 'pl-4'
+          )
+        "
       >
-        <div
-          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
-          :class="
-            slotProps.selected
-              ? 'bg-primary-background'
-              : 'bg-secondary-background'
-          "
+        <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+          {{ label }}
+        </span>
+        <span
+          v-if="selectedCount > 0"
+          class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
         >
-          <i
-            v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
-          />
-        </div>
-        <span>
-          {{ slotProps.option.name }}
+          {{ selectedCount }}
         </span>
       </div>
-    </template>
-  </MultiSelect>
+      <span
+        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
+      >
+        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+      </span>
+    </PopoverTrigger>
+
+    <PopoverPortal>
+      <PopoverContent
+        side="bottom"
+        :side-offset="8"
+        :collision-padding="10"
+        :style="popoverStyle"
+        :class="
+          cn(
+            'z-3000 rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+      >
+        <div
+          v-if="showSearchBox || showSelectedCount || showClearButton"
+          class="flex flex-col px-2 pt-2 pb-0"
+        >
+          <SearchInput
+            v-if="showSearchBox"
+            v-model="searchQuery"
+            :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
+            :placeholder="searchPlaceholder"
+            size="sm"
+          />
+          <div
+            v-if="showSelectedCount || showClearButton"
+            class="mt-2 flex items-center justify-between"
+          >
+            <span
+              v-if="showSelectedCount"
+              class="px-1 text-sm text-base-foreground"
+            >
+              {{
+                selectedCount > 0
+                  ? $t('g.itemsSelected', { selectedCount })
+                  : $t('g.itemSelected', { selectedCount })
+              }}
+            </span>
+            <Button
+              v-if="showClearButton"
+              variant="textonly"
+              size="md"
+              @click.stop="selectedItems = []"
+            >
+              {{ $t('g.clearAll') }}
+            </Button>
+          </div>
+          <div class="my-4 h-px bg-border-default"></div>
+        </div>
+
+        <ListboxRoot
+          v-model="selectedItems"
+          multiple
+          selection-behavior="toggle"
+          by="value"
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+          class="flex scrollbar-custom flex-col gap-0 overflow-auto"
+        >
+          <ListboxContent>
+            <ListboxItem
+              v-for="option in filteredOptions"
+              :key="option.value"
+              :value="option"
+              :class="
+                cn(
+                  'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2 text-sm outline-none',
+                  'hover:bg-secondary-background-hover',
+                  'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
+                )
+              "
+            >
+              <div
+                class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
+                :class="
+                  isSelected(option)
+                    ? 'bg-primary-background'
+                    : 'bg-secondary-background'
+                "
+              >
+                <i
+                  v-if="isSelected(option)"
+                  class="text-bold icon-[lucide--check] text-xs text-base-foreground"
+                />
+              </div>
+              <span>{{ option.name }}</span>
+            </ListboxItem>
+          </ListboxContent>
+        </ListboxRoot>
+
+        <p
+          v-if="filteredOptions.length === 0"
+          class="px-3 pb-4 text-sm text-muted-foreground"
+        >
+          {{ $t('g.noResults') }}
+        </p>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>
 
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
-import MultiSelect from 'primevue/multiselect'
-import { computed, useAttrs } from 'vue'
+import {
+  ListboxContent,
+  ListboxItem,
+  ListboxRoot,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -191,13 +175,27 @@ import type { SelectOption } from './types'
 
 type Option = SelectOption
 
-defineOptions({
-  inheritAttrs: false
-})
-
-interface Props {
+const {
+  label,
+  options = [],
+  size = 'lg',
+  disabled = false,
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder = 'Search...',
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<{
   /** Input label shown on the trigger button */
   label?: string
+  /** Available options */
+  options?: Option[]
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
+  /** Disable the select */
+  disabled?: boolean
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -212,25 +210,14 @@ interface Props {
   popoverMinWidth?: string
   /** Maximum width of the popover (default: auto) */
   popoverMaxWidth?: string
-  // Note: options prop is intentionally omitted.
-  // It's passed via $attrs to maximize PrimeVue API compatibility
-}
-const {
-  label,
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder = 'Search...',
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<Props>()
+}>()
 
 const selectedItems = defineModel<Option[]>({
   required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
 
+const isOpen = ref(false)
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
 
@@ -238,10 +225,11 @@ const popoverStyle = usePopoverSizing({
   minWidth: popoverMinWidth,
   maxWidth: popoverMaxWidth
 })
-const attrs = useAttrs()
-const originalOptions = computed(() => (attrs.options as Option[]) || [])
 
-// Use VueUse's useFuse for better reactivity and performance
+function isSelected(option: Option): boolean {
+  return selectedItems.value.some((item) => item.value === option.value)
+}
+
 const fuseOptions: UseFuseOptions<Option> = {
   fuseOptions: {
     keys: ['name', 'value'],
@@ -251,20 +239,17 @@ const fuseOptions: UseFuseOptions<Option> = {
   matchAllWhenSearchEmpty: true
 }
 
-const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
+const { results } = useFuse(searchQuery, () => options, fuseOptions)
 
-// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
   if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return originalOptions.value
+    return options
   }
 
-  // results.value already contains the search results from useFuse
   const searchResults = results.value.map(
     (result: { item: Option }) => result.item
   )
 
-  // Include selected items that aren't in search results
   const selectedButNotInResults = selectedItems.value.filter(
     (item) =>
       !searchResults.some((result: Option) => result.value === item.value)

src/components/input/SelectDropdown.stories.ts

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import MultiSelect from './MultiSelect.vue'
+import SingleSelect from './SingleSelect.vue'
+import type { SelectOption } from './types'
+
+const meta: Meta = {
+  title: 'Components/Select/SelectDropdown',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const modelOptions: SelectOption[] = [
+  { name: 'ACE-Step', value: 'ace-step' },
+  { name: 'Anima', value: 'anima' },
+  { name: 'BRIA', value: 'bria' },
+  { name: 'ByteDance', value: 'bytedance' },
+  { name: 'Capybara', value: 'capybara' },
+  { name: 'Chatter Box', value: 'chatter-box' },
+  { name: 'Chroma', value: 'chroma' },
+  { name: 'ChronoEdit', value: 'chronoedit' },
+  { name: 'DWPose', value: 'dwpose' },
+  { name: 'Depth Anything v2', value: 'depth-anything-v2' },
+  { name: 'ElevenLabs', value: 'elevenlabs' },
+  { name: 'Flux', value: 'flux' },
+  { name: 'HunyuanVideo', value: 'hunyuan-video' },
+  { name: 'Stable Diffusion', value: 'stable-diffusion' },
+  { name: 'SDXL', value: 'sdxl' }
+]
+
+const useCaseOptions: SelectOption[] = [
+  { name: 'Text to Image', value: 'text-to-image' },
+  { name: 'Image to Image', value: 'image-to-image' },
+  { name: 'Inpainting', value: 'inpainting' },
+  { name: 'Upscaling', value: 'upscaling' },
+  { name: 'Video Generation', value: 'video-generation' },
+  { name: 'Audio Generation', value: 'audio-generation' },
+  { name: '3D Generation', value: '3d-generation' }
+]
+
+const sortOptions: SelectOption[] = [
+  { name: 'Default', value: 'default' },
+  { name: 'Recommended', value: 'recommended' },
+  { name: 'Popular', value: 'popular' },
+  { name: 'Newest', value: 'newest' },
+  { name: 'VRAM Usage (Low to High)', value: 'vram-low-to-high' },
+  { name: 'Model Size (Low to High)', value: 'model-size-low-to-high' },
+  { name: 'Alphabetical (A-Z)', value: 'alphabetical' }
+]
+
+export const ModelFilter: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([
+        modelOptions[1],
+        modelOptions[2],
+        modelOptions[3]
+      ])
+      return { selected, modelOptions }
+    },
+    template: `
+      <MultiSelect
+        v-model="selected"
+        :options="modelOptions"
+        :label="selected.length === 0 ? 'Models' : selected.length === 1 ? selected[0].name : selected.length + ' Models'"
+        show-search-box
+        show-selected-count
+        show-clear-button
+        class="w-[250px]"
+      >
+        <template #icon>
+          <i class="icon-[lucide--cpu]" />
+        </template>
+      </MultiSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const UseCaseFilter: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref<SelectOption[]>([])
+      return { selected, useCaseOptions }
+    },
+    template: `
+      <MultiSelect
+        v-model="selected"
+        :options="useCaseOptions"
+        :label="selected.length === 0 ? 'Use Case' : selected.length === 1 ? selected[0].name : selected.length + ' Use Cases'"
+        show-search-box
+        show-selected-count
+        show-clear-button
+      >
+        <template #icon>
+          <i class="icon-[lucide--target]" />
+        </template>
+      </MultiSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const SortDropdown: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | undefined>('default')
+      return { selected, sortOptions }
+    },
+    template: `
+      <SingleSelect
+        v-model="selected"
+        :options="sortOptions"
+        label="Sort by"
+        class="w-62.5"
+      >
+        <template #icon>
+          <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+        </template>
+      </SingleSelect>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const TemplateFilterBar: Story = {
+  render: () => ({
+    components: { MultiSelect, SingleSelect },
+    setup() {
+      const selectedModels = ref<SelectOption[]>([
+        modelOptions[1],
+        modelOptions[2],
+        modelOptions[3]
+      ])
+      const selectedUseCases = ref<SelectOption[]>([])
+      const sortBy = ref<string | undefined>('default')
+
+      const modelLabel = () => {
+        if (selectedModels.value.length === 0) return 'Models'
+        if (selectedModels.value.length === 1)
+          return selectedModels.value[0].name
+        return selectedModels.value.length + ' Models'
+      }
+      const useCaseLabel = () => {
+        if (selectedUseCases.value.length === 0) return 'Use Case'
+        if (selectedUseCases.value.length === 1)
+          return selectedUseCases.value[0].name
+        return selectedUseCases.value.length + ' Use Cases'
+      }
+
+      return {
+        selectedModels,
+        selectedUseCases,
+        sortBy,
+        modelOptions,
+        useCaseOptions,
+        sortOptions,
+        modelLabel,
+        useCaseLabel
+      }
+    },
+    template: `
+      <div class="flex flex-wrap items-center justify-between gap-2" style="min-width: 700px;">
+        <div class="flex flex-wrap gap-2">
+          <MultiSelect
+            v-model="selectedModels"
+            :options="modelOptions"
+            :label="modelLabel()"
+            show-search-box
+            show-selected-count
+            show-clear-button
+            class="w-[250px]"
+          >
+            <template #icon>
+              <i class="icon-[lucide--cpu]" />
+            </template>
+          </MultiSelect>
+
+          <MultiSelect
+            v-model="selectedUseCases"
+            :options="useCaseOptions"
+            :label="useCaseLabel()"
+            show-search-box
+            show-selected-count
+            show-clear-button
+          >
+            <template #icon>
+              <i class="icon-[lucide--target]" />
+            </template>
+          </MultiSelect>
+        </div>
+
+        <SingleSelect
+          v-model="sortBy"
+          :options="sortOptions"
+          label="Sort by"
+          class="w-62.5"
+        >
+          <template #icon>
+            <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
+          </template>
+        </SingleSelect>
+      </div>
+    `
+  }),
+  parameters: { controls: { disable: true } }
+}

src/components/input/SingleSelect.stories.ts

@@ -3,29 +3,31 @@ import { ref } from 'vue'
 
 import SingleSelect from './SingleSelect.vue'
 
-// SingleSelect already includes options prop, so no need to extend
 const meta: Meta<typeof SingleSelect> = {
-  title: 'Components/Input/SingleSelect',
+  title: 'Components/Select/SingleSelect',
   component: SingleSelect,
   tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    () => ({
+      template: '<div class="pt-4"><story /></div>'
+    })
+  ],
   argTypes: {
     label: { control: 'text' },
     options: { control: 'object' },
-    listMaxHeight: {
-      control: 'text',
-      description: 'Maximum height of the dropdown list'
+    size: {
+      control: { type: 'select' },
+      options: ['lg', 'md']
     },
-    popoverMinWidth: {
-      control: 'text',
-      description: 'Minimum width of the popover'
-    },
-    popoverMaxWidth: {
-      control: 'text',
-      description: 'Maximum width of the popover'
-    }
+    invalid: { control: 'boolean' },
+    loading: { control: 'boolean' }
   },
   args: {
-    label: 'Sorting Type',
+    label: 'Category',
+    size: 'lg',
+    invalid: false,
+    loading: false,
     options: [
       { name: 'Popular', value: 'popular' },
       { name: 'Newest', value: 'newest' },
@@ -37,7 +39,7 @@ const meta: Meta<typeof SingleSelect> = {
 }
 
 export default meta
-export type Story = StoryObj<typeof meta>
+type Story = StoryObj<typeof meta>
 
 const sampleOptions = [
   { name: 'Popular', value: 'popular' },
@@ -52,205 +54,118 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      const options = args.options || sampleOptions
-      return { selected, options, args }
+      return { selected, args }
     },
-    template: `
-      <div>
-        <SingleSelect v-model="selected" :options="options" :label="args.label" />
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
-        </div>
-      </div>
-    `
+    template:
+      '<SingleSelect v-model="selected" :options="args.options" :label="args.label" :size="args.size" :invalid="args.invalid" :loading="args.loading" />'
   })
 }
 
+export const MediumSize: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
 export const WithIcon: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>('popular')
-      const options = sampleOptions
-      return { selected, options }
+      return { selected, sampleOptions }
     },
     template: `
-      <div>
-        <SingleSelect v-model="selected" :options="options" label="Sorting Type">
-          <template #icon>
-            <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
-          </template>
-        </SingleSelect>
-        <div class="mt-4 p-3 bg-base-background rounded">
-          <p class="text-sm">Selected: {{ selected }}</p>
-        </div>
-      </div>
+      <SingleSelect v-model="selected" :options="sampleOptions" label="Sorting Type">
+        <template #icon>
+          <i class="icon-[lucide--arrow-up-down] size-3.5" />
+        </template>
+      </SingleSelect>
     `
-  })
+  }),
+  parameters: { controls: { disable: true } }
 }
 
-export const Preselected: Story = {
+export const Disabled: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
-      const selected = ref<string | null>('newest')
-      const options = sampleOptions
-      return { selected, options }
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
     },
-    template: `
-      <SingleSelect v-model="selected" :options="options" label="Sorting Type" />
-    `
-  })
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
+  }),
+  parameters: { controls: { disable: true } }
 }
 
-export const AllVariants: Story = {
+export const Invalid: Story = {
   render: () => ({
     components: { SingleSelect },
     setup() {
-      const options = sampleOptions
-      const a = ref<string | null>(null)
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" invalid />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('popular')
+      return { selected, sampleOptions }
+    },
+    template:
+      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" loading />'
+  }),
+  parameters: { controls: { disable: true } }
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const a = ref<string | null>('popular')
       const b = ref<string | null>('popular')
-      const c = ref<string | null>('az')
-      return { options, a, b, c }
+      const c = ref<string | null>('popular')
+      const d = ref<string | null>('popular')
+      const e = ref<string | null>('popular')
+      return { sampleOptions, a, b, c, d, e }
     },
     template: `
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="a" :options="options" label="No Icon" />
+      <div class="flex flex-col gap-6">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Large (Interface)</p>
+          <div class="flex flex-col gap-3">
+            <SingleSelect v-model="a" :options="sampleOptions" label="Default" />
+            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" disabled />
+            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" invalid />
+            <SingleSelect v-model="d" :options="sampleOptions" label="Loading" loading />
+          </div>
         </div>
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="b" :options="options" label="With Icon">
-            <template #icon>
-              <i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
-            </template>
-          </SingleSelect>
-        </div>
-        <div class="flex items-center gap-3">
-          <SingleSelect v-model="c" :options="options" label="Preselected (A→Z)" />
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Medium (Node)</p>
+          <div class="flex flex-col gap-3">
+            <SingleSelect v-model="a" :options="sampleOptions" label="Default" size="md" />
+            <SingleSelect v-model="b" :options="sampleOptions" label="Disabled" size="md" disabled />
+            <SingleSelect v-model="c" :options="sampleOptions" label="Invalid" size="md" invalid />
+            <SingleSelect v-model="e" :options="sampleOptions" label="Loading" size="md" loading />
+          </div>
         </div>
       </div>
     `
   }),
   parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxHeight: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>(null)
-      const manyOptions = Array.from({ length: 20 }, (_, i) => ({
-        name: `Option ${i + 1}`,
-        value: `option${i + 1}`
-      }))
-      return { selected, manyOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Small Height (10rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Small Dropdown" list-max-height="10rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Default Height (28rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Default Dropdown" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Large Height (32rem)</h3>
-          <SingleSelect v-model="selected" :options="manyOptions" label="Large Dropdown" list-max-height="32rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMinWidth: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected1 = ref<string | null>(null)
-      const selected2 = ref<string | null>(null)
-      const selected3 = ref<string | null>(null)
-      const options = [
-        { name: 'A', value: 'a' },
-        { name: 'B', value: 'b' },
-        { name: 'Very Long Option Name Here', value: 'long' }
-      ]
-      return { selected1, selected2, selected3, options }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <SingleSelect v-model="selected1" :options="options" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 15rem</h3>
-          <SingleSelect v-model="selected2" :options="options" label="Min 15rem" popover-min-width="15rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min Width 25rem</h3>
-          <SingleSelect v-model="selected3" :options="options" label="Min 25rem" popover-min-width="25rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
-  }
-}
-
-export const CustomMaxWidth: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected1 = ref<string | null>(null)
-      const selected2 = ref<string | null>(null)
-      const selected3 = ref<string | null>(null)
-      const longOptions = [
-        { name: 'Short', value: 'short' },
-        {
-          name: 'This is a very long option name that would normally expand the dropdown',
-          value: 'long1'
-        },
-        {
-          name: 'Another extremely long option that demonstrates max-width constraint',
-          value: 'long2'
-        }
-      ]
-      return { selected1, selected2, selected3, longOptions }
-    },
-    template: `
-      <div class="flex gap-4">
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Auto Width</h3>
-          <SingleSelect v-model="selected1" :options="longOptions" label="Auto" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Max Width 15rem</h3>
-          <SingleSelect v-model="selected2" :options="longOptions" label="Max 15rem" popover-max-width="15rem" />
-        </div>
-        <div>
-          <h3 class="text-sm font-semibold mb-2">Min 10rem Max 20rem</h3>
-          <SingleSelect v-model="selected3" :options="longOptions" label="Min & Max" popover-min-width="10rem" popover-max-width="20rem" />
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    slot: { disable: true }
+    controls: { disable: true }
   }
 }

src/components/input/SingleSelect.vue

@@ -1,124 +1,111 @@
 <template>
-  <!--
-    Note: We explicitly pass options here (not just via $attrs) because:
-    1. Our custom value template needs options to look up labels from values
-    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
-    3. We need to maintain the icon slot functionality in the value template
-    option-label="name" is required because our option template directly accesses option.name
-  -->
-  <Select
-    v-model="selectedItem"
-    v-bind="$attrs"
-    :options="options"
-    option-label="name"
-    option-value="value"
-    unstyled
-    :pt="{
-      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: [
-          // container
-          'h-10 relative inline-flex cursor-pointer select-none items-center',
-          // trigger surface
+  <SelectRoot v-model="selectedItem" :disabled>
+    <SelectTrigger
+      :class="
+        cn(
+          'relative inline-flex cursor-pointer items-center select-none',
+          size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
-          'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
-          'focus-within:border-node-component-border',
-          // disabled
-          { 'opacity-60 cursor-default': props.disabled }
-        ]
-      }),
-      label: {
-        class:
-          // Align with MultiSelect labelContainer spacing
-          'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
-      },
-      dropdown: {
-        class:
-          // Right chevron touch area
-          'flex shrink-0 items-center justify-center px-3 py-2'
-      },
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: `max-height: min(${listMaxHeight}, 50vh)`,
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class:
-          // Same list tone/size as MultiSelect
-          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
-          // Row layout
-          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
           'hover:bg-secondary-background-hover',
-          // Add focus state for keyboard navigation
-          context.focused && 'bg-secondary-background-hover',
-          // Selected state + check icon
-          context.selected &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
+          'border-[2.5px] border-solid',
+          invalid
+            ? 'border-destructive-background'
+            : 'border-transparent focus:border-node-component-border',
+          'focus:outline-none',
+          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
         )
-      }),
-      optionLabel: {
-        class: 'truncate'
-      },
-      optionGroupLabel: {
-        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
-      },
-      emptyMessage: {
-        class: 'px-3 py-2 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.singleSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <!-- Trigger value -->
-    <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm">
-        <slot name="icon" />
-        <span
-          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-base-foreground"
-        >
-          {{ getLabel(slotProps.value) }}
-        </span>
-        <span v-else class="text-base-foreground">
-          {{ label }}
-        </span>
-      </div>
-    </template>
-
-    <!-- Trigger caret -->
-    <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-    </template>
-
-    <!-- Option row -->
-    <template #option="{ option, selected }">
+      "
+      :aria-label="label || t('g.singleSelectDropdown')"
+      :aria-busy="loading || undefined"
+      :aria-invalid="invalid || undefined"
+    >
       <div
-        class="flex w-full items-center justify-between gap-3"
-        :style="optionStyle"
+        :class="
+          cn(
+            'flex flex-1 items-center gap-2 whitespace-nowrap',
+            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
+          )
+        "
       >
-        <span class="truncate">{{ option.name }}</span>
-        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+        <i
+          v-if="loading"
+          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+        />
+        <slot v-else name="icon" />
+        <SelectValue :placeholder="label" />
       </div>
-    </template>
-  </Select>
+      <SelectIcon v-if="!loading" as-child>
+        <i
+          class="icon-[lucide--chevron-down] shrink-0 px-3 text-muted-foreground"
+        />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :class="
+          cn(
+            'z-3000 mt-2 rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+      >
+        <SelectViewport
+          :style="viewportStyle"
+          class="flex scrollbar-custom flex-col gap-0"
+        >
+          <SelectItem
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+            :class="
+              cn(
+                'flex w-full cursor-pointer items-center justify-between gap-3 rounded-sm px-2 py-3 text-sm outline-none select-none',
+                'hover:bg-secondary-background-hover',
+                'focus:bg-secondary-background-hover',
+                'data-[state=checked]:bg-secondary-background-selected',
+                'data-[state=checked]:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <SelectItemText class="truncate">
+              {{ option.name }}
+            </SelectItemText>
+            <SelectItemIndicator>
+              <i
+                class="icon-[lucide--check] text-base-foreground"
+                aria-hidden="true"
+              />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>
 
 <script setup lang="ts">
-import type { SelectPassThroughMethodOptions } from 'primevue/select'
-import Select from 'primevue/select'
+import {
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from 'reka-ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -126,24 +113,27 @@ import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const {
   label,
   options,
+  size = 'lg',
+  invalid = false,
+  loading = false,
+  disabled = false,
   listMaxHeight = '28rem',
   popoverMinWidth,
   popoverMaxWidth
 } = defineProps<{
   label?: string
-  /**
-   * Required for displaying the selected item's label.
-   * Cannot rely on $attrs alone because we need to access options
-   * in getLabel() to map values to their display names.
-   */
   options?: SelectOption[]
+  /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
+  size?: 'lg' | 'md'
+  /** Show invalid (destructive) border */
+  invalid?: boolean
+  /** Show loading spinner instead of chevron */
+  loading?: boolean
+  /** Disable the select */
+  disabled?: boolean
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */
@@ -156,26 +146,12 @@ const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 
-/**
- * Maps a value to its display label.
- * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
- * only the raw value. We need this to show the correct text when an item is selected.
- */
-const getLabel = (val: string | null | undefined) => {
-  if (val == null) return label ?? ''
-  if (!options) return label ?? ''
-  const found = options.find((o) => o.value === val)
-  return found ? found.name : (label ?? '')
-}
-
-// Extract complex style logic from template
-const optionStyle = computed(() => {
-  if (!popoverMinWidth && !popoverMaxWidth) return undefined
-
-  const styles: string[] = []
-  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
-  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
-
-  return styles.join('; ')
+const viewportStyle = computed(() => {
+  const styles: Record<string, string> = {
+    maxHeight: `min(${listMaxHeight}, 50vh)`
+  }
+  if (popoverMinWidth) styles.minWidth = popoverMinWidth
+  if (popoverMaxWidth) styles.maxWidth = popoverMaxWidth
+  return styles
 })
 </script>

src/components/load3d/Load3dViewerContent.vue

@@ -141,7 +141,7 @@ onMounted(async () => {
   if (isStandaloneMode && props.modelUrl) {
     await viewer.initializeStandaloneViewer(containerRef.value, props.modelUrl)
   } else if (props.node) {
-    const source = useLoad3dService().getLoad3d(props.node)
+    const source = await useLoad3dService().getLoad3dAsync(props.node)
     if (source) {
       await viewer.initializeViewer(containerRef.value, source)
     }

src/components/maskeditor/BrushSettingsPanel.vue

@@ -72,12 +72,12 @@
         />
       </div>
       <SliderControl
-        v-model="brushSize"
+        v-model="brushSizeSliderValue"
         class="flex-1"
         label=""
-        :min="1"
-        :max="250"
-        :step="1"
+        :min="0"
+        :max="1"
+        :step="0.001"
       />
     </div>
 
@@ -182,6 +182,26 @@ const brushSize = computed({
   set: (value: number) => store.setBrushSize(value)
 })
 
+const rawSliderValue = ref<number | null>(null)
+
+const brushSizeSliderValue = computed({
+  get: () => {
+    if (rawSliderValue.value !== null) {
+      const cachedSize = Math.round(Math.pow(250, rawSliderValue.value))
+      if (cachedSize === brushSize.value) {
+        return rawSliderValue.value
+      }
+    }
+
+    return Math.log(brushSize.value) / Math.log(250)
+  },
+  set: (value: number) => {
+    rawSliderValue.value = value
+    const size = Math.round(Math.pow(250, value))
+    store.setBrushSize(size)
+  }
+})
+
 const brushOpacity = computed({
   get: () => store.brushSettings.opacity,
   set: (value: number) => store.setBrushOpacity(value)

src/components/queue/job/JobFilterActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-w-0 items-center gap-2">
-    <SearchBox
+    <SearchInput
       v-if="showSearch"
       :model-value="searchQuery"
       class="min-w-0 flex-1"
@@ -116,7 +116,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'

src/components/sidebar/ComfyMenuButton.vue

@@ -11,12 +11,13 @@
     }"
     @click="onLogoMenuClick($event)"
   >
-    <div class="flex size-8 items-center justify-center rounded-lg bg-black">
+    <div class="flex items-center gap-0.5">
       <ComfyLogo
         alt="ComfyUI Logo"
-        class="comfyui-logo h-[18px] w-[18px] text-white"
+        class="comfyui-logo h-[18px] w-[18px]"
         mode="fill"
       />
+      <i class="icon-[lucide--chevron-down] size-3 text-muted-foreground" />
     </div>
   </div>
 

src/components/sidebar/SideToolbar.vue

@@ -41,7 +41,7 @@
           v-if="userStore.isMultiUserServer"
           :is-small="isSmall"
         />
-        <SidebarHelpCenterIcon v-if="!isIntegratedTabBar" :is-small="isSmall" />
+        <SidebarHelpCenterIcon :is-small="isSmall" />
         <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
@@ -95,9 +95,6 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
-const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
-)
 const isConnected = computed(
   () =>
     selectedTab.value ||

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -7,7 +7,7 @@
     :icon-badge="shouldShowRedDot ? '•' : ''"
     badge-class="-top-1 -right-1 min-w-2 w-2 h-2 p-0 rounded-full text-[0px] bg-[#ff3b30]"
     :is-small="isSmall"
-    @click="toggleHelpCenter"
+    @click="toggleHelpCenter()"
   />
 </template>
 

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -18,6 +18,8 @@
       class="flex-1"
       :items="assetItems"
       :grid-style="listGridStyle"
+      :max-columns="1"
+      :default-item-height="48"
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">
@@ -33,7 +35,7 @@
             tabindex="0"
             :aria-label="
               t('assetBrowser.ariaLabel.assetCard', {
-                name: item.asset.name,
+                name: getAssetDisplayName(item.asset),
                 type: getAssetMediaType(item.asset)
               })
             "
@@ -44,7 +46,7 @@
               )
             "
             :preview-url="getAssetPreviewUrl(item.asset)"
-            :preview-alt="item.asset.name"
+            :preview-alt="getAssetDisplayName(item.asset)"
             :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
             :is-video-preview="isVideoAsset(item.asset)"
             :primary-text="getAssetPrimaryText(item.asset)"
@@ -133,8 +135,12 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
+function getAssetDisplayName(asset: AssetItem): string {
+  return asset.display_name || asset.name
+}
+
 function getAssetPrimaryText(asset: AssetItem): string {
-  return truncateFilename(asset.name)
+  return truncateFilename(getAssetDisplayName(asset))
 }
 
 function getAssetMediaType(asset: AssetItem) {

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -569,7 +569,7 @@ const handleZoomClick = (asset: AssetItem) => {
     const dialogStore = useDialogStore()
     dialogStore.showDialog({
       key: 'asset-3d-viewer',
-      title: asset.name,
+      title: asset.display_name || asset.name,
       component: Load3dViewerContent,
       props: {
         modelUrl: asset.preview_url || ''

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchBox
+        <SearchInput
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           class="workflows-search-box"
@@ -146,7 +146,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -22,7 +22,7 @@
     </template>
     <template #header>
       <div class="px-2 2xl:px-4">
-        <SearchBox
+        <SearchInput
           ref="searchBoxRef"
           v-model:model-value="searchQuery"
           :placeholder="
@@ -56,7 +56,7 @@
 import { Divider } from 'primevue'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -86,18 +86,40 @@
       </template>
       <template #header>
         <div class="px-2 2xl:px-4">
-          <SearchBox
-            ref="searchBoxRef"
-            v-model:model-value="searchQuery"
-            data-testid="node-library-search"
-            class="node-lib-search-box"
-            :placeholder="$t('g.searchPlaceholder', { subject: $t('g.nodes') })"
-            filter-icon="pi pi-filter"
-            :filters
-            @search="handleSearch"
-            @show-filter="($event) => searchFilter?.toggle($event)"
-            @remove-filter="onRemoveFilter"
-          />
+          <div class="flex items-center gap-1">
+            <SearchInput
+              ref="searchBoxRef"
+              v-model="searchQuery"
+              data-testid="node-library-search"
+              class="node-lib-search-box"
+              :placeholder="
+                $t('g.searchPlaceholder', { subject: $t('g.nodes') })
+              "
+              @search="handleSearch"
+            />
+            <Button
+              variant="textonly"
+              size="icon"
+              class="filter-button shrink-0"
+              :aria-label="$t('g.filter')"
+              @click="(e: Event) => searchFilter?.toggle(e)"
+            >
+              <i class="pi pi-filter" />
+            </Button>
+          </div>
+          <div
+            v-if="filters?.length"
+            class="search-filters flex flex-wrap gap-2 pt-2"
+          >
+            <SearchFilterChip
+              v-for="filter in filters"
+              :key="filter.id"
+              :text="filter.text"
+              :badge="filter.badge"
+              :badge-class="filter.badgeClass"
+              @remove="onRemoveFilter(filter)"
+            />
+          </div>
 
           <Popover ref="searchFilter" class="ml-[-13px]">
             <NodeSearchFilter @add-filter="onAddFilter" />
@@ -155,8 +177,9 @@ import {
 } from 'vue'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchBox from '@/components/common/SearchBox.vue'
+import SearchFilterChip from '@/components/common/SearchFilterChip.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts

@@ -69,7 +69,7 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
   }
 }))
 
-vi.mock('@/components/common/SearchBoxV2.vue', () => ({
+vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
   default: {
     name: 'SearchBox',
     template: '<input data-testid="search-box" />',

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -3,7 +3,7 @@
     <template #header>
       <TabsRoot v-model="selectedTab" class="flex flex-col">
         <div class="flex items-center justify-between gap-2 px-2 pb-2 2xl:px-4">
-          <SearchBox
+          <SearchInput
             ref="searchBoxRef"
             v-model="searchQuery"
             :placeholder="$t('g.search') + '...'"
@@ -180,7 +180,7 @@ import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchBox from '@/components/common/SearchBoxV2.vue'
+import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
@@ -253,7 +253,7 @@ const filterOptions = ref<Record<NodeCategoryId, boolean>>({
 
 const { t } = useI18n()
 
-const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
   essentials: [],

src/components/topbar/CurrentUserButton.test.ts

@@ -9,6 +9,18 @@ import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserButton from './CurrentUserButton.vue'
 
+const mockFeatureFlags = vi.hoisted(() => ({
+  teamWorkspacesEnabled: false
+}))
+
+const mockTeamWorkspaceStore = vi.hoisted(() => ({
+  workspaceName: { value: '' },
+  initState: { value: 'idle' },
+  isInPersonalWorkspace: { value: false }
+}))
+
+const mockIsCloud = vi.hoisted(() => ({ value: false }))
+
 // Mock all firebase modules
 vi.mock('firebase/app', () => ({
   initializeApp: vi.fn(),
@@ -32,16 +44,19 @@ vi.mock('pinia', () => ({
 // Mock the useFeatureFlags composable
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => ({
-    flags: { teamWorkspacesEnabled: false }
+    flags: mockFeatureFlags
   }))
 }))
 
 // Mock the useTeamWorkspaceStore
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: vi.fn(() => ({
-    workspaceName: { value: '' },
-    initState: { value: 'idle' }
-  }))
+  useTeamWorkspaceStore: vi.fn(() => mockTeamWorkspaceStore)
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
 }))
 
 // Mock the useCurrentUser composable
@@ -64,6 +79,16 @@ vi.mock('@/components/common/UserAvatar.vue', () => ({
   }
 }))
 
+// Mock the WorkspaceProfilePic component
+vi.mock('@/platform/workspace/components/WorkspaceProfilePic.vue', () => ({
+  default: {
+    name: 'WorkspaceProfilePicMock',
+    render() {
+      return h('div', 'WorkspaceProfilePic')
+    }
+  }
+}))
+
 // Mock the CurrentUserPopoverLegacy component
 vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
   default: {
@@ -78,9 +103,15 @@ vi.mock('./CurrentUserPopoverLegacy.vue', () => ({
 describe('CurrentUserButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockFeatureFlags.teamWorkspacesEnabled = false
+    mockTeamWorkspaceStore.workspaceName.value = ''
+    mockTeamWorkspaceStore.initState.value = 'idle'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
+    mockIsCloud.value = false
   })
 
-  const mountComponent = (): VueWrapper => {
+  const mountComponent = (options?: { stubButton?: boolean }): VueWrapper => {
+    const { stubButton = true } = options ?? {}
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -99,7 +130,7 @@ describe('CurrentUserButton', () => {
               hide: vi.fn()
             }
           },
-          Button: true
+          ...(stubButton ? { Button: true } : {})
         }
       }
     })
@@ -137,4 +168,27 @@ describe('CurrentUserButton', () => {
     // Verify that popover.hide was called
     expect(popoverHideSpy).toHaveBeenCalled()
   })
+
+  it('shows UserAvatar in personal workspace', () => {
+    mockIsCloud.value = true
+    mockFeatureFlags.teamWorkspacesEnabled = true
+    mockTeamWorkspaceStore.initState.value = 'ready'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = true
+
+    const wrapper = mountComponent({ stubButton: false })
+    expect(wrapper.html()).toContain('Avatar')
+    expect(wrapper.html()).not.toContain('WorkspaceProfilePic')
+  })
+
+  it('shows WorkspaceProfilePic in team workspace', () => {
+    mockIsCloud.value = true
+    mockFeatureFlags.teamWorkspacesEnabled = true
+    mockTeamWorkspaceStore.initState.value = 'ready'
+    mockTeamWorkspaceStore.isInPersonalWorkspace.value = false
+    mockTeamWorkspaceStore.workspaceName.value = 'My Team'
+
+    const wrapper = mountComponent({ stubButton: false })
+    expect(wrapper.html()).toContain('WorkspaceProfilePic')
+    expect(wrapper.html()).not.toContain('Avatar')
+  })
 })

src/components/topbar/CurrentUserButton.vue

@@ -30,7 +30,7 @@
         <UserAvatar
           v-else
           :photo-url="photoURL"
-          :class="compact && 'size-full'"
+          :class="compact && 'h-full w-auto'"
         />
 
         <i v-if="showArrow" class="icon-[lucide--chevron-down] size-4 px-1" />
@@ -98,15 +98,21 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
-  useTeamWorkspaceStore()
-)
+const {
+  workspaceName: teamWorkspaceName,
+  initState,
+  isInPersonalWorkspace
+} = storeToRefs(useTeamWorkspaceStore())
 
 const showWorkspaceSkeleton = computed(
   () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
 )
 const showWorkspaceIcon = computed(
-  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
+  () =>
+    isCloud &&
+    teamWorkspacesEnabled.value &&
+    initState.value === 'ready' &&
+    !isInPersonalWorkspace.value
 )
 
 const workspaceName = computed(() => {

src/components/topbar/TopMenuHelpButton.vue

@@ -1,21 +0,0 @@
-<template>
-  <Button
-    class="comfy-help-center-btn relative text-base-foreground"
-    variant="textonly"
-    @click="toggleHelpCenter"
-  >
-    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="ml-0.5 icon-[lucide--circle-help]" />
-    <span
-      v-if="shouldShowRedDot"
-      class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"
-    />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { useHelpCenter } from '@/composables/useHelpCenter'
-
-const { shouldShowRedDot, toggleHelpCenter } = useHelpCenter('topbar')
-</script>

src/components/topbar/WorkflowTabs.vue

@@ -83,13 +83,18 @@
       v-if="isIntegratedTabBar"
       class="ml-auto flex shrink-0 items-center gap-2 px-2"
     >
-      <TopMenuHelpButton />
-      <CurrentUserButton
-        v-if="isLoggedIn"
-        :show-arrow="false"
-        compact
-        class="grid w-10 shrink-0 p-1"
-      />
+      <Button
+        v-if="isCloud || isNightly"
+        v-tooltip="{ value: $t('actionbar.feedbackTooltip'), showDelay: 300 }"
+        variant="muted-textonly"
+        size="icon"
+        class="shrink-0 text-base-foreground"
+        :aria-label="$t('actionbar.feedback')"
+        @click="openFeedback"
+      >
+        <i class="icon-[lucide--message-square-text]" />
+      </Button>
+      <CurrentUserButton v-if="showCurrentUser" compact class="shrink-0 p-1" />
       <LoginButton v-else-if="isDesktop" class="p-1" />
     </div>
     <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
@@ -102,21 +107,20 @@ import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, nextTick, onUpdated, ref, watch } from 'vue'
 import type { WatchStopHandle } from 'vue'
-
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import TopMenuHelpButton from '@/components/topbar/TopMenuHelpButton.vue'
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { buildFeedbackUrl } from '@/platform/support/config'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isDesktop } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -138,8 +142,14 @@ const commandStore = useCommandStore()
 const { isLoggedIn } = useCurrentUser()
 
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
+const showCurrentUser = computed(() => isCloud || isLoggedIn.value)
+
+const feedbackUrl = buildFeedbackUrl()
+function openFeedback() {
+  window.open(feedbackUrl, '_blank', 'noopener,noreferrer')
+}
 
 const containerRef = ref<HTMLElement | null>(null)
 const showOverflowArrows = ref(false)

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/components/ui/search-input/SearchInput.test.ts

@@ -0,0 +1,202 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, watch } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SearchInput from './SearchInput.vue'
+
+vi.mock('@vueuse/core', () => ({
+  watchDebounced: vi.fn((source, cb, opts) => {
+    let timer: ReturnType<typeof setTimeout> | null = null
+    return watch(source, (val: string) => {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => cb(val), opts?.debounce ?? 300)
+    })
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        clear: 'Clear',
+        searchPlaceholder: 'Search...'
+      }
+    }
+  }
+})
+
+describe('SearchInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+  })
+
+  function mountComponent(props = {}) {
+    return mount(SearchInput, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          ComboboxRoot: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxAnchor: {
+            template: '<div @click="$emit(\'click\')"><slot /></div>',
+            emits: ['click']
+          },
+          ComboboxInput: {
+            template:
+              '<input :placeholder="placeholder" :value="modelValue" :autofocus="autoFocus || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+            props: ['placeholder', 'modelValue', 'autoFocus']
+          }
+        }
+      },
+      props: {
+        modelValue: '',
+        ...props
+      }
+    })
+  }
+
+  describe('debounced search', () => {
+    it('should debounce search input by 300ms', async () => {
+      const wrapper = mountComponent()
+      const input = wrapper.find('input')
+
+      await input.setValue('test')
+
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      await vi.advanceTimersByTimeAsync(299)
+      await nextTick()
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      await vi.advanceTimersByTimeAsync(1)
+      await nextTick()
+
+      expect(wrapper.emitted('search')).toEqual([['test']])
+    })
+
+    it('should reset debounce timer on each keystroke', async () => {
+      const wrapper = mountComponent()
+      const input = wrapper.find('input')
+
+      await input.setValue('t')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      await input.setValue('te')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      await input.setValue('tes')
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      await vi.advanceTimersByTimeAsync(100)
+      await nextTick()
+
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes'])
+    })
+
+    it('should only emit final value after rapid typing', async () => {
+      const wrapper = mountComponent()
+      const input = wrapper.find('input')
+
+      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
+      for (const term of searchTerms) {
+        await input.setValue(term)
+        await vi.advanceTimersByTimeAsync(50)
+      }
+      await nextTick()
+
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      await vi.advanceTimersByTimeAsync(350)
+      await nextTick()
+
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search'])
+    })
+  })
+
+  describe('model sync', () => {
+    it('should sync external model changes to internal state', async () => {
+      const wrapper = mountComponent({ modelValue: 'initial' })
+      const input = wrapper.find('input')
+
+      expect(input.element.value).toBe('initial')
+
+      await wrapper.setProps({ modelValue: 'external update' })
+      await nextTick()
+
+      expect(input.element.value).toBe('external update')
+    })
+  })
+
+  describe('placeholder', () => {
+    it('should use custom placeholder when provided', () => {
+      const wrapper = mountComponent({ placeholder: 'Custom search...' })
+      const input = wrapper.find('input')
+
+      expect(input.attributes('placeholder')).toBe('Custom search...')
+    })
+
+    it('should use i18n placeholder when not provided', () => {
+      const wrapper = mountComponent()
+      const input = wrapper.find('input')
+
+      expect(input.attributes('placeholder')).toBe('Search...')
+    })
+  })
+
+  describe('autofocus', () => {
+    it('should pass autofocus prop to ComboboxInput', () => {
+      const wrapper = mountComponent({ autofocus: true })
+      const input = wrapper.find('input')
+      expect(input.attributes('autofocus')).toBeDefined()
+    })
+
+    it('should not autofocus by default', () => {
+      const wrapper = mountComponent()
+      const input = wrapper.find('input')
+      expect(input.attributes('autofocus')).toBeUndefined()
+    })
+  })
+
+  describe('focus method', () => {
+    it('should expose focus method via ref', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.vm.focus).toBeDefined()
+    })
+  })
+
+  describe('clear button', () => {
+    it('shows search icon when value is empty', () => {
+      const wrapper = mountComponent({ modelValue: '' })
+      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(false)
+    })
+
+    it('shows clear button when value is not empty', () => {
+      const wrapper = mountComponent({ modelValue: 'test' })
+      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(true)
+    })
+
+    it('clears value when clear button is clicked', async () => {
+      const wrapper = mountComponent({ modelValue: 'test' })
+      const clearButton = wrapper.find('button')
+      await clearButton.trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
+    })
+  })
+})

src/components/ui/search-input/SearchInput.vue

@@ -1,11 +1,15 @@
 <template>
-  <ComboboxRoot :ignore-filter="true" :open="false" :disabled="disabled">
+  <ComboboxRoot
+    :ignore-filter="true"
+    :open="false"
+    :disabled="disabled"
+    :class="className"
+  >
     <ComboboxAnchor
       :class="
         cn(
           searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50',
-          className
+          disabled && 'pointer-events-none opacity-50'
         )
       "
       @click="focus"

src/components/ui/select/Select.stories.ts

@@ -1,261 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import Select from './Select.vue'
-import SelectContent from './SelectContent.vue'
-import SelectGroup from './SelectGroup.vue'
-import SelectItem from './SelectItem.vue'
-import SelectLabel from './SelectLabel.vue'
-import SelectSeparator from './SelectSeparator.vue'
-import SelectTrigger from './SelectTrigger.vue'
-import SelectValue from './SelectValue.vue'
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'Selected value'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'When true, disables the select'
-    },
-    'onUpdate:modelValue': { action: 'update:modelValue' }
-  }
-} satisfies Meta<typeof Select>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref(args.modelValue || '')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-          <SelectItem value="grape">Grape</SelectItem>
-          <SelectItem value="orange">Orange</SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const WithPlaceholder: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Choose an option..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-          <SelectItem value="option3">Option 3</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Disabled: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('apple')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" disabled>
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  })
-}
-
-export const WithGroups: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectGroup,
-      SelectItem,
-      SelectLabel,
-      SelectSeparator,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a model type" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Checkpoints</SelectLabel>
-            <SelectItem value="sd15">SD 1.5</SelectItem>
-            <SelectItem value="sdxl">SDXL</SelectItem>
-            <SelectItem value="flux">Flux</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>LoRAs</SelectLabel>
-            <SelectItem value="lora-style">Style LoRA</SelectItem>
-            <SelectItem value="lora-character">Character LoRA</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Other</SelectLabel>
-            <SelectItem value="vae">VAE</SelectItem>
-            <SelectItem value="embedding">Embedding</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Scrollable: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      const items = Array.from({ length: 20 }, (_, i) => ({
-        value: `item-${i + 1}`,
-        label: `Option ${i + 1}`
-      }))
-      return { value, items, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="item in items"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const CustomWidth: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <div class="space-y-4">
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-32">
-            <SelectValue placeholder="Small" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="a">A</SelectItem>
-            <SelectItem value="b">B</SelectItem>
-            <SelectItem value="c">C</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-full">
-            <SelectValue placeholder="Full width select" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}

src/components/ui/select/SelectGroup.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { SelectGroupProps } from 'reka-ui'
-import { SelectGroup } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectGroupProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectGroup :class="cn('w-full', className)" v-bind="restProps">
-    <slot />
-  </SelectGroup>
-</template>

src/components/ui/select/SelectLabel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { SelectLabelProps } from 'reka-ui'
-import { SelectLabel } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectLabelProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectLabel
-    v-bind="restProps"
-    :class="
-      cn(
-        'px-3 py-2 text-xs tracking-wide text-muted-foreground uppercase',
-        className
-      )
-    "
-  >
-    <slot />
-  </SelectLabel>
-</template>

src/components/ui/select/SelectSeparator.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { SelectSeparatorProps } from 'reka-ui'
-import { SelectSeparator } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectSeparator
-    v-bind="restProps"
-    :class="cn('-mx-1 my-1 h-px bg-border-default', className)"
-  />
-</template>

src/components/ui/select/SelectTrigger.vue

@@ -5,24 +5,41 @@ import type { HTMLAttributes } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const { class: className, ...restProps } = defineProps<
-  SelectTriggerProps & { class?: HTMLAttributes['class'] }
+const {
+  class: className,
+  size = 'lg',
+  invalid = false,
+  ...restProps
+} = defineProps<
+  SelectTriggerProps & {
+    class?: HTMLAttributes['class']
+    /** Trigger size: 'lg' (40px) or 'md' (32px) */
+    size?: 'lg' | 'md'
+    /** Show invalid (destructive) border */
+    invalid?: boolean
+  }
 >()
 </script>
 
 <template>
   <SelectTrigger
     v-bind="restProps"
+    :aria-invalid="invalid || undefined"
     :class="
       cn(
-        'flex h-10 w-full cursor-pointer items-center justify-between select-none',
-        'rounded-lg px-4 py-2 text-sm',
+        'flex w-full cursor-pointer items-center justify-between select-none',
+        size === 'md' ? 'h-8 px-3 py-1 text-xs' : 'h-10 px-4 py-2 text-sm',
+        'rounded-lg',
         'bg-secondary-background text-base-foreground',
-        'border-[2.5px] border-solid border-transparent',
         'transition-all duration-200 ease-in-out',
-        'focus:border-node-component-border focus:outline-none',
+        'hover:bg-secondary-background-hover',
+        'border-[2.5px] border-solid',
+        invalid
+          ? 'border-destructive-background'
+          : 'border-transparent focus:border-node-component-border',
+        'focus:outline-none',
         'data-placeholder:text-muted-foreground',
-        'disabled:cursor-not-allowed disabled:opacity-60',
+        'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-secondary-background',
         '[&>span]:truncate',
         className
       )