@asteby/metacore-runtime-react 23.0.0 → 23.2.0

package/dist/dynamic-table.js

@@ -25,13 +25,15 @@ import { useMetadataCache } from './metadata-cache';
 import { useApi, useCurrentBranch } from './api-context';
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns';
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders';
+import { FilterChipsRow, translateOptionLabels } from './filter-chips';
+import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll';
 import { OptionsContext } from './options-context';
 import { getSearchableColumnKeys } from './column-visibility';
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context';
 import { useDynamicRowActions } from './dynamic-row-actions';
 import { ExportDialog } from './dialogs/export';
 import { ImportDialog } from './dialogs/import';
-export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, }) {
+export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, infiniteScroll = false, }) {
     const { t, i18n } = useTranslation();
     const api = useApi();
     const currentBranch = useCurrentBranch();
@@ -45,6 +47,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const [footerTotals, setFooterTotals] = useState({});
     const [loading, setLoading] = useState(!cachedMeta);
     const [loadingData, setLoadingData] = useState(true);
+    // Infinite-scroll: a top-up page is in flight (distinct from the initial
+    // page load so only a small bottom spinner shows, not the whole-table one).
+    const [loadingMore, setLoadingMore] = useState(false);
+    const infPageRef = useRef(1);
     const [optionsMap, setOptionsMap] = useState(new Map());
     const [exportOpen, setExportOpen] = useState(false);
     const [importOpen, setImportOpen] = useState(false);
@@ -391,10 +397,68 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             console.error('Error al cargar los totales', error);
         }
     }, [model, metadata, aggregateColumns, buildFilterParams, endpoint, currentBranch?.id, api]);
+    // ---- infinite scroll: page fetch that REPLACES (page 1) or APPENDS ----
+    const infPageSize = 30;
+    const fetchPage = useCallback(async (page, append) => {
+        if (!metadata)
+            return;
+        if (append)
+            setLoadingMore(true);
+        else
+            setLoadingData(true);
+        try {
+            const params = {
+                page,
+                per_page: infPageSize,
+                ...buildFilterParams(),
+            };
+            const res = (await api.get(endpoint || `/data/${model}`, {
+                params,
+            }));
+            if (res.data.success) {
+                const rows = res.data.data || [];
+                setData((prev) => (append ? dedupeById(prev, rows) : rows));
+                if (res.data.meta)
+                    setRowCount(res.data.meta.total);
+            }
+        }
+        catch (error) {
+            console.error('Error al cargar los datos', error);
+        }
+        finally {
+            if (append)
+                setLoadingMore(false);
+            else
+                setLoadingData(false);
+        }
+    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id]);
+    // Signature of everything that must reset the incremental list to page 1:
+    // the filters/search AND the sort (both live in buildFilterParams).
+    const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
+    const loadNextPage = useCallback(() => {
+        if (loadingMore || loadingData)
+            return;
+        if (data.length >= rowCount)
+            return;
+        infPageRef.current += 1;
+        void fetchPage(infPageRef.current, true);
+    }, [loadingMore, loadingData, data.length, rowCount, fetchPage]);
+    // Infinite-scroll sentinels. There are two scroll containers (desktop
+    // table + mobile card list) but only one is laid out at a time — the CSS
+    // `hidden`/`sm:hidden` container has no box, so its observer never fires.
+    // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
+    // `disabled` flag keep concurrent/exhausted fetches from doubling up.
+    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || data.length >= rowCount;
+    const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
+    const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const initialFetchDone = useRef(false);
     useEffect(() => {
         if (!metadata)
             return;
+        // Infinite mode owns its own fetching (reset-to-page-1 effect below);
+        // the classic pagination-driven path is skipped entirely.
+        if (infiniteScroll)
+            return;
         if (!initialFetchDone.current) {
             initialFetchDone.current = true;
             fetchData();
@@ -406,8 +470,41 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             fetchAggregates();
         }, 300);
         return () => clearTimeout(timeoutId);
-    }, [fetchData, fetchAggregates, metadata]);
-    const handleRefresh = useCallback(() => { fetchData(); fetchAggregates(); }, [fetchData, fetchAggregates]);
+    }, [fetchData, fetchAggregates, metadata, infiniteScroll]);
+    // Infinite mode: (re)load page 1 on mount and whenever the filters/sort/
+    // search change (or an explicit refreshTrigger) — replacing the accumulated
+    // rows and resetting the cursor.
+    useEffect(() => {
+        if (!infiniteScroll || !metadata)
+            return;
+        infPageRef.current = 1;
+        const first = !initialFetchDone.current;
+        initialFetchDone.current = true;
+        if (first) {
+            void fetchPage(1, false);
+            void fetchAggregates();
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            void fetchPage(1, false);
+            void fetchAggregates();
+        }, 300);
+        return () => clearTimeout(timeoutId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [infiniteScroll, metadata, filterSignature]);
+    const handleRefresh = useCallback(() => {
+        // Infinite mode owns its own list: refresh reloads page 1 and drops the
+        // accumulated pages (a classic fetchData would collapse it to one small
+        // pagination page). Classic mode keeps the pagination-driven refetch.
+        if (infiniteScroll) {
+            infPageRef.current = 1;
+            void fetchPage(1, false);
+        }
+        else {
+            fetchData();
+        }
+        fetchAggregates();
+    }, [infiniteScroll, fetchPage, fetchData, fetchAggregates]);
     // Per-row action dispatch (view/edit/delete/link/custom) + its dialogs live
     // in the shared hook so DynamicKanban's card menu behaves identically.
     const { handleInternalAction, dialogs: rowActionDialogs } = useDynamicRowActions({
@@ -462,11 +559,15 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // getDynamicColumns forwards `loadOptions` into the column meta). Facets base
     // derived off the list endpoint exactly like the aggregate endpoint below.
     const facetsBase = endpoint ? `${endpoint}/facets` : model ? `/data/${model}/facets` : null;
-    const { getFacetLoader } = useFacetLoaders(facetsBase);
+    const { getFacetLoader, prefetchFacets, facetOptions } = useFacetLoaders(facetsBase);
     const columnFilterConfigs = useMemo(() => {
         const map = new Map();
         if (!metadata)
             return map;
+        // Option labels arrive as manifest i18n keys; translate them here (the ui
+        // package has no i18n) so header filters, chips and value summaries show
+        // localized text. A raw value with no key falls through via defaultValue.
+        const tr = (label) => t(label, { defaultValue: label });
         const stageOptions = (metadata.stages ?? []).map((s) => ({
             label: s.label,
             value: s.key,
@@ -500,6 +601,9 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 if (loader) {
                     fType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → the header filter
+                    // opens with the list already there, no "Cargando…" flash.
+                    options = facetOptions.get(f.column || f.key) ?? [];
                 }
             }
             if (fType === 'select' && options.length === 0 && !f.searchEndpoint)
@@ -507,12 +611,14 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             map.set(f.key, {
                 filterType: fType,
                 filterKey: f.column || f.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[f.column || f.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
                 searchEndpoint: f.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q) => loadOptions(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             });
         }
         for (const c of metadata.columns ?? []) {
@@ -569,21 +675,64 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 if (loader) {
                     filterType = 'facet';
                     loadOptions = loader;
+                    // Prewarmed values (from prefetchFacets) → instant open.
+                    options = facetOptions.get(c.key) ?? [];
                 }
             }
             map.set(c.key, {
                 filterType,
                 filterKey: c.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[c.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint),
                 searchEndpoint: c.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q) => loadOptions(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             });
         }
         return map;
-    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader]);
+    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader, facetOptions, t]);
+    // Prewarm every facet field once the configs settle, so a text column's
+    // header filter opens instantly with values + counts (same as the kanban).
+    const facetFieldsSig = useMemo(() => {
+        const keys = [];
+        for (const config of columnFilterConfigs.values()) {
+            if (config.filterType === 'facet')
+                keys.push(config.filterKey);
+        }
+        return keys.join('|');
+    }, [columnFilterConfigs]);
+    useEffect(() => {
+        if (!facetFieldsSig)
+            return;
+        prefetchFacets(facetFieldsSig.split('|'));
+    }, [facetFieldsSig, prefetchFacets]);
+    // Active-filter chips (shared row with the kanban). One chip per field with a
+    // selection; the label is the translated filter/column label.
+    const activeFilterChips = useMemo(() => {
+        if (!metadata)
+            return [];
+        const out = [];
+        for (const [key, config] of columnFilterConfigs) {
+            if ((config.selectedValues?.length ?? 0) === 0)
+                continue;
+            const f = metadata.filters?.find((x) => x.key === key);
+            const c = metadata.columns?.find((x) => x.key === key);
+            const rawLabel = f?.label || c?.label || key;
+            out.push({
+                key,
+                label: t(rawLabel, { defaultValue: rawLabel }),
+                config,
+            });
+        }
+        return out;
+    }, [metadata, columnFilterConfigs, t]);
+    const clearAllDynamicFilters = useCallback(() => {
+        setDynamicFilters({});
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }, []);
     const columns = useMemo(() => {
         if (!viewMetadata)
             return [];
@@ -629,31 +778,35 @@ 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: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.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 ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
-                                                    const isActionsColumn = cell.column.id === 'actions';
-                                                    const isSelectColumn = cell.column.id === 'select';
-                                                    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)]'), onClick: (isActionsColumn || isSelectColumn) ? (e) => e.stopPropagation() : undefined, 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';
-                                            // Aggregate cell: render the SUM formatted like the body cell.
-                                            if (col && aggregateOf(col)) {
-                                                return (_jsx(TableCell, { className: `${stickyBase} text-right tabular-nums`, children: formatAggregateTotal(col, footerTotals[leaf.id], currency, i18n.language) }, leaf.id));
-                                            }
-                                            // First non-aggregate column carries the "Total" label.
-                                            return (_jsx(TableCell, { className: stickyBase, children: isFirst ? t('common.total', 'Total') : '' }, leaf.id));
-                                        }) }) }))] }) }), _jsx("div", { className: 'flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden', children: loadingData && data.length === 0 ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: 'rounded-lg border bg-card p-3', children: [_jsx(Skeleton, { className: 'h-4 w-24' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-40' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-32' })] }, i)))) : table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => {
-                            const cells = row.getVisibleCells();
-                            const actionsCell = cells.find((c) => c.column.id === 'actions');
-                            const dataCells = cells.filter((c) => c.column.id !== 'actions' && c.column.id !== 'select');
-                            return (_jsxs("div", { "data-state": row.getIsSelected() && 'selected', className: cn('flex flex-col gap-1.5 rounded-lg border bg-card p-3 data-[state=selected]:border-primary/40', onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: [dataCells.map((cell) => {
-                                        const header = cell.column.columnDef.header;
-                                        const label = typeof header === 'string' ? header : cell.column.id;
-                                        return (_jsxs("div", { className: 'flex items-start justify-between gap-3 text-sm', children: [_jsx("span", { className: 'shrink-0 text-muted-foreground', children: label }), _jsx("span", { className: 'min-w-0 break-words text-right font-medium', children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, cell.id));
-                                    }), actionsCell && (_jsx("div", { className: 'flex justify-end border-t pt-2', onClick: onRowClick ? (e) => e.stopPropagation() : undefined, children: flexRender(actionsCell.column.columnDef.cell, actionsCell.getContext()) }))] }, row.id));
-                        })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center gap-2 rounded-lg border bg-card py-12 text-muted-foreground', children: [_jsx("div", { className: 'flex h-16 w-16 items-center justify-center rounded-full bg-muted/50', children: _jsx(Inbox, { className: 'h-8 w-8' }) }), _jsx("h3", { className: 'text-base 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." })] })) }), _jsx("div", { className: 'shrink-0 pt-4', children: _jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions }) })] }), rowActionDialogs, _jsx(AlertDialog, { open: showBulkDeleteConfirm, onOpenChange: (open) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: isBulkDeleting ? 'Eliminando registros...' : '¿Eliminar múltiples registros?' }), _jsx(AlertDialogDescription, { children: isBulkDeleting ? (_jsxs("div", { className: "space-y-4 mt-4", children: [_jsx(Progress, { value: (bulkDeleteProgress / bulkDeleteTotal) * 100 }), _jsxs("p", { className: "text-center text-sm", children: ["Procesando ", bulkDeleteProgress, " de ", bulkDeleteTotal, " registros..."] })] })) : (_jsxs(_Fragment, { children: ["Esta acci\u00F3n no se puede deshacer. Se eliminar\u00E1n permanentemente ", _jsx("strong", { children: Object.keys(rowSelection).length }), " registro(s) de nuestros servidores."] })) })] }), !isBulkDeleting && (_jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmBulkDelete(); }, className: "bg-red-600 hover:bg-red-700", children: "Eliminar todos" })] }))] }) }), viewMetadata?.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), viewMetadata?.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), _jsx(DataTableBulkActions, { table: table, entityName: "registro", children: _jsxs(Button, { variant: "destructive", size: "sm", className: "h-8", onClick: () => setShowBulkDeleteConfirm(true), children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), " Eliminar"] }) })] }));
+    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsxs("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: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }), activeFilterChips.length > 0 && (_jsx("div", { className: 'pt-2', children: _jsx(FilterChipsRow, { fields: activeFilterChips, onClearAll: clearAllDynamicFilters, "data-testid": 'table-filter-chips' }) }))] }), _jsxs("div", { ref: infDesktopRoot, 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 ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
+                                                        const isActionsColumn = cell.column.id === 'actions';
+                                                        const isSelectColumn = cell.column.id === 'select';
+                                                        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)]'), onClick: (isActionsColumn || isSelectColumn) ? (e) => e.stopPropagation() : undefined, 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';
+                                                // Aggregate cell: render the SUM formatted like the body cell.
+                                                if (col && aggregateOf(col)) {
+                                                    return (_jsx(TableCell, { className: `${stickyBase} text-right tabular-nums`, children: formatAggregateTotal(col, footerTotals[leaf.id], currency, i18n.language) }, leaf.id));
+                                                }
+                                                // First non-aggregate column carries the "Total" label.
+                                                return (_jsx(TableCell, { className: stickyBase, children: isFirst ? t('common.total', 'Total') : '' }, leaf.id));
+                                            }) }) }))] }), infiniteScroll && (_jsxs(_Fragment, { children: [loadingMore && (_jsx("div", { className: 'p-2', children: _jsx(Skeleton, { className: 'h-8 w-full', "data-testid": 'table-loading-more' }) })), _jsx("div", { ref: infDesktopSentinel, className: 'h-1 w-full', "aria-hidden": true })] }))] }), _jsxs("div", { ref: infMobileRoot, className: 'flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden', children: [loadingData && data.length === 0 ? (Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: 'rounded-lg border bg-card p-3', children: [_jsx(Skeleton, { className: 'h-4 w-24' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-40' }), _jsx(Skeleton, { className: 'mt-2 h-4 w-32' })] }, i)))) : table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => {
+                                const cells = row.getVisibleCells();
+                                const actionsCell = cells.find((c) => c.column.id === 'actions');
+                                const dataCells = cells.filter((c) => c.column.id !== 'actions' && c.column.id !== 'select');
+                                return (_jsxs("div", { "data-state": row.getIsSelected() && 'selected', className: cn('flex flex-col gap-1.5 rounded-lg border bg-card p-3 data-[state=selected]:border-primary/40', onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: [dataCells.map((cell) => {
+                                            const header = cell.column.columnDef.header;
+                                            const label = typeof header === 'string' ? header : cell.column.id;
+                                            return (_jsxs("div", { className: 'flex items-start justify-between gap-3 text-sm', children: [_jsx("span", { className: 'shrink-0 text-muted-foreground', children: label }), _jsx("span", { className: 'min-w-0 break-words text-right font-medium', children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, cell.id));
+                                        }), actionsCell && (_jsx("div", { className: 'flex justify-end border-t pt-2', onClick: onRowClick ? (e) => e.stopPropagation() : undefined, children: flexRender(actionsCell.column.columnDef.cell, actionsCell.getContext()) }))] }, row.id));
+                            })) : (_jsxs("div", { className: 'flex flex-col items-center justify-center gap-2 rounded-lg border bg-card py-12 text-muted-foreground', children: [_jsx("div", { className: 'flex h-16 w-16 items-center justify-center rounded-full bg-muted/50', children: _jsx(Inbox, { className: 'h-8 w-8' }) }), _jsx("h3", { className: 'text-base 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." })] })), infiniteScroll && (_jsxs(_Fragment, { children: [loadingMore && (_jsx(Skeleton, { className: 'h-16 w-full shrink-0', "data-testid": 'table-loading-more-mobile' })), _jsx("div", { ref: infMobileSentinel, className: 'h-1 w-full shrink-0', "aria-hidden": true })] }))] }), _jsx("div", { className: 'shrink-0 pt-4', children: infiniteScroll ? (data.length > 0 && (_jsx("p", { className: 'text-center text-xs text-muted-foreground tabular-nums', children: t('common.showingCount', {
+                                defaultValue: '{{count}} de {{total}}',
+                                count: data.length,
+                                total: rowCount,
+                            }) }))) : (_jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions })) })] }), rowActionDialogs, _jsx(AlertDialog, { open: showBulkDeleteConfirm, onOpenChange: (open) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: isBulkDeleting ? 'Eliminando registros...' : '¿Eliminar múltiples registros?' }), _jsx(AlertDialogDescription, { children: isBulkDeleting ? (_jsxs("div", { className: "space-y-4 mt-4", children: [_jsx(Progress, { value: (bulkDeleteProgress / bulkDeleteTotal) * 100 }), _jsxs("p", { className: "text-center text-sm", children: ["Procesando ", bulkDeleteProgress, " de ", bulkDeleteTotal, " registros..."] })] })) : (_jsxs(_Fragment, { children: ["Esta acci\u00F3n no se puede deshacer. Se eliminar\u00E1n permanentemente ", _jsx("strong", { children: Object.keys(rowSelection).length }), " registro(s) de nuestros servidores."] })) })] }), !isBulkDeleting && (_jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmBulkDelete(); }, className: "bg-red-600 hover:bg-red-700", children: "Eliminar todos" })] }))] }) }), viewMetadata?.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), viewMetadata?.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), _jsx(DataTableBulkActions, { table: table, entityName: "registro", children: _jsxs(Button, { variant: "destructive", size: "sm", className: "h-8", onClick: () => setShowBulkDeleteConfirm(true), children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), " Eliminar"] }) })] }));
 }

package/dist/filter-chips.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Human-readable summary of a field's selected filter values for a chip / row.
+ * Resolves option labels, unwraps the wire operators
+ * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
+ * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
+ */
+export declare function summarizeFilterValues(values: string[] | undefined, options: {
+    label: string;
+    value: string;
+}[] | undefined, maxShown?: number): string;
+/**
+ * The color of a filter's first selected value (for the chip's dot) — e.g. a
+ * stage's palette color. Returns a resolved CSS color, or undefined for
+ * operator/range/free-text values that carry no option color.
+ */
+export declare function chipValueColor(config: {
+    selectedValues: string[];
+    options: {
+        value: string;
+        color?: string;
+    }[];
+}): string | undefined;
+/**
+ * Translates option labels through the app translator (manifest i18n keys →
+ * localized text). A raw value with no matching key falls through to itself via
+ * `defaultValue`. Pure — exported for unit tests.
+ */
+export declare function translateOptionLabels<T extends {
+    label: string;
+}>(options: T[], translate: (key: string) => string): T[];
+export interface FilterChipField {
+    key: string;
+    label: string;
+    config: {
+        selectedValues: string[];
+        options: {
+            label: string;
+            value: string;
+            color?: string;
+        }[];
+        filterKey: string;
+        onFilterChange: (filterKey: string, values: string[]) => void;
+    };
+}
+export interface FilterChipsRowProps {
+    /** Fields with an active selection (one chip each). */
+    fields: FilterChipField[];
+    /** Clears every filter (the trailing "Limpiar todo"). */
+    onClearAll: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * The removable active-filter chip row shown under a board/table toolbar. Each
+ * chip: an optional value-color dot, "Campo: valor(es)" (capped + `+n`), and an
+ * X that clears that field; a trailing "Limpiar todo". Renders nothing when no
+ * field is active.
+ */
+export declare function FilterChipsRow({ fields, onClearAll, className, 'data-testid': testId, }: FilterChipsRowProps): import("react").JSX.Element | null;
+//# sourceMappingURL=filter-chips.d.ts.map

package/dist/filter-chips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chips.d.ts","sourceRoot":"","sources":["../src/filter-chips.tsx"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAC5B,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,SAAS,EACvD,QAAQ,SAAI,GACb,MAAM,CAsBR;AAYD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE;IACnC,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/C,GAAG,MAAM,GAAG,SAAS,CAUrB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,OAAO,EAAE,CAAC,EAAE,EACZ,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GACnC,CAAC,EAAE,CAEL;AAED,MAAM,WAAW,eAAe;IAC5B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACJ,cAAc,EAAE,MAAM,EAAE,CAAA;QACxB,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QAC3D,SAAS,EAAE,MAAM,CAAA;QACjB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;KAChE,CAAA;CACJ;AAED,MAAM,WAAW,mBAAmB;IAChC,uDAAuD;IACvD,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,yDAAyD;IACzD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,SAAS,EACT,aAAa,EAAE,MAAM,GACxB,EAAE,mBAAmB,sCA0DrB"}

package/dist/filter-chips.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shared filter presentation: the removable active-filter chip row + the pure
+// helpers that summarize a filter's value and resolve its color. Used by BOTH
+// DynamicKanban and DynamicTable so the two surfaces render identical chips
+// (one component, no drift).
+import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
+import { Badge, Button } from '@asteby/metacore-ui/primitives';
+import { resolveColorCss } from '@asteby/metacore-ui/lib';
+/**
+ * Human-readable summary of a field's selected filter values for a chip / row.
+ * Resolves option labels, unwraps the wire operators
+ * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
+ * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
+ */
+export function summarizeFilterValues(values, options, maxShown = 2) {
+    if (!values || values.length === 0)
+        return '';
+    const opts = options ?? [];
+    const labelFor = (v) => opts.find((o) => o.value === v)?.label ?? v;
+    const first = values[0];
+    if (values.length === 1) {
+        if (first.startsWith('ILIKE:'))
+            return `"${first.slice(6)}"`;
+        if (first.startsWith('IN:')) {
+            return summarizeList(first.slice(3).split(','), labelFor, maxShown);
+        }
+        if (first.startsWith('RANGE:')) {
+            const [min, max] = first.slice(6).split(',');
+            return `${min || '…'} – ${max || '…'}`;
+        }
+        if (/^\d{4}-\d{2}-\d{2}_/.test(first))
+            return first.replace('_', ' – ');
+    }
+    if (first.startsWith('GTE:') || first.startsWith('LTE:')) {
+        const min = values.find((v) => v.startsWith('GTE:'))?.slice(4) ?? '';
+        const max = values.find((v) => v.startsWith('LTE:'))?.slice(4) ?? '';
+        return `${min || '…'} – ${max || '…'}`;
+    }
+    return summarizeList(values, labelFor, maxShown);
+}
+function summarizeList(items, labelFor, maxShown) {
+    const labels = items.map(labelFor);
+    if (labels.length <= maxShown)
+        return labels.join(', ');
+    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown}`;
+}
+/**
+ * The color of a filter's first selected value (for the chip's dot) — e.g. a
+ * stage's palette color. Returns a resolved CSS color, or undefined for
+ * operator/range/free-text values that carry no option color.
+ */
+export function chipValueColor(config) {
+    const sel = config.selectedValues;
+    if (!sel || sel.length === 0)
+        return undefined;
+    const first = sel[0];
+    let value = first;
+    if (first.startsWith('IN:'))
+        value = first.slice(3).split(',')[0];
+    else if (/^(ILIKE|RANGE|GTE|LTE):/.test(first))
+        return undefined;
+    else if (/^\d{4}-\d{2}-\d{2}_/.test(first))
+        return undefined;
+    const opt = config.options.find((o) => o.value === value);
+    return opt?.color ? resolveColorCss(opt.color) : undefined;
+}
+/**
+ * Translates option labels through the app translator (manifest i18n keys →
+ * localized text). A raw value with no matching key falls through to itself via
+ * `defaultValue`. Pure — exported for unit tests.
+ */
+export function translateOptionLabels(options, translate) {
+    return options.map((o) => ({ ...o, label: translate(o.label) }));
+}
+/**
+ * The removable active-filter chip row shown under a board/table toolbar. Each
+ * chip: an optional value-color dot, "Campo: valor(es)" (capped + `+n`), and an
+ * X that clears that field; a trailing "Limpiar todo". Renders nothing when no
+ * field is active.
+ */
+export function FilterChipsRow({ fields, onClearAll, className, 'data-testid': testId, }) {
+    const { t } = useTranslation();
+    if (fields.length === 0)
+        return null;
+    return (_jsxs("div", { className: `flex flex-wrap items-center gap-1.5${className ? ` ${className}` : ''}`, "data-testid": testId, children: [fields.map((field) => {
+                const summary = summarizeFilterValues(field.config.selectedValues, field.config.options);
+                const dot = chipValueColor(field.config);
+                return (_jsxs(Badge, { variant: "secondary", className: "h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal", children: [dot && (_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dot } })), _jsxs("span", { className: "font-medium", children: [field.label, ":"] }), _jsx("span", { className: "max-w-[180px] truncate text-muted-foreground", children: summary }), _jsx("button", { type: "button", onClick: () => field.config.onFilterChange(field.config.filterKey, []), className: "ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20", "aria-label": t('filters.removeFilter', {
+                                defaultValue: 'Quitar filtro',
+                            }), children: _jsx(X, { className: "h-3 w-3" }) })] }, field.key));
+            }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-2 text-xs text-muted-foreground", onClick: onClearAll, children: t('filters.clearAll', { defaultValue: 'Limpiar todo' }) })] }));
+}

package/dist/use-infinite-scroll.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Returns a NEW array = `existing` followed by every row in `incoming` whose
+ * `id` is not already present. Stable on identity/order of `existing`. Pure.
+ */
+export declare function dedupeById<T extends {
+    id?: any;
+}>(existing: T[], incoming: T[]): T[];
+export interface UseInfiniteScrollOptions {
+    /** Fired when the sentinel scrolls into view and loading is enabled. */
+    onLoadMore: () => void;
+    /** When true, the observer is inert (no more pages, or a load in flight). */
+    disabled?: boolean;
+    /** Pixels of pre-fetch margin below the viewport. Default 200. */
+    rootMargin?: number;
+}
+export interface InfiniteScrollRefs<R extends HTMLElement = HTMLDivElement, S extends HTMLElement = HTMLDivElement> {
+    rootRef: React.RefObject<R | null>;
+    sentinelRef: React.RefObject<S | null>;
+}
+/**
+ * IntersectionObserver-backed infinite scroll. Attach `rootRef` to the
+ * scrollable container and `sentinelRef` to a small element at its bottom. The
+ * latest `onLoadMore`/`disabled` are read through a ref so the observer isn't
+ * torn down and rebuilt on every render.
+ */
+export declare function useInfiniteScrollSentinel<R extends HTMLElement = HTMLDivElement, S extends HTMLElement = HTMLDivElement>({ onLoadMore, disabled, rootMargin, }: UseInfiniteScrollOptions): InfiniteScrollRefs<R, S>;
+//# sourceMappingURL=use-infinite-scroll.d.ts.map

package/dist/use-infinite-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../src/use-infinite-scroll.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,GAAG,CAAA;CAAE,EAC/C,QAAQ,EAAE,CAAC,EAAE,EACb,QAAQ,EAAE,CAAC,EAAE,GACZ,CAAC,EAAE,CAWL;AAED,MAAM,WAAW,wBAAwB;IACvC,wEAAwE;IACxE,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc;IAEtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,EACA,UAAU,EACV,QAAgB,EAChB,UAAgB,GACjB,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAgCrD"}

package/dist/use-infinite-scroll.js

@@ -0,0 +1,60 @@
+// Shared incremental-loading primitives for DynamicTable and DynamicKanban.
+//   - `dedupeById` appends a page of rows to the accumulated set, dropping any
+//     id already present (the server may re-paginate / overlap between a global
+//     page and a scoped top-up).
+//   - `useInfiniteScrollSentinel` wires an IntersectionObserver: attach
+//     `rootRef` to the scroll container and `sentinelRef` to a sentinel at its
+//     bottom; when the sentinel enters view (and it's enabled) `onLoadMore`
+//     fires. Degrades to a no-op where IntersectionObserver is unavailable
+//     (older/SSR/happy-dom) so callers still render.
+import { useEffect, useRef } from 'react';
+/**
+ * Returns a NEW array = `existing` followed by every row in `incoming` whose
+ * `id` is not already present. Stable on identity/order of `existing`. Pure.
+ */
+export function dedupeById(existing, incoming) {
+    if (incoming.length === 0)
+        return existing;
+    const seen = new Set(existing.map((r) => String(r?.id)));
+    const additions = [];
+    for (const row of incoming) {
+        const key = String(row?.id);
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        additions.push(row);
+    }
+    return additions.length === 0 ? existing : [...existing, ...additions];
+}
+/**
+ * IntersectionObserver-backed infinite scroll. Attach `rootRef` to the
+ * scrollable container and `sentinelRef` to a small element at its bottom. The
+ * latest `onLoadMore`/`disabled` are read through a ref so the observer isn't
+ * torn down and rebuilt on every render.
+ */
+export function useInfiniteScrollSentinel({ onLoadMore, disabled = false, rootMargin = 200, }) {
+    const rootRef = useRef(null);
+    const sentinelRef = useRef(null);
+    const cb = useRef(onLoadMore);
+    const disabledRef = useRef(disabled);
+    cb.current = onLoadMore;
+    disabledRef.current = disabled;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel ||
+            typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && !disabledRef.current) {
+                    cb.current();
+                }
+            }
+        }, { root: rootRef.current ?? null, rootMargin: `0px 0px ${rootMargin}px 0px` });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+        // Re-create only when the margin changes; onLoadMore/disabled are read live.
+    }, [rootMargin]);
+    return { rootRef, sentinelRef };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.0.0",
+  "version": "23.2.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.9.0"
+    "@asteby/metacore-ui": "^2.9.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-ui": "2.9.0",
-    "@asteby/metacore-sdk": "3.2.0"
+    "@asteby/metacore-sdk": "3.2.0",
+    "@asteby/metacore-ui": "2.9.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",