@asteby/metacore-runtime-react 23.1.0 → 23.3.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @asteby/metacore-runtime-react
 
+## 23.3.0
+
+### Minor Changes
+
+- 40a1e8e: Soporte de campos `readonly` (kernel v0.64.0) en el diálogo de registro dinámico. Un campo generado por el servidor/sistema (p. ej. `number`/`github_url` que el addon de GitHub rellena tras el create outbound) ahora se OCULTA en el formulario de creación y se muestra DESHABILITADO (input muted, valor visible) en edición. Las vistas de lectura (tabla/kanban/detalle) no cambian.
+- d0eb423: El modal de detalle de registro (`ViewRecordDialog` / `DynamicRecordDialog`) ahora renderiza los valores con los MISMOS display types "pro" que la tabla, en vez de texto plano genérico. Las primitivas de render de la tabla (`OptionBadge`, `RelationThumbnail`, `statusColorFor`, `useIsDarkTheme`) se extrajeron a un módulo compartido `display-value.tsx` que tabla y dialog consumen (cero copy-paste).
+
+  El dialog ahora resuelve cada valor por el display type declarado (`cellStyle ?? type`), igual que la tabla:
+  - opciones/select → Badge con color resuelto y label localizado
+  - `cellStyle:'status'`/`'badge'` (ej. stage de kanban) → pill con color semántico y label traducido vía i18n del manifest, en vez de "backlog" crudo
+  - `cellStyle:'url'`/`'link'` en columna de texto (ej. `github_url`) → enlace clickeable en pestaña nueva, truncado
+  - `cellStyle:'datetime'` en columna numérica/epoch (ej. `synced_at`) → fecha formateada con timezone de la org, no dígitos crudos
+  - arrays de labels/tags → fila de badges (con color cuando el label trae `color`)
+  - creator/avatar → nombre + avatar
+
+## 23.2.1
+
+### Patch Changes
+
+- d578fe0: Localiza los toasts de CRUD estándar (eliminar, crear, actualizar, borrado masivo, subida de imagen) al español vía i18n con `defaultValue`, en lugar de mostrar el `message` en inglés que devuelve el backend. Los mensajes de acciones declarativas de addons ahora pasan por `t()` por si son claves i18n.
+
+## 23.2.0
+
+### Minor Changes
+
+- 68a6844: Scroll infinito con carga incremental en DynamicKanban y DynamicTable,
+  respetando la búsqueda y los filtros activos. Cero cambios de backend: se apoya
+  en el `page`/`per_page` que ya expone `/data/:model`.
+  - **Primitivos compartidos (`use-infinite-scroll`):** `dedupeById` (append puro
+    que descarta ids ya presentes, estable en identidad cuando no hay altas) y
+    `useInfiniteScrollSentinel` (IntersectionObserver sobre un sentinel; lee
+    `onLoadMore`/`disabled` por ref para no recrear el observer en cada render;
+    degrada a no-op donde no hay IntersectionObserver). Los usan ambas vistas.
+  - **Kanban incremental por lane:** una página global inicial (`pageSize`, 50 por
+    defecto) pinta el tablero agrupado —y captura naturalmente la lane
+    "sin asignar"— y luego cada lane rellena SU propia etapa al acercarse el
+    scroll al fondo (`f_<group_by>=<stage>&page=n&per_page=lanePageSize`, 25 por
+    defecto, sobre los filtros activos), con dedup por id y un skeleton chico al
+    fondo. El contador del header muestra el total real de la etapa cuando la
+    respuesta trae `meta.total` (`count/total`), si no el cargado. Cambiar
+    filtros/búsqueda resetea la paginación de todas las lanes. El drag&drop
+    optimista ajusta los totales de origen y destino (`applyLaneTotalsOnMove`)
+    para que las lanes parciales sigan mostrando un `count/total` veraz, y los
+    revierte si el PUT falla.
+  - **Tabla opt-in (`infiniteScroll?: boolean`, default `false`):** la paginación
+    clásica queda intacta salvo que se active. Con el flag, un sentinel al fondo
+    del contenedor de scroll pide la siguiente página y APPENDEA filas (dedup por
+    id); el pager clásico se reemplaza por un indicador "N de total". Cambiar
+    filtros/orden/búsqueda resetea a la página 1 y limpia el acumulado. El footer
+    de totales (`/aggregate`) no cambia.
+
+### Patch Changes
+
+- Updated dependencies [68a6844]
+  - @asteby/metacore-ui@2.9.1
+
 ## 23.1.0
 
 ### Minor Changes

package/dist/action-modal-dispatcher.js

@@ -116,12 +116,12 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             const url = buildActionUrl(endpoint, model, record.id, action.key);
             const res = await api.post(url, {});
             if (res.data.success) {
-                toast.success(res.data.message || t('common.success'));
+                toast.success(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.success'));
                 onOpenChange(false);
                 onSuccess();
             }
             else {
-                toast.error(res.data.message || t('common.error'));
+                toast.error(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.error'));
             }
         }
         catch (err) {
@@ -209,12 +209,12 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             const url = buildActionUrl(endpoint, model, record.id, action.key);
             const res = await api.post(url, formData);
             if (res.data.success) {
-                toast.success(res.data.message || t('common.success'));
+                toast.success(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.success'));
                 onOpenChange(false);
                 onSuccess();
             }
             else {
-                toast.error(res.data.message || t('common.error'));
+                toast.error(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.error'));
             }
         }
         catch (err) {

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

@@ -162,7 +162,12 @@ export interface DynamicRecordDialogProps {
 export declare function isLineItemsField(field: FieldDef, value: any): boolean;
 export declare function fkSeedOption(field: FieldDef, value: any, record: any): ResolvedOption | null;
 export declare function isMoneyField(field: FieldDef, value: any): boolean;
+export declare function filterVisibleFields(fields: FieldDef[] | undefined, mode: 'view' | 'edit' | 'create'): FieldDef[];
 export declare function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, schema, onDelete, onEdit, onOpenFullPage, initialRecord, getImageUrl, timeZone, currency, onChange, }: DynamicRecordDialogProps): import("react").JSX.Element;
+export declare function ReadonlyEditField({ field, value }: {
+    field: FieldDef;
+    value: any;
+}): import("react").JSX.Element;
 export declare function ViewValue({ field, value: rawValue, record, getImageUrl: getImageUrlProp, timeZone: timeZoneProp, currency: currencyProp, }: {
     field: FieldDef;
     value: any;

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

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

package/dist/dialogs/dynamic-record.js

@@ -27,6 +27,8 @@ import { isNilUuid, normalizeNilUuid } from '../nil-uuid';
 import { DynamicIcon, isLucideIconName } from '../dynamic-icon';
 import { humanizeToken } from '../dynamic-columns-helpers';
 import { formatDateCell } from '../dynamic-columns';
+import { OptionBadge, statusColorFor, useIsDarkTheme, } from '../display-value';
+import { generateBadgeStyles } from '@asteby/metacore-ui/lib';
 import { CollectionCell } from '../collection-cell';
 import { ImageUrlContext, identityImageUrl } from '../image-url-context';
 import { TimeZoneContext, CurrencyContext } from '../org-runtime-context';
@@ -228,6 +230,19 @@ export function isMoneyField(field, value) {
         return false;
     return MONEY_KEY_HEURISTIC.some(m => key === m || key.endsWith(`_${m}`) || key.startsWith(`${m}_`));
 }
+// filterVisibleFields decides which declared fields render in the form for a
+// given mode. `hidden` fields never render. A `readonly` (server/system-
+// generated) field is EXCLUDED on create — the user can't set a value the
+// server will overwrite — but stays visible on edit/view (rendered disabled).
+export function filterVisibleFields(fields, mode) {
+    return (fields ?? []).filter(f => {
+        if (f.hidden)
+            return false;
+        if (mode === 'create' && f.readonly)
+            return false;
+        return true;
+    });
+}
 export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, onCreate, onUpdate, defaults, schema, onDelete, onEdit, onOpenFullPage, initialRecord, getImageUrl = identityImageUrl, timeZone, currency, onChange, }) {
     const api = useApi();
     const { t } = useTranslation();
@@ -319,7 +334,7 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
             catch (err) {
                 console.error('[DynamicRecordDialog] load error:', err);
                 if (!seed)
-                    toast.error('Error al cargar los datos');
+                    toast.error(t('dynamic.load_error', { defaultValue: 'No se pudieron cargar los datos' }));
             }
             finally {
                 if (!cancelled)
@@ -421,14 +436,14 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
         try {
             if (isCreate && onCreate) {
                 const created = await onCreate(formValues);
-                toast.success(modalMeta?.messages?.created || 'Registro creado correctamente');
+                toast.success(modalMeta?.messages?.created || t('dynamic.create_success', { defaultValue: 'Registro creado correctamente' }));
                 onSaved?.(created ?? undefined);
                 onOpenChange(false);
                 return;
             }
             if (!isCreate && recordId && onUpdate) {
                 const updated = await onUpdate(String(recordId), formValues);
-                toast.success(modalMeta?.messages?.updated || 'Guardado correctamente');
+                toast.success(modalMeta?.messages?.updated || t('dynamic.update_success', { defaultValue: 'Guardado correctamente' }));
                 onSaved?.(updated ?? undefined);
                 onOpenChange(false);
                 return;
@@ -449,17 +464,19 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
                 // 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'));
+                    || (isCreate
+                        ? t('dynamic.create_success', { defaultValue: 'Registro creado correctamente' })
+                        : t('dynamic.update_success', { defaultValue: 'Guardado correctamente' })));
                 // Hand the persisted record back so callers can auto-select it.
                 onSaved?.(res.data?.data ?? res.data ?? undefined);
                 onOpenChange(false);
             }
             else {
-                toast.error(res.data?.message || 'Error al guardar');
+                toast.error(res.data?.message || t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }));
             }
         }
         catch (err) {
-            toast.error(err?.response?.data?.message || 'Error al guardar');
+            toast.error(err?.response?.data?.message || t('dynamic.save_error', { defaultValue: 'No se pudo guardar' }));
         }
         finally {
             setSaving(false);
@@ -475,20 +492,14 @@ export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId,
         }
         catch (err) {
             console.error('[DynamicRecordDialog] delete error:', err);
-            toast.error(err?.response?.data?.message || err?.message || 'Error al eliminar');
+            toast.error(err?.response?.data?.message || err?.message || t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }));
         }
         finally {
             setDeleting(false);
         }
     };
     const title = modalMeta ? config.getTitle(modalMeta, t) : '';
-    const visibleFields = modalMeta?.fields?.filter(f => {
-        if (f.hidden)
-            return false;
-        if (isCreate && f.readonly)
-            return false;
-        return true;
-    }) ?? [];
+    const visibleFields = filterVisibleFields(modalMeta?.fields, mode);
     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: _jsx(TimeZoneContext.Provider, { value: timeZone, children: _jsxs(CurrencyContext.Provider, { value: currency, 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));
@@ -498,8 +509,26 @@ 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))) }));
 }
 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, record: record }))] }));
+    // A `readonly` field is server/system-generated (e.g. the GitHub addon's
+    // `number`/`github_url`, filled by the API after the outbound create). On
+    // CREATE it is excluded from the form entirely (see `visibleFields`); on EDIT
+    // it stays visible but is NOT editable — rendered as a disabled, muted input
+    // so the user sees its value without being able to change it. View mode keeps
+    // the rich read-only renderer.
+    const isEditReadonly = mode === 'edit' && !!field.readonly;
+    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' && !isEditReadonly && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }), mode === 'view' ? (_jsx(ViewValue, { field: field, value: value, record: record })) : isEditReadonly ? (_jsx(ReadonlyEditField, { field: field, value: value })) : (_jsx(EditField, { field: field, value: value, onChange: onChange, record: record }))] }));
+}
+// ReadonlyEditField — the edit-mode rendering of a `readonly` (system-generated)
+// field: a disabled, muted input that shows the current value without allowing
+// edits. Booleans render as a disabled switch to match their editable
+// counterpart; everything else renders the formatted display value in a disabled
+// text input.
+export function ReadonlyEditField({ field, value }) {
+    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' })] }));
+    }
+    const display = formatDisplayValue(value, field);
+    return _jsx(Input, { value: display === '—' ? '' : display, disabled: true, readOnly: true, className: "text-muted-foreground" });
 }
 // RelationViewValue — read-only FK lead. Resolves the relation's label + image
 // from (1) the sibling object the table served, then (2) the canonical options
@@ -549,8 +578,19 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
     const getImageUrl = getImageUrlProp ?? ctxImageUrl;
     const timeZone = timeZoneProp ?? ctxTimeZone;
     const currency = currencyProp ?? ctxCurrency;
+    // Declarative display hint the backend stamps (mirrors the table column's
+    // `cellStyle`). The table renders each cell off `cellStyle ?? type`; the
+    // detail view keys off the SAME resolved renderer so both stay in lock-step
+    // (a `datetime` display on a numeric column, a `url` display on a text
+    // column, a `status`/`badge` pill, …).
+    const renderAs = field.cellStyle ?? field.type;
     // created_by / avatar resolver sibling → name (+ avatar) instead of "—".
-    if (field.type === 'avatar' || field.key === 'created_by' || field.key === 'created_by_id') {
+    if (field.type === 'avatar' ||
+        renderAs === 'avatar' ||
+        renderAs === 'creator' ||
+        renderAs === 'user' ||
+        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 ?? '—' })] }));
@@ -593,8 +633,14 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
         (field.key === 'icon' || field.key.endsWith('_icon'))) {
         return _jsx(IconNameViewValue, { name: value });
     }
-    if (field.type === 'url' && value) {
-        return (_jsx("a", { href: value, target: "_blank", rel: "noreferrer", className: "text-sm text-primary hover:underline truncate", children: value }));
+    // URL/link display (matches the table's `url`/`link` cell). Triggers on the
+    // stamped display type — not just the storage `type` — so a text column
+    // carrying `cellStyle:'url'` (e.g. `github_url`) renders as a clickable
+    // external link, opening in a new tab, truncated.
+    if ((renderAs === 'url' || renderAs === 'link') && value) {
+        const urlStr = String(value);
+        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`;
+        return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[360px]", children: urlStr })] }));
     }
     // Money → org-currency string. Detected by the backend `cellStyle:'currency'`
     // stamp or a numeric value whose key matches the money heuristic (fallback
@@ -615,24 +661,54 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
     }
     // 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);
+    // Keys off the display type (`cellStyle ?? type`) so a numeric/epoch column
+    // stamped `datetime` (e.g. `synced_at`) formats as a date, never raw digits.
+    if (renderAs === 'date' ||
+        renderAs === 'datetime' ||
+        renderAs === 'timestamp' ||
+        renderAs === 'timestamptz') {
+        const dateRenderAs = renderAs === 'date' ? 'date' : renderAs;
+        const formatted = formatDateCell(value, dateRenderAs, 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").
+    // Enum/option field with served options → the SAME colored/iconed pill the
+    // table renders (shared `OptionBadge`): resolved color, thumbnail/icon and
+    // the localized option 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] }));
+        return (_jsx("div", { className: "py-1", children: _jsx(OptionBadge, { option: {
+                    value: String(opt.value ?? value ?? ''),
+                    label: opt.label,
+                    color: opt.color ?? undefined,
+                    icon: opt.icon ?? undefined,
+                    image: opt.image ?? undefined,
+                }, getImageUrl: getImageUrl }) }));
+    }
+    // Array of scalars / label objects (e.g. github `labels`, tags, a
+    // group-badge list) → a row of pills, mirroring the table's `tags` /
+    // `relation-badge-list` cells. Checked before the structured-object branch
+    // so a flat label array never renders as a mini-table.
+    if (Array.isArray(value) &&
+        (renderAs === 'tags' ||
+            renderAs === 'relation-badge-list' ||
+            value.every((v) => v === null || typeof v !== 'object' || 'label' in v || 'name' in v))) {
+        return _jsx(BadgeListViewValue, { items: value, getImageUrl: getImageUrl });
+    }
+    // Status / badge / select display with no served option list — a bare enum
+    // token (e.g. a kanban `stage` like "backlog"). Render a colored pill with a
+    // semantic/value-derived color and a localized-or-humanized label, matching
+    // the table's `status`/`badge` cells.
+    if ((renderAs === 'status' ||
+        renderAs === 'badge' ||
+        renderAs === 'select' ||
+        renderAs === 'option') &&
+        value !== null &&
+        value !== undefined &&
+        typeof value !== 'object') {
+        return _jsx(StatusBadgeViewValue, { field: field, value: value, t: t });
     }
     // Structured value (jsonb column, e.g. fiscal_data) with no label/name/title
     // to surface — render readable key/value pairs instead of falling through to
@@ -652,6 +728,44 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
 function IconNameViewValue({ name }) {
     return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx("div", { className: "h-8 w-8 flex items-center justify-center rounded bg-muted", children: _jsx(DynamicIcon, { name: name, className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm text-muted-foreground", children: name })] }));
 }
+// StatusBadgeViewValue — a bare enum/status token (no served option list) as a
+// colored pill: a semantic/value-derived color (same `statusColorFor` the table
+// uses) plus a localized-or-humanized label. Mirrors the table's `status`/
+// `badge` cell so a kanban `stage` ("backlog") reads as a colored, translated
+// badge instead of the raw token.
+function StatusBadgeViewValue({ field, value, t, }) {
+    const isDark = useIsDarkTheme();
+    const token = String(value);
+    // Prefer an explicit per-option color served on the field (metadata.stages /
+    // options), else derive a semantic color from the token.
+    const declared = field.options?.find((o) => String(o.value) === token);
+    const color = declared?.color || statusColorFor(token);
+    // Localized label: the option's already-localized label wins, then a manifest
+    // i18n key matching the raw token, then a humanized fallback.
+    const label = declared?.label ?? t(token, { defaultValue: humanizeToken(token) });
+    return (_jsx("div", { className: "py-1", children: _jsx(Badge, { variant: "outline", className: "border-0 flex w-fit items-center gap-1", style: generateBadgeStyles(color, { isDark }), children: label }) }));
+}
+// BadgeListViewValue — an array of scalars / label objects as a row of pills
+// (github `labels`, tags, a group-badge list). Objects carrying a `color` render
+// as colored `OptionBadge`s; plain strings render as neutral secondary pills.
+function BadgeListViewValue({ items, getImageUrl, }) {
+    if (!items || items.length === 0) {
+        return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-1 py-1", children: items.map((item, i) => {
+            if (item !== null && typeof item === 'object') {
+                const opt = {
+                    value: String(item.value ?? item.id ?? item.name ?? item.label ?? i),
+                    label: String(item.label ?? item.name ?? item.value ?? ''),
+                    color: item.color ?? undefined,
+                    icon: item.icon ?? undefined,
+                    image: item.image ?? item.avatar ?? undefined,
+                };
+                return _jsx(OptionBadge, { option: opt, getImageUrl: getImageUrl }, i);
+            }
+            return (_jsx(Badge, { variant: "secondary", className: "w-fit", children: String(item) }, i));
+        }) }));
+}
 // StructuredViewValue renders a jsonb object/array that has no resolvable label.
 // It delegates to the shared `CollectionCell` in `'inline'` mode so the detail
 // view gets the SAME pro rendering as the table: a declared `item_fields` schema
@@ -738,6 +852,7 @@ export function EditField({ field, value, onChange, record }) {
     return (_jsx(Input, { type: inputType, value: value ?? '', onChange: (e) => onChange(field.type === 'number' ? (e.target.value === '' ? '' : Number(e.target.value)) : e.target.value), placeholder: field.placeholder }));
 }
 function ImageUploadField({ field: _field, value, onChange }) {
+    const { t } = useTranslation();
     const api = useApi();
     const model = useContext(ModelContext);
     const getImageUrl = useContext(ImageUrlContext);
@@ -758,7 +873,7 @@ function ImageUploadField({ field: _field, value, onChange }) {
                 onChange(url);
         }
         catch {
-            toast.error('Error al subir imagen');
+            toast.error(t('dynamic.image_upload_error', { defaultValue: 'No se pudo subir la imagen' }));
         }
         finally {
             setUploading(false);

package/dist/display-value.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Shared display-value primitives.
+ *
+ * These are the building blocks the dynamic TABLE (`dynamic-columns.tsx`) uses
+ * to render "pro" cells — colored option badges, relation thumbnails, semantic
+ * status colors, dark-mode detection. They live here (instead of inline in the
+ * table) so the read-only DETAIL DIALOG (`dialogs/dynamic-record.tsx`) can reuse
+ * the EXACT same rendering. Ecosystem rule: shared primitives, zero copy-paste —
+ * table and dialog must not drift.
+ */
+import React from 'react';
+/**
+ * `true` when the host document is in dark mode. Observes the `<html>` class so
+ * badge colors re-derive on theme toggle. SSR/no-DOM safe (starts light).
+ */
+export declare function useIsDarkTheme(): boolean;
+/**
+ * Semantic status → badge color. Used by the `status` cell/value when no
+ * explicit `options` color is declared. Generic, value-driven mapping.
+ */
+export declare function statusColorFor(value: string): string;
+/**
+ * Tiny square thumbnail for a resolved relation/option that carries an `image`
+ * (brand logo, product photo, customer/user avatar). Uses the same Avatar
+ * primitive as the `avatar`/`creator` cells so a broken/loading image
+ * gracefully falls back to the record's initials. Sized small (inline style so
+ * an addon-arbitrary Tailwind class never gets dropped by a consuming app's
+ * class scan). Rendered inline alongside a label — never alone.
+ */
+export declare const RelationThumbnail: React.FC<{
+    src: string;
+    alt: string;
+    getImageUrl?: (path: string) => string;
+    size?: number;
+}>;
+export interface DisplayOption {
+    value: string;
+    label: string;
+    icon?: string;
+    color?: string;
+    image?: string;
+}
+/**
+ * Colored option badge — the canonical "pro" pill for a select/status/badge
+ * value. Explicit backend `color` wins; otherwise a stable, cohesive color is
+ * derived from the option value so "dead" gray badges come alive. Inline style
+ * (hex-derived) so it works regardless of the host's tailwind safelist —
+ * addon-arbitrary classes aren't in the host scan.
+ */
+export declare const OptionBadge: React.FC<{
+    option: DisplayOption;
+    getImageUrl?: (path: string) => string;
+    /** Accepted for call-site compatibility with the table; unused (option.label wins). */
+    fallback?: string;
+}>;
+//# sourceMappingURL=display-value.d.ts.map

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

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

package/dist/display-value.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared display-value primitives.
+ *
+ * These are the building blocks the dynamic TABLE (`dynamic-columns.tsx`) uses
+ * to render "pro" cells — colored option badges, relation thumbnails, semantic
+ * status colors, dark-mode detection. They live here (instead of inline in the
+ * table) so the read-only DETAIL DIALOG (`dialogs/dynamic-record.tsx`) can reuse
+ * the EXACT same rendering. Ecosystem rule: shared primitives, zero copy-paste —
+ * table and dialog must not drift.
+ */
+import React from 'react';
+import { Avatar, AvatarImage, AvatarFallback, Badge } from '@asteby/metacore-ui';
+import { generateBadgeStyles, getInitials, optionColor, } from '@asteby/metacore-ui/lib';
+import { DynamicIcon } from './dynamic-icon';
+/**
+ * `true` when the host document is in dark mode. Observes the `<html>` class so
+ * badge colors re-derive on theme toggle. SSR/no-DOM safe (starts light).
+ */
+export function useIsDarkTheme() {
+    const [isDark, setIsDark] = React.useState(() => typeof document !== 'undefined' &&
+        document.documentElement.classList.contains('dark'));
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const sync = () => setIsDark(document.documentElement.classList.contains('dark'));
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+}
+/**
+ * Semantic status → badge color. Used by the `status` cell/value when no
+ * explicit `options` color is declared. Generic, value-driven mapping.
+ */
+export function statusColorFor(value) {
+    const v = value.toLowerCase();
+    if (['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
+        .includes(v))
+        return '#22c55e';
+    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
+        return '#eab308';
+    if (['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
+        .includes(v))
+        return '#ef4444';
+    return '#6b7280';
+}
+/**
+ * Tiny square thumbnail for a resolved relation/option that carries an `image`
+ * (brand logo, product photo, customer/user avatar). Uses the same Avatar
+ * primitive as the `avatar`/`creator` cells so a broken/loading image
+ * gracefully falls back to the record's initials. Sized small (inline style so
+ * 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 = 18 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
+/**
+ * Colored option badge — the canonical "pro" pill for a select/status/badge
+ * value. Explicit backend `color` wins; otherwise a stable, cohesive color is
+ * derived from the option value so "dead" gray badges come alive. Inline style
+ * (hex-derived) so it works regardless of the host's tailwind safelist —
+ * addon-arbitrary classes aren't in the host scan.
+ */
+export const OptionBadge = ({ option, getImageUrl }) => {
+    const isDark = useIsDarkTheme();
+    const colorSource = option.color || optionColor(option.value || option.label);
+    const colorStyles = generateBadgeStyles(colorSource, { isDark });
+    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.image ? (_jsx(RelationThumbnail, { src: option.image, alt: option.label, getImageUrl: getImageUrl, size: 16 })) : (option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" })), _jsx("span", { children: option.label })] }));
+};

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

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