@asteby/metacore-runtime-react 18.23.0 → 18.24.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @asteby/metacore-runtime-react
 
+## 18.24.0
+
+### Minor Changes
+
+- 39c43ea: jsonb line-item `ref` cells render as relation chips (icon/photo + name).
+
+  In `CollectionCell` (table popover, inline detail view, and the read-only edit
+  field), a resolved ref sub-field — e.g. `product_id` inside a transfer's `items`
+  — now renders with the same "pro" relation look the FK table columns use: a
+  subtle deterministic tint, the resolved record's thumbnail (product photo / logo
+  / avatar, resolved via the threaded `getImageUrl`) or a generic entity icon
+  fallback, and the resolved name — instead of a truncated uuid.
+
+  `CollectionCell` gains an optional `getImageUrl` prop, threaded from the columns
+  factory and from the record dialog's `ImageUrlContext`. Backend-agnostic: it
+  drives off the backend-injected `{ value, label, image }` sibling; an unresolved
+  ref still falls back to the scalar value.
+
 ## 18.23.0
 
 ### Minor Changes

package/dist/collection-cell.d.ts

@@ -57,6 +57,12 @@ export interface CollectionCellProps {
      * behaviour is unchanged.
      */
     itemFields?: ItemField[];
+    /**
+     * Resolves a stored image path to a displayable URL (same resolver the table
+     * columns use). Threaded to the ref-chip thumbnails so resolved line-item
+     * relations show a product photo / logo / avatar like the FK columns do.
+     */
+    getImageUrl?: (path: string) => string;
     /**
      * Presentation mode.
      *   - `'badge'` (default): the compact count/preview badge that opens a
@@ -77,5 +83,5 @@ export interface CollectionCellProps {
  * itemFields schema (localized headers + resolved ref labels) and the
  * locale-aware generic fallback.
  */
-export declare function CollectionCell({ value, maxInline, locale, t, itemFields, variant, }: CollectionCellProps): React.JSX.Element;
+export declare function CollectionCell({ value, maxInline, locale, t, itemFields, getImageUrl, variant, }: CollectionCellProps): React.JSX.Element;
 //# sourceMappingURL=collection-cell.d.ts.map

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;AAoB9B,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;AAmGD;;;;;;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;AAiMD,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;;;;;;;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,OAAiB,GACpB,EAAE,mBAAmB,qBAyHrB"}
+{"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"}

package/dist/collection-cell.js

@@ -1,7 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { List } from 'lucide-react';
-import { Badge, Popover, PopoverContent, PopoverTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn, } from '@asteby/metacore-ui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Generic, brand-neutral table-cell renderer for jsonb / array / object column
+// values. Kernel-derived dynamic tables surface raw jsonb columns (line items,
+// nested config blobs, scalar arrays) with no per-column metadata; without this
+// they rendered as raw `JSON.stringify(value)` which is unreadable. This renders
+// a compact trigger (count badge / inline pairs) plus a Popover with a clean
+// mini-table — no per-addon config required, safe on any shape.
+import * as React from 'react';
+import { Box, List } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage, Badge, Popover, PopoverContent, PopoverTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn, } from '@asteby/metacore-ui';
+import { getInitials, relationChipStyles } from '@asteby/metacore-ui/lib';
 import { humanizeToken } from './dynamic-columns-helpers';
+/**
+ * Tracks the host's dark-mode class on <html> so relation chips pick a tint
+ * tuned for the active theme. Replicated from dynamic-columns (kept local to
+ * avoid a cross-module import); mirror changes if that one evolves.
+ */
+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;
+}
 const UUID_LIKE_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 /**
  * Resolves the backend-injected resolved sibling key for a ref item-field,
@@ -12,27 +42,59 @@ function siblingKeyFor(key) {
     return key.endsWith('_id') ? key.slice(0, -3) : `${key}_label`;
 }
 /**
- * Renders the cell value for one declared item-field of a jsonb row. For a
- * `ref` field it prefers the backend-injected resolved sibling (the FK key
- * without `_id`, else `<key>_label`): a `{ value, label }` object shows its
- * `label`, a bare string shows itself; absent → the raw value via
- * `formatScalar` (truncated uuid). Non-ref fields render `formatScalar(value)`.
+ * Reads the backend-injected resolved sibling for a `ref` item-field (the FK
+ * key without `_id`, else `<key>_label`). Returns the normalized `{label,
+ * image}` when present, a `{label}` for a bare-string sibling, or null when the
+ * ref is unresolved (so the caller falls back to the raw value).
  */
-function renderItemFieldValue(field, row) {
-    if (field.ref) {
-        const sibling = row[siblingKeyFor(field.key)];
-        if (sibling && typeof sibling === 'object' && !Array.isArray(sibling)) {
-            const label = sibling.label;
-            if (label !== undefined && label !== null && label !== '') {
-                return String(label);
-            }
-        }
-        else if (typeof sibling === 'string' && sibling !== '') {
-            return sibling;
+function resolvedRefFor(field, row) {
+    if (!field.ref)
+        return null;
+    const sibling = row[siblingKeyFor(field.key)];
+    if (sibling && typeof sibling === 'object' && !Array.isArray(sibling)) {
+        const obj = sibling;
+        const label = obj.label;
+        if (label !== undefined && label !== null && label !== '') {
+            return {
+                label: String(label),
+                value: obj.value,
+                image: typeof obj.image === 'string' && obj.image !== ''
+                    ? obj.image
+                    : undefined,
+            };
         }
     }
+    else if (typeof sibling === 'string' && sibling !== '') {
+        return { label: sibling };
+    }
+    return null;
+}
+/**
+ * Plain-text value for one declared item-field — used for the no-JS popover
+ * `title` tooltip (which can't render JSX). Ref fields show the resolved label;
+ * everything else uses `formatScalar` (truncated uuid for unresolved ids).
+ */
+function itemFieldText(field, row) {
+    const ref = resolvedRefFor(field, row);
+    if (ref?.label)
+        return ref.label;
     return formatScalar(row[field.key]);
 }
+/**
+ * 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
+ * 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(_Fragment, { children: formatScalar(row[field.key]) });
+}
 /** Normalize an org/UI language tag to a base language code (`es-MX` → `es`). */
 function baseLang(locale) {
     return (locale || 'en').toLowerCase().split('-')[0];
@@ -194,14 +256,14 @@ function unionKeys(rows) {
     return seen;
 }
 const PANEL_CLASS = 'w-auto max-w-[480px] max-h-[320px] overflow-auto p-0';
-function MiniTable({ rows, locale, t, itemFields, }) {
+function MiniTable({ rows, locale, t, itemFields, getImageUrl, }) {
     // Schema-driven path: a declared `item_fields` schema fixes the column
     // order + headers (already localized by the backend, used VERBATIM) and
     // resolves ref columns to the injected sibling label instead of the raw
     // uuid. Sibling/raw keys not covered by the schema are dropped from the
     // table (the schema is the source of truth for what to surface).
     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: renderItemFieldValue(field, row) }, field.key))) }, i))) })] }));
+        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);
     if (keys.length === 0) {
@@ -229,7 +291,7 @@ function PopoverShell({ label, title, children, icon = true, }) {
  * itemFields schema (localized headers + resolved ref labels) and the
  * locale-aware generic fallback.
  */
-export function CollectionCell({ value, maxInline = 3, locale, t, itemFields, variant = 'badge', }) {
+export function CollectionCell({ value, maxInline = 3, locale, t, itemFields, getImageUrl, variant = 'badge', }) {
     const parsed = parseValue(value);
     const inline = variant === 'inline';
     // Empty-ish → muted dash.
@@ -253,7 +315,7 @@ export function CollectionCell({ value, maxInline = 3, locale, t, itemFields, va
             // Inline mode (detail view): render the mini-table directly, no
             // badge/popover. The same schema-driven path applies.
             if (inline) {
-                return (_jsx(MiniTable, { rows: rows, locale: locale, t: t, itemFields: itemFields }));
+                return (_jsx(MiniTable, { rows: rows, locale: locale, t: t, itemFields: itemFields, getImageUrl: getImageUrl }));
             }
             const count = rows.length;
             const label = countLabel(count, locale, t);
@@ -264,7 +326,7 @@ export function CollectionCell({ value, maxInline = 3, locale, t, itemFields, va
             const title = hasSchema
                 ? rows
                     .map((row) => itemFields
-                    .map((field) => `${field.label}: ${renderItemFieldValue(field, row)}`)
+                    .map((field) => `${field.label}: ${itemFieldText(field, row)}`)
                     .join(', '))
                     .join(' | ')
                 : rows
@@ -272,7 +334,7 @@ export function CollectionCell({ value, maxInline = 3, locale, t, itemFields, va
                     .map(([k, v]) => `${prettifyKey(k, locale, t)}: ${formatScalar(v)}`)
                     .join(', '))
                     .join(' | ');
-            return (_jsx(PopoverShell, { label: label, title: title, children: _jsx(MiniTable, { rows: rows, locale: locale, t: t, itemFields: itemFields }) }));
+            return (_jsx(PopoverShell, { label: label, title: title, children: _jsx(MiniTable, { rows: rows, locale: locale, t: t, itemFields: itemFields, getImageUrl: getImageUrl }) }));
         }
         // Array of scalars (or mixed). Inline mode renders the full list; badge
         // mode previews the first N joined with a "+N" overflow trigger.

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

@@ -661,6 +661,7 @@ function IconNameViewValue({ name }) {
 // empty objects keep the "—" marker (CollectionCell renders a muted dash, which
 // we normalize to the em-dash the detail view uses elsewhere).
 function StructuredViewValue({ value, field, locale, t, }) {
+    const getImageUrl = useContext(ImageUrlContext);
     const isEmpty = value === null ||
         value === undefined ||
         value === '' ||
@@ -671,16 +672,17 @@ function StructuredViewValue({ value, field, locale, t, }) {
     if (isEmpty) {
         return _jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "\u2014" });
     }
-    return (_jsx("div", { className: "text-sm py-1", children: _jsx(CollectionCell, { value: value, itemFields: field?.itemFields ?? field?.item_fields, variant: "inline", locale: locale, t: t }) }));
+    return (_jsx("div", { className: "text-sm py-1", children: _jsx(CollectionCell, { value: value, itemFields: field?.itemFields ?? field?.item_fields, variant: "inline", locale: locale, t: t, getImageUrl: getImageUrl }) }));
 }
 export function EditField({ field, value, onChange, record }) {
     const { t, i18n } = useTranslation();
+    const editFieldImageUrl = useContext(ImageUrlContext);
     // Jsonb line-items columns (e.g. Transfer.items) are action-built documents:
     // editing the array field-by-field is out of scope. Render them READ-ONLY
     // with the same inline table the detail view uses — a localized, ref-resolved
     // mini-table — instead of an input that stringifies to "[object Object]".
     if (isLineItemsField(field, value)) {
-        return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "rounded-md border bg-muted/30 p-2", children: _jsx(CollectionCell, { value: value, itemFields: fieldItemFields(field), variant: "inline", locale: i18n.language, t: t }) }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: t('datatable.readOnly', { defaultValue: 'Solo lectura' }) })] }));
+        return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "rounded-md border bg-muted/30 p-2", children: _jsx(CollectionCell, { value: value, itemFields: fieldItemFields(field), variant: "inline", locale: i18n.language, t: t, getImageUrl: editFieldImageUrl }) }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: t('datatable.readOnly', { defaultValue: 'Solo lectura' }) })] }));
     }
     if (field.type === 'boolean') {
         return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx(Switch, { checked: !!value, onCheckedChange: onChange }), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));

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;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;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA8nBnB;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;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;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;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA+nBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -736,7 +736,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         }
                         default: {
                             if (typeof value === 'object' && value !== null) {
-                                return (_jsx(CollectionCell, { value: value, locale: currentLanguage, t: t, itemFields: col.itemFields ?? col.item_fields }));
+                                return (_jsx(CollectionCell, { value: value, locale: currentLanguage, t: t, itemFields: col.itemFields ?? col.item_fields, getImageUrl: getImageUrl }));
                             }
                             if (col.key === 'description' ||
                                 col.key === 'features' ||

package/package.json

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

package/src/collection-cell.tsx

@@ -6,8 +6,11 @@
 // mini-table — no per-addon config required, safe on any shape.
 
 import * as React from 'react'
-import { List } from 'lucide-react'
+import { Box, List } from 'lucide-react'
 import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
     Badge,
     Popover,
     PopoverContent,
@@ -20,8 +23,35 @@ import {
     TableRow,
     cn,
 } from '@asteby/metacore-ui'
+import { getInitials, relationChipStyles } from '@asteby/metacore-ui/lib'
 import { humanizeToken } from './dynamic-columns-helpers'
 
+/**
+ * Tracks the host's dark-mode class on <html> so relation chips pick a tint
+ * tuned for the active theme. Replicated from dynamic-columns (kept local to
+ * avoid a cross-module import); mirror changes if that one evolves.
+ */
+function useIsDarkTheme(): boolean {
+    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
+}
+
 const UUID_LIKE_RE =
     /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
@@ -56,31 +86,105 @@ function siblingKeyFor(key: string): string {
     return key.endsWith('_id') ? key.slice(0, -3) : `${key}_label`
 }
 
+/** The backend-injected resolved sibling for a ref item-field. */
+interface ResolvedRef {
+    label?: string
+    value?: unknown
+    /** Optional thumbnail (product photo, logo, avatar) resolved by the backend. */
+    image?: string
+}
+
 /**
- * Renders the cell value for one declared item-field of a jsonb row. For a
- * `ref` field it prefers the backend-injected resolved sibling (the FK key
- * without `_id`, else `<key>_label`): a `{ value, label }` object shows its
- * `label`, a bare string shows itself; absent → the raw value via
- * `formatScalar` (truncated uuid). Non-ref fields render `formatScalar(value)`.
+ * Reads the backend-injected resolved sibling for a `ref` item-field (the FK
+ * key without `_id`, else `<key>_label`). Returns the normalized `{label,
+ * image}` when present, a `{label}` for a bare-string sibling, or null when the
+ * ref is unresolved (so the caller falls back to the raw value).
  */
-function renderItemFieldValue(
+function resolvedRefFor(
     field: ItemField,
     row: Record<string, unknown>,
-): string {
-    if (field.ref) {
-        const sibling = row[siblingKeyFor(field.key)]
-        if (sibling && typeof sibling === 'object' && !Array.isArray(sibling)) {
-            const label = (sibling as Record<string, unknown>).label
-            if (label !== undefined && label !== null && label !== '') {
-                return String(label)
+): ResolvedRef | null {
+    if (!field.ref) return null
+    const sibling = row[siblingKeyFor(field.key)]
+    if (sibling && typeof sibling === 'object' && !Array.isArray(sibling)) {
+        const obj = sibling as Record<string, unknown>
+        const label = obj.label
+        if (label !== undefined && label !== null && label !== '') {
+            return {
+                label: String(label),
+                value: obj.value,
+                image:
+                    typeof obj.image === 'string' && obj.image !== ''
+                        ? obj.image
+                        : undefined,
             }
-        } else if (typeof sibling === 'string' && sibling !== '') {
-            return sibling
         }
+    } else if (typeof sibling === 'string' && sibling !== '') {
+        return { label: sibling }
     }
+    return null
+}
+
+/**
+ * Plain-text value for one declared item-field — used for the no-JS popover
+ * `title` tooltip (which can't render JSX). Ref fields show the resolved label;
+ * everything else uses `formatScalar` (truncated uuid for unresolved ids).
+ */
+function itemFieldText(field: ItemField, row: Record<string, unknown>): string {
+    const ref = resolvedRefFor(field, row)
+    if (ref?.label) return ref.label
     return formatScalar(row[field.key])
 }
 
+/**
+ * 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
+ * unresolved) fields render the plain scalar.
+ */
+function ItemFieldCell({
+    field,
+    row,
+    getImageUrl,
+}: {
+    field: ItemField
+    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>
+        )
+    }
+    return <>{formatScalar(row[field.key])}</>
+}
+
 /** Normalize an org/UI language tag to a base language code (`es-MX` → `es`). */
 function baseLang(locale?: string): string {
     return (locale || 'en').toLowerCase().split('-')[0]
@@ -258,11 +362,13 @@ function MiniTable({
     locale,
     t,
     itemFields,
+    getImageUrl,
 }: {
     rows: Record<string, unknown>[]
     locale?: string
     t?: Translate
     itemFields?: ItemField[]
+    getImageUrl?: (path: string) => string
 }) {
     // Schema-driven path: a declared `item_fields` schema fixes the column
     // order + headers (already localized by the backend, used VERBATIM) and
@@ -292,7 +398,11 @@ function MiniTable({
                                     key={field.key}
                                     className="text-xs whitespace-nowrap"
                                 >
-                                    {renderItemFieldValue(field, row)}
+                                    <ItemFieldCell
+                                        field={field}
+                                        row={row}
+                                        getImageUrl={getImageUrl}
+                                    />
                                 </TableCell>
                             ))}
                         </TableRow>
@@ -421,6 +531,12 @@ export interface CollectionCellProps {
      * behaviour is unchanged.
      */
     itemFields?: ItemField[]
+    /**
+     * Resolves a stored image path to a displayable URL (same resolver the table
+     * columns use). Threaded to the ref-chip thumbnails so resolved line-item
+     * relations show a product photo / logo / avatar like the FK columns do.
+     */
+    getImageUrl?: (path: string) => string
     /**
      * Presentation mode.
      *   - `'badge'` (default): the compact count/preview badge that opens a
@@ -448,6 +564,7 @@ export function CollectionCell({
     locale,
     t,
     itemFields,
+    getImageUrl,
     variant = 'badge',
 }: CollectionCellProps) {
     const parsed = parseValue(value)
@@ -491,6 +608,7 @@ export function CollectionCell({
                         locale={locale}
                         t={t}
                         itemFields={itemFields}
+                        getImageUrl={getImageUrl}
                     />
                 )
             }
@@ -506,7 +624,7 @@ export function CollectionCell({
                           itemFields!
                               .map(
                                   (field) =>
-                                      `${field.label}: ${renderItemFieldValue(field, row)}`
+                                      `${field.label}: ${itemFieldText(field, row)}`
                               )
                               .join(', ')
                       )
@@ -528,6 +646,7 @@ export function CollectionCell({
                         locale={locale}
                         t={t}
                         itemFields={itemFields}
+                        getImageUrl={getImageUrl}
                     />
                 </PopoverShell>
             )

package/src/dialogs/dynamic-record.tsx

@@ -1182,6 +1182,7 @@ function StructuredViewValue({
     locale?: string
     t?: (key: string, options?: any) => string
 }) {
+    const getImageUrl = useContext(ImageUrlContext)
     const isEmpty =
         value === null ||
         value === undefined ||
@@ -1201,6 +1202,7 @@ function StructuredViewValue({
                 variant="inline"
                 locale={locale}
                 t={t}
+                getImageUrl={getImageUrl}
             />
         </div>
     )
@@ -1214,6 +1216,7 @@ export function EditField({ field, value, onChange, record }: {
     record?: any
 }) {
     const { t, i18n } = useTranslation()
+    const editFieldImageUrl = useContext(ImageUrlContext)
 
     // Jsonb line-items columns (e.g. Transfer.items) are action-built documents:
     // editing the array field-by-field is out of scope. Render them READ-ONLY
@@ -1229,6 +1232,7 @@ export function EditField({ field, value, onChange, record }: {
                         variant="inline"
                         locale={i18n.language}
                         t={t}
+                        getImageUrl={editFieldImageUrl}
                     />
                 </div>
                 <p className="text-[11px] text-muted-foreground">

package/src/dynamic-columns.tsx

@@ -1180,6 +1180,7 @@ export function makeDefaultGetDynamicColumns(
                                         locale={currentLanguage}
                                         t={t}
                                         itemFields={col.itemFields ?? col.item_fields}
+                                        getImageUrl={getImageUrl}
                                     />
                                 )
                             }