@asteby/metacore-runtime-react 23.0.0 → 23.2.0

package/src/dynamic-table.tsx

@@ -67,6 +67,8 @@ import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
+import { FilterChipsRow, translateOptionLabels, type FilterChipField } from './filter-chips'
+import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
@@ -111,6 +113,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 function DynamicTable({
@@ -126,6 +136,7 @@ export function DynamicTable({
     getDynamicColumns = defaultGetDynamicColumns,
     timeZone,
     currency,
+    infiniteScroll = false,
 }: DynamicTableProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
@@ -143,6 +154,10 @@ export function DynamicTable({
     const [footerTotals, setFooterTotals] = useState<Record<string, any>>({})
     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<Map<string, any[]>>(new Map())
 
     const [exportOpen, setExportOpen] = useState(false)
@@ -471,9 +486,69 @@ export function DynamicTable({
         }
     }, [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: number, append: boolean) => {
+            if (!metadata) return
+            if (append) setLoadingMore(true)
+            else setLoadingData(true)
+            try {
+                const params: Record<string, any> = {
+                    page,
+                    per_page: infPageSize,
+                    ...buildFilterParams(),
+                }
+                const res = (await api.get(endpoint || `/data/${model}`, {
+                    params,
+                })) as { data: ApiResponse<any[]> }
+                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()
@@ -485,9 +560,41 @@ export function DynamicTable({
             fetchAggregates()
         }, 300)
         return () => clearTimeout(timeoutId)
-    }, [fetchData, fetchAggregates, metadata])
+    }, [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(() => { fetchData(); fetchAggregates() }, [fetchData, fetchAggregates])
+    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.
@@ -536,11 +643,15 @@ export function DynamicTable({
     // 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<string, ColumnFilterConfig>()
         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: string) => t(label, { defaultValue: label })
         const stageOptions = (metadata.stages ?? []).map((s) => ({
             label: s.label,
             value: s.key,
@@ -574,18 +685,23 @@ export function DynamicTable({
                 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) continue
             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?: string) => loadOptions!(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             })
         }
         for (const c of metadata.columns ?? []) {
@@ -635,22 +751,64 @@ export function DynamicTable({
                 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?: string) => 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: string[] = []
+        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<FilterChipField[]>(() => {
+        if (!metadata) return []
+        const out: FilterChipField[] = []
+        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: PaginationState) => ({ ...prev, pageIndex: 0 }))
+    }, [])
 
     const columns = useMemo(() => {
         if (!viewMetadata) return []
@@ -771,11 +929,22 @@ export function DynamicTable({
                             </>
                         }
                     />
+                    {/* Active-filter chips — shared with the kanban. Quick
+                        visibility + one-click removal of the header filters. */}
+                    {activeFilterChips.length > 0 && (
+                        <div className='pt-2'>
+                            <FilterChipsRow
+                                fields={activeFilterChips}
+                                onClearAll={clearAllDynamicFilters}
+                                data-testid='table-filter-chips'
+                            />
+                        </div>
+                    )}
                 </div>
                 {/* Desktop: classic horizontal-scroll table. Hidden on phones —
                     a 7-column table forces a wide horizontal scroll there, so we
                     render a card-per-row list instead (see MobileCards below). */}
-                <div className='hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card'>
+                <div ref={infDesktopRoot} className='hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card'>
                     <Table noWrapper className={cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full')}>
                         <TableHeader className='sticky top-0 z-10'>
                             {table.getHeaderGroups().map((headerGroup: HeaderGroup<any>) => (
@@ -891,12 +1060,25 @@ export function DynamicTable({
                             </TableFooter>
                         )}
                     </Table>
+                    {infiniteScroll && (
+                        <>
+                            {loadingMore && (
+                                <div className='p-2'>
+                                    <Skeleton className='h-8 w-full' data-testid='table-loading-more' />
+                                </div>
+                            )}
+                            {/* Sentinel stays mounted for the whole infinite-scroll
+                                session so its observer attaches once; `disabled`
+                                (no more pages / load in flight) gates the fetch. */}
+                            <div ref={infDesktopSentinel} className='h-1 w-full' aria-hidden />
+                        </>
+                    )}
                 </div>
 
                 {/* Mobile: one card per row — no horizontal scroll. Each card
                     stacks its columns as label : value pairs with the row actions
                     pinned at the bottom. */}
-                <div className='flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden'>
+                <div ref={infMobileRoot} className='flex flex-1 min-h-0 flex-col gap-2 overflow-y-auto sm:hidden'>
                     {loadingData && data.length === 0 ? (
                         Array.from({ length: 5 }).map((_, i) => (
                             <div key={i} className='rounded-lg border bg-card p-3'>
@@ -951,13 +1133,33 @@ export function DynamicTable({
                             <p className='text-sm text-muted-foreground'>No hay datos para mostrar en este momento.</p>
                         </div>
                     )}
+                    {infiniteScroll && (
+                        <>
+                            {loadingMore && (
+                                <Skeleton className='h-16 w-full shrink-0' data-testid='table-loading-more-mobile' />
+                            )}
+                            <div ref={infMobileSentinel} className='h-1 w-full shrink-0' aria-hidden />
+                        </>
+                    )}
                 </div>
 
                 <div className='shrink-0 pt-4'>
-                    <DataTablePagination
-                        table={table}
-                        pageSizeOptions={metadata.perPageOptions}
-                    />
+                    {infiniteScroll ? (
+                        data.length > 0 && (
+                            <p className='text-center text-xs text-muted-foreground tabular-nums'>
+                                {t('common.showingCount', {
+                                    defaultValue: '{{count}} de {{total}}',
+                                    count: data.length,
+                                    total: rowCount,
+                                })}
+                            </p>
+                        )
+                    ) : (
+                        <DataTablePagination
+                            table={table}
+                            pageSizeOptions={metadata.perPageOptions}
+                        />
+                    )}
                 </div>
             </div>
 

package/src/filter-chips.tsx

@@ -0,0 +1,175 @@
+// 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: string[] | undefined,
+    options: { label: string; value: string }[] | undefined,
+    maxShown = 2,
+): string {
+    if (!values || values.length === 0) return ''
+    const opts = options ?? []
+    const labelFor = (v: string) => 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: string[],
+    labelFor: (v: string) => string,
+    maxShown: number,
+): string {
+    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: {
+    selectedValues: string[]
+    options: { value: string; color?: string }[]
+}): string | undefined {
+    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<T extends { label: string }>(
+    options: T[],
+    translate: (key: string) => string,
+): T[] {
+    return options.map((o) => ({ ...o, label: translate(o.label) }))
+}
+
+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 function FilterChipsRow({
+    fields,
+    onClearAll,
+    className,
+    'data-testid': testId,
+}: FilterChipsRowProps) {
+    const { t } = useTranslation()
+    if (fields.length === 0) return null
+    return (
+        <div
+            className={`flex flex-wrap items-center gap-1.5${className ? ` ${className}` : ''}`}
+            data-testid={testId}
+        >
+            {fields.map((field) => {
+                const summary = summarizeFilterValues(
+                    field.config.selectedValues,
+                    field.config.options,
+                )
+                const dot = chipValueColor(field.config)
+                return (
+                    <Badge
+                        key={field.key}
+                        variant="secondary"
+                        className="h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal"
+                    >
+                        {dot && (
+                            <span
+                                className="size-2 shrink-0 rounded-full"
+                                style={{ backgroundColor: dot }}
+                            />
+                        )}
+                        <span className="font-medium">{field.label}:</span>
+                        <span className="max-w-[180px] truncate text-muted-foreground">
+                            {summary}
+                        </span>
+                        <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',
+                            })}
+                        >
+                            <X className="h-3 w-3" />
+                        </button>
+                    </Badge>
+                )
+            })}
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 gap-1 px-2 text-xs text-muted-foreground"
+                onClick={onClearAll}
+            >
+                {t('filters.clearAll', { defaultValue: 'Limpiar todo' })}
+            </Button>
+        </div>
+    )
+}

package/src/use-infinite-scroll.ts

@@ -0,0 +1,94 @@
+// 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<T extends { id?: any }>(
+  existing: T[],
+  incoming: T[],
+): T[] {
+  if (incoming.length === 0) return existing
+  const seen = new Set(existing.map((r) => String(r?.id)))
+  const additions: T[] = []
+  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]
+}
+
+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 function useInfiniteScrollSentinel<
+  R extends HTMLElement = HTMLDivElement,
+  S extends HTMLElement = HTMLDivElement,
+>({
+  onLoadMore,
+  disabled = false,
+  rootMargin = 200,
+}: UseInfiniteScrollOptions): InfiniteScrollRefs<R, S> {
+  const rootRef = useRef<R | null>(null)
+  const sentinelRef = useRef<S | null>(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 }
+}