@asteby/metacore-runtime-react 18.1.0 → 18.2.0

package/dist/dialogs/dynamic-record.js

@@ -1,9 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // DynamicRecordDialog — renders a create/edit/view modal for a model based
-// on metadata fetched from `/metadata/modal/:model`. Ported from the ops
-// starter. Host-owned infra that was referenced by alias (axios client,
-// branch store) now flows through <ApiProvider> from runtime-react.
+// on metadata fetched from `/metadata/modal/:model`. This is the single,
+// SDK-owned source of truth for declarative record rendering (the ops fork was
+// consolidated back into here): tz-aware dates, FK image/label leads in both
+// view and edit, resolved relation/user-object labels (never raw JSON), nil-UUID
+// elision, pro option color/icon badges, and one_to_many child panels.
+//
+// Host-owned infra that was referenced by alias (axios client, branch store)
+// 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, useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button, Input, Textarea, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Skeleton, Badge, Popover, PopoverContent, PopoverTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@asteby/metacore-ui/primitives';
 import { cn } from '@asteby/metacore-ui/lib';
 import { Calendar } from './_primitives';
@@ -12,30 +20,103 @@ import { format, parseISO } from 'date-fns';
 import { es } from 'date-fns/locale';
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon } from 'lucide-react';
 import { useApi } from '../api-context';
-import { DynamicSelectField } from '../dynamic-select-field';
+import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field';
+import { DynamicRelations } from '../dynamic-relations';
+import { useOptionsResolver } from '../use-options-resolver';
 import { getFieldRef } from '../dynamic-form-schema';
-import { normalizeNilUuid } from '../nil-uuid';
+import { isNilUuid, normalizeNilUuid } from '../nil-uuid';
 import { humanizeToken } from '../dynamic-columns-helpers';
+import { formatDateCell } from '../dynamic-columns';
+const identityImageUrl = (p) => p ?? '';
+// localizedModelName resolves the (possibly addon-i18n) model name: prefer the
+// translated titleKey, fall back to the backend-provided raw title.
+function localizedModelName(meta, t) {
+    if (meta.titleKey && t(meta.titleKey) !== meta.titleKey)
+        return t(meta.titleKey);
+    return meta.title || '';
+}
 function resolvePath(obj, path) {
     return path.split('.').reduce((acc, part) => acc?.[part], obj);
 }
+// objectLabel pulls a human label off a resolved relation/user object the
+// backend serves: `{value,label}` (FK sibling), `{name,...}` (user object such
+// as created_by), or `{title}`. Returns undefined for plain/empty objects.
+function objectLabel(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return undefined;
+    const label = value.label ?? value.name ?? value.title;
+    if (label != null && label !== '')
+        return String(label);
+    return undefined;
+}
+// pickImage reads an image-ish path off a resolved object (FK sibling, user).
+function pickImage(value) {
+    if (!value || typeof value !== 'object')
+        return undefined;
+    const img = value.image ?? value.avatar ?? value.logo ?? value.thumbnail;
+    return typeof img === 'string' && img !== '' ? img : undefined;
+}
+// relationSiblingValue reads the resolved relation the table served alongside an
+// FK column. A field `category_id` (search/dynamic_select/ref) ships a sibling
+// `record.category = {value,label,image?}` (or a bare string/{name}); returns
+// the raw sibling (object or string) so the caller can extract label + image.
+function relationSiblingValue(field, record) {
+    if (!record)
+        return undefined;
+    const candidates = [];
+    const ref = getFieldRef(field);
+    if (ref)
+        candidates.push(ref);
+    if (typeof field.key === 'string' && field.key.endsWith('_id'))
+        candidates.push(field.key.slice(0, -3));
+    for (const key of candidates) {
+        const sib = record[key];
+        if (sib === undefined || sib === null)
+            continue;
+        if (typeof sib === 'string') {
+            if (sib === '' || isNilUuid(sib))
+                continue;
+            return sib;
+        }
+        if (typeof sib === 'object')
+            return sib;
+    }
+    return undefined;
+}
+// servedOption matches a field's served option list (enum/select with
+// {value,label,color,icon,image}) against the current value.
+function servedOption(field, value) {
+    if (!field.options?.length)
+        return undefined;
+    return field.options.find(o => o.value === String(value ?? ''));
+}
+// createdBySibling reads the resolver object the backend serves for the
+// auto-injected `created_by` avatar column: {name, avatar, email}.
+function createdBySibling(value, record) {
+    const obj = (value && typeof value === 'object' ? value : undefined) ?? record?.created_by;
+    if (obj && typeof obj === 'object' && (obj.name || obj.avatar || obj.email))
+        return obj;
+    return undefined;
+}
+// isRelationField — a field that resolves to another row (so view renders a lead
+// + label and edit renders the searchable picker).
+function isRelationField(field) {
+    return (field.type === 'search' ||
+        field.type === 'dynamic_select' ||
+        field.widget === 'dynamic_select' ||
+        !!getFieldRef(field) ||
+        !!field.searchEndpoint);
+}
 function formatDisplayValue(rawValue, field) {
     // Unset nullable FK serialized as the nil UUID renders as empty, not zeros.
     const value = normalizeNilUuid(rawValue);
     if (value === null || value === undefined || value === '')
         return '—';
+    const objLabel = objectLabel(value);
+    if (objLabel !== undefined)
+        return objLabel;
     if (field.type === 'boolean' || typeof value === 'boolean')
         return value ? 'Sí' : 'No';
-    if (field.type === 'date') {
-        try {
-            return new Date(value).toLocaleDateString('es-MX', {
-                day: 'numeric', month: 'long', year: 'numeric',
-            });
-        }
-        catch {
-            return String(value);
-        }
-    }
     if (field.type === 'select' && field.options?.length) {
         const match = field.options.find(o => o.value === String(value));
         // Matched option label wins (localized); humanize the raw token only
@@ -46,31 +127,43 @@ function formatDisplayValue(rawValue, field) {
 }
 const MODE_CONFIG = {
     create: {
-        getTitle: (meta) => meta.createTitle || meta.title || 'Nuevo registro',
+        getTitle: (meta, t) => {
+            const name = localizedModelName(meta, t);
+            return name ? `Crear ${name}` : (meta.createTitle || meta.title || 'Nuevo registro');
+        },
         description: 'Completa los campos para crear un nuevo registro.',
         submitLabel: 'Crear',
         submittingLabel: 'Creando...',
         cancelLabel: 'Cancelar',
     },
     edit: {
-        getTitle: (meta) => meta.editTitle || meta.title || 'Editar registro',
+        getTitle: (meta, t) => {
+            const name = localizedModelName(meta, t);
+            return name ? `Editar ${name}` : (meta.editTitle || meta.title || 'Editar registro');
+        },
         description: 'Modifica los campos y guarda los cambios.',
         submitLabel: 'Guardar cambios',
         submittingLabel: 'Guardando...',
         cancelLabel: 'Cancelar',
     },
     view: {
-        getTitle: (meta) => meta.title || 'Ver registro',
+        getTitle: (meta, t) => localizedModelName(meta, t) || meta.title || 'Ver registro',
         description: 'Información detallada del registro.',
         submitLabel: '',
         submittingLabel: '',
         cancelLabel: 'Cerrar',
     },
 };
+// Context threading host runtime values to nested field components (uploads,
+// image leads, tz-aware dates) without prop-drilling through every renderer.
 const ModelContext = createContext('');
-export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, schema, onDelete, onEdit, }) {
+const ImageUrlContext = createContext(identityImageUrl);
+const TimeZoneContext = createContext(undefined);
+export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, schema, onDelete, onEdit, onOpenFullPage, initialRecord, getImageUrl = identityImageUrl, timeZone, }) {
     const api = useApi();
+    const { t } = useTranslation();
     const [modalMeta, setModalMeta] = useState(schema ? schema : null);
+    const [relations, setRelations] = useState([]);
     const [record, setRecord] = useState(null);
     const [formValues, setFormValues] = useState({});
     const [loading, setLoading] = useState(false);
@@ -80,14 +173,39 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
     const isView = mode === 'view';
     const isEditable = mode === 'create' || mode === 'edit';
     const config = MODE_CONFIG[mode];
+    // ── Fetch metadata + record when dialog opens ──────────────────────────
     useEffect(() => {
         if (!open)
             return;
         if (!isCreate && !recordId)
             return;
         let cancelled = false;
+        // Seed instantly from the row the table already has so view/edit render
+        // without a spinner. The list row carries the pro siblings (resolved
+        // relation, served options, image url) the table cells used.
+        const seed = !isCreate && initialRecord ? initialRecord : null;
+        if (seed)
+            setRecord(seed);
+        const seedForm = (meta, rec) => {
+            const initial = {};
+            for (const field of meta.fields ?? []) {
+                initial[field.key] = resolvePath(rec, field.key) ?? field.defaultValue ?? '';
+            }
+            setFormValues(initial);
+        };
+        // A field value is "missing" from the seed row when the list omitted that
+        // column. Sibling pro fields aren't form fields, so we only check the
+        // declared field keys.
+        const seedIsComplete = (meta, rec) => (meta.fields ?? []).every(f => {
+            if (f.hidden)
+                return true;
+            const v = resolvePath(rec, f.key);
+            return v !== undefined;
+        });
         const load = async () => {
-            setLoading(true);
+            // Only show the skeleton when we have nothing to render yet.
+            if (!seed)
+                setLoading(true);
             try {
                 let meta = schema ? schema : null;
                 if (!meta) {
@@ -106,8 +224,14 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
                                 : field.defaultValue) ?? '';
                     }
                     setFormValues(initial);
+                    return;
                 }
-                else {
+                // Render immediately from the seed row.
+                if (seed && meta)
+                    seedForm(meta, seed);
+                // Only hit the record endpoint if the seed is absent or missing
+                // some declared field — keeps the modal instant for full rows.
+                if (!seed || (meta && !seedIsComplete(meta, seed))) {
                     const recordEndpoint = endpoint
                         ? `${endpoint}/${recordId}`
                         : `/dynamic/${model}/${recordId}`;
@@ -115,17 +239,18 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
                     if (cancelled)
                         return;
                     const rec = recRes.data?.data ?? recRes.data;
-                    setRecord(rec);
-                    const initial = {};
-                    for (const field of meta?.fields ?? []) {
-                        initial[field.key] = resolvePath(rec, field.key) ?? field.defaultValue ?? '';
-                    }
-                    setFormValues(initial);
+                    // Merge so the fetched record fills gaps without dropping the
+                    // table's pro siblings (the detail endpoint may omit them).
+                    const merged = seed ? { ...seed, ...rec } : rec;
+                    setRecord(merged);
+                    if (meta)
+                        seedForm(meta, merged);
                 }
             }
             catch (err) {
                 console.error('[DynamicRecordDialog] load error:', err);
-                toast.error('Error al cargar los datos');
+                if (!seed)
+                    toast.error('Error al cargar los datos');
             }
             finally {
                 if (!cancelled)
@@ -134,14 +259,51 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
         };
         load();
         return () => { cancelled = true; };
-    }, [open, recordId, model, endpoint, isCreate, schema, defaults]);
+        // initialRecord intentionally omitted: the row identity is captured per open
+        // via recordId; re-seeding mid-open would clobber edits.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, recordId, model, endpoint, isCreate, schema]);
+    // Reset when closed
     useEffect(() => {
         if (!open) {
             setModalMeta(null);
+            setRelations([]);
             setRecord(null);
             setFormValues({});
         }
     }, [open]);
+    // Fetch the model's declared one_to_many/many_to_many edges so view AND edit
+    // show child records (e.g. a sales order's line items) below the scalar
+    // fields. The modal form is driven by MODAL metadata (fields); relations live
+    // on TABLE metadata, hence the separate fetch. Skipped on create (no parent
+    // record yet). View renders them read-only; edit lets the user add/edit/delete.
+    useEffect(() => {
+        if (!open || mode === 'create' || !recordId) {
+            setRelations([]);
+            return;
+        }
+        let cancelled = false;
+        api.get(`/metadata/table/${model}`)
+            .then(res => {
+            if (cancelled)
+                return;
+            const meta = res.data?.data ?? res.data;
+            const rels = Array.isArray(meta?.relations) ? meta.relations : [];
+            // Localize each panel header: the backend serves `label` as an
+            // i18n key (addon bundle, loaded live) and the SDK renders it verbatim.
+            setRelations(rels.map(rel => ({
+                ...rel,
+                label: rel.label && t(rel.label) !== rel.label
+                    ? t(rel.label)
+                    : rel.label || rel.name,
+            })));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setRelations([]);
+        });
+        return () => { cancelled = true; };
+    }, [open, mode, model, recordId, api, t]);
     const handleSubmit = async (e) => {
         e?.preventDefault();
         if (!modalMeta)
@@ -157,16 +319,16 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
         setSaving(true);
         try {
             if (isCreate && onCreate) {
-                await onCreate(formValues);
-                toast.success('Registro creado correctamente');
-                onSaved?.();
+                const created = await onCreate(formValues);
+                toast.success(modalMeta?.messages?.created || 'Registro creado correctamente');
+                onSaved?.(created ?? undefined);
                 onOpenChange(false);
                 return;
             }
             if (!isCreate && recordId && onUpdate) {
-                await onUpdate(String(recordId), formValues);
-                toast.success('Guardado correctamente');
-                onSaved?.();
+                const updated = await onUpdate(String(recordId), formValues);
+                toast.success(modalMeta?.messages?.updated || 'Guardado correctamente');
+                onSaved?.(updated ?? undefined);
                 onOpenChange(false);
                 return;
             }
@@ -182,8 +344,13 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
                 res = await api.put(updateEndpoint, formValues);
             }
             if (res.data?.success !== false) {
-                toast.success(res.data?.message || (isCreate ? 'Registro creado correctamente' : 'Guardado correctamente'));
-                onSaved?.();
+                // Prefer the addon's localized message (modal metadata), then a
+                // localized fallback. NOT res.data.message — the dynamic CRUD
+                // endpoint returns a raw English string that would leak into the toast.
+                toast.success(modalMeta?.messages?.[isCreate ? 'created' : 'updated']
+                    || (isCreate ? 'Registro creado correctamente' : 'Guardado correctamente'));
+                // Hand the persisted record back so callers can auto-select it.
+                onSaved?.(res.data?.data ?? res.data ?? undefined);
                 onOpenChange(false);
             }
             else {
@@ -213,7 +380,7 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
             setDeleting(false);
         }
     };
-    const title = modalMeta ? config.getTitle(modalMeta) : '';
+    const title = modalMeta ? config.getTitle(modalMeta, t) : '';
     const visibleFields = modalMeta?.fields?.filter(f => {
         if (f.hidden)
             return false;
@@ -221,10 +388,10 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
             return false;
         return true;
     }) ?? [];
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden", 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: _jsxs("form", { id: "dynamic-record-form", onSubmit: handleSubmit, className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4", children: [visibleFields.map(field => {
-                                    const isFullWidth = field.type === 'textarea';
-                                    return (_jsx("div", { className: isFullWidth ? 'sm:col-span-2' : '', children: _jsx(FieldRow, { field: field, record: record, value: formValues[field.key] ?? '', mode: mode, onChange: val => setFormValues((prev) => ({ ...prev, [field.key]: val })) }) }, field.key));
-                                }), record?.external_url && (_jsx("div", { className: "sm:col-span-2", 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'] }) }))] }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0", children: [_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 && (_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] }))] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden", 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: _jsxs(TimeZoneContext.Provider, { value: timeZone, children: [_jsxs("form", { id: "dynamic-record-form", onSubmit: handleSubmit, className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4", children: [visibleFields.map(field => {
+                                                const isFullWidth = field.type === 'textarea';
+                                                return (_jsx("div", { className: isFullWidth ? 'sm:col-span-2' : '', children: _jsx(FieldRow, { field: field, record: record, value: formValues[field.key] ?? '', mode: mode, onChange: val => setFormValues((prev) => ({ ...prev, [field.key]: val })) }) }, field.key));
+                                            }), record?.external_url && (_jsx("div", { className: "sm:col-span-2", 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, canCreate: mode === 'edit', canEdit: mode === 'edit', canDelete: mode === 'edit' }) }))] }) }) })) : 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: [_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 && (_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))) }));
@@ -233,12 +400,75 @@ function FieldRow({ field, record, value, mode, onChange }) {
     const isReadonly = field.readonly || mode === 'view';
     return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: [field.label, field.required && mode !== 'view' && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }), isReadonly ? (_jsx(ViewValue, { field: field, value: value, record: record })) : (_jsx(EditField, { field: field, value: value, onChange: onChange }))] }));
 }
-function ViewValue({ field, value: rawValue }) {
-    // Normalize the nil UUID to undefined up front so the search/url/color/
-    // image/select branches all fall through to their empty states.
+// 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 }) {
+    const getImageUrl = useContext(ImageUrlContext);
+    const sib = relationSiblingValue(field, record);
+    const sibLabel = typeof sib === 'string' ? sib : objectLabel(sib);
+    const sibImage = pickImage(sib);
+    // The raw FK id, tolerating an inline resolved object as the value itself.
+    const rawVal = value && typeof value === 'object' ? (value.value ?? value.id) : value;
+    const inlineLabel = sibLabel ?? objectLabel(value);
+    const inlineImage = sibImage ?? pickImage(value);
+    const fieldRef = getFieldRef(field);
+    // Only resolve over the network when we still lack both label and image and
+    // there is something to look up.
+    const needResolve = !inlineLabel && !inlineImage && !!(fieldRef || field.searchEndpoint) && rawVal != null && rawVal !== '';
+    const { options } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: fieldRef,
+        endpoint: fieldRef ? undefined : field.searchEndpoint,
+        query: '',
+        limit: 50,
+        enabled: needResolve,
+    });
+    const resolved = options.find(o => String(o.id) === String(rawVal));
+    const label = inlineLabel ??
+        resolved?.label ??
+        (rawVal != null && rawVal !== '' && !isNilUuid(rawVal) ? String(rawVal) : undefined);
+    const image = inlineImage ?? resolved?.image ?? undefined;
+    if (!label && !image) {
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
+    const lead = {
+        image: image ? getImageUrl(image) : null,
+        color: resolved?.color ?? null,
+        icon: resolved?.icon ?? null,
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx(OptionLead, { option: lead, size: 24 }), _jsx("span", { className: "text-sm", children: label ?? '—' })] }));
+}
+export function ViewValue({ field, value: rawValue, record, getImageUrl: getImageUrlProp, timeZone: timeZoneProp, }) {
+    const ctxImageUrl = useContext(ImageUrlContext);
+    const ctxTimeZone = useContext(TimeZoneContext);
+    const getImageUrl = getImageUrlProp ?? ctxImageUrl;
+    const timeZone = timeZoneProp ?? ctxTimeZone;
+    // created_by / avatar resolver sibling → name (+ avatar) instead of "—".
+    if (field.type === 'avatar' || field.key === 'created_by' || field.key === 'created_by_id') {
+        const user = createdBySibling(rawValue, record);
+        if (user) {
+            return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [user.avatar ? (_jsx("img", { src: getImageUrl(String(user.avatar)), alt: user.name ?? '', className: "h-6 w-6 rounded-full object-cover" })) : null, _jsx("span", { className: "text-sm", children: user.name ?? user.email ?? '—' })] }));
+        }
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
+    // Nil/zero UUID (unset nullable FK serialized as all-zeros) → empty marker.
+    if (isNilUuid(rawValue)) {
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
     const value = normalizeNilUuid(rawValue);
-    if (field.type === 'search' && value) {
-        return _jsx(SearchViewValue, { field: field, value: value });
+    // 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'))) {
+        return _jsx(RelationViewValue, { field: field, value: value, record: record });
+    }
+    // The value is itself a resolved object the backend served inline — render
+    // its label/name, never the raw JSON.
+    const inlineLabel = objectLabel(value);
+    if (inlineLabel !== undefined) {
+        return _jsx("p", { className: "text-sm py-1", children: inlineLabel });
     }
     if (field.type === 'boolean' || typeof value === 'boolean') {
         return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx(Switch, { checked: !!value, disabled: true }), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
@@ -247,16 +477,31 @@ function ViewValue({ field, value: rawValue }) {
         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') {
-        return value ? (_jsx("img", { src: value, alt: field.label, className: "h-16 w-16 rounded-lg object-cover border" })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "Sin imagen" }));
+        return value ? (_jsx("img", { src: getImageUrl(String(value)), alt: field.label, className: "h-16 w-16 rounded-lg object-cover border" })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "Sin imagen" }));
     }
     if (field.type === 'url' && value) {
         return (_jsx("a", { href: value, target: "_blank", rel: "noreferrer", className: "text-sm text-primary hover:underline truncate", children: value }));
     }
-    if (field.type === 'select' && field.options?.length) {
-        const match = field.options.find(o => o.value === String(value ?? ''));
-        if (match) {
-            return _jsx(Badge, { variant: "secondary", className: "w-fit", children: match.label });
+    // Date/datetime/timestamp → tz-aware format. `date` pins to UTC (calendar
+    // day); instants render in the org timezone with a full-precision tooltip.
+    if (field.type === 'date' || field.type === 'datetime' || field.type === 'timestamp') {
+        const renderAs = field.type === 'date' ? 'date' : field.type;
+        const formatted = formatDateCell(value, renderAs, es, timeZone);
+        if (formatted) {
+            return (_jsx("p", { className: "text-sm py-1", title: formatted.title, children: formatted.display }));
         }
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
+    // Enum/option field with served options → colored/iconed badge using the
+    // served label (e.g. "Almacenable" instead of "storable").
+    const opt = servedOption(field, value);
+    if (opt) {
+        const lead = {
+            image: opt.image ? getImageUrl(opt.image) : null,
+            color: opt.color ?? null,
+            icon: opt.icon ?? null,
+        };
+        return (_jsxs(Badge, { variant: "secondary", className: "w-fit flex items-center gap-1", style: opt.color && !opt.icon ? { backgroundColor: opt.color, color: '#fff', borderColor: 'transparent' } : undefined, children: [_jsx(OptionLead, { option: lead, size: 16 }), opt.label] }));
     }
     const display = formatDisplayValue(value, field);
     if (field.type === 'textarea') {
@@ -272,17 +517,14 @@ function EditField({ field, value, onChange }) {
         return (_jsx(Textarea, { value: value ?? '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, rows: 4 }));
     }
     // Media widgets: the kernel may serve an explicit `widget: 'upload'` (or the
-    // `image` type) for a file/photo column. Both render the themed dropzone
-    // that POSTs to the host upload endpoint — same control as the Brand logo.
+    // `image` type) for a file/photo column.
     if (field.type === 'image' || field.widget === 'upload') {
         return _jsx(ImageUploadField, { field: field, value: value, onChange: onChange });
     }
     // FK columns: a `ref` (kernel-derived belongs_to target) or an explicit
-    // `widget: 'dynamic_select'` renders the async searchable picker against
-    // /api/options/<ref>?field=id — with option thumbnails when the remote rows
-    // carry an `image` — instead of a raw FK uuid text input. Static inline
-    // `options` are handled by the enum <Select> branch below; a ref column does
-    // not ship inline options, so this never shadows a static enum.
+    // `widget: 'dynamic_select'` renders the SDK's async searchable picker — with
+    // option thumbnails and the inline-create "+" — against /api/options/<ref>.
+    // Static inline `options` are handled by the enum <Select> branch below.
     if ((getFieldRef(field) || field.widget === 'dynamic_select') && !field.options?.length) {
         return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange });
     }
@@ -315,6 +557,7 @@ function EditField({ field, value, onChange }) {
 function ImageUploadField({ field: _field, value, onChange }) {
     const api = useApi();
     const model = useContext(ModelContext);
+    const getImageUrl = useContext(ImageUrlContext);
     const [uploading, setUploading] = useState(false);
     const inputRef = useRef(null);
     async function handleFile(e) {
@@ -340,7 +583,7 @@ function ImageUploadField({ field: _field, value, onChange }) {
                 inputRef.current.value = '';
         }
     }
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [value ? (_jsxs("div", { className: "relative", children: [_jsx("img", { src: value, alt: "", className: "h-16 w-16 rounded-lg object-cover border" }), _jsx("button", { type: "button", onClick: () => onChange(''), className: "absolute -top-1.5 -right-1.5 size-5 bg-destructive text-white rounded-full flex items-center justify-center hover:bg-destructive/90", children: _jsx(XIcon, { className: "size-3" }) })] })) : (_jsx("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: uploading, className: "h-16 w-16 rounded-lg border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center gap-1 hover:border-primary/50 hover:bg-muted/50 transition-colors disabled:opacity-50", children: uploading ? (_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" })) : (_jsx(Upload, { className: "size-4 text-muted-foreground" })) })), _jsx("input", { ref: inputRef, type: "file", accept: "image/*", onChange: handleFile, className: "hidden" }), !value && _jsx("span", { className: "text-xs text-muted-foreground", children: "PNG, JPG, WebP" })] }));
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [value ? (_jsxs("div", { className: "relative", children: [_jsx("img", { src: getImageUrl(String(value)), alt: "", className: "h-16 w-16 rounded-lg object-cover border" }), _jsx("button", { type: "button", onClick: () => onChange(''), className: "absolute -top-1.5 -right-1.5 size-5 bg-destructive text-white rounded-full flex items-center justify-center hover:bg-destructive/90", children: _jsx(XIcon, { className: "size-3" }) })] })) : (_jsx("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: uploading, className: "h-16 w-16 rounded-lg border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center gap-1 hover:border-primary/50 hover:bg-muted/50 transition-colors disabled:opacity-50", children: uploading ? (_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" })) : (_jsx(Upload, { className: "size-4 text-muted-foreground" })) })), _jsx("input", { ref: inputRef, type: "file", accept: "image/*", onChange: handleFile, className: "hidden" }), !value && _jsx("span", { className: "text-xs text-muted-foreground", children: "PNG, JPG, WebP" })] }));
 }
 function extractArray(res) {
     const d = res.data;
@@ -351,31 +594,6 @@ function extractArray(res) {
     return [];
 }
 const searchCache = new Map();
-function SearchViewValue({ field, value }) {
-    const api = useApi();
-    const [label, setLabel] = useState(String(value));
-    useEffect(() => {
-        if (!field.searchEndpoint || !value)
-            return;
-        const cacheKey = field.searchEndpoint;
-        const cached = searchCache.get(cacheKey);
-        if (cached) {
-            const match = cached.find((item) => item.value === value || item.id === value);
-            if (match) {
-                setLabel(match.label || match.name || String(value));
-                return;
-            }
-        }
-        api.get(field.searchEndpoint, { params: { search: '', limit: 50 } }).then(res => {
-            const items = extractArray(res);
-            searchCache.set(cacheKey, items);
-            const match = items.find((item) => item.value === value || item.id === value);
-            if (match)
-                setLabel(match.label || match.name || String(value));
-        }).catch(() => { });
-    }, [value, field.searchEndpoint]);
-    return _jsx("p", { className: "text-sm py-1", children: label });
-}
 function SearchField({ field, value, onChange }) {
     const api = useApi();
     const [open, setOpen] = useState(false);
@@ -401,7 +619,7 @@ function SearchField({ field, value, onChange }) {
             if (match)
                 setSelectedLabel(match.label || match.name || '');
         }).catch(() => { });
-    }, [value, field.searchEndpoint]);
+    }, [value, field.searchEndpoint, api]);
     useEffect(() => {
         if (!open || !field.searchEndpoint)
             return;
@@ -423,7 +641,7 @@ function SearchField({ field, value, onChange }) {
                 .finally(() => setLoading(false));
         }, query ? 250 : 0);
         return () => clearTimeout(timer);
-    }, [query, open, field.searchEndpoint]);
+    }, [query, open, field.searchEndpoint, api]);
     return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("w-full justify-between font-normal h-9", !value && "text-muted-foreground"), children: [_jsx("span", { className: "truncate", children: selectedLabel || `Seleccionar ${field.label?.toLowerCase() || ''}...` }), _jsx(ChevronDown, { className: "ml-auto h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", side: "bottom", sideOffset: 4, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: `Buscar ${field.label?.toLowerCase() || ''}...`, value: query, onValueChange: setQuery }), _jsx(CommandList, { className: "max-h-[200px]", children: loading ? (_jsxs("div", { className: "py-6 text-center text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin mx-auto mb-1 text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Buscando..." })] })) : results.length === 0 ? (_jsx(CommandEmpty, { children: "Sin resultados." })) : (_jsx(CommandGroup, { children: results.map((item) => {
                                     const itemValue = item.value ?? item.id;
                                     const itemLabel = item.label ?? item.name ?? '';
@@ -433,6 +651,6 @@ function SearchField({ field, value, onChange }) {
                                             setSelectedLabel(itemLabel);
                                             setOpen(false);
                                             setQuery('');
-                                        }, children: [isSelected && _jsx(Check, { className: "mr-2 h-3.5 w-3.5 shrink-0 text-primary" }), item.image && (_jsx("img", { src: item.image, className: "h-5 w-5 rounded mr-2 object-cover shrink-0", alt: "" })), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "truncate", children: itemLabel }), item.description && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: item.description }))] })] }, itemValue));
+                                        }, children: [isSelected && _jsx(Check, { className: "mr-2 h-3.5 w-3.5 shrink-0 text-primary" }), item.image && (_jsx(OptionThumb, { image: item.image, size: 20 })), _jsxs("div", { className: "flex flex-col min-w-0 ml-2", children: [_jsx("span", { className: "truncate", children: itemLabel }), item.description && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: item.description }))] })] }, itemValue));
                                 }) })) })] }) })] }));
 }

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

@@ -1,4 +1,25 @@
+import { type ResolvedOption } from './use-options-resolver';
 import type { ActionFieldDef } from './types';
+/**
+ * Small square thumbnail for an option's `image`. Falls back to a neutral
+ * placeholder icon when the option has no image so rows/triggers stay aligned.
+ * `size` is in pixels (kept small — 20–24px — so the picker reads as a list,
+ * not a gallery). Inline style for the box dimensions: arbitrary Tailwind
+ * classes from a federated addon don't always survive the host's class scan.
+ */
+export declare function OptionThumb({ image, size }: {
+    image?: string | null;
+    size?: number;
+}): import("react").JSX.Element;
+/**
+ * Leading visual for an option: a photo thumbnail (FK relations with an image),
+ * else a declared icon, else a color dot (enum/status options with a color).
+ * Returns null when the option carries none, so plain text options stay plain.
+ */
+export declare function OptionLead({ option, size, }: {
+    option?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null;
+    size?: number;
+}): import("react").JSX.Element | null;
 export interface DynamicSelectFieldProps {
     field: ActionFieldDef;
     value: any;

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":"AAyCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AA+F7C,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BA0KrF;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;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,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BA0KrF;AAED,eAAe,kBAAkB,CAAA"}