@asteby/metacore-runtime-react 23.1.0 → 23.2.0

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.1.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": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.9.0"
+    "@asteby/metacore-ui": "2.9.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-kanban-infinite-scroll.test.tsx

@@ -0,0 +1,210 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban incremental (per-lane) loading:
+//   1. applyLaneTotalsOnMove — the pure count adjustment that keeps a partial
+//      lane's `count/total` header truthful across an optimistic drag.
+//   2. A lane tops up its OWN stage on scroll: firing the sentinel issues
+//      `f_<group_by>=<stage>&page=1&per_page=25` (on top of the active filters)
+//      and appends the rows, with the header total taken from the response meta.
+//   3. Changing the filters re-fetches the initial board page (resets the
+//      per-lane pagination).
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { applyLaneTotalsOnMove, DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// 1. Pure count adjustment
+// ---------------------------------------------------------------------------
+
+describe('applyLaneTotalsOnMove', () => {
+    it('decrements the source total and increments the destination total', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 5 }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(4)
+        expect(out.done.total).toBe(3)
+    })
+
+    it('leaves lanes with an unknown (null) total alone', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: null }, done: { total: 2 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBeNull()
+        expect(out.done.total).toBe(3)
+    })
+
+    it('never drives a total below zero', () => {
+        const out = applyLaneTotalsOnMove(
+            { backlog: { total: 0 }, done: { total: 1 } },
+            'backlog',
+            'done',
+        )
+        expect(out.backlog.total).toBe(0)
+        expect(out.done.total).toBe(2)
+    })
+
+    it('does not mutate the input map', () => {
+        const input = { backlog: { total: 5 }, done: { total: 2 } }
+        applyLaneTotalsOnMove(input, 'backlog', 'done')
+        expect(input.backlog.total).toBe(5)
+        expect(input.done.total).toBe(2)
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2 + 3. Per-lane top-up + reset
+// ---------------------------------------------------------------------------
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'Done', color: 'green', order: 1 },
+]
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true, options: STAGES.map((s) => ({ value: s.key, label: s.label })) },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+        ...over,
+    }
+}
+
+// Initial global page: one backlog card. A backlog top-up (f_stage=backlog)
+// returns two more backlog cards with a server total of 5.
+function fakeApi(): ApiClient {
+    const ok = (data: unknown, meta?: Record<string, unknown>) => ({
+        data: { success: true, data, ...(meta ? { meta } : {}) },
+    })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            const stage = cfg?.params?.f_stage
+            if (stage === 'backlog') {
+                return ok(
+                    [
+                        { id: 2, title: 'Backlog Two', stage: 'backlog' },
+                        { id: 3, title: 'Backlog Three', stage: 'backlog' },
+                    ],
+                    { total: 5 },
+                )
+            }
+            if (stage === 'done') return ok([], { total: 0 })
+            // initial global board page
+            return ok([{ id: 1, title: 'Backlog One', stage: 'backlog' }])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function stageCalls(api: ApiClient, stage: string) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[1]?.params?.f_stage === stage,
+    )
+}
+function globalDataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) =>
+            !String(c[0]).startsWith('/metadata/table/') &&
+            c[1]?.params?.f_stage === undefined,
+    )
+}
+
+// Controllable IntersectionObserver.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicKanban per-lane infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('tops up ONE lane by stage on scroll and shows the server total', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // Initial board page painted its single backlog card.
+        expect(await screen.findByText('Backlog One')).toBeTruthy()
+        expect(stageCalls(api, 'backlog')).toHaveLength(0)
+
+        // Sentinels enter view → each declared lane tops up its OWN stage.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        // The backlog top-up ran with the right scoped params...
+        await waitFor(() => expect(stageCalls(api, 'backlog').length).toBeGreaterThan(0))
+        const call = stageCalls(api, 'backlog')[0]
+        expect(call[1].params).toMatchObject({ f_stage: 'backlog', page: 1, per_page: 25 })
+
+        // ...its rows were appended and the header shows count/serverTotal (3/5).
+        expect(await screen.findByText('Backlog Two')).toBeTruthy()
+        expect(await screen.findByText('3/5')).toBeTruthy()
+    })
+
+    it('re-fetches the initial board page when the filters change (reset)', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog One')
+        const before = globalDataCalls(api).length
+
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" defaultFilters={{ priority: 'high' }} />
+            </ApiProvider>,
+        )
+
+        // A fresh (un-scoped) board fetch fires — the per-lane pagination resets.
+        await waitFor(() => expect(globalDataCalls(api).length).toBeGreaterThan(before))
+    })
+})

package/src/__tests__/dynamic-table-infinite-scroll.test.tsx

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable infinite-scroll (opt-in) behaviour:
+//   1. With `infiniteScroll`, the classic pager is replaced by a "N de total"
+//      indicator; the first page loads with per_page=30 and the sentinel's
+//      intersection appends the next page, deduped by id.
+//   2. Changing the filters resets the accumulated list back to page 1.
+//   3. WITHOUT the prop (default), the classic pager renders and no sentinel /
+//      append path is engaged — existing hosts are untouched.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = {
+    t: (_k: string, o?: { defaultValue?: string; count?: number; total?: number }) => {
+        // Mirror the "{{count}} de {{total}}" interpolation the footer uses.
+        if (o?.defaultValue && o.count != null && o.total != null) {
+            return o.defaultValue.replace('{{count}}', String(o.count)).replace('{{total}}', String(o.total))
+        }
+        return o?.defaultValue ?? _k
+    },
+    i18n: { language: 'es' },
+}
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+// A model with `total` rows. The data endpoint returns a page of {id,title};
+// page 2 deliberately re-includes the last id of page 1 to exercise dedup.
+function fakeApi(total: number, pageSize = 30): ApiClient {
+    const ok = (data: unknown, extra: Record<string, unknown> = {}) => ({
+        data: { success: true, data, meta: { total, ...extra } },
+    })
+    const page = (n: number) => {
+        const start = (n - 1) * pageSize
+        const rows: Array<{ id: number; title: string }> = []
+        // Overlap: page n>1 repeats the previous page's last row (a server that
+        // re-paginated) — dedupeById must drop it.
+        const from = n > 1 ? start - 1 : start
+        for (let i = from; i < Math.min(start + pageSize, total); i++) {
+            rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+        }
+        return rows
+    }
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            // data endpoint
+            const p = cfg?.params?.page ?? 1
+            return ok(page(p))
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function dataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[0] === '/data/issue' || (c[0] === undefined),
+    )
+}
+
+// Controllable IntersectionObserver — captures the observers so the test can
+// fire the sentinel's intersection deterministically.
+type IOEntry = { isIntersecting: boolean }
+let observers: Array<{ fire: (v: boolean) => void }> = []
+class FakeIO {
+    cb: (e: IOEntry[]) => void
+    constructor(cb: (e: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push({ fire: (v: boolean) => this.cb([{ isIntersecting: v }]) })
+    }
+    observe() {}
+    disconnect() {}
+}
+
+describe('DynamicTable infinite scroll', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('loads page 1 (per_page 30) then appends page 2 on intersect, deduped', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45) // 45 rows → page1: 30, page2: 15 (+1 overlap dropped)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+
+        // Page 1 request: page=1, per_page=30.
+        await waitFor(() => {
+            const first = dataCalls(api)[0]
+            expect(first?.[1]?.params).toMatchObject({ page: 1, per_page: 30 })
+        })
+        // Footer indicator reflects the loaded/total counts.
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+
+        // Sentinel enters view → page 2 fetched and APPENDED.
+        expect(observers.length).toBeGreaterThan(0)
+        observers.forEach((o) => o.fire(true))
+
+        await waitFor(() => {
+            const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+            expect(pages).toContain(2)
+        })
+        // 30 + 15 unique = 45 (NOT 46 — the overlap row was deduped).
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+    })
+
+    it('resets to page 1 (replacing the accumulated rows) when filters change', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" infiniteScroll enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+        observers.forEach((o) => o.fire(true))
+        await waitFor(() => expect(screen.getByText('45 de 45')).toBeTruthy())
+
+        // Change the active filters via defaultFilters (part of buildFilterParams).
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicTable
+                    model="issue"
+                    infiniteScroll
+                    enableUrlSync={false}
+                    defaultFilters={{ stage: 'done' }}
+                />
+            </ApiProvider>,
+        )
+
+        // A fresh page-1 request carrying the new filter, and the list collapses
+        // back to a single page (30 of 45) — the accumulated 45 were dropped.
+        await waitFor(() => {
+            const withFilter = dataCalls(api).filter(
+                (c: any[]) => c[1]?.params?.f_stage === 'done',
+            )
+            expect(withFilter.some((c: any[]) => c[1]?.params?.page === 1)).toBe(true)
+        })
+        await waitFor(() => expect(screen.getByText('30 de 45')).toBeTruthy())
+    })
+
+    it('default (no prop) keeps the classic pager and never appends', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi(45)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        // Classic pager renders its rows-per-page control; the infinite footer
+        // indicator ("N de N") is absent.
+        await waitFor(() => expect(dataCalls(api).length).toBeGreaterThan(0))
+        expect(screen.queryByText('30 de 45')).toBeNull()
+        expect(screen.queryByText('45 de 45')).toBeNull()
+
+        // Firing any (stray) sentinel must NOT trigger a page-2 append.
+        observers.forEach((o) => o.fire(true))
+        await new Promise((r) => setTimeout(r, 50))
+        const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+        expect(pages).not.toContain(2)
+    })
+})

package/src/__tests__/use-infinite-scroll.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment happy-dom
+//
+// Shared infinite-scroll primitives (used by both DynamicTable and
+// DynamicKanban):
+//   1. dedupeById — pure append that drops ids already present, preserves order,
+//      and is identity-stable when there is nothing new to add.
+//   2. useInfiniteScrollSentinel — an IntersectionObserver wrapper. happy-dom
+//      has no IntersectionObserver, so we install a controllable fake and drive
+//      it: entering view fires onLoadMore, `disabled` suppresses it, and the
+//      absence of IntersectionObserver degrades to a no-op instead of throwing.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { useEffect, useState } from 'react'
+import { dedupeById, useInfiniteScrollSentinel } from '../use-infinite-scroll'
+
+afterEach(cleanup)
+
+describe('dedupeById', () => {
+    it('appends only rows whose id is not already present', () => {
+        const existing = [{ id: 1, n: 'a' }, { id: 2, n: 'b' }]
+        const incoming = [{ id: 2, n: 'b2' }, { id: 3, n: 'c' }]
+        const out = dedupeById(existing, incoming)
+        expect(out.map((r) => r.id)).toEqual([1, 2, 3])
+        // The already-present row keeps the ORIGINAL (existing wins over incoming).
+        expect(out[1].n).toBe('b')
+    })
+
+    it('preserves the order of existing then the new arrivals', () => {
+        const out = dedupeById(
+            [{ id: 'x' }, { id: 'y' }],
+            [{ id: 'z' }, { id: 'w' }],
+        )
+        expect(out.map((r) => r.id)).toEqual(['x', 'y', 'z', 'w'])
+    })
+
+    it('returns the SAME array reference when nothing is added', () => {
+        const existing = [{ id: 1 }, { id: 2 }]
+        expect(dedupeById(existing, [])).toBe(existing)
+        expect(dedupeById(existing, [{ id: 1 }, { id: 2 }])).toBe(existing)
+    })
+
+    it('treats numeric and string ids as the same key', () => {
+        const out = dedupeById([{ id: 1 }], [{ id: '1' }, { id: 2 }])
+        expect(out.map((r) => r.id)).toEqual([1, 2])
+    })
+})
+
+// ---------------------------------------------------------------------------
+// Controllable IntersectionObserver fake
+// ---------------------------------------------------------------------------
+
+type IOEntry = { isIntersecting: boolean }
+let observers: FakeIO[] = []
+
+class FakeIO {
+    cb: (entries: IOEntry[]) => void
+    observed: Element[] = []
+    disconnected = false
+    constructor(cb: (entries: IOEntry[]) => void) {
+        this.cb = cb
+        observers.push(this)
+    }
+    observe(el: Element) {
+        this.observed.push(el)
+    }
+    disconnect() {
+        this.disconnected = true
+    }
+    // Test helper: simulate the sentinel scrolling into / out of view.
+    fire(isIntersecting: boolean) {
+        this.cb([{ isIntersecting }])
+    }
+}
+
+function Harness({
+    onLoadMore,
+    disabled,
+}: {
+    onLoadMore: () => void
+    disabled?: boolean
+}) {
+    const { rootRef, sentinelRef } = useInfiniteScrollSentinel({ onLoadMore, disabled })
+    return (
+        <div ref={rootRef}>
+            <div ref={sentinelRef} data-testid="sentinel" />
+        </div>
+    )
+}
+
+describe('useInfiniteScrollSentinel', () => {
+    beforeEach(() => {
+        observers = []
+        ;(globalThis as any).IntersectionObserver = FakeIO
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('fires onLoadMore when the sentinel intersects', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} />)
+        expect(observers).toHaveLength(1)
+        observers[0].fire(true)
+        expect(onLoadMore).toHaveBeenCalledTimes(1)
+    })
+
+    it('does NOT fire when disabled (load in flight / no more pages)', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} disabled />)
+        observers[0].fire(true)
+        expect(onLoadMore).not.toHaveBeenCalled()
+    })
+
+    it('ignores non-intersecting callbacks (scrolling away)', () => {
+        const onLoadMore = vi.fn()
+        render(<Harness onLoadMore={onLoadMore} />)
+        observers[0].fire(false)
+        expect(onLoadMore).not.toHaveBeenCalled()
+    })
+
+    it('reads the LATEST onLoadMore/disabled through a ref (no observer churn)', () => {
+        // A parent that flips `disabled` from true -> false without remounting;
+        // the observer must not be torn down, and the newest callback wins.
+        const calls: string[] = []
+        function Parent() {
+            const [enabled, setEnabled] = useState(false)
+            useEffect(() => {
+                setEnabled(true)
+            }, [])
+            return (
+                <Harness onLoadMore={() => calls.push('load')} disabled={!enabled} />
+            )
+        }
+        render(<Parent />)
+        // Only ONE observer instance across the disabled->enabled flip.
+        expect(observers).toHaveLength(1)
+        observers[0].fire(true)
+        expect(calls).toEqual(['load'])
+    })
+
+    it('degrades to a no-op when IntersectionObserver is unavailable', () => {
+        delete (globalThis as any).IntersectionObserver
+        const onLoadMore = vi.fn()
+        // Must render without throwing even though there is no IO.
+        expect(() => render(<Harness onLoadMore={onLoadMore} />)).not.toThrow()
+    })
+})