@asteby/metacore-runtime-react 18.24.0 → 18.25.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @asteby/metacore-runtime-react
 
+## 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/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.25.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -34,8 +34,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.5.2"
+    "@asteby/metacore-ui": "^2.5.2",
+    "@asteby/metacore-sdk": "^3.2.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {

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>