@asteby/metacore-runtime-react 18.24.0 → 18.26.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @asteby/metacore-runtime-react
 
+## 18.26.0
+
+### Minor Changes
+
+- d0056f1: Activity log (record history) renders jsonb line items as a table and localizes
+  relation field labels.
+  - **Line-items render as the shared `CollectionCell` mini-table** instead of raw
+    `JSON.stringify`. A jsonb array-of-objects value (e.g. a transfer's `items`,
+    directly or JSON-string-encoded) now shows a localized mini-table with
+    resolved relation chips (when the backend injects the `{value,label,image}`
+    siblings into the snapshot) — matching the detail view. Uses the column's
+    declared `item_fields` when present.
+  - **Relation field labels localize.** `resolveColumn` now matches the `*_id`
+    twin of a resolved relation key (`destination_warehouse` →
+    `destination_warehouse_id`), so the diff "Campo" uses the localized column
+    label ("Almacén destino") instead of humanizing the key in English
+    ("Destination Warehouse").
+
+## 18.25.0
+
+### Minor Changes
+
+- adb1c52: `CollectionCell` renders resolved relation references as "pro" chips in EVERY
+  path — including the schema-less generic one.
+
+  Previously only the declared-`item_fields` path resolved a jsonb line-item ref
+  (e.g. `product_id`) to a relation chip. The generic path (used by the full-page
+  record detail and any jsonb without a declared schema) dumped the
+  backend-injected resolved sibling object as raw `"{…}"` AND showed the raw uuid
+  in a duplicate column. Now the generic path:
+  - detects the backend-injected `{ value, label, image }` ref siblings,
+  - renders them as the same relation chip (subtle tint + thumbnail or entity icon
+    - name) the FK table columns use, and
+  - hides the raw `<key>_id` twin column,
+
+  so an unconfigured jsonb line-items blob reads as first-class relations
+  (foto/nombre) instead of uuid soup. The shared chip is extracted as `RefChip`
+  and reused by the schema (`ItemFieldCell`) and generic paths.
+
 ## 18.24.0
 
 ### Minor Changes

package/dist/activity-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAuGD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4KpD,CAAA"}
+{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AA8GD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4KpD,CAAA"}

package/dist/activity-diff.js

@@ -81,6 +81,14 @@ function resolveColumn(key, columns) {
     const exact = columns.find((c) => c.key === key);
     if (exact)
         return exact;
+    // A resolved relation key is the FK column minus `_id` (the backend injects a
+    // `destination_warehouse` sibling next to `destination_warehouse_id`). The
+    // served metadata carries the LOCALIZED label on the `*_id` column, so match
+    // it — else the label falls back to humanizing the key in English
+    // ("Destination Warehouse" instead of "Almacén destino").
+    const fk = columns.find((c) => c.key === `${key}_id`);
+    if (fk)
+        return fk;
     // A diff key is the physical column (created_by); the served metadata may
     // only carry the dotted display column for it (created_by.avatar). Match on
     // the base segment so the diff cell inherits its label and rich renderer.

package/dist/activity-value-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-value-renderer.d.ts","sourceRoot":"","sources":["../src/activity-value-renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA0E/C,MAAM,WAAW,0BAA0B;IACvC,4DAA4D;IAC5D,KAAK,EAAE,OAAO,CAAA;IACd,+EAA+E;IAC/E,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAiRtE,CAAA"}
+{"version":3,"file":"activity-value-renderer.d.ts","sourceRoot":"","sources":["../src/activity-value-renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAqG/C,MAAM,WAAW,0BAA0B;IACvC,4DAA4D;IAC5D,KAAK,EAAE,OAAO,CAAA;IACd,+EAA+E;IAC/E,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqStE,CAAA"}

package/dist/activity-value-renderer.js

@@ -17,6 +17,32 @@ import { Badge, Avatar, AvatarImage, AvatarFallback, } from '@asteby/metacore-ui
 import { generateBadgeStyles, getInitials, optionColor, relationChipStyles } from '@asteby/metacore-ui/lib';
 import { formatDateCell } from './dynamic-columns';
 import { humanizeToken } from './dynamic-columns-helpers';
+import { CollectionCell } from './collection-cell';
+/**
+ * Parses a value into a jsonb line-items array (array of plain objects) when it
+ * is one — directly, or from a JSON-encoded string. Returns null otherwise, so
+ * scalars / resolved-entity objects keep their existing renderers.
+ */
+function asLineItemsArray(value) {
+    let arr = value;
+    if (typeof value === 'string') {
+        const t = value.trim();
+        if (!t.startsWith('['))
+            return null;
+        try {
+            arr = JSON.parse(t);
+        }
+        catch {
+            return null;
+        }
+    }
+    if (Array.isArray(arr) &&
+        arr.length > 0 &&
+        arr.every((v) => v !== null && typeof v === 'object' && !Array.isArray(v))) {
+        return arr;
+    }
+    return null;
+}
 // ---------------------------------------------------------------------------
 // Internal helpers (mirror dynamic-columns.tsx private helpers)
 // ---------------------------------------------------------------------------
@@ -81,6 +107,16 @@ export const ActivityValueRenderer = ({ value, col, timeZone, currency, locale =
     if (value === null || value === undefined || value === '') {
         return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
     }
+    // jsonb line-items (array of objects, e.g. a transfer's `items`) → the shared
+    // CollectionCell mini-table (localized headers + resolved ref chips) instead
+    // of raw JSON. Uses the column's declared item_fields when present.
+    const lineItems = asLineItemsArray(value);
+    if (lineItems) {
+        return (_jsx(CollectionCell, { value: lineItems, variant: "inline", itemFields: col
+                ?.itemFields ??
+                col
+                    ?.item_fields, locale: locale }));
+    }
     // No column metadata → entity chip when the value is a resolved object,
     // plain string otherwise.
     if (!col) {

package/dist/collection-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-cell.d.ts","sourceRoot":"","sources":["../src/collection-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkD9B,sFAAsF;AACtF,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAA;AAE9D;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACtB,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAA;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;CACf;AA6KD;;;;;;GAMG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAWR;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAuMD,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,CAAC,CAAC,EAAE,SAAS,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAa,EACb,MAAM,EACN,CAAC,EACD,UAAU,EACV,WAAW,EACX,OAAiB,GACpB,EAAE,mBAAmB,qBA2HrB"}
+{"version":3,"file":"collection-cell.d.ts","sourceRoot":"","sources":["../src/collection-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkD9B,sFAAsF;AACtF,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAA;AAE9D;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACtB,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAA;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;CACf;AAoND;;;;;;GAMG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAWR;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAiOD,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,CAAC,CAAC,EAAE,SAAS,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAa,EACb,MAAM,EACN,CAAC,EACD,UAAU,EACV,WAAW,EACX,OAAiB,GACpB,EAAE,mBAAmB,qBA2HrB"}

package/dist/collection-cell.js

@@ -80,18 +80,44 @@ function itemFieldText(field, row) {
         return ref.label;
     return formatScalar(row[field.key]);
 }
+/**
+ * A backend-resolved relation reference shaped `{ value, label, image? }` — the
+ * sibling the backend injects for a ref (FK column or jsonb item-field), the
+ * SAME shape the relation table columns use. Lets a jsonb line item read as a
+ * first-class relation, not a raw uuid.
+ */
+function resolvedRefObject(v) {
+    if (!isPlainObject(v))
+        return null;
+    const label = v.label;
+    if (label === undefined || label === null || label === '')
+        return null;
+    return {
+        label: String(label),
+        value: v.value,
+        image: typeof v.image === 'string' && v.image !== '' ? v.image : undefined,
+    };
+}
+/**
+ * The "pro" relation chip — subtle deterministic tint + the related record's
+ * thumbnail (product photo / logo / avatar) or a generic entity icon + the
+ * resolved name. The exact look the FK table columns use, so resolved relations
+ * read consistently everywhere (table popover, detail view, edit, line items).
+ */
+function RefChip({ label, image, getImageUrl, }) {
+    const isDark = useIsDarkTheme();
+    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium", style: relationChipStyles(label, { isDark }), title: label, children: [image ? (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: 18, height: 18 }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(image) : image, alt: label, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(label) })] })) : (_jsx(Box, { className: "h-3 w-3 shrink-0 opacity-70" })), _jsx("span", { className: "truncate", children: label })] }));
+}
 /**
  * Visual cell for one declared item-field. A resolved `ref` renders as a
- * relation chip (subtle deterministic tint + product thumbnail or a generic
- * entity icon + name) — the same "pro" look the table FK columns use — so jsonb
- * line items read like first-class relations instead of raw uuids. Non-ref (or
+ * relation chip (foto/ícono + nombre) — the "pro" FK-column look — so jsonb line
+ * items read like first-class relations instead of raw uuids. Non-ref (or
  * unresolved) fields render the plain scalar.
  */
 function ItemFieldCell({ field, row, getImageUrl, }) {
-    const isDark = useIsDarkTheme();
     const ref = resolvedRefFor(field, row);
     if (ref?.label) {
-        return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium", style: relationChipStyles(ref.label, { isDark }), title: ref.label, children: [ref.image ? (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: 18, height: 18 }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(ref.image) : ref.image, alt: ref.label, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(ref.label) })] })) : (_jsx(Box, { className: "h-3 w-3 shrink-0 opacity-70" })), _jsx("span", { className: "truncate", children: ref.label })] }));
+        return (_jsx(RefChip, { label: ref.label, image: ref.image, getImageUrl: getImageUrl }));
     }
     return _jsx(_Fragment, { children: formatScalar(row[field.key]) });
 }
@@ -265,11 +291,28 @@ function MiniTable({ rows, locale, t, itemFields, getImageUrl, }) {
     if (itemFields && itemFields.length > 0) {
         return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: itemFields.map((field) => (_jsx(TableHead, { className: "text-xs whitespace-nowrap", children: field.label }, field.key))) }) }), _jsx(TableBody, { children: rows.map((row, i) => (_jsx(TableRow, { children: itemFields.map((field) => (_jsx(TableCell, { className: "text-xs whitespace-nowrap", children: _jsx(ItemFieldCell, { field: field, row: row, getImageUrl: getImageUrl }) }, field.key))) }, i))) })] }));
     }
-    const keys = unionKeys(rows);
+    // Generic (no-schema) path — still relation-AWARE. The backend injects a
+    // resolved-ref sibling object (`{value,label,image}`) next to each FK id
+    // inside the items (e.g. `product` next to `product_id`). Without a declared
+    // schema we'd otherwise dump that object as "{…}" AND the raw uuid in a
+    // duplicate column. Instead: detect those sibling objects, render them as
+    // relation chips, and HIDE their raw `<key>_id` twin — so even an
+    // unconfigured jsonb blob reads "pro" (foto/nombre, no uuid soup).
+    const allKeys = unionKeys(rows);
+    const refKeys = new Set(allKeys.filter((k) => rows.some((r) => resolvedRefObject(r[k]) !== null)));
+    const hiddenTwins = new Set();
+    for (const rk of refKeys)
+        hiddenTwins.add(`${rk}_id`);
+    const keys = allKeys.filter((k) => !hiddenTwins.has(k));
     if (keys.length === 0) {
         return _jsx("div", { className: "p-3 text-xs text-muted-foreground", children: "-" });
     }
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: keys.map((key) => (_jsx(TableHead, { className: "text-xs whitespace-nowrap", children: prettifyKey(key, locale, t) }, key))) }) }), _jsx(TableBody, { children: rows.map((row, i) => (_jsx(TableRow, { children: keys.map((key) => (_jsx(TableCell, { className: "text-xs whitespace-nowrap", children: formatScalar(row[key]) }, key))) }, i))) })] }));
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: keys.map((key) => (_jsx(TableHead, { className: "text-xs whitespace-nowrap", children: prettifyKey(key, locale, t) }, key))) }) }), _jsx(TableBody, { children: rows.map((row, i) => (_jsx(TableRow, { children: keys.map((key) => {
+                        const ref = refKeys.has(key)
+                            ? resolvedRefObject(row[key])
+                            : null;
+                        return (_jsx(TableCell, { className: "text-xs whitespace-nowrap", children: ref ? (_jsx(RefChip, { label: ref.label, image: ref.image, getImageUrl: getImageUrl })) : (formatScalar(row[key])) }, key));
+                    }) }, i))) })] }));
 }
 function ScalarList({ values }) {
     return (_jsx("ul", { className: "p-3 space-y-1", children: values.map((v, i) => (_jsx("li", { className: "text-xs text-foreground", children: formatScalar(v) }, i))) }));

package/package.json

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

package/src/activity-diff.tsx

@@ -132,6 +132,13 @@ function resolveColumn(key: string, columns?: ColumnDefinition[]): ColumnDefinit
     if (!columns?.length) return undefined
     const exact = columns.find((c) => c.key === key)
     if (exact) return exact
+    // A resolved relation key is the FK column minus `_id` (the backend injects a
+    // `destination_warehouse` sibling next to `destination_warehouse_id`). The
+    // served metadata carries the LOCALIZED label on the `*_id` column, so match
+    // it — else the label falls back to humanizing the key in English
+    // ("Destination Warehouse" instead of "Almacén destino").
+    const fk = columns.find((c) => c.key === `${key}_id`)
+    if (fk) return fk
     // A diff key is the physical column (created_by); the served metadata may
     // only carry the dotted display column for it (created_by.avatar). Match on
     // the base segment so the diff cell inherits its label and rich renderer.

package/src/activity-value-renderer.tsx

@@ -23,6 +23,33 @@ import { generateBadgeStyles, getInitials, optionColor, relationChipStyles } fro
 import type { ColumnDefinition } from './types'
 import { formatDateCell } from './dynamic-columns'
 import { humanizeToken } from './dynamic-columns-helpers'
+import { CollectionCell, type ItemField } from './collection-cell'
+
+/**
+ * Parses a value into a jsonb line-items array (array of plain objects) when it
+ * is one — directly, or from a JSON-encoded string. Returns null otherwise, so
+ * scalars / resolved-entity objects keep their existing renderers.
+ */
+function asLineItemsArray(value: unknown): Record<string, unknown>[] | null {
+    let arr: unknown = value
+    if (typeof value === 'string') {
+        const t = value.trim()
+        if (!t.startsWith('[')) return null
+        try {
+            arr = JSON.parse(t)
+        } catch {
+            return null
+        }
+    }
+    if (
+        Array.isArray(arr) &&
+        arr.length > 0 &&
+        arr.every((v) => v !== null && typeof v === 'object' && !Array.isArray(v))
+    ) {
+        return arr as Record<string, unknown>[]
+    }
+    return null
+}
 
 // ---------------------------------------------------------------------------
 // Internal helpers (mirror dynamic-columns.tsx private helpers)
@@ -128,6 +155,26 @@ export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
         return <span className="text-muted-foreground">—</span>
     }
 
+    // jsonb line-items (array of objects, e.g. a transfer's `items`) → the shared
+    // CollectionCell mini-table (localized headers + resolved ref chips) instead
+    // of raw JSON. Uses the column's declared item_fields when present.
+    const lineItems = asLineItemsArray(value)
+    if (lineItems) {
+        return (
+            <CollectionCell
+                value={lineItems}
+                variant="inline"
+                itemFields={
+                    (col as { itemFields?: ItemField[]; item_fields?: ItemField[] })
+                        ?.itemFields ??
+                    (col as { itemFields?: ItemField[]; item_fields?: ItemField[] })
+                        ?.item_fields
+                }
+                locale={locale}
+            />
+        )
+    }
+
     // No column metadata → entity chip when the value is a resolved object,
     // plain string otherwise.
     if (!col) {

package/src/collection-cell.tsx

@@ -136,11 +136,74 @@ function itemFieldText(field: ItemField, row: Record<string, unknown>): string {
     return formatScalar(row[field.key])
 }
 
+/**
+ * A backend-resolved relation reference shaped `{ value, label, image? }` — the
+ * sibling the backend injects for a ref (FK column or jsonb item-field), the
+ * SAME shape the relation table columns use. Lets a jsonb line item read as a
+ * first-class relation, not a raw uuid.
+ */
+function resolvedRefObject(
+    v: unknown,
+): (ResolvedRef & { label: string }) | null {
+    if (!isPlainObject(v)) return null
+    const label = v.label
+    if (label === undefined || label === null || label === '') return null
+    return {
+        label: String(label),
+        value: v.value,
+        image:
+            typeof v.image === 'string' && v.image !== '' ? v.image : undefined,
+    }
+}
+
+/**
+ * The "pro" relation chip — subtle deterministic tint + the related record's
+ * thumbnail (product photo / logo / avatar) or a generic entity icon + the
+ * resolved name. The exact look the FK table columns use, so resolved relations
+ * read consistently everywhere (table popover, detail view, edit, line items).
+ */
+function RefChip({
+    label,
+    image,
+    getImageUrl,
+}: {
+    label: string
+    image?: string
+    getImageUrl?: (path: string) => string
+}): React.ReactElement {
+    const isDark = useIsDarkTheme()
+    return (
+        <span
+            className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
+            style={relationChipStyles(label, { isDark })}
+            title={label}
+        >
+            {image ? (
+                <Avatar
+                    className="shrink-0 rounded-sm ring-1 ring-border/40"
+                    style={{ width: 18, height: 18 }}
+                >
+                    <AvatarImage
+                        src={getImageUrl ? getImageUrl(image) : image}
+                        alt={label}
+                        className="object-cover"
+                    />
+                    <AvatarFallback className="rounded-sm bg-primary/10 text-[8px] font-bold text-primary">
+                        {getInitials(label)}
+                    </AvatarFallback>
+                </Avatar>
+            ) : (
+                <Box className="h-3 w-3 shrink-0 opacity-70" />
+            )}
+            <span className="truncate">{label}</span>
+        </span>
+    )
+}
+
 /**
  * Visual cell for one declared item-field. A resolved `ref` renders as a
- * relation chip (subtle deterministic tint + product thumbnail or a generic
- * entity icon + name) — the same "pro" look the table FK columns use — so jsonb
- * line items read like first-class relations instead of raw uuids. Non-ref (or
+ * relation chip (foto/ícono + nombre) — the "pro" FK-column look — so jsonb line
+ * items read like first-class relations instead of raw uuids. Non-ref (or
  * unresolved) fields render the plain scalar.
  */
 function ItemFieldCell({
@@ -152,34 +215,10 @@ function ItemFieldCell({
     row: Record<string, unknown>
     getImageUrl?: (path: string) => string
 }): React.ReactElement {
-    const isDark = useIsDarkTheme()
     const ref = resolvedRefFor(field, row)
     if (ref?.label) {
         return (
-            <span
-                className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium"
-                style={relationChipStyles(ref.label, { isDark })}
-                title={ref.label}
-            >
-                {ref.image ? (
-                    <Avatar
-                        className="shrink-0 rounded-sm ring-1 ring-border/40"
-                        style={{ width: 18, height: 18 }}
-                    >
-                        <AvatarImage
-                            src={getImageUrl ? getImageUrl(ref.image) : ref.image}
-                            alt={ref.label}
-                            className="object-cover"
-                        />
-                        <AvatarFallback className="rounded-sm bg-primary/10 text-[8px] font-bold text-primary">
-                            {getInitials(ref.label)}
-                        </AvatarFallback>
-                    </Avatar>
-                ) : (
-                    <Box className="h-3 w-3 shrink-0 opacity-70" />
-                )}
-                <span className="truncate">{ref.label}</span>
-            </span>
+            <RefChip label={ref.label} image={ref.image} getImageUrl={getImageUrl} />
         )
     }
     return <>{formatScalar(row[field.key])}</>
@@ -412,7 +451,20 @@ function MiniTable({
         )
     }
 
-    const keys = unionKeys(rows)
+    // Generic (no-schema) path — still relation-AWARE. The backend injects a
+    // resolved-ref sibling object (`{value,label,image}`) next to each FK id
+    // inside the items (e.g. `product` next to `product_id`). Without a declared
+    // schema we'd otherwise dump that object as "{…}" AND the raw uuid in a
+    // duplicate column. Instead: detect those sibling objects, render them as
+    // relation chips, and HIDE their raw `<key>_id` twin — so even an
+    // unconfigured jsonb blob reads "pro" (foto/nombre, no uuid soup).
+    const allKeys = unionKeys(rows)
+    const refKeys = new Set(
+        allKeys.filter((k) => rows.some((r) => resolvedRefObject(r[k]) !== null))
+    )
+    const hiddenTwins = new Set<string>()
+    for (const rk of refKeys) hiddenTwins.add(`${rk}_id`)
+    const keys = allKeys.filter((k) => !hiddenTwins.has(k))
     if (keys.length === 0) {
         return <div className="p-3 text-xs text-muted-foreground">-</div>
     }
@@ -430,14 +482,27 @@ function MiniTable({
             <TableBody>
                 {rows.map((row, i) => (
                     <TableRow key={i}>
-                        {keys.map((key) => (
-                            <TableCell
-                                key={key}
-                                className="text-xs whitespace-nowrap"
-                            >
-                                {formatScalar(row[key])}
-                            </TableCell>
-                        ))}
+                        {keys.map((key) => {
+                            const ref = refKeys.has(key)
+                                ? resolvedRefObject(row[key])
+                                : null
+                            return (
+                                <TableCell
+                                    key={key}
+                                    className="text-xs whitespace-nowrap"
+                                >
+                                    {ref ? (
+                                        <RefChip
+                                            label={ref.label}
+                                            image={ref.image}
+                                            getImageUrl={getImageUrl}
+                                        />
+                                    ) : (
+                                        formatScalar(row[key])
+                                    )}
+                                </TableCell>
+                            )
+                        })}
                     </TableRow>
                 ))}
             </TableBody>