@asteby/metacore-runtime-react 26.0.0 → 27.1.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @asteby/metacore-runtime-react
 
+## 27.1.0
+
+### Minor Changes
+
+- 056e231: La celda de relación en tablas dinámicas queda PLANA: se elimina la cápsula
+  redondeada con tinte por label alrededor de [avatar + nombre + subtítulo]. Una
+  referencia es dato, no estado — la pastilla hacía que un listado de productos o
+  almacenes se lea como una pared de badges. Identifica al registro el thumb
+  cuadrado-redondeado (imagen del registro, o inicial neutra como fallback) junto
+  a texto plano. Los badges de enum/estado conservan su pastilla de color.
+
+## 27.0.0
+
+### Minor Changes
+
+- 9bd4d4e: Relation avatars render monochrome instead of one color per row.
+
+  `InitialsAvatar` gains a `tone` prop. `auto` (the default, unchanged) keeps the
+  per-name palette hash, which is meaningful for a small stable value set such as
+  a category or a status. The three relation surfaces — the dynamic-table relation
+  cell, the select options and the read-only detail dialog — now pass `neutral`,
+  which paints every imageless avatar the same muted surface. For open-ended
+  references like products or warehouses the derived color carried no meaning and
+  a listing rendered as a rainbow. Records that have an image are unaffected.
+
+### Patch Changes
+
+- Updated dependencies [9bd4d4e]
+  - @asteby/metacore-ui@2.12.0
+
 ## 26.0.0
 
 ### Minor Changes

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;AAwC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;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;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AAoJD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqmBnB;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;AAwC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;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;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AA+ID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -365,18 +365,18 @@ export const resolveRelationSubtitle = (col, row) => {
  * every `belongs_to` column (category, supplier, brand, …) without per-addon code.
  */
 const RelationCell = ({ col, row, getImageUrl }) => {
-    const isDark = useIsDarkTheme();
     const display = resolveRelationLabel(col, row);
     if (!display)
         return _jsx(EmptyCell, {});
     const image = resolveRelationImage(col, row);
     const subtitle = resolveRelationSubtitle(col, row);
-    // Deterministic, SUBTLE color keyed on the resolved label — lighter than
-    // enum badges (soft tint, no heavy fill) so category/brand chips read as
-    // alive yet stay visually distinct from option/status badges. Inline style
-    // (hex-derived) bypasses the host tailwind safelist.
-    const chipStyles = relationChipStyles(display, { isDark });
-    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: subtitle ? `${display} · ${subtitle}` : display, children: [image ? (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: subtitle ? 24 : 18 })) : (_jsx(InitialsAvatar, { name: display, size: subtitle ? 24 : 18, rounded: "sm" })), subtitle ? (_jsxs("span", { className: "flex flex-col leading-tight min-w-0", children: [_jsx("span", { className: "truncate", children: display }), _jsx("span", { className: "truncate text-[0.7rem] opacity-70", children: subtitle })] })) : (_jsx("span", { className: "truncate", children: display }))] }));
+    // FLAT reference cell: no tinted capsule around the pair. A reference is
+    // data, not a status — the pill treatment (and its per-label tint) made a
+    // products/warehouses listing read as a wall of badges. What identifies the
+    // record is the ROUNDED-SQUARE thumb (the record's image, or the neutral
+    // initials fallback) next to plain text; enum/status badges keep their
+    // colored pill so the two vocabularies stay distinct.
+    return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 text-sm font-medium", title: subtitle ? `${display} · ${subtitle}` : display, children: [image ? (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: subtitle ? 24 : 18 })) : (_jsx(InitialsAvatar, { name: display, size: subtitle ? 24 : 18, rounded: "sm", tone: "neutral" })), subtitle ? (_jsxs("span", { className: "flex flex-col leading-tight min-w-0", children: [_jsx("span", { className: "truncate", children: display }), _jsx("span", { className: "truncate text-[0.7rem] opacity-70", children: subtitle })] })) : (_jsx("span", { className: "truncate", children: display }))] }));
 };
 /**
  * Renders a SAP-style polymorphic source-document reference as a navigable

package/dist/dynamic-select-field.js

@@ -47,7 +47,7 @@ export const DEFAULT_DEPENDS_HINT = 'Selecciona primero el campo del que depende
 export function OptionThumb({ image, name, size = 20, }) {
     const box = { width: size, height: size };
     if (!image) {
-        return _jsx(InitialsAvatar, { name: name, size: size, rounded: "sm" });
+        return _jsx(InitialsAvatar, { name: name, size: size, rounded: "sm", tone: "neutral" });
     }
     return (_jsx("img", { src: image, alt: "", "aria-hidden": true, loading: "lazy", className: "shrink-0 rounded-sm object-cover", style: box, 
         // A broken image url shouldn't leave a torn-icon glyph; collapse to
@@ -76,7 +76,7 @@ export function OptionLead({ option, size = 20, }) {
     // (shared InitialsAvatar) so it stays visually aligned with the sibling
     // options that DO carry a thumbnail, rather than a blank gap.
     if (option.label)
-        return _jsx(InitialsAvatar, { name: option.label, size: size, rounded: "sm" });
+        return _jsx(InitialsAvatar, { name: option.label, size: size, rounded: "sm", tone: "neutral" });
     return null;
 }
 /** True when any option (or the selected one) carries a renderable visual. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "26.0.0",
+  "version": "27.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.3.0",
-    "@asteby/metacore-ui": "^2.11.0"
+    "@asteby/metacore-ui": "^2.12.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.3.0",
-    "@asteby/metacore-ui": "2.11.0"
+    "@asteby/metacore-ui": "2.12.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-columns.tsx

@@ -495,30 +495,25 @@ const RelationCell: React.FC<{
     row: any
     getImageUrl?: (path: string) => string
 }> = ({ col, row, getImageUrl }) => {
-    const isDark = useIsDarkTheme()
     const display = resolveRelationLabel(col, row)
     if (!display) return <EmptyCell />
     const image = resolveRelationImage(col, row)
     const subtitle = resolveRelationSubtitle(col, row)
-    // Deterministic, SUBTLE color keyed on the resolved label — lighter than
-    // enum badges (soft tint, no heavy fill) so category/brand chips read as
-    // alive yet stay visually distinct from option/status badges. Inline style
-    // (hex-derived) bypasses the host tailwind safelist.
-    const chipStyles = relationChipStyles(display, { isDark })
+    // FLAT reference cell: no tinted capsule around the pair. A reference is
+    // data, not a status — the pill treatment (and its per-label tint) made a
+    // products/warehouses listing read as a wall of badges. What identifies the
+    // record is the ROUNDED-SQUARE thumb (the record's image, or the neutral
+    // initials fallback) next to plain text; enum/status badges keep their
+    // colored pill so the two vocabularies stay distinct.
     return (
         <span
-            className="inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium"
-            style={chipStyles}
+            className="inline-flex max-w-[220px] items-center gap-1.5 text-sm font-medium"
             title={subtitle ? `${display} · ${subtitle}` : display}
         >
             {image ? (
                 <RelationThumbnail src={image} alt={display} getImageUrl={getImageUrl} size={subtitle ? 24 : 18} />
             ) : (
-                // No image on the resolved sibling: a deterministic initials avatar
-                // (shared InitialsAvatar) keyed on the label, so the "producto"-style
-                // cross-addon relation reads as a colored badge instead of text-only —
-                // matching the picker and detail surfaces.
-                <InitialsAvatar name={display} size={subtitle ? 24 : 18} rounded="sm" />
+                <InitialsAvatar name={display} size={subtitle ? 24 : 18} rounded="sm" tone="neutral" />
             )}
             {subtitle ? (
                 <span className="flex flex-col leading-tight min-w-0">

package/src/dynamic-select-field.tsx

@@ -69,7 +69,7 @@ export function OptionThumb({
 }) {
     const box = { width: size, height: size }
     if (!image) {
-        return <InitialsAvatar name={name} size={size} rounded="sm" />
+        return <InitialsAvatar name={name} size={size} rounded="sm" tone="neutral" />
     }
     return (
         <img
@@ -125,7 +125,7 @@ export function OptionLead({
     // No image/icon/color: an imageless reference option. Show its initials
     // (shared InitialsAvatar) so it stays visually aligned with the sibling
     // options that DO carry a thumbnail, rather than a blank gap.
-    if (option.label) return <InitialsAvatar name={option.label} size={size} rounded="sm" />
+    if (option.label) return <InitialsAvatar name={option.label} size={size} rounded="sm" tone="neutral" />
     return null
 }