@12-apps/ui 6.37.0 → 6.39.0

package/src/components/data-display/DataGrid/DataGrid.body.tsx

@@ -13,6 +13,8 @@ import TableRow from '@mui/material/TableRow/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import type React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import { GridRow, HeaderCell } from './DataGrid.cells';
 import type { DataGridModel } from './DataGrid.model';
 import type { DataGridProps } from './DataGrid.types';
@@ -78,7 +80,10 @@ export function GridHeader<T extends Record<string, unknown>>(
   section: GridSectionProps<T>,
 ): React.JSX.Element {
   const { model, props } = section;
-  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;
+  const theme = useTheme();
+  const { sorting = {}, stickyHeader = true } = props;
+  // 56 design px unless the caller says, drawn through the type scale.
+  const headerHeight = rem(theme, props.headerHeight ?? 56);
   const sortable = sorting.mode === 'client' || sorting.mode === 'server';
   return (
     <TableHead data-slot="header">
@@ -100,12 +105,27 @@ export function GridHeader<T extends Record<string, unknown>>(
   );
 }
 
-/** An invisible row standing in for the rows the window is not rendering. */
-function Spacer({ height, colSpan }: { height: number; colSpan: number }): React.JSX.Element | null {
-  if (height <= 0) return null;
+/**
+ * An invisible row standing in for `rows` rows the window is not rendering —
+ * that many times the row's own CSS height, so the spacer and the rows it
+ * replaces are the same length by construction.
+ */
+function Spacer({
+  rows,
+  rowHeight,
+  colSpan,
+}: {
+  rows: number;
+  rowHeight: string;
+  colSpan: number;
+}): React.JSX.Element | null {
+  if (rows <= 0) return null;
   return (
     <TableRow>
-      <TableCell colSpan={colSpan} sx={{ height, border: 'none', p: 0 }} />
+      <TableCell
+        colSpan={colSpan}
+        sx={{ height: `calc(${rows} * ${rowHeight})`, border: 'none', p: 0 }}
+      />
     </TableRow>
   );
 }
@@ -119,7 +139,7 @@ export function GridBody<T extends Record<string, unknown>>(
   return (
     <TableBody data-slot="body">
       {model.virtualized ? (
-        <Spacer height={start * model.rowHeight} colSpan={totalColumns} />
+        <Spacer rows={start} rowHeight={model.rowHeight} colSpan={totalColumns} />
       ) : null}
       {model.visibleRows.map((row, offset) => {
         const index = model.virtualized ? start + offset : offset;
@@ -139,7 +159,7 @@ export function GridBody<T extends Record<string, unknown>>(
         );
       })}
       {model.virtualized ? (
-        <Spacer height={trailing * model.rowHeight} colSpan={totalColumns} />
+        <Spacer rows={trailing} rowHeight={model.rowHeight} colSpan={totalColumns} />
       ) : null}
     </TableBody>
   );

package/src/components/data-display/DataGrid/DataGrid.cells.tsx

@@ -16,9 +16,11 @@ import IconButton from '@mui/material/IconButton/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
 import TableRow from '@mui/material/TableRow/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { rem } from '../../../tokens/relative';
+
 import { cellValue } from './DataGrid.rows';
 import type { DataGridModel } from './DataGrid.model';
 import type { DataGridProps, GridColumn, GridSort } from './DataGrid.types';
@@ -35,12 +37,36 @@ function ariaSort(dir: GridSort['dir'] | undefined): 'none' | 'ascending' | 'des
   return dir === 'asc' ? 'ascending' : 'descending';
 }
 
+/**
+ * One of a column's `width`/`minWidth`/`maxWidth` as CSS. A number is design
+ * px through the type scale — except 1 or less, which `sx` has always read as a
+ * fraction of the table and still does; a string (`'312px'`, `'20%'`) is used as
+ * given.
+ */
+function columnLength(theme: Theme, value: number | string | undefined): string | undefined {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+}
+
+/** A column's size constraints, as the `sx` of its header and its cells. */
+function columnBox<T extends Record<string, unknown>>(
+  theme: Theme,
+  column: GridColumn<T>,
+): { minWidth?: string; maxWidth?: string; width?: string } {
+  return {
+    minWidth: columnLength(theme, column.minWidth),
+    maxWidth: columnLength(theme, column.maxWidth),
+    width: columnLength(theme, column.width),
+  };
+}
+
 export interface HeaderCellProps<T extends Record<string, unknown>> {
   column: GridColumn<T>;
   sort: GridSort | undefined;
   sortable: boolean;
   stickyHeader: boolean;
-  headerHeight: number;
+  /** The header row's height, as CSS. */
+  headerHeight: string;
   onSort: (columnId: string) => void;
 }
 
@@ -65,9 +91,7 @@ export function HeaderCell<T extends Record<string, unknown>>({
         backgroundColor: theme.palette.background.paper,
         borderBottom: `1px solid ${theme.palette.divider}`,
         height: headerHeight,
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width,
+        ...columnBox(theme, column),
       }}
       role="columnheader"
       aria-sort={ariaSort(sort?.dir)}
@@ -103,7 +127,8 @@ export interface DataCellProps<T extends Record<string, unknown>> {
   rowIndex: number;
   rowId: string | number;
   column: GridColumn<T>;
-  rowHeight: number;
+  /** The row's height, as CSS — `DataGridModel.rowHeight`. */
+  rowHeight: string;
   editing: NonNullable<DataGridProps<T>['editing']>;
   model: Pick<DataGridModel<T>, 'editingCell' | 'setEditingCell'>;
 }
@@ -117,6 +142,7 @@ export function DataCell<T extends Record<string, unknown>>({
   editing,
   model,
 }: DataCellProps<T>): React.JSX.Element {
+  const theme = useTheme();
   const value = cellValue(row, column);
   const isEditing =
     model.editingCell?.rowId === rowId && model.editingCell?.colId === column.id;
@@ -129,9 +155,7 @@ export function DataCell<T extends Record<string, unknown>>({
       data-col-id={column.id}
       data-editing={isEditing}
       sx={{
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width,
+        ...columnBox(theme, column),
         height: rowHeight,
       }}
       role="gridcell"

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
   );
 }