@asteby/metacore-runtime-react 13.8.5 → 13.9.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @asteby/metacore-runtime-react
 
+## 13.9.0
+
+### Minor Changes
+
+- 27b37f3: feat(dynamic-columns): declarative pro cell renderers for dynamic tables
+
+  Adds a library of declarative cell renderers so columns are rendered
+  beautifully out of the box instead of raw text. Driven by `col.cellStyle`
+  (or `col.type`), resolved via the existing `renderAs = col.cellStyle ?? col.type`.
+  Config is read from `col.styleConfig`, tolerating both snake_case (kernel) and
+  camelCase (compiled models).
+
+  New cellStyles:
+  - `url` / `link` — clickable link with an `ExternalLink` icon. `styleConfig`:
+    `{ label_field?, url_field?, icon?, new_tab? }`. Shows `label_field` text or
+    the URL hostname; opens in a new tab for external URLs (or `new_tab`);
+    prefixes `https://` when the scheme is missing.
+  - `email` — `mailto:` link with a `Mail` icon.
+  - `currency` — `Intl.NumberFormat` currency formatting, right-aligned.
+    Currency from `styleConfig.currency` (default `USD`), decimals from
+    `styleConfig.decimals` (default 2). No hardcoded MXN.
+  - `number` — thousands-separated number, right-aligned.
+  - `percent` / `progress` — progress bar (shadcn `Progress`) + `NN%` label.
+  - `badge` (generic) — pills a plain value even without `options`/`searchEndpoint`.
+  - `status` — badge with semantic color by value (active/paid→green,
+    pending/draft→amber, cancelled/failed→red, else grey); explicit
+    `options` colors win.
+  - `tags` — array / comma-separated string → row of small badges.
+  - `color` — color swatch + hex code.
+  - `code` / `truncate-text` — monospaced, truncated (`styleConfig.max_length`)
+    with a hover copy button.
+  - `creator` / `user` — avatar + name + subtitle, generalising the existing
+    `avatar`/`search` renderer (name from `styleConfig.name_field`, photo from a
+    sibling `.avatar`/`.photo` or `base_path + value`, initials fallback).
+
+  Also improves the existing `boolean` cell (green `Check` / muted `Minus` icon)
+  without breaking the `avatar`/`search`, `date`, `phone`, `image`,
+  `media-gallery`, `badge+options` and `relation-badge-list` renderers.
+
 ## 13.8.5
 
 ### Patch 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":"AAsCA,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;AAOD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAmHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAsXnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AA0CA,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;AAuJD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAokBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default `getDynamicColumns` factory used by hosts that don't need a custom
 // renderer. Supports every cell type produced by kernel/dynamic metadata:
-// badge (static + endpoint-loaded options), avatar, phone, date, boolean,
-// relation-badge-list, media-gallery, image, plus a generic text fallback.
+// badge (static + endpoint-loaded options), avatar/search, creator/user,
+// phone, date, boolean, relation-badge-list, media-gallery, image, plus the
+// declarative pro renderers url/link, email, currency, number, percent/
+// progress, status, tags, color, code/truncate-text, and a generic text
+// fallback. The renderer resolves `cellStyle ?? type` for each column.
 //
 // The implementation was previously duplicated across multiple host apps
 // (~550 LOC each, drifting). It now lives here so a single fix propagates
@@ -16,11 +19,63 @@ 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 { Progress } from './dialogs/_primitives';
 import { OptionsContext } from './options-context';
 import { DynamicIcon } from './dynamic-icon';
 import { isColumnVisibleInTable } from './column-visibility';
 const defaultGetImageUrl = (path) => path;
 const getNestedValue = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+/**
+ * Reads a styleConfig key tolerating both snake_case (emitted by the kernel)
+ * and camelCase (sometimes produced by compiled models). Returns the first
+ * defined match, e.g. `cfg('label_field', 'labelField')`.
+ */
+const styleCfg = (col, ...keys) => {
+    const cfg = col.styleConfig;
+    if (!cfg)
+        return undefined;
+    for (const k of keys) {
+        if (cfg[k] !== undefined && cfg[k] !== null)
+            return cfg[k];
+    }
+    return undefined;
+};
+const EmptyCell = () => _jsx("span", { className: "text-muted-foreground", children: "-" });
+/** Resolves the active org currency, defaulting to USD when no override. */
+const resolveCurrency = (col) => styleCfg(col, 'currency') || 'USD';
+const formatNumber = (value, opts, locale) => new Intl.NumberFormat(locale || undefined, opts).format(value);
+/**
+ * Semantic status → badge color. Used by the `status` cell when no explicit
+ * `options` color is declared. Generic, value-driven mapping.
+ */
+const statusColorFor = (value) => {
+    const v = value.toLowerCase();
+    if (['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
+        .includes(v))
+        return '#22c55e';
+    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
+        return '#eab308';
+    if (['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
+        .includes(v))
+        return '#ef4444';
+    return '#6b7280';
+};
+/** Copyable monospaced text cell (code/IDs/hashes). */
+const CodeCell = ({ text, maxLength }) => {
+    const [copied, setCopied] = React.useState(false);
+    const display = maxLength && text.length > maxLength ? `${text.slice(0, maxLength)}…` : text;
+    const onCopy = () => {
+        try {
+            navigator.clipboard?.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }
+        catch {
+            /* clipboard unavailable */
+        }
+    };
+    return (_jsxs("div", { className: "group flex items-center gap-1.5", children: [_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground/80", title: text, children: display }), _jsx("button", { type: "button", onClick: onCopy, className: "opacity-0 transition-opacity group-hover:opacity-100 text-muted-foreground hover:text-foreground", "aria-label": "Copiar", title: "Copiar", children: copied ? (_jsx(icons.Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(icons.Copy, { className: "h-3.5 w-3.5" })) })] }));
+};
 /**
  * State-machine gate for per-row actions.
  *
@@ -124,6 +179,13 @@ const BadgeWithEndpointOptions = ({ endpoint, value }) => {
         return _jsx(OptionBadge, { option: option, fallback: String(value) });
     return _jsx(Badge, { variant: "outline", children: String(value) });
 };
+/**
+ * Generic avatar-style cell: round/rounded photo (or initials fallback) +
+ * primary name + optional subtitle. Backs the `avatar`/`search` columns as
+ * well as the `creator`/`user` cellStyles. Paths are parameterised so the same
+ * JSX serves every variant.
+ */
+const AvatarCell = ({ name, desc, avatarSrc, getImageUrl }) => (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg ring-1 ring-border/50", children: [_jsx(AvatarImage, { src: avatarSrc ? getImageUrl(avatarSrc) : '', alt: name, className: "object-cover" }), _jsx(AvatarFallback, { className: "text-[10px] font-bold bg-primary/5 text-primary rounded-lg", children: getInitials(name) })] }), _jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [_jsx("span", { className: "font-medium text-sm truncate leading-none mb-0.5 text-foreground/90", children: name }), desc && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate leading-none", children: desc }))] })] }));
 /**
  * Builds the canonical column factory used by `<DynamicTable>` when the host
  * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar
@@ -196,7 +258,26 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                     if (renderAs === 'relation-badge-list') {
                         return renderRelationBadges(value, col);
                     }
-                    switch (col.type) {
+                    // Generic badge (no options/endpoint) — still pill it.
+                    if (renderAs === 'badge') {
+                        if (!value && value !== 0)
+                            return _jsx(EmptyCell, {});
+                        return _jsx(Badge, { variant: "outline", children: String(value) });
+                    }
+                    // Status — semantic color by value, options color wins.
+                    if (renderAs === 'status') {
+                        if (!value && value !== 0)
+                            return _jsx(EmptyCell, {});
+                        const sv = String(value);
+                        const option = col.options?.find((o) => o.value === sv);
+                        if (option)
+                            return _jsx(OptionBadge, { option: option, fallback: sv });
+                        const isDark = typeof document !== 'undefined' &&
+                            document.documentElement.classList.contains('dark');
+                        const styles = generateBadgeStyles(statusColorFor(sv), { isDark });
+                        return (_jsx(Badge, { variant: "outline", className: "border-0 capitalize", style: styles, children: sv }));
+                    }
+                    switch (renderAs) {
                         case 'date': {
                             if (!value)
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });
@@ -212,36 +293,143 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             }
                         }
                         case 'search':
-                        case 'avatar': {
-                            const namePath = col.tooltip || col.key;
+                        case 'avatar':
+                        case 'creator':
+                        case 'user': {
+                            // `creator`/`user` resolve the name from an explicit
+                            // styleConfig.name_field first, then the legacy
+                            // tooltip/displayField hints, then the column key.
+                            const namePath = styleCfg(col, 'name_field', 'nameField') ||
+                                col.tooltip ||
+                                col.displayField ||
+                                col.key;
                             const name = getNestedValue(row.original, namePath) || 'N/A';
                             const desc = getNestedValue(row.original, col.description || '');
+                            const basePath = styleCfg(col, 'base_path', 'basePath') ?? col.basePath ?? '';
                             let avatarSrc;
                             if (col.key.includes('.')) {
+                                // Look for a sibling `.avatar` or `.photo` field.
                                 const parentPath = col.key.split('.').slice(0, -1).join('.');
-                                const avatarPath = `${parentPath}.avatar`;
-                                const possibleAvatar = getNestedValue(row.original, avatarPath);
-                                if (possibleAvatar)
-                                    avatarSrc = String(possibleAvatar);
-                            }
-                            else if (value &&
-                                (String(value).startsWith('http') || String(value).startsWith('https'))) {
-                                avatarSrc = String(value);
+                                const sibling = getNestedValue(row.original, `${parentPath}.avatar`) ||
+                                    getNestedValue(row.original, `${parentPath}.photo`);
+                                if (sibling)
+                                    avatarSrc = String(sibling);
                             }
-                            else if (value) {
-                                avatarSrc = `${apiBaseUrl}${col.basePath || ''}${value}`;
+                            if (!avatarSrc && value) {
+                                if (String(value).startsWith('http')) {
+                                    avatarSrc = String(value);
+                                }
+                                else {
+                                    avatarSrc = `${apiBaseUrl}${basePath}${value}`;
+                                }
                             }
-                            return (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg ring-1 ring-border/50", children: [_jsx(AvatarImage, { src: getImageUrl(avatarSrc || ''), alt: String(name), className: "object-cover" }), _jsx(AvatarFallback, { className: "text-[10px] font-bold bg-primary/5 text-primary rounded-lg", children: getInitials(String(name)) })] }), _jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [_jsx("span", { className: "font-medium text-sm truncate leading-none mb-0.5 text-foreground/90", children: String(name) }), desc && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate leading-none", children: String(desc) }))] })] }));
+                            return (_jsx(AvatarCell, { name: String(name), desc: desc ? String(desc) : undefined, avatarSrc: avatarSrc, getImageUrl: getImageUrl }));
                         }
                         case 'relation-badge-list':
                             return renderRelationBadges(value, col);
+                        case 'url':
+                        case 'link': {
+                            const labelField = styleCfg(col, 'label_field', 'labelField');
+                            const urlField = styleCfg(col, 'url_field', 'urlField');
+                            const rawUrl = urlField
+                                ? getNestedValue(row.original, urlField)
+                                : value;
+                            if (!rawUrl)
+                                return _jsx(EmptyCell, {});
+                            const urlStr = String(rawUrl);
+                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`;
+                            let label;
+                            if (labelField) {
+                                label = String(getNestedValue(row.original, labelField) ?? href);
+                            }
+                            else {
+                                try {
+                                    label = new URL(href).hostname;
+                                }
+                                catch {
+                                    label = urlStr;
+                                }
+                            }
+                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href);
+                            const newTab = styleCfg(col, 'new_tab', 'newTab') === true || isExternal;
+                            const iconName = styleCfg(col, 'icon') || 'ExternalLink';
+                            return (_jsxs("a", { href: href, ...(newTab
+                                    ? { target: '_blank', rel: 'noopener noreferrer' }
+                                    : {}), className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(DynamicIcon, { name: iconName, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[260px]", children: label })] }));
+                        }
+                        case 'email': {
+                            if (!value)
+                                return _jsx(EmptyCell, {});
+                            const email = String(value);
+                            return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.Mail, { className: "h-3.5 w-3.5 shrink-0 opacity-70" }), _jsx("span", { className: "truncate max-w-[260px]", children: email })] }));
+                        }
+                        case 'currency': {
+                            const num = typeof value === 'number' ? value : Number(value);
+                            if (value === null || value === undefined || isNaN(num))
+                                return (_jsx("div", { className: "text-right", children: _jsx(EmptyCell, {}) }));
+                            const decimals = styleCfg(col, 'decimals') ?? 2;
+                            return (_jsx("span", { className: "block text-right font-medium tabular-nums", children: formatNumber(num, {
+                                    style: 'currency',
+                                    currency: resolveCurrency(col),
+                                    minimumFractionDigits: decimals,
+                                    maximumFractionDigits: decimals,
+                                }, currentLanguage) }));
+                        }
+                        case 'number': {
+                            const num = typeof value === 'number' ? value : Number(value);
+                            if (value === null || value === undefined || isNaN(num))
+                                return (_jsx("div", { className: "text-right", children: _jsx(EmptyCell, {}) }));
+                            const decimals = styleCfg(col, 'decimals');
+                            return (_jsx("span", { className: "block text-right font-medium tabular-nums", children: formatNumber(num, decimals !== undefined
+                                    ? {
+                                        minimumFractionDigits: decimals,
+                                        maximumFractionDigits: decimals,
+                                    }
+                                    : {}, currentLanguage) }));
+                        }
+                        case 'percent':
+                        case 'progress': {
+                            const num = typeof value === 'number' ? value : Number(value);
+                            if (value === null || value === undefined || isNaN(num))
+                                return _jsx(EmptyCell, {});
+                            const pct = Math.max(0, Math.min(100, num));
+                            return (_jsxs("div", { className: "flex items-center gap-2 min-w-[120px]", children: [_jsx(Progress, { value: pct, className: "flex-1" }), _jsxs("span", { className: "text-xs font-medium tabular-nums text-muted-foreground w-9 text-right", children: [Math.round(pct), "%"] })] }));
+                        }
+                        case 'tags': {
+                            const list = Array.isArray(value)
+                                ? value.map(String)
+                                : value
+                                    ? String(value)
+                                        .split(',')
+                                        .map((s) => s.trim())
+                                        .filter(Boolean)
+                                    : [];
+                            if (list.length === 0)
+                                return _jsx(EmptyCell, {});
+                            return (_jsx("div", { className: "flex flex-wrap gap-1", children: list.map((tag, i) => (_jsx(Badge, { variant: "secondary", className: "px-1.5 py-0 text-[10px]", children: tag }, `${col.key}-${i}`))) }));
+                        }
+                        case 'color': {
+                            if (!value)
+                                return _jsx(EmptyCell, {});
+                            const hex = String(value);
+                            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-4 w-4 rounded border border-border/60 shrink-0", style: { background: hex } }), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: hex })] }));
+                        }
+                        case 'code':
+                        case 'truncate-text': {
+                            if (value === null || value === undefined || value === '')
+                                return _jsx(EmptyCell, {});
+                            const maxLength = styleCfg(col, 'max_length', 'maxLength');
+                            return _jsx(CodeCell, { text: String(value), maxLength: maxLength });
+                        }
                         case 'phone': {
                             if (!value)
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });
                             return _jsx("span", { className: "font-medium text-sm", children: String(value) });
                         }
-                        case 'boolean':
-                            return value ? _jsx(Badge, { children: "S\u00ED" }) : _jsx(Badge, { variant: "secondary", children: "No" });
+                        case 'boolean': {
+                            const showText = styleCfg(col, 'show_text', 'showText') !== false;
+                            return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [value ? (_jsx(icons.Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(icons.Minus, { className: "h-4 w-4 text-muted-foreground" })), showText && (_jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' }))] }));
+                        }
                         case 'media-gallery': {
                             if (!value || (Array.isArray(value) && value.length === 0)) {
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });

package/dist/types.d.ts

@@ -75,7 +75,7 @@ export type ColumnVisibility = 'all' | 'table' | 'modal' | 'list' | (string & {}
 export interface ColumnDefinition {
     key: string;
     label: string;
-    type: 'text' | 'number' | 'date' | 'select' | 'search' | 'relation-badge-list' | 'avatar' | 'boolean' | 'phone' | 'media-gallery' | 'image';
+    type: 'text' | 'number' | 'date' | 'select' | 'search' | 'relation-badge-list' | 'avatar' | 'boolean' | 'phone' | 'media-gallery' | 'image' | 'url' | 'link' | 'email' | 'currency' | 'percent' | 'progress' | 'badge' | 'status' | 'tags' | 'color' | 'code' | 'truncate-text' | 'creator' | 'user';
     sortable: boolean;
     filterable: boolean;
     hidden?: boolean;

package/dist/types.d.ts.map

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

package/package.json

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

package/src/dynamic-columns.tsx

@@ -1,7 +1,10 @@
 // Default `getDynamicColumns` factory used by hosts that don't need a custom
 // renderer. Supports every cell type produced by kernel/dynamic metadata:
-// badge (static + endpoint-loaded options), avatar, phone, date, boolean,
-// relation-badge-list, media-gallery, image, plus a generic text fallback.
+// badge (static + endpoint-loaded options), avatar/search, creator/user,
+// phone, date, boolean, relation-badge-list, media-gallery, image, plus the
+// declarative pro renderers url/link, email, currency, number, percent/
+// progress, status, tags, color, code/truncate-text, and a generic text
+// fallback. The renderer resolves `cellStyle ?? type` for each column.
 //
 // The implementation was previously duplicated across multiple host apps
 // (~550 LOC each, drifting). It now lives here so a single fix propagates
@@ -32,6 +35,7 @@ import {
     type ColumnFilterMeta,
 } from '@asteby/metacore-ui/data-table'
 import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib'
+import { Progress } from './dialogs/_primitives'
 import { OptionsContext } from './options-context'
 import { DynamicIcon } from './dynamic-icon'
 import type { TableMetadata, ColumnDefinition } from './types'
@@ -62,6 +66,95 @@ const defaultGetImageUrl = (path: string) => path
 const getNestedValue = (obj: any, path: string) =>
     path.split('.').reduce((acc, part) => acc && acc[part], obj)
 
+/**
+ * Reads a styleConfig key tolerating both snake_case (emitted by the kernel)
+ * and camelCase (sometimes produced by compiled models). Returns the first
+ * defined match, e.g. `cfg('label_field', 'labelField')`.
+ */
+const styleCfg = (
+    col: ColumnDefinition,
+    ...keys: string[]
+): any => {
+    const cfg = col.styleConfig
+    if (!cfg) return undefined
+    for (const k of keys) {
+        if (cfg[k] !== undefined && cfg[k] !== null) return cfg[k]
+    }
+    return undefined
+}
+
+const EmptyCell = () => <span className="text-muted-foreground">-</span>
+
+/** Resolves the active org currency, defaulting to USD when no override. */
+const resolveCurrency = (col: ColumnDefinition): string =>
+    styleCfg(col, 'currency') || 'USD'
+
+const formatNumber = (
+    value: number,
+    opts: Intl.NumberFormatOptions,
+    locale?: string,
+) => new Intl.NumberFormat(locale || undefined, opts).format(value)
+
+/**
+ * Semantic status → badge color. Used by the `status` cell when no explicit
+ * `options` color is declared. Generic, value-driven mapping.
+ */
+const statusColorFor = (value: string): string => {
+    const v = value.toLowerCase()
+    if (
+        ['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
+            .includes(v)
+    )
+        return '#22c55e'
+    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
+        return '#eab308'
+    if (
+        ['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
+            .includes(v)
+    )
+        return '#ef4444'
+    return '#6b7280'
+}
+
+/** Copyable monospaced text cell (code/IDs/hashes). */
+const CodeCell: React.FC<{ text: string; maxLength?: number }> = ({ text, maxLength }) => {
+    const [copied, setCopied] = React.useState(false)
+    const display =
+        maxLength && text.length > maxLength ? `${text.slice(0, maxLength)}…` : text
+    const onCopy = () => {
+        try {
+            navigator.clipboard?.writeText(text)
+            setCopied(true)
+            setTimeout(() => setCopied(false), 1200)
+        } catch {
+            /* clipboard unavailable */
+        }
+    }
+    return (
+        <div className="group flex items-center gap-1.5">
+            <code
+                className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground/80"
+                title={text}
+            >
+                {display}
+            </code>
+            <button
+                type="button"
+                onClick={onCopy}
+                className="opacity-0 transition-opacity group-hover:opacity-100 text-muted-foreground hover:text-foreground"
+                aria-label="Copiar"
+                title="Copiar"
+            >
+                {copied ? (
+                    <icons.Check className="h-3.5 w-3.5 text-green-500" />
+                ) : (
+                    <icons.Copy className="h-3.5 w-3.5" />
+                )}
+            </button>
+        </div>
+    )
+}
+
 /**
  * State-machine gate for per-row actions.
  *
@@ -195,6 +288,42 @@ const BadgeWithEndpointOptions: React.FC<{ endpoint: string; value: any }> = ({
     return <Badge variant="outline">{String(value)}</Badge>
 }
 
+/**
+ * Generic avatar-style cell: round/rounded photo (or initials fallback) +
+ * primary name + optional subtitle. Backs the `avatar`/`search` columns as
+ * well as the `creator`/`user` cellStyles. Paths are parameterised so the same
+ * JSX serves every variant.
+ */
+const AvatarCell: React.FC<{
+    name: string
+    desc?: string
+    avatarSrc?: string
+    getImageUrl: (path: string) => string
+}> = ({ name, desc, avatarSrc, getImageUrl }) => (
+    <div className="flex items-center gap-3 min-w-0">
+        <Avatar className="h-8 w-8 rounded-lg ring-1 ring-border/50">
+            <AvatarImage
+                src={avatarSrc ? getImageUrl(avatarSrc) : ''}
+                alt={name}
+                className="object-cover"
+            />
+            <AvatarFallback className="text-[10px] font-bold bg-primary/5 text-primary rounded-lg">
+                {getInitials(name)}
+            </AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col min-w-0 overflow-hidden">
+            <span className="font-medium text-sm truncate leading-none mb-0.5 text-foreground/90">
+                {name}
+            </span>
+            {desc && (
+                <span className="text-[11px] text-muted-foreground truncate leading-none">
+                    {desc}
+                </span>
+            )}
+        </div>
+    </div>
+)
+
 /**
  * Builds the canonical column factory used by `<DynamicTable>` when the host
  * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar
@@ -301,7 +430,30 @@ export function makeDefaultGetDynamicColumns(
                         return renderRelationBadges(value, col)
                     }
 
-                    switch (col.type) {
+                    // Generic badge (no options/endpoint) — still pill it.
+                    if (renderAs === 'badge') {
+                        if (!value && value !== 0) return <EmptyCell />
+                        return <Badge variant="outline">{String(value)}</Badge>
+                    }
+
+                    // Status — semantic color by value, options color wins.
+                    if (renderAs === 'status') {
+                        if (!value && value !== 0) return <EmptyCell />
+                        const sv = String(value)
+                        const option = col.options?.find((o) => o.value === sv)
+                        if (option) return <OptionBadge option={option} fallback={sv} />
+                        const isDark =
+                            typeof document !== 'undefined' &&
+                            document.documentElement.classList.contains('dark')
+                        const styles = generateBadgeStyles(statusColorFor(sv), { isDark })
+                        return (
+                            <Badge variant="outline" className="border-0 capitalize" style={styles}>
+                                {sv}
+                            </Badge>
+                        )
+                    }
+
+                    switch (renderAs) {
                         case 'date': {
                             if (!value) return <span className="text-muted-foreground">-</span>
                             try {
@@ -323,62 +475,245 @@ export function makeDefaultGetDynamicColumns(
                         }
 
                         case 'search':
-                        case 'avatar': {
-                            const namePath = col.tooltip || col.key
+                        case 'avatar':
+                        case 'creator':
+                        case 'user': {
+                            // `creator`/`user` resolve the name from an explicit
+                            // styleConfig.name_field first, then the legacy
+                            // tooltip/displayField hints, then the column key.
+                            const namePath =
+                                styleCfg(col, 'name_field', 'nameField') ||
+                                col.tooltip ||
+                                col.displayField ||
+                                col.key
                             const name = getNestedValue(row.original, namePath) || 'N/A'
                             const desc = getNestedValue(row.original, col.description || '')
 
+                            const basePath = styleCfg(col, 'base_path', 'basePath') ?? col.basePath ?? ''
                             let avatarSrc: string | undefined
                             if (col.key.includes('.')) {
+                                // Look for a sibling `.avatar` or `.photo` field.
                                 const parentPath = col.key.split('.').slice(0, -1).join('.')
-                                const avatarPath = `${parentPath}.avatar`
-                                const possibleAvatar = getNestedValue(row.original, avatarPath)
-                                if (possibleAvatar) avatarSrc = String(possibleAvatar)
-                            } else if (
-                                value &&
-                                (String(value).startsWith('http') || String(value).startsWith('https'))
-                            ) {
-                                avatarSrc = String(value)
-                            } else if (value) {
-                                avatarSrc = `${apiBaseUrl}${col.basePath || ''}${value}`
+                                const sibling =
+                                    getNestedValue(row.original, `${parentPath}.avatar`) ||
+                                    getNestedValue(row.original, `${parentPath}.photo`)
+                                if (sibling) avatarSrc = String(sibling)
+                            }
+                            if (!avatarSrc && value) {
+                                if (String(value).startsWith('http')) {
+                                    avatarSrc = String(value)
+                                } else {
+                                    avatarSrc = `${apiBaseUrl}${basePath}${value}`
+                                }
                             }
 
                             return (
-                                <div className="flex items-center gap-3 min-w-0">
-                                    <Avatar className="h-8 w-8 rounded-lg ring-1 ring-border/50">
-                                        <AvatarImage
-                                            src={getImageUrl(avatarSrc || '')}
-                                            alt={String(name)}
-                                            className="object-cover"
-                                        />
-                                        <AvatarFallback className="text-[10px] font-bold bg-primary/5 text-primary rounded-lg">
-                                            {getInitials(String(name))}
-                                        </AvatarFallback>
-                                    </Avatar>
-                                    <div className="flex flex-col min-w-0 overflow-hidden">
-                                        <span className="font-medium text-sm truncate leading-none mb-0.5 text-foreground/90">
-                                            {String(name)}
-                                        </span>
-                                        {desc && (
-                                            <span className="text-[11px] text-muted-foreground truncate leading-none">
-                                                {String(desc)}
-                                            </span>
-                                        )}
-                                    </div>
-                                </div>
+                                <AvatarCell
+                                    name={String(name)}
+                                    desc={desc ? String(desc) : undefined}
+                                    avatarSrc={avatarSrc}
+                                    getImageUrl={getImageUrl}
+                                />
                             )
                         }
 
                         case 'relation-badge-list':
                             return renderRelationBadges(value, col)
 
+                        case 'url':
+                        case 'link': {
+                            const labelField = styleCfg(col, 'label_field', 'labelField')
+                            const urlField = styleCfg(col, 'url_field', 'urlField')
+                            const rawUrl = urlField
+                                ? getNestedValue(row.original, urlField)
+                                : value
+                            if (!rawUrl) return <EmptyCell />
+                            const urlStr = String(rawUrl)
+                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
+                            let label: string
+                            if (labelField) {
+                                label = String(getNestedValue(row.original, labelField) ?? href)
+                            } else {
+                                try {
+                                    label = new URL(href).hostname
+                                } catch {
+                                    label = urlStr
+                                }
+                            }
+                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href)
+                            const newTab =
+                                styleCfg(col, 'new_tab', 'newTab') === true || isExternal
+                            const iconName = styleCfg(col, 'icon') || 'ExternalLink'
+                            return (
+                                <a
+                                    href={href}
+                                    {...(newTab
+                                        ? { target: '_blank', rel: 'noopener noreferrer' }
+                                        : {})}
+                                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+                                    onClick={(e) => e.stopPropagation()}
+                                >
+                                    <DynamicIcon name={iconName} className="h-3.5 w-3.5 shrink-0" />
+                                    <span className="truncate max-w-[260px]">{label}</span>
+                                </a>
+                            )
+                        }
+
+                        case 'email': {
+                            if (!value) return <EmptyCell />
+                            const email = String(value)
+                            return (
+                                <a
+                                    href={`mailto:${email}`}
+                                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+                                    onClick={(e) => e.stopPropagation()}
+                                >
+                                    <icons.Mail className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                                    <span className="truncate max-w-[260px]">{email}</span>
+                                </a>
+                            )
+                        }
+
+                        case 'currency': {
+                            const num =
+                                typeof value === 'number' ? value : Number(value)
+                            if (value === null || value === undefined || isNaN(num))
+                                return (
+                                    <div className="text-right">
+                                        <EmptyCell />
+                                    </div>
+                                )
+                            const decimals = styleCfg(col, 'decimals') ?? 2
+                            return (
+                                <span className="block text-right font-medium tabular-nums">
+                                    {formatNumber(
+                                        num,
+                                        {
+                                            style: 'currency',
+                                            currency: resolveCurrency(col),
+                                            minimumFractionDigits: decimals,
+                                            maximumFractionDigits: decimals,
+                                        },
+                                        currentLanguage,
+                                    )}
+                                </span>
+                            )
+                        }
+
+                        case 'number': {
+                            const num =
+                                typeof value === 'number' ? value : Number(value)
+                            if (value === null || value === undefined || isNaN(num))
+                                return (
+                                    <div className="text-right">
+                                        <EmptyCell />
+                                    </div>
+                                )
+                            const decimals = styleCfg(col, 'decimals')
+                            return (
+                                <span className="block text-right font-medium tabular-nums">
+                                    {formatNumber(
+                                        num,
+                                        decimals !== undefined
+                                            ? {
+                                                  minimumFractionDigits: decimals,
+                                                  maximumFractionDigits: decimals,
+                                              }
+                                            : {},
+                                        currentLanguage,
+                                    )}
+                                </span>
+                            )
+                        }
+
+                        case 'percent':
+                        case 'progress': {
+                            const num =
+                                typeof value === 'number' ? value : Number(value)
+                            if (value === null || value === undefined || isNaN(num))
+                                return <EmptyCell />
+                            const pct = Math.max(0, Math.min(100, num))
+                            return (
+                                <div className="flex items-center gap-2 min-w-[120px]">
+                                    <Progress value={pct} className="flex-1" />
+                                    <span className="text-xs font-medium tabular-nums text-muted-foreground w-9 text-right">
+                                        {Math.round(pct)}%
+                                    </span>
+                                </div>
+                            )
+                        }
+
+                        case 'tags': {
+                            const list: string[] = Array.isArray(value)
+                                ? value.map(String)
+                                : value
+                                  ? String(value)
+                                        .split(',')
+                                        .map((s) => s.trim())
+                                        .filter(Boolean)
+                                  : []
+                            if (list.length === 0) return <EmptyCell />
+                            return (
+                                <div className="flex flex-wrap gap-1">
+                                    {list.map((tag, i) => (
+                                        <Badge
+                                            key={`${col.key}-${i}`}
+                                            variant="secondary"
+                                            className="px-1.5 py-0 text-[10px]"
+                                        >
+                                            {tag}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            )
+                        }
+
+                        case 'color': {
+                            if (!value) return <EmptyCell />
+                            const hex = String(value)
+                            return (
+                                <div className="flex items-center gap-2">
+                                    <span
+                                        className="h-4 w-4 rounded border border-border/60 shrink-0"
+                                        style={{ background: hex }}
+                                    />
+                                    <code className="font-mono text-xs text-muted-foreground">
+                                        {hex}
+                                    </code>
+                                </div>
+                            )
+                        }
+
+                        case 'code':
+                        case 'truncate-text': {
+                            if (value === null || value === undefined || value === '')
+                                return <EmptyCell />
+                            const maxLength = styleCfg(col, 'max_length', 'maxLength')
+                            return <CodeCell text={String(value)} maxLength={maxLength} />
+                        }
+
                         case 'phone': {
                             if (!value) return <span className="text-muted-foreground">-</span>
                             return <span className="font-medium text-sm">{String(value)}</span>
                         }
 
-                        case 'boolean':
-                            return value ? <Badge>Sí</Badge> : <Badge variant="secondary">No</Badge>
+                        case 'boolean': {
+                            const showText = styleCfg(col, 'show_text', 'showText') !== false
+                            return (
+                                <span className="inline-flex items-center gap-1.5">
+                                    {value ? (
+                                        <icons.Check className="h-4 w-4 text-green-500" />
+                                    ) : (
+                                        <icons.Minus className="h-4 w-4 text-muted-foreground" />
+                                    )}
+                                    {showText && (
+                                        <span className="text-sm text-muted-foreground">
+                                            {value ? 'Sí' : 'No'}
+                                        </span>
+                                    )}
+                                </span>
+                            )
+                        }
 
                         case 'media-gallery': {
                             if (!value || (Array.isArray(value) && value.length === 0)) {

package/src/types.ts

@@ -77,7 +77,33 @@ export type ColumnVisibility = 'all' | 'table' | 'modal' | 'list' | (string & {}
 export interface ColumnDefinition {
     key: string
     label: string
-    type: 'text' | 'number' | 'date' | 'select' | 'search' | 'relation-badge-list' | 'avatar' | 'boolean' | 'phone' | 'media-gallery' | 'image'
+    type:
+        | 'text'
+        | 'number'
+        | 'date'
+        | 'select'
+        | 'search'
+        | 'relation-badge-list'
+        | 'avatar'
+        | 'boolean'
+        | 'phone'
+        | 'media-gallery'
+        | 'image'
+        // Declarative pro cell renderers (resolved via `cellStyle ?? type`).
+        | 'url'
+        | 'link'
+        | 'email'
+        | 'currency'
+        | 'percent'
+        | 'progress'
+        | 'badge'
+        | 'status'
+        | 'tags'
+        | 'color'
+        | 'code'
+        | 'truncate-text'
+        | 'creator'
+        | 'user'
     sortable: boolean
     filterable: boolean
     hidden?: boolean