@asteby/metacore-runtime-react 23.1.0 → 23.3.0

package/dist/dynamic-columns.js

@@ -19,9 +19,10 @@ import * as icons from 'lucide-react';
 import { MoreHorizontal } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@asteby/metacore-ui';
 import { DataTableColumnHeader, FilterableColumnHeader, } from '@asteby/metacore-ui/data-table';
-import { generateBadgeStyles, getInitials, optionColor, relationChipStyles, } from '@asteby/metacore-ui/lib';
+import { generateBadgeStyles, getInitials, relationChipStyles, } from '@asteby/metacore-ui/lib';
 import { Progress } from './dialogs/_primitives';
 import { humanizeToken } from './dynamic-columns-helpers';
+import { OptionBadge, RelationThumbnail, statusColorFor, useIsDarkTheme, } from './display-value';
 import { OptionsContext } from './options-context';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
 import { CollectionCell } from './collection-cell';
@@ -88,22 +89,6 @@ export const formatAggregateTotal = (col, value, currency, locale) => {
         ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals }
         : {}, locale);
 };
-/**
- * Semantic status → badge color. Used by the `status` cell when no explicit
- * `options` color is declared. Generic, value-driven mapping.
- */
-const statusColorFor = (value) => {
-    const v = value.toLowerCase();
-    if (['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
-        .includes(v))
-        return '#22c55e';
-    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
-        return '#eab308';
-    if (['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
-        .includes(v))
-        return '#ef4444';
-    return '#6b7280';
-};
 /** Copyable monospaced text cell (code/IDs/hashes). */
 const CodeCell = ({ text, maxLength }) => {
     const [copied, setCopied] = React.useState(false);
@@ -195,23 +180,6 @@ const getValueFromPathVariants = (obj, path) => {
     }
     return undefined;
 };
-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'));
-        sync();
-        const observer = new MutationObserver(sync);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['class'],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 const renderRelationBadges = (items, col) => {
     if (!Array.isArray(items) || items.length === 0) {
         return _jsx("span", { className: "text-muted-foreground", children: "-" });
@@ -240,25 +208,6 @@ const renderRelationBadges = (items, col) => {
             return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [iconValue && (_jsx(DynamicIcon, { name: iconValue, className: "h-3 w-3" })), _jsx("span", { children: label })] }, `${col.key}-${idx}`));
         }) }));
 };
-/**
- * Tiny square thumbnail for a resolved relation/option that carries an `image`
- * (brand logo, product photo, customer/user avatar). Uses the same Avatar
- * primitive as the `avatar`/`creator` cells so a broken/loading image
- * gracefully falls back to the record's initials. Sized small (the box is an
- * inline style so an addon-arbitrary Tailwind class never gets dropped by a
- * consuming app's class scan). Rendered inline alongside a label — never alone.
- */
-const RelationThumbnail = ({ src, alt, getImageUrl, size = 18 }) => (_jsxs(Avatar, { className: "shrink-0 rounded-sm ring-1 ring-border/40", style: { width: size, height: size }, children: [_jsx(AvatarImage, { src: getImageUrl ? getImageUrl(src) : src, alt: alt, className: "object-cover" }), _jsx(AvatarFallback, { className: "rounded-sm bg-primary/10 text-[8px] font-bold text-primary", children: getInitials(alt) })] }));
-const OptionBadge = ({ option, getImageUrl }) => {
-    const isDark = useIsDarkTheme();
-    // Explicit backend color wins; otherwise derive a stable, cohesive color
-    // from the option's value (fallback label) so "dead" gray badges come
-    // alive. Inline style (hex-derived) so it works regardless of the host's
-    // tailwind safelist — addon-arbitrary classes aren't in the host scan.
-    const colorSource = option.color || optionColor(option.value || option.label);
-    const colorStyles = generateBadgeStyles(colorSource, { isDark });
-    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.image ? (_jsx(RelationThumbnail, { src: option.image, alt: option.label, getImageUrl: getImageUrl, size: 16 })) : (option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" })), _jsx("span", { children: option.label })] }));
-};
 const BadgeWithEndpointOptions = ({ endpoint, value, getImageUrl }) => {
     const { optionsMap } = React.useContext(OptionsContext);
     const options = optionsMap.get(endpoint) || [];

package/dist/dynamic-kanban.d.ts

@@ -32,6 +32,16 @@ export declare function isTransitionAllowed(transitions: StageTransition[] | und
  * resolves, and so the previous grouping can be restored on failure.
  */
 export declare function applyOptimisticMove(grouped: Map<string, any[]>, cardId: string | number, fromStage: string, toStage: string, groupByKey: string): Map<string, any[]>;
+/**
+ * Returns a NEW per-lane pagination map with the server totals adjusted for a
+ * card moving `fromStage` → `toStage`: the source loses one, the destination
+ * gains one. Lanes whose `total` is still unknown (`null`, not yet topped up)
+ * are left alone. Pure — backs the optimistic drag so a partial lane's
+ * `count/total` header stays truthful, and can be restored on PUT failure.
+ */
+export declare function applyLaneTotalsOnMove<T extends {
+    total: number | null;
+}>(pagination: Record<string, T>, fromStage: string, toStage: string): Record<string, T>;
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -88,10 +98,16 @@ export interface DynamicKanbanProps {
      */
     onAction?: (action: string, row: any) => void;
     /**
-     * Max cards fetched per lane render. Kanban shows all cards at once (no
-     * pagination UI), so it requests a single large page. Defaults to 200.
+     * Size of the INITIAL board page (one request, grouped into lanes). Each
+     * lane then tops up incrementally on scroll (see `lanePageSize`). Defaults
+     * to 50 — enough to fill the visible lanes without loading the whole board.
      */
     pageSize?: number;
+    /**
+     * Page size for a lane's incremental top-up fetch (scoped by
+     * `f_<group_by>=<stage>`). Defaults to 25.
+     */
+    lanePageSize?: number;
     /** IANA timezone for datetime card fields (org config). */
     timeZone?: string;
     /** ISO 4217 currency for money card fields (org config). */
@@ -102,5 +118,5 @@ export interface DynamicKanbanProps {
      */
     defaultFilters?: Record<string, any>;
 }
-export declare function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, onAction, pageSize, timeZone, currency, defaultFilters, }: DynamicKanbanProps): React.JSX.Element;
+export declare function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, onAction, pageSize, lanePageSize, timeZone, currency, defaultFilters, }: DynamicKanbanProps): React.JSX.Element;
 //# sourceMappingURL=dynamic-kanban.d.ts.map

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

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

package/dist/dynamic-kanban.js

@@ -10,6 +10,7 @@ import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib';
 import { useApi } from './api-context';
 import { useDynamicFilters } from './use-dynamic-filters';
 import { FilterChipsRow, summarizeFilterValues, translateOptionLabels, } from './filter-chips';
+import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll';
 import { useMetadataCache } from './metadata-cache';
 import { ActivityValueRenderer } from './activity-value-renderer';
 import { DynamicIcon } from './dynamic-icon';
@@ -112,6 +113,25 @@ export function applyOptimisticMove(grouped, cardId, fromStage, toStage, groupBy
     next.set(toStage, toRows);
     return next;
 }
+/**
+ * Returns a NEW per-lane pagination map with the server totals adjusted for a
+ * card moving `fromStage` → `toStage`: the source loses one, the destination
+ * gains one. Lanes whose `total` is still unknown (`null`, not yet topped up)
+ * are left alone. Pure — backs the optimistic drag so a partial lane's
+ * `count/total` header stays truthful, and can be restored on PUT failure.
+ */
+export function applyLaneTotalsOnMove(pagination, fromStage, toStage) {
+    const next = { ...pagination };
+    const bump = (key, delta) => {
+        const st = next[key];
+        if (st && st.total != null) {
+            next[key] = { ...st, total: Math.max(0, st.total + delta) };
+        }
+    };
+    bump(fromStage, -1);
+    bump(toStage, +1);
+    return next;
+}
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -195,7 +215,7 @@ function useIsDarkTheme() {
     }, []);
     return isDark;
 }
-export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, onAction, pageSize = 200, timeZone, currency, defaultFilters, }) {
+export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, onAction, pageSize = 50, lanePageSize = 25, timeZone, currency, defaultFilters, }) {
     const { t, i18n } = useTranslation();
     const api = useApi();
     const isDark = useIsDarkTheme();
@@ -205,6 +225,12 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     const [records, setRecords] = useState([]);
     const [loading, setLoading] = useState(!cachedMeta);
     const [loadingData, setLoadingData] = useState(true);
+    // Per-stage incremental pagination for infinite scroll. The initial board
+    // page (grouped into lanes) is fetched once; each lane then tops up its OWN
+    // stage via `f_<group_by>=<stage>&page=n`, appended (deduped by id) into the
+    // shared `records`. `total` is the stage's server count when the response
+    // meta carries it. Reset whenever the filters/search change.
+    const [lanePagination, setLanePagination] = useState({});
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState(null);
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
@@ -247,7 +273,10 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     // and `f_<key>` serialization DynamicTable uses, so the board filters
     // identically to its table sibling.
     const { dynamicFilters, globalFilter, setGlobalFilter, columnFilterConfigs, filterParams, activeFilterCount, handleDynamicFilterChange, clearAll, } = useDynamicFilters(metadata, { defaultFilters, model, endpoint });
-    // ---- records fetch (same path as DynamicTable, single large page) ----
+    // ---- initial board page (one request, grouped into lanes) ----
+    // Resets the per-lane pagination so every lane restarts its incremental
+    // top-up from scratch — called on mount, refresh, and any filter/search
+    // change (fetchData's identity changes with filterParams).
     const fetchData = useCallback(async () => {
         if (!metadata)
             return;
@@ -265,7 +294,64 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         finally {
             setLoadingData(false);
         }
+        setLanePagination({});
     }, [api, endpoint, model, metadata, pageSize, filterParams]);
+    // Load the next page for ONE lane/stage and append it (deduped by id) into
+    // the shared records. Scoped by `f_<group_by>=<stage>` on top of the active
+    // filterParams (the stage scope wins over any global group_by filter).
+    const groupByKey = metadata?.group_by || '';
+    const loadMoreLane = useCallback(async (stageKey) => {
+        if (!metadata || !groupByKey)
+            return;
+        const current = lanePagination[stageKey];
+        if (current?.loading || current?.done)
+            return;
+        const nextPage = current?.nextPage ?? 1;
+        setLanePagination((p) => ({
+            ...p,
+            [stageKey]: {
+                nextPage,
+                total: current?.total ?? null,
+                loading: true,
+                done: false,
+            },
+        }));
+        try {
+            const res = (await api.get(endpoint || `/data/${model}`, {
+                params: {
+                    ...filterParams,
+                    page: nextPage,
+                    per_page: lanePageSize,
+                    [`f_${groupByKey}`]: stageKey,
+                },
+            }));
+            const rows = res.data.success ? res.data.data || [] : [];
+            const total = res.data.meta?.total ?? res.data.meta?.count ?? null;
+            setRecords((prev) => dedupeById(prev, rows));
+            setLanePagination((p) => ({
+                ...p,
+                [stageKey]: {
+                    nextPage: nextPage + 1,
+                    total,
+                    loading: false,
+                    // Exhausted when the server returned a short page.
+                    done: rows.length < lanePageSize,
+                },
+            }));
+        }
+        catch (err) {
+            console.error(`Error al cargar más tarjetas de ${stageKey}`, err);
+            setLanePagination((p) => ({
+                ...p,
+                [stageKey]: {
+                    nextPage,
+                    total: current?.total ?? null,
+                    loading: false,
+                    done: false,
+                },
+            }));
+        }
+    }, [api, endpoint, model, metadata, groupByKey, filterParams, lanePageSize, lanePagination]);
     // Refetch when metadata resolves, on an explicit refresh, or when the
     // filters change. `fetchData` is stable while `filterParams` is unchanged
     // (both memoized), so this only re-runs on real input changes. Debounced so
@@ -348,7 +434,6 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         });
     }, []);
     const stages = useMemo(() => (metadata ? deriveStages(metadata) : []), [metadata]);
-    const groupByKey = metadata?.group_by || '';
     const transitions = metadata?.transitions;
     const grouped = useMemo(() => groupByStage(records, groupByKey, stages), [records, groupByKey, stages]);
     const { title: titleCol, fields: fieldCols } = useMemo(() => (metadata ? selectCardColumns(metadata) : { title: null, fields: [] }), [metadata]);
@@ -405,7 +490,12 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         }
         // OPTIMISTIC: move the card in local state immediately.
         const prevRecords = records;
+        const prevPagination = lanePagination;
         setRecords((rs) => rs.map((r) => String(r.id) === cardId ? { ...r, [groupByKey]: destStage } : r));
+        // Keep the server totals consistent with the moved card so a lane's
+        // `count/total` header stays truthful with partial lanes: one leaves
+        // the source stage, one joins the destination.
+        setLanePagination((p) => applyLaneTotalsOnMove(p, srcStage, destStage));
         try {
             const base = endpoint || `/data/${model}`;
             // `base` is the org-scoped list endpoint (e.g. `/data/<model>/me`),
@@ -422,6 +512,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         catch (err) {
             // REVERT + toast on failure.
             setRecords(prevRecords);
+            setLanePagination(prevPagination);
             toast.error(t('kanban.moveFailed', {
                 defaultValue: 'No se pudo mover la tarjeta',
             }) +
@@ -429,7 +520,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                     ? `: ${err.response.data.message}`
                     : ''));
         }
-    }, [api, endpoint, groupByKey, model, records, stageOfCard, t, transitions]);
+    }, [api, endpoint, groupByKey, lanePagination, model, records, stageOfCard, t, transitions]);
     if (loading) {
         return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "w-[300px] shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
     }
@@ -474,7 +565,12 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                             const droppableAllowed = !activeId ||
                                 stage.key === activeStage ||
                                 isTransitionAllowed(transitions, activeStage, stage.key);
-                            return (_jsx(KanbanLane, { stage: stage, count: cards.length, totalCount: allCards.length, filterFields: filterFields, laneFilter: laneFilter, onFunnelChange: (f) => updateLaneFilter(stage.key, {
+                            // Infinite scroll is per declared stage; the synthetic
+                            // "unassigned" lane can't be stage-scoped, so it never tops up.
+                            const laneState = lanePagination[stage.key];
+                            const isUnassigned = stage.key === UNASSIGNED_LANE;
+                            const laneHasMore = !isUnassigned && !laneState?.done;
+                            return (_jsx(KanbanLane, { stage: stage, count: cards.length, totalCount: allCards.length, serverTotal: laneState?.total ?? null, hasMore: laneHasMore, loadingMore: !!laneState?.loading, onLoadMore: () => loadMoreLane(stage.key), filterFields: filterFields, laneFilter: laneFilter, onFunnelChange: (f) => updateLaneFilter(stage.key, {
                                     field: f?.field,
                                     values: f?.values,
                                     text: f?.text,
@@ -508,9 +604,15 @@ function SheetFilterRow({ field, isStage, }) {
     const summary = summarizeFilterValues(field.config.selectedValues, field.config.options);
     return (_jsx(ColumnFilterControl, { variant: "row", align: "end", icon: filterTypeIcon(field.config.filterType, isStage), label: field.label, valueSummary: summary, filterKey: field.config.filterKey, filterType: field.config.filterType, filterOptions: field.config.options, filterLoading: field.config.loading, filterSearchEndpoint: field.config.searchEndpoint, selectedValues: field.config.selectedValues, onFilterChange: field.config.onFilterChange, loadOptions: field.config.loadOptions }));
 }
-function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunnelChange, onQueryChange, isDark, dimmed, disabled, children, }) {
+function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMore, onLoadMore, filterFields, laneFilter, onFunnelChange, onQueryChange, isDark, dimmed, disabled, children, }) {
     const { t } = useTranslation();
     const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled });
+    // Infinite scroll: the sentinel lives at the bottom of the lane's own scroll
+    // container; a load in flight or an exhausted stage disables it.
+    const { rootRef, sentinelRef } = useInfiniteScrollSentinel({
+        onLoadMore,
+        disabled: !hasMore || loadingMore,
+    });
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     });
@@ -546,7 +648,11 @@ function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunn
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,
-        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive ? `${count}/${totalCount}` : count })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
+        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive
+                                    ? `${count}/${totalCount}`
+                                    : serverTotal != null
+                                        ? `${count}/${serverTotal}`
+                                        : count })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
                                     defaultValue: 'Buscar en la columna',
                                 }), children: [_jsx(Search, { className: "h-3.5 w-3.5" }), queryActive && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" }))] }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange })] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Escape') {
@@ -560,7 +666,7 @@ function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onFunn
                                 defaultValue: 'Buscar tarjetas...',
                             }), className: "h-7 pl-7 text-xs" })] }) })), funnelActive && (_jsxs("div", { className: "flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground", children: [_jsx(ListFilter, { className: "h-3 w-3 shrink-0" }), _jsxs("span", { className: "truncate", children: [activeFieldLabel, ": ", funnelSummary] }), _jsx("button", { type: "button", onClick: () => onFunnelChange(null), className: "ml-auto rounded p-0.5 hover:bg-muted", "aria-label": t('kanban.clearFilters', {
                             defaultValue: 'Limpiar',
-                        }), children: _jsx(X, { className: "h-3 w-3" }) })] })), _jsx("div", { className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: children })] }));
+                        }), children: _jsx(X, { className: "h-3 w-3" }) })] })), _jsxs("div", { ref: rootRef, className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: [children, loadingMore && (_jsx(Skeleton, { className: "h-16 w-full shrink-0", "data-testid": "lane-loading-more" })), hasMore && (_jsx("div", { ref: sentinelRef, className: "h-1 w-full shrink-0", "aria-hidden": true }))] })] }));
 }
 // LaneFilterButton — the per-column funnel. Picks a field + a value and narrows
 // ONLY this lane's cards (client-side, in the parent). Draft state lives here so

package/dist/dynamic-row-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-row-actions.d.ts","sourceRoot":"","sources":["../src/dynamic-row-actions.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAA;AAE5D,MAAM,WAAW,0BAA0B;IACvC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,4EAA4E;IAC5E,SAAS,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAC9B,+CAA+C;IAC/C,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjE;;;OAGG;IACH,OAAO,EAAE,KAAK,CAAC,YAAY,CAAA;CAC9B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,0BAA0B,GAAG,iBAAiB,CAmHhD"}
+{"version":3,"file":"dynamic-row-actions.d.ts","sourceRoot":"","sources":["../src/dynamic-row-actions.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAA;AAE5D,MAAM,WAAW,0BAA0B;IACvC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,4EAA4E;IAC5E,SAAS,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAC9B,+CAA+C;IAC/C,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACjE;;;OAGG;IACH,OAAO,EAAE,KAAK,CAAC,YAAY,CAAA;CAC9B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,0BAA0B,GAAG,iBAAiB,CAqHhD"}

package/dist/dynamic-row-actions.js

@@ -89,16 +89,18 @@ export function useDynamicRowActions({ model, endpoint, metadata, onAction, onRe
         try {
             const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`;
             const res = await api.delete(deleteEndpoint);
+            // CRUD estándar: no usar res.data.message (el endpoint dinámico
+            // devuelve texto en inglés que se filtraría al toast). String localizado.
             if (res.data.success) {
-                toast.success(res.data.message || 'Eliminado correctamente');
+                toast.success(t('dynamic.delete_success', { defaultValue: 'Registro eliminado correctamente' }));
                 onRefresh();
             }
             else
-                toast.error(res.data.message || 'Error al eliminar');
+                toast.error(t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }));
         }
         catch (error) {
             console.error('Error al eliminar', error);
-            toast.error('Error al eliminar el registro');
+            toast.error(t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }));
         }
         finally {
             setIsDeleting(false);

package/dist/dynamic-table.d.ts

@@ -36,6 +36,14 @@ export interface DynamicTableProps {
      * an explicit per-column currency. Optional — defaults to 'USD'.
      */
     currency?: string;
+    /**
+     * Opt into infinite scroll: instead of the classic pager, rows accumulate as
+     * the user scrolls (a sentinel at the bottom fetches + appends the next
+     * page, deduped by id, respecting the active filters/search). Changing any
+     * filter/sort/search resets to page 1. Default false — existing hosts keep
+     * the classic pagination untouched.
+     */
+    infiniteScroll?: boolean;
 }
-export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, timeZone, currency, }: DynamicTableProps): import("react").JSX.Element;
+export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, timeZone, currency, infiniteScroll, }: DynamicTableProps): import("react").JSX.Element;
 //# sourceMappingURL=dynamic-table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAYnF,MAAM,WAAW,iBAAiB;IAC9B,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;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,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,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,GACX,EAAE,iBAAiB,+BAw6BnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,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;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,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;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAyiCnB"}