@asteby/metacore-runtime-react 14.0.0 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @asteby/metacore-runtime-react
 
+## 16.0.0
+
+### Minor Changes
+
+- 5f864d9: Make declarative dynamic-table option badges and relation chips feel alive.
+
+  Options/select/status badges that ship without an explicit `color` from the
+  backend now get a deterministic, cohesive color derived from the option value
+  (fallback label) instead of rendering as dead gray text. Same value always maps
+  to the same hue, and equal words share a color.
+  - `@asteby/metacore-ui/lib` adds `optionColor(key)` (curated 16-hue Tailwind-500
+    palette, FNV-1a hash, light/dark safe), plus `optionColorBadgeStyles`,
+    `relationChipStyles`, and the exported `OPTION_PALETTE`.
+  - `OptionBadge` uses the explicit `color` when present, otherwise derives one via
+    `optionColor`, and renders the option's lucide `icon` before the label.
+  - `RelationCell` (resolved FK chips for category/brand/supplier/…) now gets a
+    subtle deterministic color keyed on the related label — kept lighter than enum
+    badges (soft tint, no heavy fill) so the two remain distinguishable.
+
+  All colors come from hex-derived inline styles, so they render correctly
+  regardless of the host's tailwind safelist.
+
+### Patch Changes
+
+- Updated dependencies [5f864d9]
+  - @asteby/metacore-ui@2.4.0
+
+## 15.0.0
+
+### Minor Changes
+
+- ab41d75: Make declarative dynamic-table option badges and relation chips feel alive.
+
+  Options/select/status badges that ship without an explicit `color` from the
+  backend now get a deterministic, cohesive color derived from the option value
+  (fallback label) instead of rendering as dead gray text. Same value always maps
+  to the same hue, and equal words share a color.
+  - `@asteby/metacore-ui/lib` adds `optionColor(key)` (curated 16-hue Tailwind-500
+    palette, FNV-1a hash, light/dark safe), plus `optionColorBadgeStyles`,
+    `relationChipStyles`, and the exported `OPTION_PALETTE`.
+  - `OptionBadge` uses the explicit `color` when present, otherwise derives one via
+    `optionColor`, and renders the option's lucide `icon` before the label.
+  - `RelationCell` (resolved FK chips for category/brand/supplier/…) now gets a
+    subtle deterministic color keyed on the related label — kept lighter than enum
+    badges (soft tint, no heavy fill) so the two remain distinguishable.
+
+  All colors come from hex-derived inline styles, so they render correctly
+  regardless of the host's tailwind safelist.
+
+### Patch Changes
+
+- Updated dependencies [ab41d75]
+  - @asteby/metacore-ui@2.3.0
+
 ## 14.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":"AAyCA,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;AAgGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAmHD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAStE,CAAA;AA0DD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAgmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AA8CA,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;AAgGD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAwHD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAStE,CAAA;AAiED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAgmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -19,7 +19,7 @@ import * as icons from 'lucide-react';
 import { MoreHorizontal } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@asteby/metacore-ui';
 import { DataTableColumnHeader, FilterableColumnHeader, } from '@asteby/metacore-ui/data-table';
-import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib';
+import { generateBadgeStyles, getInitials, optionColor, relationChipStyles, } from '@asteby/metacore-ui/lib';
 import { Progress } from './dialogs/_primitives';
 import { OptionsContext } from './options-context';
 import { DynamicIcon } from './dynamic-icon';
@@ -169,7 +169,12 @@ const renderRelationBadges = (items, col) => {
 };
 const OptionBadge = ({ option }) => {
     const isDark = useIsDarkTheme();
-    const colorStyles = option.color ? generateBadgeStyles(option.color, { isDark }) : {};
+    // Explicit backend color wins; otherwise derive a stable, cohesive color
+    // from the option's value (fallback label) so "dead" gray badges come
+    // alive. Inline style (hex-derived) so it works regardless of the host's
+    // tailwind safelist — addon-arbitrary classes aren't in the host scan.
+    const colorSource = option.color || optionColor(option.value || option.label);
+    const colorStyles = generateBadgeStyles(colorSource, { isDark });
     return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" }), _jsx("span", { children: option.label })] }));
 };
 const BadgeWithEndpointOptions = ({ endpoint, value }) => {
@@ -218,10 +223,16 @@ export const resolveRelationLabel = (col, row) => {
  * `belongs_to` column (category, supplier, warehouse, …) without per-addon code.
  */
 const RelationCell = ({ col, row }) => {
+    const isDark = useIsDarkTheme();
     const display = resolveRelationLabel(col, row);
     if (!display)
         return _jsx(EmptyCell, {});
-    return (_jsx("span", { className: "inline-flex max-w-[220px] items-center truncate rounded-md bg-muted px-2 py-0.5 text-sm font-medium text-foreground/80", title: display, children: _jsx("span", { className: "truncate", children: display }) }));
+    // 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 (_jsx("span", { className: "inline-flex max-w-[220px] items-center truncate rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: display, children: _jsx("span", { className: "truncate", children: display }) }));
 };
 /**
  * Generic avatar-style cell: round/rounded photo (or initials fallback) +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "14.0.0",
+  "version": "16.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "date-fns": ">=3",
     "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^3.1.0",
-    "@asteby/metacore-ui": "^2.2.0"
+    "@asteby/metacore-ui": "^2.4.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -62,7 +62,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.1.0",
-    "@asteby/metacore-ui": "2.2.0"
+    "@asteby/metacore-ui": "2.4.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/option-color.test.ts

@@ -0,0 +1,61 @@
+// Determinism + spread coverage for the curated option-color palette that
+// makes option/relation badges "alive" instead of dead gray. These utilities
+// live in @asteby/metacore-ui/lib and are consumed by the OptionBadge and
+// RelationCell renderers in dynamic-columns.tsx.
+import { describe, it, expect } from 'vitest'
+import { optionColor, OPTION_PALETTE } from '@asteby/metacore-ui/lib'
+
+describe('optionColor', () => {
+    it('is deterministic — same input always yields the same color', () => {
+        const a = optionColor('storable')
+        const b = optionColor('storable')
+        expect(a).toBe(b)
+        // Stable across many repeats (no Math.random / time dependence).
+        for (let i = 0; i < 50; i++) {
+            expect(optionColor('in_progress')).toBe(optionColor('in_progress'))
+        }
+    })
+
+    it('normalizes case/whitespace so equal words collapse to one color', () => {
+        expect(optionColor('Active')).toBe(optionColor('active'))
+        expect(optionColor('  active  ')).toBe(optionColor('active'))
+    })
+
+    it('always returns a color from the curated palette', () => {
+        const keys = [
+            'storable', 'consumable', 'service', 'active', 'inactive', 'pending',
+            'frenos', 'llantas', 'suspension', 'aceite', 'filtros', 'baterias',
+            'uuid-1234', 'category', 'brand', 'supplier', 'warehouse', '',
+        ]
+        for (const key of keys) {
+            expect(OPTION_PALETTE).toContain(optionColor(key))
+        }
+    })
+
+    it('returns a 6-digit hex with no leading #', () => {
+        expect(optionColor('anything')).toMatch(/^[0-9a-f]{6}$/)
+    })
+
+    it('falls back to a stable palette color for empty/nullish input', () => {
+        expect(optionColor('')).toBe(OPTION_PALETTE[0])
+        // @ts-expect-error exercising the nullish guard
+        expect(optionColor(undefined)).toBe(OPTION_PALETTE[0])
+    })
+
+    it('spreads distinct inputs across the palette (not one color for all)', () => {
+        const inputs = Array.from({ length: 200 }, (_, i) => `option_${i}`)
+        const used = new Set(inputs.map(optionColor))
+        // With 16 hues and 200 distinct keys we expect broad coverage; require
+        // at least half the palette to be exercised so a degenerate hash that
+        // collapses everything is caught.
+        expect(used.size).toBeGreaterThanOrEqual(OPTION_PALETTE.length / 2)
+    })
+
+    it('different similar inputs do not all collide to one hue', () => {
+        const c1 = optionColor('red')
+        const c2 = optionColor('blue')
+        const c3 = optionColor('green')
+        const distinct = new Set([c1, c2, c3])
+        expect(distinct.size).toBeGreaterThan(1)
+    })
+})

package/src/dynamic-columns.tsx

@@ -35,7 +35,12 @@ import {
     FilterableColumnHeader,
     type ColumnFilterMeta,
 } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib'
+import {
+    generateBadgeStyles,
+    getInitials,
+    optionColor,
+    relationChipStyles,
+} from '@asteby/metacore-ui/lib'
 import { Progress } from './dialogs/_primitives'
 import { OptionsContext } from './options-context'
 import { DynamicIcon } from './dynamic-icon'
@@ -272,7 +277,12 @@ interface OptionBadgeProps {
 
 const OptionBadge: React.FC<OptionBadgeProps> = ({ option }) => {
     const isDark = useIsDarkTheme()
-    const colorStyles = option.color ? generateBadgeStyles(option.color, { isDark }) : {}
+    // Explicit backend color wins; otherwise derive a stable, cohesive color
+    // from the option's value (fallback label) so "dead" gray badges come
+    // alive. Inline style (hex-derived) so it works regardless of the host's
+    // tailwind safelist — addon-arbitrary classes aren't in the host scan.
+    const colorSource = option.color || optionColor(option.value || option.label)
+    const colorStyles = generateBadgeStyles(colorSource, { isDark })
     return (
         <Badge variant="outline" className="flex items-center gap-1 border-0" style={colorStyles}>
             {option.icon && <DynamicIcon name={option.icon} className="h-3.5 w-3.5" />}
@@ -329,11 +339,18 @@ export const resolveRelationLabel = (col: ColumnDefinition, row: any): string =>
  * `belongs_to` column (category, supplier, warehouse, …) without per-addon code.
  */
 const RelationCell: React.FC<{ col: ColumnDefinition; row: any }> = ({ col, row }) => {
+    const isDark = useIsDarkTheme()
     const display = resolveRelationLabel(col, row)
     if (!display) return <EmptyCell />
+    // 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 (
         <span
-            className="inline-flex max-w-[220px] items-center truncate rounded-md bg-muted px-2 py-0.5 text-sm font-medium text-foreground/80"
+            className="inline-flex max-w-[220px] items-center truncate rounded-md px-2 py-0.5 text-sm font-medium"
+            style={chipStyles}
             title={display}
         >
             <span className="truncate">{display}</span>