@teleporthq/teleport-plugin-next-data-source 0.43.74 → 0.44.0

package/dist/esm/pagination-plugin.js

@@ -48,21 +48,23 @@ import * as types from '@babel/types';
 import { parseExpression } from '@babel/parser';
 import { ASTStatementOrder, GenericUtils, StringUtils } from '@teleporthq/teleport-shared';
 import { ASTUtils, URLQueryWriter, URLSearchParamSync } from '@teleporthq/teleport-plugin-common';
-import { generateSafeFileName } from './utils';
+import { collectFilterLeafConditions, generateSafeFileName, pruneFilterTree } from './utils';
 import { generateDataSourceFetcherWithCore } from './data-source-fetchers';
 import { buildProductTransformOptions } from './transformations';
-import { appendSortsParam, extractDynamicSort } from './sort-utils';
-import { appendFiltersParam, pushStateIdsAsDeps, pushPropIdsAsDeps } from './filter-utils';
+import { appendSortsParam, extractDynamicSort, readFixedSort } from './sort-utils';
+import { appendFiltersParam, buildStaticFiltersStringifyCall, pushStateIdsAsDeps, pushPropIdsAsDeps, } from './filter-utils';
 import { appendItemsPathParam, extractItemsPath } from './items-path';
 import { resolveRepeaterPerPage } from './repeater-page-size';
 import { applyLoadingStateToDataProvider, buildLoadingStateDeclarations, getLoadingStateVars, } from './loading-state';
 import { mergeServerCacheOptions, resolveCacheFromRepeaterContent } from './cache/config';
 import { buildCacheHydrationEffect, buildCacheStoreThen, buildCachedFetchBody, buildCachedParamsDeclarations, registerCacheClientImports, } from './cache/ast';
-import { convertControlToButton, dropInactivePaginationControls, findPaginationControl, setJSXExpressionAttribute, } from './pagination-controls';
+import { convertControlToButton, dropInactivePaginationControls, findAllPaginationControls, findPaginationControl, PAGINATION_FOR_ATTR, readJSXAttributeString, setJSXExpressionAttribute, } from './pagination-controls';
+import { findRangeControls, wireRangeControl } from './range-control';
+import { findAllSearchInputsInJSX, pairSearchInputs, wireSearchInput } from './search-input';
 import { buildCountFetchEffect, buildCountSeqDeclaration } from './count-effect';
 import { findAllSearchClearButtonsInJSX, findSiblingSearchInput, wireSearchClearButton, } from './search-clear';
 import { buildPageTokensDeclaration, wireNumberedPagination, } from './numbered-pagination';
-import { buildAccumulatingResponseHandler, buildInfiniteScrollDeclarations, buildSentinelElement, buildSentinelObserverEffect, getInfiniteScrollVars, } from './infinite-scroll';
+import { buildAccumulatingRequestMark, buildAccumulatingResponseHandler, buildInfiniteScrollDeclarations, buildSentinelElement, buildSentinelObserverEffect, getInfiniteScrollVars, } from './infinite-scroll';
 import { buildFilterSortPageResetEffect, buildPageResetRefDeclaration, hasNoPageResetDeps, } from './page-reset';
 import { buildPageUrlRefDeclaration, buildPageUrlSyncEffect } from './page-url-sync';
 import { isLocalizedProject } from './content-localization';
@@ -103,79 +105,37 @@ function searchDefaultValueInitAST(value) {
     // independent AST node — Babel does not support shared references.
     return types.cloneNode(value.ast, /* deep */ true);
 }
-// Builds the `useState(...)` initializer for the search query. When the
-// cms-list-repeater is bound to a URL param (`searchUrlParamKey`), the query is
-// seeded from `window.location.search` on the client so a deep link such as
-// `/products-list?searchKeyword=yoga` arrives pre-filtered on the very first
-// paint; the server render (where `window` is undefined) and any missing param
-// fall back to the `searchDefaultValue` seed (empty string by default). This
-// mirrors the `selectedCategory` / `sortBy` initializer emitted by
-// `createStateHookAST` for state-level `urlSearchParamBinding`, keeping the
-// three products-list controls consistent.
+// Builds the `useState(...)` initializer for the search query: the
+// `searchDefaultValue` seed (empty string by default), never the address. A
+// statically generated page is rendered on the server without the visitor's
+// `?searchKeyword=`, and the browser's first render must match it — a query
+// seeded from `window.location.search` rendered a filled input and skipped the
+// prefetched rows there, and React warned of a hydration mismatch. A URL-bound
+// search adopts the address after mount instead (`pushSearchUrlSyncEffects`),
+// as the page number does (`page-url-sync.ts`).
 //
 // Returns a fresh AST on every call (no shared node references) so the same
 // initializer can seed both the immediate `ds_N_searchQuery` state and the
 // debounced `ds_N_state.debouncedQuery` value.
 function buildSearchQueryInitAST(usage) {
-    var fallback = searchDefaultValueInitAST(usage.searchDefaultValue);
-    if (!usage.searchUrlParamKey) {
-        return fallback;
-    }
-    // (typeof window !== 'undefined'
-    //   ? new URLSearchParams(window.location.search).get('<key>')
-    //   : null) ?? <fallback>
-    return types.logicalExpression('??', types.conditionalExpression(types.binaryExpression('!==', types.unaryExpression('typeof', types.identifier('window')), types.stringLiteral('undefined')), types.callExpression(types.memberExpression(types.newExpression(types.identifier('URLSearchParams'), [
-        types.memberExpression(types.memberExpression(types.identifier('window'), types.identifier('location')), types.identifier('search')),
-    ]), types.identifier('get')), [types.stringLiteral(usage.searchUrlParamKey)]), types.nullLiteral()), fallback);
+    return searchDefaultValueInitAST(usage.searchDefaultValue);
 }
-// The UIDL's `filters.content` array can wrap one or more conditions inside
-// a `{ type: 'group', operator: 'and' | 'or', children: [...] }` entry — the
-// GUI builds this shape when the inspector adds a logical group. The data
-// source API endpoint (`processFilters` in the generated data-source module)
-// only knows how to consume a FLAT array of `{ source, destination, operand }`
-// conditions, so we walk groups recursively here and collect their leaf
-// conditions in order. Anything that isn't a group AND isn't a condition is
-// dropped — defensive against partially-built filter entries that would
-// otherwise emit `{ source: '', destination: '', operand: '' }` rows the
-// API ignores anyway.
-//
-// `or`-grouped conditions are flattened just like `and`-grouped ones — the
-// downstream SQL builder always joins flat filters with `AND`, so emitting
-// the conditions side-by-side approximates AND semantics. A future API
-// upgrade that respects group operators would key off the original tree
-// directly; until then, AND-flattening is the closest correct behaviour and
-// matches what the inspector preview shows for the common single-group case
-// the GUI emits today.
-function flattenFilterGroups(filters) {
+// The UIDL's `filters.content` array is the tree the inspector authored:
+// `{ type: 'group', operator: 'and' | 'or', children: [...] }` entries around
+// `{ source, destination, operand }` conditions, nested as deep as the user
+// grouped them. The tree is kept as it is — the generated fetchers read it with
+// `normalizeFilterTree`, so an `or` group stays an `or`. Only junk is dropped:
+// an entry that is neither a group nor a condition (a half-built inspector
+// row) would otherwise reach the API as `{ source: '', destination: '' }`.
+// Entries without an explicit `type` are the legacy flat form and are
+// conditions.
+function readFilterTree(filters) {
     if (!Array.isArray(filters)) {
         return [];
     }
-    var out = [];
-    var walk = function (entry) {
-        if (!entry || typeof entry !== 'object') {
-            return;
-        }
-        if (entry.type === 'group' && Array.isArray(entry.children)) {
-            for (var _i = 0, _a = entry.children; _i < _a.length; _i++) {
-                var child = _a[_i];
-                walk(child);
-            }
-            return;
-        }
-        // Backwards-compatible: entries without an explicit `type` (legacy flat
-        // form) and entries explicitly tagged `condition` are both treated as
-        // condition leaves.
-        if (entry.type === undefined || entry.type === 'condition') {
-            out.push(entry);
-        }
-    };
-    for (var _i = 0, filters_1 = filters; _i < filters_1.length; _i++) {
-        var entry = filters_1[_i];
-        walk(entry);
-    }
-    return out;
+    return pruneFilterTree(filters, function (entry) { return entry.type === undefined || entry.type === 'condition'; });
 }
-// Walks a flat filter list to extract every `urlSearchParams` reference key
+// Walks the filter tree to extract every `urlSearchParams` reference key
 // (e.g. `'categoryFilter'`). Used to (a) inject `const router = useRouter()`
 // once at the top of the component, (b) wire `router.query.<key>` into the
 // `useMemo` dependency array so the client-side fetch reruns whenever the
@@ -184,8 +144,8 @@ function flattenFilterGroups(filters) {
 function collectFilterUrlSearchParamKeys(filters) {
     var seen = new Set();
     var out = [];
-    for (var _i = 0, filters_2 = filters; _i < filters_2.length; _i++) {
-        var f = filters_2[_i];
+    for (var _i = 0, _a = collectFilterLeafConditions(filters); _i < _a.length; _i++) {
+        var f = _a[_i];
         var dest = f === null || f === void 0 ? void 0 : f.destination;
         if (!ASTUtils.isUIDLDynamicReference(dest)) {
             continue;
@@ -202,6 +162,12 @@ function collectFilterUrlSearchParamKeys(filters) {
     }
     return out;
 }
+// The filter tree with every dynamic destination pruned — what `getStaticProps`
+// can resolve at build time. Groups keep their operator; a group left empty by
+// the pruning disappears with it (`pruneFilterTree`).
+function staticFiltersOf(usage) {
+    return pruneFilterTree(usage.filters || [], function (f) { return !ASTUtils.isUIDLDynamicReference(f.destination); });
+}
 // Returns true when any filter destination is a `urlSearchParams` dynamic
 // reference — used by the plugin to know it needs to import `useRouter` and
 // emit `const router = useRouter()` at the top of the component. Cheaper to
@@ -359,22 +325,28 @@ function buildStateRegistry(uidlNode) {
                 if ((_k = (_j = parentDataSource.resourceParams) === null || _j === void 0 ? void 0 : _j.sorts) === null || _k === void 0 ? void 0 : _k.content) {
                     sorts = parentDataSource.resourceParams.sorts.content;
                 }
-                // If legacy sorts aren't set, fall back to the new dynamic single-column
-                // sort fields on the cms-list-repeater (used by admin-panel listing pages).
+                // If legacy sorts aren't set, fall back to the single-column sort fields
+                // on the cms-list-repeater. A FIXED one (a column chosen in the editor,
+                // e.g. a blog listing's newest first) is a static sort: read as dynamic,
+                // it made the list drop the server-side first page (`initialData` below
+                // is skipped for a dynamic sort) — the pre-rendered HTML carried no
+                // posts, and the browser fetched page 1 a second time. Only a sort
+                // bound to state (the admin panel's sortable columns) is dynamic.
                 var dynamicSort = void 0;
                 if ((!sorts || sorts.length === 0) && content.sort) {
-                    dynamicSort = extractDynamicSort(content.sort, content.sortDirection);
+                    var fixedSort = readFixedSort(content.sort, content.sortDirection);
+                    if (fixedSort) {
+                        sorts = [fixedSort];
+                    }
+                    else {
+                        dynamicSort = extractDynamicSort(content.sort, content.sortDirection);
+                    }
                 }
-                // Extract filters from parent's resource params. The inspector wraps
-                // every condition in a `{ type: 'group' }` envelope (single-group or
-                // nested), so flatten to leaf conditions before the downstream emit
-                // sites consume `.source` / `.destination` / `.operand` directly —
-                // they expect a flat condition array. See `flattenFilterGroups`'s
-                // header comment for why AND-flattening is the correct fallback for
-                // the API endpoint's flat-condition contract.
+                // Extract filters from parent's resource params, keeping the group tree
+                // the inspector authored (see `readFilterTree`).
                 var filters = [];
                 if ((_m = (_l = parentDataSource.resourceParams) === null || _l === void 0 ? void 0 : _l.filters) === null || _m === void 0 ? void 0 : _m.content) {
-                    filters = flattenFilterGroups(parentDataSource.resourceParams.filters.content);
+                    filters = readFilterTree(parentDataSource.resourceParams.filters.content);
                 }
                 // Split dynamic destination keys by reference type. `state`/`prop`
                 // refs resolve to bare identifiers (so they're useMemo deps as-is);
@@ -382,8 +354,8 @@ function buildStateRegistry(uidlNode) {
                 // `useRouter()` declaration injected separately.
                 var filterStateIds = [];
                 var filterPropIds = [];
-                for (var _i = 0, filters_3 = filters; _i < filters_3.length; _i++) {
-                    var f = filters_3[_i];
+                for (var _i = 0, _u = collectFilterLeafConditions(filters); _i < _u.length; _i++) {
+                    var f = _u[_i];
                     if (!ASTUtils.isUIDLDynamicReference(f.destination)) {
                         continue;
                     }
@@ -437,6 +409,7 @@ function buildStateRegistry(uidlNode) {
                     index: index++,
                     dataSourceIdentifier: parentDataSource.identifier,
                     arrayMapperRenderProp: arrayMapperRenderProp,
+                    nodeId: typeof content.nodeId === 'string' ? content.nodeId : undefined,
                     resourceDefinition: {
                         dataSourceId: parentDataSource.resourceDef.dataSourceId || '',
                         tableName: parentDataSource.resourceDef.tableName || '',
@@ -489,8 +462,8 @@ function buildStateRegistry(uidlNode) {
         }
         // Recurse into children
         if (((_r = node.content) === null || _r === void 0 ? void 0 : _r.children) && Array.isArray(node.content.children)) {
-            for (var _u = 0, _v = node.content.children; _u < _v.length; _u++) {
-                var child = _v[_u];
+            for (var _v = 0, _w = node.content.children; _v < _w.length; _v++) {
+                var child = _w[_v];
                 traverse(child, parentDataSource);
             }
         }
@@ -515,8 +488,8 @@ function buildStateRegistry(uidlNode) {
             }
         }
         if (Array.isArray(node.children)) {
-            for (var _w = 0, _x = node.children; _w < _x.length; _w++) {
-                var child = _x[_w];
+            for (var _x = 0, _y = node.children; _x < _y.length; _x++) {
+                var child = _y[_x];
                 traverse(child, parentDataSource);
             }
         }
@@ -532,6 +505,8 @@ function getStateVarsForUsage(usage) {
         setPageStateVar: "setDs_".concat(idx, "_page"),
         maxPagesStateVar: "ds_".concat(idx, "_maxPages"),
         setMaxPagesStateVar: "setDs_".concat(idx, "_maxPages"),
+        totalStateVar: "ds_".concat(idx, "_total"),
+        setTotalStateVar: "setDs_".concat(idx, "_total"),
         searchQueryVar: "ds_".concat(idx, "_searchQuery"),
         setSearchQueryVar: "setDs_".concat(idx, "_searchQuery"),
         debouncedSearchQueryVar: "ds_".concat(idx, "_debouncedQuery"),
@@ -596,11 +571,64 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
             ? types.memberExpression(types.identifier(vars.combinedStateVar), types.identifier('debouncedQuery'))
             : types.identifier(vars.debouncedSearchQueryVar);
     };
+    // The query starts at its default (see `buildSearchQueryInitAST`), so the
+    // pair must agree on who goes first: the read-back adopts the address, THEN
+    // the write-back may write — before that, its first run would delete the very
+    // `?<key>=` the read-back is about to adopt.
+    var adoptedRefVar = "ds_".concat(usage.index, "_searchUrlAdopted");
+    var adopterVar = "ds_".concat(usage.index, "_adoptUrlSearch");
+    effectStatements.push(types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier(adoptedRefVar), types.callExpression(types.identifier('useRef'), [types.booleanLiteral(false)])),
+    ]), buildUrlSearchAdopter(adopterVar, usage, vars));
     // write-back: debounced query → `?<searchUrlParamKey>=`
-    effectStatements.push(URLSearchParamSync.buildUrlWriteBackEffect(usage.searchUrlParamKey, buildDebouncedValueExpr(), buildDebouncedValueExpr()));
-    // read-back: `?<searchUrlParamKey>=` → input (`setDs_N_searchQuery`). The
-    // debounce effect propagates the change into the debounced value + fetch.
-    effectStatements.push(URLSearchParamSync.buildUrlReadBackEffect(usage.searchUrlParamKey, vars.setSearchQueryVar));
+    effectStatements.push(URLSearchParamSync.buildUrlWriteBackEffect(usage.searchUrlParamKey, buildDebouncedValueExpr(), buildDebouncedValueExpr(), undefined, adoptedRefVar));
+    // read-back: `?<searchUrlParamKey>=` → the input AND the applied query at once
+    // (`ds_N_adoptUrlSearch`), so an address is not a typed change: it skips the
+    // debounce and keeps a page the address carries — `?searchKeyword=x&page=3`
+    // lands on page 3.
+    effectStatements.push(URLSearchParamSync.buildUrlReadBackEffect(usage.searchUrlParamKey, adopterVar, undefined, adoptedRefVar));
+}
+// `const ds_N_adoptUrlSearch = (update) => { … }`: the setter the search's URL
+// read-back calls with its `(prev) => next` updater. It moves the input and the
+// applied (debounced) query together. A list whose page is in the address
+// keeps its page — the page sync sets it from the same address. Any other
+// list starts the new query on page 1, as a typed change does in the debounce
+// effect: an appending list has usually advanced past page 1 by the time the
+// router is ready, and the query's first answer would otherwise be its page 2
+// — empty for a query only a few rows match.
+function buildUrlSearchAdopter(adopterVar, usage, vars) {
+    var update = types.identifier('update');
+    var pageReset = usageHasPageUrlSync(usage)
+        ? []
+        : [types.objectProperty(types.identifier('page'), types.numericLiteral(1))];
+    var applyToDebounced = usage.category === 'paginated+search'
+        ? // setDs_N_state((state) => {
+            //   const next = update(state.debouncedQuery)
+            //   return next === state.debouncedQuery ? state : { ...state, page: 1, debouncedQuery: next }
+            // })
+            types.callExpression(types.identifier(vars.setCombinedStateVar), [
+                types.arrowFunctionExpression([types.identifier('state')], types.blockStatement([
+                    types.variableDeclaration('const', [
+                        types.variableDeclarator(types.identifier('next'), types.callExpression(types.identifier('update'), [
+                            types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery')),
+                        ])),
+                    ]),
+                    types.returnStatement(types.conditionalExpression(types.binaryExpression('===', types.identifier('next'), types.memberExpression(types.identifier('state'), types.identifier('debouncedQuery'))), types.identifier('state'), types.objectExpression(__spreadArray(__spreadArray([
+                        types.spreadElement(types.identifier('state'))
+                    ], pageReset, true), [
+                        types.objectProperty(types.identifier('debouncedQuery'), types.identifier('next')),
+                    ], false)))),
+                ])),
+            ])
+        : types.callExpression(types.identifier(vars.setDebouncedSearchQueryVar), [update]);
+    return types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier(adopterVar), types.arrowFunctionExpression([types.identifier('update')], types.blockStatement([
+            types.expressionStatement(types.callExpression(types.identifier(vars.setSearchQueryVar), [
+                types.identifier('update'),
+            ])),
+            types.expressionStatement(applyToDebounced),
+        ]))),
+    ]);
 }
 // How one usage reads and writes its current page.
 //
@@ -752,7 +780,7 @@ function pushFilterSortPageResetEffect(stateDeclarations, effectStatements, usag
 // ==================== MAIN PLUGIN ====================
 export 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, localized, stateDeclarations, effectStatements, needsUseRouter, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, usagesWithLoadingState, usageByProviderNode, cacheDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, usageBySearchInput;
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, rangeControls, hasRangeControl, registry, getStaticPropsChunk, isPage, localized, stateDeclarations, effectStatements, needsUseRouter, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, usagesWithLoadingState, usageByProviderNode, cacheDeclarations, sharedOptions, cachedScopes, dataProvidersWithoutRepeaters, searchInputs, usageBySearchInput, _i, searchInputs_1, input, usage;
         var _a, _b;
         return __generator(this, function (_c) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
@@ -776,6 +804,8 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 return [2 /*return*/, structure];
             }
             blockStatement = arrowFunction.body;
+            rangeControls = findRangeControls(blockStatement);
+            hasRangeControl = rangeControls.length > 0;
             registry = buildStateRegistry(uidl.node);
             if (registry.usages.length === 0) {
                 return [2 /*return*/, structure];
@@ -862,13 +892,12 @@ export var createNextArrayMapperPaginationPlugin = function () {
                             ]),
                         ])),
                     ]));
-                    // Immediate search query state — seeded with `searchDefaultValue` (or
-                    // the `searchUrlParamKey` URL value when bound) so the input is
-                    // pre-filled on mount. The debounced value above is seeded identically
-                    // so a deep-linked `?searchKeyword=` fetches filtered results on the
-                    // first paint: the paginated+search `initialData` is gated on
-                    // `!ds_N_state.debouncedQuery`, so a non-empty seed forces the
-                    // DataProvider to fetch instead of reusing the unfiltered SSG prefetch.
+                    // Immediate search query state — seeded with `searchDefaultValue`, like
+                    // the debounced value above. A deep-linked `?searchKeyword=` is adopted
+                    // after mount by the URL read-back, which sets both at once; the
+                    // paginated+search `initialData` is gated on `!ds_N_state.debouncedQuery`,
+                    // so the adopted query makes the DataProvider fetch filtered rows
+                    // instead of reusing the unfiltered SSG prefetch the first render shows.
                     stateDeclarations.push(types.variableDeclaration('const', [
                         types.variableDeclarator(types.arrayPattern([
                             types.identifier(vars.searchQueryVar),
@@ -945,11 +974,15 @@ export var createNextArrayMapperPaginationPlugin = function () {
                     pushPropIdsAsDeps(countEffectDeps, countEffectSeen, usage.filterPropIds);
                     // Same goes for URL-driven filters (already documented above).
                     pushUrlSearchParamMemoDeps(countEffectDeps, usage);
+                    if (hasRangeControl) {
+                        stateDeclarations.push(buildTotalDeclaration(vars));
+                    }
                     stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar));
                     effectStatements.push(buildCountFetchEffect({
                         fileName: fileName,
                         perPage: usage.perPage,
                         setMaxPagesVar: vars.setMaxPagesStateVar,
+                        setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                         urlParams: urlParams,
                         deps: countEffectDeps,
                         countSeqRefVar: vars.countSeqRefVar,
@@ -991,7 +1024,9 @@ export var createNextArrayMapperPaginationPlugin = function () {
                     // "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;
+                    // A range text needs the live count too: the build-time count only
+                    // ever became a page count, never the total it shows.
+                    var needsLiveCount = !isPage || usage.paginationMode === 'numbered' || usage.infiniteScroll || hasRangeControl;
                     if (needsLiveCount) {
                         var fileName = generateSafeFileName(usage.resourceDefinition.dataSourceType, usage.resourceDefinition.tableName, usage.resourceDefinition.dataSourceId);
                         // ⛔ This list has no search input, so no `query` param — but it may
@@ -1013,11 +1048,15 @@ export var createNextArrayMapperPaginationPlugin = function () {
                         pushStateIdsAsDeps(countDeps, countDepsSeen, usage.filterStateIds);
                         pushPropIdsAsDeps(countDeps, countDepsSeen, usage.filterPropIds);
                         pushUrlSearchParamMemoDeps(countDeps, usage);
+                        if (hasRangeControl) {
+                            stateDeclarations.push(buildTotalDeclaration(vars));
+                        }
                         stateDeclarations.push(buildCountSeqDeclaration(vars.countSeqRefVar));
                         effectStatements.push(buildCountFetchEffect({
                             fileName: fileName,
                             perPage: usage.perPage,
                             setMaxPagesVar: vars.setMaxPagesStateVar,
+                            setTotalVar: hasRangeControl ? vars.setTotalStateVar : undefined,
                             urlParams: countUrlParams,
                             deps: countDeps,
                             countSeqRefVar: vars.countSeqRefVar,
@@ -1148,7 +1187,9 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 // 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, buildSentinelElement(getInfiniteScrollVars(usage.index)));
+                    insertSentinelAfterProvider(blockStatement, dp, function (parentTag) {
+                        return buildSentinelElement(getInfiniteScrollVars(usage.index), parentTag);
+                    });
                 }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, buildProductTransformOptions(options));
@@ -1190,17 +1231,14 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 stabilizeDataProviderWithoutRepeater(dp);
             });
             searchInputs = findAllSearchInputsInJSX(blockStatement);
-            searchEnabledUsages = registry.usages.filter(function (u) { return u.searchEnabled; });
-            usageBySearchInput = new Map();
-            searchInputs.forEach(function (input, idx) {
-                if (idx >= searchEnabledUsages.length) {
-                    return;
+            usageBySearchInput = pairSearchInputs(searchInputs, registry.usages);
+            for (_i = 0, searchInputs_1 = searchInputs; _i < searchInputs_1.length; _i++) {
+                input = searchInputs_1[_i];
+                usage = usageBySearchInput.get(input.node);
+                if (usage) {
+                    wireSearchInput(input, getStateVarsForUsage(usage));
                 }
-                var usage = searchEnabledUsages[idx];
-                var vars = getStateVarsForUsage(usage);
-                wireSearchInput(input.node, vars);
-                usageBySearchInput.set(input.node, usage);
-            });
+            }
             // STEP 4.5: Wire the clear buttons, each to the input it shares a parent with.
             findAllSearchClearButtonsInJSX(blockStatement).forEach(function (button) {
                 var input = findSiblingSearchInput(button, searchInputs.map(function (entry) { return entry.node; }));
@@ -1227,6 +1265,24 @@ export var createNextArrayMapperPaginationPlugin = function () {
                 }
                 wirePaginationWidget(node, usage, getStateVarsForUsage(usage), usagesWithLoadingState.has(usage.index));
             });
+            // STEP 5b: Wire the range texts that name their mapper.
+            //
+            // A `range` control carrying `data-tq-pagination-for` belongs to the mapper
+            // whose editor node id it names, wherever it sits — a template's footer or
+            // toolbar is laid out by the author, not inside a pagination container, so
+            // the container-ownership rule above cannot reach it. One without the
+            // attribute was wired by its container in STEP 5; one naming a mapper this
+            // component does not render stays as drawn.
+            rangeControls.forEach(function (control) {
+                var ownerNodeId = readJSXAttributeString(control, PAGINATION_FOR_ATTR);
+                if (!ownerNodeId) {
+                    return;
+                }
+                var owner = registry.usages.find(function (usage) { return usage.nodeId === ownerNodeId; });
+                if (owner) {
+                    wireRangeControlFor(control, owner, getStateVarsForUsage(owner));
+                }
+            });
             // STEP 6: Update getStaticProps if this is a page
             if (isPage) {
                 updateGetStaticProps(chunks, registry, dependencies, (_b = uidl.outputOptions) === null || _b === void 0 ? void 0 : _b.folderPath, localized);
@@ -1244,39 +1300,59 @@ export var createNextArrayMapperPaginationPlugin = function () {
  * 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.
+ * The sentinel is built for the element it lands in (`buildSentinelElement`):
+ * a fragment is transparent, a component's children may go anywhere.
  *
  * 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) {
+function insertSentinelAfterProvider(blockStatement, provider, buildSentinel) {
     var inserted = false;
-    var traverse = function (node) {
+    var elementTagOf = function (node, enclosing) {
+        var _a;
+        if ((node === null || node === void 0 ? void 0 : node.type) === 'JSXFragment') {
+            return enclosing;
+        }
+        if ((node === null || node === void 0 ? void 0 : node.type) !== 'JSXElement') {
+            return enclosing;
+        }
+        var name = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.name;
+        if ((name === null || name === void 0 ? void 0 : name.type) !== 'JSXIdentifier') {
+            return null;
+        }
+        if (name.name === 'Fragment') {
+            return enclosing;
+        }
+        return /^[a-z]/.test(name.name) ? name.name : null;
+    };
+    var traverse = function (node, enclosing) {
         if (!node || inserted) {
             return;
         }
+        var tag = elementTagOf(node, enclosing);
         if (Array.isArray(node.children)) {
             var at = node.children.indexOf(provider);
             if (at !== -1) {
-                node.children.splice(at + 1, 0, sentinel);
+                node.children.splice(at + 1, 0, buildSentinel(tag));
                 inserted = true;
                 return;
             }
-            node.children.forEach(traverse);
+            node.children.forEach(function (child) { return traverse(child, tag); });
         }
         if (node.body) {
             if (Array.isArray(node.body)) {
-                node.body.forEach(traverse);
+                node.body.forEach(function (child) { return traverse(child, tag); });
             }
             else {
-                traverse(node.body);
+                traverse(node.body, tag);
             }
         }
         if (node.consequent) {
-            traverse(node.consequent);
+            traverse(node.consequent, tag);
         }
         if (node.alternate) {
-            traverse(node.alternate);
+            traverse(node.alternate, tag);
         }
         // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
         // panel, a gated section: the provider sits on the RIGHT of a logical
@@ -1284,22 +1360,22 @@ function insertSentinelAfterProvider(blockStatement, provider, sentinel) {
         // an argument. Left unvisited, the products list under the first tab of
         // a shop was never paginated or seeded, and rendered nothing.
         if (node.left) {
-            traverse(node.left);
+            traverse(node.left, tag);
         }
         if (node.right) {
-            traverse(node.right);
+            traverse(node.right, tag);
         }
         if (node.test) {
-            traverse(node.test);
+            traverse(node.test, tag);
         }
         if (node.expression) {
-            traverse(node.expression);
+            traverse(node.expression, tag);
         }
         if (node.argument) {
-            traverse(node.argument);
+            traverse(node.argument, tag);
         }
     };
-    traverse(blockStatement);
+    traverse(blockStatement, null);
     return inserted;
 }
 function findAllDataProvidersInJSX(blockStatement) {
@@ -1394,61 +1470,6 @@ function findArrayMapperRenderPropInDataProvider(dataProvider) {
     }
     return renderItemAttr.value.expression.params[0].name;
 }
-function findAllSearchInputsInJSX(blockStatement) {
-    var results = [];
-    var traverse = function (node) {
-        var _a, _b, _c, _d, _e, _f;
-        if (!node) {
-            return;
-        }
-        if (node.type === 'JSXElement' && ((_b = (_a = node.openingElement) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.name) === 'input') {
-            var classAttr = (_c = node.openingElement.attributes) === null || _c === void 0 ? void 0 : _c.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'className'; });
-            var className = ((_d = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _d === void 0 ? void 0 : _d.value) || ((_f = (_e = classAttr === null || classAttr === void 0 ? void 0 : classAttr.value) === null || _e === void 0 ? void 0 : _e.expression) === null || _f === void 0 ? void 0 : _f.value) || '';
-            if (className.includes('search-input')) {
-                results.push({ node: node, className: className });
-            }
-        }
-        if (node.children && Array.isArray(node.children)) {
-            node.children.forEach(function (c) { return traverse(c); });
-        }
-        if (node.body) {
-            if (Array.isArray(node.body)) {
-                node.body.forEach(function (s) { return traverse(s); });
-            }
-            else {
-                traverse(node.body);
-            }
-        }
-        if (node.consequent) {
-            traverse(node.consequent);
-        }
-        if (node.alternate) {
-            traverse(node.alternate);
-        }
-        // `{activeTabIndex === 0 && (<div>…<DataProvider/>…</div>)}` — a tab
-        // panel, a gated section: the provider sits on the RIGHT of a logical
-        // expression (or in a ternary's `test`), which is not a child, a body or
-        // an argument. Left unvisited, the products list under the first tab of
-        // a shop was never paginated or seeded, and rendered nothing.
-        if (node.left) {
-            traverse(node.left);
-        }
-        if (node.right) {
-            traverse(node.right);
-        }
-        if (node.test) {
-            traverse(node.test);
-        }
-        if (node.expression) {
-            traverse(node.expression);
-        }
-        if (node.argument) {
-            traverse(node.argument);
-        }
-    };
-    traverse(blockStatement);
-    return results;
-}
 /**
  * Every pagination widget in the JSX, paired with the mapper it belongs to.
  *
@@ -1734,7 +1755,13 @@ function updateDataProviderForSearchOnly(dp, usage, vars, fileName, cacheDeclara
     dp.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.booleanLiteral(true))));
 }
 function updateDataProviderForPlain(dp, fileName, usage, localized) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
+    // A sort bound to state is the visitor's, which the server cannot know: rows
+    // pre-rendered in the table's order would stand in for it, since a seeded
+    // provider skips its first fetch — the paginated lists drop them the same way.
+    if (usage.dynamicSort) {
+        dp.openingElement.attributes = dp.openingElement.attributes.filter(function (attr) { var _a; return !(attr.type === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === 'initialData'); });
+    }
     var attrs = dp.openingElement.attributes;
     var clientCache = ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined;
     // Check if fetchData already exists
@@ -1757,10 +1784,12 @@ function updateDataProviderForPlain(dp, fileName, usage, localized) {
     }
     // Find the params attribute. A plain list may have none at all — but the
     // fetch it was just given sends `params` regardless, and in a localized
-    // project those have to carry the locale, so the attribute is created.
+    // project those have to carry the locale, and a sorted list its sort, so the
+    // attribute is created.
     var paramsAttrIndex = attrs.findIndex(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'params'; });
+    var isSorted = usage.sorts.length > 0 || !!usage.dynamicSort;
     if (paramsAttrIndex === -1) {
-        if (!localized) {
+        if (!localized && !isSorted) {
             return;
         }
         attrs.push(types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(types.objectExpression([]))));
@@ -1781,10 +1810,17 @@ function updateDataProviderForPlain(dp, fileName, usage, localized) {
     if (!paramsExpression) {
         return;
     }
-    // Build useMemo dependencies including filter state IDs
+    // The repeater's sort, which the paginated and searchable lists add to the
+    // params they rebuild: kept as they come, a plain list's params never
+    // carried it, and the rows arrived in the table's own order.
+    if (paramsExpression.type === 'ObjectExpression' && !hasObjectKey(paramsExpression, 'sorts')) {
+        appendSortsParam(paramsExpression.properties, usage.sorts, usage.dynamicSort);
+    }
+    // Build useMemo dependencies including filter state IDs and a dynamic sort's state
     var memoDeps = [];
     var memoSeen = new Set();
     pushStateIdsAsDeps(memoDeps, memoSeen, usage.filterStateIds);
+    pushStateIdsAsDeps(memoDeps, memoSeen, (_f = (_e = usage.dynamicSort) === null || _e === void 0 ? void 0 : _e.depStateIds) !== null && _f !== void 0 ? _f : []);
     pushPropIdsAsDeps(memoDeps, memoSeen, usage.filterPropIds);
     pushUrlSearchParamMemoDeps(memoDeps, usage);
     if (localized && paramsExpression.type === 'ObjectExpression') {
@@ -1798,6 +1834,13 @@ function updateDataProviderForPlain(dp, fileName, usage, localized) {
     // Replace the params attribute
     attrs[paramsAttrIndex] = types.jsxAttribute(types.jsxIdentifier('params'), types.jsxExpressionContainer(memoizedParams));
 }
+var hasObjectKey = function (object, key) {
+    return object.properties.some(function (property) {
+        return property.type === 'ObjectProperty' &&
+            ((property.key.type === 'Identifier' && property.key.name === key) ||
+                (property.key.type === 'StringLiteral' && property.key.value === key));
+    });
+};
 function stabilizeDataProviderWithoutRepeater(dp) {
     var _a, _b, _c;
     var attrs = dp.openingElement.attributes;
@@ -1871,21 +1914,18 @@ accumulate) {
             ? buildCacheStoreThen(cache)
             : uncachedTail;
     var networkChain = types.callExpression(types.memberExpression(parsedJson, types.identifier('then')), [responseTail]);
+    // An appending list records the request it now stands on before making it
+    // (see `buildAccumulatingRequestMark`).
     var arrow = cache
         ? types.arrowFunctionExpression([types.identifier('params')], buildCachedFetchBody(networkChain, cache))
-        : types.arrowFunctionExpression([types.identifier('params')], networkChain);
+        : accumulate
+            ? types.arrowFunctionExpression([types.identifier('params')], types.blockStatement([
+                buildAccumulatingRequestMark(getInfiniteScrollVars(accumulate.usage.index)),
+                types.returnStatement(networkChain),
+            ]))
+            : types.arrowFunctionExpression([types.identifier('params')], networkChain);
     return types.jsxAttribute(types.jsxIdentifier('fetchData'), types.jsxExpressionContainer(types.callExpression(types.identifier('useCallback'), [arrow, types.arrayExpression([])])));
 }
-function wireSearchInput(inputNode, vars) {
-    // Remove existing onChange and value
-    inputNode.openingElement.attributes = inputNode.openingElement.attributes.filter(function (attr) { var _a; return !['onChange', 'value'].includes((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name); });
-    // Add onChange
-    inputNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('onChange'), types.jsxExpressionContainer(types.arrowFunctionExpression([types.identifier('e')], types.callExpression(types.identifier(vars.setSearchQueryVar), [
-        types.memberExpression(types.memberExpression(types.identifier('e'), types.identifier('target')), types.identifier('value')),
-    ])))));
-    // Add value
-    inputNode.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('value'), types.jsxExpressionContainer(types.identifier(vars.searchQueryVar))));
-}
 /**
  * The `fetchData` attribute for one paginated usage.
  *
@@ -1901,6 +1941,32 @@ function buildFetchDataForUsage(fileName, usage) {
     }
     return createFetchDataAttribute(fileName, ((_a = usage.cache) === null || _a === void 0 ? void 0 : _a.client) ? usage.cache : undefined);
 }
+/** `const [ds_N_total, setDs_N_total] = useState(null)` — declared only beside a range control. */
+function buildTotalDeclaration(vars) {
+    return types.variableDeclaration('const', [
+        types.variableDeclarator(types.arrayPattern([
+            types.identifier(vars.totalStateVar),
+            types.identifier(vars.setTotalStateVar),
+        ]), types.callExpression(types.identifier('useState'), [types.nullLiteral()])),
+    ]);
+}
+/**
+ * Fills one `range` text with the live row range of `usage` (see
+ * `range-control.ts`). A mapper that does not page has no count to show, so
+ * its range text is left as drawn.
+ */
+function wireRangeControlFor(control, usage, vars) {
+    if (!usage.paginated) {
+        return;
+    }
+    var currentPageExpr = getPageAccessors(usage, vars).currentPageExpr;
+    wireRangeControl(control, {
+        totalVar: vars.totalStateVar,
+        currentPageExpr: currentPageExpr(),
+        perPage: usage.perPage,
+        infiniteScroll: usage.infiniteScroll,
+    });
+}
 /**
  * Wires the authored Load More button of an appending list.
  *
@@ -1940,6 +2006,11 @@ function wireLoadMoreButton(paginationNode, usage, vars, hasLoadingState) {
  * buttons beside its Load More.
  */
 function wirePaginationWidget(paginationNode, usage, vars, hasLoadingState) {
+    // A range text inside the container takes the container's owner, like the
+    // buttons beside it; one naming its own mapper is wired in STEP 5b instead.
+    findAllPaginationControls(paginationNode, 'range')
+        .filter(function (control) { return !readJSXAttributeString(control, PAGINATION_FOR_ATTR); })
+        .forEach(function (control) { return wireRangeControlFor(control, usage, vars); });
     if (usage.infiniteScroll) {
         // Only the Load More button survives; page controls make no sense for a
         // list the visitor never leaves.
@@ -2227,17 +2298,9 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
         }
         // Add filters if present
         // Filter out dynamic destinations for getStaticProps (they can't be resolved at build time)
-        var staticFilters = (usage.filters || []).filter(function (f) { return !ASTUtils.isUIDLDynamicReference(f.destination); });
+        var staticFilters = staticFiltersOf(usage);
         if (staticFilters.length > 0) {
-            fetchParams.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-                types.arrayExpression(staticFilters.map(function (filter) {
-                    return types.objectExpression([
-                        types.objectProperty(types.identifier('source'), types.stringLiteral(filter.source || '')),
-                        types.objectProperty(types.identifier('destination'), types.stringLiteral(typeof filter.destination === 'string' ? filter.destination : '')),
-                        types.objectProperty(types.identifier('operand'), types.stringLiteral(filter.operand || '')),
-                    ]);
-                })),
-            ])));
+            fetchParams.push(types.objectProperty(types.identifier('filters'), buildStaticFiltersStringifyCall(staticFilters)));
         }
         appendItemsPathParam(fetchParams, usage.itemsPath, 'itemsPath');
         // The prefetch is per locale — getStaticProps runs once per language.
@@ -2277,7 +2340,7 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
             var maxPagesPropName_1 = "".concat(vars.propsPrefix, "_maxPages");
             // Use filter-specific count variable if usage has static filters
             // (dynamic filters can't be resolved at build time)
-            var staticFiltersForCount = (usage.filters || []).filter(function (f) { return !ASTUtils.isUIDLDynamicReference(f.destination); });
+            var staticFiltersForCount = staticFiltersOf(usage);
             // A count scoped to an inner array is a different number from the
             // whole-payload one, so it gets its own variable just like a filtered one.
             var hasScopedCount = staticFiltersForCount.length > 0 || !!usage.itemsPath;
@@ -2328,7 +2391,7 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
         usagesByFilters.forEach(function (usages, filtersKey) {
             var firstUsage = usages[0];
             // Filter out dynamic destinations for getStaticProps (they can't be resolved at build time)
-            var staticFiltersForCount = (firstUsage.filters || []).filter(function (f) { return !ASTUtils.isUIDLDynamicReference(f.destination); });
+            var staticFiltersForCount = staticFiltersOf(firstUsage);
             var hasStaticFilters = staticFiltersForCount.length > 0;
             // Create unique count variable name based on filters (and inner-array
             // scope — must match the naming at the maxPages site above)
@@ -2348,15 +2411,7 @@ function updateGetStaticProps(chunks, registry, dependencies, folderPath, locali
                 // Build count params if static filters exist
                 var countParams = [];
                 if (hasStaticFilters) {
-                    countParams.push(types.objectProperty(types.identifier('filters'), types.callExpression(types.memberExpression(types.identifier('JSON'), types.identifier('stringify')), [
-                        types.arrayExpression(staticFiltersForCount.map(function (f) {
-                            return types.objectExpression([
-                                types.objectProperty(types.identifier('source'), types.stringLiteral(f.source || '')),
-                                types.objectProperty(types.identifier('destination'), types.stringLiteral(typeof f.destination === 'string' ? f.destination : '')),
-                                types.objectProperty(types.identifier('operand'), types.stringLiteral(f.operand || '')),
-                            ]);
-                        })),
-                    ])));
+                    countParams.push(types.objectProperty(types.identifier('filters'), buildStaticFiltersStringifyCall(staticFiltersForCount)));
                 }
                 appendItemsPathParam(countParams, firstUsage.itemsPath, 'collectionPath');
                 fetchesArray.elements.push(types.callExpression(types.memberExpression(types.callExpression(types.memberExpression(types.identifier(fetcherImportName), types.identifier('fetchCount')), countParams.length > 0 ? [types.objectExpression(countParams)] : []), types.identifier('catch')), [