@asteby/metacore-runtime-react 49.5.0 → 49.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 49.6.0
+
+### Minor Changes
+
+- 046d56f: `RecordPicker`: un solo selector de registro para todo el runtime. Búsqueda asíncrona (`search` con debounce/cancelación o `items` del resolver de opciones), estados cargando/vacío/error, selección simple y múltiple, crear (el «+» unido al trigger y «Crear …» al pie prellenado con el texto buscado) y editar el seleccionado (lápiz), opciones enriquecidas por props (avatar/iniciales, subtítulo, precio/stock), variantes `field`/`cell` y trigger `button`/`input` (texto libre), lista siempre en portal collision-aware por encima de los diálogos y teclado completo (↑/↓/Home/End/Enter/Esc/Tab) con ARIA combobox/listbox. `DynamicSelectField`, `EntitySelect`, `CustomerPicker`, `ProductPicker`, `VehiclePicker`, `LineProductCell`, `RelateDocuments`, `DynamicMultiSelectField` y el campo `search` legado del modal genérico pasan a ser configuraciones finas del primitivo (mismos props y exports; los wrappers quedan deprecados en JSDoc). Nuevos exports: `RecordPicker`, `useRecordSearch`, `useLatestSearch`, `useRecordPickerDialog`, `requestRecordCreate`/`requestRecordEdit`, `recordLabel`, `withSearchPrefill`, `OptionLead`/`OptionThumb`, `useProductSearch`/`ProductHitRow`. Las opciones son `role="option"` clicables sin `<button>` anidado (los tests que buscaban ese botón deben hacer click en la opción). Customer/Vehicle pickers suman el lápiz de edición del elegido (gateado por `<model>.update`).
+
 ## 49.5.0
 
 ### Minor Changes

package/dist/business/customer-picker.d.ts

@@ -17,7 +17,7 @@ export interface CustomerPickerProps {
     value: CustomerResult | null;
     /** Evento único de cambio: cliente elegido/creado, o `null` al limpiar. */
     onChange: (customer: CustomerResult | null) => void;
-    /** Búsqueda (nombre, ID fiscal, teléfono, placa, VIN). Estable (useCallback). */
+    /** Búsqueda (nombre, ID fiscal, teléfono, placa, VIN). */
     search: (q: string, signal: AbortSignal) => Promise<CustomerResult[]>;
     /** Modelo del kernel para el alta rápida. Default `Customer`. */
     model?: string;
@@ -29,11 +29,17 @@ export interface CustomerPickerProps {
     validateTaxId?: (taxId: string) => string | undefined;
     /** Overrides 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 rápida (p. ej. el texto buscado como nombre). */
     createDefaults?: Record<string, unknown>;
     currency?: string;
     disabled?: boolean;
     placeholder?: string;
 }
-export declare function CustomerPicker({ value, onChange, search, model, endpoint, mapRecord, validateTaxId, canCreate, createDefaults, currency, disabled, placeholder, }: CustomerPickerProps): import("react").JSX.Element;
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; se conserva para no
+ * romper consumidores.
+ */
+export declare function CustomerPicker({ value, onChange, search, model, endpoint, mapRecord, validateTaxId, canCreate, canEdit, createDefaults, currency, disabled, placeholder, }: CustomerPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=customer-picker.d.ts.map

package/dist/business/customer-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customer-picker.d.ts","sourceRoot":"","sources":["../../src/business/customer-picker.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,iFAAiF;IACjF,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAA;IACrE,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,cAAc,CAAA;IAC5D,sFAAsF;IACtF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACrD,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAkB,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAW,GACd,EAAE,mBAAmB,+BAkIrB"}
+{"version":3,"file":"customer-picker.d.ts","sourceRoot":"","sources":["../../src/business/customer-picker.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,0DAA0D;IAC1D,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAA;IACrE,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,cAAc,CAAA;IAC5D,sFAAsF;IACtF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACrD,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAQD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAkB,EAClB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,SAAS,EACT,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAW,GACd,EAAE,mBAAmB,+BAgHrB"}

package/dist/business/customer-picker.js

@@ -1,35 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // CustomerPicker + alta rápida — busca por nombre, RFC/ID fiscal, teléfono, placa
-// o VIN; muestra saldo, crédito y alertas (benchmark §7). El alta rápida reutiliza
+// o VIN; muestra saldo, crédito y alertas (benchmark §7). Configuración del
+// <RecordPicker> compartido: el alta rápida (y la edición del elegido) reutiliza
 // el <CreateRecordDialog> dinámico del modelo (formulario desde metadata).
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus, Search, X } from 'lucide-react';
-import { Badge, Button, Input } from '@asteby/metacore-ui';
-import { CreateRecordDialog } from '../dialogs/create-record-dialog';
-import { useApi } from '../api-context';
+import { Badge } from '@asteby/metacore-ui';
+import { RecordPicker, useLatestSearch } from '../record-picker';
+import { useRecordPickerDialog } from '../record-picker-dialog';
 import { useCan } from '../permissions-context';
 import { useFormatter } from './format';
-import { useAsyncSearch } from './use-async-search';
-import { EmptyState } from './feedback';
 function snake(model) {
     return model.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
 }
-export function CustomerPicker({ value, onChange, search, model = 'Customer', endpoint, mapRecord, validateTaxId, canCreate, createDefaults, currency, disabled, placeholder, }) {
+const customerLine = (c) => [c.tax_id, c.phone, c.plate, c.vin].filter(Boolean).join(' · ');
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; se conserva para no
+ * romper consumidores.
+ */
+export function CustomerPicker({ value, onChange, search, model = 'Customer', endpoint, mapRecord, validateTaxId, canCreate, canEdit, createDefaults, currency, disabled, placeholder, }) {
     const { t } = useTranslation();
-    const api = useApi();
     const can = useCan();
     const fmt = useFormatter({ currency });
     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 taxIdError = value?.tax_id && validateTaxId ? validateTaxId(value.tax_id) : undefined;
-    const pick = (c) => {
-        onChange(c);
-        setText('');
-    };
     const toResult = useCallback((rec) => mapRecord
         ? mapRecord(rec)
         : {
@@ -38,14 +36,19 @@ export function CustomerPicker({ value, onChange, search, model = 'Customer', en
             tax_id: typeof rec.tax_id === 'string' ? rec.tax_id : undefined,
             phone: typeof rec.phone === 'string' ? rec.phone : undefined,
         }, [mapRecord]);
-    if (value) {
-        const overLimit = value.credit_limit != null && (value.balance ?? 0) > value.credit_limit;
-        return (_jsxs("div", { "data-slot": "customer-picker", className: "space-y-1 rounded-md border p-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: value.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: [value.tax_id, value.phone, value.plate, value.vin].filter(Boolean).join(' · ') })] }), !disabled && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => onChange(null), "aria-label": t('customerPicker.clear', { defaultValue: 'Quitar cliente' }), children: _jsx(X, { className: "size-4" }) }))] }), _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [value.balance != null && value.balance !== 0 && (_jsxs(Badge, { variant: overLimit ? 'danger' : 'warning', children: [t('customerPicker.balance', { defaultValue: 'Adeudo' }), " ", fmt.money(value.balance)] })), value.credit_limit != null && (_jsxs(Badge, { variant: "muted", children: [t('customerPicker.credit', { defaultValue: 'Crédito' }), " ", fmt.money(value.credit_limit)] })), value.alerts?.map((a) => (_jsx(Badge, { variant: "danger", children: a }, a)))] }), taxIdError && _jsx("p", { role: "alert", className: "text-xs text-destructive", children: taxIdError })] }));
-    }
-    return (_jsxs("div", { "data-slot": "customer-picker", className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground", "aria-hidden": true }), _jsx(Input, { className: "pl-8", disabled: disabled, value: text, placeholder: placeholder ?? t('customerPicker.placeholder', { defaultValue: 'Nombre, RFC, teléfono, placa o VIN' }), onChange: (e) => setText(e.target.value) })] }), mayCreate && (_jsx(Button, { type: "button", variant: "outline", size: "icon", disabled: disabled, onClick: () => setCreating(true), "aria-label": t('customerPicker.create', { defaultValue: 'Nuevo cliente' }), children: _jsx(Plus, { className: "size-4" }) }))] }), loading && _jsx("p", { className: "text-sm text-muted-foreground", children: t('common.searching', { defaultValue: 'Buscando…' }) }), error && !loading && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: t('customerPicker.error', { defaultValue: 'No se pudo buscar clientes. Inténtalo de nuevo.' }) })), !loading && !error && text.trim().length >= 2 && results.length === 0 && (_jsx(EmptyState, { title: t('customerPicker.empty', { defaultValue: 'No encontramos a ese cliente' }), action: mayCreate ? { label: t('customerPicker.createAction', { defaultValue: 'Crear cliente' }), onClick: () => setCreating(true) } : undefined })), results.length > 0 && (_jsx("ul", { role: "listbox", className: "max-h-64 divide-y overflow-auto rounded-md border", children: results.map((c) => (_jsx("li", { role: "option", "aria-selected": false, children: _jsxs("button", { type: "button", className: "flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left hover:bg-accent", onClick: () => pick(c), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-sm font-medium", children: c.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: [c.tax_id, c.phone, c.plate, c.vin].filter(Boolean).join(' · ') })] }), c.balance != null && c.balance > 0 && _jsx(Badge, { variant: "warning", children: fmt.money(c.balance) })] }) }, c.id))) })), creating && (_jsx(CreateRecordDialog, { modelKey: model, open: creating, onOpenChange: setCreating, endpoint: base, defaults: createDefaults ?? (text.trim() ? { name: text.trim() } : undefined), onCreate: async (data) => {
-                    const res = await api.post(base, data);
-                    const rec = (res.data?.data ?? res.data);
-                    pick(toResult(rec));
-                    return rec.id != null ? { id: String(rec.id) } : undefined;
-                } }))] }));
+    const { openCreate, openEdit, dialog } = useRecordPickerDialog({
+        model,
+        endpoint,
+        prefillField: 'name',
+        createDefaults,
+        onSaved: (rec, kind) => {
+            const next = toResult(rec);
+            // Al editar se conservan saldo/crédito/alertas que el registro no trae.
+            onChange(kind === 'edit' && value ? { ...value, ...next } : next);
+            setText('');
+        },
+    });
+    const overLimit = !!value && value.credit_limit != null && (value.balance ?? 0) > value.credit_limit;
+    const below = value ? (_jsxs(_Fragment, { children: [(value.balance != null && value.balance !== 0) || value.credit_limit != null || value.alerts?.length ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [value.balance != null && value.balance !== 0 && (_jsxs(Badge, { variant: overLimit ? 'danger' : 'warning', children: [t('customerPicker.balance', { defaultValue: 'Adeudo' }), " ", fmt.money(value.balance)] })), value.credit_limit != null && (_jsxs(Badge, { variant: "muted", children: [t('customerPicker.credit', { defaultValue: 'Crédito' }), " ", fmt.money(value.credit_limit)] })), value.alerts?.map((a) => (_jsx(Badge, { variant: "danger", children: a }, a)))] })) : null, taxIdError && _jsx("p", { role: "alert", className: "text-xs text-destructive", children: taxIdError })] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(RecordPicker, { trigger: "input", slot: "customer-picker", search: searchFn, minChars: 2, query: text, onQueryChange: setText, open: open, onOpenChange: setOpen, getKey: (c) => c.id, getLabel: (c) => c.name, renderItem: (c) => (_jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium", children: c.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: customerLine(c) })] }), c.balance != null && c.balance > 0 && _jsx(Badge, { variant: "warning", children: fmt.money(c.balance) })] })), value: value?.id ?? null, selected: value, onSelect: (c) => onChange(c), onClear: disabled ? undefined : () => onChange(null), clearLabel: t('customerPicker.clear', { defaultValue: 'Quitar cliente' }), renderValue: (c) => c ? (_jsxs("span", { className: "block min-w-0", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: c.name }), customerLine(c) && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: customerLine(c) })] })) : null, below: below, disabled: disabled, placeholder: placeholder ?? t('customerPicker.placeholder', { defaultValue: 'Nombre, RFC, teléfono, placa o VIN' }), loadingText: t('common.searching', { defaultValue: 'Buscando…' }), errorText: t('customerPicker.error', { defaultValue: 'No se pudo buscar clientes. Inténtalo de nuevo.' }), emptyText: t('customerPicker.empty', { defaultValue: 'No encontramos a ese cliente' }), entityLabel: t('customerPicker.entity', { defaultValue: 'cliente' }), createLabel: t('customerPicker.create', { defaultValue: 'Nuevo cliente' }), editLabel: t('customerPicker.edit', { defaultValue: 'Editar cliente' }), createFooter: "empty", createFooterLabel: () => t('customerPicker.createAction', { defaultValue: 'Crear cliente' }), onCreate: mayCreate ? (q) => openCreate(q) : undefined, onEdit: mayEdit && value ? () => openEdit(value.id) : undefined }), dialog] }));
 }

package/dist/business/index.d.ts

@@ -11,6 +11,7 @@ export * from './refund';
 export * from './refund-destination';
 export * from './product-search';
 export * from './product-picker';
+export * from './product-options';
 export * from './customer-picker';
 export * from './catalog';
 export * from './return';

package/dist/business/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/business/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/business/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,UAAU,CAAA;AACxB,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA"}

package/dist/business/index.js

@@ -11,6 +11,7 @@ export * from './refund';
 export * from './refund-destination';
 export * from './product-search';
 export * from './product-picker';
+export * from './product-options';
 export * from './customer-picker';
 export * from './catalog';
 export * from './return';

package/dist/business/line-product-cell.d.ts

@@ -1,12 +1,9 @@
 import { type KeyboardEvent } from 'react';
-import { type ProductQuery, type ProductResult, type ProductVariant } from './product-search';
-export type LineProductSearch = (query: Exclude<ProductQuery, {
-    kind: 'empty';
-}>, signal: AbortSignal) => Promise<ProductResult[]>;
-export interface LineProductHit {
-    product: ProductResult;
-    variant?: ProductVariant;
-}
+import { type ProductHit, type ProductSearchFn } from './product-options';
+import type { ProductResult, ProductVariant } from './product-search';
+export type LineProductSearch = ProductSearchFn;
+/** @deprecated Alias de {@link ProductHit}. */
+export type LineProductHit = ProductHit;
 export interface LineProductCellProps {
     search: LineProductSearch;
     /** Texto de la celda (la descripción del renglón, o el borrador del renglón vacío). */
@@ -14,8 +11,9 @@ export interface LineProductCellProps {
     onTextChange: (text: string) => void;
     onPick: (product: ProductResult, variant?: ProductVariant) => void;
     /**
-     * Teclas que el buscador no consume (lista cerrada): el grid aplica sus
-     * comandos (Enter agrega, Supr en celda vacía borra…).
+     * Teclas que el buscador no consume (lista cerrada, Enter sin
+     * coincidencias…): el grid aplica sus comandos (Enter agrega, Supr en
+     * celda vacía borra…).
      */
     onKeyDownClosed?: (e: KeyboardEvent<HTMLInputElement>) => void;
     warehouseId?: string;

package/dist/business/line-product-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-product-cell.d.ts","sourceRoot":"","sources":["../../src/business/line-product-cell.tsx"],"names":[],"mappings":"AASA,OAAO,EAAgD,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAOxF,OAAO,EAAqC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEhI,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;AAElI,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,aAAa,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,iBAAiB,CAAA;IACzB,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;IAClE;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,eAAe,mHA2K1B,CAAA"}
+{"version":3,"file":"line-product-cell.d.ts","sourceRoot":"","sources":["../../src/business/line-product-cell.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAGhE,OAAO,EAKH,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAErE,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAA;AAE/C,+CAA+C;AAC/C,MAAM,MAAM,cAAc,GAAG,UAAU,CAAA;AAEvC,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,iBAAiB,CAAA;IACzB,uFAAuF;IACvF,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;IAClE;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,eAAe,mHA0C1B,CAAA"}

package/dist/business/line-product-cell.js

@@ -1,100 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 // LineProductCell — buscador de producto DENTRO de la celda «Descripción» de un
-// renglón (patrón de editor de facturas pro: Odoo/Holded/Linear). Ocupa solo su
-// celda; la lista de resultados va en un portal (Popover de Radix anclado al
-// input): nunca la recorta el overflow de la tabla ni del modal, queda por
-// encima del diálogo y se abre hacia arriba si abajo no hay espacio.
+// renglón (patrón de editor de facturas pro: Odoo/Holded/Linear). Es una
+// configuración del <RecordPicker> compartido (trigger «input», texto libre,
+// variante celda): ocupa solo su celda y la lista va en un portal — nunca la
+// recorta el overflow de la tabla ni del modal, queda por encima del diálogo y
+// se abre hacia arriba si abajo no hay espacio.
 //
 // Teclado: ↑/↓ recorren, Enter elige (el grid pasa el foco a «Cant.»), Esc
 // cierra, Tab cierra y avanza normal. El texto escrito sin elegir queda como
 // descripción libre (el renglón libre sigue funcionando igual).
-import { forwardRef, useId, useMemo, useRef, useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Loader2, Search } from 'lucide-react';
-import { Badge, Input, Popover, PopoverAnchor, PopoverContent } from '@asteby/metacore-ui/primitives';
-import { useFormatter } from './format';
-import { useAsyncSearch } from './use-async-search';
-import { useDebouncedValue } from '../use-debounced-value';
-import { availableStock, parseProductQuery } from './product-search';
+import { RecordPicker } from '../record-picker';
+import { ProductHitRow, productHitKey, productHitLabel, useProductSearch, } from './product-options';
 export const LineProductCell = forwardRef(function LineProductCell({ search, text, onTextChange, onPick, onKeyDownClosed, warehouseId, currency, placeholder, ariaLabel, disabled, invalid, className, dataCell }, ref) {
     const { t } = useTranslation();
-    const fmt = useFormatter({ currency });
-    const listId = useId();
-    const anchorRef = useRef(null);
-    // Solo se abre mientras se escribe: enfocar un renglón libre ya capturado no
-    // despliega «sin resultados» encima de la tabla.
+    // Solo se busca/abre mientras se escribe: enfocar un renglón libre ya
+    // capturado no despliega «sin resultados» encima de la tabla.
     const [typing, setTyping] = useState(false);
-    const [active, setActive] = useState(0);
-    const parsed = parseProductQuery(text);
-    const run = useMemo(() => (q, signal) => {
-        const p = parseProductQuery(q);
-        return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal);
-    }, [search]);
-    const minChars = parsed.kind === 'barcode' ? 8 : 2;
-    const delay = parsed.kind === 'barcode' ? 0 : 250;
-    const { results, loading: fetching } = useAsyncSearch(typing ? text : '', run, { minChars, delay });
-    // Mientras el debounce no alcanza lo escrito, la lista dice «Buscando…» y no
-    // un «sin coincidencias» prematuro.
-    const settled = useDebouncedValue(text.trim(), delay) === text.trim();
-    const loading = fetching || !settled;
-    const flat = useMemo(() => results.flatMap((p) => (p.variants?.length ?? 0) > 0 ? p.variants.map((v) => ({ product: p, variant: v })) : [{ product: p }]), [results]);
-    const queryReady = typing && text.trim().length >= minChars;
-    const open = queryReady && (loading || flat.length > 0 || text.trim().length >= 2);
-    const hasHits = flat.length > 0;
-    const close = () => {
-        setTyping(false);
-        setActive(0);
-    };
-    const choose = (idx) => {
-        const hit = flat[idx];
-        if (!hit)
-            return;
-        close();
-        onPick(hit.product, hit.variant);
-    };
-    const onKeyDown = (e) => {
-        if (open && hasHits) {
-            if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                setActive((n) => Math.min(flat.length - 1, n + 1));
-                return;
-            }
-            if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                setActive((n) => Math.max(0, n - 1));
-                return;
-            }
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                choose(active);
-                return;
-            }
-        }
-        if (open && e.key === 'Escape') {
-            // Cierra la lista sin cerrar el diálogo que la contiene.
-            e.preventDefault();
-            e.stopPropagation();
-            close();
-            return;
-        }
-        if (e.key === 'Tab')
-            close();
-        onKeyDownClosed?.(e);
-    };
-    return (_jsxs(Popover, { open: open, onOpenChange: (o) => !o && close(), children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { ref: anchorRef, className: "relative w-full min-w-0", "data-slot": "line-product-cell", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx(Input, { ref: ref, value: text, disabled: disabled, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && hasHits ? `${listId}-${active}` : undefined, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, autoComplete: "off", "data-cell": dataCell, placeholder: placeholder ?? t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' }), className: 'h-8 pl-8 ' + (className ?? ''), onChange: (e) => {
-                                onTextChange(e.target.value);
-                                setTyping(true);
-                                setActive(0);
-                            }, onBlur: () => close(), onKeyDown: onKeyDown })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 4, collisionPadding: 8, className: "p-1", "data-slot": "line-product-results", 
-                // El foco se queda en la celda: se sigue escribiendo mientras se ve la lista.
-                onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => {
-                    if (anchorRef.current?.contains(e.target))
-                        e.preventDefault();
-                }, style: { width: 'max(var(--radix-popover-trigger-width), 22rem)', maxWidth: 'calc(100vw - 1rem)' }, children: hasHits ? (_jsx("ul", { id: listId, role: "listbox", "aria-label": ariaLabel, className: "max-h-72 overflow-auto", children: flat.map((hit, idx) => {
-                        const price = hit.variant?.price ?? hit.product.price;
-                        const stock = availableStock(hit.variant ?? hit.product, warehouseId);
-                        const meta = [hit.variant?.sku ?? hit.product.sku, hit.product.tire?.normalized].filter(Boolean).join(' · ');
-                        return (_jsx("li", { id: `${listId}-${idx}`, role: "option", "aria-selected": idx === active, children: _jsxs("button", { type: "button", tabIndex: -1, className: 'flex w-full items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground ' +
-                                    (idx === active ? 'bg-accent text-accent-foreground' : ''), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActive(idx), onClick: () => choose(idx), children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium", children: hit.variant ? `${hit.product.name} · ${hit.variant.label}` : hit.product.name }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), _jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [stock != null && (_jsx(Badge, { variant: "secondary", className: "font-normal tabular-nums", children: stock })), price != null && _jsx("span", { className: "tabular-nums", children: fmt.money(price) })] })] }) }, `${hit.product.id}:${hit.variant?.id ?? ''}`));
-                    }) })) : loading ? (_jsxs("p", { className: "flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }), t('common.searching', { defaultValue: 'Buscando…' })] })) : (_jsx("p", { className: "px-2 py-3 text-sm text-muted-foreground", children: t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' }) })) })] }));
+    const { hits, loading, minChars } = useProductSearch(typing ? text : '', search, typing);
+    return (_jsx(RecordPicker, { trigger: "input", variant: "cell", freeText: true, anchorSlot: "line-product-cell", contentSlot: "line-product-results", minListWidth: "22rem", items: hits, loading: loading, minChars: minChars, query: text, onQueryChange: onTextChange, open: typing, onOpenChange: setTyping, getKey: productHitKey, getLabel: productHitLabel, renderItem: (hit) => _jsx(ProductHitRow, { hit: hit, warehouseId: warehouseId, currency: currency, compact: true }), onSelect: (hit) => onPick(hit.product, hit.variant), onUnhandledKeyDown: onKeyDownClosed, inputRef: ref, ariaLabel: ariaLabel, listLabel: ariaLabel, disabled: disabled, invalid: invalid, triggerClassName: className, triggerProps: { 'data-cell': dataCell }, placeholder: placeholder ?? t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' }), loadingText: t('common.searching', { defaultValue: 'Buscando…' }), emptyText: t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' }) }));
 });

package/dist/business/product-options.d.ts

@@ -0,0 +1,41 @@
+import { type ProductQuery, type ProductResult, type ProductVariant } from './product-search';
+/** A pickable row: a product, or one concrete variant of it. */
+export interface ProductHit {
+    product: ProductResult;
+    variant?: ProductVariant;
+}
+export type ProductSearchFn = (query: Exclude<ProductQuery, {
+    kind: 'empty';
+}>, signal: AbortSignal) => Promise<ProductResult[]>;
+/** Products with variants expand to one row per variant. */
+export declare function flattenProductHits(results: readonly ProductResult[]): ProductHit[];
+export declare const productHitKey: (h: ProductHit) => string;
+export declare const productHitLabel: (h: ProductHit) => string;
+export declare const productHitMeta: (h: ProductHit) => string;
+/**
+ * Classified product search: a barcode is exact (8+ digits, no debounce), the
+ * rest waits for 2 characters and 250ms. `search` needn't be memoized.
+ */
+export declare function useProductSearch(text: string, search: ProductSearchFn, enabled?: boolean): {
+    parsed: ProductQuery;
+    results: ProductResult[];
+    hits: ProductHit[];
+    loading: boolean;
+    error: boolean;
+    minChars: number;
+};
+/** Stock + price at the right of a product row. `compact` → bare stock count (table cell). */
+export declare function ProductHitTrailing({ hit, warehouseId, currency, compact, }: {
+    hit: ProductHit;
+    warehouseId?: string;
+    currency?: string;
+    compact?: boolean;
+}): import("react").JSX.Element;
+/** Option body: bold name (· variant), muted meta line, stock/price right. */
+export declare function ProductHitRow({ hit, warehouseId, currency, compact }: {
+    hit: ProductHit;
+    warehouseId?: string;
+    currency?: string;
+    compact?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=product-options.d.ts.map

package/dist/business/product-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-options.d.ts","sourceRoot":"","sources":["../../src/business/product-options.tsx"],"names":[],"mappings":"AAUA,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,cAAc,EACtB,MAAM,kBAAkB,CAAA;AAEzB,gEAAgE;AAChE,MAAM,WAAW,UAAU;IACvB,OAAO,EAAE,aAAa,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;CAC3B;AAED,MAAM,MAAM,eAAe,GAAG,CAC1B,KAAK,EAAE,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,EAC/C,MAAM,EAAE,WAAW,KAClB,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;AAE7B,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,GAAG,UAAU,EAAE,CAIlF;AAED,eAAO,MAAM,aAAa,GAAI,GAAG,UAAU,KAAG,MAAkD,CAAA;AAChG,eAAO,MAAM,eAAe,GAAI,GAAG,UAAU,KAAG,MACyB,CAAA;AACzE,eAAO,MAAM,cAAc,GAAI,GAAG,UAAU,KAAG,MAO3B,CAAA;AAEpB;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,UAAO;;;;;;;EAerF;AAED,8FAA8F;AAC9F,wBAAgB,kBAAkB,CAAC,EAC/B,GAAG,EACH,WAAW,EACX,QAAQ,EACR,OAAe,GAClB,EAAE;IACC,GAAG,EAAE,UAAU,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB,+BAsBA;AAED,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,+BAarJ"}

package/dist/business/product-options.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Product options for <RecordPicker>: one search (products, tires, variants)
+// and one option row (name · variant, SKU / tire size / supplier code, stock and
+// price on the right) shared by ProductPicker and the DocumentEditor's
+// LineProductCell — so both product pickers are configurations of the same
+// primitive instead of two hand-rolled lists.
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@asteby/metacore-ui/primitives';
+import { useLatestSearch, useRecordSearch } from '../record-picker';
+import { useFormatter } from './format';
+import { availableStock, parseProductQuery, } from './product-search';
+/** Products with variants expand to one row per variant. */
+export function flattenProductHits(results) {
+    return results.flatMap((p) => (p.variants?.length ?? 0) > 0 ? p.variants.map((v) => ({ product: p, variant: v })) : [{ product: p }]);
+}
+export const productHitKey = (h) => `${h.product.id}:${h.variant?.id ?? ''}`;
+export const productHitLabel = (h) => h.variant ? `${h.product.name} · ${h.variant.label}` : h.product.name;
+export const productHitMeta = (h) => [
+    h.variant?.sku ?? h.product.sku,
+    h.product.tire?.normalized,
+    h.product.supplier_sku && `Prov. ${h.product.supplier_sku}`,
+]
+    .filter(Boolean)
+    .join(' · ');
+/**
+ * Classified product search: a barcode is exact (8+ digits, no debounce), the
+ * rest waits for 2 characters and 250ms. `search` needn't be memoized.
+ */
+export function useProductSearch(text, search, enabled = true) {
+    const stable = useLatestSearch(search);
+    const parsed = parseProductQuery(text);
+    const run = useMemo(() => (q, signal) => {
+        const p = parseProductQuery(q);
+        return p.kind === 'empty' ? Promise.resolve([]) : stable(p, signal);
+    }, [stable]);
+    const minChars = parsed.kind === 'barcode' ? 8 : 2;
+    const delay = parsed.kind === 'barcode' ? 0 : 250;
+    const { results, loading, error, pending } = useRecordSearch(text, run, { minChars, delay, enabled });
+    const hits = useMemo(() => flattenProductHits(results), [results]);
+    return { parsed, results, hits, loading: loading || pending, error, minChars };
+}
+/** Stock + price at the right of a product row. `compact` → bare stock count (table cell). */
+export function ProductHitTrailing({ hit, warehouseId, currency, compact = false, }) {
+    const { t } = useTranslation();
+    const fmt = useFormatter({ currency });
+    const price = hit.variant?.price ?? hit.product.price;
+    const stock = availableStock(hit.variant ?? hit.product, warehouseId);
+    return (_jsxs(_Fragment, { children: [stock != null &&
+                (compact ? (_jsx(Badge, { variant: "secondary", className: "font-normal tabular-nums", children: stock })) : (_jsx(Badge, { variant: stock > 0 ? 'success' : 'danger', children: stock > 0
+                        ? t('productPicker.inStock', { defaultValue: '{{n}} disp.', n: stock })
+                        : t('productPicker.outOfStock', { defaultValue: 'Sin existencia' }) }))), price != null && _jsx("span", { className: "tabular-nums", children: fmt.money(price) })] }));
+}
+/** Option body: bold name (· variant), muted meta line, stock/price right. */
+export function ProductHitRow({ hit, warehouseId, currency, compact }) {
+    const meta = productHitMeta(hit);
+    return (_jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-3", children: [_jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-medium", children: productHitLabel(hit) }), meta && _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: meta })] }), _jsx("span", { className: "flex shrink-0 items-center gap-2", children: _jsx(ProductHitTrailing, { hit: hit, warehouseId: warehouseId, currency: currency, compact: compact }) })] }));
+}

package/dist/business/product-picker.d.ts

@@ -2,7 +2,7 @@ import { type ProductQuery, type ProductResult, type ProductVariant } from './pr
 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';
@@ -20,5 +20,9 @@ export interface ProductPickerProps {
     currency?: string;
     disabled?: boolean;
 }
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; para pantallas nuevas
+ * usa RecordPicker con `useProductSearch` / `ProductHitRow`.
+ */
 export declare function ProductPicker({ search, onSelect, warehouseId, autoSelectBarcode, allowOutOfStock, placeholder, autoFocus, currency, disabled, }: ProductPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=product-picker.d.ts.map

package/dist/business/product-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-picker.d.ts","sourceRoot":"","sources":["../../src/business/product-picker.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,cAAc,EACtB,MAAM,kBAAkB,CAAA;AAGzB,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;IAC1G,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;IACpE,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,iBAAwB,EACxB,eAAsB,EACtB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,GACX,EAAE,kBAAkB,+BA2HpB"}
+{"version":3,"file":"product-picker.d.ts","sourceRoot":"","sources":["../../src/business/product-picker.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE7G,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;IAC1G,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;IACpE,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,iBAAwB,EACxB,eAAsB,EACtB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,QAAQ,GACX,EAAE,kBAAkB,+BA+DpB"}

package/dist/business/product-picker.js

@@ -1,48 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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, } from './product-search';
-import { EmptyState } from './feedback';
+import { RecordPicker } from '../record-picker';
+import { ProductHitRow, productHitKey, productHitLabel, useProductSearch } from './product-options';
+import { availableStock } from './product-search';
+/**
+ * @deprecated Configuración fina de {@link RecordPicker}; para pantallas nuevas
+ * usa RecordPicker con `useProductSearch` / `ProductHitRow`.
+ */
 export function ProductPicker({ search, onSelect, warehouseId, autoSelectBarcode = true, allowOutOfStock = true, placeholder, autoFocus, currency, disabled, }) {
     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, signal) => {
-        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) => {
+        const stock = availableStock(h.variant ?? h.product, warehouseId);
+        return !allowOutOfStock && stock != null && stock <= 0;
+    };
     const pick = (p, v) => {
-        const stock = availableStock(v ?? p, warehouseId);
-        if (!allowOutOfStock && stock != null && stock <= 0)
+        if (outOfStock({ product: p, variant: v }))
             return;
         onSelect(p, v);
         setText('');
     };
-    return (_jsxs("div", { "data-slot": "product-picker", className: "space-y-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground", "aria-hidden": true }), _jsx(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);
-                            }
-                        } })] }), parsed.kind === 'tire_size' && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [t('productPicker.tireSize', { defaultValue: 'Medida de llanta' }), ": ", parsed.tire.normalized] })), loading && _jsx("p", { className: "text-sm text-muted-foreground", children: t('common.searching', { defaultValue: 'Buscando…' }) }), error && !loading && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: t('productPicker.error', { defaultValue: 'No se pudo buscar. Revisa tu conexión e inténtalo de nuevo.' }) })), !loading && !error && parsed.kind !== 'empty' && text.trim().length >= 2 && results.length === 0 && (_jsx(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 && (_jsx("ul", { role: "listbox", className: "max-h-72 divide-y overflow-auto rounded-md border", children: results.map((p) => {
-                    const stock = availableStock(p, warehouseId);
-                    const hasVariants = (p.variants?.length ?? 0) > 0;
-                    return (_jsxs("li", { role: "option", "aria-selected": false, className: "px-2 py-1.5", children: [_jsxs("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), children: [_jsxs("span", { children: [_jsx("span", { className: "block text-sm font-medium", children: p.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: [p.sku, p.tire?.normalized, p.supplier_sku && `Prov. ${p.supplier_sku}`].filter(Boolean).join(' · ') })] }), _jsxs("span", { className: "flex items-center gap-2", children: [stock != null && (_jsx(Badge, { variant: stock > 0 ? 'success' : 'danger', children: stock > 0 ? t('productPicker.inStock', { defaultValue: '{{n}} disp.', n: stock }) : t('productPicker.outOfStock', { defaultValue: 'Sin existencia' }) })), p.price != null && !hasVariants && _jsx("span", { className: "text-sm tabular-nums", children: fmt.money(p.price) })] })] }), hasVariants && (_jsx("ul", { className: "mt-1 space-y-0.5 pl-3", children: p.variants.map((v) => {
-                                    const vs = availableStock(v, warehouseId);
-                                    return (_jsx("li", { children: _jsxs("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), children: [_jsx("span", { children: v.label }), _jsxs("span", { className: "flex items-center gap-2", children: [vs != null && _jsx(Badge, { variant: vs > 0 ? 'success' : 'danger', children: vs }), (v.price ?? p.price) != null && _jsx("span", { className: "tabular-nums", children: fmt.money(v.price ?? p.price) })] })] }) }, v.id));
-                                }) }))] }, p.id));
-                }) }))] }));
+    return (_jsx(RecordPicker, { 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) => _jsx(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: _jsxs("span", { className: "block space-y-0.5", children: [_jsx("span", { className: "block font-medium text-foreground", children: t('productPicker.empty', { defaultValue: 'No encontramos ese producto' }) }), _jsx("span", { className: "block text-xs", children: t('productPicker.emptyHint', { defaultValue: 'Prueba con otra medida, SKU o código de barras.' }) })] }), below: parsed.kind === 'tire_size' ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: [t('productPicker.tireSize', { defaultValue: 'Medida de llanta' }), ": ", parsed.tire.normalized] })) : null }));
 }

package/dist/business/relate-documents.d.ts

@@ -26,7 +26,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;

package/dist/business/relate-documents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"relate-documents.d.ts","sourceRoot":"","sources":["../../src/business/relate-documents.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,kBAAkB;IAC/B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,6DAA6D;AAC7D,MAAM,WAAW,eAAe;IAC5B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,aAAa,EAAE,MAAM,CAAA;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,aAAa,EAAE,kBAAkB,EAAE,CAAA;IACnC,4DAA4D;IAC5D,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAA;IACxE,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,mBAAmB,EACnB,GAAG,EACH,QAAQ,EACR,WAAW,GACd,EAAE,oBAAoB,+BA+GtB;AAED,mFAAmF;AACnF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAEzI"}
+{"version":3,"file":"relate-documents.d.ts","sourceRoot":"","sources":["../../src/business/relate-documents.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,kBAAkB;IAC/B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,6DAA6D;AAC7D,MAAM,WAAW,eAAe;IAC5B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,aAAa,EAAE,MAAM,CAAA;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,aAAa,EAAE,kBAAkB,EAAE,CAAA;IACnC,qCAAqC;IACrC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAA;IACxE,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,mBAAmB,EACnB,GAAG,EACH,QAAQ,EACR,WAAW,GACd,EAAE,oBAAoB,+BAsGtB;AAED,mFAAmF;AACnF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,qBAAqB,GAAG,eAAe,CAAC,CAAC,CAEzI"}