@asteby/metacore-runtime-react 34.0.2 → 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';
@@ -39,7 +37,7 @@ import { DynamicIcon, isLucideIconName } from '../dynamic-icon';
 import { IconPickerField } from '../icon-picker-field';
 import { humanizeToken } from '../dynamic-columns-helpers';
 import { formatDateCell } from '../dynamic-columns';
-import { OptionBadge, statusColorFor, useIsDarkTheme, } from '../display-value';
+import { ImageStack, OptionBadge, statusColorFor, useIsDarkTheme, } from '../display-value';
 import { MediaValue, RichText } from '../rich-url';
 import { generateBadgeStyles } from '@asteby/metacore-ui/lib';
 import { CollectionCell } from '../collection-cell';
@@ -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 }) {
+// 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);
@@ -750,6 +755,9 @@ function RelationViewValue({ field, value, record }) {
     if (!label && !image) {
         return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
     }
+    if (stack) {
+        return (_jsx("div", { className: "py-1", children: _jsx(ImageStack, { src: image || undefined, label: label, getImageUrl: getImageUrl, size: "lg" }) }));
+    }
     const lead = {
         image: image ? getImageUrl(image) : null,
         color: resolved?.color ?? null,
@@ -801,10 +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);
-    // 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'))) {
+    // 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 / 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
@@ -819,7 +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: "-" }));
     }
-    if (field.type === 'image') {
+    // 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') {
+        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' || renderAs === 'image') {
         if (isLucideIconName(value)) {
             return _jsx(IconNameViewValue, { name: value });
         }
@@ -990,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/display-value.d.ts

@@ -33,6 +33,29 @@ export declare const RelationThumbnail: React.FC<{
     getImageUrl?: (path: string) => string;
     size?: number;
 }>;
+/**
+ * Landscape-friendly identity block: wide image ON TOP, label (and optional
+ * subtitle) UNDERNEATH. Use for brand logos, product photos and any mark that
+ * is wider than it is tall — a square thumb next to text crops logos and
+ * wastes the cell. Declared via `display: "image_stack"` on a column (image
+ * URL or FK relation with a logo/photo sibling).
+ *
+ * No padded card / muted plate behind the mark — that ate table row height.
+ * The image is sized with max-width/max-height and `object-contain` only.
+ *
+ * Sizes (CSS, not Tailwind arbitrary — host safelists vary):
+ *   sm — compact table (~88×32)
+ *   md — default table (~112×40)
+ *   lg — detail/modal (~180×72)
+ */
+export declare const ImageStack: React.FC<{
+    src?: string | null;
+    label?: string | null;
+    subtitle?: string | null;
+    getImageUrl?: (path: string) => string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}>;
 export interface DisplayOption {
     value: string;
     label: string;

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,CAkBA,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"}
+{"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,CAiBA,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,CAuDA,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

@@ -58,7 +58,40 @@ export function statusColorFor(value) {
  * an addon-arbitrary Tailwind class never gets dropped by a consuming app's
  * class scan). Rendered inline alongside a label — never alone.
  */
-export const RelationThumbnail = ({ src, alt, getImageUrl, size = 20 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-md bg-muted/50 p-[3px] ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-contain" }), _jsx(AvatarFallback, { className: "rounded-md bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
+export const RelationThumbnail = ({ src, alt, getImageUrl, size = 20 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-md", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-contain" }), _jsx(AvatarFallback, { className: "rounded-md bg-transparent text-[8px] font-bold text-muted-foreground", children: getInitials(alt) })] }));
+/**
+ * Landscape-friendly identity block: wide image ON TOP, label (and optional
+ * subtitle) UNDERNEATH. Use for brand logos, product photos and any mark that
+ * is wider than it is tall — a square thumb next to text crops logos and
+ * wastes the cell. Declared via `display: "image_stack"` on a column (image
+ * URL or FK relation with a logo/photo sibling).
+ *
+ * No padded card / muted plate behind the mark — that ate table row height.
+ * The image is sized with max-width/max-height and `object-contain` only.
+ *
+ * Sizes (CSS, not Tailwind arbitrary — host safelists vary):
+ *   sm — compact table (~88×32)
+ *   md — default table (~112×40)
+ *   lg — detail/modal (~180×72)
+ */
+export const ImageStack = ({ src, label, subtitle, getImageUrl, size = 'md', className }) => {
+    const dims = size === 'lg'
+        ? { w: 180, h: 72, text: 'text-sm' }
+        : size === 'sm'
+            ? { w: 88, h: 32, text: 'text-[11px]' }
+            : { w: 112, h: 40, text: 'text-xs' };
+    const alt = label || '';
+    const resolved = src
+        ? getImageUrl
+            ? getImageUrl(src)
+            : src
+        : undefined;
+    const [broken, setBroken] = React.useState(false);
+    React.useEffect(() => {
+        setBroken(false);
+    }, [resolved]);
+    return (_jsxs("span", { className: `inline-flex max-w-[220px] flex-col items-start gap-0.5 ${className ?? ''}`, title: subtitle ? `${alt} · ${subtitle}` : alt || undefined, children: [resolved && !broken ? (_jsx("img", { src: resolved, alt: alt, className: "block object-contain", style: { maxWidth: dims.w, maxHeight: dims.h, width: 'auto', height: 'auto' }, onError: () => setBroken(true) })) : (_jsx("span", { className: "flex items-center text-[10px] font-semibold tracking-wide text-muted-foreground", style: { minHeight: Math.round(dims.h * 0.55) }, children: getInitials(alt || '?') })), (label || subtitle) && (_jsxs("span", { className: `flex w-full min-w-0 flex-col items-start leading-tight ${dims.text}`, children: [label ? (_jsx("span", { className: "w-full truncate text-left font-medium text-foreground/90", children: label })) : null, subtitle ? (_jsx("span", { className: "w-full truncate text-left text-[0.7em] text-muted-foreground", children: subtitle })) : null] }))] }));
+};
 /**
  * Colored option badge — the canonical "pro" pill for a select/status/badge
  * value. Explicit backend `color` wins; otherwise a stable, cohesive color is

package/dist/dynamic-columns.d.ts

@@ -173,6 +173,9 @@ export declare const resolveRelationSubtitle: (col: ColumnDefinition, row: any)
 export declare const ImageCell: React.FC<{
     value: unknown;
     getImageUrl: (path: string) => string;
+    /** Optional caption under the image (display: image_stack). */
+    label?: string;
+    stack?: boolean;
 }>;
 export declare function makeDefaultGetDynamicColumns(helpers?: DynamicColumnsHelpers): GetDynamicColumns;
 /**

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 { 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';
@@ -369,7 +369,7 @@ export const resolveRelationLabel = (col, row) => {
 export const resolveRelationImage = (col, row) => {
     const sibling = getNestedValue(row, relationKeyFor(col));
     if (sibling && typeof sibling === 'object') {
-        const img = sibling.image ?? sibling.avatar ?? sibling.photo;
+        const img = sibling.image ?? sibling.avatar ?? sibling.photo ?? sibling.logo ?? sibling.thumbnail;
         if (img !== undefined && img !== null && img !== '')
             return String(img);
     }
@@ -468,13 +468,20 @@ 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 }) => {
+const RelationCell = ({ col, row, getImageUrl, stack = false }) => {
     const display = resolveRelationLabel(col, row);
     if (!display)
         return _jsx(EmptyCell, {});
     const image = resolveRelationImage(col, row);
     const subtitle = resolveRelationSubtitle(col, row);
+    if (stack) {
+        return (_jsx(ImageStack, { src: image || undefined, label: display, subtitle: subtitle || undefined, getImageUrl: getImageUrl, size: "md" }));
+    }
     // FLAT reference cell: no tinted capsule around the pair. A reference is
     // data, not a status — the pill treatment (and its per-label tint) made a
     // products/warehouses listing read as a wall of badges. What identifies the
@@ -537,12 +544,17 @@ const AvatarCell = ({ name, desc, avatarSrc, getImageUrl }) => (_jsxs("div", { c
  * form widget stores — renders the glyph instead of an <img> that would 404
  * into an empty grey box. Exported for tests.
  */
-export const ImageCell = ({ value, getImageUrl }) => {
-    if (!value)
+export const ImageCell = ({ value, getImageUrl, label, stack = false }) => {
+    if (!value && !label)
         return _jsx("span", { className: "text-muted-foreground", children: "-" });
-    if (isLucideIconName(value)) {
+    if (value && isLucideIconName(value)) {
         return (_jsx("div", { className: "h-10 w-10 flex items-center justify-center rounded bg-muted", children: _jsx(DynamicIcon, { name: value, className: "h-5 w-5" }) }));
     }
+    if (stack) {
+        return (_jsx(ImageStack, { src: value ? String(value) : undefined, label: label, getImageUrl: getImageUrl, size: "md" }));
+    }
+    if (!value)
+        return _jsx("span", { className: "text-muted-foreground", children: "-" });
     return (_jsx("div", { className: "h-10 w-10 relative rounded overflow-hidden bg-muted flex items-center justify-center", children: _jsx("img", { src: getImageUrl(String(value)), alt: "Thumbnail", className: "h-full w-full object-contain", onError: (e) => {
                 ;
                 e.currentTarget.style.display = 'none';
@@ -649,6 +661,29 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                     if (renderAs === 'reference') {
                         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') &&
+                                resolveRelationLabel(col, row.original) != null);
+                        if (looksRelation) {
+                            return (_jsx(RelationCell, { col: col, row: row.original, getImageUrl: getImageUrl, stack: true }));
+                        }
+                        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 }));
+                    }
                     // Resolved FK relation chip. Triggers on an explicit
                     // `cellStyle: 'relation'` or on any column carrying a `ref`
                     // (a belongs_to FK) that isn't being rendered as an
@@ -856,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":"AA0CA,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;AAWD,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,11 +23,13 @@ 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';
 import { BarcodeScanner } from './barcode-scanner';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
+import { useDebouncedValue } from './use-debounced-value';
 import { useOptionsResolver } from './use-options-resolver';
 import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema';
 /**
@@ -84,14 +86,11 @@ export function OptionLead({ option, size = 20, }) {
     return null;
 }
 function useDebounced(value, ms) {
-    const [debounced, setDebounced] = useState(value);
-    useEffect(() => {
-        const t = setTimeout(() => setDebounced(value), ms);
-        return () => clearTimeout(t);
-    }, [value, ms]);
-    return debounced;
+    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);
@@ -210,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
@@ -219,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/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AA2FnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IACjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,aAAoB,EACpB,UAAU,EACV,UAAU,EACV,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,kBAA0B,GAC7C,EAAE,iBAAiB,+BAgvCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AA4FnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IACjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,aAAoB,EACpB,UAAU,EACV,UAAU,EACV,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,kBAA0B,GAC7C,EAAE,iBAAiB,+BAkvCnB"}