@stapel/search-react 0.36.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/search-react",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Headless React pair for stapel-search: a typed query client, TanStack Query hooks, and a URL-first state codec that makes a search shareable by construction (filters, ranges, geo, sort and the keyset cursor all live in the query string). Drill-down facets rendered with their remaining counts and with the server's own honesty flags — approximate, skipped, degraded — never swallowed; keyset pagination with the window refusal named; DSA Art. 26 `promoted` marking carried into every card slot and the P2B Art. 5 ranking disclosure exposed as data. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin, and /router binds the codec to react-router's useSearchParams.",
   "license": "MIT",
   "repository": {
@@ -57,9 +57,9 @@
       "limit": "14.5 KB"
     },
     {
-      "name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B",
+      "name": "default — the antd skin (query box + a typeahead that offers CATEGORY destinations with their live counts, filters incl. ranges/geo/category slots + the phone chip row with its leading category chip and the location summary row + the rail's evidence-ranked disclosure groups, panel search and sticky count/clear footer, results incl. the view switch, the card photo GALLERY as a SkinCarousel strip, the empty state's derived exits, ranking, the dictionary control for a vocabulary facet, the popular-values block, the partition row in both its chip and segmented variants, the select-style dictionary FIELD the desktop rail opens, the from/to pickers a bounded integer axis draws and the rail's own scrollbar sheet) must stay out of the main bundle. Raised 24.5 → 25.5 KB for those four controls, then 25.5 → 26.25 KB for the chip row's APPLIED mode — one chip per applied value and per numeric bound, each removing that one constraint beside a rail that is already on screen (a storefront was carrying its own copy of it), then 26.25 → 27 KB for the \"search in other categories\" LINE — which is a net deletion on the page that mounts it, replacing a full-width block of one row per section that arrived after the results and pushed them, then 27 → 27.75 KB for the two frames the page now tells apart: the dictionary FIELD reaching `<SearchPage>` at all (per-layout default, field in the rail and inline in the sheet) and the footer bar being static in a column and sticky in a sheet, where it used to be pinned over the last two groups everywhere, then 27.75 → 28.5 KB for `categoryHref` on the other-categories line — a real `<a href>` per row with a modifier-click left to the browser, instead of a `<button>` with no address a person could open in a new tab, then 28.5 → 29.25 KB for the phone's dictionary SHEET — a trigger row over the shared `SkinPickerSheet` with a recommended band, an alphabetical rest paged fifty at a time and a draft committed in one write, which is the control the composer's vocabulary picker already was while the buyer got a wall of checkboxes, then 29.25 → 30.5 KB for the panel that draws all of it: groups and ranges as one ordered sequence with one «Apply» for the panel rather than one per row, the empty-group heading rule, `categoryFilter={false}` and the `resultsLead` slot for a page reached by walking the catalogue, `PopularValues columns=\\\"responsive\\\"` on a container query, `SortSelect` annotating a blocked option at every width, a loading arm that covers the whole pane (0.34 CLS on a live host), and the chip row reserving its own box (a further 0.045). Measured with dependencies held constant, this package's src at the commit before that work and then at it: 29.05 -> 30.16 KB — 1.11 KB, and every part of it is a shift or a mislabelled control a host was living with, then 30.5 -> 31 KB for `<SearchResultsPane columns>` and its pass-through on `<SearchPage resultsColumns>`: a fixed track count or a per-breakpoint map, emitted as a hoisted container-query sheet (the results block is the window minus a 280px rail, so a media query would answer about a width the cards never have). Measured with dependencies held constant, this package's src before and after: 30.40 -> 30.65 KB — 250 B, and what it replaces is a host's `!important` rule against a grid declaration it could not read back, then 31 -> 31.25 KB for the segmented partition being antd's `Segmented` rather than a row of buttons wearing a border: the walker read `data-variant=\"segmented\"` with `role=\"radiogroup\"` and found `.ant-segmented` zero times and `input[type=radio]` zero times (D304), so the cells are the design system's now — real radios under one name, the browser's own arrow keys and Tab stop. Measured with dependencies held constant, this package's src before and after: 30.95 -> 31.05 KB — 100 B, against ~30 lines of hand-rolled joined-row geometry deleted, then 31.25 -> 31.5 KB for the two PINNING seams: `<SearchPage railTop>` (the rail's sticky offset and its height cap moved together, so a rail under a 64px header still ends at the foot of the window) and `<SearchResultsPane stickyToolbar>` with the toolbar's own element in both header shapes. Measured with dependencies held constant, this package's src before and after: 31.05 -> 31.2 KB — 150 B, and what it replaces in one deployment is an `!important` over the pair's own inline geometry, a `:has()`, a `display: contents` and this pair's rail breakpoint restated in the host's media query, then 31.5 -> 31.75 KB for the rail saying when its answer is IN FLIGHT: `FacetPanelBag.refreshing` off `loadStateFromQuery(…, { keepPrevious })`, `data-facets-refreshing` on the rail, and each facet group standing on its own last measured height (a `min-block-size` floor held in a ref) until the new answer lands. Measured with dependencies held constant, this package's src before and after: 31.43 -> 31.51 KB — 80 B, against 0.0586 CLS on a partition press (p43), where the groups survive and RESIZE, then 31.75 -> 32 KB for the FIRST MOUNT, which had none of that: `refreshing` is never true on a cold load, so nothing above reached the one pass a plain load is made of. Three parts. `<SearchPage categoryFeaturesPending>` / `<FacetPanelPane categoryFeaturesPending>` is the third state `categoryFeatures` never had — undefined means both \"no schema\" and \"not yet\", and on a category leaf the schema is a SECOND read, so the panel drew the rail from the answer alone and then drew it again when the schema landed: on the live cars leaf make and model went from three-row checkbox lists to one-row dictionary fields, condition and colour from checkboxes to pills, and `orderFacetGroupsBySchema` reordered all of them (p41, 0.0586 CLS on a plain load of `/c/transport-avtomobili`, make -152px and model -76px). Told the schema is coming, the panel keeps the box it already reserves and draws the rail ONCE. Second, every group now stands on a DECLARED box from the frame it mounts in (`facetGroupReservedHeight` — heading, rows and fold per shape), with its measured height preferred only while an answer is in flight. Third, `<SearchPage filtersHeaderReserve>` puts the host's own band above the rail in flow from the first frame, for the partition row that is two chained catalogue reads behind the answer. Measured with dependencies held constant, this package's src before and after: 30.77 -> 31.14 KB — 366 B, then 32 -> 32.25 KB for the filter sheet's open state becoming the HOST's: `<SearchPage filtersOpen>` / `onFiltersOpenChange(open, reason)` as React's usual controlled pair, and `filtersHeader` accepting a function handed `{ closeFilters, open }`. What it costs is the four call sites naming WHY the sheet moved (`open`, `apply`, `dismiss`, `consumer`) and the slot's function arm; what it buys is a header whose own control NAVIGATES being able to take the sheet down on the same press — the page published only `defaultFiltersOpen`, so a partition chip inside the sheet left the drawer standing over the page it had just opened. Measured with dependencies held constant, this package's src before and after: 31.14 -> 31.26 KB — 120 B, then 32.25 -> 32.5 KB for the two levers a storefront could not reach: `<SearchPage footerBar>` (the rail's footer bar writes its own `display` inline, so a consumer stylesheet could only suppress it with an `!important` its own gate forbids, and this page hard-coded the column's value) and `PartitionChild.count`, which the chip draws itself in the muted weight the facet rows use instead of a host welding the number onto the name. Measured with dependencies held constant, this package's src before and after: 32.01 -> 32.10 KB — 90 B, against a string-joining hack and an unreachable bar, then 32.5 -> 32.75 KB for THE THREE BOXES A STOREFRONT WAS HOLDING FOR THIS PAIR. The phone chip row's reserve is `chipRowMinHeight(token.controlHeight)` instead of a `44 + …` constant: the touch floor raises the chips to 44 only BELOW the tablet breakpoint, so from 768px up the reserve stood 12px taller than the 40px row and the results pane ROSE when the row landed (0.0725 CLS on a category leaf at 768, against 0.00016 at 390). `<SortSelect compact>` reserves the width of the longest label it can display, measured by the browser through an `aria-hidden` sizer stacked with the select in one grid cell, instead of `minWidth: 0` inline and a control that GREW 115px when the answer named the sort. And `<SearchResultsPane>` names its own root (`data-testid=\"search-results-pane\"`) and takes `reserve` — `<SearchPage resultsReserve>` — for the box the feed arrives into, which a host was holding with `#search-page > :last-child`. Measured with dependencies held constant, this package's src before and after: 32.10 -> 32.25 KB — 150 B, against a hand-guessed height, a sibling-count selector and two stylesheet rules a consumer can now delete",
       "path": "dist/default/index.js",
-      "limit": "32.25 KB"
+      "limit": "32.75 KB"
     },
     {
       "name": "router — the react-router binding is opt-in; the main entry must never pull a router",
@@ -115,10 +115,10 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
+    "@stapel/attributes-react": "^0.16.6",
     "@stapel/core": "^0.26.0",
     "@stapel/image": "^0.4.2",
     "@stapel/showcase": "^0.3.0",
-    "@stapel/attributes-react": "^0.16.6",
     "@stapel/tokens": "^0.8.0",
     "@stapel/tokens-antd": "^0.18.0"
   },

package/src/analytics/generated/events.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-events.mjs — do not edit; drift-gated (pnpm gen:events:check)",
   "package": "@stapel/search-react",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "defined": [],
   "flows": []
 }

package/src/default/FacetPanelPane.tsx

@@ -1139,7 +1139,18 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
               }}
             </LoadList>
 
-            {footerBar !== "none" && (
+            {/* NOTHING MOUNTS IN THE HOLD THAT THE SETTLED RAIL WILL MOVE
+                (D465). The count and the clear-all come from the ANSWER, which
+                on 9 of 12 measured loads lands before the schema — so this bar
+                used to mount under the loading box at `schema=pending`, in its
+                own commit, and then travel down the rail when the groups
+                replaced that box. A schema-first load drew the rail in one
+                commit and shifted nothing, which is what made the shift
+                intermittent (CLS 0.0056 at 1280, 0.0018 at 1920, 0.0076 at
+                1100). The bar is part of the settled rail, so it waits for it:
+                while the shape of the panel is undecided there is no floor to
+                stick to and no place under the groups to sit. */}
+            {footerBar !== "none" && !schemaPending && (
               <RailFooterBar
                 activeFilters={bag.activeFilters}
                 clearAll={bag.clearAll}

package/src/default/FilterChips.tsx

@@ -325,10 +325,19 @@ export const CHIP_ROW_CAP = 8;
  * answer really is "no row" and reserving would be the same shift in the
  * opposite direction.
  *
- * 44 is the phone control floor the chips themselves are sized to, plus the
- * row's two `spacing[1]` bands of focus-ring room.
+ * A NUMBER OUT OF THE THEME, not a constant — the same discipline
+ * {@link appliedRowMinHeight} is written under, and this row did not have it.
+ * The chips are default-size `Button`s, so their height IS antd's
+ * `controlHeight`, and the shared `SkinTheme` raises that to the 44px touch
+ * floor only BELOW the tablet breakpoint. Written as `44 + …` the reserve was
+ * right on a phone and 12px too tall from 768px up, where the row renders at
+ * 32 + 8 = 40: the results pane ROSE by those 12px the moment the row landed,
+ * which is the shift the reservation exists to prevent, pointing the other
+ * way. Measured on a category leaf: 0.00016 CLS at 390 and 0.0725 at 768.
  */
-export const CHIP_ROW_MIN_HEIGHT: number = 44 + spacing[1] * 2;
+export function chipRowMinHeight(chipHeight: number): number {
+  return chipHeight + spacing[1] * 2;
+}
 
 /**
  * The visible row and what the door owes: the first `max` specs — and EVERY
@@ -480,6 +489,9 @@ export function FilterChips(props: FilterChipsProps): ReactElement | null {
 
 function OpenerChipRow(props: FilterChipsOpenerProps): ReactElement | null {
   const t = useT();
+  // The chips' own height, from the theme they are drawn in — see
+  // `chipRowMinHeight`.
+  const { token } = antdTheme.useToken();
   const { state, setCategory } = useSearchState();
   const bag = useFacetPanel({
     ...(props.categoryFeatures !== undefined
@@ -595,7 +607,7 @@ function OpenerChipRow(props: FilterChipsOpenerProps): ReactElement | null {
    */
   const hasChips = showCategoryChip || ordered.length > 0;
   if (!hasChips) {
-    // THE BOX THE ROW WILL ARRIVE INTO — see `CHIP_ROW_MIN_HEIGHT`. Only
+    // THE BOX THE ROW WILL ARRIVE INTO — see `chipRowMinHeight`. Only
     // while the answer is still in flight and this search is one a row is
     // predictable for; a settled answer with no chips renders nothing, which
     // is what it has always done and what it should do.
@@ -606,7 +618,7 @@ function OpenerChipRow(props: FilterChipsOpenerProps): ReactElement | null {
       <div
         aria-hidden="true"
         data-testid="search-filter-chips-reserve"
-        style={{ minBlockSize: CHIP_ROW_MIN_HEIGHT }}
+        style={{ minBlockSize: chipRowMinHeight(token.controlHeight) }}
       />
     ) : null;
   }

package/src/default/PartitionChips.tsx

@@ -55,7 +55,7 @@ import type {
   ReactElement,
   ReactNode,
 } from "react";
-import { Button, Segmented } from "antd";
+import { Button, Segmented, Typography } from "antd";
 import { useT } from "@stapel/core";
 import { radii, spacing } from "@stapel/tokens";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
@@ -67,6 +67,22 @@ export interface PartitionChild {
   readonly id: number | string;
   readonly path: string;
   readonly name: string;
+  /**
+   * How many listings this section holds, drawn by the chip itself in the
+   * muted style every other counted control on the page uses.
+   *
+   * A host that has the number had to concatenate it into `name` — the only
+   * string this row accepted — which is how a count ends up in the same
+   * weight and colour as the word beside it, and how one storefront was
+   * joining the name and the total by hand. Passing the number instead lets
+   * the chip render it the way the facet rows render theirs, and keeps the
+   * label a label (a `Segmented` cell can lay the two out, and the name is not
+   * a string with an integer welded onto its end).
+   *
+   * Omit it and nothing is drawn — an absent count is not a zero, and a
+   * section whose total nobody asked for must not be captioned "0".
+   */
+  readonly count?: number;
 }
 
 export interface PartitionChipsProps {
@@ -152,6 +168,27 @@ function takeArrowMove(): boolean {
   return fresh;
 }
 
+/**
+ * One cell's label: the section's name, and its count beside it in the muted
+ * weight — the same `Typography.Text type="secondary"` a facet option's count
+ * is drawn in, so the two counted controls on one page read as one system.
+ */
+function ChildLabel(props: { readonly child: PartitionChild }): ReactElement {
+  const { child } = props;
+  if (child.count === undefined) return <>{child.name}</>;
+  return (
+    <>
+      {child.name}{" "}
+      <Typography.Text
+        type="secondary"
+        data-testid={`partition-count-${child.path}`}
+      >
+        {child.count}
+      </Typography.Text>
+    </>
+  );
+}
+
 /** The row's cells, as `[value, label]` — the parent first, then the
  * children in catalogue order. */
 function cells(
@@ -160,7 +197,9 @@ function cells(
 ): readonly (readonly [string | null, ReactNode])[] {
   return [
     [null, allLabel] as const,
-    ...items.map((item) => [item.path, item.name] as const),
+    ...items.map(
+      (item) => [item.path, <ChildLabel key={item.path} child={item} />] as const
+    ),
   ];
 }
 

package/src/default/SearchPage.tsx

@@ -80,6 +80,7 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { FacetPanelPane } from "./FacetPanelPane.js";
 import type {
   CategoryFilterSlotProps,
+  FacetPanelPaneProps,
   GeoFilterSlotProps,
 } from "./FacetPanelPane.js";
 import { FilterChips } from "./FilterChips.js";
@@ -461,6 +462,22 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * saves less than folding a column's does. Set it to override either.
    */
   readonly visibleGroups?: number | null;
+  /**
+   * The filter panel's footer — what the filters DID (the live count) and the
+   * way out of them — see {@link FacetPanelPaneProps.footerBar}.
+   *
+   * Defaulted PER LAYOUT: `"static"` in the desktop COLUMN (the rail scrolls
+   * with the page, and a bar pinned to the port's floor sat on top of the last
+   * groups), and none in the phone SHEET, whose own "Show N results" footer is
+   * already the count AND the exit.
+   *
+   * It is a PROP because it could not be reached any other way: the bar writes
+   * its own `display` inline, so a host stylesheet cannot suppress it without
+   * `!important`, and this page hard-coded the column's value. A surface that
+   * draws its own count under the rail passes `false`; one that wants the bar
+   * inside the sheet as well passes `"sticky"`.
+   */
+  readonly footerBar?: FacetPanelPaneProps["footerBar"];
   /** Print the engine's list of uncounted facet slugs in the filter panel.
    * Default `false` — see {@link FacetPanelPaneProps.skippedNotice}. */
   readonly skippedNotice?: boolean;
@@ -776,6 +793,13 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * grid it could not read back.
    */
   readonly resultsColumns?: ResultsColumns;
+  /**
+   * The box the results arrive into — `<SearchResultsPane reserve>`,
+   * forwarded. Here for the same reason `resultsColumns` is: the page is what
+   * a storefront mounts, and this was the last thing on it a host could only
+   * reach with `#search-page > :last-child` in its own stylesheet.
+   */
+  readonly resultsReserve?: number | string;
   /**
    * Is the results caption SEEN below the sheet breakpoint —
    * `<SearchResultsPane headingVisible>`, forwarded. Default: the host's own
@@ -787,11 +811,13 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
 interface SearchPageBodyProps {
   readonly renderCard?: SearchCardRenderer;
   readonly resultsColumns?: ResultsColumns;
+  readonly resultsReserve?: number | string;
   readonly resultsHeadingVisible?: boolean;
   readonly categoryFilter?: boolean;
   readonly resultsLead?: ReactNode;
   readonly dictionaryMode?: "field" | "inline" | "sheet";
   readonly visibleGroups?: number | null;
+  readonly footerBar?: FacetPanelPaneProps["footerBar"];
   readonly categoryFeatures?: readonly FeatureDef[];
   readonly categoryFeaturesPending?: boolean;
   readonly filtersHeaderReserve?: number | string;
@@ -862,6 +888,16 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       : surface === "sheet"
         ? "sheet"
         : "column");
+  /**
+   * The rail's footer bar, defaulted PER LAYOUT and overridable — see
+   * {@link SearchPageProps.footerBar}.
+   *
+   * STATIC, not sticky, in the column: the rail scrolls with the page, and a
+   * bar pinned to the port's floor sat on top of the last groups. None in the
+   * sheet, whose own "Show N results" footer is already the count and the exit.
+   */
+  const footerBar: FacetPanelPaneProps["footerBar"] =
+    props.footerBar ?? (layout === "sheet" ? undefined : "static");
   // Controlled or not, decided by the PRESENCE of `filtersOpen` and read once
   // per render — the state the page keeps is only ever the uncontrolled half,
   // and a controlled host's value is never copied into it (copying it is how
@@ -994,11 +1030,8 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
           result count scrolled out of sight above the fold. */}
       {filtersEmpty ? null : (
         <FacetPanelPane
-          {...(layout === "sheet"
-            ? { heading: null }
-            : // STATIC, not sticky: the rail scrolls with the page, and a bar
-              // pinned to the port's floor sat on top of the last groups.
-              { footerBar: "static" as const })}
+          {...(layout === "sheet" ? { heading: null } : {})}
+          {...(footerBar !== undefined ? { footerBar } : {})}
           dictionaryMode={props.dictionaryMode ?? (layout === "sheet" ? "sheet" : "field")}
           // `??` would treat an explicit `null` ("never fold") the same as
           // "not set": `visibleGroups` uses `null` as a real value, unlike
@@ -1087,6 +1120,9 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       {...(props.resultsColumns !== undefined
         ? { columns: props.resultsColumns }
         : {})}
+      {...(props.resultsReserve !== undefined
+        ? { reserve: props.resultsReserve }
+        : {})}
       {...(props.resultsHeadingVisible !== undefined
         ? { headingVisible: props.resultsHeadingVisible }
         : {})}
@@ -1307,9 +1343,11 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     resultsAction,
     resultsHeadingLevel,
     resultsColumns,
+    resultsReserve,
     resultsHeadingVisible,
     dictionaryMode,
     visibleGroups,
+    footerBar,
     pinnedFacets,
     mode,
     ...parseOptions
@@ -1321,9 +1359,11 @@ export function SearchPage(props: SearchPageProps): ReactElement {
         <SearchPageBody
           {...(renderCard !== undefined ? { renderCard } : {})}
           {...(resultsColumns !== undefined ? { resultsColumns } : {})}
+          {...(resultsReserve !== undefined ? { resultsReserve } : {})}
           {...(resultsHeadingVisible !== undefined ? { resultsHeadingVisible } : {})}
           {...(dictionaryMode !== undefined ? { dictionaryMode } : {})}
           {...(visibleGroups !== undefined ? { visibleGroups } : {})}
+          {...(footerBar !== undefined ? { footerBar } : {})}
           {...(pinnedFacets !== undefined ? { pinnedFacets } : {})}
           {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
           {...(categoryFeaturesPending !== undefined

package/src/default/SearchResultsPane.tsx

@@ -216,6 +216,24 @@ const WIDE_HEADING: CSSProperties = { margin: 0, minInlineSize: 0 };
  */
 const TOOLBAR_END: CSSProperties = { flex: "0 0 auto" };
 
+/**
+ * The wide row's LEADING half, and it is always in the row (D466).
+ *
+ * The count arrives with the answer, one render after the toolbar is already
+ * on screen, and `<Count>` renders nothing at all until it does — so a row
+ * spaced by `justify: space-between` had ONE item in the first frame and TWO
+ * in the second, which moved the sort/view control from the leading edge to
+ * the trailing one as the number landed: x 328→459 at 1280, 564→863 at 1920,
+ * 312→796 at 1100, and the same jump on a seller's page.
+ *
+ * A leading box that is always there, and grows, is what fixes it: the
+ * trailing group's x is then `row right − its own width` in every frame,
+ * whatever the count says or whether it says anything. `min-inline-size: 0`
+ * lets a long count shrink into the space that is left rather than push the
+ * controls, which the row's own `overflow-x` then scrolls.
+ */
+const TOOLBAR_LEAD: CSSProperties = { flex: "1 1 auto", minInlineSize: 0 };
+
 /** The compact shape's toolbar box — the row the pin acts on. */
 const COMPACT_TOOLBAR: CSSProperties = {
   display: "flex",
@@ -469,6 +487,25 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
   /** Widest the column of results may grow (default {@link RESULTS_MAX_WIDTH});
    * `null` lets the container decide. */
   readonly maxWidth?: number | null;
+  /**
+   * THE BOX THE RESULTS ARRIVE INTO — a block-size floor the pane holds while
+   * the first answer is in flight, and drops the moment the rows land.
+   *
+   * The pane cannot know how tall its own page will be (the row count is the
+   * host's `limit` and the card height is the host's card), so this is a
+   * number the host measures once for its own feed — `limit × card + gaps` —
+   * and it stops the fold below the results from rising into the space the
+   * feed is about to take.
+   *
+   * What it replaces is a stylesheet rule aimed at this pane with the only
+   * hold a consumer had on it: `#search-page > :last-child`, a selector that
+   * silently starts addressing something else the day this page grows a
+   * seventh child. The pane's root now also carries
+   * `data-testid="search-results-pane"`, so a host that wants its own rule
+   * has a handle that is part of this pair's surface instead of a count of
+   * siblings.
+   */
+  readonly reserve?: number | string;
   /**
    * How the loaded rows are arranged: as many card columns as fit
    * (`"grid"`, the default) or one wide row each (`"list"`). The view SWITCH
@@ -695,6 +732,7 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
   return (
     <SkinTheme
       surface="base"
+      data-testid="search-results-pane"
       {...(props.mode !== undefined ? { mode: props.mode } : {})}
       style={{
         width: "100%",
@@ -703,7 +741,16 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
     >
       <SearchResults {...(props.enabled !== undefined ? { enabled: props.enabled } : {})}>
         {(bag) => (
-          <Flex vertical gap={spacing[4]}>
+          <Flex
+            vertical
+            gap={spacing[4]}
+            // The box the results arrive into — see `reserve`. Only until the
+            // FIRST answer lands: a floor under rows already on screen would
+            // hold a gap open under a short page for the rest of the session.
+            {...(props.reserve !== undefined && bag.state.status === "loading"
+              ? { style: { minBlockSize: props.reserve } }
+              : {})}
+          >
             {props.lead !== undefined && (
               <div data-testid="search-results-lead">{props.lead}</div>
             )}
@@ -751,14 +798,19 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
                   </Typography.Title>
                 </div>
                 <Flex
-                  justify="space-between"
                   align="center"
                   gap={spacing[3]}
                   className={RESULTS_TOOLBAR_CLASS}
                   data-testid="search-results-toolbar"
                   style={{ ...TOOLBAR_ROW, ...toolbarPin }}
                 >
-                  <Count bag={bag} />
+                  {/* The elastic half, present whether or not there is a
+                      count in it — see TOOLBAR_LEAD. It is what holds the
+                      controls against the trailing edge in the frame before
+                      the number arrives, so nothing travels when it does. */}
+                  <div style={TOOLBAR_LEAD} data-testid="search-results-toolbar-lead">
+                    <Count bag={bag} />
+                  </div>
                   <Flex align="center" gap={spacing[3]} style={TOOLBAR_END}>
                     {props.toolbar}
                   </Flex>

package/src/default/SortSelect.tsx

@@ -15,7 +15,7 @@
  * That is the whole defect this file used to carry: the one sort a person
  * would most want on a phone was greyed out with its explanation in a hover.
  */
-import type { ReactElement } from "react";
+import type { CSSProperties, ReactElement } from "react";
 import { Flex, Select, Typography } from "antd";
 import { actionAvailable, actionBlocked, useT } from "@stapel/core";
 import type { ActionAvailability } from "@stapel/core";
@@ -34,6 +34,61 @@ import { sortLabelKey } from "./sortLabels.js";
  */
 export const SORT_SELECT_MIN_WIDTH = 200;
 
+/**
+ * The select's own chrome around its label: antd's two inline paddings plus
+ * the caret and its margin. Added to the compact form's sizer (below), which
+ * measures a bare label.
+ */
+export const SORT_SELECT_CHROME = 40;
+
+/**
+ * ── THE COMPACT CONTROL'S BOX, HELD FROM THE FIRST FRAME ────────────────────
+ *
+ * The compact arm draws `value={active ?? null}`, and `active` is only known
+ * once the page in cache reports the sort the SERVER applied (see
+ * {@link useAppliedSort}) — for an address that names no `sort`, that is a
+ * whole round trip after the first paint. So the control rendered as a bare
+ * caret and then GREW by the width of its label: measured on a category leaf,
+ * the caret's own box moved from x=22 to x=137, 115px, the largest single
+ * term in that page's layout shift. `minWidth: 0` was written inline, so no
+ * consumer stylesheet could hold the box either.
+ *
+ * The floor is not {@link SORT_SELECT_MIN_WIDTH}: 200px is the desktop arm's
+ * number and would wrap a two-control toolbar onto two rows at 390px. It is
+ * the width of the longest label THIS control can be asked to show, at the
+ * font it will show it in — so it is measured by the browser rather than
+ * guessed in pixels, and it is right in every locale (a Russian sort label is
+ * half again as long as its English original).
+ *
+ * One grid cell, two children stacked in it: an `aria-hidden` sizer carrying
+ * the longest label, and the select itself. The cell is as wide as the sizer,
+ * the select fills it, and neither depends on `active`.
+ */
+const COMPACT_WRAP: CSSProperties = {
+  display: "inline-grid",
+  flex: "0 1 auto",
+};
+
+const COMPACT_SIZER: CSSProperties = {
+  gridArea: "1 / 1",
+  visibility: "hidden",
+  blockSize: 0,
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  paddingInline: SORT_SELECT_CHROME,
+};
+
+const COMPACT_SELECT: CSSProperties = { gridArea: "1 / 1", minWidth: 0 };
+
+/** The longest of the labels the control can display, which is the one the
+ * sizer holds. Ties keep the first — they are the same width. */
+export function longestSortLabel(labels: readonly string[]): string {
+  return labels.reduce((longest, label) =>
+    label.length > longest.length ? label : longest
+  , "");
+}
+
 /** Why `sort=distance` is refused without a centre — the server's own code, so
  * the control and the 400 it would have earned say the same sentence. */
 const SORT_DISTANCE_BLOCKED = "error.400.search_sort_needs_center";
@@ -49,9 +104,11 @@ export interface SortSelectProps {
    *
    *  - the "Sort" caption goes (the select already shows a sort by name; the
    *    accessible name keeps the word);
-   *  - the {@link SORT_SELECT_MIN_WIDTH} floor goes, so the control shares one
+   *  - the {@link SORT_SELECT_MIN_WIDTH} floor goes — the control shares one
    *    row with whatever the surface puts beside it instead of pushing it to
-   *    the next line;
+   *    the next line — and is replaced by a floor the width of this control's
+   *    OWN longest label, so the box does not grow when the answer names the
+   *    sort (see `COMPACT_WRAP`);
    *  - the line under the control goes. The blocked option's REASON does not:
    *    it is on the option itself at every width now (see `optionsFor`), and
    *    what the compact form drops is the second, separate copy of it.
@@ -110,14 +167,25 @@ export function SortSelect(props: SortSelectProps): ReactElement {
    * accessible description of the SELECT, the other is the label of the OPTION
    * that is refused, and they are read in different moments.
    */
+  /**
+   * The names this control can DISPLAY, which is what the compact form's
+   * sizer is measured on. The blocked row's appended reason is deliberately
+   * not among them: it reaches the CLOSED control only for a sort the address
+   * itself names, and a sort in the address is known from the first frame —
+   * so it can widen the box but can never move it.
+   */
+  const plainLabels = values.map((value) => {
+    const key = sortLabelKey(value);
+    return key !== undefined ? t(key) : value;
+  });
+
   const optionsFor = (): {
     readonly value: string;
     readonly label: string;
     readonly disabled: boolean;
   }[] =>
-    values.map((value) => {
-      const key = sortLabelKey(value);
-      const label = key !== undefined ? t(key) : value;
+    values.map((value, index) => {
+      const label = plainLabels[index] ?? value;
       const blocked = value === "distance" && !hasCentre;
       return {
         value,
@@ -128,20 +196,23 @@ export function SortSelect(props: SortSelectProps): ReactElement {
 
   if (props.compact === true) {
     return (
-      <Select<string>
-        data-testid="search-sort"
-        data-stapel-gated={hasCentre ? "available" : "blocked"}
-        aria-label={t(SEARCH_I18N_KEYS.sortLabel)}
-        // `minWidth: 0` and not the floor: a control that refuses to be
-        // narrower than 200px is a control that wraps a two-item toolbar onto
-        // two rows at 390px.
-        style={{ minWidth: 0, flex: "0 1 auto" }}
-        value={active ?? null}
-        onChange={(next) => {
-          setSort(next);
-        }}
-        options={optionsFor()}
-      />
+      <div style={COMPACT_WRAP} data-testid="search-sort-compact">
+        {/* The box, not a caption — see `COMPACT_WRAP`. */}
+        <span aria-hidden="true" data-testid="search-sort-sizer" style={COMPACT_SIZER}>
+          {longestSortLabel(plainLabels)}
+        </span>
+        <Select<string>
+          data-testid="search-sort"
+          data-stapel-gated={hasCentre ? "available" : "blocked"}
+          aria-label={t(SEARCH_I18N_KEYS.sortLabel)}
+          style={COMPACT_SELECT}
+          value={active ?? null}
+          onChange={(next) => {
+            setSort(next);
+          }}
+          options={optionsFor()}
+        />
+      </div>
     );
   }
 

package/src/default/index.ts

@@ -93,7 +93,6 @@ export {
   CHIP_BAND_ORDER,
   CHIP_ROW_CAP,
   CHIP_ROW_CLASS,
-  CHIP_ROW_MIN_HEIGHT,
   CHIP_ROW_STYLE_HREF,
   appliedChipTestId,
   appliedRowMinHeight,
@@ -101,6 +100,7 @@ export {
   capChipRow,
   categoryLeaf,
   chipRowCss,
+  chipRowMinHeight,
   orderChipFilters,
   rangeChipText,
   rangeLabelSource,
@@ -179,7 +179,12 @@ export type { RankingDisclosurePaneProps } from "./RankingDisclosurePane.js";
 // ── controls, exported so a host can compose its own layout ─────────────────
 export { SearchBox } from "./SearchBox.js";
 export type { SearchBoxProps } from "./SearchBox.js";
-export { SortSelect, SORT_SELECT_MIN_WIDTH } from "./SortSelect.js";
+export {
+  SortSelect,
+  SORT_SELECT_CHROME,
+  SORT_SELECT_MIN_WIDTH,
+  longestSortLabel,
+} from "./SortSelect.js";
 export type { SortSelectProps } from "./SortSelect.js";
 export { ViewSwitch, SEARCH_BUILTIN_VIEWS, resolveView } from "./ViewSwitch.js";
 export type { ViewSwitchProps, SearchView, SearchResultsLayout } from "./ViewSwitch.js";