@asteby/metacore-runtime-react 49.3.1 → 49.5.0

package/dist/business/line-items-editor.js

@@ -2,18 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // DocumentLinesGrid — editor único de renglones (UX-2).
 // `LineItemsEditor` es el mismo componente: las props nuevas son opcionales.
 // Controlado: `value`/`onChange` con `LineItem[]`. Guardar = `serializeLineItems`.
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Heading, Minus, Plus, Search, StickyNote, Trash2 } from 'lucide-react';
+import { Heading, Minus, Plus, StickyNote, Trash2 } from 'lucide-react';
 import { Button, Input } from '@asteby/metacore-ui';
 import { useCan } from '../permissions-context';
 import { useFormatter } from './format';
-import { addProductLine, lineGridKeyCommand, } from './document-lines';
+import { addProductLine, applyProductToLine, lineGridKeyCommand, } from './document-lines';
 import { computeLine, computeTotals, makeLine, validateLineItems, } from './line-items';
-import { useAsyncSearch } from './use-async-search';
-import { parseProductQuery, } from './product-search';
+import { LineProductCell } from './line-product-cell';
 const num = (s) => (s.trim() === '' ? 0 : Number(s.replace(',', '.')) || 0);
-export function DocumentLinesGrid({ value, onChange, columns = ['discount'], policy, serverErrors, onValidate, onRequestProduct, search, priceSource = 'sale', mode = 'free', discountMode = 'percent', quantityStepper, mergeSameProduct = true, warehouseId, allowSections = true, readOnly = false, editPermission, currency, }) {
+export function DocumentLinesGrid({ value, onChange, columns = ['discount'], policy, serverErrors, onValidate, onRequestProduct, search, priceSource = 'sale', mode = 'free', discountMode = 'percent', quantityStepper, mergeSameProduct = true, warehouseId, allowSections = true, readOnly = false, editPermission, currency, showTotals = true, }) {
     const { t } = useTranslation();
     const can = useCan();
     const fmt = useFormatter({ currency });
@@ -46,41 +45,91 @@ export function DocumentLinesGrid({ value, onChange, columns = ['discount'], pol
     };
     const cell = (i, field) => errors[`${i}.${field}`];
     const warn = (i, field) => validation.warnings[`${i}.${field}`];
+    // Foco tras elegir: Enter en el buscador pasa a «Cant.» del renglón que
+    // recibió el producto (nuevo o sumado), como un editor de facturas pro.
+    const rootRef = useRef(null);
+    const [focusQty, setFocusQty] = useState(null);
+    useEffect(() => {
+        if (!focusQty)
+            return;
+        const el = rootRef.current?.querySelector(`[data-line-key="${focusQty}"] [data-cell="quantity"]`);
+        if (el) {
+            el.focus();
+            el.select?.();
+        }
+        setFocusQty(null);
+    }, [focusQty, value]);
+    const blankLine = () => makeLine(discountMode === 'amount' ? { discount_kind: 'amount' } : {});
+    /** Renglón vacío del final: el producto entra como renglón nuevo (o suma al mismo). */
     const pickProduct = (product, variant) => {
-        emit(addProductLine(value, product, variant, { priceSource, warehouseId, mergeSameProduct }));
+        const next = addProductLine(value, product, variant, { priceSource, warehouseId, mergeSameProduct });
+        emit(next);
+        const id = variant?.id ?? product.id;
+        const target = next.find((l) => l.kind === 'item' && l.product_id === id && !value.includes(l)) ?? next[next.length - 1];
+        if (target)
+            setFocusQty(target.key);
+    };
+    /** Renglón libre existente: el producto elegido en su celda llena ESE renglón. */
+    const fillLine = (idx, product, variant) => {
+        const cur = value[idx];
+        if (!cur)
+            return;
+        const filled = applyProductToLine(cur, product, variant, { priceSource, warehouseId });
+        emit(value.map((l, i) => (i === idx ? (discountMode === 'amount' ? { ...filled, discount_kind: 'amount' } : filled) : l)));
+        setFocusQty(cur.key);
+    };
+    /** Texto escrito en el renglón vacío sin elegir producto → renglón libre con esa descripción. */
+    const addFreeFromDraft = (description) => {
+        const line = { ...blankLine(), description };
+        emit([...value, line]);
+        setFocusQty(line.key);
     };
-    return (_jsxs("div", { "data-slot": "line-items-editor", "data-component": "DocumentLinesGrid", "data-mode": mode, className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/50 text-left text-xs text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-2 py-2", children: t('lineItems.description', { defaultValue: 'Descripción' }) }), show('unit') && _jsx("th", { className: "w-20 px-2 py-2", children: t('lineItems.unit', { defaultValue: 'Unidad' }) }), _jsx("th", { className: "w-36 px-2 py-2 text-right", children: t('lineItems.quantity', { defaultValue: 'Cant.' }) }), _jsx("th", { className: "w-32 px-2 py-2 text-right", children: priceSource === 'cost'
+    // Ancho mínimo = columnas fijas + un mínimo legible para «Descripción».
+    const minWidth = 260 +
+        (stepper ? 144 : 96) +
+        112 +
+        112 +
+        40 +
+        (show('discount') ? (discountMode === 'both' ? 128 : 96) : 0) +
+        (show('tax') ? 64 : 0) +
+        (show('unit') ? 80 : 0) +
+        (show('technician') ? 128 : 0) +
+        (show('lot') ? 112 : 0) +
+        (show('dot') ? 96 : 0);
+    const colCount = 1 + ['unit', 'discount', 'tax', 'technician', 'lot', 'dot'].filter(show).length + 4;
+    const descKeys = (e, i, l) => {
+        const cmd = lineGridKeyCommand(e.key, {
+            cellEmpty: !l.description.trim() && !l.product_id,
+            mode,
+        });
+        if (cmd === 'delete') {
+            e.preventDefault();
+            remove(i);
+        }
+        else if (cmd === 'add') {
+            e.preventDefault();
+            emit([...value, blankLine()]);
+        }
+    };
+    return (_jsxs("div", { ref: rootRef, "data-slot": "line-items-editor", "data-component": "DocumentLinesGrid", "data-mode": mode, className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border bg-card/40", children: _jsxs("table", { className: "w-full table-fixed border-collapse text-sm", style: { minWidth }, children: [_jsx("thead", { className: "border-b bg-muted/40 text-left text-xs font-medium text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: t('lineItems.description', { defaultValue: 'Descripción' }) }), show('unit') && _jsx("th", { className: "w-20 px-3 py-2 font-medium", children: t('lineItems.unit', { defaultValue: 'Unidad' }) }), _jsx("th", { className: (stepper ? 'w-36' : 'w-24') + ' px-3 py-2 text-right font-medium', children: t('lineItems.quantity', { defaultValue: 'Cant.' }) }), _jsx("th", { className: "w-28 px-3 py-2 text-right font-medium", children: priceSource === 'cost'
                                             ? t('lineItems.unitCost', { defaultValue: 'Costo unitario' })
-                                            : t('lineItems.unitPrice', { defaultValue: 'Precio' }) }), show('discount') && (_jsx("th", { className: "w-28 px-2 py-2 text-right", children: discountMode === 'amount'
+                                            : t('lineItems.unitPrice', { defaultValue: 'Precio' }) }), show('discount') && (_jsx("th", { className: (discountMode === 'both' ? 'w-32' : 'w-24') + ' px-3 py-2 text-right font-medium', children: discountMode === 'amount'
                                             ? t('lineItems.discountAmount', { defaultValue: 'Desc.' })
-                                            : t('lineItems.discount', { defaultValue: 'Desc. %' }) })), show('tax') && _jsx("th", { className: "w-20 px-2 py-2 text-right", children: t('lineItems.tax', { defaultValue: 'IVA %' }) }), show('technician') && _jsx("th", { className: "w-32 px-2 py-2", children: t('lineItems.technician', { defaultValue: 'Técnico' }) }), show('lot') && _jsx("th", { className: "w-28 px-2 py-2", children: t('lineItems.lot', { defaultValue: 'Lote' }) }), show('dot') && _jsx("th", { className: "w-24 px-2 py-2", children: "DOT" }), _jsx("th", { className: "w-32 px-2 py-2 text-right", children: t('lineItems.amount', { defaultValue: 'Importe' }) }), _jsx("th", { className: "w-10" })] }) }), _jsxs("tbody", { children: [value.map((l, i) => {
+                                            : t('lineItems.discount', { defaultValue: 'Desc. %' }) })), show('tax') && _jsx("th", { className: "w-16 px-3 py-2 text-right font-medium", children: t('lineItems.tax', { defaultValue: 'IVA %' }) }), show('technician') && _jsx("th", { className: "w-32 px-3 py-2 font-medium", children: t('lineItems.technician', { defaultValue: 'Técnico' }) }), show('lot') && _jsx("th", { className: "w-28 px-3 py-2 font-medium", children: t('lineItems.lot', { defaultValue: 'Lote' }) }), show('dot') && _jsx("th", { className: "w-24 px-3 py-2 font-medium", children: "DOT" }), _jsx("th", { className: "w-28 px-3 py-2 text-right font-medium", children: t('lineItems.amount', { defaultValue: 'Importe' }) }), _jsx("th", { className: "w-10", children: _jsx("span", { className: "sr-only", children: t('common.actions', { defaultValue: 'Acciones' }) }) })] }) }), _jsxs("tbody", { children: [value.map((l, i) => {
                                     if (l.kind !== 'item') {
-                                        return (_jsx("tr", { className: "border-t bg-muted/30", children: _jsxs("td", { colSpan: 99, className: "px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: l.description, disabled: locked, "aria-invalid": !!cell(i, 'description'), placeholder: l.kind === 'section' ? t('lineItems.sectionPlaceholder', { defaultValue: 'Sección' }) : t('lineItems.notePlaceholder', { defaultValue: 'Nota' }), className: l.kind === 'section' ? 'font-semibold' : 'italic', onChange: (e) => patch(i, { description: e.target.value }), onKeyDown: (e) => {
+                                        return (_jsx("tr", { className: "group border-t bg-muted/30", "data-line-key": l.key, children: _jsxs("td", { colSpan: 99, className: CELL, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: l.description, disabled: locked, "aria-invalid": !!cell(i, 'description'), placeholder: l.kind === 'section' ? t('lineItems.sectionPlaceholder', { defaultValue: 'Sección' }) : t('lineItems.notePlaceholder', { defaultValue: 'Nota' }), className: 'h-8 ' + (l.kind === 'section' ? 'font-semibold' : 'italic'), onChange: (e) => patch(i, { description: e.target.value }), onKeyDown: (e) => {
                                                                     const cmd = lineGridKeyCommand(e.key, { cellEmpty: !l.description.trim(), mode });
                                                                     if (cmd === 'delete') {
                                                                         e.preventDefault();
                                                                         remove(i);
                                                                     }
-                                                                } }), canAdd && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => remove(i), "aria-label": t('common.delete', { defaultValue: 'Eliminar' }), children: _jsx(Trash2, { className: "size-4" }) }))] }), cell(i, 'description') && _jsx("p", { className: "mt-1 text-xs text-destructive", children: cell(i, 'description') })] }) }, l.key));
+                                                                } }), canAdd && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: DELETE, onClick: () => remove(i), "aria-label": t('common.delete', { defaultValue: 'Eliminar' }), children: _jsx(Trash2, { className: "size-4" }) }))] }), cell(i, 'description') && _jsx("p", { className: "mt-1 text-xs text-destructive", children: cell(i, 'description') })] }) }, l.key));
                                     }
                                     const shown = view[i] ?? l;
                                     const a = computeLine(shown);
                                     const kind = shown.discount_kind ?? 'percent';
                                     const qtyMax = l.max_quantity;
-                                    return (_jsxs("tr", { className: "border-t align-top", "data-line-key": l.key, children: [_jsxs("td", { className: "px-2 py-1.5", children: [_jsx(Input, { value: l.description, disabled: locked, "aria-label": t('lineItems.description', { defaultValue: 'Descripción' }), "aria-invalid": !!cell(i, 'description'), onChange: (e) => patch(i, { description: e.target.value }), onKeyDown: (e) => {
-                                                            const cmd = lineGridKeyCommand(e.key, {
-                                                                cellEmpty: !l.description.trim() && !l.product_id,
-                                                                mode,
-                                                            });
-                                                            if (cmd === 'delete') {
-                                                                e.preventDefault();
-                                                                remove(i);
-                                                            }
-                                                            else if (cmd === 'add') {
-                                                                e.preventDefault();
-                                                                emit([...value, makeLine(discountMode === 'amount' ? { discount_kind: 'amount' } : {})]);
-                                                            }
-                                                        } }), (l.sku || l.unit) && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [l.sku, !show('unit') ? l.unit : ''].filter(Boolean).join(' · ') })), cell(i, 'description') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'description') })] }), show('unit') && (_jsx("td", { className: "px-2 py-1.5", children: _jsx(Input, { value: l.unit ?? '', disabled: locked, onChange: (e) => patch(i, { unit: e.target.value }) }) })), _jsxs("td", { className: "px-2 py-1.5", children: [stepper ? (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { type: "button", size: "icon", variant: "outline", className: "size-7", disabled: locked || toNum(l.quantity) <= (fromSource ? 0 : 1), "aria-label": t('lineItems.decreaseQty', { defaultValue: 'Disminuir cantidad' }), onClick: () => patch(i, { quantity: Math.max(fromSource ? 0 : 1, toNum(l.quantity) - 1) }), children: _jsx(Minus, { className: "size-3" }) }), _jsx(Input, { inputMode: "decimal", className: "h-8 w-14 text-right", value: String(l.quantity), disabled: locked, "aria-label": t('lineItems.quantity', { defaultValue: 'Cant.' }), "aria-invalid": !!cell(i, 'quantity'), onChange: (e) => {
+                                    return (_jsxs("tr", { className: "group border-t align-top transition-colors hover:bg-muted/30 focus-within:bg-muted/20", "data-line-key": l.key, children: [_jsxs("td", { className: CELL, children: [search && canAdd && !l.product_id ? (_jsx(LineProductCell, { search: search, text: l.description, onTextChange: (text) => patch(i, { description: text }), onPick: (p, v) => fillLine(i, p, v), onKeyDownClosed: (e) => descKeys(e, i, l), warehouseId: warehouseId, currency: currency, ariaLabel: t('lineItems.description', { defaultValue: 'Descripción' }), invalid: !!cell(i, 'description'), dataCell: "description" })) : (_jsx(Input, { value: l.description, disabled: locked, className: INPUT, "data-cell": "description", "aria-label": t('lineItems.description', { defaultValue: 'Descripción' }), "aria-invalid": !!cell(i, 'description'), onChange: (e) => patch(i, { description: e.target.value }), onKeyDown: (e) => descKeys(e, i, l) })), (l.sku || l.unit) && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [l.sku, !show('unit') ? l.unit : ''].filter(Boolean).join(' · ') })), cell(i, 'description') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'description') })] }), show('unit') && (_jsx("td", { className: CELL, children: _jsx(Input, { className: INPUT, value: l.unit ?? '', disabled: locked, onChange: (e) => patch(i, { unit: e.target.value }) }) })), _jsxs("td", { className: CELL, children: [stepper ? (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { type: "button", size: "icon", variant: "outline", className: "size-7", disabled: locked || toNum(l.quantity) <= (fromSource ? 0 : 1), "aria-label": t('lineItems.decreaseQty', { defaultValue: 'Disminuir cantidad' }), onClick: () => patch(i, { quantity: Math.max(fromSource ? 0 : 1, toNum(l.quantity) - 1) }), children: _jsx(Minus, { className: "size-3" }) }), _jsx(Input, { inputMode: "decimal", className: "h-8 w-14 text-right tabular-nums", "data-cell": "quantity", value: String(l.quantity), disabled: locked, "aria-label": t('lineItems.quantity', { defaultValue: 'Cant.' }), "aria-invalid": !!cell(i, 'quantity'), onChange: (e) => {
                                                                     let q = num(e.target.value);
                                                                     if (qtyMax != null && q > qtyMax)
                                                                         q = qtyMax;
@@ -90,72 +139,49 @@ export function DocumentLinesGrid({ value, onChange, columns = ['discount'], pol
                                                                 } }), _jsx(Button, { type: "button", size: "icon", variant: "outline", className: "size-7", disabled: locked || (qtyMax != null && toNum(l.quantity) >= qtyMax), "aria-label": t('lineItems.increaseQty', { defaultValue: 'Aumentar cantidad' }), onClick: () => {
                                                                     const next = toNum(l.quantity) + 1;
                                                                     patch(i, { quantity: qtyMax != null ? Math.min(next, qtyMax) : next });
-                                                                }, children: _jsx(Plus, { className: "size-3" }) })] })) : (_jsx(Input, { inputMode: "decimal", className: "text-right", value: String(l.quantity), disabled: locked, "aria-label": t('lineItems.quantity', { defaultValue: 'Cant.' }), "aria-invalid": !!cell(i, 'quantity'), onChange: (e) => patch(i, { quantity: num(e.target.value) }) })), cell(i, 'quantity') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'quantity') }), !cell(i, 'quantity') && warn(i, 'quantity') && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: warn(i, 'quantity') })] }), _jsxs("td", { className: "px-2 py-1.5", children: [_jsx(Input, { inputMode: "decimal", className: "text-right", value: String(l.unit_price), disabled: locked, "aria-label": priceSource === 'cost' ? t('lineItems.unitCost', { defaultValue: 'Costo unitario' }) : t('lineItems.unitPrice', { defaultValue: 'Precio' }), "aria-invalid": !!cell(i, 'unit_price'), onChange: (e) => patch(i, { unit_price: num(e.target.value) }) }), l.catalog_price != null && (_jsxs("p", { className: "mt-0.5 text-right text-xs text-muted-foreground", children: [t('lineItems.catalogPrice', { defaultValue: 'Catálogo' }), " ", fmt.money(l.catalog_price)] })), cell(i, 'unit_price') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'unit_price') }), !cell(i, 'unit_price') && warn(i, 'unit_price') && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: warn(i, 'unit_price') })] }), show('discount') && (_jsxs("td", { className: "px-2 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [discountMode === 'both' && (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-8 px-1.5", "aria-label": t('lineItems.discountKind', { defaultValue: 'Tipo de descuento' }), onClick: () => patch(i, { discount_kind: kind === 'amount' ? 'percent' : 'amount', discount: 0 }), children: kind === 'amount' ? '$' : '%' })), _jsx(Input, { inputMode: "decimal", className: "text-right", value: String(l.discount), disabled: locked, "aria-invalid": !!cell(i, 'discount'), onChange: (e) => patch(i, { discount: num(e.target.value), discount_kind: kind }) })] }), cell(i, 'discount') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'discount') })] })), show('tax') && (_jsx("td", { className: "px-2 py-1.5", children: _jsx(Input, { inputMode: "decimal", className: "text-right", value: String(Math.round(l.tax_rate * 10000) / 100), disabled: locked, onChange: (e) => patch(i, { tax_rate: num(e.target.value) / 100 }) }) })), show('technician') && (_jsx("td", { className: "px-2 py-1.5", children: _jsx(Input, { value: l.technician_id ?? '', disabled: locked, onChange: (e) => patch(i, { technician_id: e.target.value }) }) })), show('lot') && (_jsx("td", { className: "px-2 py-1.5", children: _jsx(Input, { value: l.lot ?? '', disabled: locked, onChange: (e) => patch(i, { lot: e.target.value }) }) })), show('dot') && (_jsx("td", { className: "px-2 py-1.5", children: _jsx(Input, { value: l.dot ?? '', disabled: locked, onChange: (e) => patch(i, { dot: e.target.value }) }) })), _jsx("td", { className: "px-2 py-2 text-right tabular-nums", "data-slot": "line-amount", children: fmt.money(a.net) }), _jsx("td", { className: "px-1 py-1.5", children: canAdd && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => remove(i), "aria-label": t('common.delete', { defaultValue: 'Eliminar' }), children: _jsx(Trash2, { className: "size-4" }) })) })] }, l.key));
-                                }), value.length === 0 && !search && (_jsx("tr", { children: _jsx("td", { colSpan: 99, className: "px-3 py-6 text-center text-muted-foreground", children: t('lineItems.empty', { defaultValue: 'Aún no hay renglones. Agrega un producto o un renglón libre.' }) }) })), canAdd && search && (_jsx(SearchRow, { search: search, warehouseId: warehouseId, currency: currency, onPick: pickProduct, onAddFree: () => emit([...value, makeLine(discountMode === 'amount' ? { discount_kind: 'amount' } : {})]) }))] })] }) }), validation.form && value.length > 0 && _jsx("p", { role: "alert", className: "text-sm text-destructive", children: validation.form }), undo && canAdd && (_jsxs("p", { className: "text-sm text-muted-foreground", children: [t('lineItems.removed', { defaultValue: 'Renglón eliminado.' }), ' ', _jsx("button", { type: "button", className: "underline", onClick: () => {
+                                                                }, children: _jsx(Plus, { className: "size-3" }) })] })) : (_jsx(Input, { inputMode: "decimal", className: NUM, "data-cell": "quantity", value: String(l.quantity), disabled: locked, "aria-label": t('lineItems.quantity', { defaultValue: 'Cant.' }), "aria-invalid": !!cell(i, 'quantity'), onChange: (e) => patch(i, { quantity: num(e.target.value) }) })), cell(i, 'quantity') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'quantity') }), !cell(i, 'quantity') && warn(i, 'quantity') && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: warn(i, 'quantity') })] }), _jsxs("td", { className: CELL, children: [_jsx(Input, { inputMode: "decimal", className: NUM, value: String(l.unit_price), disabled: locked, "aria-label": priceSource === 'cost' ? t('lineItems.unitCost', { defaultValue: 'Costo unitario' }) : t('lineItems.unitPrice', { defaultValue: 'Precio' }), "aria-invalid": !!cell(i, 'unit_price'), onChange: (e) => patch(i, { unit_price: num(e.target.value) }) }), l.catalog_price != null && (_jsxs("p", { className: "mt-0.5 truncate whitespace-nowrap text-right text-xs text-muted-foreground", children: [t('lineItems.catalogPrice', { defaultValue: 'Catálogo' }), " ", fmt.money(l.catalog_price)] })), cell(i, 'unit_price') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'unit_price') }), !cell(i, 'unit_price') && warn(i, 'unit_price') && _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: warn(i, 'unit_price') })] }), show('discount') && (_jsxs("td", { className: CELL, children: [_jsxs("div", { className: "flex items-center gap-1", children: [discountMode === 'both' && (_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-8 px-1.5", "aria-label": t('lineItems.discountKind', { defaultValue: 'Tipo de descuento' }), onClick: () => patch(i, { discount_kind: kind === 'amount' ? 'percent' : 'amount', discount: 0 }), children: kind === 'amount' ? '$' : '%' })), _jsx(Input, { inputMode: "decimal", className: NUM, value: String(l.discount), disabled: locked, "aria-invalid": !!cell(i, 'discount'), onChange: (e) => patch(i, { discount: num(e.target.value), discount_kind: kind }) })] }), cell(i, 'discount') && _jsx("p", { className: "mt-0.5 text-xs text-destructive", children: cell(i, 'discount') })] })), show('tax') && (_jsx("td", { className: CELL, children: _jsx(Input, { inputMode: "decimal", className: NUM, value: String(Math.round(l.tax_rate * 10000) / 100), disabled: locked, onChange: (e) => patch(i, { tax_rate: num(e.target.value) / 100 }) }) })), show('technician') && (_jsx("td", { className: CELL, children: _jsx(Input, { className: INPUT, value: l.technician_id ?? '', disabled: locked, onChange: (e) => patch(i, { technician_id: e.target.value }) }) })), show('lot') && (_jsx("td", { className: CELL, children: _jsx(Input, { className: INPUT, value: l.lot ?? '', disabled: locked, onChange: (e) => patch(i, { lot: e.target.value }) }) })), show('dot') && (_jsx("td", { className: CELL, children: _jsx(Input, { className: INPUT, value: l.dot ?? '', disabled: locked, onChange: (e) => patch(i, { dot: e.target.value }) }) })), _jsx("td", { className: "px-3 py-1.5 text-right align-top font-medium tabular-nums", "data-slot": "line-amount", children: _jsx("span", { className: "inline-flex h-8 items-center", children: fmt.money(a.net) }) }), _jsx("td", { className: "px-1 py-1.5 align-top", children: canAdd && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: DELETE, onClick: () => remove(i), "aria-label": t('common.delete', { defaultValue: 'Eliminar' }), children: _jsx(Trash2, { className: "size-4" }) })) })] }, l.key));
+                                }), value.length === 0 && !search && (_jsx("tr", { children: _jsx("td", { colSpan: 99, className: "px-3 py-6 text-center text-muted-foreground", children: t('lineItems.empty', { defaultValue: 'Aún no hay renglones. Agrega un producto o un renglón libre.' }) }) })), canAdd && search && (_jsx(DraftRow, { search: search, warehouseId: warehouseId, currency: currency, onPick: pickProduct, onFree: addFreeFromDraft, onAddBlank: () => emit([...value, blankLine()]), trailingCells: colCount - 1 }))] }), showTotals && (_jsxs("tfoot", { className: "border-t bg-muted/20 text-sm tabular-nums", "data-slot": "line-totals", children: [_jsx(TotalRow, { span: colCount - 2, label: t('lineItems.subtotal', { defaultValue: 'Subtotal' }), value: fmt.money(totals.subtotal) }), totals.discount > 0 && _jsx(TotalRow, { span: colCount - 2, label: t('lineItems.discountTotal', { defaultValue: 'Descuento' }), value: `-${fmt.money(totals.discount)}` }), totals.tax > 0 && _jsx(TotalRow, { span: colCount - 2, label: t('lineItems.taxTotal', { defaultValue: 'Impuestos' }), value: fmt.money(totals.tax), slot: "tax-total" }), _jsx(TotalRow, { span: colCount - 2, label: t('lineItems.total', { defaultValue: 'Total' }), value: fmt.money(totals.total), slot: "grand-total", strong: true })] }))] }) }), validation.form && value.length > 0 && _jsx("p", { role: "alert", className: "text-sm text-destructive", children: validation.form }), undo && canAdd && (_jsxs("p", { className: "text-sm text-muted-foreground", children: [t('lineItems.removed', { defaultValue: 'Renglón eliminado.' }), ' ', _jsx("button", { type: "button", className: "underline", onClick: () => {
                             emit(undo);
                             setUndo(null);
-                        }, children: t('lineItems.undo', { defaultValue: 'Deshacer' }) })] })), _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [canAdd ? (_jsxs("div", { className: "flex flex-wrap gap-2", children: [onRequestProduct && !search && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: onRequestProduct, children: [_jsx(Plus, { className: "mr-1 size-4" }), t('lineItems.addProduct', { defaultValue: 'Agregar producto' })] })), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => emit([...value, makeLine(discountMode === 'amount' ? { discount_kind: 'amount' } : {})]), children: [_jsx(Plus, { className: "mr-1 size-4" }), t('lineItems.addLine', { defaultValue: 'Renglón libre' })] }), allowSections && (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => emit([...value, makeLine({ kind: 'section' })]), children: [_jsx(Heading, { className: "mr-1 size-4" }), t('lineItems.addSection', { defaultValue: 'Sección' })] }), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => emit([...value, makeLine({ kind: 'note' })]), children: [_jsx(StickyNote, { className: "mr-1 size-4" }), t('lineItems.addNote', { defaultValue: 'Nota' })] })] }))] })) : (_jsx("span", {})), _jsxs("dl", { className: "min-w-56 space-y-0.5 text-sm tabular-nums", children: [_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("dt", { className: "text-muted-foreground", children: t('lineItems.subtotal', { defaultValue: 'Subtotal' }) }), _jsx("dd", { children: fmt.money(totals.subtotal) })] }), totals.discount > 0 && _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("dt", { className: "text-muted-foreground", children: t('lineItems.discountTotal', { defaultValue: 'Descuento' }) }), _jsxs("dd", { children: ["-", fmt.money(totals.discount)] })] }), totals.tax > 0 && _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("dt", { className: "text-muted-foreground", children: t('lineItems.taxTotal', { defaultValue: 'Impuestos' }) }), _jsx("dd", { "data-slot": "tax-total", children: fmt.money(totals.tax) })] }), _jsxs("div", { className: "flex justify-between gap-6 font-semibold", children: [_jsx("dt", { children: t('lineItems.total', { defaultValue: 'Total' }) }), _jsx("dd", { "data-slot": "grand-total", children: fmt.money(totals.total) })] })] })] })] }));
+                        }, children: t('lineItems.undo', { defaultValue: 'Deshacer' }) })] })), _jsx("div", { className: "flex flex-wrap items-center gap-3", children: canAdd ? (_jsxs("div", { className: "flex flex-wrap gap-1", children: [onRequestProduct && !search && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: onRequestProduct, children: [_jsx(Plus, { className: "mr-1 size-4" }), t('lineItems.addProduct', { defaultValue: 'Agregar producto' })] })), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => emit([...value, blankLine()]), children: [_jsx(Plus, { className: "mr-1 size-4" }), t('lineItems.addLine', { defaultValue: 'Renglón libre' })] }), allowSections && (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => emit([...value, makeLine({ kind: 'section' })]), children: [_jsx(Heading, { className: "mr-1 size-4" }), t('lineItems.addSection', { defaultValue: 'Sección' })] }), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => emit([...value, makeLine({ kind: 'note' })]), children: [_jsx(StickyNote, { className: "mr-1 size-4" }), t('lineItems.addNote', { defaultValue: 'Nota' })] })] }))] })) : null })] }));
 }
 /** Mismo componente. El nombre anterior sigue exportado. */
 export const LineItemsEditor = DocumentLinesGrid;
 function toNum(n) {
     return Number.isFinite(n) ? n : 0;
 }
-function SearchRow({ search, warehouseId, currency, onPick, onAddFree, }) {
+/**
+ * Renglón vacío del final, siempre listo para buscar: el buscador vive en la
+ * celda «Descripción» (no en una barra a todo lo ancho). Elegir agrega el
+ * producto; Enter con texto sin coincidencias lo agrega como renglón libre.
+ */
+function DraftRow({ search, warehouseId, currency, onPick, onFree, onAddBlank, trailingCells, }) {
     const { t } = useTranslation();
-    const fmt = useFormatter({ currency });
     const [text, setText] = useState('');
-    const [active, setActive] = useState(0);
-    const parsed = parseProductQuery(text);
-    const run = useMemo(() => {
-        return (q, signal) => {
-            const p = parseProductQuery(q);
-            return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal);
-        };
-    }, [search]);
-    const { results, loading } = useAsyncSearch(text, run, {
-        minChars: parsed.kind === 'barcode' ? 8 : 2,
-        delay: parsed.kind === 'barcode' ? 0 : 250,
-    });
-    const flat = results.flatMap((p) => (p.variants?.length ?? 0) > 0 ? p.variants.map((v) => ({ product: p, variant: v })) : [{ product: p, variant: undefined }]);
-    const open = flat.length > 0;
-    const choose = (idx) => {
-        const hit = flat[idx];
-        if (!hit)
-            return;
-        onPick(hit.product, hit.variant);
-        setText('');
-        setActive(0);
-    };
-    return (_jsx("tr", { className: "border-t", children: _jsx("td", { colSpan: 99, className: "px-2 py-1.5", 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, { className: "pl-8", value: text, role: "combobox", "aria-expanded": open, "aria-label": t('lineItems.searchProduct', { defaultValue: 'Buscar producto' }), placeholder: t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' }), onChange: (e) => {
-                            setText(e.target.value);
-                            setActive(0);
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'ArrowDown' && open) {
-                                e.preventDefault();
-                                setActive((n) => Math.min(flat.length - 1, n + 1));
-                                return;
-                            }
-                            if (e.key === 'ArrowUp' && open) {
-                                e.preventDefault();
-                                setActive((n) => Math.max(0, n - 1));
-                                return;
-                            }
-                            const cmd = lineGridKeyCommand(e.key, { suggestionsOpen: open, cellEmpty: !text.trim(), mode: 'free' });
-                            if (e.key === 'Enter' && open) {
-                                e.preventDefault();
-                                choose(active);
-                                return;
-                            }
-                            if (cmd === 'add' && !text.trim()) {
-                                e.preventDefault();
-                                onAddFree();
-                            }
-                        } }), open && (_jsx("ul", { role: "listbox", className: "absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover shadow-md", children: flat.map((hit, idx) => {
-                            const price = priceOf(hit.product, hit.variant, warehouseId);
-                            return (_jsx("li", { role: "option", "aria-selected": idx === active, children: _jsxs("button", { type: "button", className: 'flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left text-sm hover:bg-accent ' + (idx === active ? 'bg-accent' : ''), onMouseDown: (e) => e.preventDefault(), onClick: () => choose(idx), children: [_jsxs("span", { children: [_jsx("span", { className: "block font-medium", children: hit.variant ? `${hit.product.name} · ${hit.variant.label}` : hit.product.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: hit.variant?.sku ?? hit.product.sku })] }), price != null && _jsx("span", { className: "tabular-nums", children: fmt.money(price) })] }) }, `${hit.product.id}:${hit.variant?.id ?? ''}`));
-                        }) })), loading && _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t('common.searching', { defaultValue: 'Buscando…' }) })] }) }) }));
+    return (_jsxs("tr", { className: "border-t border-dashed", "data-slot": "line-draft-row", children: [_jsx("td", { className: CELL, children: _jsx(LineProductCell, { search: search, text: text, onTextChange: setText, onPick: (p, v) => {
+                        setText('');
+                        onPick(p, v);
+                    }, onKeyDownClosed: (e) => {
+                        if (e.key !== 'Enter')
+                            return;
+                        e.preventDefault();
+                        const typed = text.trim();
+                        setText('');
+                        if (typed)
+                            onFree(typed);
+                        else
+                            onAddBlank();
+                    }, warehouseId: warehouseId, currency: currency, ariaLabel: t('lineItems.searchProduct', { defaultValue: 'Buscar producto' }), placeholder: t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' }), className: "border-dashed bg-transparent shadow-none", dataCell: "search" }) }), Array.from({ length: trailingCells }, (_, i) => (_jsx("td", { "aria-hidden": true }, i)))] }));
 }
-function priceOf(p, v, _warehouseId) {
-    return v?.price ?? p.price;
+/** Fila de totales alineada a la columna «Importe». */
+function TotalRow({ span, label, value, slot, strong }) {
+    return (_jsxs("tr", { className: strong ? 'font-semibold' : 'text-muted-foreground', children: [_jsx("td", { colSpan: span, className: "px-3 py-1 text-right", children: label }), _jsx("td", { className: 'px-3 py-1 text-right ' + (strong ? 'text-base text-foreground' : 'text-foreground'), "data-slot": slot, children: value }), _jsx("td", {})] }));
 }
+/** Borrar renglón: aparece al pasar o enfocar la fila (siempre visible en móvil). */
+const DELETE = 'size-8 text-muted-foreground opacity-0 transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 max-sm:opacity-100';
+/** Celda densa: misma altura en todos los renglones. */
+const CELL = 'px-2 py-1.5 align-top';
+/** Inputs de celda: un poco más bajos que los del formulario (densidad de editor). */
+const INPUT = 'h-8';
+/** Numéricos: alineados a la derecha y con cifras tabulares. */
+const NUM = 'h-8 text-right tabular-nums';

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

@@ -0,0 +1,32 @@
+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;
+}
+export interface LineProductCellProps {
+    search: LineProductSearch;
+    /** Texto de la celda (la descripción del renglón, o el borrador del renglón vacío). */
+    text: string;
+    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…).
+     */
+    onKeyDownClosed?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    warehouseId?: string;
+    currency?: string;
+    placeholder?: string;
+    ariaLabel: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    className?: string;
+    /** Atributos de datos para que el grid ubique la celda (foco por teclado). */
+    dataCell?: string;
+}
+export declare const LineProductCell: import("react").ForwardRefExoticComponent<LineProductCellProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=line-product-cell.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } 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.
+//
+// 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 { 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';
+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.
+    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.' }) })) })] }));
+});

package/dist/dynamic-select-field.d.ts

@@ -73,7 +73,8 @@ export interface DynamicSelectFieldProps {
      */
     descriptionAsBadge?: boolean;
     /**
-     * Hide the inline "+" create affordance even when `field.ref` is set.
+     * Hide the inline create/edit affordances (joined "+" / pencil and the
+     * "Crear …" list footer) even when `field.ref` is set.
      * Useful for static / filtered lists where creating a new record is not
      * meaningful in context.
      */

package/dist/dynamic-select-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AA6CA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BA4BA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;AAMD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B,yFAAyF;IACzF,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,aAAoB,EACpB,kBAA0B,EAC1B,UAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,OAAe,GAClB,EAAE,uBAAuB,+BA8TzB;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AA6CA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BA4BA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;AAMD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B,yFAAyF;IACzF,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,aAAoB,EACpB,kBAA0B,EAC1B,UAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,OAAe,GAClB,EAAE,uBAAuB,+BA0VzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -25,10 +25,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { getOptionFilter } from './option-filter';
 import { useTranslation } from 'react-i18next';
-import { Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, InitialsAvatar, } from '@asteby/metacore-ui/primitives';
-import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react';
+import { Badge, Button, Command, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, InitialsAvatar, } from '@asteby/metacore-ui/primitives';
+import { Check, ChevronsUpDown, Loader2, ScanLine } from 'lucide-react';
 import { resolveColorCss } from '@asteby/metacore-ui/lib';
 import { BarcodeScanner } from './barcode-scanner';
+import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
 import { useDebouncedValue } from './use-debounced-value';
 import { useOptionsResolver } from './use-options-resolver';
@@ -193,9 +194,31 @@ export function DynamicSelectField({ field, value, onChange, onPick, seedOption,
     // via a decoupled window event the host listens for. On success the host
     // hands back the new record and we select it immediately. No host import →
     // no circular dependency; works for ANY dynamic_select with a `ref`.
+    // Inline-edit: with a value selected the joined pencil opens THAT record's
+    // edit modal through the sibling `metacore:edit-record` event (the host's
+    // RecordCreateBridge already listens for it). On save the trigger label
+    // refreshes from the returned record.
+    const openEdit = () => {
+        if (!fieldRef || !value || typeof window === 'undefined')
+            return;
+        setOpen(false);
+        window.dispatchEvent(new CustomEvent('metacore:edit-record', {
+            detail: {
+                model: fieldRef,
+                recordId: String(value),
+                onSaved: (rec) => {
+                    const id = String(value);
+                    const label = rec ? rec.name ?? rec.label ?? rec.title : undefined;
+                    if (label != null)
+                        setPicked({ ...(selectedOption ?? { id, value: id }), id, value: id, label: String(label), name: String(label) });
+                },
+            },
+        }));
+    };
     const openCreate = () => {
         if (!fieldRef || typeof window === 'undefined')
             return;
+        setOpen(false);
         window.dispatchEvent(new CustomEvent('metacore:create-record', {
             detail: {
                 model: fieldRef,
@@ -225,22 +248,29 @@ export function DynamicSelectField({ field, value, onChange, onPick, seedOption,
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the
     // "+" off-screen — it only "fit" once a short value was selected.
-    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open && !blockedByDependency, onOpenChange: (o) => { if (!blockedByDependency)
-                    setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, "aria-invalid": invalid || undefined, className: 'min-w-0 flex-1 justify-between font-normal' +
-                                (invalid ? ' border-destructive ring-1 ring-destructive/30' : ''), "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [value && selectedOption ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
-                                                ? (dependsHint || DEFAULT_DEPENDS_HINT)
-                                                : selectedLabel || ph('Buscar…') }), descriptionAsBadge && selectedOption?.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: selectedOption.description })) : null] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
-                        // Match the trigger width without an arbitrary Tailwind class
-                        // (those don't always survive a consuming app's Tailwind scan).
-                        style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: ph('Buscar…'), value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx(CommandEmpty, { children: useStatic
-                                                ? debounced
-                                                    ? 'Sin resultados'
-                                                    : 'Sin opciones'
-                                                : debounced
-                                                    ? 'Sin resultados'
-                                                    : 'Sin resultados — escribe para filtrar' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {
-                                                const isSel = String(opt.id) === String(value);
-                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsx(OptionLead, { option: opt, size: 24 }), descriptionAsBadge ? (_jsxs("div", { className: "ml-2 flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }), opt.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: opt.description })) : null] })) : (_jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] }))] }, String(opt.id)));
-                                            }) }))] })] }) })] }), scanEnabled && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: () => setScanOpen(true), title: "Escanear con la c\u00E1mara", "aria-label": "Escanear c\u00F3digo de barras con la c\u00E1mara", children: _jsx(ScanLine, { className: "size-4" }) })), fieldRef && !hideCreate && !useStatic && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: openCreate, title: `Crear ${field.label ?? fieldRef}`, "aria-label": `Crear ${field.label ?? fieldRef}`, children: _jsx(Plus, { className: "size-4" }) })), scanEnabled && (_jsx(BarcodeScanner, { open: scanOpen, onClose: () => setScanOpen(false), onDetected: handleScanDetected, continuous: false, position: "fixed", title: `Escanear ${field.label ?? ''}`.trim() }))] }));
+    const canMutate = !!fieldRef && !hideCreate && !useStatic;
+    const joined = canMutate && !blockedByDependency && hasRecordPickerAction(!!value, openCreate, openEdit);
+    const fieldName = field.label ? t(field.label, { defaultValue: field.label }) : fieldRef ?? '';
+    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", "data-slot": "dynamic-select", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center", children: [_jsxs(Popover, { open: open && !blockedByDependency, onOpenChange: (o) => { if (!blockedByDependency)
+                            setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, "aria-invalid": invalid || undefined, className: 'min-w-0 flex-1 justify-between font-normal' +
+                                        (joined ? ` ${JOINED_TRIGGER_CLASS}` : '') +
+                                        (invalid ? ' border-destructive ring-1 ring-destructive/30' : ''), "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [value && selectedOption ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
+                                                        ? (dependsHint || DEFAULT_DEPENDS_HINT)
+                                                        : selectedLabel || ph('Buscar…') }), descriptionAsBadge && selectedOption?.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: selectedOption.description })) : null] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
+                                // Portaled (never clipped by a table/modal overflow) and
+                                // collision-aware: flips above the trigger when there is no
+                                // room below. Match the trigger width without an arbitrary
+                                // Tailwind class (those don't always survive a consuming app's
+                                // Tailwind scan), with a floor so short cells stay readable.
+                                collisionPadding: 8, style: { width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: ph('Buscar…'), value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx("div", { className: "text-muted-foreground py-6 text-center text-sm", "data-slot": "picker-empty", children: useStatic
+                                                        ? debounced
+                                                            ? 'Sin resultados'
+                                                            : 'Sin opciones'
+                                                        : debounced
+                                                            ? 'Sin resultados'
+                                                            : 'Sin resultados — escribe para filtrar' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {
+                                                        const isSel = String(opt.id) === String(value);
+                                                        return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsx(OptionLead, { option: opt, size: 24 }), descriptionAsBadge ? (_jsxs("div", { className: "ml-2 flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }), opt.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: opt.description })) : null] })) : (_jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] }))] }, String(opt.id)));
+                                                    }) })), canMutate && !loading && (_jsx(PickerCreateItem, { label: fieldName, onSelect: openCreate }))] })] }) })] }), canMutate && !blockedByDependency && (_jsx(RecordPickerAction, { hasValue: !!value, label: fieldName, onCreate: openCreate, onEdit: openEdit }))] }), scanEnabled && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: () => setScanOpen(true), title: "Escanear con la c\u00E1mara", "aria-label": "Escanear c\u00F3digo de barras con la c\u00E1mara", children: _jsx(ScanLine, { className: "size-4" }) })), scanEnabled && (_jsx(BarcodeScanner, { open: scanOpen, onClose: () => setScanOpen(false), onDetected: handleScanDetected, continuous: false, position: "fixed", title: `Escanear ${field.label ?? ''}`.trim() }))] }));
 }
 export default DynamicSelectField;