@asteby/metacore-runtime-react 18.10.1 → 18.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @asteby/metacore-runtime-react
 
+## 18.11.0
+
+### Minor Changes
+
+- 2cdb047: Add Activity / Time Machine components: `ActivityDiff`, `RecordHistory`, and
+  `ActivityTimeline`.
+  - `ActivityDiff` — renders the field-level diff of a single `ActivityEvent`
+    (created/updated/deleted states, before→after per field, toggle all/changed).
+  - `RecordHistory` — chronological timeline of all events for a single record,
+    collapsible cards, embeddable in a record dialog "Historial" tab.
+  - `ActivityTimeline` — global feed grouped by `correlation_id`, with client-side
+    filters (model, actor, action, date range) and injectable `resolveColumns(model)`
+    resolver so hosts supply metadata without any internal fetch.
+
+  All three components are transport-agnostic (no fetch, no API calls) and reuse
+  the existing display-type renderers (currency, status, date, boolean, relation
+  chips, tags, color, url) via the new `ActivityValueRenderer` helper, keeping
+  table cells and diff cells visually consistent.
+
+  Also exports `ActivityValueRenderer` as a standalone pure renderer for use
+  outside the activity components.
+
+## 18.10.2
+
+### Patch Changes
+
+- 530ad31: The totals footer is now pinned to the bottom of the table box even with few
+  rows (the table fills its container height and a spacer row absorbs the slack),
+  instead of floating right under the last row.
+
 ## 18.10.1
 
 ### Patch Changes

package/dist/activity-diff.d.ts

@@ -0,0 +1,70 @@
+/**
+ * activity-diff.tsx
+ *
+ * <ActivityDiff> — renders the field-level diff of a single ActivityEvent.
+ *
+ * Three visual states driven by `event.action`:
+ *   - created  → green "after" column only (no before)
+ *   - deleted  → red "before" column only (no after)
+ *   - updated  → yellow "before → after" side-by-side per field
+ *
+ * Consumers pass the declarative `columns` metadata array (same shape as
+ * `TableMetadata.columns`) so labels and display types are resolved without
+ * any internal fetch. Degrades gracefully when `columns` is empty/absent.
+ *
+ * Toggle: "Todos los campos / Solo cambios" (with changed-field counter).
+ */
+import * as React from 'react';
+import type { ColumnDefinition } from './types';
+/**
+ * The canonical activity event shape as produced by the kernel / host backend.
+ * Transport-agnostic — the component only reads the fields it needs.
+ */
+export interface ActivityEvent {
+    id: string;
+    correlation_id?: string | null;
+    actor_id?: string | null;
+    actor_label?: string | null;
+    addon_key: string;
+    model: string;
+    record_id: string;
+    action: string;
+    kind?: string | null;
+    before?: Record<string, unknown> | null;
+    after?: Record<string, unknown> | null;
+    /**
+     * Explicit diff map produced by the backend. When present, only these keys
+     * are "changed" fields. When absent, the diff is derived from before/after.
+     */
+    changes?: Record<string, {
+        from: unknown;
+        to: unknown;
+    }> | null;
+    summary?: string | null;
+    occurred_at: string;
+}
+export interface ActivityDiffProps {
+    /** The activity event to render. */
+    event: ActivityEvent;
+    /**
+     * Column metadata for the model. Used to resolve `col.label` and display
+     * type. Pass `TableMetadata.columns` from the host's metadata cache.
+     * Optional — field keys are shown raw when absent.
+     */
+    columns?: ColumnDefinition[];
+    /** IANA timezone for datetime cells (org config). */
+    timeZone?: string;
+    /** ISO 4217 currency for money cells (org config). */
+    currency?: string;
+    /** BCP-47 locale. Defaults to 'es'. */
+    locale?: string;
+    /** Class applied to the root element. */
+    className?: string;
+}
+/**
+ * Renders the field-level diff of a single ActivityEvent. Shows each field
+ * with its label (from `columns`) and value formatted using the column's
+ * display type. Supports a toggle to show only changed fields vs. all fields.
+ */
+export declare const ActivityDiff: React.FC<ActivityDiffProps>;
+//# sourceMappingURL=activity-diff.d.ts.map

package/dist/activity-diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-diff.d.ts","sourceRoot":"","sources":["../src/activity-diff.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAO/C;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,IAAI,CAAA;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,oCAAoC;IACpC,KAAK,EAAE,aAAa,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AA2ED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmJpD,CAAA"}

package/dist/activity-diff.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * activity-diff.tsx
+ *
+ * <ActivityDiff> — renders the field-level diff of a single ActivityEvent.
+ *
+ * Three visual states driven by `event.action`:
+ *   - created  → green "after" column only (no before)
+ *   - deleted  → red "before" column only (no after)
+ *   - updated  → yellow "before → after" side-by-side per field
+ *
+ * Consumers pass the declarative `columns` metadata array (same shape as
+ * `TableMetadata.columns`) so labels and display types are resolved without
+ * any internal fetch. Degrades gracefully when `columns` is empty/absent.
+ *
+ * Toggle: "Todos los campos / Solo cambios" (with changed-field counter).
+ */
+import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Badge } from '@asteby/metacore-ui/primitives';
+import { ActivityValueRenderer } from './activity-value-renderer';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Returns all field keys that appear in the diff. */
+function diffKeys(event) {
+    if (event.changes && Object.keys(event.changes).length > 0) {
+        return Object.keys(event.changes);
+    }
+    const before = event.before ?? {};
+    const after = event.after ?? {};
+    const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
+    // Filter out meta-level keys that are always present and rarely meaningful
+    // in a human-readable diff (id, created_at, updated_at, organization_id).
+    const META = new Set(['id', 'created_at', 'updated_at', 'organization_id', 'org_id']);
+    keys.forEach((k) => { if (META.has(k))
+        keys.delete(k); });
+    return Array.from(keys);
+}
+/** Returns the set of keys where the value actually changed. */
+function changedKeys(event) {
+    if (event.changes && Object.keys(event.changes).length > 0) {
+        return new Set(Object.keys(event.changes));
+    }
+    const before = event.before ?? {};
+    const after = event.after ?? {};
+    const changed = new Set();
+    const all = new Set([...Object.keys(before), ...Object.keys(after)]);
+    all.forEach((k) => {
+        if (JSON.stringify(before[k]) !== JSON.stringify(after[k]))
+            changed.add(k);
+    });
+    return changed;
+}
+function resolveColumn(key, columns) {
+    return columns?.find((c) => c.key === key);
+}
+function resolveLabel(key, columns) {
+    const col = resolveColumn(key, columns);
+    if (col?.label)
+        return col.label;
+    // Humanize snake_case as last resort
+    return key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function actionVariant(action) {
+    const a = action.toLowerCase();
+    if (a === 'created' || a === 'create')
+        return 'created';
+    if (a === 'deleted' || a === 'delete')
+        return 'deleted';
+    if (a === 'updated' || a === 'update')
+        return 'updated';
+    return 'other';
+}
+const VARIANT_BADGE = {
+    created: { label: 'Creado', className: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900' },
+    updated: { label: 'Actualizado', className: 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-900' },
+    deleted: { label: 'Eliminado', className: 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-900' },
+    other: { label: '', className: 'bg-muted text-muted-foreground border-border' },
+};
+// Subtle row highlight colors — using inline style so arbitrary values are
+// never dropped by the host's Tailwind class scan.
+const ROW_STYLE = {
+    created: { background: 'color-mix(in srgb, #22c55e 6%, transparent)' },
+    deleted: { background: 'color-mix(in srgb, #ef4444 6%, transparent)' },
+    updated: {},
+    other: {},
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Renders the field-level diff of a single ActivityEvent. Shows each field
+ * with its label (from `columns`) and value formatted using the column's
+ * display type. Supports a toggle to show only changed fields vs. all fields.
+ */
+export const ActivityDiff = ({ event, columns, timeZone, currency, locale = 'es', className, }) => {
+    const variant = actionVariant(event.action);
+    const allKeys = diffKeys(event);
+    const changed = changedKeys(event);
+    const [showOnlyChanged, setShowOnlyChanged] = React.useState(true);
+    const displayedKeys = showOnlyChanged ? allKeys.filter((k) => changed.has(k)) : allKeys;
+    const isCreated = variant === 'created';
+    const isDeleted = variant === 'deleted';
+    const variantBadge = VARIANT_BADGE[variant] ?? VARIANT_BADGE.other;
+    if (allKeys.length === 0 && !event.summary) {
+        return (_jsx("div", { className: cn('text-sm text-muted-foreground italic py-1', className), children: "Sin campos registrados." }));
+    }
+    return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Badge, { variant: "outline", className: cn('text-xs font-medium px-2 py-0.5', variantBadge.className), children: variantBadge.label || event.action }), changed.size > 0 && variant === 'updated' && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [changed.size, " campo", changed.size !== 1 ? 's' : '', " modificado", changed.size !== 1 ? 's' : ''] })), allKeys.length > 0 && variant === 'updated' && (_jsx("button", { type: "button", onClick: () => setShowOnlyChanged((v) => !v), className: "ml-auto text-xs text-primary hover:underline", children: showOnlyChanged ? `Ver todos (${allKeys.length})` : 'Solo cambios' }))] }), event.summary && (_jsx("p", { className: "text-sm text-muted-foreground italic", children: event.summary })), displayedKeys.length > 0 && (_jsxs("div", { className: "rounded-lg border border-border/60 overflow-hidden text-sm", children: [_jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: [_jsx("span", { children: "Campo" }), !isCreated && _jsx("span", { children: isDeleted ? 'Valor' : 'Antes' }), isCreated && _jsx("span", {}), !isDeleted && _jsx("span", { children: isCreated ? 'Valor' : 'Después' }), isDeleted && _jsx("span", {})] }), displayedKeys.map((key, idx) => {
+                        const col = resolveColumn(key, columns);
+                        const label = resolveLabel(key, columns);
+                        const isChanged = changed.has(key);
+                        let fromVal;
+                        let toVal;
+                        if (event.changes?.[key]) {
+                            fromVal = event.changes[key].from;
+                            toVal = event.changes[key].to;
+                        }
+                        else {
+                            fromVal = event.before?.[key];
+                            toVal = event.after?.[key];
+                        }
+                        const rowStyle = isCreated
+                            ? ROW_STYLE.created
+                            : isDeleted
+                                ? ROW_STYLE.deleted
+                                : isChanged
+                                    ? {}
+                                    : {};
+                        return (_jsxs("div", { style: rowStyle, className: cn('grid grid-cols-[1fr_1fr_1fr] items-start px-3 py-2 gap-x-2', idx !== displayedKeys.length - 1 && 'border-b border-border/30', isChanged && variant === 'updated' && 'bg-yellow-50/40 dark:bg-yellow-950/10'), children: [_jsx("span", { className: "text-xs font-medium text-foreground/70 pt-0.5 truncate", title: label, children: label }), !isCreated ? (_jsx("span", { className: cn(isDeleted ? 'col-span-2' : ''), children: _jsx(ActivityValueRenderer, { value: isDeleted ? fromVal : fromVal, col: col, timeZone: timeZone, currency: currency, locale: locale }) })) : (_jsx("span", {})), !isDeleted ? (_jsxs("span", { className: cn(isCreated ? 'col-span-2' : ''), children: [isChanged && variant === 'updated' && (_jsx("span", { className: "inline-flex items-center gap-1 align-middle mr-1", children: _jsx(ArrowRight, { className: "h-3 w-3 text-muted-foreground/50 shrink-0" }) })), _jsx(ActivityValueRenderer, { value: isCreated ? toVal : toVal, col: col, timeZone: timeZone, currency: currency, locale: locale })] })) : (_jsx("span", {}))] }, key));
+                    })] }))] }));
+};

package/dist/activity-timeline.d.ts

@@ -0,0 +1,56 @@
+/**
+ * activity-timeline.tsx
+ *
+ * <ActivityTimeline> — global activity feed grouped by correlation_id.
+ *
+ * Events that share a correlation_id are folded into a single "operation"
+ * group (e.g. "Juan · Pedido creado · 4 cambios"). Events without a
+ * correlation_id appear as standalone entries.
+ *
+ * Filters: by model, actor, action, and date range. All client-side.
+ *
+ * Transport-agnostic: events arrive via props; column metadata is resolved
+ * per-model via the `resolveColumns(model)` injected function. No fetch.
+ */
+import * as React from 'react';
+import type { ColumnDefinition } from './types';
+import type { ActivityEvent } from './activity-diff';
+export interface ActivityTimelineProps {
+    /**
+     * All activity events to display. The component groups, sorts, and filters
+     * them client-side — order does not matter.
+     */
+    events: ActivityEvent[];
+    /**
+     * Injectable column metadata resolver. Called once per unique model name
+     * encountered in the event list. Returns the column definitions for that
+     * model, or undefined/empty when the host has no metadata for it.
+     *
+     * The host typically implements this as a cache lookup against its
+     * MetadataService / metadata-cache store.
+     */
+    resolveColumns?: (model: string) => ColumnDefinition[] | undefined;
+    /** 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;
+    /**
+     * When true, the filter bar is hidden. Useful when the host already
+     * provides external filter controls and wants to feed pre-filtered events.
+     */
+    hideFilters?: boolean;
+}
+/**
+ * Global activity feed. Groups correlated events, renders a vertical timeline
+ * with filter controls (model, actor, action, date range).
+ *
+ * The `resolveColumns` function is injected by the host. It maps a model name
+ * to its `ColumnDefinition[]` (e.g. from the host's metadata-cache store).
+ * When omitted or when it returns nothing, field keys are shown raw.
+ */
+export declare const ActivityTimeline: React.FC<ActivityTimelineProps>;
+//# sourceMappingURL=activity-timeline.d.ts.map

package/dist/activity-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-timeline.d.ts","sourceRoot":"","sources":["../src/activity-timeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA+B9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAOpD,MAAM,WAAW,qBAAqB;IAClC;;;OAGG;IACH,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,gBAAgB,EAAE,GAAG,SAAS,CAAA;IAClE,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;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACxB;AAqQD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8N5D,CAAA"}

package/dist/activity-timeline.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * activity-timeline.tsx
+ *
+ * <ActivityTimeline> — global activity feed grouped by correlation_id.
+ *
+ * Events that share a correlation_id are folded into a single "operation"
+ * group (e.g. "Juan · Pedido creado · 4 cambios"). Events without a
+ * correlation_id appear as standalone entries.
+ *
+ * Filters: by model, actor, action, and date range. All client-side.
+ *
+ * Transport-agnostic: events arrive via props; column metadata is resolved
+ * per-model via the `resolveColumns(model)` injected function. No fetch.
+ */
+import * as React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { es, enUS } from 'date-fns/locale';
+import { ChevronDown, ChevronRight, Clock, Filter, X, Layers, Activity, } from 'lucide-react';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Avatar, AvatarFallback, Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Button, } from '@asteby/metacore-ui/primitives';
+import { getInitials } from '@asteby/metacore-ui/lib';
+import { ActivityDiff } from './activity-diff';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+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';
+}
+const ACTION_LABELS_ES = {
+    created: 'creó',
+    create: 'creó',
+    updated: 'actualizó',
+    update: 'actualizó',
+    deleted: 'eliminó',
+    delete: 'eliminó',
+};
+function groupEvents(events) {
+    const grouped = new Map();
+    for (const ev of events) {
+        const key = ev.correlation_id || ev.id;
+        const arr = grouped.get(key) ?? [];
+        arr.push(ev);
+        grouped.set(key, arr);
+    }
+    const result = [];
+    grouped.forEach((evs, key) => {
+        // Sort ascending (oldest first within a group)
+        const sorted = [...evs].sort((a, b) => new Date(a.occurred_at).getTime() - new Date(b.occurred_at).getTime());
+        const root = sorted[0];
+        // Count distinct changed fields across all events in this group
+        let changedFieldCount = 0;
+        for (const ev of sorted) {
+            if (ev.changes)
+                changedFieldCount += Object.keys(ev.changes).length;
+            else if (ev.before || ev.after) {
+                const keys = new Set([...Object.keys(ev.before ?? {}), ...Object.keys(ev.after ?? {})]);
+                changedFieldCount += keys.size;
+            }
+        }
+        result.push({ key, root, events: sorted, changedFieldCount });
+    });
+    // Sort groups: most recent root event first
+    result.sort((a, b) => new Date(b.root.occurred_at).getTime() - new Date(a.root.occurred_at).getTime());
+    return result;
+}
+function uniqueValues(events, key) {
+    const set = new Set();
+    for (const ev of events) {
+        const v = ev[key];
+        if (v !== undefined && v !== null && v !== '')
+            set.add(String(v));
+    }
+    return Array.from(set).sort();
+}
+const GroupCard = ({ group, resolveColumns, timeZone, currency, locale, dateLocale, isOpen, onToggle, }) => {
+    const { root, events, changedFieldCount } = group;
+    const isMulti = events.length > 1;
+    const actor = root.actor_label || root.actor_id || 'Sistema';
+    const dotColor = actionDotColor(root.action);
+    const timeAgo = (() => {
+        try {
+            return formatDistanceToNow(new Date(root.occurred_at), { addSuffix: true, locale: dateLocale });
+        }
+        catch {
+            return root.occurred_at;
+        }
+    })();
+    const fullDate = (() => {
+        try {
+            return new Date(root.occurred_at).toLocaleString(locale === 'en' ? 'en-US' : 'es-MX', {
+                ...(timeZone ? { timeZone } : {}),
+                dateStyle: 'medium',
+                timeStyle: 'short',
+            });
+        }
+        catch {
+            return root.occurred_at;
+        }
+    })();
+    const summaryLine = root.summary
+        ? root.summary
+        : `${actor} ${ACTION_LABELS_ES[root.action.toLowerCase()] ?? root.action} ${root.model}`;
+    return (_jsx(Collapsible, { open: isOpen, onOpenChange: onToggle, children: _jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute -left-5 top-4 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-start 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 mt-0.5", 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: [_jsx("p", { className: "text-sm font-medium text-foreground truncate", title: summaryLine, children: summaryLine }), _jsxs("div", { className: "flex items-center gap-2 mt-1 flex-wrap", children: [_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Clock, { className: "h-3 w-3 opacity-60 shrink-0" }), _jsx("span", { title: fullDate, children: timeAgo })] }), _jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0 h-4", children: root.model }), isMulti && (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Layers, { className: "h-3 w-3 opacity-60 shrink-0" }), events.length, " eventos"] })), changedFieldCount > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: [changedFieldCount, " campo", changedFieldCount !== 1 ? 's' : ''] }))] })] }), _jsx("span", { className: "shrink-0 text-muted-foreground mt-1", 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 divide-y divide-border/30", children: events.map((ev, idx) => {
+                                    const cols = resolveColumns(ev.model);
+                                    const evActor = ev.actor_label || ev.actor_id || 'Sistema';
+                                    return (_jsxs("div", { className: "px-4 py-3 space-y-2", children: [isMulti && (_jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground/70", children: ev.model }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: evActor }), idx > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { title: ev.occurred_at, children: (() => {
+                                                                    try {
+                                                                        return formatDistanceToNow(new Date(ev.occurred_at), { addSuffix: true, locale: dateLocale });
+                                                                    }
+                                                                    catch {
+                                                                        return ev.occurred_at;
+                                                                    }
+                                                                })() })] }))] })), _jsx(ActivityDiff, { event: ev, columns: cols, timeZone: timeZone, currency: currency, locale: locale })] }, ev.id));
+                                }) }) })] })] }) }));
+};
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+/**
+ * Global activity feed. Groups correlated events, renders a vertical timeline
+ * with filter controls (model, actor, action, date range).
+ *
+ * The `resolveColumns` function is injected by the host. It maps a model name
+ * to its `ColumnDefinition[]` (e.g. from the host's metadata-cache store).
+ * When omitted or when it returns nothing, field keys are shown raw.
+ */
+export const ActivityTimeline = ({ events, resolveColumns = () => undefined, timeZone, currency, locale = 'es', className, hideFilters = false, }) => {
+    const dateLocale = locale === 'en' ? enUS : es;
+    // -----------------------------------------------------------------------
+    // Filter state
+    // -----------------------------------------------------------------------
+    const [filterModel, setFilterModel] = React.useState('__all__');
+    const [filterActor, setFilterActor] = React.useState('__all__');
+    const [filterAction, setFilterAction] = React.useState('__all__');
+    const [filterFrom, setFilterFrom] = React.useState('');
+    const [filterTo, setFilterTo] = React.useState('');
+    const models = React.useMemo(() => uniqueValues(events, 'model'), [events]);
+    const actors = React.useMemo(() => uniqueValues(events, 'actor_label').filter(Boolean), [events]);
+    const actions = React.useMemo(() => uniqueValues(events, 'action'), [events]);
+    const hasFilters = filterModel !== '__all__' ||
+        filterActor !== '__all__' ||
+        filterAction !== '__all__' ||
+        filterFrom !== '' ||
+        filterTo !== '';
+    const clearFilters = () => {
+        setFilterModel('__all__');
+        setFilterActor('__all__');
+        setFilterAction('__all__');
+        setFilterFrom('');
+        setFilterTo('');
+    };
+    // -----------------------------------------------------------------------
+    // Filtered + grouped events
+    // -----------------------------------------------------------------------
+    const filtered = React.useMemo(() => {
+        return events.filter((ev) => {
+            if (filterModel !== '__all__' && ev.model !== filterModel)
+                return false;
+            if (filterActor !== '__all__' && ev.actor_label !== filterActor)
+                return false;
+            if (filterAction !== '__all__' && ev.action !== filterAction)
+                return false;
+            if (filterFrom) {
+                const from = new Date(filterFrom);
+                if (new Date(ev.occurred_at) < from)
+                    return false;
+            }
+            if (filterTo) {
+                const to = new Date(filterTo);
+                // inclusive end-of-day
+                to.setHours(23, 59, 59, 999);
+                if (new Date(ev.occurred_at) > to)
+                    return false;
+            }
+            return true;
+        });
+    }, [events, filterModel, filterActor, filterAction, filterFrom, filterTo]);
+    const groups = React.useMemo(() => groupEvents(filtered), [filtered]);
+    // -----------------------------------------------------------------------
+    // Open/close state (first group open by default)
+    // -----------------------------------------------------------------------
+    const [openKeys, setOpenKeys] = React.useState(() => groups.length > 0 ? new Set([groups[0].key]) : new Set());
+    // Reset open state when filtered groups change substantially
+    const prevGroupKeysRef = React.useRef('');
+    React.useEffect(() => {
+        const current = groups.map((g) => g.key).join(',');
+        if (current !== prevGroupKeysRef.current) {
+            prevGroupKeysRef.current = current;
+            setOpenKeys(groups.length > 0 ? new Set([groups[0].key]) : new Set());
+        }
+    }, [groups]);
+    const toggleGroup = (key) => {
+        setOpenKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    return (_jsxs("div", { className: cn('space-y-4', className), children: [!hideFilters && (_jsxs("div", { className: "rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Filter, { className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "Filtros" }), hasFilters && (_jsxs(Button, { variant: "ghost", size: "sm", className: "ml-auto h-7 px-2 text-xs", onClick: clearFilters, children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Limpiar"] }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: [models.length > 1 && (_jsxs(Select, { value: filterModel, onValueChange: setFilterModel, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, { placeholder: "M\u00F3dulo" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Todos los m\u00F3dulos" }), models.map((m) => (_jsx(SelectItem, { value: m, children: m }, m)))] })] })), actors.length > 1 && (_jsxs(Select, { value: filterActor, onValueChange: setFilterActor, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, { placeholder: "Usuario" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Todos los usuarios" }), actors.map((a) => (_jsx(SelectItem, { value: a, children: a }, a)))] })] })), actions.length > 1 && (_jsxs(Select, { value: filterAction, onValueChange: setFilterAction, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, { placeholder: "Acci\u00F3n" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "Todas las acciones" }), actions.map((a) => (_jsx(SelectItem, { value: a, children: a }, a)))] })] })), _jsxs("div", { className: "col-span-2 sm:col-span-1 flex gap-1", children: [_jsx(Input, { type: "date", value: filterFrom, onChange: (e) => setFilterFrom(e.target.value), className: "h-8 text-xs", placeholder: "Desde", title: "Desde" }), _jsx(Input, { type: "date", value: filterTo, onChange: (e) => setFilterTo(e.target.value), className: "h-8 text-xs", placeholder: "Hasta", title: "Hasta" })] })] })] })), groups.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 gap-3 text-muted-foreground", children: [_jsx(Activity, { className: "h-10 w-10 opacity-30" }), _jsx("p", { className: "text-sm", children: hasFilters ? 'Sin resultados con los filtros actuales.' : 'Sin actividad registrada.' })] })) : (_jsxs("div", { className: "relative pl-5 space-y-3", children: [_jsx("span", { className: "absolute left-2 top-2 bottom-2 w-px bg-border", "aria-hidden": "true" }), groups.map((group) => (_jsx(GroupCard, { group: group, resolveColumns: resolveColumns, timeZone: timeZone, currency: currency, locale: locale, dateLocale: dateLocale, isOpen: openKeys.has(group.key), onToggle: () => toggleGroup(group.key) }, group.key)))] }))] }));
+};

package/dist/activity-value-renderer.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 type { ColumnDefinition } from './types';
+export interface ActivityValueRendererProps {
+    /** The raw value to display (from before/after/changes). */
+    value: unknown;
+    /** Column metadata for display formatting. Optional — falls back to string. */
+    col?: ColumnDefinition;
+    /** IANA timezone (org config) for datetime cells. */
+    timeZone?: string;
+    /** ISO 4217 currency for money cells. */
+    currency?: string;
+    /** BCP-47 locale tag (e.g. 'es', 'en'). Defaults to 'es'. */
+    locale?: string;
+}
+/**
+ * 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 declare const ActivityValueRenderer: React.FC<ActivityValueRendererProps>;
+//# sourceMappingURL=activity-value-renderer.d.ts.map

package/dist/activity-value-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-value-renderer.d.ts","sourceRoot":"","sources":["../src/activity-value-renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiD/C,MAAM,WAAW,0BAA0B;IACvC,4DAA4D;IAC5D,KAAK,EAAE,OAAO,CAAA;IACd,+EAA+E;IAC/E,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAwRtE,CAAA"}