@asteby/metacore-runtime-react 37.0.3 → 37.0.5

package/src/action-modal-dispatcher.tsx

@@ -40,6 +40,13 @@ import { toast } from 'sonner'
 import { toastServerError, toastServerSuccess, extractFieldErrors, localizeFieldErrorMap } from './server-error'
 import type { Translate } from './server-error'
 import { validateValues, bagHasErrors } from './validator'
+import {
+    clearFieldErrorTree,
+    formatFieldErrorsDescription,
+    labelsForValidationFields,
+    labelForValidationPath,
+    lineItemErrorsFor,
+} from './field-validation-ui'
 import { validationCatalog } from './validation-catalog'
 import { useApi } from './api-context'
 import { DynamicIcon } from './dynamic-icon'
@@ -621,33 +628,43 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
 
     const updateField = (key: string, value: any) => {
         setFormData((prev: Record<string, any>) => ({ ...prev, [key]: value }))
-        setFieldErrors(prev => {
-            if (!prev[key]) return prev
-            const next = { ...prev }
-            delete next[key]
-            return next
-        })
+        setFieldErrors((prev) => clearFieldErrorTree(prev, key))
     }
 
     const lang = i18n.language
     const handleActionError = (err: unknown) => {
+        const labels = labelsForValidationFields(action.fields, t)
         const localized = localizeActionFieldErrors(err, action.fields, t, lang)
         if (localized) {
-            setFieldErrors(localized)
-            toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }))
+            // Enrich labels for dotted line-item paths before toasting.
+            const withPathLabels: Record<string, string> = {}
+            for (const [path, msg] of Object.entries(localized)) {
+                withPathLabels[path] = msg
+                if (!labels[path]) labels[path] = labelForValidationPath(path, action.fields, t)
+            }
+            setFieldErrors(withPathLabels)
+            toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }), {
+                description: formatFieldErrorsDescription(withPathLabels, action.fields, t),
+            })
             return
         }
-        toastServerError(err, { t, language: lang })
+        toastServerError(err, { t, language: lang, labels })
     }
 
     const execute = async () => {
         if (action.fields) {
             const bag = validateValues(action.fields, formData)
             if (bagHasErrors(bag)) {
-                const labels: Record<string, string> = {}
-                for (const f of action.fields) labels[f.key] = tl(f.label)
-                setFieldErrors(localizeFieldErrorMap(bag, t, { labels, language: lang }))
-                toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }))
+                const labels = labelsForValidationFields(action.fields, (k, o) => t(k, o))
+                // Exact dotted keys (`lines.0.qty`) need path-aware labels.
+                for (const path of Object.keys(bag)) {
+                    if (!labels[path]) labels[path] = labelForValidationPath(path, action.fields, t)
+                }
+                const next = localizeFieldErrorMap(bag, t, { labels, language: lang })
+                setFieldErrors(next)
+                toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }), {
+                    description: formatFieldErrorsDescription(next, action.fields, t),
+                })
                 return
             }
         }
@@ -727,7 +744,14 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                                     <FieldLabel htmlFor={field.key} required={field.required}>
                                         {tl(field.label)}
                                     </FieldLabel>
-                                    {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData, record)}
+                                    {renderField(
+                                        field,
+                                        formData[field.key],
+                                        (v: any) => updateField(field.key, v),
+                                        formData,
+                                        record,
+                                        fieldErrors,
+                                    )}
                                     {fieldErrors[field.key] && (
                                         <p className="text-destructive text-xs mt-1">{fieldErrors[field.key]}</p>
                                     )}
@@ -1011,17 +1035,30 @@ function renderField(
     // then treated as having no resolvable dependency).
     formValues?: Record<string, any>,
     record?: Record<string, any>,
+    fieldErrors?: Record<string, string>,
 ) {
     // Repeatable line-items group → row grid (value is an array of row objects).
     // The header form values flow in so a cell can depend on a header field.
     if (isLineItemsField(field)) {
-        return <DynamicLineItems field={applyPrefillLock(field)} value={value} onChange={onChange} formValues={formValues} />
+        return (
+            <DynamicLineItems
+                field={applyPrefillLock(field)}
+                value={value}
+                onChange={onChange}
+                formValues={formValues}
+                errors={lineItemErrorsFor(field.key, fieldErrors)}
+            />
+        )
     }
     // Resolve the widget the same way DynamicForm does (explicit widget wins,
     // else inferred from type) so action modals and the standalone form stay in
     // lockstep — previously this switch keyed off `field.type` and silently
     // dropped `dynamic_select` to a plain text input.
     const widget = resolveWidget(field)
+    const invalid = !!(fieldErrors && fieldErrors[field.key])
+    const invalidCls = invalid
+        ? 'border-destructive ring-1 ring-destructive/30 focus-visible:ring-destructive'
+        : ''
     if (widget === 'dynamic_select') {
         // A header-level dynamic_select may itself depend on another header
         // field; resolve its filter_value from the form context.
@@ -1035,6 +1072,7 @@ function renderField(
                 onChange={onChange}
                 dependsValue={dependsValue}
                 seedOption={seedOptionFromRecord(field, value, record)}
+                invalid={invalid}
             />
         )
     }
@@ -1045,11 +1083,11 @@ function renderField(
     }
     switch (widget) {
         case 'textarea':
-            return <Textarea id={field.key} value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+            return <Textarea id={field.key} value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} aria-invalid={invalid || undefined} className={invalidCls || undefined} />
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>
-                    <SelectTrigger className="w-full"><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
+                    <SelectTrigger className={'w-full' + (invalidCls ? ` ${invalidCls}` : '')} aria-invalid={invalid || undefined}><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
                     <SelectContent>
                         {field.options?.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
                     </SelectContent>
@@ -1058,12 +1096,15 @@ function renderField(
         case 'switch':
             return <Switch id={field.key} checked={!!value} onCheckedChange={onChange} />
         case 'number':
-            return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')} placeholder={field.placeholder} />
+            return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const n = e.target.valueAsNumber
+                onChange(e.target.value === '' || !Number.isFinite(n) ? '' : n)
+            }} placeholder={field.placeholder} aria-invalid={invalid || undefined} className={invalidCls || undefined} />
         case 'date':
             // Modern shadcn Calendar in a Popover (portaled, never clipped by the
             // modal) instead of the native, dated, easily-cut <input type=date>.
             return <DynamicDateField field={field} value={value} onChange={onChange} />
         default:
-            return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+            return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} aria-invalid={invalid || undefined} className={invalidCls || undefined} />
     }
 }

package/src/dialogs/dynamic-record.tsx

@@ -9,7 +9,7 @@
 // flows through <ApiProvider> from runtime-react. Host-specific runtime values —
 // the image-url resolver and the org IANA timezone — are passed as props so the
 // SDK stays transport- and host-agnostic.
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ModelSchema } from './types'
 
@@ -53,7 +53,7 @@ import { es } from 'date-fns/locale'
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react'
 import { BarcodeScanner } from '../barcode-scanner'
 import { useApi } from '../api-context'
-import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../server-error'
+import { toastServerError, extractFieldErrors, localizeFieldIssue, localizeFieldErrorMap } from '../server-error'
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field'
 import { DynamicRelations } from '../dynamic-relations'
 import { useOptionsResolver, type ResolvedOption } from '../use-options-resolver'
@@ -64,6 +64,7 @@ import { FieldSection, WizardProgress } from '../form-layout-ui'
 import { FieldCell } from '../field-grid'
 import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { normalizeRefFieldsForSubmit } from './normalize-submit'
+import { validateValues, bagHasErrors } from '../validator'
 import { DynamicIcon, isLucideIconName } from '../dynamic-icon'
 import { IconPickerField } from '../icon-picker-field'
 import { humanizeToken } from '../dynamic-columns-helpers'
@@ -224,6 +225,12 @@ export interface DynamicRecordDialogProps {
      * lets it close while the depth lock is held.
      */
     nestedInlineCreateSelf?: boolean
+    /**
+     * Fields merged into the modal schema after load (by key). Existing keys are
+     * shallow-merged; missing keys are prepended. Hosts use this to inject
+     * required scope fields (e.g. branch_id) omitted from compiled DefineModal.
+     */
+    ensureFields?: FieldDef[]
     mode: 'view' | 'edit' | 'create'
     model: string
     recordId?: string | null
@@ -567,10 +574,26 @@ export function stripHiddenFieldValues(
     return out
 }
 
+function applyEnsureFields(meta: ModalMetadata | null | undefined, ensureFields?: FieldDef[]): ModalMetadata | null {
+    if (!meta) return meta ?? null
+    if (!ensureFields?.length) return meta
+    const fields = Array.isArray(meta.fields) ? [...meta.fields] : []
+    for (const ensure of ensureFields) {
+        const idx = fields.findIndex((f) => f?.key === ensure.key)
+        if (idx >= 0) {
+            fields[idx] = { ...fields[idx], ...ensure }
+        } else {
+            fields.unshift(ensure)
+        }
+    }
+    return { ...meta, fields }
+}
+
 export function DynamicRecordDialog({
     open,
     onOpenChange,
     nestedInlineCreateSelf,
+    ensureFields,
     mode,
     model,
     recordId,
@@ -602,6 +625,9 @@ export function DynamicRecordDialog({
     // inline under each input; populated from a 422 `errors` map or the client
     // required-field check, cleared per-field on change and wholesale on reopen.
     const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+    // Unique form id per dialog instance — nested create must not share
+    // id={formId} or the child footer submits the parent.
+    const formId = useId()
     const [loading, setLoading] = useState(false)
     const [saving, setSaving] = useState(false)
     const [deleting, setDeleting] = useState(false)
@@ -663,6 +689,7 @@ export function DynamicRecordDialog({
                     if (cancelled) return
                     meta = metaRes.data?.data ?? metaRes.data
                 }
+                meta = applyEnsureFields(meta, ensureFields)
                 setModalMeta(meta)
 
                 if (isCreate) {
@@ -710,7 +737,7 @@ export function DynamicRecordDialog({
     // initialRecord intentionally omitted: the row identity is captured per open
     // via recordId; re-seeding mid-open would clobber edits.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, recordId, model, endpoint, isCreate, schema])
+    }, [open, recordId, model, endpoint, isCreate, schema, ensureFields])
 
     // Reset when closed
     useEffect(() => {
@@ -807,7 +834,17 @@ export function DynamicRecordDialog({
                 next[key] = localizeFieldIssue(issues[0], labelForKey(key), t)
             }
             setFieldErrors(next)
-            toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
+            const visibleKeys = new Set(
+                filterVisibleFields(modalMeta?.fields ?? [], mode, formValues).map(f => f.key),
+            )
+            const orphans = Object.entries(next).filter(([k]) => !visibleKeys.has(k))
+            const description = orphans.length
+                ? orphans.map(([k, msg]) => `${labelForKey(k)}: ${msg}`).join(' · ')
+                : undefined
+            toast.error(
+                t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }),
+                description ? { description } : undefined,
+            )
             return
         }
         toastServerError(err, { t, fallback: t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }) })
@@ -818,20 +855,27 @@ export function DynamicRecordDialog({
         if (!modalMeta) return
 
         if (isEditable) {
-            // Collect ALL missing required fields (not just the first) and mark
-            // each inline instead of a single toast. Only CURRENTLY-VISIBLE
-            // fields are gated: a field hidden by its `visible_when` predicate
-            // must not block submit even when it is declared required (matching
-            // the render, which drops it via the same filter).
-            const missing: Record<string, string> = {}
-            for (const field of filterVisibleFields(modalMeta.fields, mode, formValues)) {
-                if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
-                    missing[field.key] = localizeFieldIssue({ code: 'required' }, field.label, t)
-                }
-            }
-            if (Object.keys(missing).length) {
-                setFieldErrors(missing)
-                toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
+            // Laravel-style: collect every issue from the shared validator
+            // (required + rule strings / min/max / email…) on visible fields only.
+            const visible = filterVisibleFields(modalMeta.fields, mode, formValues)
+            const bag = validateValues(visible as ActionFieldDef[], formValues)
+            if (bagHasErrors(bag)) {
+                const labels: Record<string, string> = {}
+                for (const f of visible) labels[f.key] = f.label
+                const next = localizeFieldErrorMap(bag, t, { labels })
+                setFieldErrors(next)
+                const description = Object.entries(next)
+                    .map(([k, msg]) => {
+                        const label = labels[k] || labelForKey(k)
+                        return msg.toLowerCase().startsWith(String(label).toLowerCase())
+                            ? msg
+                            : `${label}: ${msg}`
+                    })
+                    .join(' · ')
+                toast.error(
+                    t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }),
+                    description ? { description } : undefined,
+                )
                 return
             }
         }
@@ -973,14 +1017,12 @@ export function DynamicRecordDialog({
     // then advance. Mirrors handleSubmit's required check but scoped to the step.
     const goNextStep = () => {
         const step = groups[clampedStep]
-        const missing: Record<string, string> = {}
-        for (const field of step?.fields ?? []) {
-            if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
-                missing[field.key] = localizeFieldIssue({ code: 'required' }, field.label, t)
-            }
-        }
-        if (Object.keys(missing).length) {
-            setFieldErrors(missing)
+        const stepFields = step?.fields ?? []
+        const bag = validateValues(stepFields as ActionFieldDef[], formValues)
+        if (bagHasErrors(bag)) {
+            const labels: Record<string, string> = {}
+            for (const f of stepFields) labels[f.key] = f.label
+            setFieldErrors(localizeFieldErrorMap(bag, t, { labels }))
             toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
             return
         }
@@ -1014,7 +1056,7 @@ export function DynamicRecordDialog({
                                 cell `min-w-0` so a long select/input value can't
                                 blow the two columns past the dialog width. */}
                             <form
-                                id="dynamic-record-form"
+                                id={formId}
                                 onSubmit={handleSubmit}
                                 className="grid gap-y-4"
                             >
@@ -1124,7 +1166,7 @@ export function DynamicRecordDialog({
                         {isEditable && (!isSteps || isLastStep) && (
                             <Button
                                 type="submit"
-                                form="dynamic-record-form"
+                                form={formId}
                                 disabled={saving || loading}
                             >
                                 {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -1193,7 +1235,7 @@ function FieldRow({ field, record, value, mode, onChange, error, locked }: Field
             ) : isEditReadonly ? (
                 <ReadonlyEditField field={field} value={value} />
             ) : (
-                <EditField field={field} value={value} onChange={onChange} record={record} />
+                <EditField field={field} value={value} onChange={onChange} record={record} invalid={!!error} />
             )}
 
             {error && mode !== 'view' && (
@@ -1836,13 +1878,19 @@ function JsonObjectViewValue({ value }: { value: Record<string, unknown> }) {
     )
 }
 
-export function EditField({ field, value, onChange, record }: {
+export function EditField({ field, value, onChange, record, invalid }: {
     field: FieldDef
     value: any
     onChange: (val: any) => void
     /** The full record being edited — supplies FK relation siblings + line-items. */
     record?: any
+    /** When true, paint the control with a destructive border (Laravel-style). */
+    invalid?: boolean
 }) {
+    const invalidCls = invalid
+        ? 'border-destructive ring-1 ring-destructive/30 focus-visible:ring-destructive aria-invalid:border-destructive'
+        : undefined
+
     const { t, i18n } = useTranslation()
     const editFieldImageUrl = useContext(ImageUrlContext)
     const dialogModel = useContext(RecordDialogModelContext)
@@ -1892,6 +1940,8 @@ export function EditField({ field, value, onChange, record }: {
                 onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
                 placeholder={field.placeholder}
                 rows={4}
+                aria-invalid={invalid || undefined}
+                className={invalidCls}
             />
         )
     }
@@ -1952,6 +2002,7 @@ export function EditField({ field, value, onChange, record }: {
                 // for the popover to open and fetch a page.
                 seedOption={fkSeedOption(field, value, record)}
                 hideCreate={hideSelfCreate}
+                invalid={invalid}
             />
         )
     }
@@ -1967,7 +2018,7 @@ export function EditField({ field, value, onChange, record }: {
     if (field.type === 'select' && field.options?.length) {
         return (
             <Select value={String(value ?? '')} onValueChange={onChange}>
-                <SelectTrigger className="w-full">
+                <SelectTrigger className={cn("w-full", invalidCls)} aria-invalid={invalid || undefined}>
                     <SelectValue placeholder="Seleccionar..." />
                 </SelectTrigger>
                 <SelectContent>
@@ -2043,7 +2094,7 @@ export function EditField({ field, value, onChange, record }: {
             ? 'email'
             : 'text'
 
-    return <ScannableRecordInput field={field} value={value} onChange={onChange} inputType={inputType} />
+    return <ScannableRecordInput field={field} value={value} onChange={onChange} inputType={inputType} invalid={invalid} className={invalidCls} />
 }
 
 /**
@@ -2062,11 +2113,15 @@ function ScannableRecordInput({
     value,
     onChange,
     inputType,
+    invalid,
+    className,
 }: {
     field: FieldDef
     value: any
     onChange: (val: any) => void
     inputType: string
+    invalid?: boolean
+    className?: string
 }) {
     const [scanOpen, setScanOpen] = useState(false)
     // El botón de escaneo aparece siempre que el campo declara `scan` (como el
@@ -2086,6 +2141,8 @@ function ScannableRecordInput({
                 )
             }
             placeholder={field.placeholder}
+            aria-invalid={invalid || undefined}
+            className={className}
         />
     )
     if (!scanEnabled) return input

package/src/dynamic-form.tsx

@@ -420,7 +420,10 @@ function FieldRenderer({
         case 'switch':
             return <Switch id={field.key} checked={!!value} onCheckedChange={onChange} />
         case 'number':
-            return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')} placeholder={field.placeholder} />
+            return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const n = e.target.valueAsNumber
+                onChange(e.target.value === '' || !Number.isFinite(n) ? '' : n)
+            }} placeholder={field.placeholder} />
         case 'date':
             return <DynamicDateField field={field} value={value} onChange={onChange} />
         default:
@@ -463,9 +466,14 @@ function ScannableInput({
             id={field.key}
             type={type}
             value={value ?? ''}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onChange(type === 'number' ? e.target.valueAsNumber || '' : e.target.value)
-            }
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (type !== 'number') {
+                    onChange(e.target.value)
+                    return
+                }
+                const n = e.target.valueAsNumber
+                onChange(e.target.value === '' || !Number.isFinite(n) ? '' : n)
+            }}
             placeholder={field.placeholder}
         />
     )

package/src/dynamic-line-items.tsx

@@ -47,6 +47,11 @@ export interface DynamicLineItemsProps {
      * (e.g. `source_warehouse_id`), not just a sibling cell on the same row.
      */
     formValues?: Record<string, any>
+    /**
+     * Localized validation messages keyed as `rowIndex.columnKey` (e.g.
+     * `0.unit_price`). Painted as destructive borders + under-cell text.
+     */
+    errors?: Record<string, string>
 }
 
 const fmtNumber = (n: number): string =>
@@ -65,9 +70,10 @@ function emptyRow(itemFields: ActionFieldDef[]): Record<string, any> {
     return row
 }
 
-export function DynamicLineItems({ field, value, onChange, disabled = false, formValues }: DynamicLineItemsProps) {
+export function DynamicLineItems({ field, value, onChange, disabled = false, formValues, errors }: DynamicLineItemsProps) {
     const itemFields = getItemFields(field)
     const rows: any[] = Array.isArray(value) ? value : []
+    const errMap = errors ?? {}
 
     // `lock_rows` fixes the row set: no add-row button, no per-row delete. Rows
     // stay editable cell-by-cell. Snake_case is what the kernel serves; tolerate
@@ -149,7 +155,9 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                             )}
                         </div>
                         <div className="grid gap-2.5">
-                            {itemFields.map((col) => (
+                            {itemFields.map((col) => {
+                                const cellErr = errMap[`${idx}.${col.key}`]
+                                return (
                                 <div key={col.key} className="grid gap-1">
                                     <span className="text-xs font-medium">
                                         {col.label}
@@ -164,9 +172,14 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                                         disabled={disabled}
                                         formValues={formValues}
                                         rowValues={row}
+                                        invalid={!!cellErr}
                                     />
+                                    {cellErr && (
+                                        <p className="text-destructive text-xs">{cellErr}</p>
+                                    )}
                                 </div>
-                            ))}
+                                )
+                            })}
                         </div>
                     </div>
                 ))}
@@ -219,7 +232,9 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                         )}
                         {rows.map((row, idx) => (
                             <tr key={idx} className="border-t align-top">
-                                {itemFields.map((col) => (
+                                {itemFields.map((col) => {
+                                    const cellErr = errMap[`${idx}.${col.key}`]
+                                    return (
                                     <td key={col.key} className="px-2 py-1.5">
                                         <CellRenderer
                                             field={col}
@@ -228,9 +243,14 @@ export function DynamicLineItems({ field, value, onChange, disabled = false, for
                                             disabled={disabled}
                                             formValues={formValues}
                                             rowValues={row}
+                                            invalid={!!cellErr}
                                         />
+                                        {cellErr && (
+                                            <p className="text-destructive mt-1 text-xs">{cellErr}</p>
+                                        )}
                                     </td>
-                                ))}
+                                    )
+                                })}
                                 {!lockRows && (
                                     <td className="px-2 py-1.5 text-center">
                                         <Button
@@ -342,14 +362,19 @@ interface CellRendererProps {
     formValues?: Record<string, any>
     /** This row's values — for resolving a cell's `dependsOn` to a sibling cell. */
     rowValues?: Record<string, any>
+    /** Paint the control as invalid (destructive border). */
+    invalid?: boolean
 }
 
 // Per-cell widget. Mirrors the flat FieldRenderer in dynamic-form.tsx but
 // without the per-field Label (the column header is the label) and sized for a
 // table cell. Nested line-items inside a row are not supported (a row column is
 // a scalar widget).
-function CellRenderer({ field, value, onChange, disabled, formValues, rowValues }: CellRendererProps) {
+function CellRenderer({ field, value, onChange, disabled, formValues, rowValues, invalid }: CellRendererProps) {
     const widget = resolveWidget(field)
+    const invalidCls = invalid
+        ? 'border-destructive ring-1 ring-destructive/30 focus-visible:ring-destructive'
+        : ''
     // Per-field read-only: a column locked by a PrefillSpec.lock (e.g. the
     // "ordered" / "already received" progress columns of a receive-goods modal)
     // renders disabled so it shows context without being editable. Tolerates the
@@ -384,7 +409,16 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
     // Async searchable picker per row cell — e.g. the account_id column of a
     // journal entry's debit/credit lines. Same widget as the flat form.
     if (widget === 'dynamic_select') {
-        return <DynamicSelectField field={field} value={value} onChange={onChange} dependsValue={dependsValue} readonly={ro} />
+        return (
+            <DynamicSelectField
+                field={field}
+                value={value}
+                onChange={onChange}
+                dependsValue={dependsValue}
+                readonly={ro}
+                invalid={invalid}
+            />
+        )
     }
     if (widget === 'select' && (field.ref || getOptionsConfig(field)?.source)) {
         return (
@@ -408,6 +442,8 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     placeholder={field.placeholder}
                     disabled={off}
                     rows={2}
+                    aria-invalid={invalid || undefined}
+                    className={invalidCls || undefined}
                 />
             )
         case 'color':
@@ -417,6 +453,8 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     value={value || '#000000'}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
                     disabled={off}
+                    aria-invalid={invalid || undefined}
+                    className={invalidCls || undefined}
                 />
             )
         case 'select': {
@@ -425,7 +463,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
             if (effectiveOptions && effectiveOptions.length === 0) return null
             return (
                 <Select value={value || ''} onValueChange={onChange} disabled={off}>
-                    <SelectTrigger className="w-full">
+                    <SelectTrigger className={'w-full' + (invalidCls ? ` ${invalidCls}` : '')} aria-invalid={invalid || undefined}>
                         <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
                     </SelectTrigger>
                     <SelectContent>
@@ -445,9 +483,16 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                 <Input
                     type="number"
                     value={value ?? ''}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        const n = e.target.valueAsNumber
+                        // `0 || ''` would wipe a legitimate zero (unit_price=0)
+                        // and then required-validation fires with nothing marked.
+                        onChange(e.target.value === '' || !Number.isFinite(n) ? '' : n)
+                    }}
                     placeholder={field.placeholder}
                     disabled={off}
+                    aria-invalid={invalid || undefined}
+                    className={invalidCls || undefined}
                 />
             )
         case 'date':
@@ -457,6 +502,8 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     value={value || ''}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
                     disabled={off}
+                    aria-invalid={invalid || undefined}
+                    className={invalidCls || undefined}
                 />
             )
         default:
@@ -467,6 +514,8 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
                     placeholder={field.placeholder}
                     disabled={off}
+                    aria-invalid={invalid || undefined}
+                    className={invalidCls || undefined}
                 />
             )
     }