@asteby/metacore-runtime-react 26.0.0 → 27.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @asteby/metacore-runtime-react
 
+## 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.js

@@ -376,7 +376,7 @@ const RelationCell = ({ col, row, getImageUrl }) => {
     // 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 }))] }));
+    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", 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.0.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

@@ -518,7 +518,7 @@ const RelationCell: React.FC<{
                 // (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
 }