@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/backend/hooks/__tests__/useAdvancedFilter.test.tsx

@@ -0,0 +1,213 @@
+import { renderHook, act } from '@testing-library/react'
+import { useAdvancedFilterTree } from '../useAdvancedFilter'
+import { createEmptyTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+
+jest.useFakeTimers()
+
+describe('useAdvancedFilterTree — auto-apply', () => {
+  it('debounces onApply by 400 ms when valid; suppresses when invalid', () => {
+    const onApply = jest.fn()
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(onApply).not.toHaveBeenCalled()
+    act(() => { jest.advanceTimersByTime(400) })
+    // tree has invalid rule (empty value) - should NOT apply
+    expect(onApply).not.toHaveBeenCalled()
+    expect(result.current.pendingErrors.length).toBeGreaterThan(0)
+  })
+
+  it('flush() applies immediately if valid', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => {
+      result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' })
+    })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => {
+      // Substring text operators now require >= 3 characters to validate.
+      result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'XYZ' } })
+    })
+    act(() => { result.current.flush() })
+    expect(onApply).toHaveBeenCalled()
+  })
+
+  it('flush() suppresses apply on invalid tree', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    act(() => { result.current.flush() })
+    expect(onApply).not.toHaveBeenCalled()
+    expect(result.current.pendingErrors.length).toBe(1)
+  })
+
+  it('hasActiveRules reflects tree.root.children.length', () => {
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply: () => {} }))
+    expect(result.current.hasActiveRules).toBe(false)
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(result.current.hasActiveRules).toBe(true)
+  })
+
+  it('clear() empties root children', () => {
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply: () => {} }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id }) })
+    expect(result.current.tree.root.children.length).toBe(1)
+    act(() => { result.current.clear() })
+    expect(result.current.tree.root.children.length).toBe(0)
+  })
+
+  it('setTree replaces tree', () => {
+    const onApply = jest.fn()
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields: [], onApply }))
+    const newTree = { root: { id: 'r2', type: 'group' as const, combinator: 'or' as const, children: [] } }
+    act(() => { result.current.setTree(newTree) })
+    expect(result.current.tree.root.id).toBe('r2')
+  })
+
+  it('does NOT auto-apply on mount when initial is non-empty and valid', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        // Substring text operators now require >= 3 characters; use 'XYZ' so the
+        // initial tree is valid.
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+    act(() => { jest.advanceTimersByTime(500) })
+    expect(onApply).not.toHaveBeenCalled()
+  })
+
+  it('does auto-apply after a dispatch from a non-empty initial', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId: 'a', updates: { value: 'WXY' } }) })
+    act(() => { jest.advanceTimersByTime(400) })
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('auto-applies non-blank short substring text rules', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'a' } }) })
+    act(() => { jest.advanceTimersByTime(400) })
+    expect(onApply).toHaveBeenCalledTimes(1)
+    expect(result.current.pendingErrors).toEqual([])
+  })
+})
+
+describe('useAdvancedFilterTree — single source of truth', () => {
+  it('seeds appliedTree from initial and exposes it alongside tree', () => {
+    const initial = {
+      root: { id: 'r', type: 'group' as const, combinator: 'and' as const, children: [] },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields: [], onApply: () => {} }))
+    expect(result.current.tree).toEqual(initial)
+    expect(result.current.appliedTree).toEqual(initial)
+  })
+
+  it('appliedTree lags tree until the debounced apply fires', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'abc' } }) })
+
+    // Editor advanced immediately, appliedTree is still empty until debounce fires.
+    expect(result.current.tree.root.children).toHaveLength(1)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+
+    act(() => { jest.advanceTimersByTime(400) })
+
+    // Debounce + validation passed — appliedTree now matches editor.
+    expect(result.current.appliedTree.root.children).toHaveLength(1)
+  })
+
+  it('appliedTree stays put when validation fails', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    // Empty-value rule is invalid.
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    act(() => { jest.advanceTimersByTime(500) })
+
+    expect(result.current.tree.root.children).toHaveLength(1)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+    expect(result.current.pendingErrors.length).toBeGreaterThan(0)
+  })
+
+  it('clear() resets both tree and appliedTree immediately and fires onApply', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const initial = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [{ id: 'a', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'XYZ' } as any],
+      },
+    }
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial, fields, onApply }))
+
+    act(() => { result.current.clear() })
+
+    expect(result.current.tree.root.children).toHaveLength(0)
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+    expect(onApply).toHaveBeenCalledTimes(1)
+  })
+
+  it('replaceTree() jumps both tree and appliedTree immediately (perspective restore)', () => {
+    const onApply = jest.fn()
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply }))
+
+    const restored = {
+      root: {
+        id: 'restored',
+        type: 'group' as const,
+        combinator: 'or' as const,
+        children: [{ id: 'b', type: 'rule' as const, field: 'n', operator: 'contains' as const, value: 'foo' } as any],
+      },
+    }
+    act(() => { result.current.replaceTree(restored) })
+
+    expect(result.current.tree.root.id).toBe('restored')
+    expect(result.current.appliedTree.root.id).toBe('restored')
+    expect(result.current.pendingErrors).toEqual([])
+    expect(onApply).toHaveBeenCalledWith(restored)
+  })
+
+  it('flush() advances appliedTree to the validated editor tree', () => {
+    const fields = [{ key: 'n', label: 'Name', type: 'text' as const }]
+    const { result } = renderHook(() => useAdvancedFilterTree({ initial: createEmptyTree(), fields, onApply: () => {} }))
+
+    act(() => { result.current.dispatch({ type: 'addRule', groupId: result.current.tree.root.id, defaultField: 'n' }) })
+    const ruleId = result.current.tree.root.children[0].id
+    act(() => { result.current.dispatch({ type: 'updateRule', ruleId, updates: { value: 'abc' } }) })
+
+    // Before flush: appliedTree still empty.
+    expect(result.current.appliedTree.root.children).toHaveLength(0)
+
+    act(() => { result.current.flush() })
+
+    expect(result.current.appliedTree.root.children).toHaveLength(1)
+  })
+})

package/src/backend/hooks/useAdvancedFilter.ts

@@ -2,6 +2,9 @@
 import * as React from 'react'
 import type { AdvancedFilterState, FilterCondition, FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
 import { createEmptyCondition, getDefaultOperator, normalizeAdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
+import type { AdvancedFilterTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+import { treeReducer, type TreeAction } from '../filters/treeReducer'
+import { validateTreeForApply, type ValidationError } from '../filters/filterValidation'
 
 export type UseAdvancedFilterOptions = {
   fields: FilterFieldDef[]
@@ -75,3 +78,130 @@ export function useAdvancedFilter({ fields, onChange }: UseAdvancedFilterOptions
     hasActiveConditions,
   }
 }
+
+export type UseAdvancedFilterTreeArgs = {
+  initial: AdvancedFilterTree
+  fields: FilterFieldDef[]
+  /**
+   * Optional side-effect that fires whenever the tree is validated and applied
+   * (debounced auto-apply, explicit `flush()`, `clear()`, or `replaceTree()`).
+   * Use this for non-state effects such as resetting the page index when the
+   * filter changes. State propagation should read `appliedTree` directly — the
+   * hook is the single source of truth and the page MUST NOT keep a parallel
+   * copy.
+   */
+  onApply?: (tree: AdvancedFilterTree) => void
+  debounceMs?: number
+}
+
+export type UseAdvancedFilterTreeResult = {
+  /** In-progress editor tree. Bound to the filter panel's `value` / `onChange`. */
+  tree: AdvancedFilterTree
+  /**
+   * Last validated, applied tree. Bound to URL serialization, query requests,
+   * active chips, and the filter-aware empty-state. Lags `tree` by `debounceMs`
+   * while the user is typing in an editor; advances immediately on `flush()`,
+   * `clear()`, and `replaceTree()`.
+   */
+  appliedTree: AdvancedFilterTree
+  setTree: (t: AdvancedFilterTree) => void
+  dispatch: (a: TreeAction) => void
+  pendingErrors: ValidationError[]
+  flush: () => void
+  clear: () => void
+  /**
+   * Replace BOTH the editor and applied trees immediately, bypassing the
+   * debounce. Use this for perspective restoration and saved-filter apply —
+   * actions that semantically jump the filter to a new known-good state rather
+   * than building it up via user edits.
+   */
+  replaceTree: (next: AdvancedFilterTree) => void
+  hasActiveRules: boolean
+}
+
+/**
+ * Tree-shaped advanced filter state with debounced auto-apply, validation gating,
+ * and helpers for the CRM filter builder UI.
+ *
+ * **State ownership**: this hook is the single source of truth for the filter
+ * tree. The host page MUST NOT keep a parallel `useState<AdvancedFilterTree>` —
+ * read `appliedTree` for URL/query consumption and `tree` for the editor panel.
+ *
+ * - Debounced apply (default 400 ms) — fires only when the tree validates.
+ *   `appliedTree` advances and the optional `onApply(tree)` callback fires.
+ * - `pendingErrors` exposes the latest validation errors for inline UI rendering.
+ * - `flush()` applies immediately if valid; `clear()` empties root children.
+ * - `replaceTree(t)` jumps BOTH editor and applied trees (perspective restore).
+ * - `hasActiveRules` mirrors `tree.root.children.length > 0`.
+ */
+export function useAdvancedFilterTree({
+  initial,
+  fields,
+  onApply,
+  debounceMs = 400,
+}: UseAdvancedFilterTreeArgs): UseAdvancedFilterTreeResult {
+  const [tree, setTree] = React.useState<AdvancedFilterTree>(initial)
+  const [appliedTree, setAppliedTree] = React.useState<AdvancedFilterTree>(initial)
+  const [pendingErrors, setPendingErrors] = React.useState<ValidationError[]>([])
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const didMountRef = React.useRef(false)
+  const onApplyRef = React.useRef(onApply)
+  const fieldsRef = React.useRef(fields)
+  React.useEffect(() => { onApplyRef.current = onApply }, [onApply])
+  React.useEffect(() => { fieldsRef.current = fields }, [fields])
+
+  const tryApply = React.useCallback((candidate: AdvancedFilterTree): boolean => {
+    const result = validateTreeForApply(candidate, fieldsRef.current)
+    if (result.ok) {
+      setPendingErrors([])
+      setAppliedTree(candidate)
+      onApplyRef.current?.(candidate)
+      return true
+    }
+    setPendingErrors(result.errors)
+    return false
+  }, [])
+
+  React.useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true
+      return
+    }
+    if (timerRef.current) clearTimeout(timerRef.current)
+    const timer = setTimeout(() => { tryApply(tree) }, debounceMs)
+    timerRef.current = timer
+    return () => clearTimeout(timer)
+  }, [tree, debounceMs, tryApply])
+
+  const dispatch = React.useCallback((action: TreeAction) => {
+    setTree((prev) => treeReducer(prev, action))
+  }, [])
+
+  const flush = React.useCallback(() => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    tryApply(tree)
+  }, [tree, tryApply])
+
+  const clear = React.useCallback(() => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    setTree((prev) => {
+      const emptied: AdvancedFilterTree = { root: { ...prev.root, children: [] } }
+      setAppliedTree(emptied)
+      return emptied
+    })
+    setPendingErrors([])
+    onApplyRef.current?.({ root: { id: '', type: 'group', combinator: 'and', children: [] } })
+  }, [])
+
+  const replaceTree = React.useCallback((next: AdvancedFilterTree) => {
+    if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null }
+    setTree(next)
+    setAppliedTree(next)
+    setPendingErrors([])
+    onApplyRef.current?.(next)
+  }, [])
+
+  const hasActiveRules = tree.root.children.length > 0
+
+  return { tree, appliedTree, setTree, dispatch, pendingErrors, flush, clear, replaceTree, hasActiveRules }
+}

package/src/backend/inputs/ComboboxInput.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
 
 export type ComboboxOption = {
@@ -62,6 +63,9 @@ export function ComboboxInput({
   disabled = false,
   allowCustomValues = true,
 }: ComboboxInputProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.comboboxInput.placeholder', 'Type to search...')
+  const loadingLabel = t('ui.inputs.comboboxInput.loading', 'Loading suggestions…')
   const [input, setInput] = React.useState('')
   const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
   const [resolvedOptions, setResolvedOptions] = React.useState<ComboboxOption[]>([])
@@ -288,9 +292,9 @@ export function ComboboxInput({
       <input
         ref={inputRef}
         type="text"
-        className="w-full h-9 rounded border px-2 text-sm disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed"
+        className="w-full h-9 rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:shadow-focus focus-visible:border-foreground disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed"
         value={input}
-        placeholder={placeholder || 'Type to search...'}
+        placeholder={resolvedPlaceholder}
         autoFocus={autoFocus}
         data-crud-focus-target=""
         disabled={disabled}
@@ -319,32 +323,34 @@ export function ComboboxInput({
       />
 
       {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
-        <div className="absolute z-popover w-full mt-1 rounded border bg-popover shadow-lg max-h-48 sm:max-h-60 overflow-auto">
+        <div className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto">
           {loading && touched ? (
-            <div className="px-3 py-2 text-xs text-muted-foreground">Loading suggestions…</div>
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">{loadingLabel}</div>
           ) : (
-            filteredSuggestions.map((option, index) => (
-              <Button
-                key={option.value}
-                type="button"
-                variant="ghost"
-                size="sm"
-                className={[
-                  'w-full h-auto justify-start font-normal text-left flex flex-col items-start px-3 py-2',
-                  index === selectedIndex ? 'bg-accent' : '',
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-                onMouseDown={(event) => event.preventDefault()}
-                onClick={() => selectValue(option.value)}
-                onMouseEnter={() => setSelectedIndex(index)}
-              >
-                <span className="font-medium">{option.label}</span>
-                {option.description ? (
-                  <span className="text-xs text-muted-foreground">{option.description}</span>
-                ) : null}
-              </Button>
-            ))
+            <div className="flex flex-col gap-1">
+              {filteredSuggestions.map((option, index) => (
+                <Button
+                  key={option.value}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className={[
+                    'w-full h-auto justify-start font-normal text-left flex flex-col items-start rounded-lg p-2',
+                    index === selectedIndex ? 'bg-muted' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => selectValue(option.value)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                >
+                  <span className="font-medium text-foreground">{option.label}</span>
+                  {option.description ? (
+                    <span className="text-xs text-muted-foreground">{option.description}</span>
+                  ) : null}
+                </Button>
+              ))}
+            </div>
           )}
         </div>
       )}

package/src/backend/inputs/EventPatternInput.tsx

@@ -1,12 +1,19 @@
 "use client"
 
 import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { ComboboxInput, type ComboboxOption } from './ComboboxInput'
 import { useAvailableEvents } from './EventSelect'
 
 export interface EventPatternInputProps {
   value: string
   onChange: (pattern: string) => void
+  /**
+   * Placeholder hint shown when the field is empty. Defaults to a translated
+   * `ui.inputs.eventPatternInput.placeholder` key (English fallback
+   * `'sales.orders.created'`) — an example of a valid event id with wildcards.
+   * Pass a custom string to override per-surface.
+   */
   placeholder?: string
   disabled?: boolean
   categories?: Array<'crud' | 'lifecycle' | 'system' | 'custom'>
@@ -16,11 +23,13 @@ export interface EventPatternInputProps {
 export function EventPatternInput({
   value,
   onChange,
-  placeholder = 'sales.orders.created',
+  placeholder,
   disabled,
   categories,
   modules,
 }: EventPatternInputProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.eventPatternInput.placeholder', 'sales.orders.created')
   const { events } = useAvailableEvents({ categories, modules })
 
   const suggestions = React.useMemo<ComboboxOption[]>(
@@ -37,7 +46,7 @@ export function EventPatternInput({
     <ComboboxInput
       value={value}
       onChange={onChange}
-      placeholder={placeholder}
+      placeholder={resolvedPlaceholder}
       suggestions={suggestions}
       allowCustomValues={true}
       disabled={disabled}

package/src/backend/inputs/EventSelect.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCall } from '../utils/apiCall'
 import {
   Select,
@@ -32,7 +33,7 @@ export interface EventSelectProps {
   value: string
   /** Called when event is selected */
   onChange: (eventId: string) => void
-  /** Placeholder text when no event selected */
+  /** Placeholder text when no event selected. Defaults to a translated string. */
   placeholder?: string
   /** Additional CSS classes */
   className?: string
@@ -44,6 +45,8 @@ export interface EventSelectProps {
   modules?: string[]
   /** Whether to exclude events marked as excludeFromTriggers (default: true) */
   excludeTriggerExcluded?: boolean
+  /** Trigger size — defaults to `'default'` (DS row-height contract). */
+  size?: 'sm' | 'default' | 'lg'
 }
 
 /**
@@ -54,13 +57,19 @@ export interface EventSelectProps {
 export function EventSelect({
   value,
   onChange,
-  placeholder = 'Select an event...',
+  placeholder,
   className,
   disabled,
   categories,
   modules,
   excludeTriggerExcluded = true,
+  size = 'default',
 }: EventSelectProps) {
+  const t = useT()
+  const resolvedPlaceholder = placeholder ?? t('ui.inputs.eventSelect.placeholder', 'Select an event...')
+  const loadingPlaceholder = t('ui.inputs.eventSelect.loading', 'Loading...')
+  const emptyPlaceholder = t('ui.inputs.eventSelect.empty', 'No events available')
+
   // Fetch events from the API
   const { data: allEvents = [], isLoading } = useQuery({
     queryKey: ['declared-events', excludeTriggerExcluded],
@@ -115,9 +124,9 @@ export function EventSelect({
       onValueChange={(next) => onChange(next ?? '')}
       disabled={disabled || isLoading}
     >
-      <SelectTrigger size="lg" className={className}>
+      <SelectTrigger size={size} className={className}>
         <SelectValue
-          placeholder={isLoading ? 'Loading...' : isEmpty ? 'No events available' : placeholder}
+          placeholder={isLoading ? loadingPlaceholder : isEmpty ? emptyPlaceholder : resolvedPlaceholder}
         />
       </SelectTrigger>
       <SelectContent>