@teleporthq/teleport-plugin-next-data-source 0.43.57 → 0.43.60

package/dist/cjs/pagination-plugin.js

@@ -58,6 +58,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createNextArrayMapperPaginationPlugin = void 0;
 var teleport_types_1 = require("@teleporthq/teleport-types");
@@ -73,6 +82,12 @@ var filter_utils_1 = require("./filter-utils");
 var loading_state_1 = require("./loading-state");
 var config_1 = require("./cache/config");
 var ast_1 = require("./cache/ast");
+var pagination_controls_1 = require("./pagination-controls");
+var count_effect_1 = require("./count-effect");
+var numbered_pagination_1 = require("./numbered-pagination");
+var infinite_scroll_1 = require("./infinite-scroll");
+var page_reset_1 = require("./page-reset");
+var page_url_sync_1 = require("./page-url-sync");
 // tslint:disable-next-line:no-any
 function parseSearchDefaultValue(raw) {
     if (!raw || typeof raw !== 'object') {
@@ -426,6 +441,17 @@ function buildStateRegistry(uidlNode) {
                     content.searchUrlParamKey.trim().length > 0
                     ? content.searchUrlParamKey.trim()
                     : undefined;
+                // An accumulating list has no discrete pages, so it can neither jump
+                // between them nor put one in the URL. Normalising here — rather than at
+                // each of the ~6 emit sites — keeps every downstream branch able to trust
+                // `paginationMode` / `pageUrlParamKey` on their own.
+                var infiniteScroll = !!content.infiniteScroll;
+                var pageUrlParamKey = !infiniteScroll &&
+                    typeof content.pageUrlParamKey === 'string' &&
+                    content.pageUrlParamKey.trim().length > 0
+                    ? content.pageUrlParamKey.trim()
+                    : undefined;
+                var paginationMode = !infiniteScroll && content.paginationMode === 'numbered' ? 'numbered' : 'buttons';
                 var usage = {
                     index: index++,
                     dataSourceIdentifier: parentDataSource.identifier,
@@ -449,6 +475,10 @@ function buildStateRegistry(uidlNode) {
                     filterPropIds: filterPropIds,
                     filterUrlSearchParamKeys: filterUrlSearchParamKeys,
                     cache: (0, config_1.resolveCacheFromRepeaterContent)(content.cache, parentDataSource.resourceDef),
+                    paginationMode: paginationMode,
+                    infiniteScroll: infiniteScroll,
+                    infiniteScrollLoadMore: infiniteScroll && !!content.infiniteScrollLoadMore,
+                    pageUrlParamKey: pageUrlParamKey,
                     category: 'plain',
                 };
                 // Determine category
@@ -540,6 +570,16 @@ function usageHasSearchUrlSync(usage) {
     return (!!usage.searchUrlParamKey &&
         (usage.category === 'paginated+search' || usage.category === 'search-only'));
 }
+// The page ⇄ URL counterpart of `usageHasSearchUrlSync`: the usage must carry a
+// `pageUrlParamKey` AND own a page state (only the paginated categories declare
+// `ds_N_page` / `ds_N_state.page`). `infiniteScroll` usages are already excluded
+// by the registry, which clears their key.
+function usageHasPageUrlSync(usage) {
+    return (!!usage.pageUrlParamKey &&
+        usage.paginated &&
+        !usage.infiniteScroll &&
+        (usage.category === 'paginated+search' || usage.category === 'paginated-only'));
+}
 // Emits the two URL-sync effects for a search input bound to a URL param
 // (`searchUrlParamKey`), reusing the shared `URLSearchParamSync` builders so the
 // search input behaves exactly like the `selectedCategory` / `sortBy` dropdowns:
@@ -579,10 +619,157 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
     // debounce effect propagates the change into the debounced value + fetch.
     effectStatements.push(teleport_plugin_common_1.URLSearchParamSync.buildUrlReadBackEffect(usage.searchUrlParamKey, vars.setSearchQueryVar));
 }
+// How one usage reads and writes its current page.
+//
+// A paginated+search list keeps the page inside a combined
+// `{ page, debouncedQuery }` object so a search reset can replace both at once,
+// while a paginated-only list has a plain `ds_N_page`. Every control that moves
+// the page goes through this pair rather than re-deriving the distinction.
+function getPageAccessors(usage, vars) {
+    var isCombinedState = usage.category === 'paginated+search';
+    return {
+        currentPageExpr: function () {
+            return isCombinedState
+                ? types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page'))
+                : types.identifier(vars.pageStateVar);
+        },
+        // Functional updates that bail when the page is unchanged: clicking the
+        // page you are already on must not schedule a render, and with it a refetch.
+        buildSetPageStatement: function (pageExpr) {
+            return isCombinedState
+                ? types.callExpression(types.identifier(vars.setCombinedStateVar), [
+                    types.arrowFunctionExpression([types.identifier('state')], types.conditionalExpression(types.binaryExpression('===', types.memberExpression(types.identifier('state'), types.identifier('page')), types.cloneNode(pageExpr, true)), types.identifier('state'), types.objectExpression([
+                        types.spreadElement(types.identifier('state')),
+                        types.objectProperty(types.identifier('page'), types.cloneNode(pageExpr, true)),
+                    ]))),
+                ])
+                : types.callExpression(types.identifier(vars.setPageStateVar), [
+                    types.arrowFunctionExpression([types.identifier('page')], types.conditionalExpression(types.binaryExpression('===', types.identifier('page'), types.cloneNode(pageExpr, true)), types.identifier('page'), types.cloneNode(pageExpr, true))),
+                ]);
+        },
+    };
+}
+/**
+ * Advance one page, unless the count already says this is the last one. Shared
+ * by the scroll sentinel and the Load More button.
+ *
+ * ⛔ The next page is derived from the updater's OWN argument, never from the
+ * page in scope. The sentinel's effect is re-armed on `hasMore` / `maxPages`,
+ * and neither changes on an append while the total is unknown — so a captured
+ * `ds_N_page` would still read 1 on the second intersection and the list would
+ * stop growing after one page, on exactly the sources that cannot be counted.
+ */
+function buildAdvancePageStatement(usage, vars) {
+    var isCombinedState = usage.category === 'paginated+search';
+    var paramName = isCombinedState ? 'state' : 'page';
+    var pageOfParam = function () {
+        return isCombinedState
+            ? types.memberExpression(types.identifier(paramName), types.identifier('page'))
+            : types.identifier(paramName);
+    };
+    // maxPages > 0 && <param page> >= maxPages
+    var atLastPage = types.logicalExpression('&&', types.binaryExpression('>', types.identifier(vars.maxPagesStateVar), types.numericLiteral(0)), types.binaryExpression('>=', pageOfParam(), types.identifier(vars.maxPagesStateVar)));
+    var nextPage = types.binaryExpression('+', pageOfParam(), types.numericLiteral(1));
+    return types.expressionStatement(types.callExpression(types.identifier(isCombinedState ? vars.setCombinedStateVar : vars.setPageStateVar), [
+        types.arrowFunctionExpression([types.identifier(paramName)], types.conditionalExpression(atLastPage, types.identifier(paramName), isCombinedState
+            ? types.objectExpression([
+                types.spreadElement(types.identifier(paramName)),
+                types.objectProperty(types.identifier('page'), nextPage),
+            ])
+            : nextPage)),
+    ]));
+}
+// The accumulator, the end-of-data flag and (in auto mode) the sentinel ref,
+// declared only for a mapper that appends.
+function pushInfiniteScrollDeclarations(stateDeclarations, effectStatements, usage, vars) {
+    if (!usage.infiniteScroll || !usage.paginated) {
+        return;
+    }
+    var infiniteVars = (0, infinite_scroll_1.getInfiniteScrollVars)(usage.index);
+    var currentPageExpr = getPageAccessors(usage, vars).currentPageExpr;
+    var usesSentinel = !usage.infiniteScrollLoadMore;
+    stateDeclarations.push.apply(stateDeclarations, (0, infinite_scroll_1.buildInfiniteScrollDeclarations)(infiniteVars, vars.maxPagesStateVar, currentPageExpr(), usesSentinel));
+    if (usesSentinel) {
+        effectStatements.push((0, infinite_scroll_1.buildSentinelObserverEffect)(infiniteVars, vars.maxPagesStateVar, function () {
+            return buildAdvancePageStatement(usage, vars);
+        }));
+    }
+}
+// The `useMemo` holding the visible page numbers, declared only for a mapper in
+// numbered mode.
+function pushPageTokensDeclaration(stateDeclarations, usage, vars) {
+    if (usage.paginationMode !== 'numbered' || !usage.paginated) {
+        return;
+    }
+    var currentPageExpr = getPageAccessors(usage, vars).currentPageExpr;
+    stateDeclarations.push((0, numbered_pagination_1.buildPageTokensDeclaration)(usage.index, vars.maxPagesStateVar, currentPageExpr()));
+}
+// Emits the page ⇄ `?<key>=` sync for a mapper bound to `pageUrlParamKey` — the
+// pagination counterpart of `pushSearchUrlSyncEffects`, but a SINGLE effect
+// that owns both directions. `page-url-sync.ts` explains at length why the
+// usual read-back / write-back pair cannot be used here.
+//
+// ⛔ MUST be pushed AFTER the filter/sort reset effect. Both can fire in one
+// flush on a navigation that changes filter and page together; effects run in
+// emission order, so this one running LAST is what makes the URL win when it
+// carries a page, while a plain user filter change (whose URL has not moved
+// yet) is left with the reset's page 1 and writes that back.
+function pushPageUrlSyncEffects(stateDeclarations, effectStatements, usage, vars) {
+    if (!usageHasPageUrlSync(usage)) {
+        return;
+    }
+    var refVar = "ds_".concat(usage.index, "_pageUrlRef");
+    var _a = getPageAccessors(usage, vars), currentPageExpr = _a.currentPageExpr, buildSetPageStatement = _a.buildSetPageStatement;
+    stateDeclarations.push((0, page_url_sync_1.buildPageUrlRefDeclaration)(refVar));
+    effectStatements.push((0, page_url_sync_1.buildPageUrlSyncEffect)({
+        paramKey: usage.pageUrlParamKey,
+        refVar: refVar,
+        currentPageExpr: currentPageExpr,
+        buildSetPageStatement: buildSetPageStatement,
+    }));
+}
+// The name of the ref holding this usage's last-seen filter/sort signature.
+function getPageResetRefVar(usage) {
+    return "ds_".concat(usage.index, "_filterResetRef");
+}
+// Everything that can narrow this list: filter destinations (state-, prop- and
+// URL-bound) plus the state a dynamic sort reads. Sort does not change WHICH
+// rows match, but it does change which row is on which page, so holding the
+// visitor on page 5 across a sort change shows them an arbitrary window of a
+// list they just reordered.
+function collectPageResetDeps(usage) {
+    var _a, _b;
+    return {
+        stateIds: __spreadArray(__spreadArray([], usage.filterStateIds, true), ((_b = (_a = usage.dynamicSort) === null || _a === void 0 ? void 0 : _a.depStateIds) !== null && _b !== void 0 ? _b : []), true),
+        propIds: usage.filterPropIds,
+        urlSearchParamKeys: usage.filterUrlSearchParamKeys,
+    };
+}
+// Emits the "a filter or sort changed ⇒ go back to page 1" effect for one
+// paginated usage. No-op for a list nothing can filter or reorder, so a mapper
+// without filters generates byte-for-byte what it always did.
+function pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usage, vars) {
+    if (!usage.paginated) {
+        return;
+    }
+    var deps = collectPageResetDeps(usage);
+    if ((0, page_reset_1.hasNoPageResetDeps)(deps)) {
+        return;
+    }
+    var refVar = getPageResetRefVar(usage);
+    stateDeclarations.push((0, page_reset_1.buildPageResetRefDeclaration)(refVar));
+    // The setter bails when the page is already 1 (see `getPageAccessors`), so a
+    // visitor who was on page 1 all along and merely ticked a category does not
+    // get an extra render — and with it an extra fetch.
+    var buildSetPageStatement = getPageAccessors(usage, vars).buildSetPageStatement;
+    effectStatements.push((0, page_reset_1.buildFilterSortPageResetEffect)(refVar, deps, function () {
+        return types.expressionStatement(buildSetPageStatement(types.numericLiteral(1)));
+    }));
+}
 // ==================== MAIN PLUGIN ====================
 var createNextArrayMapperPaginationPlugin = function () {
     var paginationPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, cacheDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, usagesWithLoadingState, usageByProviderNode, cacheDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages;
         var _a, _b;
         return __generator(this, function (_c) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
@@ -714,11 +901,19 @@ var createNextArrayMapperPaginationPlugin = function () {
                             types.variableDeclaration('const', [
                                 types.variableDeclarator(types.identifier('timer'), types.callExpression(types.identifier('setTimeout'), [
                                     types.arrowFunctionExpression([], types.blockStatement([
+                                        // ⛔ Functional, and a no-op when the query has not
+                                        // actually moved. This effect fires on ANY change to
+                                        // the input state — including the URL read-back
+                                        // echoing back a value the visitor never typed (a
+                                        // browser Forward to `?searchKeyword=x&page=3`) — and
+                                        // replacing the whole object would silently drop the
+                                        // page it had just adopted, as well as remount the
+                                        // provider on a `key` that contains the query.
                                         types.expressionStatement(types.callExpression(types.identifier(vars.setCombinedStateVar), [
-                                            types.objectExpression([
+                                            types.arrowFunctionExpression([types.identifier('state')], types.conditionalExpression(types.binaryExpression('===', types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery')), types.identifier(vars.searchQueryVar)), types.identifier('state'), types.objectExpression([
                                                 types.objectProperty(types.identifier('page'), types.numericLiteral(1)),
                                                 types.objectProperty(types.identifier('debouncedQuery'), types.identifier(vars.searchQueryVar)),
-                                            ]),
+                                            ]))),
                                         ])),
                                     ])),
                                     types.numericLiteral(usage.searchDebounce),
@@ -751,42 +946,6 @@ var createNextArrayMapperPaginationPlugin = function () {
                     }
                     // Add filters to count fetch params if present
                     (0, filter_utils_1.appendFiltersParam)(urlParams, usage.filters, buildFilterDestinationExpression);
-                    // Build the count fetch effect body
-                    var countFetchEffectBody = [];
-                    // Refresh the count on mount (no skip-on-mount guard). Pages seed maxPages
-                    // from the build-time `getStaticProps` count, but that snapshot goes stale:
-                    // rows added AFTER the build (e.g. the normalized product_variants table,
-                    // which is seeded/grows past one page during store generation) are not
-                    // reflected, so a frozen maxPages of 0/1 leaves "Next" permanently disabled
-                    // on data-heavy tables. Re-fetching the live count on mount corrects
-                    // maxPages so pagination tracks the real row count. The effect still runs
-                    // when the search query or a filter changes (see deps below).
-                    // Add the fetch call
-                    countFetchEffectBody.push(types.expressionStatement(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.callExpression(types.identifier('fetch'), [
-                        types.templateLiteral([
-                            types.templateElement({
-                                raw: "/api/".concat(fileName, "-count?"),
-                                cooked: "/api/".concat(fileName, "-count?"),
-                            }),
-                            types.templateElement({ raw: '', cooked: '' }),
-                        ], [
-                            types.newExpression(types.identifier('URLSearchParams'), [
-                                types.objectExpression(urlParams),
-                            ]),
-                        ]),
-                    ]), types.identifier('then')), [
-                        types.arrowFunctionExpression([types.identifier('res')], types.callExpression(types.memberExpression(types.identifier('res'), types.identifier('json')), [])),
-                    ]), types.identifier('then')), [
-                        types.arrowFunctionExpression([types.identifier('data')], types.blockStatement([
-                            types.ifStatement(types.logicalExpression('&&', types.identifier('data'), types.binaryExpression('in', types.stringLiteral('count'), types.identifier('data'))), types.blockStatement([
-                                types.expressionStatement(types.callExpression(types.identifier(vars.setMaxPagesStateVar), [
-                                    types.conditionalExpression(types.binaryExpression('===', types.memberExpression(types.identifier('data'), types.identifier('count')), types.numericLiteral(0)), types.numericLiteral(0), types.callExpression(types.memberExpression(types.identifier('Math'), types.identifier('ceil')), [
-                                        types.binaryExpression('/', types.memberExpression(types.identifier('data'), types.identifier('count')), types.numericLiteral(usage.perPage)),
-                                    ])),
-                                ])),
-                            ])),
-                        ])),
-                    ])));
                     var countEffectDeps = [
                         types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
                     ];
@@ -801,12 +960,24 @@ var createNextArrayMapperPaginationPlugin = function () {
                     (0, filter_utils_1.pushPropIdsAsDeps)(countEffectDeps, countEffectSeen, usage.filterPropIds);
                     // Same goes for URL-driven filters (already documented above).
                     pushUrlSearchParamMemoDeps(countEffectDeps, usage);
-                    effectStatements.push(types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
-                        types.arrowFunctionExpression([], types.blockStatement(countFetchEffectBody)),
-                        types.arrayExpression(countEffectDeps),
-                    ])));
+                    effectStatements.push((0, count_effect_1.buildCountFetchEffect)({
+                        fileName: fileName,
+                        perPage: usage.perPage,
+                        setMaxPagesVar: vars.setMaxPagesStateVar,
+                        urlParams: urlParams,
+                        deps: countEffectDeps,
+                    }));
                     // Two-way URL sync for the search input when bound to a URL param.
                     pushSearchUrlSyncEffects(effectStatements, usage, vars);
+                    // Visible page numbers, when this mapper draws a numbered strip.
+                    pushPageTokensDeclaration(stateDeclarations, usage, vars);
+                    // Accumulation state, when it appends instead of paging.
+                    pushInfiniteScrollDeclarations(stateDeclarations, effectStatements, usage, vars);
+                    // A filter or sort change invalidates the page the visitor is on.
+                    pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usage, vars);
+                    // Ordering matters — see `pushPageUrlSyncEffects`: the read-back runs
+                    // after the reset so a URL that names a page wins over it.
+                    pushPageUrlSyncEffects(stateDeclarations, effectStatements, usage, vars);
                 }
                 else if (usage.category === 'paginated-only') {
                     // Simple page state
@@ -825,42 +996,52 @@ var createNextArrayMapperPaginationPlugin = function () {
                             types.identifier(vars.setPageStateVar),
                         ]), types.callExpression(types.identifier('useState'), [types.numericLiteral(1)])),
                     ]));
-                    // For components (not pages), add a useEffect to fetch count on mount
-                    // Pages get count from getStaticProps, but components need to fetch it client-side
-                    if (!isPage) {
+                    // The live row count behind `ds_N_maxPages`.
+                    //
+                    // Components have never had a build-time count to fall back on, so they
+                    // have always fetched one here. Pages seed theirs from `getStaticProps`,
+                    // which only knows the STATIC filters — good enough to enable/disable a
+                    // "Next" button, but not to label a numbered strip or to know when an
+                    // infinite list has reached its end, so those two modes fetch a live
+                    // count as well.
+                    var needsLiveCount = !isPage || usage.paginationMode === 'numbered' || usage.infiniteScroll;
+                    if (needsLiveCount) {
                         var fileName = (0, utils_1.generateSafeFileName)(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
-                        effectStatements.push(types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
-                            types.arrowFunctionExpression([], types.blockStatement([
-                                types.expressionStatement(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.callExpression(types.identifier('fetch'), [
-                                    types.stringLiteral("/api/".concat(fileName, "-count")),
-                                ]), types.identifier('then')), [
-                                    types.arrowFunctionExpression([types.identifier('res')], types.callExpression(types.memberExpression(types.identifier('res'), types.identifier('json')), [])),
-                                ]), types.identifier('then')), [
-                                    types.arrowFunctionExpression([types.identifier('data')], types.blockStatement([
-                                        types.ifStatement(types.logicalExpression('&&', types.identifier('data'), types.binaryExpression('in', types.stringLiteral('count'), types.identifier('data'))), types.blockStatement([
-                                            types.expressionStatement(types.callExpression(types.identifier(vars.setMaxPagesStateVar), [
-                                                types.conditionalExpression(types.binaryExpression('===', types.memberExpression(types.identifier('data'), types.identifier('count')), types.numericLiteral(0)), types.numericLiteral(0), types.callExpression(types.memberExpression(types.identifier('Math'), types.identifier('ceil')), [
-                                                    types.binaryExpression('/', types.memberExpression(types.identifier('data'), types.identifier('count')), types.numericLiteral(usage.perPage)),
-                                                ])),
-                                            ])),
-                                        ])),
-                                    ])),
-                                ])),
-                            ])),
-                            // Default to mount-only; refresh when ANY filter destination
-                            // changes — state-bound (e.g. `selectedCategory`) and
-                            // URL-driven — so the pagination control reflects the current
-                            // filtered count instead of the unfiltered mount-time total.
-                            types.arrayExpression((function () {
-                                var deps = [];
-                                var depsSeen = new Set();
-                                (0, filter_utils_1.pushStateIdsAsDeps)(deps, depsSeen, usage.filterStateIds);
-                                (0, filter_utils_1.pushPropIdsAsDeps)(deps, depsSeen, usage.filterPropIds);
-                                pushUrlSearchParamMemoDeps(deps, usage);
-                                return deps;
-                            })()),
-                        ])));
+                        // ⛔ This list has no search input, so no `query` param — but it may
+                        // well have filters, and omitting them (as this call site did until
+                        // the shared builder replaced it) counts the WHOLE table: "Next"
+                        // stayed enabled far past the end of a filtered result set.
+                        var countUrlParams = [];
+                        if (usage.queryColumns.length > 0) {
+                            countUrlParams.push(types.objectProperty(types.identifier('queryColumns'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [types.arrayExpression(usage.queryColumns.map(function (c) { return types.stringLiteral(c); }))])));
+                        }
+                        (0, filter_utils_1.appendFiltersParam)(countUrlParams, usage.filters, buildFilterDestinationExpression);
+                        // Default to mount-only; refresh when ANY filter destination
+                        // changes — state-bound (e.g. `selectedCategory`) and URL-driven —
+                        // so the pagination control reflects the current filtered count
+                        // instead of the unfiltered mount-time total.
+                        var countDeps = [];
+                        var countDepsSeen = new Set();
+                        (0, filter_utils_1.pushStateIdsAsDeps)(countDeps, countDepsSeen, usage.filterStateIds);
+                        (0, filter_utils_1.pushPropIdsAsDeps)(countDeps, countDepsSeen, usage.filterPropIds);
+                        pushUrlSearchParamMemoDeps(countDeps, usage);
+                        effectStatements.push((0, count_effect_1.buildCountFetchEffect)({
+                            fileName: fileName,
+                            perPage: usage.perPage,
+                            setMaxPagesVar: vars.setMaxPagesStateVar,
+                            urlParams: countUrlParams,
+                            deps: countDeps,
+                        }));
                     }
+                    // Visible page numbers, when this mapper draws a numbered strip.
+                    pushPageTokensDeclaration(stateDeclarations, usage, vars);
+                    // Accumulation state, when it appends instead of paging.
+                    pushInfiniteScrollDeclarations(stateDeclarations, effectStatements, usage, vars);
+                    // A filter or sort change invalidates the page the visitor is on.
+                    pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usage, vars);
+                    // Ordering matters — see `pushPageUrlSyncEffects`: the read-back runs
+                    // after the reset so a URL that names a page wins over it.
+                    pushPageUrlSyncEffects(stateDeclarations, effectStatements, usage, vars);
                 }
                 else if (usage.category === 'search-only') {
                     // Search-only state
@@ -906,7 +1087,7 @@ var createNextArrayMapperPaginationPlugin = function () {
             });
             // Insert state declarations at the beginning
             stateDeclarations.reverse().forEach(function (s) { return blockStatement.body.unshift(s); });
-            needsUseRouter = registry.usages.some(function (u) { return hasUrlSearchParamFilters(u) || usageHasSearchUrlSync(u); });
+            needsUseRouter = registry.usages.some(function (u) { return hasUrlSearchParamFilters(u) || usageHasSearchUrlSync(u) || usageHasPageUrlSync(u); });
             if (needsUseRouter) {
                 if (!dependencies.useRouter) {
                     // Match the shape the sibling Next.js plugins use (i18n locale mapper,
@@ -936,6 +1117,13 @@ var createNextArrayMapperPaginationPlugin = function () {
                     ]));
                 }
             }
+            // Both the search write-back and the page ⇄ URL effect write the URL through
+            // the shared `URLQueryWriter`, so the ref + helper they close over must be in
+            // the body. Idempotent with `createNextUrlSearchParamsPlugin`, which needs the
+            // same pair for the category/sort dropdowns and may have run first.
+            if (registry.usages.some(function (u) { return usageHasSearchUrlSync(u) || usageHasPageUrlSync(u); })) {
+                teleport_plugin_common_1.URLQueryWriter.ensureQuerySyncDeclarations(blockStatement.body);
+            }
             returnIndex = blockStatement.body.findIndex(function (s) { return s.type === 'ReturnStatement'; });
             insertIndex = returnIndex !== -1 ? returnIndex : blockStatement.body.length;
             effectStatements.reverse().forEach(function (e) { return blockStatement.body.splice(insertIndex, 0, e); });
@@ -946,6 +1134,8 @@ var createNextArrayMapperPaginationPlugin = function () {
             });
             usageIndexByDataSourceId = new Map();
             loadingStateDeclarations = [];
+            usagesWithLoadingState = new Set();
+            usageByProviderNode = new Map();
             cacheDeclarations = [];
             dataProvidersWithRepeaters.forEach(function (dp) {
                 var _a, _b;
@@ -962,6 +1152,7 @@ var createNextArrayMapperPaginationPlugin = function () {
                 }
                 var usage = usages[currentIndex];
                 usageIndexByDataSourceId.set(dataSourceIdentifier, currentIndex + 1);
+                usageByProviderNode.set(dp, usage);
                 var vars = getStateVarsForUsage(usage);
                 var fileName = (0, utils_1.generateSafeFileName)(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
                 // Update DataProvider based on category
@@ -984,6 +1175,15 @@ var createNextArrayMapperPaginationPlugin = function () {
                 var loadingVars = (0, loading_state_1.getLoadingStateVars)(usage.index);
                 if ((0, loading_state_1.applyLoadingStateToDataProvider)(dp, loadingVars)) {
                     loadingStateDeclarations.push.apply(loadingStateDeclarations, (0, loading_state_1.buildLoadingStateDeclarations)(loadingVars));
+                    // Recorded because the loading state is only declared for a provider
+                    // that HAS a loading slot; a Load More button wired later may only
+                    // reference `ds_N_isFetching` if it actually exists.
+                    usagesWithLoadingState.add(usage.index);
+                }
+                // An auto-loading list needs something at the end of the rows for its
+                // IntersectionObserver to watch.
+                if (usage.infiniteScroll && usage.paginated && !usage.infiniteScrollLoadMore) {
+                    insertSentinelAfterProvider(blockStatement, dp, (0, infinite_scroll_1.buildSentinelElement)((0, infinite_scroll_1.getInfiniteScrollVars)(usage.index)));
                 }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, (0, transformations_1.buildProductTransformOptions)(options));
@@ -1035,16 +1235,23 @@ var createNextArrayMapperPaginationPlugin = function () {
                 var vars = getStateVarsForUsage(usage);
                 wireSearchInput(input.node, vars);
             });
-            paginationNodes = findAllPaginationNodesInJSX(blockStatement);
-            paginatedUsages = registry.usages.filter(function (u) { return u.paginated; });
-            // Match by order - pagination node 0 -> paginatedUsages[0], etc.
-            paginationNodes.forEach(function (paginationNode, idx) {
-                if (idx >= paginatedUsages.length) {
+            // STEP 5: Wire pagination widgets
+            //
+            // Each widget belongs to the mapper whose `DataProvider` it follows in the
+            // document — the builder emits it as a sibling of (or inside) that provider.
+            //
+            // ⛔ Not a positional zip of "widgets" against "paginated usages": the two
+            // lists no longer have to be the same length, because an infinite-scroll
+            // mapper renders no widget. Counting one for it would shift every later
+            // mapper onto the wrong usage and wire one list's buttons to another list's
+            // state. Anchoring on the provider cannot drift for the same reason the
+            // provider loop above cannot.
+            findPaginationNodesWithOwners(blockStatement, usageByProviderNode).forEach(function (_a) {
+                var node = _a.node, usage = _a.usage;
+                if (!usage) {
                     return;
                 }
-                var usage = paginatedUsages[idx];
-                var vars = getStateVarsForUsage(usage);
-                wirePaginationButtons(paginationNode.node, usage, vars);
+                wirePaginationWidget(node, usage, getStateVarsForUsage(usage), usagesWithLoadingState.has(usage.index));
             });
             // STEP 6: Update getStaticProps if this is a page
             if (isPage) {
@@ -1057,6 +1264,57 @@ var createNextArrayMapperPaginationPlugin = function () {
 };
 exports.createNextArrayMapperPaginationPlugin = createNextArrayMapperPaginationPlugin;
 // ==================== HELPER FUNCTIONS ====================
+/**
+ * Inserts the scroll sentinel immediately after a `DataProvider`, as its next
+ * sibling, so it sits below the rendered rows.
+ *
+ * It has to be a sibling: the provider's own child is a render-prop function,
+ * and anything placed inside it would be re-created on every fetch — the
+ * observer would then be watching an element that is no longer in the document.
+ *
+ * Returns false when the provider has no element parent to splice into (a
+ * provider returned directly from the component), leaving the list on its
+ * count-driven `hasMore` rather than injecting a stray node.
+ */
+function insertSentinelAfterProvider(blockStatement, provider, sentinel) {
+    var inserted = false;
+    var traverse = function (node) {
+        if (!node || inserted) {
+            return;
+        }
+        if (Array.isArray(node.children)) {
+            var at = node.children.indexOf(provider);
+            if (at !== -1) {
+                node.children.splice(at + 1, 0, sentinel);
+                inserted = true;
+                return;
+            }
+            node.children.forEach(traverse);
+        }
+        if (node.body) {
+            if (Array.isArray(node.body)) {
+                node.body.forEach(traverse);
+            }
+            else {
+                traverse(node.body);
+            }
+        }
+        if (node.consequent) {
+            traverse(node.consequent);
+        }
+        if (node.alternate) {
+            traverse(node.alternate);
+        }
+        if (node.expression) {
+            traverse(node.expression);
+        }
+        if (node.argument) {
+            traverse(node.argument);
+        }
+    };
+    traverse(blockStatement);
+    return inserted;
+}
 function findAllDataProvidersInJSX(blockStatement) {
     var results = [];
     var traverse = function (node) {
@@ -1176,18 +1434,32 @@ function findAllSearchInputsInJSX(blockStatement) {
     traverse(blockStatement);
     return results;
 }
-function findAllPaginationNodesInJSX(blockStatement) {
+/**
+ * Every pagination widget in the JSX, paired with the mapper it belongs to.
+ *
+ * Ownership follows document order: a widget belongs to the most recent
+ * `DataProvider` seen before it, which is exactly how the builder emits it —
+ * as a sibling that follows its provider, or nested inside that provider's
+ * subtree. A widget that precedes every provider (nothing sensible to wire it
+ * to) comes back with no owner and is left alone.
+ */
+function findPaginationNodesWithOwners(blockStatement, usageByProviderNode) {
     var results = [];
+    var currentUsage;
     var traverse = function (node) {
         var _a, _b, _c, _d, _e;
         if (!node) {
             return;
         }
         if (node.type === 'JSXElement') {
+            var owner = usageByProviderNode.get(node);
+            if (owner) {
+                currentUsage = owner;
+            }
             var classAttr = (_b = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'className'; });
             var className = ((_c = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _c === void 0 ? void 0 : _c.value) || ((_e = (_d = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _d === void 0 ? void 0 : _d.expression) === null || _e === void 0 ? void 0 : _e.value) || '';
             if (className.includes('cms-pagination-node')) {
-                results.push({ node: node, className: className });
+                results.push({ node: node, usage: currentUsage });
             }
         }
         if (node.children && Array.isArray(node.children)) {
@@ -1250,7 +1522,6 @@ dp, usage, paramsProps, memoDeps, cacheDeclarations) {
     return hoisted.cachedIdentifier;
 }
 function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDeclarations) {
-    var _a;
     var attrs = dp.openingElement.attributes;
     // Remove existing params, key, initialData, fetchData, persistDataDuringLoading
     dp.openingElement.attributes = attrs.filter(function (attr) {
@@ -1286,7 +1557,12 @@ function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDe
     // the first client fetch (its internal guard only skips when initialData is
     // defined on mount). Without that skip, toggling sort correctly triggers a
     // refetch via the useMemo params dependency chain.
-    if (!usage.dynamicSort) {
+    //
+    // An appending list skips it for a second reason: `initialData` makes
+    // DataProvider skip its first fetch, so page 1 would render from the prefetch
+    // and never enter the accumulator — appending page 2 would then REPLACE the
+    // visible rows with page 2 alone.
+    if (!usage.dynamicSort && !usage.infiniteScroll) {
         var initialDataCondition = wrapInitialDataWithUrlFilterGuard(types.logicalExpression('&&', types.binaryExpression('===', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')), types.numericLiteral(1)), types.unaryExpression('!', types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')), true)), usage);
         dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(initialDataCondition, types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
     }
@@ -1295,24 +1571,37 @@ function updateDataProviderForPaginatedSearch(dp, usage, vars, fileName, cacheDe
     // "skip-first-fetch-when-we-have-initialData" guard, which would prevent the
     // new sort params from reaching the fetcher. Leaving sort out of the key
     // lets the useMemo params identity change alone drive refetch.
-    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
-        types.templateElement({
-            raw: "".concat(usage.dataSourceIdentifier, "-"),
-            cooked: "".concat(usage.dataSourceIdentifier, "-"),
-        }),
-        types.templateElement({ raw: '-', cooked: '-' }),
-        types.templateElement({ raw: '', cooked: '' }),
-    ], [
-        types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')),
-        types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
-    ]))));
+    //
+    // ⛔ The page is left out too when the list APPENDS: remounting on every
+    // appended page would unmount the accumulated rows and refetch from scratch.
+    // The query stays in the key, so a new search still starts a clean list.
+    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(usage.infiniteScroll
+        ? types.templateLiteral([
+            types.templateElement({
+                raw: "".concat(usage.dataSourceIdentifier, "-"),
+                cooked: "".concat(usage.dataSourceIdentifier, "-"),
+            }),
+            types.templateElement({ raw: '', cooked: '' }),
+        ], [
+            types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
+        ])
+        : types.templateLiteral([
+            types.templateElement({
+                raw: "".concat(usage.dataSourceIdentifier, "-"),
+                cooked: "".concat(usage.dataSourceIdentifier, "-"),
+            }),
+            types.templateElement({ raw: '-', cooked: '-' }),
+            types.templateElement({ raw: '', cooked: '' }),
+        ], [
+            types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('page')),
+            types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery')),
+        ]))));
     // Add fetchData
-    dp.openingElement.attributes.push(createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined));
+    dp.openingElement.attributes.push(buildFetchDataForUsage(fileName, usage));
     // Add persistDataDuringLoading
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
 }
 function updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDeclarations) {
-    var _a;
     var attrs = dp.openingElement.attributes;
     dp.openingElement.attributes = attrs.filter(function (attr) {
         var _a;
@@ -1339,20 +1628,26 @@ function updateDataProviderForPaginationOnly(dp, usage, vars, fileName, cacheDec
     // Add params
     var cachedInitialData = pushParamsAttribute(dp, usage, paramsProps, memoDeps, cacheDeclarations);
     // Add initialData. See paginated+search updater for why we skip prefetch
-    // reuse when a dynamic state-bound sort is active.
-    if (!usage.dynamicSort) {
+    // reuse when a dynamic state-bound sort is active, and why an appending list
+    // skips it too.
+    if (!usage.dynamicSort && !usage.infiniteScroll) {
         dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('initialData'), types.jsxExpressionContainer(types.conditionalExpression(wrapInitialDataWithUrlFilterGuard(types.binaryExpression('===', types.identifier(vars.pageStateVar), types.numericLiteral(1)), usage), types.optionalMemberExpression(types.identifier('props'), types.identifier(vars.propsPrefix), false, true), cachedInitialData ? types.identifier(cachedInitialData) : types.identifier('undefined')))));
     }
-    // Add key — sort is intentionally NOT included; see paginated+search updater.
-    dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
-        types.templateElement({
-            raw: "".concat(usage.dataSourceIdentifier, "-page-"),
-            cooked: "".concat(usage.dataSourceIdentifier, "-page-"),
-        }),
-        types.templateElement({ raw: '', cooked: '' }),
-    ], [types.identifier(vars.pageStateVar)]))));
+    // Add key — sort is intentionally NOT included; see paginated+search updater,
+    // which also explains why an appending list keys on nothing at all (there is
+    // no query here to vary it by; a filter change restarts the accumulator
+    // through its signature instead).
+    if (!usage.infiniteScroll) {
+        dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('key'), types.jsxExpressionContainer(types.templateLiteral([
+            types.templateElement({
+                raw: "".concat(usage.dataSourceIdentifier, "-page-"),
+                cooked: "".concat(usage.dataSourceIdentifier, "-page-"),
+            }),
+            types.templateElement({ raw: '', cooked: '' }),
+        ], [types.identifier(vars.pageStateVar)]))));
+    }
     // Add fetchData
-    dp.openingElement.attributes.push(createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined));
+    dp.openingElement.attributes.push(buildFetchDataForUsage(fileName, usage));
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
 }
 function updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclarations) {
@@ -1485,7 +1780,10 @@ function stabilizeDataProviderWithoutRepeater(dp) {
     // Replace the params attribute
     attrs[paramsAttrIndex] = types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(memoizedParams));
 }
-function createFetchDataAttribute(fileName, cache) {
+function createFetchDataAttribute(fileName, cache, 
+// When set, the resolved value is every page fetched so far rather than just
+// the page that was requested — see `infinite-scroll.ts`.
+accumulate) {
     var fetchCall = types.callExpression(types.identifier('fetch'), [
         types.templateLiteral([
             types.templateElement({
@@ -1506,7 +1804,16 @@ function createFetchDataAttribute(fileName, cache) {
     // The uncached tail is left exactly as it has always been emitted, so a
     // project that does not cache produces byte-identical output.
     var uncachedTail = types.arrowFunctionExpression([types.identifier('response')], types.optionalMemberExpression(types.identifier('response'), types.identifier('data'), false, true));
-    var networkChain = types.callExpression(types.memberExpression(parsedJson, types.identifier('then')), [cache ? (0, ast_1.buildCacheStoreThen)(cache) : uncachedTail]);
+    // ⛔ Accumulation and the client cache are mutually exclusive: a cache hit
+    // short-circuits the fetch and hands back one page's rows, which would drop
+    // every page already accumulated. The caller suppresses the client cache for
+    // an appending list, so this branch never sees both.
+    var responseTail = accumulate
+        ? (0, infinite_scroll_1.buildAccumulatingResponseHandler)((0, infinite_scroll_1.getInfiniteScrollVars)(accumulate.usage.index), accumulate.usage.perPage)
+        : cache
+            ? (0, ast_1.buildCacheStoreThen)(cache)
+            : uncachedTail;
+    var networkChain = types.callExpression(types.memberExpression(parsedJson, types.identifier('then')), [responseTail]);
     var arrow = cache
         ? types.arrowFunctionExpression([types.identifier('params')], (0, ast_1.buildCachedFetchBody)(networkChain, cache))
         : types.arrowFunctionExpression([types.identifier('params')], networkChain);
@@ -1522,45 +1829,91 @@ function wireSearchInput(inputNode, vars) {
     // Add value
     inputNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('value'), types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))));
 }
+/**
+ * The `fetchData` attribute for one paginated usage.
+ *
+ * ⛔ An appending list gets no CLIENT cache: a cache hit resolves with one
+ * page's rows without going through the accumulator, which would silently
+ * discard every page already loaded. The SERVER cache is untouched — it sits
+ * behind the API route and returns the same page either way.
+ */
+function buildFetchDataForUsage(fileName, usage) {
+    var _a;
+    if (usage.infiniteScroll) {
+        return createFetchDataAttribute(fileName, undefined, { usage: usage });
+    }
+    return createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined);
+}
+/**
+ * Wires the authored Load More button of an appending list.
+ *
+ * Disabled — not hidden — when there is nothing left to load, so the author's
+ * styling of the finished state is theirs to decide, and so the control does
+ * not vanish from under the visitor's cursor mid-click.
+ */
+function wireLoadMoreButton(paginationNode, usage, vars, hasLoadingState) {
+    if (!usage.infiniteScrollLoadMore) {
+        return;
+    }
+    var button = (0, pagination_controls_1.findPaginationControl)(paginationNode, 'load-more');
+    if (!button) {
+        return;
+    }
+    var infiniteVars = (0, infinite_scroll_1.getInfiniteScrollVars)(usage.index);
+    (0, pagination_controls_1.convertControlToButton)(button);
+    (0, pagination_controls_1.setJSXExpressionAttribute)(button, 'onClick', types.arrowFunctionExpression([], 
+    // The advance statement is an expression statement; the handler needs the
+    // expression itself.
+    buildAdvancePageStatement(usage, vars).expression));
+    // The in-flight term is only referenced when the provider declared it —
+    // a mapper with no loading branch never gets `ds_N_isFetching`.
+    var notHasMore = types.unaryExpression('!', types.identifier(infiniteVars.hasMoreVar), true);
+    (0, pagination_controls_1.setJSXExpressionAttribute)(button, 'disabled', hasLoadingState
+        ? types.logicalExpression('||', notHasMore, types.identifier((0, loading_state_1.getLoadingStateVars)(usage.index).isFetchingVar))
+        : notHasMore);
+}
+/**
+ * Wires one mapper's pagination container according to the mode it is in, and
+ * removes the controls belonging to the other modes.
+ *
+ * The builder never deletes a control when the author switches mode — doing so
+ * would throw away their styling — so the container can hold a superset of what
+ * any one mode needs. Pruning here is what keeps a Previous/Next list from
+ * rendering a dead numbered strip, and an infinite list from rendering page
+ * buttons beside its Load More.
+ */
+function wirePaginationWidget(paginationNode, usage, vars, hasLoadingState) {
+    if (usage.infiniteScroll) {
+        // Only the Load More button survives; page controls make no sense for a
+        // list the visitor never leaves.
+        (0, pagination_controls_1.dropInactivePaginationControls)(paginationNode, ['load-more']);
+        wireLoadMoreButton(paginationNode, usage, vars, hasLoadingState);
+        return;
+    }
+    var activeKinds = usage.paginationMode === 'numbered'
+        ? ['first', 'previous', 'pages', 'page', 'ellipsis', 'next', 'last']
+        : ['previous', 'next'];
+    (0, pagination_controls_1.dropInactivePaginationControls)(paginationNode, activeKinds);
+    wirePaginationButtons(paginationNode, usage, vars);
+    if (usage.paginationMode === 'numbered') {
+        var _a = getPageAccessors(usage, vars), currentPageExpr = _a.currentPageExpr, buildSetPageStatement = _a.buildSetPageStatement;
+        var numberedVars = {
+            index: usage.index,
+            maxPagesVar: vars.maxPagesStateVar,
+            currentPageExpr: currentPageExpr,
+            buildSetPageStatement: buildSetPageStatement,
+        };
+        (0, numbered_pagination_1.wireNumberedPagination)(paginationNode, numberedVars);
+    }
+}
 function wirePaginationButtons(paginationNode, usage, vars) {
-    // Find prev and next buttons
-    var findButton = function (node, direction) {
-        var _a, _b, _c, _d, _e;
-        if (!node) {
-            return null;
-        }
-        if (node.type === 'JSXElement') {
-            var classAttr = (_b = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'className'; });
-            var className = ((_c = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _c === void 0 ? void 0 : _c.value) || ((_e = (_d = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _d === void 0 ? void 0 : _d.expression) === null || _e === void 0 ? void 0 : _e.value) || '';
-            if (className.includes(direction)) {
-                return node;
-            }
-        }
-        if (node.children && Array.isArray(node.children)) {
-            for (var _i = 0, _f = node.children; _i < _f.length; _i++) {
-                var c = _f[_i];
-                var found = findButton(c, direction);
-                if (found) {
-                    return found;
-                }
-            }
-        }
-        return null;
-    };
-    var prevButton = findButton(paginationNode, 'previous');
-    var nextButton = findButton(paginationNode, 'next');
+    // Marker attribute first, class-name substring second — projects generated
+    // before the marker existed carry only the class name.
+    var prevButton = (0, pagination_controls_1.findPaginationControl)(paginationNode, 'previous', 'previous');
+    var nextButton = (0, pagination_controls_1.findPaginationControl)(paginationNode, 'next', 'next');
     var isCombinedState = usage.category === 'paginated+search';
     if (prevButton) {
-        // Change to button element
-        prevButton.openingElement.name.name = 'button';
-        if (prevButton.closingElement) {
-            prevButton.closingElement.name.name = 'button';
-        }
-        // Add type="button"
-        var hasType = prevButton.openingElement.attributes.some(function (a) { var _a; return ((_a = a.name) === null || _a === void 0 ? void 0 : _a.name) === 'type'; });
-        if (!hasType) {
-            prevButton.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('type'), types.stringLiteral('button')));
-        }
+        (0, pagination_controls_1.convertControlToButton)(prevButton);
         // Add onClick
         prevButton.openingElement.attributes = prevButton.openingElement.attributes.filter(function (a) { var _a; return ((_a = a.name) === null || _a === void 0 ? void 0 : _a.name) !== 'onClick'; });
         if (isCombinedState) {
@@ -1589,14 +1942,7 @@ function wirePaginationButtons(paginationNode, usage, vars) {
         }
     }
     if (nextButton) {
-        nextButton.openingElement.name.name = 'button';
-        if (nextButton.closingElement) {
-            nextButton.closingElement.name.name = 'button';
-        }
-        var hasType = nextButton.openingElement.attributes.some(function (a) { var _a; return ((_a = a.name) === null || _a === void 0 ? void 0 : _a.name) === 'type'; });
-        if (!hasType) {
-            nextButton.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('type'), types.stringLiteral('button')));
-        }
+        (0, pagination_controls_1.convertControlToButton)(nextButton);
         nextButton.openingElement.attributes = nextButton.openingElement.attributes.filter(function (a) { var _a; return ((_a = a.name) === null || _a === void 0 ? void 0 : _a.name) !== 'onClick'; });
         if (isCombinedState) {
             nextButton.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('onClick'), types.jsxExpressionContainer(types.arrowFunctionExpression([], types.callExpression(types.identifier(vars.setCombinedStateVar), [