@asteby/metacore-runtime-react 18.18.0 → 18.19.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @asteby/metacore-runtime-react
 
+## 18.19.0
+
+### Minor Changes
+
+- de0b4bb: Add a generic `CollectionCell` renderer for jsonb / array / object table-cell values.
+
+  Previously the `default:` branch of `defaultGetDynamicColumns` rendered such
+  values as raw `JSON.stringify(value)`, which was unreadable. Every jsonb column
+  now renders a compact, brand-neutral, dark-mode-friendly cell with no per-addon
+  config:
+  - **Array of objects** (e.g. line items): a count Badge (`2 ítems`) that opens a
+    Popover mini-table — columns are the prettified union of row keys, cells go
+    through a shared `formatScalar` (uuid/long strings truncated, booleans as
+    ✓/✗, nested shapes summarized).
+  - **Array of scalars**: first few joined inline with a `+N` overflow, full list
+    in the popover.
+  - **Plain object**: first few `key: value` pairs inline, all pairs in the popover.
+  - **null / empty**: muted `-`.
+  - JSON-string values are defensively parsed; unparseable strings are truncated.
+
+  Exports `CollectionCell`, `formatScalar`, `prettifyKey`, and `CollectionCellProps`.
+
 ## 18.18.0
 
 ### Minor Changes

package/dist/collection-cell.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/** snake_case / dotted / kebab key → Title Case (`product_id` → "Product ID"). */
+export declare function prettifyKey(key: string): string;
+/**
+ * Render a single scalar (or near-scalar) value for compact display.
+ * - uuid-like or very long (32+ char) strings → first 8 chars + "…"
+ * - numbers / booleans → rendered as-is (booleans as ✓ / ✗)
+ * - nested object → "{…}", nested array → "[N]"
+ * - null / undefined / "" → "-"
+ */
+export declare function formatScalar(value: unknown): string;
+export interface CollectionCellProps {
+    value: unknown;
+    /** Max items previewed inline for scalar arrays. */
+    maxInline?: number;
+}
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly. Never throws on unexpected shapes.
+ */
+export declare function CollectionCell({ value, maxInline }: CollectionCellProps): React.JSX.Element;
+//# sourceMappingURL=collection-cell.d.ts.map

package/dist/collection-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-cell.d.ts","sourceRoot":"","sources":["../src/collection-cell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,kFAAkF;AAClF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAyID,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAa,EAAE,EAAE,mBAAmB,qBA6E3E"}

package/dist/collection-cell.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List } from 'lucide-react';
+import { Badge, Popover, PopoverContent, PopoverTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn, } from '@asteby/metacore-ui';
+import { humanizeToken } from './dynamic-columns-helpers';
+const UUID_LIKE_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+/** snake_case / dotted / kebab key → Title Case (`product_id` → "Product ID"). */
+export function prettifyKey(key) {
+    const pretty = humanizeToken(key);
+    return pretty || key;
+}
+/**
+ * Render a single scalar (or near-scalar) value for compact display.
+ * - uuid-like or very long (32+ char) strings → first 8 chars + "…"
+ * - numbers / booleans → rendered as-is (booleans as ✓ / ✗)
+ * - nested object → "{…}", nested array → "[N]"
+ * - null / undefined / "" → "-"
+ */
+export function formatScalar(value) {
+    if (value === null || value === undefined)
+        return '-';
+    if (typeof value === 'boolean')
+        return value ? '✓' : '✗';
+    if (typeof value === 'number')
+        return String(value);
+    if (Array.isArray(value))
+        return `[${value.length}]`;
+    if (typeof value === 'object')
+        return '{…}';
+    const str = String(value);
+    if (str === '')
+        return '-';
+    if (UUID_LIKE_RE.test(str) || str.length >= 32) {
+        return `${str.slice(0, 8)}…`;
+    }
+    return str;
+}
+const isPlainObject = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
+/**
+ * Defensively coerce a raw cell value into something renderable. Strings that
+ * look like JSON (`[`/`{` start) are parsed; everything else is passed through.
+ */
+function parseValue(value) {
+    if (typeof value !== 'string')
+        return value;
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+        (trimmed.startsWith('{') && trimmed.endsWith('}'))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return value;
+        }
+    }
+    return value;
+}
+/** Stable union of keys across an array of row objects, first-seen order. */
+function unionKeys(rows) {
+    const seen = [];
+    const set = new Set();
+    for (const row of rows) {
+        for (const key of Object.keys(row)) {
+            if (!set.has(key)) {
+                set.add(key);
+                seen.push(key);
+            }
+        }
+    }
+    return seen;
+}
+const PANEL_CLASS = 'w-auto max-w-[480px] max-h-[320px] overflow-auto p-0';
+function MiniTable({ rows }) {
+    const keys = unionKeys(rows);
+    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) }, 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))) })] }));
+}
+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))) }));
+}
+function PairList({ entries }) {
+    return (_jsx("ul", { className: "p-3 space-y-1", children: entries.map(([key, v]) => (_jsxs("li", { className: "text-xs", children: [_jsxs("span", { className: "text-muted-foreground", children: [prettifyKey(key), ":"] }), ' ', _jsx("span", { className: "text-foreground", children: formatScalar(v) })] }, key))) }));
+}
+/** Compact badge trigger that opens a popover panel. */
+function PopoverShell({ label, title, children, icon = true, }) {
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Badge, { variant: "secondary", className: "cursor-pointer gap-1 font-normal", title: title, children: [icon ? _jsx(List, { className: "h-3 w-3" }) : null, label] }) }), _jsx(PopoverContent, { align: "start", className: cn(PANEL_CLASS), children: children })] }));
+}
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly. Never throws on unexpected shapes.
+ */
+export function CollectionCell({ value, maxInline = 3 }) {
+    const parsed = parseValue(value);
+    // Empty-ish → muted dash.
+    if (parsed === null ||
+        parsed === undefined ||
+        parsed === '' ||
+        (Array.isArray(parsed) && parsed.length === 0) ||
+        (isPlainObject(parsed) && Object.keys(parsed).length === 0)) {
+        return _jsx("span", { className: "text-muted-foreground text-xs", children: "-" });
+    }
+    // Non-collection scalar fell through here (e.g. unparseable string): truncate.
+    if (!Array.isArray(parsed) && !isPlainObject(parsed)) {
+        const str = String(parsed);
+        return (_jsx("span", { className: "text-muted-foreground text-xs truncate block max-w-[300px]", title: str, children: str.length > 80 ? `${str.slice(0, 80)}…` : str }));
+    }
+    // ARRAY ------------------------------------------------------------------
+    if (Array.isArray(parsed)) {
+        const allObjects = parsed.every((item) => isPlainObject(item));
+        if (allObjects) {
+            const rows = parsed;
+            const count = rows.length;
+            const label = count === 1 ? '1 ítem' : `${count} ítems`;
+            const title = rows
+                .map((row) => Object.entries(row)
+                .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+                .join(', '))
+                .join(' | ');
+            return (_jsx(PopoverShell, { label: label, title: title, children: _jsx(MiniTable, { rows: rows }) }));
+        }
+        // Array of scalars (or mixed): preview first N joined, "+N" overflow.
+        const preview = parsed.slice(0, maxInline).map(formatScalar).join(', ');
+        const overflow = parsed.length - maxInline;
+        const label = overflow > 0 ? `${preview} +${overflow}` : preview;
+        const title = parsed.map(formatScalar).join(', ');
+        return (_jsx(PopoverShell, { label: label, title: title, icon: false, children: _jsx(ScalarList, { values: parsed }) }));
+    }
+    // PLAIN OBJECT -----------------------------------------------------------
+    const entries = Object.entries(parsed);
+    const inline = entries
+        .slice(0, maxInline)
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ');
+    const overflow = entries.length - maxInline;
+    const label = overflow > 0 ? `${inline} +${overflow}` : inline;
+    const title = entries
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ');
+    return (_jsx(PopoverShell, { label: label, title: title, icon: false, children: _jsx(PairList, { entries: entries }) }));
+}

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;AAgC9C,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;AA8DD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;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;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA2nBnB;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;AAiC9C,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;AA8DD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;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;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAunBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -24,6 +24,7 @@ import { Progress } from './dialogs/_primitives';
 import { humanizeToken } from './dynamic-columns-helpers';
 import { OptionsContext } from './options-context';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
+import { CollectionCell } from './collection-cell';
 import { isNilUuid, normalizeNilUuid } from './nil-uuid';
 import { isColumnVisibleInTable } from './column-visibility';
 const defaultGetImageUrl = (path) => path;
@@ -735,7 +736,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         }
                         default: {
                             if (typeof value === 'object' && value !== null) {
-                                return (_jsx("span", { className: "text-muted-foreground text-xs", children: JSON.stringify(value) }));
+                                return _jsx(CollectionCell, { value: value });
                             }
                             if (col.key === 'description' ||
                                 col.key === 'features' ||

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './dynamic-icon';
 export type { ColumnFilterConfig, FilterOption as DynamicColumnFilterOption, GetDynamicColumns, DynamicIconComponent, } from './dynamic-columns-shim';
 export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, type DynamicColumnsHelpers, } from './dynamic-columns';
 export { humanizeToken } from './dynamic-columns-helpers';
+export { CollectionCell, formatScalar, prettifyKey, type CollectionCellProps, } from './collection-cell';
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
 export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';
 export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } from './dialogs/dynamic-record';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -26,6 +26,7 @@ export { useHotSwapReload, applyHotSwapReload, withVersionParam, clearFederation
 export * from './dynamic-icon';
 export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, } from './dynamic-columns';
 export { humanizeToken } from './dynamic-columns-helpers';
+export { CollectionCell, formatScalar, prettifyKey, } from './collection-cell';
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
 export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';
 export { CreateRecordDialog } from './dialogs/create-record-dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.18.0",
+  "version": "18.19.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/collection-cell.test.tsx

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+//
+// CollectionCell contract: the generic jsonb / array / object cell renderer.
+//   - array of objects → count badge + popover mini-table (title carries rows)
+//   - array of scalars → inline preview + "+N" overflow
+//   - plain object → inline key: value pairs
+//   - null / empty → "-"
+//   - JSON-string value is defensively parsed
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+
+import {
+    CollectionCell,
+    formatScalar,
+    prettifyKey,
+} from '../collection-cell'
+
+describe('formatScalar', () => {
+    it('truncates uuid-like / long strings to first 8 chars + ellipsis', () => {
+        expect(formatScalar('550e8400-e29b-41d4-a716-446655440000')).toBe(
+            '550e8400…'
+        )
+        expect(formatScalar('x'.repeat(40))).toBe(`${'x'.repeat(8)}…`)
+    })
+
+    it('passes numbers through and renders booleans as check/cross', () => {
+        expect(formatScalar(42)).toBe('42')
+        expect(formatScalar(true)).toBe('✓')
+        expect(formatScalar(false)).toBe('✗')
+    })
+
+    it('summarizes nested object / array and empties as dash', () => {
+        expect(formatScalar({ a: 1 })).toBe('{…}')
+        expect(formatScalar([1, 2, 3])).toBe('[3]')
+        expect(formatScalar(null)).toBe('-')
+        expect(formatScalar('')).toBe('-')
+    })
+})
+
+describe('prettifyKey', () => {
+    it('snake_case → Title Case with acronyms', () => {
+        expect(prettifyKey('product_id')).toBe('Product ID')
+        expect(prettifyKey('quantity')).toBe('Quantity')
+    })
+})
+
+describe('CollectionCell', () => {
+    it('renders a count badge for an array of objects', () => {
+        render(
+            <CollectionCell
+                value={[
+                    { product_id: 'abc', quantity: 2 },
+                    { product_id: 'def', quantity: 5 },
+                ]}
+            />
+        )
+        // Count badge (plural).
+        expect(screen.getByText('2 ítems')).toBeTruthy()
+        // The trigger's title carries the formatted rows for the no-JS fallback.
+        const badge = screen.getByText('2 ítems').closest('[title]')
+        expect(badge).toBeTruthy()
+        const title = badge!.getAttribute('title') ?? ''
+        expect(title).toContain('Quantity: 2')
+        expect(title).toContain('Quantity: 5')
+        expect(title).toContain('Product ID')
+    })
+
+    it('renders singular label for a single-item array', () => {
+        render(<CollectionCell value={[{ sku: 'A1' }]} />)
+        expect(screen.getByText('1 ítem')).toBeTruthy()
+    })
+
+    it('previews the first scalars with overflow for a scalar array', () => {
+        render(<CollectionCell value={['a', 'b', 'c', 'd', 'e']} />)
+        expect(screen.getByText('a, b, c +2')).toBeTruthy()
+    })
+
+    it('renders inline key: value pairs for a plain object', () => {
+        render(<CollectionCell value={{ width: 10, height: 20 }} />)
+        expect(
+            screen.getByText(/Width: 10, Height: 20/)
+        ).toBeTruthy()
+    })
+
+    it('renders a dash for null / empty values', () => {
+        const { container } = render(<CollectionCell value={null} />)
+        expect(container.textContent).toBe('-')
+    })
+
+    it('renders a dash for an empty array', () => {
+        const { container } = render(<CollectionCell value={[]} />)
+        expect(container.textContent).toBe('-')
+    })
+
+    it('parses a JSON-string value into a collection', () => {
+        render(
+            <CollectionCell
+                value={'[{"product_id":"abc","quantity":1}]'}
+            />
+        )
+        expect(screen.getByText('1 ítem')).toBeTruthy()
+        const badge = screen.getByText('1 ítem').closest('[title]')
+        expect(badge!.getAttribute('title')).toContain('Quantity: 1')
+    })
+
+    it('truncates an unparseable string instead of crashing', () => {
+        const { container } = render(
+            <CollectionCell value={'{not valid json'} />
+        )
+        expect(container.textContent).toContain('{not valid json')
+    })
+})

package/src/collection-cell.tsx

@@ -0,0 +1,277 @@
+// Generic, brand-neutral table-cell renderer for jsonb / array / object column
+// values. Kernel-derived dynamic tables surface raw jsonb columns (line items,
+// nested config blobs, scalar arrays) with no per-column metadata; without this
+// they rendered as raw `JSON.stringify(value)` which is unreadable. This renders
+// a compact trigger (count badge / inline pairs) plus a Popover with a clean
+// mini-table — no per-addon config required, safe on any shape.
+
+import * as React from 'react'
+import { List } from 'lucide-react'
+import {
+    Badge,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+    cn,
+} from '@asteby/metacore-ui'
+import { humanizeToken } from './dynamic-columns-helpers'
+
+const UUID_LIKE_RE =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+/** snake_case / dotted / kebab key → Title Case (`product_id` → "Product ID"). */
+export function prettifyKey(key: string): string {
+    const pretty = humanizeToken(key)
+    return pretty || key
+}
+
+/**
+ * Render a single scalar (or near-scalar) value for compact display.
+ * - uuid-like or very long (32+ char) strings → first 8 chars + "…"
+ * - numbers / booleans → rendered as-is (booleans as ✓ / ✗)
+ * - nested object → "{…}", nested array → "[N]"
+ * - null / undefined / "" → "-"
+ */
+export function formatScalar(value: unknown): string {
+    if (value === null || value === undefined) return '-'
+    if (typeof value === 'boolean') return value ? '✓' : '✗'
+    if (typeof value === 'number') return String(value)
+    if (Array.isArray(value)) return `[${value.length}]`
+    if (typeof value === 'object') return '{…}'
+    const str = String(value)
+    if (str === '') return '-'
+    if (UUID_LIKE_RE.test(str) || str.length >= 32) {
+        return `${str.slice(0, 8)}…`
+    }
+    return str
+}
+
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+    typeof v === 'object' && v !== null && !Array.isArray(v)
+
+/**
+ * Defensively coerce a raw cell value into something renderable. Strings that
+ * look like JSON (`[`/`{` start) are parsed; everything else is passed through.
+ */
+function parseValue(value: unknown): unknown {
+    if (typeof value !== 'string') return value
+    const trimmed = value.trim()
+    if (
+        (trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+        (trimmed.startsWith('{') && trimmed.endsWith('}'))
+    ) {
+        try {
+            return JSON.parse(trimmed)
+        } catch {
+            return value
+        }
+    }
+    return value
+}
+
+/** Stable union of keys across an array of row objects, first-seen order. */
+function unionKeys(rows: Record<string, unknown>[]): string[] {
+    const seen: string[] = []
+    const set = new Set<string>()
+    for (const row of rows) {
+        for (const key of Object.keys(row)) {
+            if (!set.has(key)) {
+                set.add(key)
+                seen.push(key)
+            }
+        }
+    }
+    return seen
+}
+
+const PANEL_CLASS = 'w-auto max-w-[480px] max-h-[320px] overflow-auto p-0'
+
+function MiniTable({ rows }: { rows: Record<string, unknown>[] }) {
+    const keys = unionKeys(rows)
+    if (keys.length === 0) {
+        return <div className="p-3 text-xs text-muted-foreground">-</div>
+    }
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    {keys.map((key) => (
+                        <TableHead key={key} className="text-xs whitespace-nowrap">
+                            {prettifyKey(key)}
+                        </TableHead>
+                    ))}
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {rows.map((row, i) => (
+                    <TableRow key={i}>
+                        {keys.map((key) => (
+                            <TableCell
+                                key={key}
+                                className="text-xs whitespace-nowrap"
+                            >
+                                {formatScalar(row[key])}
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
+}
+
+function ScalarList({ values }: { values: unknown[] }) {
+    return (
+        <ul className="p-3 space-y-1">
+            {values.map((v, i) => (
+                <li key={i} className="text-xs text-foreground">
+                    {formatScalar(v)}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+function PairList({ entries }: { entries: [string, unknown][] }) {
+    return (
+        <ul className="p-3 space-y-1">
+            {entries.map(([key, v]) => (
+                <li key={key} className="text-xs">
+                    <span className="text-muted-foreground">
+                        {prettifyKey(key)}:
+                    </span>{' '}
+                    <span className="text-foreground">{formatScalar(v)}</span>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+/** Compact badge trigger that opens a popover panel. */
+function PopoverShell({
+    label,
+    title,
+    children,
+    icon = true,
+}: {
+    label: string
+    title: string
+    children: React.ReactNode
+    icon?: boolean
+}) {
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Badge
+                    variant="secondary"
+                    className="cursor-pointer gap-1 font-normal"
+                    title={title}
+                >
+                    {icon ? <List className="h-3 w-3" /> : null}
+                    {label}
+                </Badge>
+            </PopoverTrigger>
+            <PopoverContent
+                align="start"
+                className={cn(PANEL_CLASS)}
+            >
+                {children}
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export interface CollectionCellProps {
+    value: unknown
+    /** Max items previewed inline for scalar arrays. */
+    maxInline?: number
+}
+
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly. Never throws on unexpected shapes.
+ */
+export function CollectionCell({ value, maxInline = 3 }: CollectionCellProps) {
+    const parsed = parseValue(value)
+
+    // Empty-ish → muted dash.
+    if (
+        parsed === null ||
+        parsed === undefined ||
+        parsed === '' ||
+        (Array.isArray(parsed) && parsed.length === 0) ||
+        (isPlainObject(parsed) && Object.keys(parsed).length === 0)
+    ) {
+        return <span className="text-muted-foreground text-xs">-</span>
+    }
+
+    // Non-collection scalar fell through here (e.g. unparseable string): truncate.
+    if (!Array.isArray(parsed) && !isPlainObject(parsed)) {
+        const str = String(parsed)
+        return (
+            <span
+                className="text-muted-foreground text-xs truncate block max-w-[300px]"
+                title={str}
+            >
+                {str.length > 80 ? `${str.slice(0, 80)}…` : str}
+            </span>
+        )
+    }
+
+    // ARRAY ------------------------------------------------------------------
+    if (Array.isArray(parsed)) {
+        const allObjects = parsed.every((item) => isPlainObject(item))
+        if (allObjects) {
+            const rows = parsed as Record<string, unknown>[]
+            const count = rows.length
+            const label = count === 1 ? '1 ítem' : `${count} ítems`
+            const title = rows
+                .map((row) =>
+                    Object.entries(row)
+                        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+                        .join(', ')
+                )
+                .join(' | ')
+            return (
+                <PopoverShell label={label} title={title}>
+                    <MiniTable rows={rows} />
+                </PopoverShell>
+            )
+        }
+
+        // Array of scalars (or mixed): preview first N joined, "+N" overflow.
+        const preview = parsed.slice(0, maxInline).map(formatScalar).join(', ')
+        const overflow = parsed.length - maxInline
+        const label =
+            overflow > 0 ? `${preview} +${overflow}` : preview
+        const title = parsed.map(formatScalar).join(', ')
+        return (
+            <PopoverShell label={label} title={title} icon={false}>
+                <ScalarList values={parsed} />
+            </PopoverShell>
+        )
+    }
+
+    // PLAIN OBJECT -----------------------------------------------------------
+    const entries = Object.entries(parsed)
+    const inline = entries
+        .slice(0, maxInline)
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ')
+    const overflow = entries.length - maxInline
+    const label = overflow > 0 ? `${inline} +${overflow}` : inline
+    const title = entries
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ')
+    return (
+        <PopoverShell label={label} title={title} icon={false}>
+            <PairList entries={entries} />
+        </PopoverShell>
+    )
+}

package/src/dynamic-columns.tsx

@@ -45,6 +45,7 @@ import { Progress } from './dialogs/_primitives'
 import { humanizeToken } from './dynamic-columns-helpers'
 import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
+import { CollectionCell } from './collection-cell'
 import { isNilUuid, normalizeNilUuid } from './nil-uuid'
 import type { TableMetadata, ColumnDefinition } from './types'
 import { isColumnVisibleInTable } from './column-visibility'
@@ -1173,11 +1174,7 @@ export function makeDefaultGetDynamicColumns(
 
                         default: {
                             if (typeof value === 'object' && value !== null) {
-                                return (
-                                    <span className="text-muted-foreground text-xs">
-                                        {JSON.stringify(value)}
-                                    </span>
-                                )
+                                return <CollectionCell value={value} />
                             }
                             if (
                                 col.key === 'description' ||

package/src/index.ts

@@ -101,6 +101,12 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
+export {
+    CollectionCell,
+    formatScalar,
+    prettifyKey,
+    type CollectionCellProps,
+} from './collection-cell'
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid'
 export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record'
 export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } from './dialogs/dynamic-record'