fix(emcn): complete password and searchable label consolidation

Author: Bill Leoutsakos

.claude/rules/emcn-components.md

@@ -25,7 +25,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
 - **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.

.cursor/rules/emcn-components.mdc

@@ -26,7 +26,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipInput`** — single-line text field. `icon`, `endAdornment`, `error`, `inputClassName` (inner `<input>`); `className` styles the chrome wrapper.
 - **`ChipCopyInput`** — the canonical view-only field: a read-only `ChipInput` at full opacity with a trailing copy-to-clipboard button. View-only is a display mode, not a disabled state — reach for it (or `ChipModalField type='copy'`) over a `disabled` (greyed) input for values the user cannot edit.
 - **`ChipTextarea`** — multi-line sibling. `error`, `resizable` (off by default), `viewOnly` (read-only at full opacity with the default cursor — the multi-line counterpart of `ChipCopyInput`).
-- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
+- **`ChipSelect`** — canonical menu selection. Single selection uses `value`/`onChange`; `multiSelect` uses `multiSelectValues`/`onMultiSelectChange`, checkbox rows, and stays open. Supports groups, search aliases, rich labels/icons, disabled options, optional single-selection checks, and trigger refs. Rich labels require a nonempty `searchTerms` array containing their visible text, followed by any aliases; plain string/number labels are searchable automatically. `showAllOption` clears to an empty selection; without it, use `placeholder` for the empty state. Owns its chevron. `dropdownWidth` accepts `'trigger'`, `'content'`, or pixels; `modal={false}` keeps outside-dialog filters non-modal, while nested dialogs retain their focus lock.
 - **`ChipCombobox`** — shared chip styling over the separate `Combobox` engine for editable values, asynchronous results, and virtualized lists. Plain menu selection, including searchable menus, uses `ChipSelect`.
 - **`ChipModal` + `ChipModalField`** — declarative compact modal. The field's `type` (`input` | `email` | `textarea` | `dropdown` | `copy` | `file` | `emails` | `custom`) picks the control and **owns all chrome** — consumers describe intent, never pass `variant`/`className`/`id` to the inner control. `custom` is the escape hatch. **Every body field MUST be a `ChipModalField`** — never hand-roll a field row (raw `<div>` + hand-rolled `<p>`/`<label>` title + bare `ChipInput`/`ChipTextarea`). `ChipModalBody` applies `px-2` + `gap-4`; `ChipModalField` adds another `px-2`, so each field lands at effective `px-4`, exactly matching the `px-4` header/footer — a hand-rolled row skips that gutter and sits misaligned at `px-2`. For controls the field doesn't cover (`ChipCombobox`, `ChipSelect`, `DatePicker`, `TimePicker`, `ButtonGroup`, arbitrary JSX), use `type='custom'` with a `title` — it still applies the gutter and renders the canonical `Label`.
 - **`ChipButtonGroup` / `ChipSwitch`** — one Radix radio-group implementation with zero-gap segments and `default`/`compact` density. `ChipButtonGroup` accepts compound children; `ChipSwitch` adapts an options array.

apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx

@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, cn, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { cn, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
 const logger = createLogger('PasswordAuth')
@@ -16,7 +15,6 @@ interface PasswordAuthProps {
 
 export default function PasswordAuth({ identifier }: PasswordAuthProps) {
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const hasPasswordError = passwordErrors.length > 0
   const authenticate = useChatPasswordAuth(identifier)
@@ -67,34 +65,19 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
                 <Label htmlFor='password'>Password</Label>
               </div>
               <div className='relative'>
-                <div className='relative'>
-                  <ChipInput
-                    id='password'
-                    name='password'
-                    required
-                    type={showPassword ? 'text' : 'password'}
-                    autoCapitalize='none'
-                    autoComplete='new-password'
-                    autoCorrect='off'
-                    placeholder='Enter password'
-                    value={password}
-                    onChange={handlePasswordChange}
-                    className='h-[34px] pr-10'
-                    error={Boolean(hasPasswordError)}
-                  />
-                  <button
-                    type='button'
-                    onClick={() => setShowPassword(!showPassword)}
-                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
-                  >
-                    {showPassword ? (
-                      <EyeOff className='size-[18px]' />
-                    ) : (
-                      <Eye className='size-[18px]' />
-                    )}
-                  </button>
-                </div>
+                <PasswordInput
+                  id='password'
+                  name='password'
+                  required
+                  autoCapitalize='none'
+                  autoComplete='new-password'
+                  autoCorrect='off'
+                  placeholder='Enter password'
+                  value={password}
+                  onChange={handlePasswordChange}
+                  className='h-[34px]'
+                  error={hasPasswordError}
+                />
                 <div
                   className={cn(
                     'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',

apps/sim/app/f/[token]/public-file-auth.tsx

@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, Label } from '@sim/emcn'
-import { Eye, EyeOff } from '@sim/emcn/icons'
+import { Label } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
-import { AuthSubmitButton } from '@/app/(auth)/components'
+import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { PublicFileAuthShell } from '@/app/f/[token]/public-file-auth-shell'
 import { usePublicFileAuth } from '@/hooks/queries/public-shares'
 
@@ -21,7 +20,6 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
   const router = useRouter()
   const authenticate = usePublicFileAuth(token)
   const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleAuthenticate = async () => {
@@ -49,33 +47,22 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
       >
         <div className='space-y-2'>
           <Label htmlFor='password'>Password</Label>
-          <div className='relative'>
-            <ChipInput
-              id='password'
-              name='password'
-              required
-              type={showPassword ? 'text' : 'password'}
-              autoCapitalize='none'
-              autoComplete='current-password'
-              autoCorrect='off'
-              placeholder='Enter password'
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value)
-                setError(null)
-              }}
-              className='h-[34px] pr-10'
-              error={Boolean(error)}
-            />
-            <button
-              type='button'
-              onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-              aria-label={showPassword ? 'Hide password' : 'Show password'}
-            >
-              {showPassword ? <EyeOff className='size-[18px]' /> : <Eye className='size-[18px]' />}
-            </button>
-          </div>
+          <PasswordInput
+            id='password'
+            name='password'
+            required
+            autoCapitalize='none'
+            autoComplete='current-password'
+            autoCorrect='off'
+            placeholder='Enter password'
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value)
+              setError(null)
+            }}
+            className='h-[34px]'
+            error={Boolean(error)}
+          />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}
         </div>
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-value-editor.tsx

@@ -35,6 +35,7 @@ export function SelectValueEditor({
       (column.options ?? []).map((option) => ({
         value: option.id,
         label: <SelectPill option={option} />,
+        searchTerms: [option.name] as const,
       })),
     [column.options]
   )
@@ -67,7 +68,11 @@ export function SelectValueEditor({
   const singleOptions = column.required
     ? options
     : [
-        { value: CLEAR_VALUE, label: <span className='text-[var(--text-muted)]'>None</span> },
+        {
+          value: CLEAR_VALUE,
+          label: <span className='text-[var(--text-muted)]'>None</span>,
+          searchTerms: ['None'] as const,
+        },
         ...options,
       ]
 

packages/emcn/src/components/chip-select/chip-select.dom.test.tsx

@@ -208,14 +208,20 @@ describe('ChipSelect menu interactions', () => {
           {
             section: 'Cloud',
             items: [
-              { value: 'gcp', label: <strong>Google Cloud</strong>, searchTerms: ['gcloud'] },
+              {
+                value: 'gcp',
+                label: <strong>Google Cloud</strong>,
+                searchTerms: ['Google Cloud', 'gcloud'],
+              },
             ],
           },
           { section: 'Source', items: [{ value: 'gh', label: 'GitHub' }] },
         ]}
       />
     )
     await key(trigger, 'ArrowDown')
+    changeSearch('cloud')
+    expect(menuItem('Google Cloud').querySelector('strong')).not.toBeNull()
     changeSearch('gcloud')
     expect(menuItem('Google Cloud').querySelector('strong')).not.toBeNull()
     expect(document.querySelector('[role="menu"]')?.textContent).not.toContain('Source')
@@ -241,7 +247,12 @@ describe('ChipSelect menu interactions', () => {
         dropdownWidth={280}
         value=''
         options={[
-          { value: '', label: <span>None</span>, iconElement: <span data-testid='avatar' /> },
+          {
+            value: '',
+            label: <span>None</span>,
+            searchTerms: ['None'],
+            iconElement: <span data-testid='avatar' />,
+          },
         ]}
       />
     )

packages/emcn/src/components/chip-select/chip-select.test.ts

@@ -1,4 +1,5 @@
-import { describe, expect, it } from 'vitest'
+import type { ReactElement } from 'react'
+import { describe, expect, expectTypeOf, it } from 'vitest'
 import { type ChipSelectOption, chipSelectOptionMatchesSearch } from './chip-select'
 
 const GOOGLE_CLOUD_OPTION: ChipSelectOption = {
@@ -8,6 +9,20 @@ const GOOGLE_CLOUD_OPTION: ChipSelectOption = {
 }
 
 describe('chipSelectOptionMatchesSearch', () => {
+  it('requires search text for rich labels', () => {
+    expectTypeOf<{ label: ReactElement; value: string }>().not.toExtend<ChipSelectOption>()
+    expectTypeOf<{
+      label: ReactElement
+      value: string
+      searchTerms: readonly []
+    }>().not.toExtend<ChipSelectOption>()
+    expectTypeOf<{
+      label: ReactElement
+      value: string
+      searchTerms: readonly [string]
+    }>().toExtend<ChipSelectOption>()
+  })
+
   it('matches labels with normalized casing and whitespace', () => {
     expect(chipSelectOptionMatchesSearch(GOOGLE_CLOUD_OPTION, '  CLOUD  ')).toBe(true)
   })

packages/emcn/src/components/chip-select/chip-select.tsx

@@ -18,12 +18,8 @@ import {
 import { InsideModalContext } from '../modal/modal'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
-/** A selectable option in a {@link ChipSelect}. */
-export interface ChipSelectOption {
-  label: React.ReactNode
+interface ChipSelectOptionBase {
   value: string
-  /** Additional search-only terms. These are never rendered in the option label. */
-  searchTerms?: readonly string[]
   /** Optional leading icon. */
   icon?: React.ComponentType<{ className?: string }>
   /** Pre-rendered leading element, such as an avatar; takes precedence over `icon`. */
@@ -32,6 +28,20 @@ export interface ChipSelectOption {
   disabled?: boolean
 }
 
+/**
+ * A selectable option in a {@link ChipSelect}. Rich labels must supply their
+ * visible text in `searchTerms`, followed by any aliases, so they remain searchable.
+ * Search terms are never rendered. Plain text labels are matched automatically.
+ */
+export type ChipSelectOption = ChipSelectOptionBase &
+  (
+    | { label: string | number; searchTerms?: readonly string[] }
+    | {
+        label: React.ReactNode
+        searchTerms: readonly [string, ...string[]]
+      }
+  )
+
 /** A labeled group of options. When `groups` is set, `options` is ignored. */
 export interface ChipSelectOptionGroup {
   /** Optional section header rendered above the group. */

packages/emcn/src/components/chip/chip-chrome.ts

@@ -49,14 +49,15 @@ export const chipFieldTextClass =
  */
 export const chipContentGap = 'gap-1.5'
 
+/** Standard chip height, also shared by combobox fields. */
+export const chipHeightClass = 'h-[30px]'
+
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
  * text size. `chipVariants` composes this with its `shape` variant so a raw
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-/** Standard chip height, also shared by combobox fields. */
-export const chipHeightClass = 'h-[30px]'
 export const chipGeometryUnroundedClass = `${chipHeightClass} items-center ${chipContentGap} px-2 text-left text-sm`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with