@asteby/metacore-runtime-react 17.0.4 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @asteby/metacore-runtime-react
 
+## 18.1.0
+
+### Minor Changes
+
+- 4e601ec: Org-timezone-aware date display in dynamic tables.
+
+  `formatDateCell` and the column factory (`defaultGetDynamicColumns` /
+  `makeDefaultGetDynamicColumns`) now accept an optional IANA `timeZone`, and
+  `DynamicTable` exposes a matching `timeZone` prop. When provided, datetime /
+  timestamp(tz) cells are rendered in that zone via the native
+  `Intl.DateTimeFormat` (instead of the viewer's browser zone), so instants no
+  longer day-shift; pure `date` columns are pinned to UTC so they never roll to
+  the previous/next day. Omitting `timeZone` preserves the exact legacy date-fns
+  formatting (fully backward-compatible).
+
+## 18.0.0
+
+### Patch Changes
+
+- ce9dd72: `DynamicSelectField` (the searchable FK / option picker) now renders each
+  option's leading visual: a photo thumbnail (FK relations with an image), else a
+  declared icon, else a colored dot for enum/status options that carry a `color`.
+  Previously only image thumbnails showed, so enum selects (state, origin, …) read
+  as plain text. Plain options with no image/color/icon stay plain.
+- Updated dependencies [8439e9e]
+  - @asteby/metacore-ui@2.5.0
+
 ## 17.0.4
 
 ### Patch Changes

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

@@ -16,7 +16,7 @@ export interface ColumnFilterConfig {
     searchEndpoint?: string;
 }
 /** Signature for the host-provided `getDynamicColumns` factory. */
-export type GetDynamicColumns = (metadata: TableMetadata, handleAction: (action: string, row: any) => void, t: (key: string, options?: any) => string, language: string, columnFilterConfigs: Map<string, ColumnFilterConfig>) => ColumnDef<any>[];
+export type GetDynamicColumns = (metadata: TableMetadata, handleAction: (action: string, row: any) => void, t: (key: string, options?: any) => string, language: string, columnFilterConfigs: Map<string, ColumnFilterConfig>, timeZone?: string) => ColumnDef<any>[];
 /** Signature for the host-provided `DynamicIcon` renderer. */
 export type DynamicIconComponent = React.ComponentType<{
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns-shim.d.ts","sourceRoot":"","sources":["../src/dynamic-columns-shim.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAA;IAClF,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,mEAAmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,CAC5B,QAAQ,EAAE,aAAa,EACvB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,EAChD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,EACzC,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,KACnD,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;AAErB,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA"}
+{"version":3,"file":"dynamic-columns-shim.d.ts","sourceRoot":"","sources":["../src/dynamic-columns-shim.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAA;IAClF,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,mEAAmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,CAC5B,QAAQ,EAAE,aAAa,EACvB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,EAChD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,EACzC,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,EACpD,QAAQ,CAAC,EAAE,MAAM,KAChB,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;AAErB,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA"}

package/dist/dynamic-columns.d.ts

@@ -47,8 +47,18 @@ export declare const DATE_CELL_TYPES: readonly ["date", "datetime", "timestamp",
  *   - `date`: day only (`PPP`), no tooltip.
  *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
  *     tooltip (`PPpp`) — the 7Leguas pattern.
+ *
+ * When a `timeZone` (IANA, e.g. the org's `America/Mexico_City`) is provided,
+ * instants are rendered in that zone via the native `Intl.DateTimeFormat` so
+ * the displayed day/time never shifts with the viewer's browser timezone:
+ *   - instant (datetime/timestamp(tz)): `dateStyle:'medium' timeStyle:'short'`
+ *     in the org zone, with a `dateStyle:'long' timeStyle:'medium'` +
+ *     `timeZoneName:'short'` tooltip.
+ *   - `date` (pure calendar day): rendered pinned to UTC so it never rolls to
+ *     the previous/next day, no tooltip.
+ * Without a `timeZone`, the exact date-fns behavior is preserved (back-compat).
  */
-export declare function formatDateCell(value: unknown, renderAs: string | undefined, locale: Locale): {
+export declare function formatDateCell(value: unknown, renderAs: string | undefined, locale: Locale, timeZone?: string): {
     display: string;
     title?: string;
 } | null;

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;AAgC9C,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;AAgGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;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;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,GACf;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAY5C;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;AA0ED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAsmBnB;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;AAgC9C,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;AAgGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;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;AA0ED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAumBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -219,14 +219,57 @@ export const DATE_CELL_TYPES = ['date', 'datetime', 'timestamp', 'timestamptz'];
  *   - `date`: day only (`PPP`), no tooltip.
  *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
  *     tooltip (`PPpp`) — the 7Leguas pattern.
+ *
+ * When a `timeZone` (IANA, e.g. the org's `America/Mexico_City`) is provided,
+ * instants are rendered in that zone via the native `Intl.DateTimeFormat` so
+ * the displayed day/time never shifts with the viewer's browser timezone:
+ *   - instant (datetime/timestamp(tz)): `dateStyle:'medium' timeStyle:'short'`
+ *     in the org zone, with a `dateStyle:'long' timeStyle:'medium'` +
+ *     `timeZoneName:'short'` tooltip.
+ *   - `date` (pure calendar day): rendered pinned to UTC so it never rolls to
+ *     the previous/next day, no tooltip.
+ * Without a `timeZone`, the exact date-fns behavior is preserved (back-compat).
  */
-export function formatDateCell(value, renderAs, locale) {
+export function formatDateCell(value, renderAs, locale, timeZone) {
     if (value === null || value === undefined || value === '')
         return null;
     const date = new Date(value);
     if (isNaN(date.getTime()) || date.getFullYear() <= 1)
         return null;
     const withTime = renderAs !== 'date';
+    if (timeZone) {
+        // `locale.code` is the BCP-47 tag date-fns ships (e.g. 'es', 'en-US').
+        const localeTag = locale?.code || undefined;
+        if (withTime) {
+            return {
+                display: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    dateStyle: 'medium',
+                    timeStyle: 'short',
+                }).format(date),
+                // `dateStyle`/`timeStyle` can't be combined with explicit
+                // component options like `timeZoneName`, so spell the tooltip
+                // out: long date + seconds + the zone abbreviation.
+                title: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    timeZoneName: 'short',
+                }).format(date),
+            };
+        }
+        // Pure calendar date: pin to UTC so it never shifts across zones.
+        return {
+            display: new Intl.DateTimeFormat(localeTag, {
+                timeZone: 'UTC',
+                dateStyle: 'long',
+            }).format(date),
+        };
+    }
     if (withTime) {
         return {
             display: format(date, 'Pp', { locale }),
@@ -308,7 +351,7 @@ const AvatarCell = ({ name, desc, avatarSrc, getImageUrl }) => (_jsxs("div", { c
 export function makeDefaultGetDynamicColumns(helpers = {}) {
     const getImageUrl = helpers.getImageUrl ?? defaultGetImageUrl;
     const apiBaseUrl = helpers.apiBaseUrl ?? '';
-    return function defaultGetDynamicColumns(metadata, onAction, t, currentLanguage, filterConfigs) {
+    return function defaultGetDynamicColumns(metadata, onAction, t, currentLanguage, filterConfigs, timeZone) {
         const dateLocale = currentLanguage === 'en' ? enUS : es;
         const columns = [
             {
@@ -426,7 +469,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         case 'datetime':
                         case 'timestamp':
                         case 'timestamptz': {
-                            const formatted = formatDateCell(value, renderAs, dateLocale);
+                            const formatted = formatDateCell(value, renderAs, dateLocale, timeZone);
                             if (!formatted)
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });
                             return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", title: formatted.title, children: [_jsx(icons.Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: formatted.display })] }));

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":"AAuCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAgD7C,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,+BA2KrF;AAED,eAAe,kBAAkB,CAAA"}
+{"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"}

package/dist/dynamic-select-field.js

@@ -25,6 +25,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
 import { Check, ChevronsUpDown, ImageIcon, Loader2, Plus } from 'lucide-react';
+import { resolveColorCss } from '@asteby/metacore-ui/lib';
+import { DynamicIcon } from './dynamic-icon';
 import { useOptionsResolver } from './use-options-resolver';
 import { getFieldRef } from './dynamic-form-schema';
 /**
@@ -46,6 +48,29 @@ function OptionThumb({ image, size = 20 }) {
             e.currentTarget.style.visibility = 'hidden';
         } }));
 }
+/**
+ * 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.
+ */
+function OptionLead({ option, size = 20, }) {
+    if (!option)
+        return null;
+    if (option.image)
+        return _jsx(OptionThumb, { image: option.image, size: size });
+    if (option.icon) {
+        return (_jsx("span", { className: "flex shrink-0 items-center justify-center", style: { width: size, height: size, color: option.color ? resolveColorCss(option.color) : undefined }, "aria-hidden": true, children: _jsx(DynamicIcon, { name: option.icon, className: "size-4" }) }));
+    }
+    if (option.color) {
+        return (_jsx("span", { className: "shrink-0 rounded-full", style: { width: Math.round(size * 0.5), height: Math.round(size * 0.5), background: resolveColorCss(option.color) }, "aria-hidden": true }));
+    }
+    return null;
+}
+/** True when any option (or the selected one) carries a renderable visual. */
+function optionsHaveVisual(options, selected) {
+    const has = (o) => !!(o && (o.image || o.color || o.icon));
+    return has(selected) || options.some(has);
+}
 function useDebounced(value, ms) {
     const [debounced, setDebounced] = useState(value);
     useEffect(() => {
@@ -87,7 +112,7 @@ export function DynamicSelectField({ field, value, onChange }) {
     // Only switch the picker into "with thumbnails" mode when the data actually
     // carries images — a relation whose options have no `image` keeps the plain
     // text list it had before (no empty placeholder column).
-    const hasImages = !!selectedOption?.image || options.some((o) => !!o.image);
+    const hasVisual = optionsHaveVisual(options, selectedOption);
     const handlePick = (opt) => {
         setPicked(opt);
         onChange(String(opt.id));
@@ -119,12 +144,12 @@ export function DynamicSelectField({ field, value, onChange }) {
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the
     // "+" off-screen — it only "fit" once a short value was selected.
-    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [hasImages && value ? (_jsx(OptionThumb, { image: selectedOption?.image, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || field.placeholder || 'Buscar…' })] }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
+    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [hasVisual && value ? (_jsx(OptionLead, { option: selectedOption, size: 20 })) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || field.placeholder || 'Buscar…' })] }), _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: debounced ? 'Sin resultados' : 'Escribí para buscar…' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {
                                                 const isSel = String(opt.id) === String(value);
-                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), hasImages && (_jsx(OptionThumb, { image: opt.image, size: 24 })), _jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
+                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0') }), hasVisual && (_jsx(OptionLead, { option: opt, size: 24 })), _jsxs("div", { className: "ml-2 flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
                                             }) }))] })] }) })] }), fieldRef && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: openCreate, title: `Crear ${field.label ?? fieldRef}`, "aria-label": `Crear ${field.label ?? fieldRef}`, children: _jsx(Plus, { className: "size-4" }) }))] }));
 }
 export default DynamicSelectField;

package/dist/dynamic-table.d.ts

@@ -16,7 +16,14 @@ interface DynamicTableProps {
      * Optional — a sensible default maps each column to { accessorKey, header }.
      */
     getDynamicColumns?: GetDynamicColumns;
+    /**
+     * IANA timezone (e.g. the org's `America/Mexico_City`) used to render
+     * datetime/timestamp cells. When provided, instants are displayed in this
+     * zone instead of the viewer's browser zone, so the day/time never shifts.
+     * Optional — omitting it preserves the legacy browser-local formatting.
+     */
+    timeZone?: string;
 }
-export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, }: DynamicTableProps): import("react").JSX.Element;
+export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, timeZone, }: DynamicTableProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=dynamic-table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,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;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,+BAgyBnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,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;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,GACX,EAAE,iBAAiB,+BAgyBnB"}

package/dist/dynamic-table.js

@@ -31,7 +31,7 @@ import { getSearchableColumnKeys } from './column-visibility';
 import { DynamicRecordDialog } from './dialogs/dynamic-record';
 import { ExportDialog } from './dialogs/export';
 import { ImportDialog } from './dialogs/import';
-export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, }) {
+export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, }) {
     const { t, i18n } = useTranslation();
     const api = useApi();
     const currentBranch = useCurrentBranch();
@@ -555,12 +555,12 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
             ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
             : metadata;
-        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs);
+        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs, timeZone);
         const filteredBase = baseColumns.filter((col) => !hiddenColumns.includes(col.id));
         const actionsCol = filteredBase.find((c) => c.id === 'actions');
         const otherCols = filteredBase.filter((c) => c.id !== 'actions');
         return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])];
-    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns]);
+    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone]);
     const filters = useMemo(() => [], []);
     const table = useReactTable({
         data,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "17.0.4",
+  "version": "18.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "date-fns": ">=3",
     "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.4.2"
+    "@asteby/metacore-ui": "^2.5.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -62,7 +62,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.4.2"
+    "@asteby/metacore-ui": "2.5.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/format-date-cell.test.ts

@@ -49,4 +49,31 @@ describe('formatDateCell', () => {
     it('returns null for an unparseable value', () => {
         expect(formatDateCell('not-a-date', 'datetime', enUS)).toBeNull()
     })
+
+    describe('timeZone-aware (org IANA zone)', () => {
+        // 2026-06-07T00:00:00Z is the previous day, 19:00, in America/Mexico_City
+        // (UTC-5). A browser-local formatter in a UTC-2 zone would day-shift it;
+        // pinning to the org zone must show June 6.
+        const midnightUtc = '2026-06-07T00:00:00Z'
+
+        it('renders an instant in the provided zone, not the browser zone', () => {
+            const out = formatDateCell(midnightUtc, 'datetime', enUS, 'America/Mexico_City')
+            expect(out).not.toBeNull()
+            // Mexico City is UTC-5/-6 → the instant falls on June 6, 19:00.
+            expect(out!.display).toMatch(/Jun 6, 2026/)
+            expect(out!.display).toMatch(/\d{1,2}:\d{2}/)
+            // Tooltip carries full precision + the zone abbreviation.
+            expect(out!.title).toBeDefined()
+            expect(out!.title).toMatch(/2026/)
+        })
+
+        it('renders a pure `date` pinned to UTC so it never shifts', () => {
+            const out = formatDateCell(midnightUtc, 'date', enUS, 'America/Mexico_City')
+            expect(out).not.toBeNull()
+            // UTC-pinned: stays on June 7 regardless of zone, no time, no tooltip.
+            expect(out!.display).toMatch(/June 7, 2026/)
+            expect(out!.display).not.toMatch(/\d{1,2}:\d{2}/)
+            expect(out!.title).toBeUndefined()
+        })
+    })
 })

package/src/dynamic-columns-shim.ts

@@ -30,6 +30,7 @@ export type GetDynamicColumns = (
     t: (key: string, options?: any) => string,
     language: string,
     columnFilterConfigs: Map<string, ColumnFilterConfig>,
+    timeZone?: string,
 ) => ColumnDef<any>[]
 
 /** Signature for the host-provided `DynamicIcon` renderer. */

package/src/dynamic-columns.tsx

@@ -369,16 +369,60 @@ export const DATE_CELL_TYPES = ['date', 'datetime', 'timestamp', 'timestamptz']
  *   - `date`: day only (`PPP`), no tooltip.
  *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
  *     tooltip (`PPpp`) — the 7Leguas pattern.
+ *
+ * When a `timeZone` (IANA, e.g. the org's `America/Mexico_City`) is provided,
+ * instants are rendered in that zone via the native `Intl.DateTimeFormat` so
+ * the displayed day/time never shifts with the viewer's browser timezone:
+ *   - instant (datetime/timestamp(tz)): `dateStyle:'medium' timeStyle:'short'`
+ *     in the org zone, with a `dateStyle:'long' timeStyle:'medium'` +
+ *     `timeZoneName:'short'` tooltip.
+ *   - `date` (pure calendar day): rendered pinned to UTC so it never rolls to
+ *     the previous/next day, no tooltip.
+ * Without a `timeZone`, the exact date-fns behavior is preserved (back-compat).
  */
 export function formatDateCell(
     value: unknown,
     renderAs: string | undefined,
     locale: Locale,
+    timeZone?: string,
 ): { display: string; title?: string } | null {
     if (value === null || value === undefined || value === '') return null
     const date = new Date(value as any)
     if (isNaN(date.getTime()) || date.getFullYear() <= 1) return null
     const withTime = renderAs !== 'date'
+    if (timeZone) {
+        // `locale.code` is the BCP-47 tag date-fns ships (e.g. 'es', 'en-US').
+        const localeTag = locale?.code || undefined
+        if (withTime) {
+            return {
+                display: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    dateStyle: 'medium',
+                    timeStyle: 'short',
+                }).format(date),
+                // `dateStyle`/`timeStyle` can't be combined with explicit
+                // component options like `timeZoneName`, so spell the tooltip
+                // out: long date + seconds + the zone abbreviation.
+                title: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    timeZoneName: 'short',
+                }).format(date),
+            }
+        }
+        // Pure calendar date: pin to UTC so it never shifts across zones.
+        return {
+            display: new Intl.DateTimeFormat(localeTag, {
+                timeZone: 'UTC',
+                dateStyle: 'long',
+            }).format(date),
+        }
+    }
     if (withTime) {
         return {
             display: format(date, 'Pp', { locale }),
@@ -514,6 +558,7 @@ export function makeDefaultGetDynamicColumns(
         t?: (key: string, options?: any) => string,
         currentLanguage?: string,
         filterConfigs?: Map<string, ColumnFilterConfig>,
+        timeZone?: string,
     ): ColumnDef<any>[] {
         const dateLocale = currentLanguage === 'en' ? enUS : es
         const columns: ColumnDef<any>[] = [
@@ -665,7 +710,7 @@ export function makeDefaultGetDynamicColumns(
                         case 'datetime':
                         case 'timestamp':
                         case 'timestamptz': {
-                            const formatted = formatDateCell(value, renderAs, dateLocale)
+                            const formatted = formatDateCell(value, renderAs, dateLocale, timeZone)
                             if (!formatted)
                                 return <span className="text-muted-foreground">-</span>
                             return (

package/src/dynamic-select-field.tsx

@@ -35,6 +35,8 @@ import {
     PopoverTrigger,
 } from '@asteby/metacore-ui/primitives'
 import { Check, ChevronsUpDown, ImageIcon, Loader2, Plus } from 'lucide-react'
+import { resolveColorCss } from '@asteby/metacore-ui/lib'
+import { DynamicIcon } from './dynamic-icon'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { getFieldRef } from './dynamic-form-schema'
 import type { ActionFieldDef } from './types'
@@ -76,6 +78,53 @@ function OptionThumb({ image, size = 20 }: { image?: string | null; size?: numbe
     )
 }
 
+/**
+ * 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.
+ */
+function OptionLead({
+    option,
+    size = 20,
+}: {
+    option?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null
+    size?: number
+}) {
+    if (!option) return null
+    if (option.image) return <OptionThumb image={option.image} size={size} />
+    if (option.icon) {
+        return (
+            <span
+                className="flex shrink-0 items-center justify-center"
+                style={{ width: size, height: size, color: option.color ? resolveColorCss(option.color) : undefined }}
+                aria-hidden
+            >
+                <DynamicIcon name={option.icon} className="size-4" />
+            </span>
+        )
+    }
+    if (option.color) {
+        return (
+            <span
+                className="shrink-0 rounded-full"
+                style={{ width: Math.round(size * 0.5), height: Math.round(size * 0.5), background: resolveColorCss(option.color) }}
+                aria-hidden
+            />
+        )
+    }
+    return null
+}
+
+/** True when any option (or the selected one) carries a renderable visual. */
+function optionsHaveVisual(
+    options: ReadonlyArray<Pick<ResolvedOption, 'image' | 'color' | 'icon'>>,
+    selected?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null,
+): boolean {
+    const has = (o?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null) =>
+        !!(o && (o.image || o.color || o.icon))
+    return has(selected) || options.some(has)
+}
+
 function useDebounced<T>(value: T, ms: number): T {
     const [debounced, setDebounced] = useState(value)
     useEffect(() => {
@@ -130,8 +179,7 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
     // Only switch the picker into "with thumbnails" mode when the data actually
     // carries images — a relation whose options have no `image` keeps the plain
     // text list it had before (no empty placeholder column).
-    const hasImages =
-        !!selectedOption?.image || options.some((o) => !!o.image)
+    const hasVisual = optionsHaveVisual(options, selectedOption)
 
     const handlePick = (opt: ResolvedOption) => {
         setPicked(opt)
@@ -181,8 +229,8 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
                     data-empty={!value}
                 >
                     <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
-                        {hasImages && value ? (
-                            <OptionThumb image={selectedOption?.image} size={20} />
+                        {hasVisual && value ? (
+                            <OptionLead option={selectedOption} size={20} />
                         ) : null}
                         <span className={'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
                             {selectedLabel || field.placeholder || 'Buscar…'}
@@ -227,8 +275,8 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
                                             onSelect={() => handlePick(opt)}
                                         >
                                             <Check className={'mr-2 size-4 shrink-0 ' + (isSel ? 'opacity-100' : 'opacity-0')} />
-                                            {hasImages && (
-                                                <OptionThumb image={opt.image} size={24} />
+                                            {hasVisual && (
+                                                <OptionLead option={opt} size={24} />
                                             )}
                                             <div className="ml-2 flex min-w-0 flex-col">
                                                 <span className="truncate">{opt.label}</span>

package/src/dynamic-table.tsx

@@ -90,6 +90,13 @@ interface DynamicTableProps {
      * Optional — a sensible default maps each column to { accessorKey, header }.
      */
     getDynamicColumns?: GetDynamicColumns
+    /**
+     * IANA timezone (e.g. the org's `America/Mexico_City`) used to render
+     * datetime/timestamp cells. When provided, instants are displayed in this
+     * zone instead of the viewer's browser zone, so the day/time never shifts.
+     * Optional — omitting it preserves the legacy browser-local formatting.
+     */
+    timeZone?: string
 }
 
 export function DynamicTable({
@@ -102,6 +109,7 @@ export function DynamicTable({
     defaultFilters,
     extraColumns = [],
     getDynamicColumns = defaultGetDynamicColumns,
+    timeZone,
 }: DynamicTableProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
@@ -590,12 +598,12 @@ export function DynamicTable({
         const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
             ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
             : metadata
-        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs)
+        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs, timeZone)
         const filteredBase = baseColumns.filter((col: ColumnDef<any>) => !hiddenColumns.includes(col.id as string))
         const actionsCol = filteredBase.find((c: ColumnDef<any>) => c.id === 'actions')
         const otherCols = filteredBase.filter((c: ColumnDef<any>) => c.id !== 'actions')
         return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])]
-    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns])
+    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone])
 
     const filters = useMemo(() => [], [])