@asteby/metacore-runtime-react 49.7.0 → 49.8.0

package/src/business/document-lines.ts

@@ -1,7 +1,7 @@
 // Helpers del editor único de renglones (DocumentLinesGrid / LineItemsEditor).
 // Puros: el componente solo pinta. `serializeLineItems` sigue siendo la puerta al backend.
 import { toAmount } from './format'
-import { makeLine, type LineItem } from './line-items'
+import { CATALOG_LINE_FIELDS, makeLine, type CatalogLineField, type LineCatalogSnapshot, type LineItem } from './line-items'
 import { availableStock, type ProductResult, type ProductVariant } from './product-search'
 
 export type PriceSource = 'sale' | 'cost' | 'origin'
@@ -33,21 +33,93 @@ export function applyProductToLine(
     const catalog = source === 'cost' ? (cost ?? list) : list
     // Nunca cantidad 0: un renglón vacío (o con la celda borrada) entra con 1.
     const qty = opts.quantity ?? toAmount(line.quantity)
+    const values = catalogLineValues(line, product, variant, source)
+    const { catalog_pending: _pending, ...rest } = line
     return {
-        ...line,
+        ...rest,
         kind: 'item',
         product_id: variant?.id ?? product.id,
-        sku: variant?.sku ?? product.sku,
-        description: variant ? `${product.name} · ${variant.label}` : product.name,
+        ...values,
         quantity: qty !== 0 ? qty : 1,
-        unit_price: priceFromProduct(product, variant, source),
         catalog_price: catalog,
         cost,
-        tax_rate: product.tax_rate ?? line.tax_rate ?? 0,
-        unit: product.unit ?? line.unit,
         extensions: product.extensions ? { ...(line.extensions ?? {}), ...product.extensions } : line.extensions,
         available: availableStock(src, opts.warehouseId) ?? availableStock(product, opts.warehouseId),
+        catalog: { ...values, product_ref: product.id, variant },
+    }
+}
+
+/**
+ * Lo que el producto escribe en los campos editables del renglón. Es EL mapeo
+ * producto → renglón: lo usan elegir, crear y editar desde la celda.
+ */
+function catalogLineValues(
+    line: LineItem,
+    product: ProductResult,
+    variant: ProductVariant | undefined,
+    source: PriceSource,
+): Pick<LineItem, CatalogLineField> {
+    return {
+        description: variant ? `${product.name} · ${variant.label}` : product.name,
+        sku: variant?.sku ?? product.sku,
+        unit_price: priceFromProduct(product, variant, source),
+        tax_rate: product.tax_rate ?? line.tax_rate ?? 0,
+        unit: product.unit ?? line.unit,
+    }
+}
+
+const sameValue = (a: unknown, b: unknown): boolean =>
+    typeof a === 'number' || typeof b === 'number' ? toAmount(a) === toAmount(b) : (a ?? '') === (b ?? '')
+
+/**
+ * Campos que el usuario cambió a mano respecto de lo que puso el catálogo
+ * («dirty» por campo). Sin foto (renglón libre, o cargado de un documento
+ * origen con sus propios precios) todo cuenta como capturado: nada se pisa.
+ */
+export function lineOverrides(line: LineItem): Set<CatalogLineField> {
+    const snap = line.catalog
+    if (!snap) return new Set(CATALOG_LINE_FIELDS)
+    return new Set(CATALOG_LINE_FIELDS.filter((f) => !sameValue(line[f], snap[f as keyof LineCatalogSnapshot])))
+}
+
+/**
+ * El producto del renglón cambió en el catálogo (se editó desde la celda):
+ * actualiza SOLO los campos que siguen igual a lo que el catálogo había puesto;
+ * lo que el usuario sobrescribió se respeta y el valor nuevo queda en
+ * `catalog_pending` para ofrecer «aplicar». Nunca toca la cantidad, el tope de
+ * lo pendiente ni el vínculo con el documento origen. Siempre refresca lo que
+ * no se captura en el renglón (precio de catálogo, costo, extensiones, existencia).
+ */
+export function refreshLineFromProduct(
+    line: LineItem,
+    product: ProductResult,
+    opts: { priceSource?: PriceSource; warehouseId?: string } = {},
+): LineItem {
+    const source = opts.priceSource ?? 'sale'
+    const variant = line.catalog?.variant
+    const fresh = applyProductToLine(line, product, variant, { ...opts, quantity: toAmount(line.quantity) })
+    const overrides = lineOverrides(line)
+    const next: LineItem = { ...fresh, product_id: line.product_id ?? fresh.product_id, quantity: line.quantity, max_quantity: line.max_quantity, source_line_id: line.source_line_id }
+    const pending: Partial<Pick<LineItem, CatalogLineField>> = {}
+    const values = catalogLineValues(line, product, variant, source)
+    for (const f of CATALOG_LINE_FIELDS) {
+        if (!overrides.has(f)) continue
+        // Respeta lo capturado; si el catálogo trae otro valor, se ofrece aplicarlo.
+        ;(next as any)[f] = line[f]
+        if (!sameValue(values[f], line[f])) (pending as any)[f] = values[f]
     }
+    // La foto avanza a los valores nuevos del catálogo: el override sigue siéndolo.
+    next.catalog = { ...values, product_ref: line.catalog?.product_ref ?? product.id, variant }
+    if (Object.keys(pending).length > 0) next.catalog_pending = pending
+    else delete next.catalog_pending
+    return next
+}
+
+/** «Aplicar» el aviso del catálogo: los valores pendientes entran al renglón. */
+export function applyCatalogPending(line: LineItem): LineItem {
+    if (!line.catalog_pending) return line
+    const { catalog_pending: pending, ...rest } = line
+    return { ...rest, ...pending }
 }
 
 /**

package/src/business/line-items-editor.tsx

@@ -3,13 +3,15 @@
 // Controlado: `value`/`onChange` con `LineItem[]`. Guardar = `serializeLineItems`.
 import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Heading, Minus, Plus, StickyNote, Trash2 } from 'lucide-react'
+import { Heading, Minus, Pencil, Plus, StickyNote, Trash2 } from 'lucide-react'
 import { Button, Input } from '@asteby/metacore-ui'
 import { useCan } from '../permissions-context'
 import { useFormatter } from './format'
 import {
     addProductLine,
+    applyCatalogPending,
     applyProductToLine,
+    refreshLineFromProduct,
     lineGridKeyCommand,
     type DocumentLinesMode,
     type PriceSource,
@@ -73,6 +75,26 @@ export interface DocumentLinesGridProps {
      * ya muestra sus propios totales (DocumentEditor) lo apaga.
      */
     showTotals?: boolean
+    /**
+     * Alta del producto desde la celda («+» y «Crear producto «texto»»). Resuelve
+     * con el producto guardado (o nada si se canceló): el renglón se llena con
+     * el mismo mapeo que al elegir uno existente.
+     */
+    onCreateProduct?: (query: string) => Promise<ProductResult | null | undefined>
+    /**
+     * Edición del producto del renglón (lápiz en la celda). Resuelve con el
+     * producto ya guardado: el renglón se actualiza salvo los campos que el
+     * usuario sobrescribió (ver `refreshLineFromProduct`).
+     */
+    onEditProduct?: (line: LineItem) => Promise<ProductResult | null | undefined>
+    /** Nombre del modelo de catálogo para «Crear …» / «Editar …» (default «producto»). */
+    productLabel?: string
+    /**
+     * Etiqueta visible de la unidad (`unit` → «pza»). Si devuelve vacío, la
+     * unidad no se muestra bajo el SKU (nunca la clave cruda). Sin esta prop se
+     * muestra el valor tal cual.
+     */
+    unitLabel?: (unit: string) => string | undefined
 }
 
 /** @deprecated Usa `DocumentLinesGridProps`. Es el mismo contrato. */
@@ -100,6 +122,10 @@ export function DocumentLinesGrid({
     editPermission,
     currency,
     showTotals = true,
+    onCreateProduct,
+    onEditProduct,
+    productLabel,
+    unitLabel,
 }: DocumentLinesGridProps) {
     const { t } = useTranslation()
     const can = useCan()
@@ -125,6 +151,12 @@ export function DocumentLinesGrid({
     const canAdd = !locked && !fromSource
     const [undo, setUndo] = useState<LineItem[] | null>(null)
 
+    // Crear/editar desde la celda resuelven DESPUÉS de un modal: se trabaja
+    // sobre los renglones de ese momento (no los del render que abrió el modal).
+    const latest = useRef(value)
+    latest.current = value
+    const entity = productLabel ?? t('lineItems.productEntity', { defaultValue: 'producto' })
+
     const emit = (next: LineItem[]) => {
         onChange(next)
         const priced = discountMode === 'amount' ? next.map((l) => (l.kind === 'item' ? { ...l, discount_kind: 'amount' as const } : l)) : next
@@ -132,7 +164,7 @@ export function DocumentLinesGrid({
     }
     const patch = (idx: number, p: Partial<LineItem>) => {
         if (discountMode === 'amount') p = { ...p, discount_kind: 'amount' }
-        emit(value.map((l, i) => (i === idx ? { ...l, ...p } : l)))
+        emit(value.map((l, i) => (i === idx ? withoutAnsweredPending({ ...l, ...p }, p) : l)))
     }
     const remove = (idx: number) => {
         setUndo(value)
@@ -159,23 +191,54 @@ export function DocumentLinesGrid({
     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: ProductResult, variant?: ProductVariant) => {
-        const next = addProductLine(value, product, variant, { priceSource, warehouseId, mergeSameProduct })
+    const pickProduct = (product: ProductResult, variant?: ProductVariant, base: LineItem[] = value) => {
+        const next = addProductLine(base, 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]
+        const target = next.find((l) => l.kind === 'item' && l.product_id === id && !base.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: number, product: ProductResult, variant?: ProductVariant) => {
-        const cur = value[idx]
+    const fillLine = (idx: number, product: ProductResult, variant?: ProductVariant, base: LineItem[] = value) => {
+        const cur = base[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' as const } : filled) : l)))
+        emit(base.map((l, i) => (i === idx ? (discountMode === 'amount' ? { ...filled, discount_kind: 'amount' as const } : filled) : l)))
         setFocusQty(cur.key)
     }
 
+    /**
+     * «Crear producto «texto»» / «+»: el alta del modelo de catálogo; al
+     * guardarse, el producto nuevo entra en ESE renglón (o en uno nuevo desde
+     * el renglón del final) y lo llena igual que al elegir uno existente.
+     */
+    const createProduct = onCreateProduct
+        ? async (query: string, lineKey?: string) => {
+              const product = await onCreateProduct(query)
+              if (!product) return
+              const base = latest.current
+              const idx = lineKey ? base.findIndex((l) => l.key === lineKey) : -1
+              if (idx >= 0 && !base[idx].product_id) fillLine(idx, product, undefined, base)
+              else pickProduct(product, undefined, base)
+          }
+        : undefined
+
+    /**
+     * Lápiz: edita el producto del renglón; al guardar, el renglón toma los
+     * valores nuevos salvo lo que el usuario sobrescribió (queda el aviso).
+     */
+    const editProduct = onEditProduct
+        ? async (line: LineItem) => {
+              const product = await onEditProduct(line)
+              if (!product) return
+              const base = latest.current
+              emit(base.map((l) => (l.key === line.key ? refreshLineFromProduct(l, product, { priceSource, warehouseId }) : l)))
+          }
+        : undefined
+
+    const unitText = (u?: string) => (!u ? undefined : unitLabel ? unitLabel(u) || undefined : u)
+
     /** Texto escrito en el renglón vacío sin elegir producto → renglón libre con esa descripción. */
     const addFreeFromDraft = (description: string) => {
         const line = { ...blankLine(), description }
@@ -296,21 +359,57 @@ export function DocumentLinesGrid({
                                                 ariaLabel={t('lineItems.description', { defaultValue: 'Descripción' })}
                                                 invalid={!!cell(i, 'description')}
                                                 dataCell="description"
+                                                onCreate={createProduct ? (q) => void createProduct(q, l.key) : undefined}
+                                                entityLabel={entity}
                                             />
                                         ) : (
-                                            <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)}
-                                            />
+                                            <div className="relative" data-slot="line-description">
+                                                <Input
+                                                    value={l.description}
+                                                    disabled={locked}
+                                                    className={INPUT + (editProduct && l.product_id && !locked ? ' pr-9' : '')}
+                                                    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)}
+                                                />
+                                                {editProduct && l.product_id && !locked && (
+                                                    <Button
+                                                        type="button"
+                                                        size="icon"
+                                                        variant="ghost"
+                                                        className={EDIT}
+                                                        data-slot="line-edit-product"
+                                                        aria-label={t('lineItems.editProduct', { defaultValue: 'Editar {{entity}}', entity })}
+                                                        title={t('lineItems.editProduct', { defaultValue: 'Editar {{entity}}', entity })}
+                                                        onClick={() => void editProduct(l)}
+                                                    >
+                                                        <Pencil className="size-3.5" />
+                                                    </Button>
+                                                )}
+                                            </div>
                                         )}
-                                        {(l.sku || l.unit) && (
-                                            <p className="mt-0.5 text-xs text-muted-foreground">{[l.sku, !show('unit') ? l.unit : ''].filter(Boolean).join(' · ')}</p>
+                                        {(l.sku || unitText(l.unit)) && (
+                                            <p className="mt-0.5 text-xs text-muted-foreground">{[l.sku, !show('unit') ? unitText(l.unit) : ''].filter(Boolean).join(' · ')}</p>
+                                        )}
+                                        {l.catalog_pending && !locked && (
+                                            <p className="mt-0.5 text-xs text-muted-foreground" data-slot="catalog-pending" role="status">
+                                                {l.catalog_pending.unit_price != null
+                                                    ? t('lineItems.catalogPriceChanged', {
+                                                          defaultValue: 'Precio de catálogo cambió a {{price}}',
+                                                          price: fmt.money(l.catalog_pending.unit_price),
+                                                      })
+                                                    : t('lineItems.catalogChanged', { defaultValue: 'El producto cambió en el catálogo' })}
+                                                {' — '}
+                                                <button
+                                                    type="button"
+                                                    className="font-medium text-foreground underline-offset-2 hover:underline focus-visible:underline focus-visible:outline-none"
+                                                    onClick={() => emit(latest.current.map((x) => (x.key === l.key ? applyCatalogPending(x) : x)))}
+                                                >
+                                                    {t('lineItems.catalogApply', { defaultValue: 'aplicar' })}
+                                                </button>
+                                            </p>
                                         )}
                                         {cell(i, 'description') && <p className="mt-0.5 text-xs text-destructive">{cell(i, 'description')}</p>}
                                     </td>
@@ -474,10 +573,12 @@ export function DocumentLinesGrid({
                                 search={search}
                                 warehouseId={warehouseId}
                                 currency={currency}
-                                onPick={pickProduct}
+                                onPick={(p, v) => pickProduct(p, v)}
                                 onFree={addFreeFromDraft}
                                 onAddBlank={() => emit([...value, blankLine()])}
-                                trailingCells={colCount - 1}
+                                onCreate={createProduct ? (q) => void createProduct(q) : undefined}
+                                entityLabel={entity}
+                                span={colCount - 2}
                             />
                         )}
                     </tbody>
@@ -542,6 +643,15 @@ export function DocumentLinesGrid({
     )
 }
 
+/** Capturar a mano un campo con aviso de catálogo responde el aviso: deja de ofrecer «aplicar» para ese campo. */
+function withoutAnsweredPending(line: LineItem, p: Partial<LineItem>): LineItem {
+    if (!line.catalog_pending) return line
+    const pending = { ...line.catalog_pending }
+    for (const k of Object.keys(p)) delete (pending as Record<string, unknown>)[k]
+    const { catalog_pending: _drop, ...rest } = line
+    return Object.keys(pending).length > 0 ? { ...rest, catalog_pending: pending } : rest
+}
+
 /** Mismo componente. El nombre anterior sigue exportado. */
 export const LineItemsEditor = DocumentLinesGrid
 
@@ -561,9 +671,14 @@ function DraftRow({
     onPick,
     onFree,
     onAddBlank,
-    trailingCells,
+    onCreate,
+    entityLabel,
+    span,
 }: {
-    trailingCells: number
+    /** Columnas que ocupa el buscador (todas menos «Importe» y acciones). */
+    span: number
+    onCreate?: (query: string) => void
+    entityLabel?: string
     search: NonNullable<DocumentLinesGridProps['search']>
     warehouseId?: string
     currency?: string
@@ -575,7 +690,10 @@ function DraftRow({
     const [text, setText] = useState('')
     return (
         <tr className="border-t border-dashed" data-slot="line-draft-row">
-            <td className={CELL}>
+            {/* El renglón vacío no tiene cantidad ni precio todavía: el buscador
+                usa ese ancho (antes medía solo la columna «Descripción» y el
+                texto de ayuda se cortaba). */}
+            <td className={CELL} colSpan={span}>
                 <LineProductCell
                     search={search}
                     text={text}
@@ -595,15 +713,21 @@ function DraftRow({
                     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"
+                    onCreate={
+                        onCreate
+                            ? (q) => {
+                                  setText('')
+                                  onCreate(q)
+                              }
+                            : undefined
+                    }
+                    entityLabel={entityLabel}
                 />
             </td>
-            {/* Celdas vacías con la misma estructura: el buscador mide lo que su columna. */}
-            {Array.from({ length: trailingCells }, (_, i) => (
-                <td key={i} aria-hidden />
-            ))}
+            <td aria-hidden />
+            <td aria-hidden />
         </tr>
     )
 }
@@ -625,6 +749,10 @@ function TotalRow({ span, label, value, slot, strong }: { span: number; label: s
 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'
 
+/** Lápiz «Editar producto» dentro de la celda: al pasar o enfocar la fila; siempre con teclado y en móvil. */
+const EDIT =
+    'absolute right-0.5 top-1/2 size-7 -translate-y-1/2 text-muted-foreground opacity-0 transition-opacity hover:text-foreground 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). */

package/src/business/line-items.ts

@@ -3,6 +3,7 @@
 // guardado de renglones fallaba (PIT-018) por mandar al API cadenas vacías y
 // claves de UI; `serializeLineItems` es la única puerta de salida hacia el backend.
 import { roundMoney, toAmount } from './format'
+import type { ProductVariant } from './product-search'
 
 export type LineItemKind = 'item' | 'section' | 'note'
 
@@ -50,6 +51,36 @@ export interface LineItem {
      * del host) — el SDK no conoce sus claves.
      */
     extensions?: Record<string, string>
+    /**
+     * Valores que el catálogo escribió en el renglón la última vez que se
+     * aplicó el producto (elegirlo, crearlo o editarlo desde la celda). Un campo
+     * cuyo valor actual difiere de su foto es un override del usuario («dirty»)
+     * y una edición del producto no lo pisa. No se serializa.
+     */
+    catalog?: LineCatalogSnapshot
+    /**
+     * Valores nuevos del catálogo que NO se aplicaron porque el usuario ya
+     * había cambiado ese campo a mano: la celda ofrece «aplicar». No se serializa.
+     */
+    catalog_pending?: Partial<Pick<LineItem, CatalogLineField>>
+}
+
+/** Campos del renglón que salen del producto y el usuario puede sobrescribir. */
+export type CatalogLineField = 'description' | 'sku' | 'unit_price' | 'tax_rate' | 'unit'
+
+export const CATALOG_LINE_FIELDS: readonly CatalogLineField[] = ['description', 'sku', 'unit_price', 'tax_rate', 'unit']
+
+/** Foto de lo que el catálogo escribió en el renglón (por campo) y de qué producto/variante. */
+export interface LineCatalogSnapshot {
+    description?: string
+    sku?: string
+    unit_price?: number
+    tax_rate?: number
+    unit?: string
+    /** Id del producto del catálogo (el registro que se edita), aunque el renglón lleve una variante. */
+    product_ref?: string
+    /** Variante elegida: al refrescar se vuelve a aplicar la misma. */
+    variant?: ProductVariant
 }
 
 /** Qué hacer si `quantity > available`. */

package/src/business/line-product-cell.tsx

@@ -8,6 +8,10 @@
 // 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).
+//
+// Con `onCreate`, la celda ofrece crear el producto como las apps top: «+» unido
+// al buscador y «Crear producto «texto»» al pie de la lista, prellenado con lo
+// buscado. El grid llena el renglón con el producto nuevo al guardarlo.
 import { forwardRef, useState, type KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RecordPicker } from '../record-picker'
@@ -47,10 +51,16 @@ export interface LineProductCellProps {
     className?: string
     /** Atributos de datos para que el grid ubique la celda (foco por teclado). */
     dataCell?: string
+    /** Alta del producto desde la celda, prellenada con lo buscado. */
+    onCreate?: (query: string) => void
+    /** Nombre del modelo para «Crear …» (default «producto»). */
+    entityLabel?: string
+    /** Detalle de qué se puede buscar: tooltip del buscador y estado sin coincidencias. */
+    hint?: string
 }
 
 export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps>(function LineProductCell(
-    { search, text, onTextChange, onPick, onKeyDownClosed, warehouseId, currency, placeholder, ariaLabel, disabled, invalid, className, dataCell },
+    { search, text, onTextChange, onPick, onKeyDownClosed, warehouseId, currency, placeholder, ariaLabel, disabled, invalid, className, dataCell, onCreate, entityLabel, hint },
     ref,
 ) {
     const { t } = useTranslation()
@@ -58,6 +68,8 @@ export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps
     // capturado no despliega «sin resultados» encima de la tabla.
     const [typing, setTyping] = useState(false)
     const { hits, loading, minChars } = useProductSearch(typing ? text : '', search, typing)
+    const entity = entityLabel ?? t('lineItems.productEntity', { defaultValue: 'producto' })
+    const searchHint = hint ?? t('lineItems.searchHint', { defaultValue: 'Busca por nombre, SKU o código de barras' })
 
     return (
         <RecordPicker<ProductHit>
@@ -66,7 +78,8 @@ export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps
             freeText
             anchorSlot="line-product-cell"
             contentSlot="line-product-results"
-            minListWidth="22rem"
+            minListWidth="26.25rem"
+            maxListWidth="35rem"
             items={hits}
             loading={loading}
             minChars={minChars}
@@ -85,10 +98,24 @@ export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps
             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' })}
+            triggerProps={{ 'data-cell': dataCell, title: searchHint }}
+            placeholder={placeholder ?? t('lineItems.searchPlaceholderShort', { defaultValue: 'Buscar producto…' })}
             loadingText={t('common.searching', { defaultValue: 'Buscando…' })}
-            emptyText={t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' })}
+            emptyText={
+                <span className="block space-y-1">
+                    <span className="block">{t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' })}</span>
+                    <span className="block text-xs">{searchHint}</span>
+                </span>
+            }
+            onCreate={onCreate}
+            entityLabel={entity}
+            createLabel={t('lineItems.createProduct', { defaultValue: 'Crear {{entity}}', entity })}
+            createFooterLabel={(q) => (
+                <>
+                    {t('lineItems.createProduct', { defaultValue: 'Crear {{entity}}', entity })}
+                    {q ? <span className="text-muted-foreground"> «{q}»</span> : null}
+                </>
+            )}
         />
     )
 })

package/src/business/product-options.tsx

@@ -108,7 +108,7 @@ export function ProductHitRow({ hit, warehouseId, currency, compact }: { hit: Pr
     return (
         <span className="flex w-full min-w-0 items-center justify-between gap-3">
             <span className="min-w-0">
-                <span className="block truncate font-medium">{productHitLabel(hit)}</span>
+                <span className="line-clamp-2 break-words font-medium" title={productHitLabel(hit)}>{productHitLabel(hit)}</span>
                 {meta && <span className="block truncate text-xs text-muted-foreground">{meta}</span>}
             </span>
             <span className="flex shrink-0 items-center gap-2">

package/src/dialogs/dynamic-record.tsx

@@ -1334,7 +1334,7 @@ function FieldRow({ field, record, value, mode, onChange, error, locked }: Field
 
     return (
         <div className="flex flex-col gap-1.5" data-aby-field={field.key}>
-            <Label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            <Label className="text-sm font-medium text-foreground/80">
                 {localizeFieldLabel(field.label, t)}
                 {field.required && mode !== 'view' && !isEditReadonly && (
                     <span className="text-destructive ml-0.5">*</span>

package/src/field-grid.tsx

@@ -42,15 +42,16 @@ export function FieldCell({
 export function FieldLabel({
     htmlFor,
     required,
-    tone = 'caps',
+    tone = 'sentence',
     children,
 }: {
     htmlFor?: string
     required?: boolean
     /**
-     * `caps` (default): small uppercase eyebrow of the CRUD modals. `sentence`:
-     * sentence-case label for dense editors (DocumentEditor) where a column of
-     * uppercase labels reads as shouting.
+     * `sentence` (default): sentence-case label — every form of the runtime
+     * (CRUD modal, action modal, DocumentEditor) reads the same and a column of
+     * uppercase labels no longer shouts. `caps`: small uppercase eyebrow, for
+     * callers that still want it.
      */
     tone?: 'caps' | 'sentence'
     children: ReactNode

package/src/record-picker.tsx

@@ -268,6 +268,8 @@ export interface RecordPickerProps<T> {
     inputRef?: Ref<HTMLInputElement>
     /** Floor for the list width (CSS length). Default 14rem. */
     minListWidth?: string
+    /** Ceiling for the list width (CSS length), e.g. under a very wide trigger. Default: none. */
+    maxListWidth?: string
     /** Rendered after the joined group (e.g. a scan button). */
     after?: ReactNode
     /** Rendered under the control (badges, hints). */
@@ -351,6 +353,7 @@ export function RecordPicker<T>(props: RecordPickerProps<T>) {
         triggerProps,
         inputRef,
         minListWidth = '14rem',
+        maxListWidth,
         after,
         below,
         beforeList,
@@ -555,7 +558,15 @@ export function RecordPicker<T>(props: RecordPickerProps<T>) {
         )
 
     const list = (
-        <div className="max-h-72 overflow-y-auto overflow-x-hidden overscroll-contain" data-slot="record-picker-list">
+        <div
+            className="overflow-y-auto overflow-x-hidden overscroll-contain"
+            data-slot="record-picker-list"
+            // Never taller than the room Radix measured on the side it opened
+            // (flipped above the field near the bottom of a modal it used to
+            // spill past the top of the viewport): 18rem at most, minus the
+            // search box in button mode; the list scrolls inside.
+            style={{ maxHeight: `min(18rem, calc(var(--radix-popover-content-available-height, 18rem) - ${isInput ? '2px' : '2.75rem'}))` }}
+        >
             {beforeList}
             {status}
             <ul
@@ -596,7 +607,7 @@ export function RecordPicker<T>(props: RecordPickerProps<T>) {
                                     ) : null}
                                     {renderLead?.(item, 'option')}
                                     <span className="flex min-w-0 flex-1 flex-col">
-                                        <span className="truncate">{getLabel(item)}</span>
+                                        <span className="line-clamp-2 break-words">{getLabel(item)}</span>
                                         {desc != null && desc !== '' ? (
                                             <span className="truncate text-xs text-muted-foreground">{desc}</span>
                                         ) : null}
@@ -636,7 +647,9 @@ export function RecordPicker<T>(props: RecordPickerProps<T>) {
     )
 
     const contentStyle = {
-        width: `max(var(--radix-popover-trigger-width), ${minListWidth})`,
+        width: maxListWidth
+            ? `min(max(var(--radix-popover-trigger-width), ${minListWidth}), ${maxListWidth})`
+            : `max(var(--radix-popover-trigger-width), ${minListWidth})`,
         maxWidth: 'calc(100vw - 1rem)',
         zIndex: RECORD_PICKER_Z_INDEX,
     }