@12-apps/ui 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",

package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md

@@ -23,6 +23,10 @@ later; an eight-filter one degrades sooner. Both are correct.
 | small desktop | 1280 | laptop |
 | large desktop | 1600 | external monitor |
 
+The tests also pin a **crowded** row at 1024, because a small desktop no longer
+overflows at all: the rules about what happens when controls do NOT fit need a
+width where some of them do not.
+
 **These are toolbar ROW widths, not viewport widths.** The `ResizeObserver`
 watches the row, and the row is narrower than the window by whatever the page
 puts around it — around 48px in the Pedidos shell. So a 430px row is roughly a
@@ -77,8 +81,26 @@ Read this as "what the Pedidos table does", not "what the code hard-codes".
 
 | | small mobile | large mobile | tablet | small desktop | large desktop |
 | --- | --- | --- | --- | --- | --- |
-| controls on the bar | 0 | 0 | 0 | 1–2 | 3+ |
-| "Mais" present | yes | yes | yes | yes | only if something overflowed |
+| controls on the bar | 0 | 1 | 1 | all 6 | all 6 |
+| "Mais" present | yes | yes | yes | no | no |
+
+**The bar re-spends what its own collapse frees.** Rungs 2/4/5 turn 200 + 96 +
+216 of furniture into 44 + 0 + 140, and the split used to be decided once,
+against the UNCOLLAPSED row — so a phone shed all six controls to make room for
+a search box and a counter that were about to shrink, and nobody handed the
+~330px back. It showed as a 428px bar carrying a magnifier, "Mais 6", and a
+225px band of nothing. `computeSplit` now iterates to a fixed point: cheaper
+furniture buys more filters, more filters push the ladder further down, a
+further rung makes the furniture cheaper again, and the budget decreases
+monotonically until it stops moving.
+
+The furniture is also priced for what is ACTUALLY on the bar. "Exportar" exists
+only when the host passes an `exportConfig` — several screens put their export
+in the page header instead — and charging for the pair regardless billed the
+filters ~108px for a button that was never rendered.
+
+Which control survives on a phone is whichever fits the room left over, so a
+large mobile keeps a cheaper pill where a tablet affords a wider one.
 
 **An applied filter is ranked first, not exempt.** Applied controls take the
 visible slots ahead of idle ones and go into "Mais" like anything else when even
@@ -133,7 +155,12 @@ Two distinct behaviours, and conflating them was a bug:
 | --- | --- | --- | --- | --- | --- |
 | Exibir / Exportar | icon | icon | label | label | label |
 | dropdown chevron | no | no | yes | yes | yes |
-| "N de N" counter | hidden | hidden | shown | shown | shown |
+| "N de N" counter | hidden | shown | shown | shown | shown |
+
+The counter is priced at 56, not the old 96. It was measured against
+"1.234 de 5.678"; a phone reads "3 de 3" and renders at 35px, so the extra
+~60px was coming straight out of the filter budget at exactly the widths where
+that budget is scarcest.
 
 A tablet keeps the labels, which is worth stating because it is easy to assume
 otherwise. With every filter already behind "Mais" the row has room to spare
@@ -176,6 +203,13 @@ leaves the board with a single populated column, which reads as data loss.
 of the five widths and asserts the tables above. It is the executable copy of
 this document; if the two disagree, the test is right and this needs updating.
 
+`what fits follows the controls, not the width alone` guards the property the
+rest of this document depends on: the counts above are OUTCOMES of pricing one
+fixture against one row, never rules. At a single width it asserts that a table
+declaring cheaper controls keeps more of them, that one long control keeps
+none, and that the same table promotes another as its row grows — three answers
+a breakpoint could not give.
+
 Two things it cannot check, because jsdom has no layout engine: actual pixel
 overflow, and how anything looks. Those are verified in a real browser against
 the running Storybook, at 1600 / 1280 / 1024 / 900 / 768 / 600 / 500 / 430 / 390

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-parts.tsx

@@ -142,6 +142,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 +153,7 @@ function useGridShellFilters<T extends Record<string, unknown>>({
   rangeFields,
   testIdPrefix,
   alwaysShowSearch,
+  hasExport,
 }: GridShellFiltersArgs<T>): {
   showInline: boolean;
   useModal: boolean;
@@ -171,6 +174,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
@@ -365,7 +369,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
+  );
+}

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

@@ -2,7 +2,15 @@
 
 import { useEffect, useRef, useState } from "react";
 
-import { estimateWidth, GAP, isRangeSet, pillText, RESERVED } from "./data-views-overflow-costs";
+import {
+  estimateWidth,
+  furnitureCost,
+  GAP,
+  isRangeSet,
+  pillText,
+  RESERVED,
+  rightClusterCost,
+} from "./data-views-overflow-costs";
 import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
 
 /**
@@ -154,6 +162,10 @@ function splitFilters<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Search + counter + right cluster + chrome, at the rung being considered. */
+  furniture: number,
+  /** Is the bar already down to icons? "Mais" shrinks with everything else. */
+  compact: boolean,
 ): Split<T> {
   const none: OverflowField<T>[] = [];
   const widthOf = (field: OverflowField<T>): number => fieldWidth(field, pills, ranges);
@@ -164,14 +176,15 @@ function splitFilters<T extends Record<string, unknown>>(
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
   const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
-  let available =
-    width - RESERVED.search - RESERVED.counter - RESERVED.right - RESERVED.chrome - clearCost;
+  let available = width - furniture - clearCost;
   if (cost(all) <= available) {
     return { inline: all, overflow: none, used: cost(all) + clearCost };
   }
 
-  // There IS an overflow, so its button now costs room too.
-  available -= RESERVED.overflowButton;
+  // There IS an overflow, so its button now costs room too — at the width it
+  // will actually have, which on a phone is the icon-and-badge one.
+  const overflowButton = compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton;
+  available -= overflowButton;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -198,7 +211,7 @@ function splitFilters<T extends Record<string, unknown>>(
   return {
     inline,
     overflow: all.filter((field) => !keep.has(field.id)),
-    used: cost(inline) + RESERVED.overflowButton + clearCost,
+    used: cost(inline) + overflowButton + clearCost,
   };
 }
 
@@ -224,6 +237,8 @@ function computeSplit<T extends Record<string, unknown>>(
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
   width: number,
+  /** Does the host render "Exportar" beside "Exibir"? Half the cluster if not. */
+  hasExport: boolean,
 ): Omit<OverflowSplit<T>, "barRef"> {
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
@@ -237,12 +252,47 @@ function computeSplit<T extends Record<string, unknown>>(
       searchTakeover: false,
     };
   }
-  const { inline, overflow, used } = splitFilters(all, pills, ranges, width);
+  // Pass 1 prices the furniture at its widest — no rung has been taken yet.
+  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
+  let flags = ladderFlags(split, width, hasExport);
+  // RE-SPEND WHAT THE LATER RUNGS FREED.
+  //
+  // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until
+  // this loop existed nobody handed those ~330px back to the filters: the
+  // split was decided once, against the uncollapsed row, so a phone shed every
+  // control and then sat with a band of empty bar beside "Mais 5".
+  //
+  // Settles rather than oscillates, and cannot overfill: a cheaper furniture
+  // can only give the filters MORE room, more filter width can only push the
+  // ladder FURTHER down, and a further rung can only make the furniture
+  // cheaper again — so the budget decreases monotonically and the loop exits
+  // the moment it stops moving. The bound is a backstop, not the exit.
+  let budget = furnitureCost(UNCOLLAPSED, hasExport);
+  for (let pass = 0; pass < 3; pass += 1) {
+    const freed = furnitureCost(flags, hasExport);
+    if (freed >= budget) break;
+    budget = freed;
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
+    flags = ladderFlags(split, width, hasExport);
+  }
+  return { inline: split.inline, overflow: split.overflow, ...flags };
+}
+
+/** The widest the furniture ever is — every rung still untaken. */
+const UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };
+
+/** Rungs 2 and 4-6, priced against what the filters actually took. */
+function ladderFlags<T extends Record<string, unknown>>(
+  split: Split<T>,
+  width: number,
+  hasExport: boolean,
+): Omit<OverflowSplit<T>, "barRef" | "inline" | "overflow"> {
+  const { overflow, used } = split;
   const base = width - used - RESERVED.chrome;
 
   // Would the search still make its minimum with the labels on?
-  const compactControls = base - RESERVED.counter - RESERVED.right < RESERVED.search;
-  const rightCost = compactControls ? RESERVED.rightCompact : RESERVED.right;
+  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
+  const rightCost = rightClusterCost(hasExport, compactControls);
   // …and with them off?
   const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
   // Everything has collapsed and the row STILL overflows. The controls cannot
@@ -258,26 +308,29 @@ function computeSplit<T extends Record<string, unknown>>(
   // on there BEING an overflow, because with no panel the footer does not
   // exist and dropping this would strand the operator.
   const clearAllHidden = counterHidden && overflow.length > 0;
-  // What the keyword box would get if the operator expanded the magnifier and
-  // everything else stayed put. `searchCollapsed` is a different question — it
-  // asks whether the box fits at its PREFERRED 200px, and is deliberately
-  // pessimistic — so reusing it to decide the takeover evicted the filters on
-  // screens where the box had plenty of room to simply shrink.
-  const searchBoxRoom = base - (counterHidden ? 0 : RESERVED.counter) - rightCost;
+  // What the keyword box would get if the operator expanded the magnifier.
+  // `searchCollapsed` is a different question — it asks whether the box fits at
+  // its PREFERRED 200px, and is deliberately pessimistic — so reusing it to
+  // decide the takeover evicted the filters on screens where the box had plenty
+  // of room to simply shrink.
+  //
+  // Asked with the inline filters SHED, because shedding them is exactly what
+  // expanding the box does: the row re-splits and they go behind "Mais".
+  // Measuring against the resting row instead made a filter argue for its own
+  // eviction — now that a large phone keeps one, its width came out of `base`,
+  // pushed the box under `usableSearch`, and tipped a row that had ample space
+  // to share into a full takeover.
+  const overflowButton = compactControls
+    ? RESERVED.overflowButtonCompact
+    : RESERVED.overflowButton;
+  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
   // Below this a box is too narrow to read what you typed into it, and shrinking
   // further buys nothing; that is the only point at which taking the whole
   // cluster is worth losing the filters.
   const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
 
-  return {
-    inline,
-    overflow,
-    compactControls,
-    counterHidden,
-    searchCollapsed,
-    clearAllHidden,
-    searchTakeover,
-  };
+  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
 
 /**
@@ -307,12 +360,20 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
    * that is mid-edit.
    */
   frozen = false,
+  /** Whether "Exportar" is on the bar — see `rightClusterCost`. */
+  hasExport = true,
 ): OverflowSplit<T> {
   const { barRef, width } = useBarWidth();
-  const signature = JSON.stringify({ ids: all.map((field) => field.id), pills, ranges, width });
+  const signature = JSON.stringify({
+    ids: all.map((field) => field.id),
+    pills,
+    ranges,
+    width,
+    hasExport,
+  });
   const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);
   if (cache.current === null || (!frozen && cache.current.signature !== signature)) {
-    cache.current = { signature, split: computeSplit(all, pills, ranges, width) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
   }
   return { ...cache.current.split, barRef };
 }