fix: load API format workflows with missing node types

src/components/input/MultiSelect.stories.ts

@@ -1,33 +1,73 @@
 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'
 
-const meta: Meta<typeof MultiSelect> = {
-  title: 'Components/Select/MultiSelect',
+// 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',
   component: MultiSelect,
   tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  decorators: [
-    () => ({
-      template: '<div class="pt-4"><story /></div>'
-    })
-  ],
   argTypes: {
-    label: { control: 'text' },
-    size: {
-      control: { type: 'select' },
-      options: ['lg', 'md']
+    label: {
+      control: 'text'
     },
-    showSearchBox: { control: 'boolean' },
-    showSelectedCount: { control: 'boolean' },
-    showClearButton: { control: 'boolean' },
-    searchPlaceholder: { control: 'text' }
+    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'
+    }
   },
   args: {
-    label: 'Category',
-    size: 'lg',
+    label: 'Select',
+    options: [
+      { name: 'Vue', value: 'vue' },
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Svelte', value: 'svelte' }
+    ],
     showSearchBox: false,
     showSelectedCount: false,
     showClearButton: false,
@@ -38,125 +78,352 @@ const meta: Meta<typeof MultiSelect> = {
 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<SelectOption[]>([])
-      return { selected, sampleOptions, args }
+      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 }
     },
-    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" />'
+    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>
+    `
   })
 }
 
-export const MediumSize: Story = {
-  render: () => ({
-    components: { MultiSelect },
-    setup() {
-      const selected = ref<SelectOption[]>([sampleOptions[0]])
-      return { selected, sampleOptions }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" size="md" />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
 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 selected = ref<SelectOption[]>([])
-      return { selected, sampleOptions, args }
-    },
-    template:
-      '<MultiSelect v-model="selected" :options="sampleOptions" label="Category" :show-search-box="args.showSearchBox" />'
-  })
-}
-
-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" />'
-  })
-}
-
-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 }
+      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 }
     },
     template: `
-      <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>
+        <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>
-          <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>
+    `
+  }),
+  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...'
+  }
+}
+
+export const MultipleSelectors: Story = {
+  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 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' }
+      ])
+
+      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
+      }
+    },
+    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>
+        
+        <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>
         </div>
       </div>
     `
   }),
-  parameters: {
-    controls: { disable: true }
+  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 }
   }
 }

src/components/input/MultiSelect.vue

@@ -1,173 +1,188 @@
 <template>
-  <PopoverRoot v-model:open="isOpen">
-    <PopoverTrigger
-      :disabled
-      :class="
-        cn(
-          'relative inline-flex cursor-pointer items-center select-none',
-          size === 'md' ? 'h-8' : 'h-10',
+  <!--
+    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',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
           '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'
+          selectedCount > 0
+            ? 'border-node-component-border'
+            : 'border-transparent',
+          'focus-within:border-node-component-border',
+          { 'cursor-default opacity-60': props.disabled }
         )
-      "
-      :aria-label="label || t('g.multiSelectDropdown')"
-      role="combobox"
-      :aria-expanded="isOpen"
-      aria-haspopup="listbox"
+      }),
+      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'
+        )
+      }),
+      // 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
     >
-      <div
-        :class="
-          cn(
-            'flex flex-1 items-center whitespace-nowrap',
-            size === 'md' ? 'pl-3' : 'pl-4'
-          )
-        "
-      >
-        <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"
+      <div 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"
         >
-          {{ selectedCount }}
-        </span>
+          <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>
-      <span
-        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
-      >
-        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-      </span>
-    </PopoverTrigger>
+    </template>
 
-    <PopoverPortal>
-      <PopoverContent
-        side="bottom"
-        :side-offset="8"
-        :collision-padding="10"
+    <!-- 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(
-            '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"
+          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'
+          "
         >
-          <SearchInput
-            v-if="showSearchBox"
-            v-model="searchQuery"
-            :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-            :placeholder="searchPlaceholder"
-            size="sm"
+          <i
+            v-if="slotProps.selected"
+            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
           />
-          <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>
+        <span>
+          {{ slotProps.option.name }}
+        </span>
+      </div>
+    </template>
+  </MultiSelect>
 </template>
 
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import {
-  ListboxContent,
-  ListboxItem,
-  ListboxRoot,
-  PopoverContent,
-  PopoverPortal,
-  PopoverRoot,
-  PopoverTrigger
-} from 'reka-ui'
-import { computed, ref } from 'vue'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -175,27 +190,13 @@ import type { SelectOption } from './types'
 
 type Option = SelectOption
 
-const {
-  label,
-  options = [],
-  size = 'lg',
-  disabled = false,
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder = 'Search...',
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<{
+defineOptions({
+  inheritAttrs: false
+})
+
+interface Props {
   /** 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 */
@@ -210,14 +211,25 @@ const {
   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)
 
@@ -225,11 +237,10 @@ const popoverStyle = usePopoverSizing({
   minWidth: popoverMinWidth,
   maxWidth: popoverMaxWidth
 })
+const attrs = useAttrs()
+const originalOptions = computed(() => (attrs.options as Option[]) || [])
 
-function isSelected(option: Option): boolean {
-  return selectedItems.value.some((item) => item.value === option.value)
-}
-
+// Use VueUse's useFuse for better reactivity and performance
 const fuseOptions: UseFuseOptions<Option> = {
   fuseOptions: {
     keys: ['name', 'value'],
@@ -239,17 +250,20 @@ const fuseOptions: UseFuseOptions<Option> = {
   matchAllWhenSearchEmpty: true
 }
 
-const { results } = useFuse(searchQuery, () => options, fuseOptions)
+const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
 
+// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
   if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return options
+    return originalOptions.value
   }
 
+  // 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

@@ -1,219 +0,0 @@
-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,31 +3,29 @@ 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/Select/SingleSelect',
+  title: 'Components/Input/SingleSelect',
   component: SingleSelect,
   tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  decorators: [
-    () => ({
-      template: '<div class="pt-4"><story /></div>'
-    })
-  ],
   argTypes: {
     label: { control: 'text' },
     options: { control: 'object' },
-    size: {
-      control: { type: 'select' },
-      options: ['lg', 'md']
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of the dropdown list'
     },
-    invalid: { control: 'boolean' },
-    loading: { control: 'boolean' }
+    popoverMinWidth: {
+      control: 'text',
+      description: 'Minimum width of the popover'
+    },
+    popoverMaxWidth: {
+      control: 'text',
+      description: 'Maximum width of the popover'
+    }
   },
   args: {
-    label: 'Category',
-    size: 'lg',
-    invalid: false,
-    loading: false,
+    label: 'Sorting Type',
     options: [
       { name: 'Popular', value: 'popular' },
       { name: 'Newest', value: 'newest' },
@@ -39,7 +37,7 @@ const meta: Meta<typeof SingleSelect> = {
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+export type Story = StoryObj<typeof meta>
 
 const sampleOptions = [
   { name: 'Popular', value: 'popular' },
@@ -54,118 +52,205 @@ export const Default: Story = {
     components: { SingleSelect },
     setup() {
       const selected = ref<string | null>(null)
-      return { selected, args }
+      const options = args.options || sampleOptions
+      return { selected, options, args }
     },
-    template:
-      '<SingleSelect v-model="selected" :options="args.options" :label="args.label" :size="args.size" :invalid="args.invalid" :loading="args.loading" />'
+    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>
+    `
   })
 }
 
-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')
-      return { selected, sampleOptions }
+      const options = sampleOptions
+      return { selected, options }
     },
     template: `
-      <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 Disabled: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      const selected = ref<string | null>('popular')
-      return { selected, sampleOptions }
-    },
-    template:
-      '<SingleSelect v-model="selected" :options="sampleOptions" label="Category" disabled />'
-  }),
-  parameters: { controls: { disable: true } }
-}
-
-export const Invalid: Story = {
-  render: () => ({
-    components: { SingleSelect },
-    setup() {
-      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>('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-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>
+        <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>
-          <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>
+    `
+  })
+}
+
+export const Preselected: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('newest')
+      const options = sampleOptions
+      return { selected, options }
+    },
+    template: `
+      <SingleSelect v-model="selected" :options="options" label="Sorting Type" />
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const options = sampleOptions
+      const a = ref<string | null>(null)
+      const b = ref<string | null>('popular')
+      const c = ref<string | null>('az')
+      return { options, a, b, c }
+    },
+    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>
+        <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>
       </div>
     `
   }),
   parameters: {
-    controls: { disable: true }
+    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 }
   }
 }

src/components/input/SingleSelect.vue

@@ -1,111 +1,124 @@
 <template>
-  <SelectRoot v-model="selectedItem" :disabled>
-    <SelectTrigger
-      :class="
-        cn(
-          'relative inline-flex cursor-pointer items-center select-none',
-          size === 'md' ? 'h-8' : 'h-10',
+  <!--
+    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
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
+          'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
-          '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'
+          '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'
         )
-      "
-      :aria-label="label || t('g.singleSelectDropdown')"
-      :aria-busy="loading || undefined"
-      :aria-invalid="invalid || undefined"
-    >
-      <div
-        :class="
-          cn(
-            'flex flex-1 items-center gap-2 whitespace-nowrap',
-            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
-          )
-        "
-      >
-        <i
-          v-if="loading"
-          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
-        />
-        <slot v-else name="icon" />
-        <SelectValue :placeholder="label" />
-      </div>
-      <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"
+      },
+      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'
+        )
+      }),
+      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"
         >
-          <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>
+          {{ 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 }">
+      <div
+        class="flex w-full items-center justify-between gap-3"
+        :style="optionStyle"
+      >
+        <span class="truncate">{{ option.name }}</span>
+        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+      </div>
+    </template>
+  </Select>
 </template>
 
 <script setup lang="ts">
-import {
-  SelectContent,
-  SelectIcon,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectPortal,
-  SelectRoot,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport
-} from 'reka-ui'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select from 'primevue/select'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -113,27 +126,24 @@ 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) */
@@ -146,12 +156,26 @@ const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 
-const viewportStyle = computed(() => {
-  const styles: Record<string, string> = {
-    maxHeight: `min(${listMaxHeight}, 50vh)`
-  }
-  if (popoverMinWidth) styles.minWidth = popoverMinWidth
-  if (popoverMaxWidth) styles.maxWidth = popoverMaxWidth
-  return styles
+/**
+ * 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('; ')
 })
 </script>

src/components/topbar/CurrentUserButton.test.ts

@@ -9,18 +9,6 @@ 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(),
@@ -44,19 +32,16 @@ vi.mock('pinia', () => ({
 // Mock the useFeatureFlags composable
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: vi.fn(() => ({
-    flags: mockFeatureFlags
+    flags: { teamWorkspacesEnabled: false }
   }))
 }))
 
 // Mock the useTeamWorkspaceStore
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
-  useTeamWorkspaceStore: vi.fn(() => mockTeamWorkspaceStore)
-}))
-
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return mockIsCloud.value
-  }
+  useTeamWorkspaceStore: vi.fn(() => ({
+    workspaceName: { value: '' },
+    initState: { value: 'idle' }
+  }))
 }))
 
 // Mock the useCurrentUser composable
@@ -79,16 +64,6 @@ 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: {
@@ -103,15 +78,9 @@ 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 = (options?: { stubButton?: boolean }): VueWrapper => {
-    const { stubButton = true } = options ?? {}
+  const mountComponent = (): VueWrapper => {
     const i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -130,7 +99,7 @@ describe('CurrentUserButton', () => {
               hide: vi.fn()
             }
           },
-          ...(stubButton ? { Button: true } : {})
+          Button: true
         }
       }
     })
@@ -168,27 +137,4 @@ 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

@@ -98,21 +98,15 @@ const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const {
-  workspaceName: teamWorkspaceName,
-  initState,
-  isInPersonalWorkspace
-} = storeToRefs(useTeamWorkspaceStore())
+const { workspaceName: teamWorkspaceName, initState } = storeToRefs(
+  useTeamWorkspaceStore()
+)
 
 const showWorkspaceSkeleton = computed(
   () => isCloud && teamWorkspacesEnabled.value && initState.value === 'loading'
 )
 const showWorkspaceIcon = computed(
-  () =>
-    isCloud &&
-    teamWorkspacesEnabled.value &&
-    initState.value === 'ready' &&
-    !isInPersonalWorkspace.value
+  () => isCloud && teamWorkspacesEnabled.value && initState.value === 'ready'
 )
 
 const workspaceName = computed(() => {

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

@@ -0,0 +1,261 @@
+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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,25 @@
+<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

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

src/scripts/app.ts

@@ -1830,7 +1830,6 @@ export class ComfyApp {
     )
     if (missingNodeTypes.length) {
       this.showMissingNodesError(missingNodeTypes.map((t) => t.class_type))
-      return
     }
 
     const ids = Object.keys(apiData)