@asteby/metacore-runtime-react 33.1.1 → 34.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @asteby/metacore-runtime-react
 
+## 34.0.1
+
+### Patch Changes
+
+- 45b5f91: Fix relation/brand thumbnails (RelationCell) being cropped: switch from
+  `object-cover` to `object-contain` on a padded neutral background so
+  wide/rectangular logos (brand, supplier, category images) render in full
+  instead of clipped to a square.
+
+## 34.0.0
+
+### Patch Changes
+
+- Updated dependencies [5c51b7f]
+  - @asteby/metacore-ui@2.16.0
+
 ## 33.1.1
 
 ### Patch Changes

package/dist/display-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-value.d.ts","sourceRoot":"","sources":["../src/display-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB;;;GAGG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAmBxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAepD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAcA,CAAA;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB,CA8BA,CAAA"}
+{"version":3,"file":"display-value.d.ts","sourceRoot":"","sources":["../src/display-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB;;;GAGG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAmBxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAepD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAkBA,CAAA;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,CAAA;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB,CA8BA,CAAA"}

package/dist/display-value.js

@@ -58,7 +58,7 @@ export function statusColorFor(value) {
  * an addon-arbitrary Tailwind class never gets dropped by a consuming app's
  * class scan). Rendered inline alongside a label — never alone.
  */
-export const RelationThumbnail = ({ src, alt, getImageUrl, size = 18 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-md ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-md bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
+export const RelationThumbnail = ({ src, alt, getImageUrl, size = 20 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-md bg-muted/50 p-[3px] ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-contain" }), _jsx(AvatarFallback, { className: "rounded-md bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
 /**
  * Colored option badge — the canonical "pro" pill for a select/status/badge
  * value. Explicit backend `color` wins; otherwise a stable, cohesive color is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "33.1.1",
+  "version": "34.0.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "react-i18next": ">=13",
     "sonner": ">=1.7",
     "zustand": ">=5",
-    "@asteby/metacore-ui": "^2.15.0",
-    "@asteby/metacore-sdk": "^3.6.0"
+    "@asteby/metacore-sdk": "^3.6.0",
+    "@asteby/metacore-ui": "^2.16.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.6.0",
-    "@asteby/metacore-ui": "2.15.0"
+    "@asteby/metacore-ui": "2.16.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/display-value.tsx

@@ -76,15 +76,19 @@ export const RelationThumbnail: React.FC<{
     alt: string
     getImageUrl?: (path: string) => string
     size?: number
-}> = ({ src, alt, getImageUrl, size = 18 }) => (
+}> = ({ src, alt, getImageUrl, size = 20 }) => (
     <Avatar
-        className="shrink-0 rounded-md ring-1 ring-border/40"
+        className="shrink-0 rounded-md bg-muted/50 p-[3px] ring-1 ring-border/40"
         style={{ width: size, height: size }}
     >
+        {/* object-contain: brand logos are typically wide/rectangular, so
+            object-cover (fills the square, cropping the sides) was cutting
+            them off. contain lets the whole mark show, letterboxed by the
+            padded neutral background above instead of clipped. */}
         <AvatarImage
             src={getImageUrl ? getImageUrl(src) : src}
             alt={alt}
-            className="object-cover"
+            className="object-contain"
         />
         <AvatarFallback className="rounded-md bg-primary/10 text-[8px] font-bold text-primary">
             {getInitials(alt)}