@asteby/metacore-runtime-react 18.18.0 → 18.20.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @asteby/metacore-runtime-react
 
+## 18.20.0
+
+### Minor Changes
+
+- 6ec7baf: CollectionCell is now locale-aware: jsonb/array popover headers and the item
+  count noun render in the org's language. Resolution per key: host `t(rawKey)`
+  override → built-in es/en dictionary of common data/commerce keys (product_id,
+  quantity, price, total, name, sku, …) → snake→Title prettify fallback. Count
+  noun localizes (es: ítem/ítems). Locale + translator are threaded from the
+  dynamic columns factory; defaults to English when absent.
+
+## 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,39 @@
+import * as React from 'react';
+/** Host i18n translator (react-i18next `t`), as threaded into the columns factory. */
+export type Translate = (key: string, options?: any) => string;
+/**
+ * Localized key label for a popover column header. Resolution order:
+ *   (a) host i18n `t(rawKey)` if it resolves to something ≠ rawKey;
+ *   (b) the built-in generic es/en data/commerce dictionary;
+ *   (c) snake_case → Title Case prettify (`product_id` → "Product ID").
+ * `locale` defaults to 'en' when absent.
+ */
+export declare function prettifyKey(key: string, locale?: string, t?: Translate): string;
+/**
+ * Localized, pluralized count noun. Prefers the host i18n `t` (react-i18next
+ * count plural via `defaultValue`); otherwise the built-in es/en noun map.
+ */
+export declare function countLabel(count: number, locale?: string, t?: Translate): 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;
+    /** Org/UI language tag (e.g. `es`, `en-US`). Defaults to `'en'`. */
+    locale?: string;
+    /** Host i18n translator; takes precedence over the built-in dictionary. */
+    t?: Translate;
+}
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly, locale-aware. Never throws on unexpected shapes.
+ */
+export declare function CollectionCell({ value, maxInline, locale, t, }: 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,sFAAsF;AACtF,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAA;AAiE9D;;;;;;GAMG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAWR;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,EACf,CAAC,CAAC,EAAE,SAAS,GACd,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYnD;AAyJD,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,OAAO,CAAA;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,CAAC,CAAC,EAAE,SAAS,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAa,EACb,MAAM,EACN,CAAC,GACJ,EAAE,mBAAmB,qBAgFrB"}

package/dist/collection-cell.js

@@ -0,0 +1,236 @@
+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;
+/** Normalize an org/UI language tag to a base language code (`es-MX` → `es`). */
+function baseLang(locale) {
+    return (locale || 'en').toLowerCase().split('-')[0];
+}
+// Built-in generic data/commerce vocabulary. Localizes the common jsonb keys
+// (line-item rows, config blobs) to the org language out of the box. This is
+// intentionally GENERIC — no domain-specific narrative — and a host i18n bundle
+// can override any key via the `t` resolver (which takes precedence). Keys not
+// found here fall back to snake→Title prettify, so unknown shapes still read.
+const KEY_DICTIONARY = {
+    es: {
+        product_id: 'Producto',
+        product: 'Producto',
+        quantity: 'Cantidad',
+        qty: 'Cantidad',
+        unit_cost: 'Costo unitario',
+        cost: 'Costo',
+        price: 'Precio',
+        total: 'Total',
+        subtotal: 'Subtotal',
+        amount: 'Importe',
+        name: 'Nombre',
+        sku: 'SKU',
+        code: 'Código',
+        date: 'Fecha',
+        notes: 'Notas',
+        reason: 'Motivo',
+        delta: 'Variación',
+        warehouse: 'Almacén',
+        description: 'Descripción',
+        id: 'ID',
+    },
+    en: {
+        product_id: 'Product',
+        product: 'Product',
+        quantity: 'Quantity',
+        qty: 'Quantity',
+        unit_cost: 'Unit Cost',
+        cost: 'Cost',
+        price: 'Price',
+        total: 'Total',
+        subtotal: 'Subtotal',
+        amount: 'Amount',
+        name: 'Name',
+        sku: 'SKU',
+        code: 'Code',
+        date: 'Date',
+        notes: 'Notes',
+        reason: 'Reason',
+        delta: 'Delta',
+        warehouse: 'Warehouse',
+        description: 'Description',
+        id: 'ID',
+    },
+};
+/** Localized count noun for the array-of-objects badge (`1 ítem` / `2 ítems`). */
+const ITEM_NOUN = {
+    es: { one: 'ítem', other: 'ítems' },
+    en: { one: 'item', other: 'items' },
+};
+/**
+ * Localized key label for a popover column header. Resolution order:
+ *   (a) host i18n `t(rawKey)` if it resolves to something ≠ rawKey;
+ *   (b) the built-in generic es/en data/commerce dictionary;
+ *   (c) snake_case → Title Case prettify (`product_id` → "Product ID").
+ * `locale` defaults to 'en' when absent.
+ */
+export function prettifyKey(key, locale, t) {
+    if (t) {
+        const translated = t(key);
+        if (translated && translated !== key)
+            return translated;
+    }
+    const lang = baseLang(locale);
+    const dict = KEY_DICTIONARY[lang] ?? KEY_DICTIONARY.en;
+    const hit = dict[key.toLowerCase()];
+    if (hit)
+        return hit;
+    const pretty = humanizeToken(key);
+    return pretty || key;
+}
+/**
+ * Localized, pluralized count noun. Prefers the host i18n `t` (react-i18next
+ * count plural via `defaultValue`); otherwise the built-in es/en noun map.
+ */
+export function countLabel(count, locale, t) {
+    const lang = baseLang(locale);
+    const noun = ITEM_NOUN[lang] ?? ITEM_NOUN.en;
+    const fallback = `${count} ${count === 1 ? noun.one : noun.other}`;
+    if (t) {
+        const translated = t('runtime.collectionCell.itemCount', {
+            count,
+            defaultValue: fallback,
+        });
+        if (translated && translated !== 'runtime.collectionCell.itemCount') {
+            return translated;
+        }
+    }
+    return fallback;
+}
+/**
+ * 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, locale, t, }) {
+    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, locale, t) }, 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, locale, t, }) {
+    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, locale, t), ":"] }), ' ', _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, locale-aware. Never throws on unexpected shapes.
+ */
+export function CollectionCell({ value, maxInline = 3, locale, t, }) {
+    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 = countLabel(count, locale, t);
+            const title = rows
+                .map((row) => Object.entries(row)
+                .map(([k, v]) => `${prettifyKey(k, locale, t)}: ${formatScalar(v)}`)
+                .join(', '))
+                .join(' | ');
+            return (_jsx(PopoverShell, { label: label, title: title, children: _jsx(MiniTable, { rows: rows, locale: locale, t: t }) }));
+        }
+        // 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, locale, t)}: ${formatScalar(v)}`)
+        .join(', ');
+    const overflow = entries.length - maxInline;
+    const label = overflow > 0 ? `${inline} +${overflow}` : inline;
+    const title = entries
+        .map(([k, v]) => `${prettifyKey(k, locale, t)}: ${formatScalar(v)}`)
+        .join(', ');
+    return (_jsx(PopoverShell, { label: label, title: title, icon: false, children: _jsx(PairList, { entries: entries, locale: locale, t: t }) }));
+}

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,CA6nBnB;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, locale: currentLanguage, t: t }));
                             }
                             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, countLabel, type CollectionCellProps, type Translate as CollectionCellTranslate, } 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, countLabel, } 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.20.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -0,0 +1,178 @@
+// @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
+//   - locale-aware: count noun + header keys render in the org language; the
+//     host `t` overrides; unknown keys fall back to snake→Title prettify.
+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,
+    countLabel,
+    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('localizes common data/commerce keys to Spanish', () => {
+        expect(prettifyKey('product_id', 'es')).toBe('Producto')
+        expect(prettifyKey('quantity', 'es')).toBe('Cantidad')
+    })
+
+    it('localizes common keys to English (default locale)', () => {
+        expect(prettifyKey('product_id')).toBe('Product')
+        expect(prettifyKey('product_id', 'en')).toBe('Product')
+        expect(prettifyKey('quantity', 'en')).toBe('Quantity')
+    })
+
+    it('accepts a regional tag and normalizes to base language', () => {
+        expect(prettifyKey('quantity', 'es-MX')).toBe('Cantidad')
+    })
+
+    it('prefers a host `t` translation over the built-in dictionary', () => {
+        const t = (k: string) => (k === 'quantity' ? 'Piezas' : k)
+        expect(prettifyKey('quantity', 'es', t)).toBe('Piezas')
+    })
+
+    it('falls back to snake→Title prettify for unknown keys', () => {
+        expect(prettifyKey('shelf_position', 'es')).toBe('Shelf Position')
+        expect(prettifyKey('warehouse_bin', 'en')).toBe('Warehouse Bin')
+    })
+})
+
+describe('countLabel', () => {
+    it('pluralizes the count noun per locale', () => {
+        expect(countLabel(1, 'es')).toBe('1 ítem')
+        expect(countLabel(2, 'es')).toBe('2 ítems')
+        expect(countLabel(1, 'en')).toBe('1 item')
+        expect(countLabel(3, 'en')).toBe('3 items')
+        expect(countLabel(1)).toBe('1 item') // default → en
+    })
+
+    it('prefers a host `t` count plural', () => {
+        const t = (_k: string, o?: any) =>
+            o?.count === 1 ? '1 renglón' : `${o?.count} renglones`
+        expect(countLabel(2, 'es', t)).toBe('2 renglones')
+    })
+})
+
+describe('CollectionCell', () => {
+    it('renders an English count badge by default for an array of objects', () => {
+        render(
+            <CollectionCell
+                value={[
+                    { product_id: 'abc', quantity: 2 },
+                    { product_id: 'def', quantity: 5 },
+                ]}
+            />
+        )
+        // Default locale → English plural.
+        expect(screen.getByText('2 items')).toBeTruthy()
+        // The trigger's title carries the localized rows for the no-JS fallback.
+        const badge = screen.getByText('2 items').closest('[title]')
+        expect(badge).toBeTruthy()
+        const title = badge!.getAttribute('title') ?? ''
+        expect(title).toContain('Quantity: 2')
+        expect(title).toContain('Quantity: 5')
+        expect(title).toContain('Product:') // product_id → "Product" (en)
+    })
+
+    it('renders Spanish count + headers when locale is es', () => {
+        render(
+            <CollectionCell
+                locale="es"
+                value={[
+                    { product_id: 'abc', quantity: 2 },
+                    { product_id: 'def', quantity: 5 },
+                ]}
+            />
+        )
+        expect(screen.getByText('2 ítems')).toBeTruthy()
+        const title =
+            screen.getByText('2 ítems').closest('[title]')!.getAttribute('title') ??
+            ''
+        expect(title).toContain('Producto:')
+        expect(title).toContain('Cantidad: 2')
+    })
+
+    it('renders the singular Spanish noun for a single-item array', () => {
+        render(<CollectionCell locale="es" value={[{ sku: 'A1' }]} />)
+        expect(screen.getByText('1 ítem')).toBeTruthy()
+    })
+
+    it('renders the singular English noun for a single-item array', () => {
+        render(<CollectionCell value={[{ sku: 'A1' }]} />)
+        expect(screen.getByText('1 item')).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 (localized) for a plain object', () => {
+        render(
+            <CollectionCell locale="es" value={{ price: 10, quantity: 20 }} />
+        )
+        expect(screen.getByText(/Precio: 10, Cantidad: 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
+                locale="es"
+                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('Cantidad: 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,413 @@
+// 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
+
+/** Host i18n translator (react-i18next `t`), as threaded into the columns factory. */
+export type Translate = (key: string, options?: any) => string
+
+/** Normalize an org/UI language tag to a base language code (`es-MX` → `es`). */
+function baseLang(locale?: string): string {
+    return (locale || 'en').toLowerCase().split('-')[0]
+}
+
+// Built-in generic data/commerce vocabulary. Localizes the common jsonb keys
+// (line-item rows, config blobs) to the org language out of the box. This is
+// intentionally GENERIC — no domain-specific narrative — and a host i18n bundle
+// can override any key via the `t` resolver (which takes precedence). Keys not
+// found here fall back to snake→Title prettify, so unknown shapes still read.
+const KEY_DICTIONARY: Record<string, Record<string, string>> = {
+    es: {
+        product_id: 'Producto',
+        product: 'Producto',
+        quantity: 'Cantidad',
+        qty: 'Cantidad',
+        unit_cost: 'Costo unitario',
+        cost: 'Costo',
+        price: 'Precio',
+        total: 'Total',
+        subtotal: 'Subtotal',
+        amount: 'Importe',
+        name: 'Nombre',
+        sku: 'SKU',
+        code: 'Código',
+        date: 'Fecha',
+        notes: 'Notas',
+        reason: 'Motivo',
+        delta: 'Variación',
+        warehouse: 'Almacén',
+        description: 'Descripción',
+        id: 'ID',
+    },
+    en: {
+        product_id: 'Product',
+        product: 'Product',
+        quantity: 'Quantity',
+        qty: 'Quantity',
+        unit_cost: 'Unit Cost',
+        cost: 'Cost',
+        price: 'Price',
+        total: 'Total',
+        subtotal: 'Subtotal',
+        amount: 'Amount',
+        name: 'Name',
+        sku: 'SKU',
+        code: 'Code',
+        date: 'Date',
+        notes: 'Notes',
+        reason: 'Reason',
+        delta: 'Delta',
+        warehouse: 'Warehouse',
+        description: 'Description',
+        id: 'ID',
+    },
+}
+
+/** Localized count noun for the array-of-objects badge (`1 ítem` / `2 ítems`). */
+const ITEM_NOUN: Record<string, { one: string; other: string }> = {
+    es: { one: 'ítem', other: 'ítems' },
+    en: { one: 'item', other: 'items' },
+}
+
+/**
+ * Localized key label for a popover column header. Resolution order:
+ *   (a) host i18n `t(rawKey)` if it resolves to something ≠ rawKey;
+ *   (b) the built-in generic es/en data/commerce dictionary;
+ *   (c) snake_case → Title Case prettify (`product_id` → "Product ID").
+ * `locale` defaults to 'en' when absent.
+ */
+export function prettifyKey(
+    key: string,
+    locale?: string,
+    t?: Translate,
+): string {
+    if (t) {
+        const translated = t(key)
+        if (translated && translated !== key) return translated
+    }
+    const lang = baseLang(locale)
+    const dict = KEY_DICTIONARY[lang] ?? KEY_DICTIONARY.en
+    const hit = dict[key.toLowerCase()]
+    if (hit) return hit
+    const pretty = humanizeToken(key)
+    return pretty || key
+}
+
+/**
+ * Localized, pluralized count noun. Prefers the host i18n `t` (react-i18next
+ * count plural via `defaultValue`); otherwise the built-in es/en noun map.
+ */
+export function countLabel(
+    count: number,
+    locale?: string,
+    t?: Translate,
+): string {
+    const lang = baseLang(locale)
+    const noun = ITEM_NOUN[lang] ?? ITEM_NOUN.en
+    const fallback = `${count} ${count === 1 ? noun.one : noun.other}`
+    if (t) {
+        const translated = t('runtime.collectionCell.itemCount', {
+            count,
+            defaultValue: fallback,
+        })
+        if (translated && translated !== 'runtime.collectionCell.itemCount') {
+            return translated
+        }
+    }
+    return fallback
+}
+
+/**
+ * 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,
+    locale,
+    t,
+}: {
+    rows: Record<string, unknown>[]
+    locale?: string
+    t?: Translate
+}) {
+    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, locale, t)}
+                        </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,
+    locale,
+    t,
+}: {
+    entries: [string, unknown][]
+    locale?: string
+    t?: Translate
+}) {
+    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, locale, t)}:
+                    </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
+    /** Org/UI language tag (e.g. `es`, `en-US`). Defaults to `'en'`. */
+    locale?: string
+    /** Host i18n translator; takes precedence over the built-in dictionary. */
+    t?: Translate
+}
+
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly, locale-aware. Never throws on unexpected shapes.
+ */
+export function CollectionCell({
+    value,
+    maxInline = 3,
+    locale,
+    t,
+}: 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 = countLabel(count, locale, t)
+            const title = rows
+                .map((row) =>
+                    Object.entries(row)
+                        .map(
+                            ([k, v]) =>
+                                `${prettifyKey(k, locale, t)}: ${formatScalar(v)}`
+                        )
+                        .join(', ')
+                )
+                .join(' | ')
+            return (
+                <PopoverShell label={label} title={title}>
+                    <MiniTable rows={rows} locale={locale} t={t} />
+                </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, locale, t)}: ${formatScalar(v)}`)
+        .join(', ')
+    const overflow = entries.length - maxInline
+    const label = overflow > 0 ? `${inline} +${overflow}` : inline
+    const title = entries
+        .map(([k, v]) => `${prettifyKey(k, locale, t)}: ${formatScalar(v)}`)
+        .join(', ')
+    return (
+        <PopoverShell label={label} title={title} icon={false}>
+            <PairList entries={entries} locale={locale} t={t} />
+        </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'
@@ -1174,9 +1175,11 @@ export function makeDefaultGetDynamicColumns(
                         default: {
                             if (typeof value === 'object' && value !== null) {
                                 return (
-                                    <span className="text-muted-foreground text-xs">
-                                        {JSON.stringify(value)}
-                                    </span>
+                                    <CollectionCell
+                                        value={value}
+                                        locale={currentLanguage}
+                                        t={t}
+                                    />
                                 )
                             }
                             if (

package/src/index.ts

@@ -101,6 +101,14 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
+export {
+    CollectionCell,
+    formatScalar,
+    prettifyKey,
+    countLabel,
+    type CollectionCellProps,
+    type Translate as CollectionCellTranslate,
+} 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'