@asteby/metacore-runtime-react 34.1.0 → 35.0.0

package/dist/dialogs/dynamic-record.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // flows through <ApiProvider> from runtime-react. Host-specific runtime values —
 // the image-url resolver and the org IANA timezone — are passed as props so the
 // SDK stays transport- and host-agnostic.
-import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 /** Model key of the open create/edit dialog — used to hide "+" on self-FK pickers
  *  (e.g. Customer.parent_id) so they don't nest another "Crear Cliente" modal. */
@@ -23,9 +23,7 @@ import { es } from 'date-fns/locale';
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react';
 import { BarcodeScanner } from '../barcode-scanner';
 import { useApi } from '../api-context';
-import { toastServerError, extractFieldErrors, localizeFieldErrorMap } from '../server-error';
-import { validateValues, bagHasErrors } from '../validator';
-import { validationCatalog } from '../validation-catalog';
+import { toastServerError, extractFieldErrors, localizeFieldIssue } from '../server-error';
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field';
 import { DynamicRelations } from '../dynamic-relations';
 import { useOptionsResolver } from '../use-options-resolver';
@@ -169,6 +167,23 @@ function isRelationField(field) {
         !!getFieldRef(field) ||
         !!field.searchEndpoint);
 }
+// looksLikeForeignKey — true only for real FKs. A bare `*_id` suffix is NOT
+// enough: columns like `external_id`, `trace_id`, or `invoice_uid` are plain
+// text identifiers from a PAC/provider, not belongs_to relations. Treating them
+// as relations rendered an InitialsAvatar ("6" chip next to "6a8c…") and made
+// fiscal detail modals look broken.
+function looksLikeForeignKey(field) {
+    if (isRelationField(field))
+        return true;
+    if (typeof field.key !== 'string' || !field.key.endsWith('_id'))
+        return false;
+    const t = String(field.type || '').toLowerCase();
+    return (t === 'uuid' ||
+        t === 'search' ||
+        t === 'relation' ||
+        t === 'dynamic_select' ||
+        t === 'belongs_to');
+}
 function formatDisplayValue(rawValue, field) {
     // Unset nullable FK serialized as the nil UUID renders as empty, not zeros.
     const value = normalizeNilUuid(rawValue);
@@ -284,19 +299,9 @@ export function stripHiddenFieldValues(values, fields, mode) {
     }
     return out;
 }
-function toastValidationFailed(t, lang, localized) {
-    toast.error(t('validation.failed', { defaultValue: validationCatalog(lang).failed }), {
-        description: Object.values(localized).filter(Boolean).join('\n'),
-    });
-}
 export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, lockedFields, schema, onDelete, onEdit, onOpenFullPage, initialRecord, getImageUrl = identityImageUrl, timeZone, currency, onChange, }) {
     const api = useApi();
-    const { t, i18n } = useTranslation();
-    // Unique per dialog instance. The footer submit lives OUTSIDE <form>, so
-    // it binds via `form={id}`. A hardcoded id made nested create (product +
-    // "Crear categoría") submit the PARENT form — toast "Revisa los campos
-    // marcados" with no marks on the inner modal.
-    const formId = useId();
+    const { t } = useTranslation();
     const [modalMeta, setModalMeta] = useState(schema ? schema : null);
     const [relations, setRelations] = useState([]);
     const [record, setRecord] = useState(null);
@@ -490,25 +495,24 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
     const labelForKey = (key) => {
         const f = (modalMeta?.fields ?? []).find(x => x.key === key);
         if (f?.label)
-            return t(f.label, { defaultValue: f.label });
+            return f.label;
         return key.replace(/[._-]+/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
     };
-    const lang = i18n.language;
     // Turn a failed submit (422 `errors` map, or a bare `{errors}` body) into
     // inline field errors + a summary toast. When there is no field map, fall
     // back to the existing single cause-carrying toast.
     const handleSubmitError = (err) => {
         const map = extractFieldErrors(err);
         if (map) {
-            const labels = {};
-            for (const f of modalMeta?.fields ?? [])
-                labels[f.key] = labelForKey(f.key);
-            const localized = localizeFieldErrorMap(map, t, { labels, language: lang });
-            setFieldErrors(localized);
-            toastValidationFailed(t, lang, localized);
+            const next = {};
+            for (const [key, issues] of Object.entries(map)) {
+                next[key] = localizeFieldIssue(issues[0], labelForKey(key), t);
+            }
+            setFieldErrors(next);
+            toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }));
             return;
         }
-        toastServerError(err, { t, language: lang, fallback: t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }) });
+        toastServerError(err, { t, fallback: t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }) });
     };
     const handleSubmit = async (e) => {
         e?.preventDefault();
@@ -520,15 +524,15 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
             // 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 visible = filterVisibleFields(modalMeta.fields, mode, formValues);
-            const bag = validateValues(visible, formValues);
-            if (bagHasErrors(bag)) {
-                const labels = {};
-                for (const f of visible)
-                    labels[f.key] = t(f.label, { defaultValue: f.label });
-                const localized = localizeFieldErrorMap(bag, t, { labels, language: lang });
-                setFieldErrors(localized);
-                toastValidationFailed(t, lang, localized);
+            const missing = {};
+            for (const field of filterVisibleFields(modalMeta.fields, mode, formValues)) {
+                if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
+                    missing[field.key] = localizeFieldIssue({ code: 'required' }, field.label, t);
+                }
+            }
+            if (Object.keys(missing).length) {
+                setFieldErrors(missing);
+                toast.error(t('dynamic.validation_failed', { defaultValue: 'Revisa los campos marcados' }));
                 return;
             }
         }
@@ -649,21 +653,22 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
     // then advance. Mirrors handleSubmit's required check but scoped to the step.
     const goNextStep = () => {
         const step = groups[clampedStep];
-        const bag = validateValues((step?.fields ?? []), formValues);
-        if (bagHasErrors(bag)) {
-            const labels = {};
-            for (const f of step?.fields ?? [])
-                labels[f.key] = t(f.label, { defaultValue: f.label });
-            const localized = localizeFieldErrorMap(bag, t, { labels, language: lang });
-            setFieldErrors(localized);
-            toastValidationFailed(t, lang, localized);
+        const missing = {};
+        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 (_jsx(RecordDialogModelContext.Provider, { value: model, children: _jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90dvh] flex flex-col p-0 gap-0 overflow-hidden", style: { maxHeight: '90dvh' }, children: [_jsxs(DialogHeader, { className: "p-6 pb-4 border-b shrink-0", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: config.description })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: loading ? (_jsx(LoadingSkeleton, {})) : modalMeta ? (_jsx(ModelContext.Provider, { value: model, children: _jsx(ImageUrlContext.Provider, { value: getImageUrl, children: _jsx(TimeZoneContext.Provider, { value: timeZone, children: _jsxs(CurrencyContext.Provider, { value: currency, children: [_jsxs("form", { id: formId, onSubmit: handleSubmit, className: "grid gap-y-4", children: [isSteps && (_jsx(WizardProgress, { groups: groups, stepIndex: clampedStep })), (isSteps ? [groups[clampedStep]] : groups).map(group => (_jsx(FieldSection, { group: group, children: _jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2", children: renderFields(group.fields) }) }, group.key))), record?.external_url && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2", children: _jsx("div", { className: "sm:col-span-2 min-w-0", children: _jsxs("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", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), "Ver en ", record.external_provider ?? 'proveedor externo'] }) }) }))] }), !isCreate && record && relations.length > 0 && (_jsx("div", { className: "mt-6", children: _jsx(DynamicRelations, { record: record, relations: relations, lineSubtable: true, embedOnly: true, canCreate: mode === 'edit', canEdit: mode === 'edit', canDelete: mode === 'edit', onChange: handleChildChange }) }))] }) }) }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0 sm:justify-between", children: [isView && onOpenFullPage ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground", onClick: () => { onOpenChange(false); onOpenFullPage(); }, children: [_jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }), "Ver p\u00E1gina completa"] })) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [isSteps && clampedStep > 0 ? (_jsx(Button, { variant: "outline", onClick: goBackStep, disabled: saving || deleting, children: "Anterior" })) : (_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: saving || deleting, children: config.cancelLabel })), isView && onDelete && (_jsxs(Button, { variant: "destructive", onClick: handleDelete, disabled: deleting || loading, children: [deleting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), deleting ? 'Eliminando...' : 'Eliminar'] })), isView && onEdit && (_jsx(Button, { onClick: onEdit, disabled: deleting || loading, children: "Editar" })), isEditable && isSteps && !isLastStep && (_jsx(Button, { type: "button", onClick: goNextStep, disabled: saving || loading, children: "Siguiente" })), isEditable && (!isSteps || isLastStep) && (_jsxs(Button, { type: "submit", form: formId, disabled: saving || loading, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), saving ? config.submittingLabel : config.submitLabel] }))] })] })] }) }) }));
+    return (_jsx(RecordDialogModelContext.Provider, { value: model, children: _jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90dvh] flex flex-col p-0 gap-0 overflow-hidden", style: { maxHeight: '90dvh' }, children: [_jsxs(DialogHeader, { className: "p-6 pb-4 border-b shrink-0", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: config.description })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: loading ? (_jsx(LoadingSkeleton, {})) : modalMeta ? (_jsx(ModelContext.Provider, { value: model, children: _jsx(ImageUrlContext.Provider, { value: getImageUrl, children: _jsx(TimeZoneContext.Provider, { value: timeZone, children: _jsxs(CurrencyContext.Provider, { value: currency, children: [_jsxs("form", { id: "dynamic-record-form", onSubmit: handleSubmit, className: "grid gap-y-4", children: [isSteps && (_jsx(WizardProgress, { groups: groups, stepIndex: clampedStep })), (isSteps ? [groups[clampedStep]] : groups).map(group => (_jsx(FieldSection, { group: group, children: _jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2", children: renderFields(group.fields) }) }, group.key))), record?.external_url && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2", children: _jsx("div", { className: "sm:col-span-2 min-w-0", children: _jsxs("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", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), "Ver en ", record.external_provider ?? 'proveedor externo'] }) }) }))] }), !isCreate && record && relations.length > 0 && (_jsx("div", { className: "mt-6", children: _jsx(DynamicRelations, { record: record, relations: relations, lineSubtable: true, embedOnly: true, canCreate: mode === 'edit', canEdit: mode === 'edit', canDelete: mode === 'edit', onChange: handleChildChange }) }))] }) }) }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0 sm:justify-between", children: [isView && onOpenFullPage ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground", onClick: () => { onOpenChange(false); onOpenFullPage(); }, children: [_jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }), "Ver p\u00E1gina completa"] })) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [isSteps && clampedStep > 0 ? (_jsx(Button, { variant: "outline", onClick: goBackStep, disabled: saving || deleting, children: "Anterior" })) : (_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: saving || deleting, children: config.cancelLabel })), isView && onDelete && (_jsxs(Button, { variant: "destructive", onClick: handleDelete, disabled: deleting || loading, children: [deleting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), deleting ? 'Eliminando...' : 'Eliminar'] })), isView && onEdit && (_jsx(Button, { onClick: onEdit, disabled: deleting || loading, children: "Editar" })), isEditable && isSteps && !isLastStep && (_jsx(Button, { type: "button", onClick: goNextStep, disabled: saving || loading, children: "Siguiente" })), isEditable && (!isSteps || isLastStep) && (_jsxs(Button, { type: "submit", form: "dynamic-record-form", disabled: saving || loading, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), saving ? config.submittingLabel : config.submitLabel] }))] })] })] }) }) }));
 }
 function LoadingSkeleton() {
     return (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-24" }), _jsx(Skeleton, { className: "h-9 w-full" })] }, i))) }));
@@ -698,9 +703,7 @@ export function ReadonlyEditField({ field, value }) {
 // ReadonlyRelationField — a locked/readonly FK field (customer_id, category_id…)
 // resolves the record's label instead of showing the raw id, mirroring
 // RelationViewValue's lookup but rendered as a disabled input to match the rest
-// of ReadonlyEditField. Without this, a locked relation field (e.g. `lockedFields`
-// seeding a POS-selected customer into a vehicle create modal) would show a bare
-// UUID — the exact readability bug this dialog otherwise avoids elsewhere.
+// of ReadonlyEditField.
 function ReadonlyRelationField({ field, value, fieldRef, }) {
     const rawVal = value && typeof value === 'object' ? (value.value ?? value.id) : value;
     const needResolve = fieldRef != null || !!field.searchEndpoint;
@@ -720,7 +723,9 @@ function ReadonlyRelationField({ field, value, fieldRef, }) {
 // RelationViewValue — read-only FK lead. Resolves the relation's label + image
 // from (1) the sibling object the table served, then (2) the canonical options
 // endpoint, and renders an OptionLead (thumbnail / icon / color dot) + label.
-function RelationViewValue({ field, value, record, stack = false }) {
+// When `stack` is true (`display: "image_stack"`), the landscape mark sits ON
+// TOP of the label — wide logos (brand marks) fit without cropping.
+function RelationViewValue({ field, value, record, stack = false, }) {
     const getImageUrl = useContext(ImageUrlContext);
     const sib = relationSiblingValue(field, record);
     const sibLabel = typeof sib === 'string' ? sib : objectLabel(sib);
@@ -804,15 +809,15 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
         return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
     }
     const value = normalizeNilUuid(rawValue);
-    // Landscape stack on a relation FK (brand marks, product cards).
-    if (renderAs === 'image_stack' &&
-        (isRelationField(field) || (typeof field.key === 'string' && field.key.endsWith('_id')))) {
+    // Landscape stack on a relation FK (brand marks, product cards): image ON
+    // TOP, label UNDERNEATH. Checked before the default relation lead so a
+    // `display: "image_stack"` FK does not fall through to the side-by-side chip.
+    if (renderAs === 'image_stack' && looksLikeForeignKey(field)) {
         return _jsx(RelationViewValue, { field: field, value: value, record: record, stack: true });
     }
-    // Relation (search / dynamic_select / ref / any *_id) → resolved thumbnail +
-    // label. The *_id catch-all covers plain-typed FK columns not tagged as a
-    // relation field.
-    if (isRelationField(field) || (typeof field.key === 'string' && field.key.endsWith('_id'))) {
+    // Relation (search / dynamic_select / ref / uuid *_id FK) → resolved
+    // thumbnail + label. Plain text `*_id` columns (external_id, …) stay text.
+    if (looksLikeForeignKey(field)) {
         return _jsx(RelationViewValue, { field: field, value: value, record: record });
     }
     // The value is itself a resolved object the backend served inline — render
@@ -827,16 +832,24 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
     if (field.type === 'color') {
         return value ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-5 w-5 rounded-full border shadow-sm", style: { backgroundColor: value } }), _jsx("span", { className: "text-sm", children: value })] })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "-" }));
     }
-    // Landscape stack for image/logo URL columns.
+    // Landscape stack for image/logo URL columns (and `type: image` with
+    // `cellStyle: image_stack`). Wide marks sit above an optional caption.
     if (renderAs === 'image_stack') {
-        const caption = (typeof field.styleConfig?.label_field === 'string' &&
-            record?.[field.styleConfig.label_field]) ||
-            (typeof field.styleConfig?.labelField === 'string' &&
-                record?.[field.styleConfig.labelField]) ||
-            undefined;
-        return (_jsx("div", { className: "py-1", children: _jsx(ImageStack, { src: value ? String(value) : undefined, label: caption ? String(caption) : field.label, getImageUrl: getImageUrl, size: "lg" }) }));
+        if (value && isLucideIconName(value)) {
+            return _jsx(IconNameViewValue, { name: value });
+        }
+        const labelField = (field.styleConfig &&
+            field.styleConfig.label_field) ||
+            (field.styleConfig && field.styleConfig.labelField);
+        let caption;
+        if (labelField && record && typeof record === 'object') {
+            const raw = record[labelField];
+            if (raw != null && String(raw) !== '')
+                caption = String(raw);
+        }
+        return value || caption ? (_jsx("div", { className: "py-1", children: _jsx(ImageStack, { src: value ? String(value) : undefined, label: caption, getImageUrl: getImageUrl, size: "lg" }) })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "Sin imagen" }));
     }
-    if (field.type === 'image') {
+    if (field.type === 'image' || renderAs === 'image') {
         if (isLucideIconName(value)) {
             return _jsx(IconNameViewValue, { name: value });
         }
@@ -1007,8 +1020,33 @@ function StructuredViewValue({ value, field, locale, t, }) {
     if (isEmpty) {
         return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
     }
+    // Line-items arrays with a declared itemFields schema → mini-table.
+    // Plain objects (PAC provider_data, fiscal_data bags) → readable key/value
+    // list; nested objects/arrays render as pretty JSON instead of `key: {…}`
+    // stubs that looked broken in fiscal detail modals.
+    const hasItemFields = !!(field?.itemFields ?? field?.item_fields);
+    if (!hasItemFields &&
+        value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value)) {
+        return _jsx(JsonObjectViewValue, { value: value });
+    }
     return (_jsx("div", { className: "text-sm py-1", children: _jsx(CollectionCell, { value: value, itemFields: field?.itemFields ?? field?.item_fields, variant: "inline", locale: locale, t: t, getImageUrl: getImageUrl }) }));
 }
+/** Flatten a jsonb/object bag into labeled rows; nest as pretty JSON. */
+function JsonObjectViewValue({ value }) {
+    const entries = Object.entries(value).filter(([, v]) => v !== undefined);
+    if (entries.length === 0) {
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
+    return (_jsx("dl", { className: "grid gap-2 py-1 text-sm", children: entries.map(([key, raw]) => {
+            const label = humanizeToken(key);
+            const isNest = raw !== null &&
+                typeof raw === 'object' &&
+                !(raw instanceof Date);
+            return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx("dd", { className: "mt-0.5 break-words text-foreground", children: isNest ? (_jsx("pre", { className: "max-h-48 overflow-auto rounded-md bg-muted/40 p-2 text-[11px] leading-relaxed whitespace-pre-wrap", children: JSON.stringify(raw, null, 2) })) : raw === null || raw === '' ? (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) : (String(raw)) })] }, key));
+        }) }));
+}
 export function EditField({ field, value, onChange, record }) {
     const { t, i18n } = useTranslation();
     const editFieldImageUrl = useContext(ImageUrlContext);

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

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

package/dist/dynamic-columns.js

@@ -23,7 +23,7 @@ import { generateBadgeStyles, getInitials, relationChipStyles, } from '@asteby/m
 import { Progress } from './dialogs/_primitives';
 import { humanizeToken } from './dynamic-columns-helpers';
 import { objectLabel } from './dynamic-relation-helpers';
-import { ImageStack, OptionBadge, RelationThumbnail, statusColorFor, useIsDarkTheme, } from './display-value';
+import { OptionBadge, RelationThumbnail, ImageStack, statusColorFor, useIsDarkTheme, } from './display-value';
 import { MediaValue } from './rich-url';
 import { OptionsContext } from './options-context';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
@@ -468,6 +468,10 @@ export const resolveRelationSubtitle = (col, row) => {
  * carries an `image`. Falls back to the raw id when no sibling was resolved, and
  * to an empty marker when there is no value at all. Domain-agnostic: works for
  * every `belongs_to` column (category, supplier, brand, …) without per-addon code.
+ *
+ * When `stack` is true (column `display: "image_stack"`), the landscape mark
+ * sits ON TOP of the label — wide logos fit without cropping and the cell
+ * stays readable in dense tables.
  */
 const RelationCell = ({ col, row, getImageUrl, stack = false }) => {
     const display = resolveRelationLabel(col, row);
@@ -658,7 +662,15 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         return _jsx(ReferenceCell, { col: col, row: row.original });
                     }
                     // Landscape stack: wide image ON TOP, label UNDERNEATH.
+                    // Declared via `display: "image_stack"` on an image column
+                    // or on a belongs_to FK whose sibling carries a logo/photo
+                    // (brand marks, product cards). Fits logos that are wider
+                    // than tall without cropping into a square thumb.
                     if (renderAs === 'image_stack') {
+                        // FK relation (brand_id → brands) OR any column that
+                        // already resolved a sibling with an image — stack it.
+                        // Don't require `col.ref` alone: enrichment sometimes
+                        // leaves type=text while cellStyle carries image_stack.
                         const looksRelation = !!col.ref ||
                             (typeof col.key === 'string' &&
                                 col.key.endsWith('_id') &&
@@ -872,13 +884,6 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                                                         : 'FileText', className: "h-4 w-4" }) }, i));
                                     }), remaining > 0 && (_jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-medium ring-2 ring-background", children: ["+", remaining] }))] }));
                         }
-                        case 'image_stack': {
-                            const imageValue = value ||
-                                (Array.isArray(row.original.media)
-                                    ? row.original.media.find((m) => m.type === 'image')?.url
-                                    : null);
-                            return (_jsx(ImageCell, { value: imageValue, getImageUrl: getImageUrl, stack: true }));
-                        }
                         case 'image': {
                             const imageValue = value ||
                                 (Array.isArray(row.original.media)
@@ -886,6 +891,16 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                                     : null);
                             return _jsx(ImageCell, { value: imageValue, getImageUrl: getImageUrl });
                         }
+                        case 'image_stack': {
+                            // Defensive: normally handled above before the
+                            // switch; kept so a late `type: image_stack` without
+                            // cellStyle still stacks.
+                            const labelField = styleCfg(col, 'label_field', 'labelField');
+                            const caption = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined;
+                            return (_jsx(ImageCell, { value: value, getImageUrl: getImageUrl, label: caption || undefined, stack: true }));
+                        }
                         default: {
                             if (typeof value === 'object' && value !== null) {
                                 return (_jsx(CollectionCell, { value: value, locale: currentLanguage, t: t, itemFields: col.itemFields ?? col.item_fields, getImageUrl: getImageUrl }));

package/dist/dynamic-select-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AA2CA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BA4BA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;AAMD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,aAAoB,EACpB,kBAA0B,EAC1B,UAAkB,GACrB,EAAE,uBAAuB,+BA8SzB;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AA4CA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,IAAI,EACJ,IAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,+BA4BA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG,IAAI,CAAA;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCA4BA;AAMD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,cAAc,EAAE,GAAG,IAAI,CAAA;IAChD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,aAAoB,EACpB,kBAA0B,EAC1B,UAAkB,GACrB,EAAE,uBAAuB,+BAiTzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -23,6 +23,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // value). A dedicated `?ids=` lookup is a follow-up; create flows — the common
 // case — start empty and never hit this.
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, InitialsAvatar, } from '@asteby/metacore-ui/primitives';
 import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react';
 import { resolveColorCss } from '@asteby/metacore-ui/lib';
@@ -88,6 +89,8 @@ function useDebounced(value, ms) {
     return useDebouncedValue(value, ms);
 }
 export function DynamicSelectField({ field, value, onChange, seedOption, dependsValue, dependsHint, readonly = false, staticOptions = null, descriptionAsBadge = false, hideCreate = false, }) {
+    const { t } = useTranslation();
+    const ph = (fallback) => field.placeholder ? t(field.placeholder, { defaultValue: field.placeholder }) : fallback;
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState('');
     const [scanOpen, setScanOpen] = useState(false);
@@ -206,7 +209,7 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     // the eager fetch is in flight the label falls back to the seed/raw value,
     // then snaps to the name once options arrive.
     if (readonly) {
-        return (_jsx(Button, { type: "button", variant: "outline", role: "combobox", id: field.key, disabled: true, "aria-readonly": "true", className: "w-full min-w-0 cursor-default justify-start font-normal opacity-100", children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground'), children: selectedOption?.label ?? (loading ? 'Cargando…' : field.placeholder || '—') })] }) }));
+        return (_jsx(Button, { type: "button", variant: "outline", role: "combobox", id: field.key, disabled: true, "aria-readonly": "true", className: "w-full min-w-0 cursor-default justify-start font-normal opacity-100", children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground'), children: selectedOption?.label ?? (loading ? 'Cargando…' : ph('—')) })] }) }));
     }
     // w-full + min-w-0: as a grid cell child, the row must be allowed to shrink
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
@@ -215,10 +218,10 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open && !blockedByDependency, onOpenChange: (o) => { if (!blockedByDependency)
                     setOpen(o); }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, disabled: blockedByDependency, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, "data-depends-blocked": blockedByDependency ? '' : undefined, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [value && selectedOption ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: blockedByDependency
                                                 ? (dependsHint || DEFAULT_DEPENDS_HINT)
-                                                : selectedLabel || field.placeholder || 'Buscar…' }), descriptionAsBadge && selectedOption?.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: selectedOption.description })) : null] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
+                                                : selectedLabel || ph('Buscar…') }), descriptionAsBadge && selectedOption?.description ? (_jsx(Badge, { variant: "secondary", className: "shrink-0 font-normal tabular-nums", children: selectedOption.description })) : null] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
                         // Match the trigger width without an arbitrary Tailwind class
                         // (those don't always survive a consuming app's Tailwind scan).
-                        style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: field.placeholder || 'Buscar…', value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx(CommandEmpty, { children: useStatic
+                        style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: ph('Buscar…'), value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx(CommandEmpty, { children: useStatic
                                                 ? debounced
                                                     ? 'Sin resultados'
                                                     : 'Sin opciones'

package/dist/use-print-document.d.ts

@@ -12,9 +12,18 @@ export interface PrintDocumentArgs {
      * open   → open the PDF in a new tab (user prints from the viewer).
      */
     mode?: 'print' | 'download' | 'open';
-    /** Filename for the download mode (defaults to "<key>.pdf"). */
+    /**
+     * Hint filename for download mode. Prefer leaving this unset: the server
+     * expands `{{record.*}}` into Content-Disposition. A raw template string
+     * (e.g. "cfdi-{{record.number}}.pdf") must NOT be used as a.download —
+     * that is how downloads end up literally named with mustache braces.
+     */
     filename?: string;
 }
+/** Parse filename from Content-Disposition (RFC 5987 / quoted). */
+export declare function filenameFromContentDisposition(header: string | undefined | null): string | undefined;
+/** True when a caller passed an unexpanded mustache template as filename. */
+export declare function looksLikeFilenameTemplate(name: string | undefined): boolean;
 /**
  * Returns a `printDocument(args)` callback. Resolves once the PDF has been
  * fetched and the browser action (print/download/open) has been kicked off;

package/dist/use-print-document.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-print-document.d.ts","sourceRoot":"","sources":["../src/use-print-document.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,iBAAiB;IAC9B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;IACpC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,0CASrB,iBAAiB,KAAG,OAAO,CAAC,MAAM,CAAC,CAyD7C"}
+{"version":3,"file":"use-print-document.d.ts","sourceRoot":"","sources":["../src/use-print-document.ts"],"names":[],"mappings":"AAqBA,MAAM,WAAW,iBAAiB;IAC9B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,mEAAmE;AACnE,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAapG;AAED,6EAA6E;AAC7E,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAE3E;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,0CASrB,iBAAiB,KAAG,OAAO,CAAC,MAAM,CAAC,CAmE7C"}

package/dist/use-print-document.js

@@ -18,6 +18,27 @@
 // this hook constructs no client of its own.
 import { useCallback } from 'react';
 import { useApi } from './api-context';
+/** Parse filename from Content-Disposition (RFC 5987 / quoted). */
+export function filenameFromContentDisposition(header) {
+    if (!header)
+        return undefined;
+    const star = /filename\*\s*=\s*UTF-8''([^;]+)/i.exec(header);
+    if (star?.[1]) {
+        try {
+            return decodeURIComponent(star[1].trim().replace(/^"|"$/g, ''));
+        }
+        catch {
+            return star[1].trim().replace(/^"|"$/g, '');
+        }
+    }
+    const plain = /filename\s*=\s*"([^"]+)"|filename\s*=\s*([^;]+)/i.exec(header);
+    const raw = (plain?.[1] ?? plain?.[2] ?? '').trim();
+    return raw || undefined;
+}
+/** True when a caller passed an unexpanded mustache template as filename. */
+export function looksLikeFilenameTemplate(name) {
+    return !!name && /\{\{/.test(name);
+}
 /**
  * Returns a `printDocument(args)` callback. Resolves once the PDF has been
  * fetched and the browser action (print/download/open) has been kicked off;
@@ -35,9 +56,15 @@ export function usePrintDocument() {
         const blobUrl = URL.createObjectURL(blob);
         const cleanup = () => setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
         if (mode === 'download') {
+            const headers = res.headers || {};
+            const fromHeader = filenameFromContentDisposition(headers['content-disposition'] || headers['Content-Disposition']) || undefined;
+            // Prefer server-expanded name; never use a raw {{record.*}} template.
+            const downloadName = fromHeader ||
+                (!looksLikeFilenameTemplate(filename) ? filename : undefined) ||
+                `${key}.pdf`;
             const a = document.createElement('a');
             a.href = blobUrl;
-            a.download = filename || `${key}.pdf`;
+            a.download = downloadName;
             document.body.appendChild(a);
             a.click();
             a.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "34.1.0",
+  "version": "35.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/filename-from-disposition.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import {
+  filenameFromContentDisposition,
+  looksLikeFilenameTemplate,
+} from '../use-print-document'
+
+describe('filenameFromContentDisposition', () => {
+  it('parses quoted filename', () => {
+    expect(filenameFromContentDisposition('inline; filename="cfdi-F-950.pdf"')).toBe(
+      'cfdi-F-950.pdf',
+    )
+  })
+
+  it('parses RFC 5987 filename*', () => {
+    expect(
+      filenameFromContentDisposition("attachment; filename*=UTF-8''cfdi-F%20950.pdf"),
+    ).toBe('cfdi-F 950.pdf')
+  })
+
+  it('returns undefined for empty', () => {
+    expect(filenameFromContentDisposition(undefined)).toBeUndefined()
+  })
+})
+
+describe('looksLikeFilenameTemplate', () => {
+  it('detects mustache', () => {
+    expect(looksLikeFilenameTemplate('cfdi-{{record.number}}.pdf')).toBe(true)
+    expect(looksLikeFilenameTemplate('cfdi-F-950.pdf')).toBe(false)
+  })
+})

package/src/__tests__/prefill-scalar-from-record.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { readRecordPath, scalarDefaultFromRecord, unwrapRecordScalar } from '../action-modal-dispatcher'
+import type { ActionFieldDef } from '../types'
+
+describe('scalarDefaultFromRecord', () => {
+    it('unwraps FK cells with value/label', () => {
+        expect(unwrapRecordScalar({ value: 'abc', label: 'Cliente SA' })).toBe('abc')
+    })
+
+    it('reads dotted paths', () => {
+        const record = { fiscal_data: { forma_pago: '03' } }
+        expect(readRecordPath(record, 'fiscal_data.forma_pago')).toBe('03')
+    })
+
+    it('uses defaultFromRecord string', () => {
+        const field = { key: 'forma_pago', defaultFromRecord: 'fiscal_data.forma_pago' } as ActionFieldDef & {
+            defaultFromRecord: string
+        }
+        const record = { fiscal_data: { forma_pago: '01' }, forma_pago: '99' }
+        expect(scalarDefaultFromRecord(field, record)).toBe('01')
+    })
+
+    it('tries defaultFromRecord array in order', () => {
+        const field = {
+            key: 'uso_cfdi',
+            defaultFromRecord: ['fiscal_data.uso_cfdi', 'uso_cfdi'],
+        } as ActionFieldDef & { defaultFromRecord: string[] }
+        const record = { uso_cfdi: 'G03' }
+        expect(scalarDefaultFromRecord(field, record)).toBe('G03')
+    })
+
+    it('falls back to record[field.key]', () => {
+        const field = { key: 'customer_id' } as ActionFieldDef
+        const record = { customer_id: '11111111-1111-4111-8111-111111111111' }
+        expect(scalarDefaultFromRecord(field, record)).toBe('11111111-1111-4111-8111-111111111111')
+    })
+})

package/src/__tests__/record-detail-display.test.tsx

@@ -110,4 +110,34 @@ describe('ViewValue — detail dialog display mapping', () => {
         )
         expect(container.textContent).toContain('—')
     })
+
+    it('renders plain text external_id without a relation initials avatar', () => {
+        const { container } = render(
+            <ViewValue
+                field={{ key: 'external_id', label: 'ID externo', type: 'text' }}
+                value="6a8c931523ea7"
+                record={{}}
+            />
+        )
+        expect(screen.getByText('6a8c931523ea7')).toBeTruthy()
+        // Must NOT render the InitialsAvatar lead ("6" chip) used for FKs.
+        expect(container.querySelector('[data-slot="avatar"]')).toBeNull()
+        expect(container.textContent).not.toMatch(/^6\s*6a8c/)
+    })
+
+    it('renders nested provider_data objects as pretty JSON, not key: {…}', () => {
+        render(
+            <ViewValue
+                field={{ key: 'provider_data', label: 'Datos del proveedor', type: 'json' }}
+                value={{
+                    forma_pago: '03',
+                    INV: { Folio: 950, Serie: 'F' },
+                }}
+                record={{}}
+            />
+        )
+        expect(screen.getByText('03')).toBeTruthy()
+        expect(screen.getByText(/"Folio": 950/)).toBeTruthy()
+        expect(screen.queryByText(/Inv:\s*\{\.\.\.\}/i)).toBeNull()
+    })
 })