@asteby/metacore-runtime-react 49.6.0 → 49.8.0

package/src/business/document-editor.tsx

@@ -29,13 +29,17 @@ import { FormErrorBanner } from './feedback'
 import { DocumentLinesGrid, type DocumentLinesGridProps, type LineItemsColumn } from './line-items-editor'
 import { computeTotals, serializeLineItems, taxBreakdown, type LineItem } from './line-items'
 import { roundMoney, toAmount, useFormatter } from './format'
-import { createCatalogProductSearch } from './catalog-product-search'
+import { catalogRecordToProduct, createCatalogProductSearch } from './catalog-product-search'
+import type { ProductResult } from './product-search'
+import { requestRecordCreate, requestRecordEdit, withSearchPrefill } from '../record-picker-actions'
 import {
     allocationAmountField,
     allocationIssueMessages,
     allocationPayload,
     creditStatus,
     editorLinesConfig,
+    fieldDisplayMeta,
+    type FieldDisplayMeta,
     linesFromSource,
     localIssues,
     sourceLoadSummary,
@@ -91,8 +95,13 @@ export interface DocumentEditorProps {
     onSaved?: (record?: unknown) => void
     onCancel: () => void
     searchProducts?: DocumentLinesGridProps['search']
-    /** Modelo de catálogo del buscador por defecto. Default `products.Product`. */
+    /**
+     * Modelo de catálogo: buscador por defecto y alta/edición del producto
+     * desde la celda del renglón. Default `products.Product`.
+     */
     productModel?: string
+    /** Columna del modelo de catálogo que recibe lo buscado al crear. Default `name`. */
+    productLabelField?: string
     defaultTaxRate?: number
     currency?: string
     /** Hoy (días de atraso del reparto; inyectable en tests). */
@@ -118,6 +127,7 @@ export function DocumentEditor({
     onCancel,
     searchProducts,
     productModel,
+    productLabelField = 'name',
     defaultTaxRate,
     currency,
     today,
@@ -145,7 +155,8 @@ export function DocumentEditor({
     const [linesFromSourceDoc, setLinesFromSourceDoc] = useState(false)
     const [extFields, setExtFields] = useState<ActionFieldDef[]>([])
     const [party, setParty] = useState<Record<string, any> | null>(null)
-    const [partyLabels, setPartyLabels] = useState<Record<string, string>>({})
+    const [partyFieldLists, setPartyFieldLists] = useState<unknown[][]>([])
+    const [catalogMeta, setCatalogMeta] = useState<Record<string, FieldDisplayMeta> | null>(null)
     // Etiquetas de los selectores que el editor llena por código (contraparte y
     // documento origen de «Cargar desde…»): sin ellas el selector cerrado pinta el UUID.
     const [seeds, setSeeds] = useState<Record<string, SeedLabel>>({})
@@ -254,25 +265,93 @@ export function DocumentEditor({
         }
     }, [api, type.party, partyId])
 
-    // Etiquetas de la tarjeta (RFC, régimen…): las del formulario del modelo de
-    // la contraparte, incluidas sus extensiones; sin ellas se ve la columna cruda.
+    // Etiquetas de la tarjeta (RFC, régimen…) y texto de sus catálogos: la
+    // metadata del modelo de la contraparte (formulario, con extensiones, y
+    // tabla); sin ellas se veía la columna cruda (`tax_id`).
     const partyModel = type.party?.model
     useEffect(() => {
         if (!partyModel) return
         let cancelled = false
-        api.get(`/metadata/modal/${partyModel}`)
-            .then((res: any) => {
-                const fields: any[] = res?.data?.data?.fields ?? res?.data?.fields ?? []
-                const out: Record<string, string> = {}
-                for (const f of fields) if (typeof f?.key === 'string' && typeof f?.label === 'string' && f.label) out[f.key] = f.label
-                if (!cancelled) setPartyLabels(out)
-            })
-            .catch(() => {})
+        void loadModelFieldLists(api, partyModel).then((lists) => {
+            if (!cancelled) setPartyFieldLists(lists)
+        })
         return () => {
             cancelled = true
         }
     }, [api, partyModel])
 
+    // Modelo de catálogo del renglón: alta/edición desde la celda y etiquetas
+    // de sus catálogos (unidad «unit» → «Pieza»).
+    const catalogModel = productModel ?? 'products.Product'
+    // Perezoso: solo cuando ya hay un renglón con producto (no compite con la
+    // carga inicial del editor).
+    const hasCatalogLine = lines.some((l) => l.kind === 'item' && !!l.product_id)
+    const wantsCatalogMeta = !!lineCfg && !isAllocation && hasCatalogLine
+    useEffect(() => {
+        if (!wantsCatalogMeta) return
+        let cancelled = false
+        void loadModelFieldLists(api, catalogModel).then((lists) => {
+            if (!cancelled) setCatalogMeta(fieldDisplayMeta(lists, tl))
+        })
+        return () => {
+            cancelled = true
+        }
+    }, [api, catalogModel, tl, wantsCatalogMeta])
+
+    /** Lee el producto guardado con la misma proyección del buscador (catalogRecordToProduct). */
+    const loadCatalogProduct = useCallback(
+        async (id: string, saved?: Record<string, any>): Promise<ProductResult | null> => {
+            try {
+                const res: any = await api.get(`/data/${catalogModel}`, { params: { f_id: `eq:${id}`, per_page: 1 } })
+                const rows = res?.data?.data
+                const row = Array.isArray(rows) ? rows[0] : null
+                if (row) return catalogRecordToProduct({ ...(saved ?? {}), ...row }, taxRate)
+            } catch {
+                // Sin lectura, lo que devolvió el guardado.
+            }
+            return saved && saved.id != null ? catalogRecordToProduct(saved, taxRate) : null
+        },
+        [api, catalogModel, taxRate],
+    )
+    const createProduct = useCallback(
+        (query: string) =>
+            new Promise<ProductResult | null>((resolve) => {
+                requestRecordCreate({
+                    model: catalogModel,
+                    defaults: withSearchPrefill(query, productLabelField),
+                    onCreated: (rec: any) => {
+                        if (rec?.id == null) return resolve(null)
+                        void loadCatalogProduct(String(rec.id), rec).then(resolve)
+                    },
+                })
+            }),
+        [catalogModel, productLabelField, loadCatalogProduct],
+    )
+    const editProduct = useCallback(
+        (line: LineItem) =>
+            new Promise<ProductResult | null>((resolve) => {
+                const id = line.catalog?.product_ref ?? line.product_id
+                if (!id) return resolve(null)
+                requestRecordEdit({
+                    model: catalogModel,
+                    recordId: id,
+                    onSaved: (rec: any) => void loadCatalogProduct(id, rec && typeof rec === 'object' ? { id, ...rec } : undefined).then(resolve),
+                })
+            }),
+        [catalogModel, loadCatalogProduct],
+    )
+    /** Unidad visible: la opción del catálogo; sin opciones declaradas, el valor tal cual. */
+    const unitLabel = useCallback(
+        (u: string) => {
+            if (!catalogMeta) return undefined
+            const opts = catalogMeta.unit_of_measure?.options ?? catalogMeta.unit?.options
+            if (!opts) return u
+            const o = opts.find((x) => String(x.value) === u)
+            return typeof o?.label === 'string' && o.label && o.label !== u ? o.label : undefined
+        },
+        [catalogMeta],
+    )
+
     // Cobro: documentos abiertos de la contraparte.
     const openCfg = lineCfg?.open_documents
     const allocPartyId = openCfg ? header[openCfg.party_field] ?? partyId : undefined
@@ -595,10 +674,10 @@ export function DocumentEditor({
             </FieldCell>
         ) : null
 
-    const summaryRows = partySummaryRows(party, type.party?.summary, {
-        ...Object.fromEntries(Object.entries(partyLabels).map(([k, v]) => [k, tl(v)])),
-        ...Object.fromEntries(allFields.map((f) => [f.key, tl(f.label)])),
-    })
+    // Etiquetas y catálogos: la metadata de la contraparte y, para las
+    // extensiones compartidas (`fiscal_data.uso_cfdi`), los campos del propio documento.
+    const summaryMeta = useMemo(() => fieldDisplayMeta([...partyFieldLists, allFields], tl), [partyFieldLists, allFields, tl])
+    const summaryRows = partySummaryRows(party, type.party?.summary, {}, 6, summaryMeta)
     const advancedSummary = groups.advanced
         .filter(visible)
         .map((f) => {
@@ -782,6 +861,9 @@ export function DocumentEditor({
                     search={search}
                     currency={currency}
                     showTotals={false}
+                    onCreateProduct={kind === 'credit' ? undefined : createProduct}
+                    onEditProduct={editProduct}
+                    unitLabel={unitLabel}
                 />
             )}
             {!fullscreen && totalsPanel}
@@ -954,3 +1036,36 @@ function SourcePicker({
         </div>
     )
 }
+
+/**
+ * Campos y columnas de un modelo para etiquetar sus valores: formulario
+ * (`/metadata/modal`, con extensiones) y tabla (`/metadata/table`). Si la
+ * clave con módulo (`customers.Customer`) no resuelve en el host, prueba la
+ * corta (`Customer`), como el puente de alta del host. Nunca lanza.
+ */
+async function loadModelFieldLists(api: { get: (url: string, cfg?: any) => Promise<any> }, model: string): Promise<unknown[][]> {
+    const short = model.includes('.') ? model.slice(model.lastIndexOf('.') + 1) : undefined
+    // `undefined` = la petición falló (el host no conoce esa clave); `[]` = respondió sin campos.
+    const read = async (url: string, key: 'fields' | 'columns'): Promise<unknown[] | undefined> => {
+        try {
+            const res = await api.get(url)
+            const list = res?.data?.data?.[key] ?? res?.data?.[key]
+            return Array.isArray(list) ? list : []
+        } catch {
+            return undefined
+        }
+    }
+    // En serie y solo lo necesario (una lectura en el caso normal): el
+    // formulario; la clave corta solo si la larga falló; la tabla solo si
+    // ningún formulario respondió con campos.
+    const candidates = short ? [model, short] : [model]
+    for (const kind of ['modal', 'table'] as const) {
+        for (const m of candidates) {
+            const list = await read(`/metadata/${kind}/${m}`, kind === 'modal' ? 'fields' : 'columns')
+            if (list === undefined) continue
+            if (list.length > 0) return [list]
+            break
+        }
+    }
+    return []
+}

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). */