@asteby/metacore-runtime-react 28.3.7 → 28.5.0

package/src/__tests__/dynamic-relation-subtable-context.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+//
+// `lineSubtable` scopes the audit/system-column hiding to the view-modal
+// line-subtable context. On a standalone detail page (default, lineSubtable
+// omitted) the relation panel keeps the previous behaviour and still renders
+// audit columns (created_at, created_by, …). Inside the view modal the host
+// passes `lineSubtable` and those redundant columns are dropped.
+//
+// Guards against the regression CodeRabbit flagged on SDK #659: the audit
+// filter was applied unconditionally to every DynamicRelation, hiding those
+// columns on full detail pages too.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { DynamicRelation } from '../dynamic-relation'
+import { ApiProvider, type ApiClient } from '../api-context'
+
+afterEach(cleanup)
+
+const META = {
+    name: 'line_item',
+    columns: [
+        { key: 'id', label: 'ID', type: 'text', sortable: true, filterable: false, hidden: true },
+        { key: 'invoice_id', label: 'Factura', type: 'text', sortable: false, filterable: false },
+        { key: 'sku', label: 'SKU', type: 'text', sortable: true, filterable: true },
+        { key: 'created_at', label: 'Creado', type: 'datetime', sortable: true, filterable: false },
+    ],
+    actions: [],
+    hasActions: false,
+    enableCRUDActions: false,
+}
+
+const DATA = [{ id: 'li_1', invoice_id: 'inv_42', sku: 'A-1', created_at: '2026-01-01T00:00:00Z' }]
+
+function mockApi(): ApiClient {
+    return {
+        get: vi.fn((url: string) => {
+            if (url.startsWith('/metadata/table/')) {
+                return Promise.resolve({ data: { success: true, data: META } })
+            }
+            return Promise.resolve({ data: { success: true, data: DATA } })
+        }),
+        post: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } })),
+        put: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } })),
+        delete: vi.fn(() => Promise.resolve({ data: { success: true, data: {} } })),
+    }
+}
+
+function renderPanel(extra: Record<string, unknown>) {
+    return render(
+        <ApiProvider client={mockApi()}>
+            <DynamicRelation
+                kind="one_to_many"
+                model="line_item"
+                foreignKey="invoice_id"
+                parentId="inv_42"
+                {...extra}
+            />
+        </ApiProvider>,
+    )
+}
+
+describe('DynamicRelation — lineSubtable context', () => {
+    it('página de detalle (default): conserva la columna de auditoría created_at', async () => {
+        renderPanel({})
+        await waitFor(() => expect(screen.getByText('A-1')).toBeTruthy())
+        expect(screen.getByText('Creado')).toBeTruthy()
+    })
+
+    it('sub-tabla del modal de vista (lineSubtable): oculta created_at', async () => {
+        renderPanel({ lineSubtable: true })
+        await waitFor(() => expect(screen.getByText('A-1')).toBeTruthy())
+        expect(screen.queryByText('Creado')).toBeNull()
+    })
+})

package/src/__tests__/form-layout.test.ts

@@ -0,0 +1,113 @@
+// Declarative form_layout grouping contract (kernel PR #230). The two renderers
+// (dynamic-form.tsx, dialogs/dynamic-record.tsx) both drive their sections /
+// wizard steps off `groupFieldsBySection`, so — following PR #673 — we test the
+// pure grouping helper directly instead of booting the full modal under
+// happy-dom (which hangs on the async metadata/options fetches).
+import { describe, expect, it } from 'vitest'
+import {
+    groupFieldsBySection,
+    DEFAULT_SECTION_KEY,
+    type FormLayout,
+} from '../form-layout'
+
+interface F {
+    key: string
+    section?: string
+}
+
+const layout: FormLayout = {
+    mode: 'sections',
+    sections: [
+        { key: 'general', title: 'General' },
+        { key: 'billing', title: 'Facturación', collapsed: true },
+        { key: 'notes', title: 'Notas' }, // will end up empty → hidden
+    ],
+}
+
+describe('groupFieldsBySection — sections', () => {
+    it('groups visible fields by section respecting the sections order', () => {
+        const fields: F[] = [
+            { key: 'tax_id', section: 'billing' },
+            { key: 'name', section: 'general' },
+            { key: 'email', section: 'general' },
+            { key: 'currency', section: 'billing' },
+        ]
+        const groups = groupFieldsBySection(fields, layout)
+
+        // No orphans → no default group; sections in authored order; the empty
+        // `notes` section is omitted entirely.
+        expect(groups.map(g => g.key)).toEqual(['general', 'billing'])
+        expect(groups[0].fields.map(f => f.key)).toEqual(['name', 'email'])
+        expect(groups[1].fields.map(f => f.key)).toEqual(['tax_id', 'currency'])
+        // `collapsed` is carried through so the chrome can start collapsed.
+        expect(groups[1].collapsed).toBe(true)
+    })
+
+    it('puts section-less and unknown-section fields in a default group placed first', () => {
+        const fields: F[] = [
+            { key: 'name', section: 'general' },
+            { key: 'orphan' }, // no section
+            { key: 'stray', section: 'does_not_exist' }, // unknown section
+        ]
+        const groups = groupFieldsBySection(fields, layout)
+
+        expect(groups[0].key).toBe(DEFAULT_SECTION_KEY)
+        expect(groups[0].isDefault).toBe(true)
+        expect(groups[0].fields.map(f => f.key)).toEqual(['orphan', 'stray'])
+        expect(groups[1].key).toBe('general')
+    })
+
+    it('hides a section whose only members are filtered out (visible_when)', () => {
+        // The caller passes the ALREADY visibility-filtered list, so a section
+        // left with no fields must not render an empty shell / empty step.
+        const fields: F[] = [{ key: 'name', section: 'general' }]
+        const groups = groupFieldsBySection(fields, layout)
+        expect(groups.map(g => g.key)).toEqual(['general'])
+    })
+
+    it('without a layout returns a single default group carrying every field in order', () => {
+        const fields: F[] = [{ key: 'a' }, { key: 'b' }, { key: 'c', section: 'general' }]
+        const groups = groupFieldsBySection(fields, undefined)
+        expect(groups).toHaveLength(1)
+        expect(groups[0].key).toBe(DEFAULT_SECTION_KEY)
+        expect(groups[0].isDefault).toBe(true)
+        expect(groups[0].fields.map(f => f.key)).toEqual(['a', 'b', 'c'])
+    })
+})
+
+describe('groupFieldsBySection — steps', () => {
+    const stepsLayout: FormLayout = {
+        mode: 'steps',
+        sections: [
+            { key: 'who', title: 'Cliente' },
+            { key: 'what', title: 'Productos' },
+            { key: 'pay', title: 'Pago' },
+        ],
+    }
+
+    it('yields one group per non-empty step in order, ready for wizard navigation', () => {
+        const fields: F[] = [
+            { key: 'amount', section: 'pay' },
+            { key: 'customer_id', section: 'who' },
+            { key: 'items', section: 'what' },
+        ]
+        const groups = groupFieldsBySection(fields, stepsLayout)
+
+        // Ordered as authored → step 0 = who, last = pay, so a wizard advances
+        // who → what → pay and submits on `pay`.
+        expect(groups.map(g => g.key)).toEqual(['who', 'what', 'pay'])
+        const last = groups.length - 1
+        expect(groups[last].key).toBe('pay')
+        expect(groups[last].title).toBe('Pago')
+    })
+
+    it('drops an empty step so the wizard never stops on a blank page', () => {
+        const fields: F[] = [
+            { key: 'customer_id', section: 'who' },
+            { key: 'amount', section: 'pay' },
+        ]
+        const groups = groupFieldsBySection(fields, stepsLayout)
+        // `what` has no visible field → omitted; wizard is who → pay.
+        expect(groups.map(g => g.key)).toEqual(['who', 'pay'])
+    })
+})

package/src/__tests__/visible-when.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { evaluateVisibleWhen, getVisibleWhen } from '../dynamic-form-schema'
+import type { VisibleWhen } from '../types'
+
+// The discount_rules use case: a `rule_scope` field decides which picker shows.
+const equalsProduct: VisibleWhen = { field: 'rule_scope', equals: 'product' }
+const inCategory: VisibleWhen = { field: 'rule_scope', in: ['category'] }
+const inMulti: VisibleWhen = { field: 'scope', in: ['a', 'b'] }
+
+describe('evaluateVisibleWhen', () => {
+    it('no predicate → always visible', () => {
+        expect(evaluateVisibleWhen(undefined, { rule_scope: 'all' })).toBe(true)
+        expect(evaluateVisibleWhen(null, {})).toBe(true)
+    })
+
+    it('empty field → always visible (no-op)', () => {
+        expect(evaluateVisibleWhen({ field: '' } as VisibleWhen, { rule_scope: 'x' })).toBe(true)
+    })
+
+    it('`equals` matches the sibling value exactly', () => {
+        expect(evaluateVisibleWhen(equalsProduct, { rule_scope: 'product' })).toBe(true)
+        expect(evaluateVisibleWhen(equalsProduct, { rule_scope: 'category' })).toBe(false)
+        expect(evaluateVisibleWhen(equalsProduct, { rule_scope: 'all' })).toBe(false)
+    })
+
+    it('`in` matches membership; wins over `equals` when both present', () => {
+        expect(evaluateVisibleWhen(inCategory, { rule_scope: 'category' })).toBe(true)
+        expect(evaluateVisibleWhen(inCategory, { rule_scope: 'product' })).toBe(false)
+        expect(evaluateVisibleWhen(inMulti, { scope: 'b' })).toBe(true)
+        const both: VisibleWhen = { field: 'rule_scope', equals: 'product', in: ['category'] }
+        // `in` wins: category matches, product does not.
+        expect(evaluateVisibleWhen(both, { rule_scope: 'category' })).toBe(true)
+        expect(evaluateVisibleWhen(both, { rule_scope: 'product' })).toBe(false)
+    })
+
+    it('missing / null sibling value compares as empty string', () => {
+        expect(evaluateVisibleWhen(equalsProduct, {})).toBe(false)
+        expect(evaluateVisibleWhen(equalsProduct, { rule_scope: null })).toBe(false)
+        expect(evaluateVisibleWhen({ field: 'x', equals: '' } as VisibleWhen, {})).toBe(true)
+    })
+
+    it('coerces non-string sibling values before comparison', () => {
+        expect(evaluateVisibleWhen({ field: 'n', equals: '5' } as VisibleWhen, { n: 5 })).toBe(true)
+        expect(evaluateVisibleWhen({ field: 'b', in: ['true'] } as VisibleWhen, { b: true })).toBe(true)
+    })
+
+    it('predicate naming a field but no comparison → visible', () => {
+        expect(evaluateVisibleWhen({ field: 'rule_scope' } as VisibleWhen, { rule_scope: 'all' })).toBe(true)
+    })
+})
+
+describe('getVisibleWhen', () => {
+    it('reads snake_case and camelCase aliases', () => {
+        expect(getVisibleWhen({ visible_when: equalsProduct })).toEqual(equalsProduct)
+        expect(getVisibleWhen({ visibleWhen: inCategory })).toEqual(inCategory)
+    })
+
+    it('returns undefined for none / malformed', () => {
+        expect(getVisibleWhen(undefined)).toBeUndefined()
+        expect(getVisibleWhen({})).toBeUndefined()
+        expect(getVisibleWhen({ visible_when: { equals: 'x' } as unknown as VisibleWhen })).toBeUndefined()
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -686,7 +686,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         })}
                         {relations.length > 0 && (
                             <FieldCell fullWidth>
-                                <DynamicRelations record={record} relations={relations} />
+                                <DynamicRelations record={record} relations={relations} lineSubtable />
                             </FieldCell>
                         )}
                     </FieldGrid>

package/src/dashboard-grid.tsx

@@ -164,7 +164,11 @@ export function DashboardGrid({
                     // box auto-height and the tiles collapse into a strip — so we own
                     // the height here instead of hoping the dashboard layout supplies
                     // one.
-                    'h-[clamp(420px,60vh,720px)] w-full rounded-xl border border-dashed border-border/60 p-4',
+                    // No dashed border / padding wrapper: the skeleton tiles ARE
+                    // cards (same anatomy as the real widgets), so the mockup
+                    // should float exactly like the loaded dashboard, not sit
+                    // inside a boxed placeholder. Keep only the definite height.
+                    'h-[clamp(420px,60vh,720px)] w-full',
                     className,
                 )}
             >

package/src/dialogs/dynamic-record.tsx

@@ -52,7 +52,10 @@ import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../ser
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field'
 import { DynamicRelations } from '../dynamic-relations'
 import { useOptionsResolver, type ResolvedOption } from '../use-options-resolver'
-import { getFieldRef } from '../dynamic-form-schema'
+import { getFieldRef, getVisibleWhen, evaluateVisibleWhen } from '../dynamic-form-schema'
+import type { VisibleWhen } from '../types'
+import { groupFieldsBySection, type FormLayout } from '../form-layout'
+import { FieldSection, WizardProgress } from '../form-layout-ui'
 import { FieldCell } from '../field-grid'
 import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { normalizeRefFieldsForSubmit } from './normalize-submit'
@@ -146,6 +149,23 @@ export interface FieldDef {
     itemFields?: ItemField[]
     /** snake_case alias served by the kernel for `itemFields`. */
     item_fields?: ItemField[]
+    /**
+     * Conditional visibility: render — and required-check — this field only
+     * while a sibling field's current value matches the predicate. Mirrors the
+     * kernel v3 `visible_when` (projected onto the served modal FieldDef).
+     * Tolerates the camelCase alias. Absent = always visible; a hidden field is
+     * dropped from the required-gate so it never blocks submit. Evaluated by
+     * `evaluateVisibleWhen` against the live form values.
+     */
+    visible_when?: VisibleWhen
+    /** camelCase alias for `visible_when`. */
+    visibleWhen?: VisibleWhen
+    /**
+     * Form-layout membership: the key of the `form_layout` section this field
+     * belongs to (kernel PR #230). Absent → the default group. See
+     * `groupFieldsBySection`.
+     */
+    section?: string
 }
 
 // Permissive shape: the wire payload may omit some fields (e.g. `title` is
@@ -163,6 +183,15 @@ interface ModalMetadata {
     createTitle?: string
     editTitle?: string
     fields?: FieldDef[]
+    /**
+     * Declarative form layout (kernel PR #230): groups the fields into named
+     * sections rendered stacked (`mode:"sections"`) or as a wizard
+     * (`mode:"steps"`). Absent → the legacy flat two-column grid. Tolerates the
+     * camelCase alias an app might author.
+     */
+    form_layout?: FormLayout
+    /** camelCase alias for `form_layout`. */
+    formLayout?: FormLayout
     /**
      * Backend-localized CRUD success messages (modal metadata). Preferred over
      * the raw response message which is not localized.
@@ -458,17 +487,49 @@ export function isMoneyField(field: FieldDef, value: any): boolean {
 // given mode. `hidden` fields never render. A `readonly` (server/system-
 // generated) field is EXCLUDED on create — the user can't set a value the
 // server will overwrite — but stays visible on edit/view (rendered disabled).
+//
+// `formValues`, when provided, additionally applies each field's `visible_when`
+// predicate against the live form values (conditional visibility): a field is
+// dropped while the referenced sibling's value does not match. Driving both the
+// render and the required-gate off this same list means a hidden field never
+// blocks submit. Omitting `formValues` keeps the legacy (always-visible)
+// behaviour for callers that only gate on mode.
 export function filterVisibleFields(
     fields: FieldDef[] | undefined,
     mode: 'view' | 'edit' | 'create',
+    formValues?: Record<string, any>,
 ): FieldDef[] {
     return (fields ?? []).filter(f => {
         if (f.hidden) return false
         if (mode === 'create' && f.readonly) return false
+        if (formValues && !evaluateVisibleWhen(getVisibleWhen(f), formValues)) return false
         return true
     })
 }
 
+// stripHiddenFieldValues drops from a flat form-values object the keys of any
+// declared field currently hidden by its `visible_when` predicate, so the
+// submit never POSTs a value the form isn't showing (e.g. a DiscountRule with
+// rule_scope=category must not send the product_id / customer_id it hides).
+// This mirrors dynamic-form.tsx, which builds its Zod schema only over the
+// visible fields — hidden fields are dropped from BOTH the render/required-gate
+// AND the submitted values. Keys with no matching declared field, or whose
+// field carries no `visible_when`, always pass through (retrocompat).
+export function stripHiddenFieldValues(
+    values: Record<string, any>,
+    fields: FieldDef[] | undefined,
+    mode: 'view' | 'edit' | 'create',
+): Record<string, any> {
+    const visibleKeys = new Set(filterVisibleFields(fields, mode, values).map(f => f.key))
+    const out: Record<string, any> = {}
+    for (const [key, value] of Object.entries(values)) {
+        const field = (fields ?? []).find(f => f.key === key)
+        if (field && !visibleKeys.has(key) && getVisibleWhen(field)) continue
+        out[key] = value
+    }
+    return out
+}
+
 export function DynamicRecordDialog({
     open,
     onOpenChange,
@@ -505,6 +566,8 @@ export function DynamicRecordDialog({
     const [loading, setLoading] = useState(false)
     const [saving, setSaving] = useState(false)
     const [deleting, setDeleting] = useState(false)
+    // Wizard step cursor (form_layout mode:"steps" only).
+    const [stepIndex, setStepIndex] = useState(0)
 
     const isCreate = mode === 'create'
     const isView = mode === 'view'
@@ -516,8 +579,10 @@ export function DynamicRecordDialog({
         if (!open) return
         if (!isCreate && !recordId) return
 
-        // Fresh open → drop any validation errors from a prior submit.
+        // Fresh open → drop any validation errors from a prior submit and reset
+        // the wizard to its first step.
         setFieldErrors({})
+        setStepIndex(0)
 
         let cancelled = false
 
@@ -711,9 +776,12 @@ export function DynamicRecordDialog({
 
         if (isEditable) {
             // Collect ALL missing required fields (not just the first) and mark
-            // each inline instead of a single toast.
+            // 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 modalMeta.fields ?? []) {
+            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)
                 }
@@ -728,9 +796,16 @@ export function DynamicRecordDialog({
         // Required check passed → clear any prior validation errors.
         setFieldErrors({})
 
+        // Fields hidden by their `visible_when` predicate must not be POSTed:
+        // the render, the required-gate and the payload all drive off the same
+        // filter, so a DiscountRule with scope=category never submits the
+        // product_id / customer_id it isn't showing. Mirrors dynamic-form.tsx,
+        // which builds its Zod only over visibleFields.
+        const submittedValues = stripHiddenFieldValues(formValues, modalMeta.fields, mode)
+
         // Empty reference pickers → null (not "" / nil-UUID) so nullable FK
         // columns accept them instead of raising a 23503 FK violation.
-        const payload = normalizeRefFieldsForSubmit(formValues, modalMeta.fields)
+        const payload = normalizeRefFieldsForSubmit(submittedValues, modalMeta.fields)
 
         setSaving(true)
         try {
@@ -803,7 +878,66 @@ export function DynamicRecordDialog({
 
     const title = modalMeta ? config.getTitle(modalMeta, t) : ''
 
-    const visibleFields = filterVisibleFields(modalMeta?.fields, mode)
+    const visibleFields = filterVisibleFields(modalMeta?.fields, mode, formValues)
+
+    // Declarative form layout: group the (already visibility-filtered) fields by
+    // their section. Empty sections drop out for free. Steps mode only drives a
+    // wizard in editable modes — view mode always stacks the sections.
+    const formLayout = modalMeta?.form_layout ?? modalMeta?.formLayout
+    const groups = groupFieldsBySection(visibleFields, formLayout)
+    const isSteps = isEditable && formLayout?.mode === 'steps' && groups.length > 1
+    const clampedStep = Math.min(stepIndex, Math.max(groups.length - 1, 0))
+    const isLastStep = clampedStep === groups.length - 1
+
+    // Renders a list of fields into the shared two-column grid (each FieldCell
+    // gives min-w-0 so long values can't blow the columns past the dialog).
+    const renderFields = (groupFields: FieldDef[]) =>
+        groupFields.map(field => {
+            const isFullWidth =
+                field.type === 'textarea' ||
+                field.widget === 'textarea' ||
+                field.widget === 'richtext'
+            return (
+                <FieldCell key={field.key} fullWidth={isFullWidth}>
+                    <FieldRow
+                        field={field}
+                        record={record}
+                        value={formValues[field.key] ?? ''}
+                        mode={mode}
+                        error={fieldErrors[field.key]}
+                        onChange={val => {
+                            setFormValues((prev: Record<string, any>) => ({ ...prev, [field.key]: val }))
+                            setFieldErrors(prev => {
+                                if (!prev[field.key]) return prev
+                                const next = { ...prev }
+                                delete next[field.key]
+                                return next
+                            })
+                        }}
+                    />
+                </FieldCell>
+            )
+        })
+
+    // Wizard "Siguiente": gate only the CURRENT step's required (visible) fields,
+    // 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)
+            toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }))
+            return
+        }
+        setFieldErrors({})
+        setStepIndex(Math.min(clampedStep + 1, groups.length - 1))
+    }
+    const goBackStep = () => setStepIndex(Math.max(clampedStep - 1, 0))
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -821,54 +955,42 @@ export function DynamicRecordDialog({
                         <ImageUrlContext.Provider value={getImageUrl}>
                         <TimeZoneContext.Provider value={timeZone}>
                         <CurrencyContext.Provider value={currency}>
-                            {/* The grid IS the form element (the footer submit
-                                button targets it by id). FieldCell gives each
+                            {/* The form element groups its fields by the declared
+                                form_layout (sections stacked, or the current
+                                wizard step). Without a layout this is a single
+                                default group rendered with no chrome — the legacy
+                                two-column grid, unchanged. FieldCell gives each
                                 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"
                                 onSubmit={handleSubmit}
-                                className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
+                                className="grid gap-y-4"
                             >
-                                {visibleFields.map(field => {
-                                    const isFullWidth =
-                                        field.type === 'textarea' ||
-                                        field.widget === 'textarea' ||
-                                        field.widget === 'richtext'
-                                    return (
-                                        <FieldCell key={field.key} fullWidth={isFullWidth}>
-                                            <FieldRow
-                                                field={field}
-                                                record={record}
-                                                value={formValues[field.key] ?? ''}
-                                                mode={mode}
-                                                error={fieldErrors[field.key]}
-                                                onChange={val => {
-                                                    setFormValues((prev: Record<string, any>) => ({ ...prev, [field.key]: val }))
-                                                    // Clear this field's error as soon as the user edits it.
-                                                    setFieldErrors(prev => {
-                                                        if (!prev[field.key]) return prev
-                                                        const next = { ...prev }
-                                                        delete next[field.key]
-                                                        return next
-                                                    })
-                                                }}
-                                            />
-                                        </FieldCell>
-                                    )
-                                })}
+                                {isSteps && (
+                                    <WizardProgress groups={groups} stepIndex={clampedStep} />
+                                )}
+                                {(isSteps ? [groups[clampedStep]] : groups).map(group => (
+                                    <FieldSection key={group.key} group={group}>
+                                        <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                                            {renderFields(group.fields)}
+                                        </div>
+                                    </FieldSection>
+                                ))}
 
                                 {record?.external_url && (
-                                    <div className="sm:col-span-2 min-w-0">
-                                        <a
-                                            href={record.external_url}
-                                            target="_blank"
-                                            rel="noreferrer"
-                                            className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline mt-1"
-                                        >
-                                            <ExternalLink className="h-3.5 w-3.5" />
-                                            Ver en {record.external_provider ?? 'proveedor externo'}
-                                        </a>
+                                    <div className="grid grid-cols-1 sm:grid-cols-2">
+                                        <div className="sm:col-span-2 min-w-0">
+                                            <a
+                                                href={record.external_url}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline mt-1"
+                                            >
+                                                <ExternalLink className="h-3.5 w-3.5" />
+                                                Ver en {record.external_provider ?? 'proveedor externo'}
+                                            </a>
+                                        </div>
                                     </div>
                                 )}
                             </form>
@@ -881,6 +1003,7 @@ export function DynamicRecordDialog({
                                     <DynamicRelations
                                         record={record}
                                         relations={relations}
+                                        lineSubtable
                                         canCreate={mode === 'edit'}
                                         canEdit={mode === 'edit'}
                                         canDelete={mode === 'edit'}
@@ -908,9 +1031,17 @@ export function DynamicRecordDialog({
                         </Button>
                     ) : <span />}
                     <div className="flex items-center gap-2">
-                        <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving || deleting}>
-                            {config.cancelLabel}
-                        </Button>
+                        {/* Wizard "Anterior" replaces Cancel from the second step
+                            on; the first step still shows Cancel. */}
+                        {isSteps && clampedStep > 0 ? (
+                            <Button variant="outline" onClick={goBackStep} disabled={saving || deleting}>
+                                Anterior
+                            </Button>
+                        ) : (
+                            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving || deleting}>
+                                {config.cancelLabel}
+                            </Button>
+                        )}
                         {isView && onDelete && (
                             <Button
                                 variant="destructive"
@@ -926,7 +1057,15 @@ export function DynamicRecordDialog({
                                 Editar
                             </Button>
                         )}
-                        {isEditable && (
+                        {/* Non-final wizard step → "Siguiente" validates the step
+                            and advances instead of submitting. The last step (and
+                            every non-wizard form) keeps the real submit button. */}
+                        {isEditable && isSteps && !isLastStep && (
+                            <Button type="button" onClick={goNextStep} disabled={saving || loading}>
+                                Siguiente
+                            </Button>
+                        )}
+                        {isEditable && (!isSteps || isLastStep) && (
                             <Button
                                 type="submit"
                                 form="dynamic-record-form"