@asteby/metacore-runtime-react 24.0.0 → 24.0.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @asteby/metacore-runtime-react
 
+## 24.0.2
+
+### Patch Changes
+
+- a27d1a2: feat(relations): secondary identifier (SKU/email) under a reference chip
+
+  Reference chips (resolved FK cells, endpoint-option badges, jsonb line-item refs,
+  confirm-modal items) now render a muted secondary line under the label — a
+  product's SKU, a user's email — so a resolved record reads "Name / SKU" instead
+  of a bare name. Declarative: the SDK reads the backend-projected `subtitle` /
+  `description` on the option or resolved sibling (never a hardcoded column). Absent
+  → single-line as before. The select picker already surfaced `description`; this
+  brings the resolved-chip surfaces in line.
+
+## 24.0.1
+
+### Patch Changes
+
+- 4a62c3c: Preview automático del registro en el modal de confirmación de acciones de fila.
+
+  Al confirmar una row-action con `confirm` (p. ej. aceptar/rechazar un traspaso), el
+  `ConfirmActionDialog` ahora muestra un resumen compacto y de solo lectura del registro
+  que va a afectar, para no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la
+  metadata de tabla del modelo (labels + display hints, leída del cache o con un único fetch
+  a `/metadata/table/<model>`) y en los siblings de relación que la tabla ya resolvió sobre
+  la fila. La heurística surface relaciones resueltas a su label, campos line-items (jsonb,
+  como `Transfer.items`, renderizados producto × cantidad) y un puñado de escalares de
+  identidad; omite `id`, `organization_id`, timestamps y los `*_id` crudos sin label. Se
+  degrada solo: si no hay nada útil que mostrar, no renderiza la sección.
+
 ## 24.0.0
 
 ### Patch Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAgDA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCA+DlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAwDA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCA+DlB"}

package/dist/action-modal-dispatcher.js

@@ -19,8 +19,10 @@ import { DynamicRelations } from './dynamic-relations';
 import { DynamicSelectField } from './dynamic-select-field';
 import { DynamicDateField } from './dynamic-date-field';
 import { UploadField } from './upload-field';
-import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema';
+import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn, getFieldRef } from './dynamic-form-schema';
 import { FieldGrid, FieldCell, FieldLabel } from './field-grid';
+import { useMetadataCache } from './metadata-cache';
+import { ViewValue, objectLabel, relationSiblingValue, isLineItemsField as isRecordLineItemsField, } from './dialogs/dynamic-record';
 // Canonical registry lives in @asteby/metacore-sdk
 import { getActionComponent, } from '@asteby/metacore-sdk';
 function isPrefillSpec(v) {
@@ -110,6 +112,143 @@ function buildActionUrl(endpoint, model, recordId, actionKey) {
     }
     return hasRecord ? `/data/${model}/me/${recordId}/action/${actionKey}` : `/data/${model}/me/action/${actionKey}`;
 }
+// ── Preview automático del registro en el modal de confirmación ─────────────
+//
+// Antes de confirmar una row-action (aceptar/rechazar un traspaso, etc.) el
+// usuario ve un resumen compacto y read-only de QUÉ registro va a afectar, para
+// no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la metadata de
+// tabla del modelo (labels + display hints) y en los siblings de relación que la
+// tabla ya resolvió sobre el `record`. Se degrada solo — si no hay ni un campo
+// ni líneas útiles que mostrar, no renderiza nada (ni una caja vacía).
+// Claves de sistema/infra que nunca aportan contexto al preview.
+const PREVIEW_SKIP_KEYS = new Set([
+    'id',
+    'organization_id',
+    'org_id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+]);
+// Campos escalares "de identidad" que sí vale la pena anclar en el preview
+// aunque no sean relación ni line-items (nombre, folio, estado, etc.).
+const PREVIEW_INTEREST_KEYS = new Set([
+    'name',
+    'title',
+    'code',
+    'reference',
+    'folio',
+    'number',
+    'status',
+    'stage',
+    'state',
+]);
+const PREVIEW_INTEREST_STYLES = new Set(['status', 'badge', 'currency']);
+const MAX_PREVIEW_FIELD_ROWS = 6;
+function isEmptyPreviewValue(value) {
+    if (value === null || value === undefined || value === '')
+        return true;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'object' && !(value instanceof Date))
+        return Object.keys(value).length === 0;
+    return false;
+}
+// selectPreviewColumns aplica la heurística compacta sobre las columnas del
+// modelo: relaciones resueltas a su label, campos line-items (jsonb) y un puñado
+// de escalares de identidad. Omite id/org/timestamps y los *_id crudos cuya
+// relación no resolvió a un label legible.
+function selectPreviewColumns(columns, record) {
+    if (!columns || !record)
+        return [];
+    const lineItemRows = [];
+    const fieldRows = [];
+    for (const col of columns) {
+        if (!col || !col.key)
+            continue;
+        if (col.hidden)
+            continue;
+        if (PREVIEW_SKIP_KEYS.has(col.key))
+            continue;
+        const value = record[col.key];
+        // Line-items (jsonb array como Transfer.items) → mini-tabla producto×cantidad.
+        if (isRecordLineItemsField(col, value)) {
+            if (isEmptyPreviewValue(value))
+                continue;
+            lineItemRows.push({ col, value, lineItems: true });
+            continue;
+        }
+        // Relación (ref / search / dynamic_select / *_id): solo si el sibling
+        // resolvió a un label legible; si es un *_id crudo sin resolver, se omite.
+        const isRelation = !!getFieldRef(col) ||
+            col.type === 'search' ||
+            col.type === 'relation' ||
+            col.widget === 'dynamic_select' ||
+            (typeof col.key === 'string' && col.key.endsWith('_id'));
+        if (isRelation) {
+            const sib = relationSiblingValue(col, record);
+            const label = typeof sib === 'string' ? sib : objectLabel(sib);
+            if (!label)
+                continue;
+            fieldRows.push({ col, value, lineItems: false });
+            continue;
+        }
+        // Escalar de identidad (nombre/folio/estado/moneda…) con valor.
+        const styleKey = col.cellStyle ?? col.type;
+        const interesting = PREVIEW_INTEREST_KEYS.has(col.key) || PREVIEW_INTEREST_STYLES.has(String(styleKey));
+        if (interesting && !isEmptyPreviewValue(value)) {
+            fieldRows.push({ col, value, lineItems: false });
+        }
+    }
+    return [...fieldRows.slice(0, MAX_PREVIEW_FIELD_ROWS), ...lineItemRows];
+}
+function RecordPreview({ model, record }) {
+    const { t } = useTranslation();
+    const api = useApi();
+    const cached = useMetadataCache((s) => s.getMetadata(model));
+    const setMetadata = useMetadataCache((s) => s.setMetadata);
+    const [fetched, setFetched] = useState(null);
+    // Sin metadata cacheada → UN fetch a /metadata/table/<model> (mismo patrón
+    // que model-action-toolbar). Se guarda en el store para próximos usos.
+    useEffect(() => {
+        if (cached || !model)
+            return;
+        let cancelled = false;
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+            if (cancelled)
+                return;
+            const meta = (res.data?.data ?? res.data);
+            if (meta && Array.isArray(meta.columns)) {
+                setFetched(meta);
+                setMetadata(model, meta);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                setFetched(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [cached, model, api, setMetadata]);
+    const meta = cached ?? fetched;
+    const rows = useMemo(() => selectPreviewColumns(meta?.columns, record), [meta, record]);
+    // Degradación: nada útil que mostrar → no renderiza la sección.
+    if (rows.length === 0)
+        return null;
+    return (_jsx("div", { className: "mt-1 overflow-hidden rounded-md border bg-muted/30 text-sm", children: rows.map(({ col, value, lineItems }) => {
+            const label = t(col.label, { defaultValue: col.label });
+            if (lineItems) {
+                return (_jsxs("div", { className: "border-t px-3 py-2 first:border-t-0", children: [_jsx("div", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx(ViewValue, { field: col, value: value, record: record })] }, col.key));
+            }
+            return (_jsxs("div", { className: "flex items-baseline gap-3 border-t px-3 py-1.5 first:border-t-0", children: [_jsx("span", { className: "w-1/3 shrink-0 truncate text-muted-foreground", children: label }), _jsx("div", { className: "min-w-0 flex-1 [&_p]:py-0", children: _jsx(ViewValue, { field: col, value: value, record: record }) })] }, col.key));
+        }) }));
+}
 function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }) {
     const { t } = useTranslation();
     const api = useApi();
@@ -139,7 +278,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             setExecuting(false);
         }
     };
-    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${label}?` })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), label] })] })] }) }));
+    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), label] }), _jsx(AlertDialogDescription, { children: action.confirmMessage || `${label}?` })] }), record ? _jsx(RecordPreview, { model: model, record: record }) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: executing, children: t('common.cancel') }), _jsxs(AlertDialogAction, { onClick: (e) => { e.preventDefault(); execute(); }, disabled: executing, style: action.color ? { backgroundColor: action.color } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), label] })] })] }) }));
 }
 function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }) {
     const { t } = useTranslation();

package/dist/collection-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-cell.d.ts","sourceRoot":"","sources":["../src/collection-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkD9B,sFAAsF;AACtF,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAA;AAE9D;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACtB,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAA;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;CACf;AAoND;;;;;;GAMG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAWR;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAiOD,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,CAAC,CAAC,EAAE,SAAS,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAa,EACb,MAAM,EACN,CAAC,EACD,UAAU,EACV,WAAW,EACX,OAAiB,GACpB,EAAE,mBAAmB,qBA2HrB"}
+{"version":3,"file":"collection-cell.d.ts","sourceRoot":"","sources":["../src/collection-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkD9B,sFAAsF;AACtF,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAA;AAE9D;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACtB,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAA;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;CACf;AAwOD;;;;;;GAMG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAWR;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAkOD,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,CAAC,CAAC,EAAE,SAAS,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAa,EACb,MAAM,EACN,CAAC,EACD,UAAU,EACV,WAAW,EACX,OAAiB,GACpB,EAAE,mBAAmB,qBA2HrB"}

package/dist/collection-cell.js

@@ -55,12 +55,16 @@ function resolvedRefFor(field, row) {
         const obj = sibling;
         const label = obj.label;
         if (label !== undefined && label !== null && label !== '') {
+            const sub = obj.subtitle ?? obj.description;
             return {
                 label: String(label),
                 value: obj.value,
                 image: typeof obj.image === 'string' && obj.image !== ''
                     ? obj.image
                     : undefined,
+                subtitle: sub !== undefined && sub !== null && sub !== ''
+                    ? String(sub)
+                    : undefined,
             };
         }
     }
@@ -92,10 +96,12 @@ function resolvedRefObject(v) {
     const label = v.label;
     if (label === undefined || label === null || label === '')
         return null;
+    const sub = v.subtitle ?? v.description;
     return {
         label: String(label),
         value: v.value,
         image: typeof v.image === 'string' && v.image !== '' ? v.image : undefined,
+        subtitle: sub !== undefined && sub !== null && sub !== '' ? String(sub) : undefined,
     };
 }
 /**
@@ -104,9 +110,10 @@ function resolvedRefObject(v) {
  * resolved name. The exact look the FK table columns use, so resolved relations
  * read consistently everywhere (table popover, detail view, edit, line items).
  */
-function RefChip({ label, image, getImageUrl, }) {
+function RefChip({ label, image, subtitle, getImageUrl, }) {
     const isDark = useIsDarkTheme();
-    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium", style: relationChipStyles(label, { isDark }), title: label, children: [image ? (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: 18, height: 18 }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(image) : image, alt: label, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(label) })] })) : (_jsx(Box, { className: "h-3 w-3 shrink-0 opacity-70" })), _jsx("span", { className: "truncate", children: label })] }));
+    const size = subtitle ? 24 : 18;
+    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium", style: relationChipStyles(label, { isDark }), title: subtitle ? `${label} · ${subtitle}` : label, children: [image ? (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(image) : image, alt: label, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(label) })] })) : (_jsx(Box, { className: "h-3 w-3 shrink-0 opacity-70" })), subtitle ? (_jsxs("span", { className: "flex flex-col leading-tight min-w-0", children: [_jsx("span", { className: "truncate", children: label }), _jsx("span", { className: "truncate text-[0.65rem] opacity-70", children: subtitle })] })) : (_jsx("span", { className: "truncate", children: label }))] }));
 }
 /**
  * Visual cell for one declared item-field. A resolved `ref` renders as a
@@ -117,7 +124,7 @@ function RefChip({ label, image, getImageUrl, }) {
 function ItemFieldCell({ field, row, getImageUrl, }) {
     const ref = resolvedRefFor(field, row);
     if (ref?.label) {
-        return (_jsx(RefChip, { label: ref.label, image: ref.image, getImageUrl: getImageUrl }));
+        return (_jsx(RefChip, { label: ref.label, image: ref.image, subtitle: ref.subtitle, getImageUrl: getImageUrl }));
     }
     return _jsx(_Fragment, { children: formatScalar(row[field.key]) });
 }
@@ -311,7 +318,7 @@ function MiniTable({ rows, locale, t, itemFields, getImageUrl, }) {
                         const ref = refKeys.has(key)
                             ? resolvedRefObject(row[key])
                             : null;
-                        return (_jsx(TableCell, { className: "text-xs whitespace-nowrap", children: ref ? (_jsx(RefChip, { label: ref.label, image: ref.image, getImageUrl: getImageUrl })) : (formatScalar(row[key])) }, key));
+                        return (_jsx(TableCell, { className: "text-xs whitespace-nowrap", children: ref ? (_jsx(RefChip, { label: ref.label, image: ref.image, subtitle: ref.subtitle, getImageUrl: getImageUrl })) : (formatScalar(row[key])) }, key));
                     }) }, i))) })] }));
 }
 function ScalarList({ values }) {

package/dist/dialogs/dynamic-record.d.ts

@@ -159,6 +159,9 @@ export interface DynamicRecordDialogProps {
      */
     onChange?: () => void;
 }
+export declare function objectLabel(value: any): string | undefined;
+export declare function relationSiblingValue(field: FieldDef, record: any): any;
+export declare function fieldItemFields(field: FieldDef): ItemField[] | undefined;
 export declare function isLineItemsField(field: FieldDef, value: any): boolean;
 export declare function fkSeedOption(field: FieldDef, value: any, record: any): ResolvedOption | null;
 export declare function isMoneyField(field: FieldDef, value: any): boolean;

package/dist/dialogs/dynamic-record.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"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"}

package/dist/dialogs/dynamic-record.js

@@ -47,7 +47,7 @@ function resolvePath(obj, path) {
 // objectLabel pulls a human label off a resolved relation/user object the
 // backend serves: `{value,label}` (FK sibling), `{name,...}` (user object such
 // as created_by), or `{title}`. Returns undefined for plain/empty objects.
-function objectLabel(value) {
+export function objectLabel(value) {
     if (!value || typeof value !== 'object' || Array.isArray(value))
         return undefined;
     const label = value.label ?? value.name ?? value.title;
@@ -66,7 +66,7 @@ function pickImage(value) {
 // FK column. A field `category_id` (search/dynamic_select/ref) ships a sibling
 // `record.category = {value,label,image?}` (or a bare string/{name}); returns
 // the raw sibling (object or string) so the caller can extract label + image.
-function relationSiblingValue(field, record) {
+export function relationSiblingValue(field, record) {
     if (!record)
         return undefined;
     const candidates = [];
@@ -91,7 +91,7 @@ function relationSiblingValue(field, record) {
 }
 // fieldItemFields reads the declared jsonb line-items schema off a field,
 // tolerating the snake_case `item_fields` alias the kernel serves.
-function fieldItemFields(field) {
+export function fieldItemFields(field) {
     return field.itemFields ?? field.item_fields;
 }
 // isLineItemsField — a jsonb line-items column (e.g. Transfer.items): it either

package/dist/display-value.d.ts

@@ -39,6 +39,15 @@ export interface DisplayOption {
     icon?: string;
     color?: string;
     image?: string;
+    /**
+     * Secondary identifier shown UNDER the label (muted, smaller) — a product's
+     * SKU/barcode, a user's email, etc. Lets a reference chip read like
+     * "Camiseta / SKU-001" instead of a bare name, so a resolved record is
+     * unambiguous. Populated declaratively: the backend projects it as the
+     * option/relation `description` (SearchConfig/FieldOptionsConfig.Description,
+     * or a column's `label_description`). Absent → single-line label as before.
+     */
+    subtitle?: string;
 }
 /**
  * Colored option badge — the canonical "pro" pill for a select/status/badge

package/dist/display-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-value.d.ts","sourceRoot":"","sources":["../src/display-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB;;;GAGG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAmBxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAepD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAcA,CAAA;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB,CAmBA,CAAA"}
+{"version":3,"file":"display-value.d.ts","sourceRoot":"","sources":["../src/display-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB;;;GAGG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAmBxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAepD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAcA,CAAA;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB,CA8BA,CAAA"}

package/dist/display-value.js

@@ -70,5 +70,5 @@ export const OptionBadge = ({ option, getImageUrl }) => {
     const isDark = useIsDarkTheme();
     const colorSource = option.color || optionColor(option.value || option.label);
     const colorStyles = generateBadgeStyles(colorSource, { isDark });
-    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.image ? (_jsx(RelationThumbnail, { src: option.image, alt: option.label, getImageUrl: getImageUrl, size: 16 })) : (option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" })), _jsx("span", { children: option.label })] }));
+    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.image ? (_jsx(RelationThumbnail, { src: option.image, alt: option.label, getImageUrl: getImageUrl, size: option.subtitle ? 22 : 16 })) : (option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" })), option.subtitle ? (_jsxs("span", { className: "flex flex-col leading-tight text-start", children: [_jsx("span", { children: option.label }), _jsx("span", { className: "text-[0.7rem] opacity-70", children: option.subtitle })] })) : (_jsx("span", { children: option.label }))] }));
 };

package/dist/dynamic-columns.d.ts

@@ -112,6 +112,15 @@ export declare const resolveRelationLabel: (col: ColumnDefinition, row: any) =>
  * the chip then renders text-only, exactly as before.
  */
 export declare const resolveRelationImage: (col: ColumnDefinition, row: any) => string;
+/**
+ * Reads a secondary identifier the backend stamps on a resolved FK sibling — a
+ * product's SKU, a user's email — projected as `subtitle`/`description` (the
+ * relational twin of `image` via the column's `label_description`). Rendered
+ * muted under the label so a reference chip reads "Name / SKU". Domain-agnostic:
+ * only the generic `subtitle`/`description` keys are read (never a hardcoded
+ * `sku`/`code`), so the author picks the column declaratively. '' when absent.
+ */
+export declare const resolveRelationSubtitle: (col: ColumnDefinition, row: any) => string;
 /**
  * Builds the canonical column factory used by `<DynamicTable>` when the host
  * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAuC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAqFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAuC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AA8ID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -213,8 +213,11 @@ const BadgeWithEndpointOptions = ({ endpoint, value, getImageUrl }) => {
     const { optionsMap } = React.useContext(OptionsContext);
     const options = optionsMap.get(endpoint) || [];
     const option = options.find((opt) => opt.value === value);
+    // Reference options carry the backend-projected `description` (the SKU/email
+    // the author pointed the options config at) — surface it as the chip subtitle
+    // so a resolved record reads "Name / SKU" instead of a bare name.
     if (option)
-        return _jsx(OptionBadge, { option: option, fallback: String(value), getImageUrl: getImageUrl });
+        return _jsx(OptionBadge, { option: { ...option, subtitle: option.subtitle ?? option.description }, fallback: String(value), getImageUrl: getImageUrl });
     // No declared option matched → humanize the raw token as a safety net so a
     // cell never shows `in_progress` verbatim (option.label still wins above).
     return _jsx(Badge, { variant: "outline", children: humanizeToken(value) });
@@ -336,6 +339,23 @@ export const resolveRelationImage = (col, row) => {
     }
     return '';
 };
+/**
+ * Reads a secondary identifier the backend stamps on a resolved FK sibling — a
+ * product's SKU, a user's email — projected as `subtitle`/`description` (the
+ * relational twin of `image` via the column's `label_description`). Rendered
+ * muted under the label so a reference chip reads "Name / SKU". Domain-agnostic:
+ * only the generic `subtitle`/`description` keys are read (never a hardcoded
+ * `sku`/`code`), so the author picks the column declaratively. '' when absent.
+ */
+export const resolveRelationSubtitle = (col, row) => {
+    const sibling = getNestedValue(row, relationKeyFor(col));
+    if (sibling && typeof sibling === 'object') {
+        const sub = sibling.subtitle ?? sibling.description;
+        if (sub !== undefined && sub !== null && sub !== '')
+            return String(sub);
+    }
+    return '';
+};
 /**
  * Renders a resolved FK relation as a clean, truncated chip. Reads the
  * backend-resolved sibling `{ value, label[, image] }` (see `relationKeyFor`)
@@ -350,12 +370,13 @@ const RelationCell = ({ col, row, getImageUrl }) => {
     if (!display)
         return _jsx(EmptyCell, {});
     const image = resolveRelationImage(col, row);
+    const subtitle = resolveRelationSubtitle(col, row);
     // Deterministic, SUBTLE color keyed on the resolved label — lighter than
     // enum badges (soft tint, no heavy fill) so category/brand chips read as
     // alive yet stay visually distinct from option/status badges. Inline style
     // (hex-derived) bypasses the host tailwind safelist.
     const chipStyles = relationChipStyles(display, { isDark });
-    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: display, children: [image && (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: 18 })), _jsx("span", { className: "truncate", children: display })] }));
+    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: subtitle ? `${display} · ${subtitle}` : display, children: [image && (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: subtitle ? 24 : 18 })), subtitle ? (_jsxs("span", { className: "flex flex-col leading-tight min-w-0", children: [_jsx("span", { className: "truncate", children: display }), _jsx("span", { className: "truncate text-[0.7rem] opacity-70", children: subtitle })] })) : (_jsx("span", { className: "truncate", children: display }))] }));
 };
 /**
  * Renders a SAP-style polymorphic source-document reference as a navigable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "24.0.0",
+  "version": "24.0.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.10.0"
+    "@asteby/metacore-sdk": "^3.2.1",
+    "@asteby/metacore-ui": "^2.10.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.10.0"
+    "@asteby/metacore-sdk": "3.2.1",
+    "@asteby/metacore-ui": "2.10.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/action-modal-dispatcher.tsx

@@ -42,9 +42,17 @@ import { DynamicRelations } from './dynamic-relations'
 import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
-import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema'
+import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn, getFieldRef } from './dynamic-form-schema'
 import { FieldGrid, FieldCell, FieldLabel } from './field-grid'
-import type { ActionFieldDef } from './types'
+import { useMetadataCache } from './metadata-cache'
+import {
+    ViewValue,
+    objectLabel,
+    relationSiblingValue,
+    fieldItemFields,
+    isLineItemsField as isRecordLineItemsField,
+} from './dialogs/dynamic-record'
+import type { ActionFieldDef, TableMetadata, ColumnDefinition } from './types'
 // Canonical registry lives in @asteby/metacore-sdk
 import {
     type ActionMetadata,
@@ -228,6 +236,172 @@ function buildActionUrl(endpoint: string | undefined, model: string, recordId: s
     return hasRecord ? `/data/${model}/me/${recordId}/action/${actionKey}` : `/data/${model}/me/action/${actionKey}`
 }
 
+// ── Preview automático del registro en el modal de confirmación ─────────────
+//
+// Antes de confirmar una row-action (aceptar/rechazar un traspaso, etc.) el
+// usuario ve un resumen compacto y read-only de QUÉ registro va a afectar, para
+// no confirmar a ciegas. Es 100% del SDK y genérico: se apoya en la metadata de
+// tabla del modelo (labels + display hints) y en los siblings de relación que la
+// tabla ya resolvió sobre el `record`. Se degrada solo — si no hay ni un campo
+// ni líneas útiles que mostrar, no renderiza nada (ni una caja vacía).
+
+// Claves de sistema/infra que nunca aportan contexto al preview.
+const PREVIEW_SKIP_KEYS = new Set([
+    'id',
+    'organization_id',
+    'org_id',
+    'created_at',
+    'updated_at',
+    'deleted_at',
+    'created_by',
+    'created_by_id',
+    'updated_by',
+    'updated_by_id',
+])
+
+// Campos escalares "de identidad" que sí vale la pena anclar en el preview
+// aunque no sean relación ni line-items (nombre, folio, estado, etc.).
+const PREVIEW_INTEREST_KEYS = new Set([
+    'name',
+    'title',
+    'code',
+    'reference',
+    'folio',
+    'number',
+    'status',
+    'stage',
+    'state',
+])
+const PREVIEW_INTEREST_STYLES = new Set(['status', 'badge', 'currency'])
+
+const MAX_PREVIEW_FIELD_ROWS = 6
+
+function isEmptyPreviewValue(value: any): boolean {
+    if (value === null || value === undefined || value === '') return true
+    if (Array.isArray(value)) return value.length === 0
+    if (typeof value === 'object' && !(value instanceof Date)) return Object.keys(value).length === 0
+    return false
+}
+
+interface PreviewRow {
+    col: ColumnDefinition
+    value: any
+    lineItems: boolean
+}
+
+// selectPreviewColumns aplica la heurística compacta sobre las columnas del
+// modelo: relaciones resueltas a su label, campos line-items (jsonb) y un puñado
+// de escalares de identidad. Omite id/org/timestamps y los *_id crudos cuya
+// relación no resolvió a un label legible.
+function selectPreviewColumns(columns: ColumnDefinition[] | undefined, record: any): PreviewRow[] {
+    if (!columns || !record) return []
+    const lineItemRows: PreviewRow[] = []
+    const fieldRows: PreviewRow[] = []
+
+    for (const col of columns) {
+        if (!col || !col.key) continue
+        if (col.hidden) continue
+        if (PREVIEW_SKIP_KEYS.has(col.key)) continue
+        const value = record[col.key]
+
+        // Line-items (jsonb array como Transfer.items) → mini-tabla producto×cantidad.
+        if (isRecordLineItemsField(col as any, value)) {
+            if (isEmptyPreviewValue(value)) continue
+            lineItemRows.push({ col, value, lineItems: true })
+            continue
+        }
+
+        // Relación (ref / search / dynamic_select / *_id): solo si el sibling
+        // resolvió a un label legible; si es un *_id crudo sin resolver, se omite.
+        const isRelation =
+            !!getFieldRef(col as ActionFieldDef) ||
+            col.type === 'search' ||
+            col.type === 'relation' ||
+            (col as { widget?: string }).widget === 'dynamic_select' ||
+            (typeof col.key === 'string' && col.key.endsWith('_id'))
+        if (isRelation) {
+            const sib = relationSiblingValue(col as any, record)
+            const label = typeof sib === 'string' ? sib : objectLabel(sib)
+            if (!label) continue
+            fieldRows.push({ col, value, lineItems: false })
+            continue
+        }
+
+        // Escalar de identidad (nombre/folio/estado/moneda…) con valor.
+        const styleKey = col.cellStyle ?? col.type
+        const interesting =
+            PREVIEW_INTEREST_KEYS.has(col.key) || PREVIEW_INTEREST_STYLES.has(String(styleKey))
+        if (interesting && !isEmptyPreviewValue(value)) {
+            fieldRows.push({ col, value, lineItems: false })
+        }
+    }
+
+    return [...fieldRows.slice(0, MAX_PREVIEW_FIELD_ROWS), ...lineItemRows]
+}
+
+function RecordPreview({ model, record }: { model: string; record: any }) {
+    const { t } = useTranslation()
+    const api = useApi()
+    const cached = useMetadataCache((s) => s.getMetadata(model))
+    const setMetadata = useMetadataCache((s) => s.setMetadata)
+    const [fetched, setFetched] = useState<TableMetadata | null>(null)
+
+    // Sin metadata cacheada → UN fetch a /metadata/table/<model> (mismo patrón
+    // que model-action-toolbar). Se guarda en el store para próximos usos.
+    useEffect(() => {
+        if (cached || !model) return
+        let cancelled = false
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+                if (cancelled) return
+                const meta = (res.data?.data ?? res.data) as TableMetadata
+                if (meta && Array.isArray(meta.columns)) {
+                    setFetched(meta)
+                    setMetadata(model, meta)
+                }
+            })
+            .catch(() => {
+                if (!cancelled) setFetched(null)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [cached, model, api, setMetadata])
+
+    const meta = cached ?? fetched
+    const rows = useMemo(() => selectPreviewColumns(meta?.columns, record), [meta, record])
+
+    // Degradación: nada útil que mostrar → no renderiza la sección.
+    if (rows.length === 0) return null
+
+    return (
+        <div className="mt-1 overflow-hidden rounded-md border bg-muted/30 text-sm">
+            {rows.map(({ col, value, lineItems }) => {
+                const label = t(col.label, { defaultValue: col.label })
+                if (lineItems) {
+                    return (
+                        <div key={col.key} className="border-t px-3 py-2 first:border-t-0">
+                            <div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                {label}
+                            </div>
+                            <ViewValue field={col as any} value={value} record={record} />
+                        </div>
+                    )
+                }
+                return (
+                    <div key={col.key} className="flex items-baseline gap-3 border-t px-3 py-1.5 first:border-t-0">
+                        <span className="w-1/3 shrink-0 truncate text-muted-foreground">{label}</span>
+                        <div className="min-w-0 flex-1 [&_p]:py-0">
+                            <ViewValue field={col as any} value={value} record={record} />
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
 function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t } = useTranslation()
     const api = useApi()
@@ -268,6 +442,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                         {action.confirmMessage || `${label}?`}
                     </AlertDialogDescription>
                 </AlertDialogHeader>
+                {record ? <RecordPreview model={model} record={record} /> : null}
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={executing}>{t('common.cancel')}</AlertDialogCancel>
                     <AlertDialogAction

package/src/collection-cell.tsx

@@ -92,6 +92,8 @@ interface ResolvedRef {
     value?: unknown
     /** Optional thumbnail (product photo, logo, avatar) resolved by the backend. */
     image?: string
+    /** Optional secondary identifier (SKU/email) shown muted under the label. */
+    subtitle?: string
 }
 
 /**
@@ -110,6 +112,7 @@ function resolvedRefFor(
         const obj = sibling as Record<string, unknown>
         const label = obj.label
         if (label !== undefined && label !== null && label !== '') {
+            const sub = obj.subtitle ?? obj.description
             return {
                 label: String(label),
                 value: obj.value,
@@ -117,6 +120,10 @@ function resolvedRefFor(
                     typeof obj.image === 'string' && obj.image !== ''
                         ? obj.image
                         : undefined,
+                subtitle:
+                    sub !== undefined && sub !== null && sub !== ''
+                        ? String(sub)
+                        : undefined,
             }
         }
     } else if (typeof sibling === 'string' && sibling !== '') {
@@ -148,11 +155,14 @@ function resolvedRefObject(
     if (!isPlainObject(v)) return null
     const label = v.label
     if (label === undefined || label === null || label === '') return null
+    const sub = v.subtitle ?? v.description
     return {
         label: String(label),
         value: v.value,
         image:
             typeof v.image === 'string' && v.image !== '' ? v.image : undefined,
+        subtitle:
+            sub !== undefined && sub !== null && sub !== '' ? String(sub) : undefined,
     }
 }
 
@@ -165,23 +175,26 @@ function resolvedRefObject(
 function RefChip({
     label,
     image,
+    subtitle,
     getImageUrl,
 }: {
     label: string
     image?: string
+    subtitle?: string
     getImageUrl?: (path: string) => string
 }): React.ReactElement {
     const isDark = useIsDarkTheme()
+    const size = subtitle ? 24 : 18
     return (
         <span
             className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
             style={relationChipStyles(label, { isDark })}
-            title={label}
+            title={subtitle ? `${label} · ${subtitle}` : label}
         >
             {image ? (
                 <Avatar
                     className="shrink-0 rounded-sm ring-1 ring-border/40"
-                    style={{ width: 18, height: 18 }}
+                    style={{ width: size, height: size }}
                 >
                     <AvatarImage
                         src={getImageUrl ? getImageUrl(image) : image}
@@ -195,7 +208,14 @@ function RefChip({
             ) : (
                 <Box className="h-3 w-3 shrink-0 opacity-70" />
             )}
-            <span className="truncate">{label}</span>
+            {subtitle ? (
+                <span className="flex flex-col leading-tight min-w-0">
+                    <span className="truncate">{label}</span>
+                    <span className="truncate text-[0.65rem] opacity-70">{subtitle}</span>
+                </span>
+            ) : (
+                <span className="truncate">{label}</span>
+            )}
         </span>
     )
 }
@@ -218,7 +238,7 @@ function ItemFieldCell({
     const ref = resolvedRefFor(field, row)
     if (ref?.label) {
         return (
-            <RefChip label={ref.label} image={ref.image} getImageUrl={getImageUrl} />
+            <RefChip label={ref.label} image={ref.image} subtitle={ref.subtitle} getImageUrl={getImageUrl} />
         )
     }
     return <>{formatScalar(row[field.key])}</>
@@ -495,6 +515,7 @@ function MiniTable({
                                         <RefChip
                                             label={ref.label}
                                             image={ref.image}
+                                            subtitle={ref.subtitle}
                                             getImageUrl={getImageUrl}
                                         />
                                     ) : (

package/src/dialogs/dynamic-record.tsx

@@ -267,7 +267,7 @@ function resolvePath(obj: any, path: string): any {
 // objectLabel pulls a human label off a resolved relation/user object the
 // backend serves: `{value,label}` (FK sibling), `{name,...}` (user object such
 // as created_by), or `{title}`. Returns undefined for plain/empty objects.
-function objectLabel(value: any): string | undefined {
+export function objectLabel(value: any): string | undefined {
     if (!value || typeof value !== 'object' || Array.isArray(value)) return undefined
     const label = value.label ?? value.name ?? value.title
     if (label != null && label !== '') return String(label)
@@ -285,7 +285,7 @@ function pickImage(value: any): string | undefined {
 // FK column. A field `category_id` (search/dynamic_select/ref) ships a sibling
 // `record.category = {value,label,image?}` (or a bare string/{name}); returns
 // the raw sibling (object or string) so the caller can extract label + image.
-function relationSiblingValue(field: FieldDef, record: any): any {
+export function relationSiblingValue(field: FieldDef, record: any): any {
     if (!record) return undefined
     const candidates: string[] = []
     const ref = getFieldRef(field as ActionFieldDef)
@@ -305,7 +305,7 @@ function relationSiblingValue(field: FieldDef, record: any): any {
 
 // fieldItemFields reads the declared jsonb line-items schema off a field,
 // tolerating the snake_case `item_fields` alias the kernel serves.
-function fieldItemFields(field: FieldDef): ItemField[] | undefined {
+export function fieldItemFields(field: FieldDef): ItemField[] | undefined {
     return field.itemFields ?? field.item_fields
 }
 

package/src/display-value.tsx

@@ -98,6 +98,15 @@ export interface DisplayOption {
     icon?: string
     color?: string
     image?: string
+    /**
+     * Secondary identifier shown UNDER the label (muted, smaller) — a product's
+     * SKU/barcode, a user's email, etc. Lets a reference chip read like
+     * "Camiseta / SKU-001" instead of a bare name, so a resolved record is
+     * unambiguous. Populated declaratively: the backend projects it as the
+     * option/relation `description` (SearchConfig/FieldOptionsConfig.Description,
+     * or a column's `label_description`). Absent → single-line label as before.
+     */
+    subtitle?: string
 }
 
 /**
@@ -123,12 +132,23 @@ export const OptionBadge: React.FC<{
                     src={option.image}
                     alt={option.label}
                     getImageUrl={getImageUrl}
-                    size={16}
+                    size={option.subtitle ? 22 : 16}
                 />
             ) : (
                 option.icon && <DynamicIcon name={option.icon} className="h-3.5 w-3.5" />
             )}
-            <span>{option.label}</span>
+            {option.subtitle ? (
+                // Two-line identity: label on top, the secondary identifier
+                // (SKU/email/…) muted underneath. `leading-tight` keeps the pill
+                // compact; the subtitle inherits the badge's fg at reduced opacity
+                // so it reads as secondary on any color.
+                <span className="flex flex-col leading-tight text-start">
+                    <span>{option.label}</span>
+                    <span className="text-[0.7rem] opacity-70">{option.subtitle}</span>
+                </span>
+            ) : (
+                <span>{option.label}</span>
+            )}
         </Badge>
     )
 }

package/src/dynamic-columns.tsx

@@ -332,7 +332,10 @@ const BadgeWithEndpointOptions: React.FC<{
     const { optionsMap } = React.useContext(OptionsContext)
     const options = optionsMap.get(endpoint) || []
     const option = options.find((opt: any) => opt.value === value)
-    if (option) return <OptionBadge option={option} fallback={String(value)} getImageUrl={getImageUrl} />
+    // Reference options carry the backend-projected `description` (the SKU/email
+    // the author pointed the options config at) — surface it as the chip subtitle
+    // so a resolved record reads "Name / SKU" instead of a bare name.
+    if (option) return <OptionBadge option={{ ...option, subtitle: option.subtitle ?? (option as any).description }} fallback={String(value)} getImageUrl={getImageUrl} />
     // No declared option matched → humanize the raw token as a safety net so a
     // cell never shows `in_progress` verbatim (option.label still wins above).
     return <Badge variant="outline">{humanizeToken(value)}</Badge>
@@ -461,6 +464,23 @@ export const resolveRelationImage = (col: ColumnDefinition, row: any): string =>
     return ''
 }
 
+/**
+ * Reads a secondary identifier the backend stamps on a resolved FK sibling — a
+ * product's SKU, a user's email — projected as `subtitle`/`description` (the
+ * relational twin of `image` via the column's `label_description`). Rendered
+ * muted under the label so a reference chip reads "Name / SKU". Domain-agnostic:
+ * only the generic `subtitle`/`description` keys are read (never a hardcoded
+ * `sku`/`code`), so the author picks the column declaratively. '' when absent.
+ */
+export const resolveRelationSubtitle = (col: ColumnDefinition, row: any): string => {
+    const sibling = getNestedValue(row, relationKeyFor(col))
+    if (sibling && typeof sibling === 'object') {
+        const sub = sibling.subtitle ?? sibling.description
+        if (sub !== undefined && sub !== null && sub !== '') return String(sub)
+    }
+    return ''
+}
+
 /**
  * Renders a resolved FK relation as a clean, truncated chip. Reads the
  * backend-resolved sibling `{ value, label[, image] }` (see `relationKeyFor`)
@@ -478,6 +498,7 @@ const RelationCell: React.FC<{
     const display = resolveRelationLabel(col, row)
     if (!display) return <EmptyCell />
     const image = resolveRelationImage(col, row)
+    const subtitle = resolveRelationSubtitle(col, row)
     // Deterministic, SUBTLE color keyed on the resolved label — lighter than
     // enum badges (soft tint, no heavy fill) so category/brand chips read as
     // alive yet stay visually distinct from option/status badges. Inline style
@@ -487,12 +508,19 @@ const RelationCell: React.FC<{
         <span
             className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium"
             style={chipStyles}
-            title={display}
+            title={subtitle ? `${display} · ${subtitle}` : display}
         >
             {image && (
-                <RelationThumbnail src={image} alt={display} getImageUrl={getImageUrl} size={18} />
+                <RelationThumbnail src={image} alt={display} getImageUrl={getImageUrl} size={subtitle ? 24 : 18} />
+            )}
+            {subtitle ? (
+                <span className="flex flex-col leading-tight min-w-0">
+                    <span className="truncate">{display}</span>
+                    <span className="truncate text-[0.7rem] opacity-70">{subtitle}</span>
+                </span>
+            ) : (
+                <span className="truncate">{display}</span>
             )}
-            <span className="truncate">{display}</span>
         </span>
     )
 }