@12-apps/ui 1.22.0 → 2.0.0

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -107,8 +107,6 @@ export function DayBoundInput({
       // The mask IS the placeholder, so the expected order is on screen before
       // the first keystroke rather than discovered by getting it wrong.
       placeholder="dd/mm/aaaa"
-      // A numeric keypad on a phone, while still accepting a paste with slashes.
-      inputMode="numeric"
       value={text}
       onChange={(event) => {
         const next = maskBrDate(event.target.value);
@@ -126,7 +124,28 @@ export function DayBoundInput({
       onBlur={() => setText(isoToBr(applied))}
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
-      inputProps={{ 'data-testid': testId, maxLength: 10 }}
+      // `inputMode` HAS to be here rather than on the TextField. Anything
+      // TextField does not recognise is spread onto its root `FormControl` div,
+      // and `inputMode` is not in that list — so passing it up there put the
+      // attribute on a non-editable wrapper, where it means nothing, and the
+      // phone went on offering the letter keyboard for a field that only takes
+      // digits (the `dd/mm/aaaa` hint sitting under a QWERTY layout). Only the
+      // `<input>` this reaches decides which keypad opens.
+      //
+      // `numeric` and not `tel`: both raise a keypad, but the phone one is a
+      // dialler with `+ * #` on it — keys that cannot occur in a date. A paste
+      // carrying separators still lands, because the MASK is what filters the
+      // text; the keypad only narrows what a thumb can reach for.
+      //
+      // Autofill off for the same reason: the browser's saved-value strip
+      // covers the keypad to suggest names and addresses, none of which are a
+      // date, and none of which the mask would keep.
+      inputProps={{
+        'data-testid': testId,
+        maxLength: 10,
+        inputMode: 'numeric',
+        autoComplete: 'off',
+      }}
       sx={{ width: 165 }}
     />
   );

package/src/components/data-display/DataViews/data-views-display-panel.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+// Says "display settings" rather than the generic tune sliders it used to
+// share with the "Mais" FILTER trigger — see the note there.
+import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRounded";
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
@@ -267,7 +269,7 @@ function DisplayTrigger({
       title={compact ? "Exibir" : undefined}
     >
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
-        <TuneRoundedIcon fontSize="small" />
+        <DisplaySettingsRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
             Exibir

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { DataGrid, type GridColumn, type GridSort } from "../DataGrid";
 import { Box } from "../../../mui/Box";
 
@@ -10,9 +12,11 @@ import {
   DENSITY_CARD_COLUMNS,
   DENSITY_ROW_PADDING,
   useDataViewsLayout,
+  type DataViewsDensity,
 } from "./data-views-layout-context";
 import { DataViewsBoard, type BoardConfig } from "./DataViewsBoard";
 import { SelectAllStrip } from "./data-views-select-all-strip";
+import { ListCardGroup, type ListGroupConfig } from "./list-card-rails";
 import type { DataViewCardSelection } from "./data-views-types";
 import type { DataViewsController } from "./use-data-views-state";
 
@@ -160,6 +164,10 @@ interface ListBodyProps<T extends Record<string, unknown>> {
   onToggleId: (id: string | number) => void;
   /** Gap between rows, from the density preference. */
   rowGap: number;
+  /** The list's shared column config. See {@link ListGroupConfig}. */
+  group?: ListGroupConfig<T>;
+  /** The density every row answers, handed to the group when there is one. */
+  density: DataViewsDensity;
   dataTestId?: string;
   emptyState?: React.ReactNode;
 }
@@ -186,28 +194,59 @@ function ListBody<T extends Record<string, unknown>>({
   selectedIds,
   onToggleId,
   rowGap,
+  group,
+  density,
   dataTestId,
   emptyState,
 }: ListBodyProps<T>): React.JSX.Element {
   if (rows.length === 0) {
     return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;
   }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id: string | number): DataViewCardSelection => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1,
+  });
+
+  if (group) {
+    return (
+      <Box sx={{ mt: 1.5 }}>
+        <ListCardGroup
+          cells={group.cells}
+          metaColumns={group.metaColumns}
+          rails={group.rails}
+          reserveGutters={group.reserveGutters}
+          density={density}
+          gap={rowGap}
+          dataTestId={testId}
+        >
+          {rows.map((row) => {
+            const id = getRowId(row);
+            // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks
+            // (`gridColumn: span railCount`), which only resolves while the card
+            // is a DIRECT child of the group's grid. One wrapper element and the
+            // span is measured against a grid that isn't there, so every rail
+            // collapses — the exact failure the group exists to prevent.
+            return (
+              <React.Fragment key={id}>
+                {renderListRow(row, selectionFor(id))}
+              </React.Fragment>
+            );
+          })}
+        </ListCardGroup>
+      </Box>
+    );
+  }
+
   return (
     <Box
       sx={{ mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap }}
-      data-testid={dataTestId ? `${dataTestId}-list` : "data-views-list"}
+      data-testid={testId}
     >
       {rows.map((row) => {
         const id = getRowId(row);
-        return (
-          <Box key={id}>
-            {renderListRow(row, {
-              selected: selectedIds.has(id),
-              onToggleSelect: () => onToggleId(id),
-              scale: 1,
-            })}
-          </Box>
-        );
+        return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;
       })}
     </Box>
   );
@@ -221,6 +260,8 @@ interface GridMainProps<T extends Record<string, unknown>> {
   renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
   /** Opt-in "Lista" layout — one full-width row per record. */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
+  /** The Lista's shared columns. Omitted, each row resolves its own tracks. */
+  listGroup?: ListGroupConfig<T>;
   /** Opt-in "Quadro" (board) layout — needs `renderCard`, since it reuses the card. */
   board?: BoardConfig<T>;
   dataTestId?: string;
@@ -260,68 +301,78 @@ function Headerless<T extends Record<string, unknown>>({
   );
 }
 
-/** Picks the body from the layout context: board, list, cards, or the dense grid. */
-export function GridMain<T extends Record<string, unknown>>({
-  c,
-  getRowId,
-  renderCard,
-  renderListRow,
-  board,
-  dataTestId,
-  emptyState,
-  testIdPrefix,
-}: GridMainProps<T>): React.JSX.Element {
-  const { layout, zoom, density } = useDataViewsLayout();
+/**
+ * The body for one of the three HEADERLESS layouts, or `null` for the table.
+ *
+ * Split out from {@link GridMain} so the select-all strip is wrapped around the
+ * result exactly once instead of being repeated identically in every branch —
+ * which is also what keeps either function inside the line budget.
+ */
+function headerlessBody<T extends Record<string, unknown>>(
+  { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,
+  { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,
+): React.ReactNode | null {
   if (layout === "list" && renderListRow) {
     return (
-      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <ListBody
-          rows={c.matched}
-          renderListRow={renderListRow}
-          getRowId={getRowId}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          rowGap={DENSITY_ROW_PADDING[density]}
-          dataTestId={dataTestId}
-          emptyState={emptyState}
-        />
-      </Headerless>
+      <ListBody
+        rows={c.matched}
+        renderListRow={renderListRow}
+        getRowId={getRowId}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        rowGap={DENSITY_ROW_PADDING[density]}
+        group={listGroup}
+        density={density}
+        dataTestId={dataTestId}
+        emptyState={emptyState}
+      />
     );
   }
   if (layout === "board" && board && renderCard) {
     return (
-      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <DataViewsBoard
-          rows={c.matched}
-          board={board}
-          getRowId={getRowId}
-          renderCard={renderCard}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          // DENSITY, not zoom: the board's own knob in the Exibição tab is how
-          // wide its columns are, and it is the only sizing control the board
-          // has since the zoom slider was removed.
-          cardScale={DENSITY_BOARD_SCALE[density]}
-          dataTestId={dataTestId}
-        />
-      </Headerless>
+      <DataViewsBoard
+        rows={c.matched}
+        board={board}
+        getRowId={getRowId}
+        renderCard={renderCard}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        // DENSITY, not zoom: the board's own knob in the Exibição tab is how
+        // wide its columns are, and it is the only sizing control the board
+        // has since the zoom slider was removed.
+        cardScale={DENSITY_BOARD_SCALE[density]}
+        dataTestId={dataTestId}
+      />
     );
   }
   if (layout === "cards" && renderCard) {
+    return (
+      <CardBody
+        rows={c.matched}
+        renderCard={renderCard}
+        getRowId={getRowId}
+        selectedIds={c.selectedIds}
+        onToggleId={c.toggleId}
+        minCardWidth={cardMinWidthForZoom(zoom)}
+        maxColumns={DENSITY_CARD_COLUMNS[density]}
+        cardScale={cardScaleForZoom(zoom)}
+        dataTestId={dataTestId}
+        emptyState={emptyState}
+      />
+    );
+  }
+  return null;
+}
+
+/** Picks the body from the layout context: board, list, cards, or the dense grid. */
+export function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
     return (
       <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>
-        <CardBody
-          rows={c.matched}
-          renderCard={renderCard}
-          getRowId={getRowId}
-          selectedIds={c.selectedIds}
-          onToggleId={c.toggleId}
-          minCardWidth={cardMinWidthForZoom(zoom)}
-          maxColumns={DENSITY_CARD_COLUMNS[density]}
-          cardScale={cardScaleForZoom(zoom)}
-          dataTestId={dataTestId}
-          emptyState={emptyState}
-        />
+        {body}
       </Headerless>
     );
   }
@@ -335,7 +386,7 @@ export function GridMain<T extends Record<string, unknown>>({
       sortBy={c.state.sortBy}
       onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}
       sortMode={c.serverMode ? "server" : "client"}
-      rowPadding={DENSITY_ROW_PADDING[density]}
+      rowPadding={DENSITY_ROW_PADDING[layoutState.density]}
       dataTestId={dataTestId}
       emptyState={emptyState}
     />

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -14,6 +14,7 @@ import {
 } from "./data-views-layout-context";
 import { FilterDialog, GridFilterPanel } from "./data-views-filter-panel";
 import { GridMain } from "./data-views-grid-bodies";
+import type { ListGroupConfig } from "./list-card-rails";
 import { InlineFilterControls } from "./data-views-inline-bar";
 import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-views-overflow";
 import { ShellToolbar } from "./data-views-shell-toolbar";
@@ -142,6 +143,8 @@ interface GridShellFiltersArgs<T extends Record<string, unknown>> {
   rangeFields: RangeFieldConfig<T>[];
   testIdPrefix: string;
   alwaysShowSearch: boolean;
+  /** Is "Exportar" on the bar? Half the right cluster's cost when it is not. */
+  hasExport: boolean;
 }
 
 function useGridShellFilters<T extends Record<string, unknown>>({
@@ -151,6 +154,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   rangeFields,
   testIdPrefix,
   alwaysShowSearch,
+  hasExport,
 }: GridShellFiltersArgs<T>): {
   showInline: boolean;
   useModal: boolean;
@@ -171,6 +175,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
     state.pills,
     c.ranges,
     openControls > 0,
+    hasExport,
   );
   // THE BAR RENDERS AT EVERY WIDTH. It used to be swapped for a full-screen
   // filter MODAL below `lg`, which was the responsive strategy before the
@@ -234,6 +239,8 @@ interface GridShellProps<T extends Record<string, unknown>> {
   board?: BoardConfig<T>;
   /** Opt-in "Lista" layout: one full-width, entity-rendered row per record. */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
+  /** The Lista's shared columns, so its rows line up by construction. */
+  listGroup?: ListGroupConfig<T>;
   /** The page-level partition rendered as tabs under the toolbar. */
   scopes?: ScopeConfig[];
   /**
@@ -336,6 +343,7 @@ function ShellStack<T extends Record<string, unknown>>({
               getRowId={props.getRowId}
               renderCard={props.renderCard}
               renderListRow={props.renderListRow}
+              listGroup={props.listGroup}
               board={props.board}
               dataTestId={dataTestId}
               testIdPrefix={testIdPrefix}
@@ -365,7 +373,15 @@ export function GridShell<T extends Record<string, unknown>>(props: GridShellPro
     inlineFilters = false,
     alwaysShowSearch = false,
   } = props;
-  const filters = useGridShellFilters({ c, inlineFilters, fields, rangeFields, testIdPrefix, alwaysShowSearch });
+  const filters = useGridShellFilters({
+    c,
+    inlineFilters,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    alwaysShowSearch,
+    hasExport: props.exportConfig !== undefined,
+  });
   return (
     <DataViewsLayoutProvider
       canUseCards={Boolean(renderCard)}

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -19,9 +19,7 @@ import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
 import type { OverflowField } from "./data-views-overflow";
-import { RangePresets } from "./data-views-preset-chips";
 import { RangeBounds } from "./data-views-range-pill";
-import { presetsFor } from "./data-views-range-presets";
 import { isRangeSet } from "./data-views-range-values";
 import type { RangeValue } from "./data-views-types";
 
@@ -114,10 +112,11 @@ function OverflowPill<T extends Record<string, unknown>>({
 
 
 /**
- * One overflowed range: its two bounds, as the same inputs the pill uses.
+ * One overflowed range: its presets and its two bounds, as the same controls
+ * the pill uses.
  *
- * The bounds DELEGATE to {@link RangeBounds} rather than being built here,
- * which is the whole point — this panel used to render a raw
+ * The whole control DELEGATES to {@link RangeBounds} rather than being built
+ * here, which is the point — this panel used to render a raw
  * `<input type="date">`, so the masked `dd/mm/aaaa` field existed only while
  * the filter FITTED on the bar. The moment "Data" overflowed it reverted to the
  * native control the mask replaced, and a merchant on a narrow screen never saw
@@ -128,6 +127,12 @@ function OverflowPill<T extends Record<string, unknown>>({
  * native date input reports a wide minimum (its own mask plus the picker
  * glyph), which is what made two of them refuse to shrink and scrolled the
  * panel sideways. A text input has no such minimum.
+ *
+ * `RangeBounds` renders the preset chips ITSELF, above the inputs. This panel
+ * must NOT render its own row as well: when the delegation above landed, the
+ * chips it used to draw by hand stayed behind, and "Data" showed Hoje/Ontem/
+ * Esta semana/Este mês/Este ano twice — two rows, duplicated test ids, and half
+ * the panel's height spent saying the same thing (FUT-751).
  */
 function OverflowRange<T extends Record<string, unknown>>({
   field,
@@ -144,24 +149,12 @@ function OverflowRange<T extends Record<string, unknown>>({
   // set; the guard is for the type, not for a state the caller can reach.
   if (!field.range) return null;
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-      {/* The overflow offers the same one-click windows the pill does. A field
-          in here is one that had no room on the bar, not one with fewer
-          controls — otherwise "Data" gains and loses its presets as the window
-          is resized. */}
-      <RangePresets
-        presets={presetsFor(field.range)}
-        value={value}
-        onChange={onChange}
-        testId={`${testIdPrefix}-more-${field.id}`}
-      />
-      <RangeBounds
-        field={field.range}
-        value={value}
-        onChange={onChange}
-        testId={`${testIdPrefix}-more-${field.id}`}
-      />
-    </Box>
+    <RangeBounds
+      field={field.range}
+      value={value}
+      onChange={onChange}
+      testId={`${testIdPrefix}-more-${field.id}`}
+    />
   );
 }
 

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+// A FUNNEL, not the tune sliders this used to share with "Exibir". The two
+// sit a few px apart on the same bar and do unrelated things — one narrows
+// WHICH rows you see, the other changes HOW they are shown — and with one
+// glyph between them the bar offered the operator no way to tell which was
+// which. On a phone, where both are icon-only, they were indistinguishable.
+import FilterAltRoundedIcon from "@mui/icons-material/FilterAltRounded";
 import { Popover } from "@mui/material";
 import { useState } from "react";
 
@@ -76,7 +81,7 @@ function MoreTrigger({
           color: applied ? "primary.main" : undefined,
         }}
       >
-        <TuneRoundedIcon fontSize="small" />
+        <FilterAltRoundedIcon fontSize="small" />
         {!compact && (
           <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
             Mais

package/src/components/data-display/DataViews/data-views-number-input.tsx

@@ -23,6 +23,17 @@
  * plain `50` still works, and so does `50.00` — a dot with exactly two digits
  * after it is far more likely to be a decimal typed on a numeric keypad than a
  * thousands group, and reading it as `5000` is the very failure this replaces.
+ *
+ * WHICH KEYPAD, and where the request has to be made. `inputMode` goes on the
+ * `<input>`, via `inputProps` — set on the `TextField` it rides the spread onto
+ * the root `FormControl` div, an element nothing types into, so the attribute
+ * has no effect and a phone goes on offering letters for a field that accepts
+ * none of them. It is `decimal` rather than `numeric` because the numeric pad
+ * has no comma on iOS, and the comma is the separator this field exists to
+ * accept — `numeric` here would reopen the bug above from the other side, with
+ * `17,50` untypeable rather than misread. Autofill is off alongside it: its
+ * saved-value strip covers the keypad to offer names and addresses, none of
+ * which survive `ALLOWED` anyway.
  */
 import { Box, TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
@@ -107,9 +118,6 @@ export function NumberBoundInput({
       size="small"
       type="text"
       label={label}
-      // Not `numeric`: that keypad has no comma on iOS, which is the separator
-      // this field exists to accept.
-      inputMode="decimal"
       value={text}
       onChange={(event) => {
         // Reject the characters rather than silently dropping them AFTER
@@ -139,7 +147,9 @@ export function NumberBoundInput({
         )
       }
       InputLabelProps={{ shrink: true }}
-      inputProps={{ 'data-testid': testId }}
+      // `inputMode` belongs on the `<input>`, never on the TextField — see the
+      // keypad note at the top of this file for what goes wrong up there.
+      inputProps={{ 'data-testid': testId, inputMode: 'decimal', autoComplete: 'off' }}
       InputProps={
         unit
           ? {

package/src/components/data-display/DataViews/data-views-overflow-costs.ts

@@ -33,8 +33,15 @@ export function estimateWidth(text: string, extra: number): number {
    *
    * Deliberately generous: over-pricing sheds one control too early, which the
    * "Mais" button absorbs invisibly. Under-pricing breaks the line.
+   *
+   * The chrome was 76, and generous had turned into wrong. MEASURED on the
+   * Pedidos bar: "Pagamento" renders at 123px against an estimate of 144, and
+   * "Situação" at 107 against 137 — every pill over-priced by ~22%, which on a
+   * phone is the whole difference between one pill on the bar and none. 56 is
+   * still above the ~50 measured, so the slack the comment above asks for is
+   * intact; it is just slack rather than a second control's worth of budget.
    */
-  return Math.round(text.length * 7.6) + 76 + extra;
+  return Math.round(text.length * 7.6) + 56 + extra;
 }
 
 /** Is a range bounded at either end? */
@@ -56,20 +63,40 @@ export function pillText<T extends Record<string, unknown>>(field: OverflowField
 export const RESERVED = {
   /** The search box never shrinks below this. */
   search: 200,
-  /** The "N de N" counter. */
-  counter: 96,
-  /** Exibir + Exportar WITH their text labels. */
-  right: 216,
   /**
-   * The same two controls as icons only — step 2 of the ladder.
+   * The "N de N" counter.
+   *
+   * MEASURED at 35px, plus its divider and gap. The old 96 was priced for a
+   * counter reading "1.234 de 5.678"; a phone shows "3 de 3", and charging
+   * nearly triple its rendered width came straight out of the filter budget.
+   */
+  counter: 56,
+  /**
+   * ONE right-hand control (Exibir, or Exportar) WITH its text label.
+   *
+   * Priced per control rather than for the pair, because the pair is not what
+   * every page renders: "Exportar" exists only when the host passes an
+   * `exportConfig`, and several pages (Pedidos among them) put their export in
+   * the PAGE HEADER instead. Charging 216 there billed the filters for a button
+   * that was never on the bar — ~108px of budget spent on nothing, which on a
+   * phone is the difference between one filter pill and none.
+   */
+  displayControl: 108,
+  /**
+   * The same control as an icon only — step 2 of the ladder.
+   *
+   * MEASURED at 133px for the PAIR (66 each: a Button's minimum tap target is
+   * a good deal wider than the 20px glyph inside it); 70 keeps that total's
+   * slack at one control's granularity.
+   */
+  displayControlCompact: 70,
+  /**
+   * What step 4 leaves behind: the search as a bare magnifier.
    *
-   * MEASURED at 133px for the pair (66 each: a Button's minimum tap target is
-   * a good deal wider than the 20px glyph inside it), so the old 96 under-priced
-   * them by a third and the row went on believing it had room it did not.
+   * MEASURED at 30px on the Pedidos bar (`…-search-all-collapsed`); 38 keeps a
+   * tap target's worth of slack over it.
    */
-  rightCompact: 140,
-  /** What step 4 leaves behind: the search as a bare magnifier. */
-  searchIcon: 44,
+  searchIcon: 38,
   /**
    * The narrowest keyword box still worth typing into — below it the operator
    * cannot read back what they wrote, and the box takes over the cluster
@@ -81,8 +108,17 @@ export const RESERVED = {
    * while keeping its filters — paying for nothing.
    */
   usableSearch: 120,
-  /** The "Mais" button, only charged when there IS an overflow. */
-  overflowButton: 104,
+  /**
+   * The "Mais" button, only charged when there IS an overflow — and priced by
+   * the state it is actually in, like the right-hand cluster beside it.
+   *
+   * MEASURED: 128px with its label, badge and chevron; 69px once the ladder has
+   * it down to icon + badge. One number for both was wrong in BOTH directions —
+   * it under-priced the wide bar (the row's own failure mode) and over-priced
+   * the narrow one by a whole pill.
+   */
+  overflowButton: 136,
+  overflowButtonCompact: 80,
   /**
    * "Limpar", only charged when there IS something to clear.
    *
@@ -92,9 +128,44 @@ export const RESERVED = {
    * Measured at 64 as an icon; 72 with slack.
    */
   clearAll: 72,
-  /** Gaps + the row's own padding. */
-  chrome: 64,
+  /**
+   * The row's own padding, plus the gaps BETWEEN the fixed furniture.
+   *
+   * Not the per-control gaps — `splitFilters` already adds a `GAP` for every
+   * filter it keeps, so counting a fourth one here charged one gap twice.
+   * MEASURED: 32px of padding (16 each side) + three 8px gaps between the
+   * search, the counter and the right cluster.
+   */
+  chrome: 56,
 } as const;
 
 /** The gap between two controls. */
 export const GAP = 8;
+
+/** What the right-hand cluster costs, given what the host actually renders. */
+export function rightClusterCost(hasExport: boolean, compact: boolean): number {
+  const one = compact ? RESERVED.displayControlCompact : RESERVED.displayControl;
+  return hasExport ? one * 2 : one;
+}
+
+/**
+ * What the toolbar furniture costs at a given rung of the ladder — the budget
+ * the filter controls have to fit AROUND.
+ *
+ * This exists because the two halves used to disagree. `splitFilters` priced
+ * the furniture at its widest (search 200 + counter 96 + right 216) and shed
+ * every filter to make room; the ladder then collapsed those very controls to
+ * 44 + 0 + 140 and nobody handed the ~330px back. On a 428px phone that showed
+ * as a bar carrying a magnifier, a "Mais 5" pill, and a band of nothing.
+ */
+export function furnitureCost(
+  flags: { searchCollapsed: boolean; counterHidden: boolean; compactControls: boolean },
+  hasExport: boolean,
+): number {
+  return (
+    (flags.searchCollapsed ? RESERVED.searchIcon : RESERVED.search) +
+    (flags.counterHidden ? 0 : RESERVED.counter) +
+    rightClusterCost(hasExport, flags.compactControls) +
+    RESERVED.chrome
+  );
+}