@asteby/metacore-runtime-react 45.0.0 → 45.3.0

package/src/document/cancel-with-reason.tsx

@@ -0,0 +1,214 @@
+// CancelWithReason — cancelación guiada de 2 pasos (benchmark §5.5 / §7): motivo
+// del catálogo del tipo de documento → (documento sustituto si el motivo lo
+// exige) → confirmación con consecuencias. Genérico: el catálogo de motivos, las
+// consecuencias y la política de aceptación las declara el llamador; el
+// componente no sabe de CFDI. Solo una acción primaria por paso (verbo +
+// sustantivo) y, si la acción falla, el modal sigue abierto con el error.
+import { useEffect, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    Label,
+    RadioGroup,
+    RadioGroupItem,
+} from '@asteby/metacore-ui/primitives'
+
+export interface CancelReason {
+    value: string
+    label: string
+    /** Ayuda corta bajo el motivo. */
+    hint?: string
+    /** Exige apuntar a un documento sustituto (motivo 01 del SAT). */
+    requiresSubstitute?: boolean
+    /** El motivo no aplica a este documento (se ve deshabilitado con `disabledReason`). */
+    disabled?: boolean
+    disabledReason?: string
+}
+
+export interface CancelPayload {
+    reason: string
+    substitute?: string
+}
+
+export interface CancelWithReasonProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    /** Identificación del documento («Factura A-1042»). */
+    documentLabel: string
+    title?: string
+    reasons: CancelReason[]
+    /** Consecuencias que se muestran en el paso de confirmación (§6.2). */
+    consequences: string[]
+    /**
+     * Aviso según el motivo elegido, p. ej. «requiere aceptación del receptor».
+     * Devuelve `undefined` si no hay.
+     */
+    notice?: (reason: CancelReason) => string | undefined
+    /** Formato del identificador del sustituto; si se define, valida en línea. */
+    substitutePattern?: RegExp
+    substituteLabel?: string
+    substituteHelp?: string
+    /** Zona para crear el sustituto desde el mismo asistente (el host la implementa). */
+    substituteSlot?: (props: { value: string; onChange: (v: string) => void }) => ReactNode
+    /** Ejecuta la cancelación; debe lanzar con `message` si falla. */
+    onConfirm: (payload: CancelPayload) => Promise<unknown>
+    /** Se llama tras un éxito, antes de cerrar. */
+    onDone?: () => void
+    confirmLabel?: string
+}
+
+type Step = 'reason' | 'confirm'
+
+export function CancelWithReason(props: CancelWithReasonProps) {
+    const { open, onOpenChange, reasons, consequences, onConfirm, onDone } = props
+    const { t } = useTranslation()
+    const [step, setStep] = useState<Step>('reason')
+    const [reasonValue, setReasonValue] = useState('')
+    const [substitute, setSubstitute] = useState('')
+    const [busy, setBusy] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (open) {
+            setStep('reason')
+            setReasonValue('')
+            setSubstitute('')
+            setError(null)
+            setBusy(false)
+        }
+    }, [open])
+
+    const reason = reasons.find((r) => r.value === reasonValue)
+    const substituteValid =
+        !reason?.requiresSubstitute ||
+        (substitute.trim().length > 0 && (!props.substitutePattern || props.substitutePattern.test(substitute.trim())))
+    const notice = reason ? props.notice?.(reason) : undefined
+    const tr = (s: string) => t(s, { defaultValue: s })
+
+    const confirm = async () => {
+        if (!reason) return
+        setBusy(true)
+        setError(null)
+        try {
+            await onConfirm({ reason: reason.value, substitute: reason.requiresSubstitute ? substitute.trim() : undefined })
+            onDone?.()
+            onOpenChange(false)
+        } catch (e) {
+            setError((e as { message?: string })?.message || t('document.cancel.failed', { defaultValue: 'No se pudo cancelar. Revisa el detalle e intenta de nuevo.' }))
+            setBusy(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={(o) => (!busy ? onOpenChange(o) : undefined)}>
+            <DialogContent className='sm:max-w-lg'>
+                <DialogHeader>
+                    <DialogTitle>{props.title ?? t('document.cancel.title', { defaultValue: 'Solicitar cancelación' })}</DialogTitle>
+                    <DialogDescription>
+                        {props.documentLabel} ·{' '}
+                        {step === 'reason'
+                            ? t('document.cancel.step_reason', { defaultValue: 'Paso 1 de 2: elige el motivo' })
+                            : t('document.cancel.step_confirm', { defaultValue: 'Paso 2 de 2: confirma' })}
+                    </DialogDescription>
+                </DialogHeader>
+
+                {step === 'reason' ? (
+                    <div className='flex flex-col gap-4'>
+                        <RadioGroup value={reasonValue} onValueChange={setReasonValue} className='gap-2'>
+                            {reasons.map((r) => (
+                                <label
+                                    key={r.value}
+                                    className='flex cursor-pointer items-start gap-3 rounded-md border p-3 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[[data-state=checked]]:border-primary'
+                                >
+                                    <RadioGroupItem value={r.value} disabled={r.disabled} className='mt-0.5' />
+                                    <span className='flex flex-col'>
+                                        <span className='text-sm font-medium'>{tr(r.label)}</span>
+                                        {r.disabled && r.disabledReason ? (
+                                            <span className='text-xs text-muted-foreground'>{tr(r.disabledReason)}</span>
+                                        ) : r.hint ? (
+                                            <span className='text-xs text-muted-foreground'>{tr(r.hint)}</span>
+                                        ) : null}
+                                    </span>
+                                </label>
+                            ))}
+                        </RadioGroup>
+
+                        {reason?.requiresSubstitute ? (
+                            props.substituteSlot ? (
+                                props.substituteSlot({ value: substitute, onChange: setSubstitute })
+                            ) : (
+                                <div className='grid gap-2'>
+                                    <Label>{props.substituteLabel ?? t('document.cancel.substitute', { defaultValue: 'Documento sustituto' })}</Label>
+                                    <Input value={substitute} onChange={(e) => setSubstitute(e.target.value)} className='font-mono text-sm' />
+                                    {props.substituteHelp ? <p className='text-xs text-muted-foreground'>{tr(props.substituteHelp)}</p> : null}
+                                    {substitute && !substituteValid ? (
+                                        <p className='text-xs text-destructive'>{t('document.cancel.substitute_invalid', { defaultValue: 'El formato del identificador no es válido.' })}</p>
+                                    ) : null}
+                                </div>
+                            )
+                        ) : null}
+                        {notice ? <p className='rounded-md bg-muted p-3 text-sm'>{tr(notice)}</p> : null}
+                    </div>
+                ) : (
+                    <div className='flex flex-col gap-3'>
+                        <div className='flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive'>
+                            <AlertTriangle className='mt-0.5 h-4 w-4 shrink-0' />
+                            <ul className='list-disc pl-4'>
+                                {consequences.map((c) => (
+                                    <li key={c}>{tr(c)}</li>
+                                ))}
+                            </ul>
+                        </div>
+                        <dl className='grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm'>
+                            <dt className='text-muted-foreground'>{t('document.cancel.reason', { defaultValue: 'Motivo' })}</dt>
+                            <dd className='font-medium'>{reason ? tr(reason.label) : ''}</dd>
+                            {reason?.requiresSubstitute ? (
+                                <>
+                                    <dt className='text-muted-foreground'>{t('document.cancel.substitute_short', { defaultValue: 'Sustituto' })}</dt>
+                                    <dd className='break-all font-mono text-xs'>{substitute}</dd>
+                                </>
+                            ) : null}
+                        </dl>
+                        {notice ? <p className='text-sm text-muted-foreground'>{tr(notice)}</p> : null}
+                        {error ? (
+                            <p role='alert' className='rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive'>
+                                {error}
+                            </p>
+                        ) : null}
+                    </div>
+                )}
+
+                <DialogFooter>
+                    {step === 'reason' ? (
+                        <>
+                            <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
+                                {t('document.cancel.keep', { defaultValue: 'Conservar documento' })}
+                            </Button>
+                            <Button type='button' disabled={!reason || !substituteValid} onClick={() => setStep('confirm')}>
+                                {t('document.cancel.continue', { defaultValue: 'Continuar' })}
+                            </Button>
+                        </>
+                    ) : (
+                        <>
+                            <Button type='button' variant='outline' disabled={busy} onClick={() => setStep('reason')}>
+                                {t('document.cancel.back', { defaultValue: 'Volver al motivo' })}
+                            </Button>
+                            <Button type='button' variant='destructive' disabled={busy} onClick={confirm}>
+                                {busy ? <Loader2 className='mr-1.5 h-4 w-4 animate-spin' /> : null}
+                                {props.confirmLabel ?? t('document.cancel.confirm', { defaultValue: 'Solicitar cancelación' })}
+                            </Button>
+                        </>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/document/document-header.tsx

@@ -0,0 +1,140 @@
+// DocumentHeader — cabecera estándar (benchmark §5.2): serie/folio, badges de
+// cada máquina de estado, cliente enlazable, métricas (total, saldo, fechas) y
+// un identificador copiable (UUID).
+import { useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Check, Copy } from 'lucide-react'
+import { Button } from '@asteby/metacore-ui/primitives'
+import { cn } from '@asteby/metacore-ui/lib'
+import { StatusBadge } from './status-badge'
+import { formatFieldValue, type FieldFormatOptions } from './format'
+import type { StatusDef } from './types'
+
+export interface HeaderBadge {
+    id: string
+    label?: string
+    status: StatusDef
+}
+
+export interface HeaderMetric {
+    label: string
+    value: string
+    tone?: 'default' | 'critical'
+    mono?: boolean
+}
+
+export interface DocumentHeaderProps {
+    title: string
+    /** Texto bajo el título; si `subtitleHref` viene, es un enlace (ficha del cliente). */
+    subtitle?: string
+    subtitleHref?: string
+    badges: HeaderBadge[]
+    metrics?: HeaderMetric[]
+    copyable?: { label: string; value: string }
+    /** Zona de acciones (normalmente `<ActionBar/>`). */
+    actions?: ReactNode
+    /** Slot antes del título (botón «Volver»). */
+    leading?: ReactNode
+    /** Renderiza el subtítulo como enlace del router del host. */
+    renderLink?: (props: { href: string; children: ReactNode; className?: string }) => ReactNode
+    className?: string
+}
+
+export function DocumentHeader({
+    title,
+    subtitle,
+    subtitleHref,
+    badges,
+    metrics,
+    copyable,
+    actions,
+    leading,
+    renderLink,
+    className,
+}: DocumentHeaderProps) {
+    const { t } = useTranslation()
+    const [copied, setCopied] = useState(false)
+
+    const copy = async () => {
+        if (!copyable?.value) return
+        try {
+            await navigator.clipboard.writeText(copyable.value)
+            setCopied(true)
+            setTimeout(() => setCopied(false), 1500)
+        } catch {
+            /* sin portapapeles (contexto inseguro): el valor sigue seleccionable */
+        }
+    }
+
+    const subtitleNode = subtitle ? (
+        subtitleHref ? (
+            renderLink ? (
+                renderLink({ href: subtitleHref, children: subtitle, className: 'text-sm text-primary hover:underline' })
+            ) : (
+                <a href={subtitleHref} className='text-sm text-primary hover:underline'>
+                    {subtitle}
+                </a>
+            )
+        ) : (
+            <span className='text-sm text-muted-foreground'>{subtitle}</span>
+        )
+    ) : null
+
+    return (
+        <header className={cn('flex flex-col gap-4 rounded-lg border bg-card p-5 text-card-foreground', className)} data-document-header=''>
+            {leading}
+            <div className='flex flex-wrap items-start justify-between gap-4'>
+                <div className='flex min-w-0 flex-col gap-2'>
+                    <div className='flex flex-wrap items-center gap-2'>
+                        <h1 className='text-2xl font-bold tracking-tight'>{title}</h1>
+                        {badges.map((b) => (
+                            <StatusBadge key={b.id} status={b.status} srLabel={b.label ? t(b.label, { defaultValue: b.label }) : undefined} />
+                        ))}
+                    </div>
+                    {subtitleNode}
+                </div>
+                {actions}
+            </div>
+
+            {metrics && metrics.length > 0 ? (
+                <dl className='grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3 lg:grid-cols-5'>
+                    {metrics.map((m) => (
+                        <div key={m.label}>
+                            <dt className='text-xs uppercase tracking-wide text-muted-foreground'>{m.label}</dt>
+                            <dd
+                                className={cn(
+                                    'font-medium tabular-nums',
+                                    m.mono && 'font-mono text-xs',
+                                    m.tone === 'critical' && 'text-destructive',
+                                )}
+                            >
+                                {m.value}
+                            </dd>
+                        </div>
+                    ))}
+                </dl>
+            ) : null}
+
+            {copyable?.value ? (
+                <div className='flex flex-wrap items-center gap-2 text-xs text-muted-foreground'>
+                    <span className='uppercase tracking-wide'>{copyable.label}</span>
+                    <code className='break-all font-mono text-foreground'>{copyable.value}</code>
+                    <Button
+                        type='button'
+                        size='sm'
+                        variant='ghost'
+                        className='h-6 px-1.5'
+                        onClick={copy}
+                        aria-label={t('document.copy', { defaultValue: 'Copiar' })}
+                    >
+                        {copied ? <Check className='h-3.5 w-3.5' /> : <Copy className='h-3.5 w-3.5' />}
+                        <span className='ml-1'>{copied ? t('document.copied', { defaultValue: 'Copiado' }) : t('document.copy', { defaultValue: 'Copiar' })}</span>
+                    </Button>
+                </div>
+            ) : null}
+        </header>
+    )
+}
+
+export { formatFieldValue }
+export type { FieldFormatOptions }

package/src/document/document-page.tsx

@@ -0,0 +1,268 @@
+// DocumentPage — «página de documento» declarativa (benchmark §5.2 / §6.1):
+// cabecera + badges + barra de acciones por estado + botones inteligentes +
+// pestañas. Se alimenta de un `DocumentSpec` (datos puros) y de un registro;
+// las pestañas de campos y de registros relacionados se resuelven solas, y lo
+// que necesita UI del host (historial, archivos, PDF) entra por `slots`.
+import { useMemo, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@asteby/metacore-ui/primitives'
+import { cn } from '@asteby/metacore-ui/lib'
+import { ActionBar } from './action-bar'
+import { DocumentHeader, type HeaderBadge, type HeaderMetric } from './document-header'
+import { SmartButtons, type SmartButtonItem } from './smart-buttons'
+import { StatusBadge } from './status-badge'
+import { interpolate, readPath, resolveActions, resolveStatus, resolveTitle } from './evaluate'
+import { formatFieldValue, type FieldFormatOptions } from './format'
+import { findStatusMachine, type DocumentPageRegistration } from './registry'
+import { useDocumentSources } from './use-document-sources'
+import type {
+    DocumentColumnDef,
+    DocumentContext,
+    DocumentFieldDef,
+    DocumentSlotRenderer,
+    DocumentSpec,
+    DocumentTabDef,
+    ResolvedAction,
+} from './types'
+
+export interface DocumentPageProps extends FieldFormatOptions {
+    registration: DocumentPageRegistration
+    record: Record<string, unknown>
+    /**
+     * Ejecuta una acción. El host decide: abrir el modal de la acción del
+     * modelo (`def.modelAction ?? def.key`), navegar (`def.href`), etc. La
+     * promesa mantiene el botón en `loading`.
+     */
+    onAction: (action: ResolvedAction, ctx: DocumentContext) => void | Promise<unknown>
+    /** UI del host para pestañas `kind: 'slot'` (historial, archivos, vista previa PDF…). */
+    slots?: Record<string, DocumentSlotRenderer>
+    /** Navegación del host (botones inteligentes, cliente). */
+    onNavigate?: (href: string) => void
+    renderLink?: (props: { href: string; children: ReactNode; className?: string }) => ReactNode
+    /** Botón «Volver» u otro contenido antes del título. */
+    leading?: ReactNode
+    /** Pestaña inicial (`?tab=`). */
+    defaultTab?: string
+    /** Pestaña controlada por el host (p. ej. «Ver detalle del error» abre Datos fiscales). */
+    tab?: string
+    onTabChange?: (tab: string) => void
+    /** Ruta base para el enlace del subtítulo (`/m/customers/{{customer_id}}`). */
+    subtitleHrefTemplate?: string
+    /** Cambia para forzar recarga de las fuentes tras una acción. */
+    reloadKey?: number
+    className?: string
+}
+
+export function DocumentPage(props: DocumentPageProps) {
+    const { registration, record, onAction, slots, onNavigate, renderLink, leading, defaultTab, className } = props
+    const { spec } = registration
+    const { t } = useTranslation()
+    const fmt: FieldFormatOptions = { locale: props.locale, currency: props.currency, timeZone: props.timeZone }
+
+    const recordId = record.id as string | number | undefined
+    const { sources, reload } = useDocumentSources(spec.sources, recordId)
+
+    const ctx: DocumentContext = useMemo(() => {
+        const base = { record, sources }
+        return { ...base, derived: registration.derive?.(base) ?? {} }
+    }, [record, sources, registration])
+
+    // Recarga las fuentes cuando el host avisa de un cambio (acción ejecutada).
+    const [lastReload, setLastReload] = useState(props.reloadKey ?? 0)
+    if ((props.reloadKey ?? 0) !== lastReload) {
+        setLastReload(props.reloadKey ?? 0)
+        reload()
+    }
+
+    const handleAction = (a: ResolvedAction) => {
+        const { tab: targetTab, openUrl, href } = a.def
+        if (targetTab) return setTab(targetTab)
+        if (openUrl) {
+            const url = interpolate(openUrl, ctx)
+            if (url) window.open(url, '_blank', 'noopener,noreferrer')
+            return
+        }
+        if (href) return onNavigate?.(interpolate(href, ctx))
+        return onAction(a, ctx)
+    }
+
+    const layout = useMemo(() => resolveActions(spec, ctx), [spec, ctx])
+
+    const badges: HeaderBadge[] = spec.statuses
+        .map((m): HeaderBadge | null => {
+            const status = resolveStatus(m, ctx)
+            return status ? { id: m.id, label: m.label, status } : null
+        })
+        .filter((b): b is HeaderBadge => !!b)
+
+    const metrics: HeaderMetric[] = (spec.metrics ?? [])
+        .filter((m) => !m.hideEmpty || readPath(ctx, m.path) != null)
+        .map((m) => ({
+            label: t(m.label, { defaultValue: m.label }),
+            value: formatFieldValue(readPath(ctx, m.path), m.format, fmt),
+            tone: m.tone,
+            mono: m.format === 'mono',
+        }))
+
+    const subtitleRaw = spec.subtitle ? readPath(ctx, spec.subtitle.path) : undefined
+    const subtitleText = subtitleRaw == null || subtitleRaw === '' ? '—' : formatFieldValue(subtitleRaw, 'text', fmt)
+    const subtitle = subtitleText === '—' ? undefined : subtitleText
+    const subtitleHref = subtitle && props.subtitleHrefTemplate ? interpolate(props.subtitleHrefTemplate, ctx) : undefined
+
+    const copyValue = spec.copyable ? readPath(ctx, spec.copyable.path) : undefined
+
+    const [innerTab, setInnerTab] = useState(defaultTab ?? spec.tabs[0]?.key)
+    const tab = props.tab ?? innerTab
+    const setTab = (key: string) => {
+        setInnerTab(key)
+        props.onTabChange?.(key)
+    }
+
+    const smart: SmartButtonItem[] = (spec.smartButtons ?? [])
+        .map((b): SmartButtonItem | null => {
+            const count = b.source ? sources[b.source]?.length ?? 0 : undefined
+            const active = b.source ? (count ?? 0) > 0 : b.field ? !!readPath(ctx, b.field) : true
+            if (b.hideWhenEmpty && !active) return null
+            const href = b.href ? interpolate(b.href, ctx) : undefined
+            return {
+                key: b.key,
+                label: b.label,
+                icon: b.icon,
+                count,
+                disabled: !active && !b.tab,
+                onClick: () => {
+                    if (b.tab) setTab(b.tab)
+                    else if (href) onNavigate?.(href)
+                },
+            }
+        })
+        .filter((b): b is SmartButtonItem => !!b)
+
+    return (
+        <div className={cn('flex flex-col gap-4', className)} data-document-page={spec.model}>
+            <DocumentHeader
+                title={resolveTitle(spec.title, ctx) || t('document.untitled', { defaultValue: 'Documento' })}
+                subtitle={subtitle}
+                subtitleHref={subtitleHref}
+                badges={badges}
+                metrics={metrics}
+                copyable={
+                    spec.copyable && copyValue
+                        ? { label: t(spec.copyable.label, { defaultValue: spec.copyable.label }), value: String(copyValue) }
+                        : undefined
+                }
+                leading={leading}
+                renderLink={renderLink}
+                actions={<ActionBar layout={layout} onAction={(a) => handleAction(a)} />}
+            />
+
+            <SmartButtons items={smart} />
+
+            <Tabs value={tab} onValueChange={setTab} className='flex flex-col gap-4'>
+                <TabsList className='w-fit'>
+                    {spec.tabs.map((tb) => (
+                        <TabsTrigger key={tb.key} value={tb.key}>
+                            {t(tb.label, { defaultValue: tb.label })}
+                            {tabCount(tb, ctx) !== undefined ? (
+                                <span className='ml-1.5 rounded-full bg-muted px-1.5 text-xs tabular-nums'>{tabCount(tb, ctx)}</span>
+                            ) : null}
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+                {spec.tabs.map((tb) => (
+                    <TabsContent key={tb.key} value={tb.key} className='mt-0'>
+                        {renderTab(tb, spec, ctx, fmt, slots)}
+                    </TabsContent>
+                ))}
+            </Tabs>
+        </div>
+    )
+}
+
+function tabCount(tb: DocumentTabDef, ctx: DocumentContext): number | undefined {
+    if (tb.kind === 'records') return ctx.sources[tb.source]?.length
+    if (tb.kind === 'slot' && tb.count) {
+        const v = readPath(ctx, tb.count)
+        return typeof v === 'number' ? v : undefined
+    }
+    return undefined
+}
+
+function renderTab(
+    tb: DocumentTabDef,
+    spec: DocumentSpec,
+    ctx: DocumentContext,
+    fmt: FieldFormatOptions,
+    slots: Record<string, DocumentSlotRenderer> | undefined,
+): ReactNode {
+    if (tb.kind === 'slot') return slots?.[tb.slot]?.(ctx) ?? null
+    if (tb.kind === 'fields') {
+        return (
+            <div className='flex flex-col gap-4'>
+                {tb.groups.map((g, i) => {
+                    const fields = g.fields.filter((f: DocumentFieldDef) => !f.hideEmpty || readPath(ctx, f.path) != null)
+                    if (fields.length === 0) return null
+                    return (
+                        <section key={g.title ?? i} className='rounded-lg border bg-card p-5'>
+                            {g.title ? <h2 className='mb-3 text-sm font-semibold'>{g.title}</h2> : null}
+                            <dl className='grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-3'>
+                                {fields.map((f) => (
+                                    <div key={f.path} className={cn(f.wide && 'sm:col-span-2 lg:col-span-3')}>
+                                        <dt className='text-xs uppercase tracking-wide text-muted-foreground'>{f.label}</dt>
+                                        <dd className={cn('break-words font-medium', f.format === 'mono' && 'font-mono text-xs')}>
+                                            {formatFieldValue(readPath(ctx, f.path), f.format, fmt)}
+                                        </dd>
+                                    </div>
+                                ))}
+                            </dl>
+                        </section>
+                    )
+                })}
+            </div>
+        )
+    }
+    const rows = ctx.sources[tb.source] ?? []
+    if (rows.length === 0) {
+        return (
+            <p className='rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground'>
+                {tb.empty ?? 'Sin registros.'}
+            </p>
+        )
+    }
+    return (
+        <div className='overflow-x-auto rounded-lg border bg-card'>
+            <table className='w-full text-sm'>
+                <thead className='bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground'>
+                    <tr>
+                        {tb.columns.map((c) => (
+                            <th key={c.path} className='px-3 py-2 font-medium'>{c.label}</th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows.map((row, i) => (
+                        <tr key={String(row.id ?? i)} className='border-t'>
+                            {tb.columns.map((c) => (
+                                <td key={c.path} className='px-3 py-2'>{renderCell(c, row, spec, fmt)}</td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
+
+function renderCell(col: DocumentColumnDef, row: Record<string, unknown>, spec: DocumentSpec, fmt: FieldFormatOptions): ReactNode {
+    const v = row[col.path]
+    if (col.status) {
+        const machine = findStatusMachine(spec, col.status)
+        const st = machine?.states.find((s) => s.value === String(v))
+        if (st) return <StatusBadge status={st} />
+    }
+    return (
+        <span className={cn(col.format === 'mono' && 'font-mono text-xs', 'tabular-nums')}>
+            {formatFieldValue(v, col.format, fmt)}
+        </span>
+    )
+}