@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/inputs/ComboboxInput.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import * as React from 'react'
+
+export type ComboboxOption = {
+  value: string
+  label: string
+  description?: string | null
+}
+
+export type ComboboxInputProps = {
+  value: string
+  onChange: (next: string) => void
+  placeholder?: string
+  suggestions?: Array<string | ComboboxOption>
+  loadSuggestions?: (query?: string) => Promise<Array<string | ComboboxOption>>
+  resolveLabel?: (value: string) => string
+  resolveDescription?: (value: string) => string | null | undefined
+  autoFocus?: boolean
+  disabled?: boolean
+  allowCustomValues?: boolean
+}
+
+function normalizeOptions(input?: Array<string | ComboboxOption>): ComboboxOption[] {
+  if (!Array.isArray(input)) return []
+  return input
+    .map((option) => {
+      if (typeof option === 'string') {
+        const trimmed = option.trim()
+        if (!trimmed) return null
+        return { value: trimmed, label: trimmed }
+      }
+      const value = typeof option.value === 'string' ? option.value.trim() : ''
+      if (!value) return null
+      return {
+        value,
+        label: option.label?.trim() || value,
+        description: option.description ?? null,
+      }
+    })
+    .filter((option): option is ComboboxOption => !!option)
+}
+
+export function ComboboxInput({
+  value,
+  onChange,
+  placeholder,
+  suggestions,
+  loadSuggestions,
+  resolveLabel,
+  resolveDescription,
+  autoFocus,
+  disabled = false,
+  allowCustomValues = true,
+}: ComboboxInputProps) {
+  const [input, setInput] = React.useState('')
+  const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [touched, setTouched] = React.useState(false)
+  const [showSuggestions, setShowSuggestions] = React.useState(false)
+  const [selectedIndex, setSelectedIndex] = React.useState(-1)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])
+
+  const optionMap = React.useMemo(() => {
+    const map = new Map<string, ComboboxOption>()
+    const register = (option: ComboboxOption) => {
+      if (!map.has(option.value)) {
+        map.set(option.value, option)
+      }
+    }
+    staticOptions.forEach(register)
+    asyncOptions.forEach(register)
+    if (value) {
+      const existing = map.get(value)
+      if (!existing) {
+        map.set(value, {
+          value,
+          label: resolveLabel?.(value) ?? value,
+          description: resolveDescription?.(value) ?? null,
+        })
+      }
+    }
+    return map
+  }, [asyncOptions, resolveDescription, resolveLabel, staticOptions, value])
+
+  const availableOptions = React.useMemo(() => {
+    return Array.from(optionMap.values())
+  }, [optionMap])
+
+  const filteredSuggestions = React.useMemo(() => {
+    const query = input.toLowerCase().trim()
+    if (!query) return availableOptions.slice(0, 8)
+    return availableOptions.filter((option) => {
+      const labelMatch = option.label.toLowerCase().includes(query)
+      const descMatch = option.description?.toLowerCase().includes(query)
+      return labelMatch || Boolean(descMatch)
+    }).slice(0, 8)
+  }, [availableOptions, input])
+
+  React.useEffect(() => {
+    if (!loadSuggestions || !touched || disabled) return
+    const query = input.trim()
+    let cancelled = false
+    const handle = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const items = await loadSuggestions(query)
+        if (!cancelled) {
+          setAsyncOptions(normalizeOptions(items))
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      window.clearTimeout(handle)
+    }
+  }, [disabled, input, loadSuggestions, touched])
+
+  // Sync input with value when value changes externally and input is not focused
+  React.useEffect(() => {
+    if (document.activeElement !== inputRef.current) {
+      const option = optionMap.get(value)
+      setInput(option?.label ?? value ?? '')
+    }
+  }, [value, optionMap])
+
+  const selectValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) return
+      const trimmed = nextValue.trim()
+      onChange(trimmed)
+      const option = optionMap.get(trimmed)
+      setInput(option?.label ?? trimmed)
+      setShowSuggestions(false)
+      setSelectedIndex(-1)
+    },
+    [disabled, onChange, optionMap]
+  )
+
+  const findOptionForInput = React.useCallback(
+    (raw: string): ComboboxOption | null => {
+      const query = raw.trim().toLowerCase()
+      if (!query) return null
+      for (const option of optionMap.values()) {
+        if (option.value === raw.trim()) return option
+        if (option.label.toLowerCase() === query) return option
+      }
+      return null
+    },
+    [optionMap]
+  )
+
+  const confirmSelection = React.useCallback(
+    (raw: string) => {
+      if (disabled) return
+      const option = findOptionForInput(raw)
+      if (option) {
+        selectValue(option.value)
+        return
+      }
+      if (!allowCustomValues) {
+        // Revert to current value if custom values not allowed
+        const currentOption = optionMap.get(value)
+        setInput(currentOption?.label ?? value ?? '')
+        setShowSuggestions(false)
+        return
+      }
+      selectValue(raw)
+    },
+    [allowCustomValues, disabled, findOptionForInput, optionMap, selectValue, value]
+  )
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        if (!showSuggestions) {
+          setShowSuggestions(true)
+          setSelectedIndex(0)
+        } else {
+          setSelectedIndex((prev) => Math.min(prev + 1, filteredSuggestions.length - 1))
+        }
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setSelectedIndex((prev) => Math.max(prev - 1, -1))
+      } else if (event.key === 'Enter') {
+        event.preventDefault()
+        if (selectedIndex >= 0 && filteredSuggestions[selectedIndex]) {
+          selectValue(filteredSuggestions[selectedIndex].value)
+        } else {
+          confirmSelection(input)
+        }
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        setShowSuggestions(false)
+        setSelectedIndex(-1)
+      }
+    },
+    [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]
+  )
+
+  return (
+    <div className="relative w-full">
+      <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"
+        value={input}
+        placeholder={placeholder || 'Type to search...'}
+        autoFocus={autoFocus}
+        data-crud-focus-target=""
+        disabled={disabled}
+        onFocus={() => {
+          setTouched(true)
+          setShowSuggestions(true)
+        }}
+        onChange={(event) => {
+          setTouched(true)
+          setInput(event.target.value)
+          setShowSuggestions(true)
+          setSelectedIndex(-1)
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          // Delay to allow click on suggestions
+          setTimeout(() => {
+            if (disabled) return
+            confirmSelection(input)
+          }, 200)
+        }}
+      />
+
+      {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
+        <div className="absolute z-50 w-full mt-1 rounded border bg-popover shadow-lg max-h-60 overflow-auto">
+          {loading && touched ? (
+            <div className="px-3 py-2 text-xs text-muted-foreground">Loading suggestions…</div>
+          ) : (
+            filteredSuggestions.map((option, index) => (
+              <button
+                key={option.value}
+                type="button"
+                className={[
+                  'w-full flex flex-col items-start px-3 py-2 text-sm transition text-left',
+                  index === selectedIndex ? 'bg-accent' : 'hover:bg-muted',
+                ]
+                  .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>
+      )}
+    </div>
+  )
+}

package/src/backend/inputs/LookupSelect.tsx

@@ -0,0 +1,247 @@
+"use client"
+
+import * as React from 'react'
+import { Loader2, Search, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type LookupSelectItem = {
+  id: string
+  title: string
+  subtitle?: string | null
+  badge?: string | null
+  icon?: React.ReactNode
+  disabled?: boolean
+  rightLabel?: string | null
+  description?: string | null
+}
+
+type LookupSelectProps = {
+  value: string | null
+  onChange: (next: string | null) => void
+  fetchItems?: (query: string) => Promise<LookupSelectItem[]>
+  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>
+  options?: LookupSelectItem[]
+  minQuery?: number
+  actionSlot?: React.ReactNode
+  onReady?: (controls: { setQuery: (value: string) => void }) => void
+  searchPlaceholder?: string
+  placeholder?: string
+  clearLabel?: string
+  emptyLabel?: string
+  loadingLabel?: string
+  selectLabel?: string
+  selectedLabel?: string
+  minQueryHintLabel?: string
+  startTypingLabel?: string
+  selectedHintLabel?: (id: string) => string
+  disabled?: boolean
+  loading?: boolean
+  defaultOpen?: boolean
+}
+
+export function LookupSelect({
+  value,
+  onChange,
+  fetchItems,
+  fetchOptions,
+  options,
+  minQuery = 2,
+  actionSlot,
+  onReady,
+  placeholder,
+  searchPlaceholder = placeholder ?? 'Search…',
+  clearLabel = 'Clear selection',
+  emptyLabel = 'No results',
+  loadingLabel = 'Searching…',
+  selectLabel = 'Select',
+  selectedLabel = 'Selected',
+  minQueryHintLabel,
+  startTypingLabel = 'Start typing to search.',
+  selectedHintLabel,
+  disabled = false,
+  loading: loadingProp = false,
+  defaultOpen = false,
+}: LookupSelectProps) {
+  const [query, setQuery] = React.useState('')
+  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])
+  const [loading, setLoading] = React.useState(false)
+  const [hasTyped, setHasTyped] = React.useState(defaultOpen)
+  const [error, setError] = React.useState<string | null>(null)
+  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)
+  const setQueryRef = React.useRef(setQuery)
+
+  React.useEffect(() => {
+    fetchItemsRef.current = fetchItems ?? fetchOptions
+  }, [fetchItems, fetchOptions])
+
+  React.useEffect(() => {
+    if (Array.isArray(options)) {
+      setItems(options)
+    }
+  }, [options])
+
+  React.useEffect(() => {
+    setQueryRef.current = setQuery
+    if (onReady) onReady({ setQuery })
+  }, [onReady, setQuery])
+
+  const shouldSearch =
+    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)
+  React.useEffect(() => {
+    if (disabled) {
+      setItems(options ?? [])
+      setLoading(false)
+      return
+    }
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | null = null
+    if (!shouldSearch) {
+      setItems(options ?? [])
+      setLoading(false)
+      setError(null)
+      return () => { cancelled = true }
+    }
+    setLoading(true)
+    setError(null)
+    timer = setTimeout(() => {
+      const requestId = Date.now()
+      const fetcher = fetchItemsRef.current
+      const loader = fetcher ?? (() => Promise.resolve(options ?? []))
+      loader(query.trim())
+        .then((result) => {
+          if (cancelled) return
+          setItems(result)
+        })
+        .catch((err) => {
+          if (cancelled) return
+          console.error('LookupSelect.fetchItems', err)
+          setError('error')
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false)
+        })
+      return requestId
+    }, 220)
+    return () => {
+      cancelled = true
+      if (timer) clearTimeout(timer)
+    }
+  }, [query, shouldSearch])
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+        <div className="relative flex-1">
+          <Search className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <input
+            className="w-full rounded border pl-8 pr-2 py-2 text-sm"
+            value={query}
+            onChange={(event) => {
+              setQuery(event.target.value)
+              setHasTyped(true)
+            }}
+            placeholder={searchPlaceholder}
+            disabled={disabled}
+          />
+        </div>
+        {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
+      </div>
+      {shouldSearch ? (
+        <div className="space-y-2">
+          {loading || loadingProp ? (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {loadingLabel}
+            </div>
+          ) : null}
+          {!loading && !loadingProp && !items.length ? (
+            <p className="text-xs text-muted-foreground">{emptyLabel}</p>
+          ) : null}
+          <div className="space-y-2 max-h-80 overflow-y-auto">
+            {items.map((item) => {
+              const isSelected = value === item.id
+              const handleSelect = () => {
+                if (item.disabled && !isSelected) return
+                onChange(item.id)
+              }
+              return (
+                <div
+                  key={item.id}
+                  className={cn(
+                    'flex gap-3 rounded border bg-card p-3 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                    isSelected ? 'border-primary/70 bg-primary/5' : 'hover:border-primary/50'
+                  )}
+                  role="button"
+                  tabIndex={item.disabled ? -1 : 0}
+                  onClick={handleSelect}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault()
+                      handleSelect()
+                    }
+                  }}
+                  aria-pressed={isSelected}
+                >
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded border bg-muted">
+                    {item.icon ?? <span className="text-muted-foreground">•</span>}
+                  </div>
+                  <div className="flex min-w-0 flex-1 flex-col gap-1">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium">{item.title}</div>
+                        {item.subtitle ? (
+                          <div className="text-xs text-muted-foreground truncate">{item.subtitle}</div>
+                        ) : null}
+                        {item.description ? (
+                          <div className="text-xs text-muted-foreground truncate">{item.description}</div>
+                        ) : null}
+                      </div>
+                      {item.rightLabel ? (
+                        <div className="shrink-0 text-xs font-medium text-muted-foreground">{item.rightLabel}</div>
+                      ) : null}
+                    </div>
+                    <div className="flex justify-end">
+                      <Button
+                        type="button"
+                        variant={isSelected ? 'secondary' : 'outline'}
+                        size="sm"
+                        className="shrink-0"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          handleSelect()
+                        }}
+                        disabled={item.disabled && !isSelected}
+                      >
+                        {isSelected ? selectedLabel : selectLabel}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          {value ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="w-fit gap-1 text-sm font-normal"
+              onClick={() => onChange(null)}
+            >
+              <X className="h-4 w-4" />
+              {clearLabel}
+            </Button>
+          ) : null}
+        </div>
+      ) : hasTyped ? (
+        <p className="text-xs text-muted-foreground">
+          {minQueryHintLabel ?? `Type at least ${minQuery} characters or paste an id to search.`}
+        </p>
+      ) : (
+        <p className="text-xs text-muted-foreground">{startTypingLabel}</p>
+      )}
+      {error ? <p className="text-xs text-destructive">{emptyLabel}</p> : null}
+    </div>
+  )
+}

package/src/backend/inputs/PhoneNumberField.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from 'react'
+
+export type PhoneDuplicateMatch = {
+  id: string
+  label: string
+  href: string
+}
+
+export type PhoneNumberFieldProps = {
+  value?: string | null
+  onValueChange: (next: string | undefined) => void
+  onDigitsChange?: (digits: string | null) => void
+  disabled?: boolean
+  autoFocus?: boolean
+  placeholder?: string
+  minDigits?: number
+  checkingLabel?: string
+  duplicateLabel?: (match: PhoneDuplicateMatch) => string
+  duplicateLinkLabel?: string
+  onDuplicateLookup?: (normalizedValue: string) => Promise<PhoneDuplicateMatch | null>
+}
+
+const DEFAULT_MIN_DIGITS = 6
+const DIGIT_PATTERN = /\d+/g
+
+const digitsOnly = (value: string): string => {
+  const matches = value.match(DIGIT_PATTERN)
+  return matches ? matches.join('') : ''
+}
+
+export function PhoneNumberField({
+  value,
+  onValueChange,
+  onDigitsChange,
+  disabled = false,
+  autoFocus,
+  placeholder,
+  minDigits = DEFAULT_MIN_DIGITS,
+  checkingLabel,
+  duplicateLabel,
+  duplicateLinkLabel,
+  onDuplicateLookup,
+}: PhoneNumberFieldProps) {
+  const [local, setLocal] = React.useState<string>(() => (value == null ? '' : String(value)))
+  const [duplicate, setDuplicate] = React.useState<PhoneDuplicateMatch | null>(null)
+  const [checking, setChecking] = React.useState(false)
+
+  React.useEffect(() => {
+    if (value == null || value === '') {
+      setLocal('')
+      onDigitsChange?.(null)
+      return
+    }
+    const nextValue = String(value)
+    setLocal(nextValue)
+    onDigitsChange?.(digitsOnly(nextValue) || null)
+  }, [value, onDigitsChange])
+
+  React.useEffect(() => {
+    if (!onDuplicateLookup || disabled) {
+      setDuplicate(null)
+      setChecking(false)
+      return
+    }
+    const digits = digitsOnly(local)
+    if (!digits || digits.length < minDigits) {
+      setDuplicate(null)
+      setChecking(false)
+      return
+    }
+
+    let cancelled = false
+    setChecking(true)
+    const handle = window.setTimeout(async () => {
+      try {
+        const match = await onDuplicateLookup(digits)
+        if (!cancelled) setDuplicate(match)
+      } catch {
+        if (!cancelled) setDuplicate(null)
+      } finally {
+        if (!cancelled) setChecking(false)
+      }
+    }, 350)
+
+    return () => {
+      cancelled = true
+      window.clearTimeout(handle)
+    }
+  }, [local, disabled, minDigits, onDuplicateLookup])
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const next = event.target.value
+      const cleanDigits = digitsOnly(next)
+      setLocal(next)
+      onValueChange(next.length ? next : undefined)
+      onDigitsChange?.(cleanDigits.length ? cleanDigits : null)
+    },
+    [onValueChange, onDigitsChange]
+  )
+
+  return (
+    <div className="space-y-2">
+      <input
+        type="tel"
+        className="w-full h-9 rounded border px-2 text-sm"
+        value={local}
+        onChange={handleChange}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        data-crud-focus-target=""
+      />
+      {!disabled && duplicate && duplicateLabel && duplicateLinkLabel ? (
+        <p className="text-xs text-amber-600">
+          {duplicateLabel(duplicate)}{' '}
+          <a className="font-medium text-primary underline underline-offset-2" href={duplicate.href}>
+            {duplicateLinkLabel}
+          </a>
+        </p>
+      ) : null}
+      {!disabled && !duplicate && checking && checkingLabel ? (
+        <p className="text-xs text-muted-foreground">{checkingLabel}</p>
+      ) : null}
+    </div>
+  )
+}