@asteby/metacore-runtime-react 49.5.0 → 49.7.0

package/src/business/product-picker.tsx

@@ -1,24 +1,17 @@
 // ProductPicker — una sola búsqueda para productos, llantas y variantes
 // (medida «205/55R16», SKU, código de barras, clave de proveedor). Benchmark §7.
-import { useCallback, useState } from 'react'
+// Configuración del <RecordPicker> compartido (mismas filas que la celda de
+// producto del DocumentEditor, ver product-options.tsx).
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Search } from 'lucide-react'
-import { Badge, Input } from '@asteby/metacore-ui'
-import { useFormatter } from './format'
-import { useAsyncSearch } from './use-async-search'
-import {
-    availableStock,
-    parseProductQuery,
-    type ProductQuery,
-    type ProductResult,
-    type ProductVariant,
-} from './product-search'
-import { EmptyState } from './feedback'
+import { RecordPicker } from '../record-picker'
+import { ProductHitRow, productHitKey, productHitLabel, useProductSearch, type ProductHit } from './product-options'
+import { availableStock, type ProductQuery, type ProductResult, type ProductVariant } from './product-search'
 
 export interface ProductPickerProps {
     /**
      * Búsqueda: recibe la consulta ya clasificada (`barcode` | `tire_size` |
-     * `text`) para que el backend elija el índice. Debe ser estable (useCallback).
+     * `text`) para que el backend elija el índice.
      */
     search: (query: Exclude<ProductQuery, { kind: 'empty' }>, signal: AbortSignal) => Promise<ProductResult[]>
     /** Se emite al elegir un producto o una variante concreta. */
@@ -35,6 +28,10 @@ export interface ProductPickerProps {
     disabled?: boolean
 }
 
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; para pantallas nuevas
+ * usa RecordPicker con `useProductSearch` / `ProductHitRow`.
+ */
 export function ProductPicker({
     search,
     onSelect,
@@ -47,125 +44,65 @@ export function ProductPicker({
     disabled,
 }: ProductPickerProps) {
     const { t } = useTranslation()
-    const fmt = useFormatter({ currency })
     const [text, setText] = useState('')
-    const parsed = parseProductQuery(text)
-    // Un código de barras es exacto: no se espera a 2 caracteres ni se debouncea mucho.
-    const run = useCallback(
-        (q: string, signal: AbortSignal) => {
-            const p = parseProductQuery(q)
-            return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal)
-        },
-        [search],
-    )
-    const { results, loading, error } = useAsyncSearch(text, run, {
-        minChars: parsed.kind === 'barcode' ? 8 : 2,
-        delay: parsed.kind === 'barcode' ? 0 : 250,
-    })
+    const [open, setOpen] = useState(false)
+    const { parsed, results, hits, loading, error, minChars } = useProductSearch(text, search)
 
+    const outOfStock = (h: ProductHit) => {
+        const stock = availableStock(h.variant ?? h.product, warehouseId)
+        return !allowOutOfStock && stock != null && stock <= 0
+    }
     const pick = (p: ProductResult, v?: ProductVariant) => {
-        const stock = availableStock(v ?? p, warehouseId)
-        if (!allowOutOfStock && stock != null && stock <= 0) return
+        if (outOfStock({ product: p, variant: v })) return
         onSelect(p, v)
         setText('')
     }
 
     return (
-        <div data-slot="product-picker" className="space-y-2">
-            <div className="relative">
-                <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
-                <Input
-                    autoFocus={autoFocus}
-                    disabled={disabled}
-                    className="pl-8"
-                    value={text}
-                    placeholder={placeholder ?? t('productPicker.placeholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' })}
-                    onChange={(e) => setText(e.target.value)}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' && autoSelectBarcode && parsed.kind === 'barcode' && results.length === 1) {
-                            e.preventDefault()
-                            const only = results[0]!
-                            const exact = only.variants?.find((v) => v.barcode === parsed.barcode)
-                            pick(only, exact)
-                        }
-                    }}
-                />
-            </div>
-
-            {parsed.kind === 'tire_size' && (
-                <p className="text-xs text-muted-foreground">
-                    {t('productPicker.tireSize', { defaultValue: 'Medida de llanta' })}: {parsed.tire.normalized}
-                </p>
-            )}
-            {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
-            {error && !loading && (
-                <p role="alert" className="text-sm text-destructive">
-                    {t('productPicker.error', { defaultValue: 'No se pudo buscar. Revisa tu conexión e inténtalo de nuevo.' })}
-                </p>
-            )}
-            {!loading && !error && parsed.kind !== 'empty' && text.trim().length >= 2 && results.length === 0 && (
-                <EmptyState
-                    title={t('productPicker.empty', { defaultValue: 'No encontramos ese producto' })}
-                    description={t('productPicker.emptyHint', { defaultValue: 'Prueba con otra medida, SKU o código de barras.' })}
-                />
-            )}
-
-            {results.length > 0 && (
-                <ul role="listbox" className="max-h-72 divide-y overflow-auto rounded-md border">
-                    {results.map((p) => {
-                        const stock = availableStock(p, warehouseId)
-                        const hasVariants = (p.variants?.length ?? 0) > 0
-                        return (
-                            <li key={p.id} role="option" aria-selected={false} className="px-2 py-1.5">
-                                <button
-                                    type="button"
-                                    className="flex w-full items-center justify-between gap-2 text-left disabled:opacity-50"
-                                    disabled={hasVariants || (!allowOutOfStock && stock != null && stock <= 0)}
-                                    onClick={() => pick(p)}
-                                >
-                                    <span>
-                                        <span className="block text-sm font-medium">{p.name}</span>
-                                        <span className="block text-xs text-muted-foreground">
-                                            {[p.sku, p.tire?.normalized, p.supplier_sku && `Prov. ${p.supplier_sku}`].filter(Boolean).join(' · ')}
-                                        </span>
-                                    </span>
-                                    <span className="flex items-center gap-2">
-                                        {stock != null && (
-                                            <Badge variant={stock > 0 ? 'success' : 'danger'}>
-                                                {stock > 0 ? t('productPicker.inStock', { defaultValue: '{{n}} disp.', n: stock }) : t('productPicker.outOfStock', { defaultValue: 'Sin existencia' })}
-                                            </Badge>
-                                        )}
-                                        {p.price != null && !hasVariants && <span className="text-sm tabular-nums">{fmt.money(p.price)}</span>}
-                                    </span>
-                                </button>
-                                {hasVariants && (
-                                    <ul className="mt-1 space-y-0.5 pl-3">
-                                        {p.variants!.map((v) => {
-                                            const vs = availableStock(v, warehouseId)
-                                            return (
-                                                <li key={v.id}>
-                                                    <button
-                                                        type="button"
-                                                        className="flex w-full items-center justify-between gap-2 rounded px-1 py-0.5 text-left text-sm hover:bg-accent disabled:opacity-50"
-                                                        disabled={!allowOutOfStock && vs != null && vs <= 0}
-                                                        onClick={() => pick(p, v)}
-                                                    >
-                                                        <span>{v.label}</span>
-                                                        <span className="flex items-center gap-2">
-                                                            {vs != null && <Badge variant={vs > 0 ? 'success' : 'danger'}>{vs}</Badge>}
-                                                            {(v.price ?? p.price) != null && <span className="tabular-nums">{fmt.money(v.price ?? p.price)}</span>}
-                                                        </span>
-                                                    </button>
-                                                </li>
-                                            )
-                                        })}
-                                    </ul>
-                                )}
-                            </li>
-                        )
-                    })}
-                </ul>
-            )}
-        </div>
+        <RecordPicker<ProductHit>
+            trigger="input"
+            slot="product-picker"
+            items={hits}
+            loading={loading}
+            error={error}
+            minChars={minChars}
+            query={text}
+            onQueryChange={setText}
+            open={open}
+            onOpenChange={setOpen}
+            getKey={productHitKey}
+            getLabel={productHitLabel}
+            renderItem={(hit) => <ProductHitRow hit={hit} warehouseId={warehouseId} currency={currency} />}
+            isItemDisabled={outOfStock}
+            onSelect={(hit) => pick(hit.product, hit.variant)}
+            onInputKeyDown={(e) => {
+                // Código de barras exacto con un único resultado: Enter lo elige.
+                if (e.key === 'Enter' && autoSelectBarcode && parsed.kind === 'barcode' && results.length === 1) {
+                    e.preventDefault()
+                    const only = results[0]!
+                    pick(only, only.variants?.find((v) => v.barcode === parsed.barcode))
+                    setOpen(false)
+                }
+            }}
+            disabled={disabled}
+            triggerProps={{ autoFocus }}
+            minListWidth="22rem"
+            placeholder={placeholder ?? t('productPicker.placeholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' })}
+            loadingText={t('common.searching', { defaultValue: 'Buscando…' })}
+            errorText={t('productPicker.error', { defaultValue: 'No se pudo buscar. Revisa tu conexión e inténtalo de nuevo.' })}
+            emptyText={
+                <span className="block space-y-0.5">
+                    <span className="block font-medium text-foreground">{t('productPicker.empty', { defaultValue: 'No encontramos ese producto' })}</span>
+                    <span className="block text-xs">{t('productPicker.emptyHint', { defaultValue: 'Prueba con otra medida, SKU o código de barras.' })}</span>
+                </span>
+            }
+            below={
+                parsed.kind === 'tire_size' ? (
+                    <p className="text-xs text-muted-foreground">
+                        {t('productPicker.tireSize', { defaultValue: 'Medida de llanta' })}: {parsed.tire.normalized}
+                    </p>
+                ) : null
+            }
+        />
     )
 }

package/src/business/relate-documents.tsx

@@ -5,9 +5,9 @@
 // (p. ej. SAT 01/03/04) llegan por la prop `relationTypes`.
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link2, Search, X } from 'lucide-react'
-import { Badge, Button, Input } from '@asteby/metacore-ui'
-import { useAsyncSearch } from './use-async-search'
+import { Link2, X } from 'lucide-react'
+import { Badge, Button } from '@asteby/metacore-ui'
+import { RecordPicker, useLatestSearch } from '../record-picker'
 
 export interface RelatableDocument {
     id: string
@@ -40,7 +40,7 @@ export interface RelateDocumentsProps {
     onChange: (value: RelatedDocument[]) => void
     /** Catálogo de tipos de relación (lo aporta el addon). */
     relationTypes: RelationTypeOption[]
-    /** Búsqueda de documentos origen. Estable (useCallback). */
+    /** Búsqueda de documentos origen. */
     search: (q: string, signal: AbortSignal) => Promise<RelatableDocument[]>
     /** Tipo preseleccionado al agregar. Default: el primero del catálogo. */
     defaultRelationType?: string
@@ -66,8 +66,9 @@ export function RelateDocuments({
 }: RelateDocumentsProps) {
     const { t } = useTranslation()
     const [text, setText] = useState('')
+    const [open, setOpen] = useState(false)
     const [pendingType, setPendingType] = useState<string>(defaultRelationType ?? relationTypes[0]?.value ?? '')
-    const { results, loading, error } = useAsyncSearch(text, search, { minChars: 2 })
+    const searchFn = useLatestSearch(search)
     const full = max != null && value.length >= max
     const typeLabel = (v: string) => relationTypes.find((r) => r.value === v)?.label ?? v
 
@@ -121,17 +122,34 @@ export function RelateDocuments({
             )}
 
             {!full && !disabled && (
-                <div className="space-y-2">
-                    <div className="flex items-center gap-1.5">
-                        <div className="relative flex-1">
-                            <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
-                            <Input
-                                className="pl-8"
-                                value={text}
-                                placeholder={placeholder ?? t('relateDocuments.placeholder', { defaultValue: 'Buscar por folio o UUID' })}
-                                onChange={(e) => setText(e.target.value)}
-                            />
-                        </div>
+                // La búsqueda de documentos es el mismo <RecordPicker> de toda la
+                // plataforma (lista en portal, teclado, estados).
+                <RecordPicker<RelatableDocument>
+                    trigger="input"
+                    search={searchFn}
+                    minChars={2}
+                    query={text}
+                    onQueryChange={setText}
+                    open={open}
+                    onOpenChange={setOpen}
+                    getKey={(d) => d.id}
+                    getLabel={docTitle}
+                    isItemDisabled={(d) => value.some((x) => x.related_document_id === d.id)}
+                    renderItem={(d, { disabled: already }) => (
+                        <span className="flex w-full min-w-0 items-center justify-between gap-2">
+                            <span className="min-w-0">
+                                <span className="block truncate text-sm font-medium">{docTitle(d)}</span>
+                                {d.uuid && <span className="block break-all font-mono text-xs text-muted-foreground">{d.uuid}</span>}
+                            </span>
+                            {already && <Badge variant="muted">{t('relateDocuments.added', { defaultValue: 'Agregado' })}</Badge>}
+                        </span>
+                    )}
+                    onSelect={add}
+                    placeholder={placeholder ?? t('relateDocuments.placeholder', { defaultValue: 'Buscar por folio o UUID' })}
+                    loadingText={t('common.searching', { defaultValue: 'Buscando…' })}
+                    errorText={t('relateDocuments.error', { defaultValue: 'No se pudo buscar documentos. Inténtalo de nuevo.' })}
+                    emptyText={t('relateDocuments.empty', { defaultValue: 'No encontramos ese documento.' })}
+                    after={
                         <select
                             className={selectCls}
                             value={pendingType}
@@ -142,35 +160,8 @@ export function RelateDocuments({
                                 <option key={r.value} value={r.value}>{r.label}</option>
                             ))}
                         </select>
-                    </div>
-                    {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
-                    {error && !loading && (
-                        <p role="alert" className="text-sm text-destructive">
-                            {t('relateDocuments.error', { defaultValue: 'No se pudo buscar documentos. Inténtalo de nuevo.' })}
-                        </p>
-                    )}
-                    {!loading && !error && text.trim().length >= 2 && results.length === 0 && (
-                        <p className="text-sm text-muted-foreground">{t('relateDocuments.empty', { defaultValue: 'No encontramos ese documento.' })}</p>
-                    )}
-                    {results.length > 0 && (
-                        <ul role="listbox" className="max-h-64 divide-y overflow-auto rounded-md border">
-                            {results.map((d) => {
-                                const already = value.some((x) => x.related_document_id === d.id)
-                                return (
-                                    <li key={d.id} role="option" aria-selected={already}>
-                                        <button type="button" disabled={already} className="flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left hover:bg-accent disabled:opacity-50" onClick={() => add(d)}>
-                                            <span>
-                                                <span className="block text-sm font-medium">{docTitle(d)}</span>
-                                                {d.uuid && <span className="block break-all font-mono text-xs text-muted-foreground">{d.uuid}</span>}
-                                            </span>
-                                            {already && <Badge variant="muted">{t('relateDocuments.added', { defaultValue: 'Agregado' })}</Badge>}
-                                        </button>
-                                    </li>
-                                )
-                            })}
-                        </ul>
-                    )}
-                </div>
+                    }
+                />
             )}
         </div>
     )

package/src/business/vehicle-picker.tsx

@@ -1,17 +1,15 @@
 // VehiclePicker + alta rápida — busca por placa o VIN (y marca/modelo/cliente que
-// el host decida indexar) y reutiliza el <CreateRecordDialog> dinámico del modelo
-// vehículo para el alta rápida. Mismo contrato que <CustomerPicker>: controlado
+// el host decida indexar). Configuración del <RecordPicker> compartido: el alta
+// rápida (y la edición del elegido) reutiliza el <CreateRecordDialog> dinámico
+// del modelo vehículo. Mismo contrato que <CustomerPicker>: controlado
 // (`value` / `onChange`), `search` inyectado por el host, permisos con useCan
 // (sin <PermissionsProvider> no bloquea nada: el backend autoriza).
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Car, Plus, Search, X } from 'lucide-react'
-import { Button, Input } from '@asteby/metacore-ui'
-import { CreateRecordDialog } from '../dialogs/create-record-dialog'
-import { useApi } from '../api-context'
+import { Car } from 'lucide-react'
+import { RecordPicker, useLatestSearch } from '../record-picker'
+import { useRecordPickerDialog } from '../record-picker-dialog'
 import { useCan } from '../permissions-context'
-import { useAsyncSearch } from './use-async-search'
-import { EmptyState } from './feedback'
 
 export interface VehicleResult {
     id: string
@@ -31,7 +29,7 @@ export interface VehiclePickerProps {
     value: VehicleResult | null
     /** Evento único de cambio: vehículo elegido/creado, o `null` al limpiar. */
     onChange: (vehicle: VehicleResult | null) => void
-    /** Búsqueda por placa o VIN. Estable (useCallback). */
+    /** Búsqueda por placa o VIN. */
     search: (q: string, signal: AbortSignal) => Promise<VehicleResult[]>
     /** Modelo del kernel para el alta rápida. Default `Vehicle`. */
     model?: string
@@ -41,6 +39,8 @@ export interface VehiclePickerProps {
     mapRecord?: (rec: Record<string, unknown>) => VehicleResult
     /** Override de permiso (default `<model>.create` con useCan). */
     canCreate?: boolean
+    /** Override de permiso para editar al elegido (default `<model>.update`). */
+    canEdit?: boolean
     /** Valores iniciales del alta (p. ej. `customer_id` del cliente ya elegido). */
     createDefaults?: Record<string, unknown>
     disabled?: boolean
@@ -59,6 +59,10 @@ export function describeVehicle(v: VehicleResult): string {
     return [unit, v.plate, v.vin].filter(Boolean).join(' · ')
 }
 
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; se conserva para no
+ * romper consumidores.
+ */
 export function VehiclePicker({
     value,
     onChange,
@@ -67,23 +71,19 @@ export function VehiclePicker({
     endpoint,
     mapRecord,
     canCreate,
+    canEdit,
     createDefaults,
     disabled,
     placeholder,
 }: VehiclePickerProps) {
     const { t } = useTranslation()
-    const api = useApi()
     const can = useCan()
     const [text, setText] = useState('')
-    const [creating, setCreating] = useState(false)
-    const { results, loading, error } = useAsyncSearch(text, search, { minChars: 2 })
+    const [open, setOpen] = useState(false)
+    const searchFn = useLatestSearch(search)
     const mayCreate = canCreate ?? can(`${snake(model)}.create`)
-    const base = endpoint ?? `/data/${model}/me`
+    const mayEdit = canEdit ?? can(`${snake(model)}.update`)
 
-    const pick = (v: VehicleResult) => {
-        onChange(v)
-        setText('')
-    }
     const toResult = useCallback(
         (rec: Record<string, unknown>): VehicleResult =>
             mapRecord
@@ -100,89 +100,66 @@ export function VehiclePicker({
                   },
         [mapRecord],
     )
-
-    if (value) {
-        return (
-            <div data-slot="vehicle-picker" className="flex items-start justify-between gap-2 rounded-md border p-2">
-                <div className="flex items-start gap-2">
-                    <Car className="mt-0.5 size-4 text-muted-foreground" aria-hidden />
-                    <div>
-                        <p className="text-sm font-medium">{value.plate || value.vin || t('vehiclePicker.noPlate', { defaultValue: 'Sin placa' })}</p>
-                        <p className="text-xs text-muted-foreground">
-                            {[[value.make, value.model, value.year].filter((x) => x != null && x !== '').join(' '), value.vin && value.plate ? value.vin : '', value.customer_name]
-                                .filter(Boolean)
-                                .join(' · ')}
-                        </p>
-                    </div>
-                </div>
-                {!disabled && (
-                    <Button type="button" size="icon" variant="ghost" onClick={() => onChange(null)} aria-label={t('vehiclePicker.clear', { defaultValue: 'Quitar vehículo' })}>
-                        <X className="size-4" />
-                    </Button>
-                )}
-            </div>
-        )
-    }
+    const { openCreate, openEdit, dialog } = useRecordPickerDialog({
+        model,
+        endpoint,
+        prefillField: 'plate',
+        createDefaults,
+        onSaved: (rec, kind) => {
+            const next = toResult(rec)
+            onChange(kind === 'edit' && value ? { ...value, ...next } : next)
+            setText('')
+        },
+    })
 
     return (
-        <div data-slot="vehicle-picker" className="space-y-2">
-            <div className="flex items-center gap-1.5">
-                <div className="relative flex-1">
-                    <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
-                    <Input
-                        className="pl-8"
-                        disabled={disabled}
-                        value={text}
-                        placeholder={placeholder ?? t('vehiclePicker.placeholder', { defaultValue: 'Placa o VIN' })}
-                        onChange={(e) => setText(e.target.value)}
-                    />
-                </div>
-                {mayCreate && (
-                    <Button type="button" variant="outline" size="icon" disabled={disabled} onClick={() => setCreating(true)} aria-label={t('vehiclePicker.create', { defaultValue: 'Nuevo vehículo' })}>
-                        <Plus className="size-4" />
-                    </Button>
-                )}
-            </div>
-            {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
-            {error && !loading && (
-                <p role="alert" className="text-sm text-destructive">
-                    {t('vehiclePicker.error', { defaultValue: 'No se pudo buscar vehículos. Inténtalo de nuevo.' })}
-                </p>
-            )}
-            {!loading && !error && text.trim().length >= 2 && results.length === 0 && (
-                <EmptyState
-                    title={t('vehiclePicker.empty', { defaultValue: 'No encontramos ese vehículo' })}
-                    action={mayCreate ? { label: t('vehiclePicker.createAction', { defaultValue: 'Crear vehículo' }), onClick: () => setCreating(true) } : undefined}
-                />
-            )}
-            {results.length > 0 && (
-                <ul role="listbox" className="max-h-64 divide-y overflow-auto rounded-md border">
-                    {results.map((v) => (
-                        <li key={v.id} role="option" aria-selected={false}>
-                            <button type="button" className="flex w-full flex-col px-2 py-1.5 text-left hover:bg-accent" onClick={() => pick(v)}>
-                                <span className="text-sm font-medium">{v.plate || v.vin || v.id}</span>
-                                <span className="text-xs text-muted-foreground">{[describeVehicle({ ...v, plate: undefined }), v.customer_name].filter(Boolean).join(' · ')}</span>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            )}
-
-            {creating && (
-                <CreateRecordDialog
-                    modelKey={model}
-                    open={creating}
-                    onOpenChange={setCreating}
-                    endpoint={base}
-                    defaults={createDefaults ?? (text.trim() ? { plate: text.trim() } : undefined)}
-                    onCreate={async (data) => {
-                        const res = await api.post(base, data)
-                        const rec = (res.data?.data ?? res.data) as Record<string, unknown>
-                        pick(toResult(rec))
-                        return rec.id != null ? { id: String(rec.id) } : undefined
-                    }}
-                />
-            )}
-        </div>
+        <>
+            <RecordPicker<VehicleResult>
+                trigger="input"
+                slot="vehicle-picker"
+                search={searchFn}
+                minChars={2}
+                query={text}
+                onQueryChange={setText}
+                open={open}
+                onOpenChange={setOpen}
+                getKey={(v) => v.id}
+                getLabel={(v) => v.plate || v.vin || v.id}
+                getDescription={(v) => [describeVehicle({ ...v, plate: undefined }), v.customer_name].filter(Boolean).join(' · ')}
+                value={value?.id ?? null}
+                selected={value}
+                onSelect={(v) => onChange(v)}
+                onClear={disabled ? undefined : () => onChange(null)}
+                clearLabel={t('vehiclePicker.clear', { defaultValue: 'Quitar vehículo' })}
+                renderValue={(v) =>
+                    v ? (
+                        <span className="flex min-w-0 items-start gap-2">
+                            <Car className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />
+                            <span className="block min-w-0">
+                                <span className="block truncate text-sm font-medium">{v.plate || v.vin || t('vehiclePicker.noPlate', { defaultValue: 'Sin placa' })}</span>
+                                <span className="block truncate text-xs text-muted-foreground">
+                                    {[[v.make, v.model, v.year].filter((x) => x != null && x !== '').join(' '), v.vin && v.plate ? v.vin : '', v.customer_name]
+                                        .filter(Boolean)
+                                        .join(' · ')}
+                                </span>
+                            </span>
+                        </span>
+                    ) : null
+                }
+                disabled={disabled}
+                placeholder={placeholder ?? t('vehiclePicker.placeholder', { defaultValue: 'Placa o VIN' })}
+                loadingText={t('common.searching', { defaultValue: 'Buscando…' })}
+                errorText={t('vehiclePicker.error', { defaultValue: 'No se pudo buscar vehículos. Inténtalo de nuevo.' })}
+                emptyText={t('vehiclePicker.empty', { defaultValue: 'No encontramos ese vehículo' })}
+                entityLabel={t('vehiclePicker.entity', { defaultValue: 'vehículo' })}
+                createLabel={t('vehiclePicker.create', { defaultValue: 'Nuevo vehículo' })}
+                editLabel={t('vehiclePicker.edit', { defaultValue: 'Editar vehículo' })}
+                createFooter="empty"
+                createFooterLabel={() => t('vehiclePicker.createAction', { defaultValue: 'Crear vehículo' })}
+                onCreate={mayCreate ? (q) => openCreate(q) : undefined}
+                onEdit={mayEdit && value ? () => openEdit(value.id) : undefined}
+            />
+            {dialog}
+        </>
     )
 }