@12-apps/ui 6.38.0 → 6.39.0

package/src/components/data-display/DataGrid/DataGrid.model.ts

@@ -10,9 +10,12 @@
  * passes `sorting.sortBy` owns the sort, and a caller that does not gets the
  * internal state — the component never holds a second, divergent copy.
  */
+import { useTheme } from '@mui/material/styles/index.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 
+import { rem, remPx } from '../../../tokens/relative';
+
 import { processRows } from './DataGrid.rows';
 import type {
   DataGridProps,
@@ -22,7 +25,6 @@ import type {
   SortDirection,
 } from './DataGrid.types';
 
-const DEFAULT_ROW_HEIGHT = 52;
 const DEFAULT_PAGE_SIZE = 50;
 /** Rows rendered on either side of the window, so a fast scroll stays filled. */
 const OVERSCAN_COUNT = 20;
@@ -48,7 +50,13 @@ export interface VisibleRange {
 /** Everything the render needs, and nothing it has to derive. */
 export interface DataGridModel<T extends Record<string, unknown>> {
   containerRef: React.RefObject<HTMLDivElement | null>;
-  rowHeight: number;
+  /** A row's height as CSS: the design height, density applied, through `rem`. */
+  rowHeight: string;
+  /**
+   * The same height in px (`remPx`) — what the window divides `scrollTop` by.
+   * One design number drawn two ways, so the rows and the window never disagree.
+   */
+  rowPitch: number;
   visibleColumns: GridColumn<T>[];
   processedRows: T[];
   visibleRows: T[];
@@ -67,7 +75,7 @@ export interface DataGridModel<T extends Record<string, unknown>> {
   onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
 }
 
-/** The row height a density implies. */
+/** The row height a density implies, in design px. */
 function densityHeight(base: number, density: DataGridProps['density']): number {
   if (density === 'compact') return Math.max(base * 0.8, 32);
   if (density === 'spacious') return base * 1.2;
@@ -114,7 +122,8 @@ function useProcessedRows<T extends Record<string, unknown>>(
 }
 
 /**
- * The virtualization window and the scroll handler that moves it.
+ * The virtualization window and the scroll handler that moves it. `rowPitch` is
+ * px, like the `scrollTop` and `clientHeight` it is divided into.
  *
  * Throttled through `requestAnimationFrame`, and only committed once the window
  * has drifted meaningfully — a `setState` per scroll event re-renders every
@@ -122,7 +131,7 @@ function useProcessedRows<T extends Record<string, unknown>>(
  */
 function useRowWindow(
   rowCount: number,
-  rowHeight: number,
+  rowPitch: number,
   enabled: boolean,
 ): { range: VisibleRange; onScroll: (event: React.UIEvent<HTMLDivElement>) => void } {
   const [range, setRange] = useState<VisibleRange>({ start: 0, end: INITIAL_WINDOW });
@@ -145,8 +154,8 @@ function useRowWindow(
       const { scrollTop, clientHeight } = event.currentTarget;
       if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
       rafRef.current = window.requestAnimationFrame(() => {
-        const first = Math.floor(scrollTop / rowHeight);
-        const visible = Math.ceil(clientHeight / rowHeight);
+        const first = Math.floor(scrollTop / rowPitch);
+        const visible = Math.ceil(clientHeight / rowPitch);
         const start = Math.max(0, first - OVERSCAN_COUNT);
         const end = Math.min(first + visible + OVERSCAN_COUNT, rowCount);
         setRange((current) =>
@@ -158,7 +167,7 @@ function useRowWindow(
         rafRef.current = null;
       });
     },
-    [enabled, rowHeight, rowCount],
+    [enabled, rowPitch, rowCount],
   );
 
   return { range, onScroll };
@@ -282,10 +291,13 @@ export function useDataGridModel<T extends Record<string, unknown>>(
   props: DataGridProps<T>,
 ): DataGridModel<T> {
   const { columns } = props;
+  const theme = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
   const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
   const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
-  const rowHeight = densityHeight(props.rowHeight ?? DEFAULT_ROW_HEIGHT, props.density);
+  // 52 design px unless the caller says; the density scales it, then the type scale does.
+  const designRowHeight = densityHeight(props.rowHeight ?? 52, props.density);
+  const rowPitch = remPx(theme, designRowHeight);
   const columnMap = useMemo(
     () => new Map(columns.map((column) => [column.id, column])),
     [columns],
@@ -294,12 +306,13 @@ export function useDataGridModel<T extends Record<string, unknown>>(
   const processedRows = useProcessedRows(props, columnMap, sortBy, filters);
   const virtualized =
     (props.virtualizeRows ?? true) && processedRows.length > VIRTUALIZATION_THRESHOLD;
-  const { range, onScroll } = useRowWindow(processedRows.length, rowHeight, virtualized);
+  const { range, onScroll } = useRowWindow(processedRows.length, rowPitch, virtualized);
   const onSort = useSortHandler(props, sortBy, filters, setInternalSortBy);
 
   return {
     containerRef,
-    rowHeight,
+    rowHeight: rem(theme, designRowHeight),
+    rowPitch,
     visibleColumns,
     processedRows,
     visibleRows: virtualized ? processedRows.slice(range.start, range.end) : processedRows,

package/src/components/data-display/DataGrid/DataGrid.types.ts

@@ -18,10 +18,14 @@ export interface GridColumn<T = Record<string, unknown>> {
   accessor?: keyof T | ((row: T) => unknown);
   /** Column type influences default formatting and editors */
   type?: 'text' | 'number' | 'date' | 'datetime' | 'boolean' | 'currency' | 'actions';
-  /** Width hints (px) and min/max constraints */
-  width?: number;
-  minWidth?: number;
-  maxWidth?: number;
+  /**
+   * Width hint and min/max constraints. A number is design px, scaled with the
+   * theme's type scale (1 or less is a fraction of the table, as in `sx`); a
+   * string (`'312px'`, `'20%'`) is used as given.
+   */
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
   /** Column is initially hidden */
   hidden?: boolean;
   /** Pin to left/right (sticky) */
@@ -144,8 +148,10 @@ export interface DataGridProps<T = Record<string, unknown>> extends React.HTMLAt
   /** Sizing, density, and layout */
   sizeMode?: GridSizeMode; // auto | fixed | fill
   density?: GridDensity; // compact | comfortable | spacious
-  rowHeight?: number; // default row height (px)
-  headerHeight?: number; // default header height (px)
+  /** Row height (default 52) — design px, scaled with the theme's type scale; `density` scales it first. */
+  rowHeight?: number;
+  /** Header row height (default 56) — design px, scaled with the theme's type scale. */
+  headerHeight?: number;
   footerHeight?: number; // optional
 
   /** Interaction features */

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 import { useMemo } from "react";
 
 import { type GridColumn } from "../DataGrid";
@@ -44,6 +45,7 @@ function computeHideableColumns<T extends Record<string, unknown>>(
 function appendActionsColumn<T extends Record<string, unknown>>(
   columns: DataViewColumn<T>[],
   opts: {
+    theme: Theme;
     rowActions?: RowAction<T>[];
     rowActionsLeading?: (row: T) => React.ReactNode;
     renderRowMenu?: (row: T) => React.ReactNode;
@@ -51,11 +53,12 @@ function appendActionsColumn<T extends Record<string, unknown>>(
     getRowId: (row: T) => string | number;
   },
 ): DataViewColumn<T>[] {
-  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  const { theme, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
   if ((!rowActions && !renderRowMenu) || columns.some(isActionsColumn)) return columns;
   return [
     ...columns,
     buildRowActionsColumn({
+      theme,
       rowActions: rowActions ?? [],
       leading: rowActionsLeading,
       testIdPrefix,
@@ -84,10 +87,18 @@ export function useColumnsWithActions<T extends Record<string, unknown>>(
   opts: ActionsColumnOpts<T>,
 ): { columnsWithActions: DataViewColumn<T>[]; allColumnIds: string[] } {
   const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  const theme = useTheme();
   const columnsWithActions = useMemo(
     () =>
-      appendActionsColumn(columns, { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId }),
-    [columns, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId],
+      appendActionsColumn(columns, {
+        theme,
+        rowActions,
+        rowActionsLeading,
+        renderRowMenu,
+        testIdPrefix,
+        getRowId,
+      }),
+    [columns, theme, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId],
   );
   const allColumnIds = useMemo(() => columnsWithActions.map((col) => col.id), [columnsWithActions]);
   return { columnsWithActions, allColumnIds };

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

@@ -54,6 +54,8 @@ export function buildGridColumns<T extends Record<string, unknown>>(
 }
 
 interface ActionsColumnConfig<T extends Record<string, unknown>> {
+  /** Whose type scale the column's width is drawn at. */
+  theme: Theme;
   /** Actions that build the auto "⋮" kebab. Ignored when `renderRowMenu` is set. */
   rowActions: RowAction<T>[];
   /** Optional leading slot (e.g. a favourite star) rendered before the kebab. */
@@ -80,7 +82,7 @@ interface ActionsColumnConfig<T extends Record<string, unknown>> {
 export function buildRowActionsColumn<T extends Record<string, unknown>>(
   config: ActionsColumnConfig<T>,
 ): DataViewColumn<T> {
-  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;
+  const { theme, rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;
   const kebabActions = rowActions.filter((action) => action.row !== false);
   return {
     id: "actions",
@@ -89,8 +91,8 @@ export function buildRowActionsColumn<T extends Record<string, unknown>>(
     enableSort: false,
     hideable: false,
     // Narrow: the column only holds the "⋮" kebab (plus an optional leading icon),
-    // so it needs room for just one or two icons.
-    width: leading ? 72 : 44,
+    // so it needs room for just one or two icons — 72 or 44 design px.
+    width: rem(theme, leading ? 72 : 44),
     cell: ({ row }) => (
       <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: sxRem(2), justifyContent: "flex-end" }}>
         {leading?.(row)}

package/src/components/data-display/DataViews/data-views-layout-context.tsx

@@ -6,6 +6,7 @@ import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
 
 import { Slider } from "../../form/Slider";
 import { Box } from "../../../mui/Box";
+import { sxRem } from "../../../tokens/relative";
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from "./data-views-types";
@@ -41,8 +42,6 @@ const DataViewsLayoutContext = createContext<DataViewsLayoutValue | null>(null);
 
 /** Default card zoom (0–100). */
 const DEFAULT_ZOOM = 35;
-/** The card's width in px at scale 1 — the zoom slider multiplies this. */
-const BASE_CARD_WIDTH = 180;
 /** The size multiplier the zoom slider spans (0.75× to 2×). */
 const CARD_SCALE_RANGE = { min: 0.75, max: 2 } as const;
 
@@ -103,7 +102,7 @@ export const DENSITY_CARD_SCALE: Record<DataViewsDensity, number> = {
   comfortable: 1.4,
 };
 
-/** The width a card aims for: the base width, scaled by zoom, then by density. */
+/** The width a card aims for, in design px: the base width, scaled by zoom, then by density. */
 export function cardTargetWidthFor(zoom: number, density: DataViewsDensity): number {
   return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
 }
@@ -131,7 +130,7 @@ export const DENSITY_BOARD_SCALE: Record<DataViewsDensity, number> = {
 
 /**
  * Map the 0–100 zoom to the card SIZE multiplier. This is the single knob: the
- * card's width is {@link BASE_CARD_WIDTH} × scale and its padding + typography
+ * card's width is its 180 design px × scale and its padding + typography
  * scale by the same factor, so the whole card grows together (scale 2 → twice
  * the size, proportion preserved by the aspect ratio). Passed to a card via
  * `DataViewCardSelection.scale`.
@@ -141,9 +140,13 @@ export function cardScaleForZoom(zoom: number): number {
   return CARD_SCALE_RANGE.min + (clamped / 100) * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
 }
 
-/** The card grid's min column width in px = base width × the zoom size multiplier. */
+/**
+ * The card grid's min column width in DESIGN px: the card's width at scale 1 —
+ * 180 — times the zoom size multiplier. Drawn through `rem` where the track is
+ * built (`cardGridTracks`), so it scales with the theme's type scale.
+ */
 export function cardMinWidthForZoom(zoom: number): number {
-  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+  return Math.round(180 * cardScaleForZoom(zoom));
 }
 
 /** Which layouts this table can actually render. */
@@ -334,8 +337,8 @@ export function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }):
         color: "text.secondary",
       }}
     >
-      <GridViewOutlinedIcon sx={{ fontSize: 14 }} />
-      <Box sx={{ width: 88, display: "flex", alignItems: "center" }}>
+      <GridViewOutlinedIcon sx={{ fontSize: sxRem(14) }} />
+      <Box sx={{ width: sxRem(88), display: "flex", alignItems: "center" }}>
         <Slider
           size="sm"
           showValue={false}
@@ -348,7 +351,7 @@ export function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }):
           data-testid={`${testIdPrefix}-card-zoom`}
         />
       </Box>
-      <GridViewOutlinedIcon sx={{ fontSize: 20 }} />
+      <GridViewOutlinedIcon sx={{ fontSize: sxRem(20) }} />
     </Box>
   );
 }

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

@@ -9,12 +9,21 @@
  * Every number here is either MEASURED in a browser (and says so) or
  * deliberately generous. Over-pricing sheds one control too early, which the
  * "Mais" button absorbs invisibly; under-pricing breaks the line.
+ *
+ * Every number is DESIGN px — measured at MUI's default type scale. The bar is
+ * measured in real px, so a price reaches it through `remPx` (`estimateWidth`,
+ * `pricesFor`): a theme that scales its type scales the controls, and so the
+ * prices, together — a denser theme fits more pills on the same bar.
  */
+import type { Theme } from "@mui/material/styles/index.js";
+
+import { remPx } from "../../../tokens/relative";
+
 import type { OverflowField } from "./data-views-overflow";
 import type { RangeValue } from "./data-views-types";
 
 /**
- * Rough rendered width of a control, in px.
+ * Rough rendered width of a control, in px at `theme`'s type scale.
  *
  * An ESTIMATE from the label text rather than a real measurement, deliberately:
  * measuring the true width needs every control mounted first, and mounting them
@@ -22,7 +31,7 @@ import type { RangeValue } from "./data-views-types";
  * avoid. The estimate only has to rank controls and find the cut point — being
  * a few px out moves the cut by at most one control, and the overflow catches it.
  */
-export function estimateWidth(text: string, extra: number): number {
+export function estimateWidth(theme: Theme, text: string, extra: number): number {
   /**
    * ~7.6px per character at the toolbar's font size, plus 76px of chrome:
    * horizontal padding, the border, and the dropdown chevron. The chrome used
@@ -41,7 +50,7 @@ export function estimateWidth(text: string, extra: number): number {
    * 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) + 56 + extra;
+  return remPx(theme, Math.round(text.length * 7.6) + 56 + extra);
 }
 
 /** Is a range bounded at either end? */
@@ -59,7 +68,7 @@ export function pillText<T extends Record<string, unknown>>(field: OverflowField
   return `${field.label}: ${values.length}`;
 }
 
-/** Fixed toolbar furniture the filters have to fit around, in px. */
+/** Fixed toolbar furniture the filters have to fit around, in design px. */
 export const RESERVED = {
   /** The search box never shrinks below this. */
   search: 200,
@@ -131,20 +140,28 @@ export const RESERVED = {
   /**
    * 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.
+   * Not the per-control gaps — `splitFilters` already adds `betweenControls`
+   * 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,
+  /** The gap between two controls. */
+  betweenControls: 8,
 } as const;
 
-/** The gap between two controls. */
-export const GAP = 8;
+/** {@link RESERVED} at a theme's type scale — the px the measured bar is in. */
+export type Prices = Record<keyof typeof RESERVED, number>;
+
+/** Price the furniture for `theme`: every {@link RESERVED} entry through `remPx`. */
+export function pricesFor(theme: Theme): Prices {
+  const entries = Object.entries(RESERVED).map(([key, px]) => [key, remPx(theme, px)]);
+  return Object.fromEntries(entries) as Prices;
+}
 
 /** 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;
+export function rightClusterCost(price: Prices, hasExport: boolean, compact: boolean): number {
+  const one = compact ? price.displayControlCompact : price.displayControl;
   return hasExport ? one * 2 : one;
 }
 
@@ -159,13 +176,14 @@ export function rightClusterCost(hasExport: boolean, compact: boolean): number {
  * as a bar carrying a magnifier, a "Mais 5" pill, and a band of nothing.
  */
 export function furnitureCost(
+  price: Prices,
   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
+    (flags.searchCollapsed ? price.searchIcon : price.search) +
+    (flags.counterHidden ? 0 : price.counter) +
+    rightClusterCost(price, hasExport, flags.compactControls) +
+    price.chrome
   );
 }

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

@@ -1,16 +1,19 @@
 "use client";
 
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 import { useRef } from "react";
 
+import { remPx } from "../../../tokens/relative";
 import { splitToFit, useMeasuredWidth } from "../../utility/Overflow";
 import {
   estimateWidth,
   furnitureCost,
-  GAP,
   isRangeSet,
   pillText,
+  pricesFor,
   RESERVED,
   rightClusterCost,
+  type Prices,
 } from "./data-views-overflow-costs";
 import type { FilterFieldConfig, RangeFieldConfig, RangeValue } from "./data-views-types";
 
@@ -118,15 +121,16 @@ function isActiveField<T extends Record<string, unknown>>(
     : isRangeSet(ranges[field.id]);
 }
 
-/** Estimated rendered width of one control at its CURRENT value. */
+/** Estimated rendered width of one control at its CURRENT value, in px at `theme`'s scale. */
 function fieldWidth<T extends Record<string, unknown>>(
+  theme: Theme,
   field: OverflowField<T>,
   pills: Record<string, string[]>,
   ranges: Record<string, RangeValue>,
 ): number {
-  if (field.group === "pill") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);
-  // A bounded range renders two number inputs beside its label.
-  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
+  if (field.group === "pill") return estimateWidth(theme, pillText(field, pills[field.id] ?? []), 0);
+  // A bounded range renders two number inputs (100 design px) beside its label.
+  return estimateWidth(theme, field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
 }
 
 /** What one split costs on the bar, so the ladder below can price the next step. */
@@ -147,12 +151,16 @@ function splitFilters<T extends Record<string, unknown>>(
   furniture: number,
   /** Is the bar already down to icons? "Mais" shrinks with everything else. */
   compact: boolean,
+  /** Whose type scale every price is read at — the bar's own. */
+  theme: Theme,
 ): Split<T> {
   const active = all.filter((field) => isActiveField(field, pills, ranges));
   const idle = all.filter((field) => !isActiveField(field, pills, ranges));
+  const price = pricesFor(theme);
+  const gap = remPx(theme, RESERVED.betweenControls);
 
   // "Limpar" rides the end of the cluster whenever anything is applied.
-  const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
+  const clearCost = active.length > 0 ? price.clearAll + gap : 0;
   // APPLIED FIRST, BUT NOT EXEMPT.
   //
   // Applied controls take the visible slots ahead of idle ones — that part was
@@ -170,13 +178,13 @@ function splitFilters<T extends Record<string, unknown>>(
   // one part of this that is not filter-shaped, and the part a second cluster
   // in the design system would otherwise have had to reimplement.
   const split = splitToFit(all, {
-    widthOf: (field) => fieldWidth(field, pills, ranges),
+    widthOf: (field) => fieldWidth(theme, field, pills, ranges),
     keyOf: (field) => field.id,
-    gap: GAP,
+    gap,
     available: width - furniture - clearCost,
     // The overflow button at the width it will actually have, which on a phone
     // is the icon-and-badge one.
-    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    overflowCost: compact ? price.overflowButtonCompact : price.overflowButton,
     priority: [...active, ...idle],
   });
   return { ...split, used: split.used + clearCost };
@@ -206,6 +214,7 @@ function computeSplit<T extends Record<string, unknown>>(
   width: number,
   /** Does the host render "Exportar" beside "Exibir"? Half the cluster if not. */
   hasExport: boolean,
+  theme: Theme,
 ): Omit<OverflowSplit<T>, "barRef"> {
   // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.
   if (width === 0) {
@@ -219,9 +228,11 @@ function computeSplit<T extends Record<string, unknown>>(
       searchTakeover: false,
     };
   }
+  const price = pricesFor(theme);
   // 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);
+  let budget = furnitureCost(price, UNCOLLAPSED, hasExport);
+  let split = splitFilters(all, pills, ranges, width, budget, false, theme);
+  let flags = ladderFlags(split, width, hasExport, price);
   // RE-SPEND WHAT THE LATER RUNGS FREED.
   //
   // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until
@@ -234,13 +245,12 @@ function computeSplit<T extends Record<string, unknown>>(
   // 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);
+    const freed = furnitureCost(price, flags, hasExport);
     if (freed >= budget) break;
     budget = freed;
-    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
-    flags = ladderFlags(split, width, hasExport);
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls, theme);
+    flags = ladderFlags(split, width, hasExport, price);
   }
   return { inline: split.inline, overflow: split.overflow, ...flags };
 }
@@ -253,21 +263,22 @@ function ladderFlags<T extends Record<string, unknown>>(
   split: Split<T>,
   width: number,
   hasExport: boolean,
+  price: Prices,
 ): Omit<OverflowSplit<T>, "barRef" | "inline" | "overflow"> {
   const { overflow, used } = split;
-  const base = width - used - RESERVED.chrome;
+  const base = width - used - price.chrome;
 
   // Would the search still make its minimum with the labels on?
-  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
-  const rightCost = rightClusterCost(hasExport, compactControls);
+  const compactControls = base - price.counter - rightClusterCost(price, hasExport, false) < price.search;
+  const rightCost = rightClusterCost(price, hasExport, compactControls);
   // …and with them off?
-  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
+  const searchCollapsed = base - price.counter - rightCost < price.search;
   // Everything has collapsed and the row STILL overflows. The controls cannot
   // shrink further — they are `flexShrink: 0` precisely so an over-packed row
   // sheds rather than squeezes — so without this last rung they simply paint
   // outside the toolbar, which is what a narrow phone was doing.
   const counterHidden =
-    searchCollapsed && base - RESERVED.counter - rightCost < RESERVED.searchIcon;
+    searchCollapsed && base - price.counter - rightCost < price.searchIcon;
   // Step 6 — below even that, "Limpar" leaves the bar. It is the ONLY control
   // here with a second home: the overflow panel's footer carries "Limpar todos
   // os filtros", so nothing is lost, which is exactly why it goes before the
@@ -288,14 +299,14 @@ function ladderFlags<T extends Record<string, unknown>>(
   // 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;
+    ? price.overflowButtonCompact
+    : price.overflowButton;
+  const shedRoom = width - price.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : price.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;
+  const searchTakeover = searchCollapsed && searchBoxRoom < price.usableSearch;
 
   return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
@@ -336,16 +347,19 @@ export function useFilterOverflow<T extends Record<string, unknown>>(
   // first measurement lands (and forever under SSR or jsdom), which
   // `computeSplit` reads as "degrade nothing".
   const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();
+  // The prices follow the theme's type scale, so the answer does too.
+  const theme = useTheme();
   const signature = JSON.stringify({
     ids: all.map((field) => field.id),
     pills,
     ranges,
     width,
     hasExport,
+    scale: remPx(theme, 1),
   });
   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, hasExport) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport, theme) };
   }
   return { ...cache.current.split, barRef };
 }

package/src/components/data-display/MapPreview/MapTiles.tsx

@@ -2,12 +2,14 @@ import { alpha, useTheme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
-import { TILE_SIZE } from './mapProjection';
+import { rem } from '../../../tokens/relative';
+
+import { TILE_WORLD_UNITS } from './mapProjection';
 import { tileBackground } from './mapSurface';
 import type { MapType } from './MapPreview.types';
 
 // Two extra rows and columns so panning does not expose an edge.
-const VISIBLE_TILES = Math.ceil(800 / TILE_SIZE) + 2;
+const VISIBLE_TILES = Math.ceil(800 / TILE_WORLD_UNITS) + 2;
 // Tile coordinates are only legible once the grid is reasonably fine.
 const LABEL_MIN_ZOOM = 10;
 
@@ -23,6 +25,9 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
   const borderOpacity = theme.palette.mode === 'dark' ? 0.15 : 0.1;
   const background = tileBackground(mapType, theme);
   const half = Math.floor(VISIBLE_TILES / 2);
+  // A tile is drawn at one design px per world unit, through the type scale.
+  const tile = rem(theme, TILE_WORLD_UNITS);
+  const grid = rem(theme, TILE_WORLD_UNITS * VISIBLE_TILES);
 
   return (
     <div
@@ -30,12 +35,14 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
         position: 'absolute',
         top: '50%',
         left: '50%',
+        // The pan is pointer pixels dragged, so it stays px: the grid follows
+        // the cursor exactly, whatever the type scale.
         transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,
-        width: TILE_SIZE * VISIBLE_TILES,
-        height: TILE_SIZE * VISIBLE_TILES,
+        width: grid,
+        height: grid,
         display: 'grid',
-        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
-        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${tile})`,
+        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${tile})`,
         transition: 'transform 0.1s ease-out',
       }}
     >
@@ -48,14 +55,14 @@ export const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }
           <div
             key={`tile-${tileX}-${tileY}`}
             style={{
-              width: TILE_SIZE,
-              height: TILE_SIZE,
+              width: tile,
+              height: tile,
               border: `1px solid ${alpha(theme.palette.divider, borderOpacity)}`,
               background,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              fontSize: '10px',
+              fontSize: rem(theme, 10),
               color: alpha(theme.palette.text.secondary, 0.3),
               fontFamily: 'monospace',
               userSelect: 'none',