@asteby/metacore-runtime-react 18.10.1 → 18.11.0

package/dist/activity-value-renderer.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * activity-value-renderer.tsx
+ *
+ * Pure, transport-agnostic value renderer for Activity / Time Machine diffs.
+ * Reuses the same display-type logic as dynamic-columns.tsx (currency, status,
+ * date, boolean, badge, relation, url, tags, color, number, percent) so the
+ * diff cells and the table cells are always consistent.
+ *
+ * Kept in its own module so it has no dependency on tanstack-table or the
+ * column-factory machinery — only React + metacore-ui primitives.
+ */
+import * as React from 'react';
+import * as icons from 'lucide-react';
+import { es, enUS } from 'date-fns/locale';
+import { Badge, Avatar, AvatarImage, AvatarFallback, } from '@asteby/metacore-ui/primitives';
+import { generateBadgeStyles, getInitials, optionColor, relationChipStyles } from '@asteby/metacore-ui/lib';
+import { formatDateCell } from './dynamic-columns';
+import { humanizeToken } from './dynamic-columns-helpers';
+// ---------------------------------------------------------------------------
+// Internal helpers (mirror dynamic-columns.tsx private helpers)
+// ---------------------------------------------------------------------------
+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 formatNumber = (value, opts, locale) => new Intl.NumberFormat(locale || undefined, opts).format(value);
+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';
+};
+const useIsDarkTheme = () => {
+    const [isDark, setIsDark] = React.useState(() => typeof document !== 'undefined' && document.documentElement.classList.contains('dark'));
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const sync = () => setIsDark(document.documentElement.classList.contains('dark'));
+        const observer = new MutationObserver(sync);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * Renders a single field value from an activity event using the same display
+ * type logic as `defaultGetDynamicColumns`. Pass a `ColumnDefinition` to get
+ * rich formatting (currency, status badge, date, boolean, etc.); without it
+ * the component falls back to a plain string representation.
+ */
+export const ActivityValueRenderer = ({ value, col, timeZone, currency, locale = 'es', }) => {
+    const isDark = useIsDarkTheme();
+    const dateLocale = locale === 'en' ? enUS : es;
+    // null / undefined → dash
+    if (value === null || value === undefined || value === '') {
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    }
+    // No column metadata → plain string
+    if (!col) {
+        if (typeof value === 'object') {
+            return (_jsx("span", { className: "text-muted-foreground text-xs font-mono", children: JSON.stringify(value) }));
+        }
+        return _jsx("span", { className: "font-medium text-sm", children: String(value) });
+    }
+    const renderAs = col.cellStyle ?? col.type;
+    // -----------------------------------------------------------------------
+    // Badge / Status / Select / Option
+    // -----------------------------------------------------------------------
+    if (renderAs === 'badge' || renderAs === 'status' || renderAs === 'select' || renderAs === 'option') {
+        const sv = String(value);
+        const option = col.options?.find((o) => o.value === sv);
+        if (option) {
+            const colorSource = option.color || optionColor(option.value || option.label);
+            const styles = generateBadgeStyles(colorSource, { isDark });
+            return (_jsx(Badge, { variant: "outline", className: "border-0", style: styles, children: option.label }));
+        }
+        if (renderAs === 'status') {
+            const styles = generateBadgeStyles(statusColorFor(sv), { isDark });
+            return (_jsx(Badge, { variant: "outline", className: "border-0", style: styles, children: humanizeToken(sv) }));
+        }
+        return _jsx(Badge, { variant: "outline", children: humanizeToken(sv) });
+    }
+    // -----------------------------------------------------------------------
+    // Date / Datetime / Timestamp
+    // -----------------------------------------------------------------------
+    if (['date', 'datetime', 'timestamp', 'timestamptz'].includes(renderAs ?? '')) {
+        const formatted = formatDateCell(value, renderAs, dateLocale, timeZone);
+        if (!formatted)
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", title: formatted.title, children: [_jsx(icons.Calendar, { className: "h-3 w-3 opacity-60" }), formatted.display] }));
+    }
+    // -----------------------------------------------------------------------
+    // Boolean
+    // -----------------------------------------------------------------------
+    if (renderAs === 'boolean') {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [value ? (_jsx(icons.Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(icons.Minus, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
+    }
+    // -----------------------------------------------------------------------
+    // Currency
+    // -----------------------------------------------------------------------
+    if (renderAs === 'currency') {
+        const num = typeof value === 'number' ? value : Number(value);
+        if (isNaN(num))
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        const decimals = styleCfg(col, 'decimals') ?? 2;
+        const curr = styleCfg(col, 'currency') || currency || 'USD';
+        return (_jsx("span", { className: "font-medium tabular-nums text-sm", children: formatNumber(num, { style: 'currency', currency: curr, minimumFractionDigits: decimals, maximumFractionDigits: decimals }, locale) }));
+    }
+    // -----------------------------------------------------------------------
+    // Number / Percent / Progress
+    // -----------------------------------------------------------------------
+    if (renderAs === 'number') {
+        const num = typeof value === 'number' ? value : Number(value);
+        if (isNaN(num))
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        const decimals = styleCfg(col, 'decimals');
+        return (_jsx("span", { className: "font-medium tabular-nums text-sm", children: formatNumber(num, decimals !== undefined ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {}, locale) }));
+    }
+    if (renderAs === 'percent' || renderAs === 'progress') {
+        const num = typeof value === 'number' ? value : Number(value);
+        if (isNaN(num))
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        return (_jsxs("span", { className: "font-medium tabular-nums text-sm text-muted-foreground", children: [Math.round(Math.max(0, Math.min(100, num))), "%"] }));
+    }
+    // -----------------------------------------------------------------------
+    // Tags
+    // -----------------------------------------------------------------------
+    if (renderAs === 'tags') {
+        const list = Array.isArray(value)
+            ? value.map(String)
+            : String(value).split(',').map((s) => s.trim()).filter(Boolean);
+        if (list.length === 0)
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        return (_jsx("span", { className: "inline-flex flex-wrap gap-1", children: list.map((tag, i) => (_jsx(Badge, { variant: "secondary", className: "px-1.5 py-0 text-[10px]", children: tag }, i))) }));
+    }
+    // -----------------------------------------------------------------------
+    // Color
+    // -----------------------------------------------------------------------
+    if (renderAs === 'color') {
+        const hex = String(value);
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "h-3.5 w-3.5 rounded border border-border/60 shrink-0", style: { background: hex } }), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: hex })] }));
+    }
+    // -----------------------------------------------------------------------
+    // URL / Link
+    // -----------------------------------------------------------------------
+    if (renderAs === 'url' || renderAs === 'link') {
+        const urlStr = String(value);
+        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`;
+        let label;
+        try {
+            label = new URL(href).hostname;
+        }
+        catch {
+            label = urlStr;
+        }
+        return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.ExternalLink, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: label })] }));
+    }
+    // -----------------------------------------------------------------------
+    // Email
+    // -----------------------------------------------------------------------
+    if (renderAs === 'email') {
+        const email = String(value);
+        return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.Mail, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: email })] }));
+    }
+    // -----------------------------------------------------------------------
+    // Relation chip (FK / reference)
+    // -----------------------------------------------------------------------
+    if (renderAs === 'relation' || renderAs === 'reference' || col.ref) {
+        const sv = String(value);
+        const chipStyles = relationChipStyles(sv, { isDark });
+        return (_jsx("span", { className: "inline-flex items-center rounded-md px-2 py-0.5 text-sm font-medium", style: { ...chipStyles, maxWidth: 180 }, title: sv, children: _jsx("span", { className: "truncate", children: sv }) }));
+    }
+    // -----------------------------------------------------------------------
+    // Creator / User / Avatar — these carry an object (resolved by the backend);
+    // in a diff snapshot the value is likely a string (name/email) or the object.
+    // -----------------------------------------------------------------------
+    if (renderAs === 'creator' || renderAs === 'user' || renderAs === 'avatar' || renderAs === 'search') {
+        const name = typeof value === 'object' && value !== null
+            ? String(value.name ?? value.label ?? JSON.stringify(value))
+            : String(value);
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsxs(Avatar, { className: "h-5 w-5 rounded-full", children: [_jsx(AvatarImage, { src: "", alt: name }), _jsx(AvatarFallback, { className: "text-[8px] font-bold bg-primary/10 text-primary", children: getInitials(name) })] }), _jsx("span", { className: "text-sm font-medium truncate", style: { maxWidth: 180 }, children: name })] }));
+    }
+    // -----------------------------------------------------------------------
+    // Code / truncate-text / phone
+    // -----------------------------------------------------------------------
+    if (renderAs === 'code' || renderAs === 'truncate-text') {
+        const sv = String(value);
+        const maxLength = styleCfg(col, 'max_length', 'maxLength');
+        const display = maxLength && sv.length > maxLength ? `${sv.slice(0, maxLength)}…` : sv;
+        return _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: display });
+    }
+    // -----------------------------------------------------------------------
+    // Generic object fallback
+    // -----------------------------------------------------------------------
+    if (typeof value === 'object') {
+        return (_jsx("span", { className: "text-muted-foreground text-xs font-mono", children: JSON.stringify(value) }));
+    }
+    // -----------------------------------------------------------------------
+    // Plain text fallback
+    // -----------------------------------------------------------------------
+    return _jsx("span", { className: "font-medium text-sm", children: String(value) });
+};

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BA02BnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAUnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAo3BnB"}

package/dist/dynamic-table.js

@@ -620,13 +620,13 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     if (!metadata) {
         return _jsx("div", { className: "text-center text-muted-foreground py-8", children: "Error al cargar la configuraci\u00F3n de la tabla." });
     }
-    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsx("div", { className: 'pb-4 shrink-0', children: _jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [metadata.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), metadata.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }) }), _jsx("div", { className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { noWrapper: true, className: "min-w-max w-full", children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
+    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsx("div", { className: 'pb-4 shrink-0', children: _jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [metadata.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), metadata.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }) }), _jsx("div", { className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: _jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
                                             const isActionsColumn = header.id === 'actions';
                                             return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActionsColumn && 'sticky right-0 z-20 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                        }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => {
-                                            const isActionsColumn = cell.column.id === 'actions';
-                                            return (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: cn('py-2', isActionsColumn && 'sticky right-0 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                        }) }, row.id)))) : (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0', children: _jsxs("div", { className: "flex h-full py-12 flex-col items-center justify-center gap-2 text-muted-foreground", children: [_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-muted/50", children: _jsx(Inbox, { className: "h-10 w-10" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground", children: "No se encontraron resultados" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No hay datos para mostrar en este momento." })] })] }) }) })) }), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableFooter, { className: "bg-transparent", children: _jsx(TableRow, { className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((leaf, idx) => {
+                                        }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => {
+                                                    const isActionsColumn = cell.column.id === 'actions';
+                                                    return (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: cn('py-2', isActionsColumn && 'sticky right-0 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                }) }, row.id))), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableRow, { className: 'border-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0' }) }))] })) : (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0', children: _jsxs("div", { className: "flex h-full py-12 flex-col items-center justify-center gap-2 text-muted-foreground", children: [_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-muted/50", children: _jsx(Inbox, { className: "h-10 w-10" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground", children: "No se encontraron resultados" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No hay datos para mostrar en este momento." })] })] }) }) })) }), aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && (_jsx(TableFooter, { className: "bg-transparent", children: _jsx(TableRow, { className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((leaf, idx) => {
                                             const col = (metadata?.columns ?? []).find((c) => c.key === leaf.id);
                                             const isFirst = idx === 0;
                                             const stickyBase = 'sticky bottom-0 z-10 border-t bg-background py-2 font-semibold';

package/dist/index.d.ts

@@ -36,4 +36,8 @@ export { isColumnVisibleInTable, getSearchableColumnKeys, } from './column-visib
 export { useOptionsResolver, projectOption, type ResolvedOption, type OptionsMeta, type UseOptionsResolverArgs, type UseOptionsResolverResult, } from './use-options-resolver';
 export { setOrgConfigBridge, getOrgConfigBridge, resolveValidatorToken, type OrgConfigBridge, } from './use-org-config-bridge';
 export { registerValidator } from './dynamic-form-schema';
+export { ActivityValueRenderer, type ActivityValueRendererProps, } from './activity-value-renderer';
+export { ActivityDiff, type ActivityEvent, type ActivityDiffProps, } from './activity-diff';
+export { RecordHistory, type RecordHistoryProps, } from './record-history';
+export { ActivityTimeline, type ActivityTimelineProps, } from './activity-timeline';
 //# sourceMappingURL=index.d.ts.map

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

@@ -38,3 +38,7 @@ export { isColumnVisibleInTable, getSearchableColumnKeys, } from './column-visib
 export { useOptionsResolver, projectOption, } from './use-options-resolver';
 export { setOrgConfigBridge, getOrgConfigBridge, resolveValidatorToken, } from './use-org-config-bridge';
 export { registerValidator } from './dynamic-form-schema';
+export { ActivityValueRenderer, } from './activity-value-renderer';
+export { ActivityDiff, } from './activity-diff';
+export { RecordHistory, } from './record-history';
+export { ActivityTimeline, } from './activity-timeline';

package/dist/record-history.d.ts

@@ -0,0 +1,41 @@
+/**
+ * record-history.tsx
+ *
+ * <RecordHistory> — chronological timeline of all ActivityEvents for a single
+ * record. Most recent event first. Each event is shown as a collapsible card
+ * with actor, relative date, and the <ActivityDiff> inline.
+ *
+ * Intended to be embedded in a record dialog tab ("Historial").
+ *
+ * Transport-agnostic: events and column metadata arrive via props. No fetching.
+ */
+import * as React from 'react';
+import type { ColumnDefinition } from './types';
+import type { ActivityEvent } from './activity-diff';
+export interface RecordHistoryProps {
+    /**
+     * All activity events for the record, in any order. The component sorts
+     * them chronologically (most recent first).
+     */
+    events: ActivityEvent[];
+    /**
+     * Column metadata for the record's model. Forwarded to <ActivityDiff> so
+     * field labels and display types are resolved correctly.
+     */
+    columns?: ColumnDefinition[];
+    /** IANA timezone for datetime cells. */
+    timeZone?: string;
+    /** ISO 4217 currency for money cells. */
+    currency?: string;
+    /** BCP-47 locale. Defaults to 'es'. */
+    locale?: string;
+    /** Class applied to the root element. */
+    className?: string;
+}
+/**
+ * Shows the full activity history of a single record as a vertical timeline.
+ * Each event is collapsible — the header shows actor + time; expanding reveals
+ * the <ActivityDiff> with field-level changes.
+ */
+export declare const RecordHistory: React.FC<RecordHistoryProps>;
+//# sourceMappingURL=record-history.d.ts.map

package/dist/record-history.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-history.d.ts","sourceRoot":"","sources":["../src/record-history.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,kBAAkB;IAC/B;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAoCD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoJtD,CAAA"}

package/dist/record-history.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * record-history.tsx
+ *
+ * <RecordHistory> — chronological timeline of all ActivityEvents for a single
+ * record. Most recent event first. Each event is shown as a collapsible card
+ * with actor, relative date, and the <ActivityDiff> inline.
+ *
+ * Intended to be embedded in a record dialog tab ("Historial").
+ *
+ * Transport-agnostic: events and column metadata arrive via props. No fetching.
+ */
+import * as React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { es, enUS } from 'date-fns/locale';
+import { ChevronDown, ChevronRight, Clock } from 'lucide-react';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Avatar, AvatarFallback, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
+import { getInitials } from '@asteby/metacore-ui/lib';
+import { ActivityDiff } from './activity-diff';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const ACTION_LABELS = {
+    created: 'Creó el registro',
+    create: 'Creó el registro',
+    updated: 'Actualizó el registro',
+    update: 'Actualizó el registro',
+    deleted: 'Eliminó el registro',
+    delete: 'Eliminó el registro',
+};
+function actionLabel(action) {
+    return ACTION_LABELS[action.toLowerCase()] ?? action;
+}
+const ACTION_DOT_COLOR = {
+    created: '#22c55e',
+    create: '#22c55e',
+    updated: '#eab308',
+    update: '#eab308',
+    deleted: '#ef4444',
+    delete: '#ef4444',
+};
+function actionDotColor(action) {
+    return ACTION_DOT_COLOR[action.toLowerCase()] ?? '#6b7280';
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Shows the full activity history of a single record as a vertical timeline.
+ * Each event is collapsible — the header shows actor + time; expanding reveals
+ * the <ActivityDiff> with field-level changes.
+ */
+export const RecordHistory = ({ events, columns, timeZone, currency, locale = 'es', className, }) => {
+    const dateLocale = locale === 'en' ? enUS : es;
+    // Sort: most recent first
+    const sorted = React.useMemo(() => [...events].sort((a, b) => new Date(b.occurred_at).getTime() - new Date(a.occurred_at).getTime()), [events]);
+    // Expand the most-recent event by default
+    const [openIds, setOpenIds] = React.useState(() => sorted.length > 0 ? new Set([sorted[0].id]) : new Set());
+    const toggle = (id) => {
+        setOpenIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    if (sorted.length === 0) {
+        return (_jsxs("div", { className: cn('flex flex-col items-center justify-center py-12 gap-2 text-muted-foreground', className), children: [_jsx(Clock, { className: "h-8 w-8 opacity-40" }), _jsx("p", { className: "text-sm", children: "Sin historial de cambios." })] }));
+    }
+    return (_jsxs("div", { className: cn('relative pl-5', className), children: [_jsx("span", { className: "absolute left-2 top-2 bottom-2 w-px bg-border", "aria-hidden": "true" }), _jsx("div", { className: "space-y-3", children: sorted.map((event) => {
+                    const isOpen = openIds.has(event.id);
+                    const dotColor = actionDotColor(event.action);
+                    const actor = event.actor_label || event.actor_id || 'Sistema';
+                    const timeAgo = (() => {
+                        try {
+                            return formatDistanceToNow(new Date(event.occurred_at), { addSuffix: true, locale: dateLocale });
+                        }
+                        catch {
+                            return event.occurred_at;
+                        }
+                    })();
+                    const fullDate = (() => {
+                        try {
+                            return new Date(event.occurred_at).toLocaleString(locale === 'en' ? 'en-US' : 'es-MX', {
+                                ...(timeZone ? { timeZone } : {}),
+                                dateStyle: 'medium',
+                                timeStyle: 'short',
+                            });
+                        }
+                        catch {
+                            return event.occurred_at;
+                        }
+                    })();
+                    return (_jsx(Collapsible, { open: isOpen, onOpenChange: () => toggle(event.id), children: _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute -left-5 top-3.5 h-2.5 w-2.5 rounded-full border-2 border-background -translate-x-[4px]", style: { background: dotColor }, "aria-hidden": "true" }), _jsxs("div", { className: "rounded-lg border border-border/60 bg-card overflow-hidden", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-muted/30 transition-colors", children: [_jsx(Avatar, { className: "h-7 w-7 rounded-full shrink-0", children: _jsx(AvatarFallback, { className: "text-[9px] font-bold bg-primary/10 text-primary", children: getInitials(actor) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: actor }), _jsx("span", { className: "text-sm text-muted-foreground", children: actionLabel(event.action) })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-0.5", children: [_jsx(Clock, { className: "h-3 w-3 text-muted-foreground/60 shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground", title: fullDate, children: timeAgo }), event.addon_key && (_jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4 ml-1", children: event.addon_key }))] })] }), _jsx("span", { className: "shrink-0 text-muted-foreground", children: isOpen ? (_jsx(ChevronDown, { className: "h-4 w-4" })) : (_jsx(ChevronRight, { className: "h-4 w-4" })) })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "border-t border-border/40 px-4 py-3", children: _jsx(ActivityDiff, { event: event, columns: columns, timeZone: timeZone, currency: currency, locale: locale }) }) })] })] }) }, event.id));
+                }) })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.10.1",
+  "version": "18.11.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.5.1",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.5.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",