@12-apps/ui 6.93.0 → 6.93.2

package/src/components/data-display/DayRuler/DayRuler.styles.ts

@@ -2,39 +2,39 @@ import { alpha, type CSSObject, type SxProps, type Theme } from '@mui/material/s
 
 import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';
 import { rem, sxRem } from '../../../tokens/relative';
-import { actualBarColor, blockToneStyles, breakHatch, signalInk } from '../ScheduleGrid/schedule-tones';
+import { actualBarColor, blockToneStyles, breakHatch, dashedLabelGround } from '../ScheduleGrid/schedule-tones';
 import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
 
-/** The container narrow rows answer to (container queries, never media queries). */
-/**
- * `--dr-actions`: the actions column, 220px when any row has actions and
- * nothing when none does (no empty column at the end of every row).
- */
-export function rootSx(hasActions: boolean): SxProps<Theme> {
-  return (theme: Theme) => ({
-    containerType: 'inline-size',
-    minWidth: 0,
-    width: '100%',
-    userSelect: 'none',
-    '--dr-actions': hasActions ? rem(theme, M.sideColumn) : '0%',
-  });
-}
+/** The container the ruler's layout answers to — named, so no other container between the root and a row can stand in for it. */
+const CONTAINER = 'day-ruler';
+
+/** The ruler's root: the named container every layout query reads. */
+export const rootSx: SxProps<Theme> = {
+  containerType: 'inline-size',
+  containerName: CONTAINER,
+  minWidth: 0,
+  width: '100%',
+  userSelect: 'none',
+};
 
 /** `@container` below which a row stacks (the coverage and axis rows go full width). Bounds are "from px up". */
 function compact(theme: Theme): string {
-  return `@container (width < ${rem(theme, M.compactBelow)})`;
+  return `@container ${CONTAINER} (width < ${rem(theme, M.compactBelow)})`;
 }
 
 /** `@container` below which the pane is phone-sized: no coverage row, no axis. Bounds are "from px up". */
 function phone(theme: Theme): string {
-  return `@container (width < ${rem(theme, M.phoneBelow)})`;
+  return `@container ${CONTAINER} (width < ${rem(theme, M.phoneBelow)})`;
 }
 
-/** Name · track · actions, the coverage row and the axis row share these columns on a computer. */
+/**
+ * Name · track: the coverage row and the axis row share these columns with
+ * every row on a computer, so the hours line up down the whole ruler.
+ */
 export const lineSx: SxProps<Theme> = (theme: Theme) => ({
   display: 'grid',
-  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
+  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr)`,
   columnGap: rem(theme, M.gap),
   alignItems: 'center',
   // Stacked: across the full width, like the tracks; the label above the counts.
@@ -109,19 +109,23 @@ export const groupTitleSx: SxProps<Theme> = {
 };
 
 /**
- * One person's row. A computer: name · track · actions on one line. A narrow
- * ruler (a phone): name and actions on top, the track under them, full width.
+ * One person's row. A computer: name (its actions under it) · track, the
+ * track the same width on every row whether or not the row has actions. A
+ * narrow ruler (a phone): name and actions on top, the track under them, full
+ * width.
  */
 export const rowSx: SxProps<Theme> = (theme: Theme) => ({
   display: 'grid',
-  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,
-  gridTemplateAreas: '"who track actions"',
+  gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr)`,
+  gridTemplateRows: 'auto auto',
+  gridTemplateAreas: '"who track" "actions track"',
   columnGap: rem(theme, M.gap),
   alignItems: 'center',
   py: rem(theme, M.rowPaddingY),
   borderBottom: `1px solid ${theme.palette.divider}`,
   [compact(theme)]: {
     gridTemplateColumns: 'minmax(0, 1fr) auto',
+    gridTemplateRows: 'none',
     gridTemplateAreas: '"who actions" "track track"',
     rowGap: theme.spacing(1),
     py: theme.spacing(1.5),
@@ -130,15 +134,17 @@ export const rowSx: SxProps<Theme> = (theme: Theme) => ({
 
 export const whoSx: SxProps<Theme> = { gridArea: 'who', minWidth: 0 };
 
-export const actionsSx: SxProps<Theme> = {
+export const actionsSx: SxProps<Theme> = (theme: Theme) => ({
   gridArea: 'actions',
   display: 'flex',
   gap: 1,
   alignItems: 'center',
-  justifyContent: 'flex-end',
+  justifyContent: 'flex-start',
   flexWrap: 'wrap',
   minWidth: 0,
-};
+  pt: rem(theme, M.actionsTop),
+  [compact(theme)]: { justifyContent: 'flex-end', pt: 0 },
+});
 
 /** A break inside a block: a hatched band across its height, under its text. `span` is in % of the block. */
 export function breakSx(span: Span): SxProps<Theme> {
@@ -191,7 +197,36 @@ export interface Span {
   share: number;
 }
 
-export function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: boolean; movable: boolean }): SxProps<Theme> {
+/** How far a bar's hit band may reach, in % of the track: the midpoints to its neighbours, or the track's ends. */
+export interface HitBounds {
+  lo: number;
+  hi: number;
+}
+
+/**
+ * The hit band round a bar on a narrow ruler (FUT-3831): `hitArea` tall and
+ * at least `hitArea` wide, centred on the bar, then cut to `bounds` so it never
+ * reaches past the midpoint to a neighbour. Positioned in % of the bar's
+ * PADDING box (the pseudo-element's containing block, the bar less its
+ * border), so a point at `k` bar-widths from the bar's outer left edge is
+ * `k × (100% + 2 border) − border`; the px floor is the layout's to resolve.
+ */
+function hitBand(theme: Theme, span: Span, bounds: HitBounds): CSSObject {
+  // Every tone's border is the 1px hairline (`blockToneStyles`), the field border's width.
+  const border = `${FIELD_BORDER_WIDTH}px`;
+  const half = `max(calc(50% + ${border}), ${rem(theme, M.block.hitArea / 2)})`;
+  if (!(span.share > 0)) return { left: `calc(50% - ${half})`, width: `calc(2 * ${half})` };
+  const rel = (pct: number): string => `calc(${(pct - span.at) / span.share} * (100% + 2 * ${border}) - ${border})`;
+  const left = `max(${rel(bounds.lo)}, calc(50% - ${half}))`;
+  const right = `min(${rel(bounds.hi)}, calc(50% + ${half}))`;
+  return { left, width: `calc(${right} - ${left})` };
+}
+
+export function blockSx(
+  tone: ScheduleBlockTone,
+  span: Span,
+  opts: { selected: boolean; movable: boolean; hit: HitBounds },
+): SxProps<Theme> {
   return (theme: Theme): CSSObject => ({
     ...blockToneStyles(theme, tone, true),
     position: 'absolute',
@@ -214,25 +249,35 @@ export function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: b
     cursor: opts.movable ? 'grab' : 'pointer',
     boxShadow: opts.selected ? `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` : 'none',
     '&:focus-visible': { outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, M.ringOffset) },
-    '& [data-dr-text]': { position: 'relative', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },
+    // The label sits above the "agora" line (drawn under the blocks): on a fill
+    // that is not opaque it takes an opaque ground, so the line never cuts it.
+    '& [data-dr-text]': {
+      position: 'relative',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      minWidth: 0,
+      backgroundColor: dashedLabelGround(theme, tone),
+    },
     '& [data-dr-text="short"]': { display: 'none' },
+    // By pixels, at every width: the full text, else the start, else nothing — never a cut text.
+    '&[data-fit="short"] [data-dr-text="full"]': { display: 'none' },
+    '&[data-fit="short"] [data-dr-text="short"]': { display: 'inline' },
+    '&[data-fit="none"] [data-dr-text]': { display: 'none' },
     [compact(theme)]: {
       top: rem(theme, M.block.compactTop),
       height: rem(theme, M.block.compactHeight),
-      // A 40px hit area around the 20px bar, the look unchanged: the text cuts
-      // itself (its spans ellipsize), so the block need not clip.
+      // A 40px × 40px-or-wider hit area round the 20px bar, the look
+      // unchanged: the text never overflows (it fits or it is not shown), so
+      // the block need not clip.
       overflow: 'visible',
       '&::after': {
         content: '""',
         position: 'absolute',
-        left: 0,
-        right: 0,
         top: '50%',
         height: rem(theme, M.block.hitArea),
         transform: 'translateY(-50%)',
+        ...hitBand(theme, span, opts.hit),
       },
-      '&[data-narrow] [data-dr-text="full"]': { display: 'none' },
-      '&[data-narrow] [data-dr-text="short"]': { display: 'inline' },
     },
   });
 }
@@ -245,6 +290,10 @@ export function handleSx(side: 'l' | 'r'): SxProps<Theme> {
     [side === 'l' ? 'left' : 'right']: 0,
     width: rem(theme, M.handle),
     cursor: 'ew-resize',
+    // Above the block's hit band (its `::after`, painted last): on a narrow
+    // ruler the band covers the whole bar, and a press on an end must still
+    // resize rather than move (FUT-3831).
+    zIndex: 1,
   });
 }
 
@@ -275,6 +324,12 @@ export function actualLabelSx(left: number): SxProps<Theme> {
   });
 }
 
+/**
+ * "Agora": drawn UNDER the blocks (before them in the track), so it never
+ * crosses a block's label — "07:30–1|3:00" at 1280 (FUT-3831). It still shows
+ * above and below each bar, where it overhangs the track, and through a
+ * block's fill where that fill is not opaque — never through its text.
+ */
 export function nowSx(left: number): SxProps<Theme> {
   return (theme: Theme) => ({
     position: 'absolute',
@@ -301,52 +356,3 @@ export const skeletonNameSx: SxProps<Theme> = (theme: Theme) => ({
   borderRadius: rem(theme, M.skeletonNameRadius),
   backgroundColor: theme.palette.action.hover,
 });
-
-/**
- * A marked footer's words (FUT-3882): the warning ink deepened until it reads
- * at 4.5:1 on the page — `warning.main` is 3.1:1 on white. The outline keeps
- * `warning.main`: a non-text mark needs 3:1.
- */
-export function footerInk(theme: Theme, marked: boolean, plain: string): string {
-  return marked ? signalInk(theme, 'warning', theme.palette.background.default) : plain;
-}
-
-/** A group's count line (FUT-3882): plain counts on the hours' columns, a marked hour outlined in the warning ink. */
-export function footerCellSx(marked: boolean): SxProps<Theme> {
-  return (theme: Theme) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: rem(theme, M.coverage.font),
-    borderRadius: rem(theme, M.coverage.radius),
-    color: footerInk(theme, marked, theme.palette.text.primary),
-    fontWeight: marked ? 500 : 400,
-    // The hairline is always there, transparent when unmarked, so a mark never shifts a count.
-    border: `1px solid ${marked ? theme.palette.warning.main : 'transparent'}`,
-    minWidth: 0,
-    overflow: 'hidden',
-  });
-}
-
-/**
- * A footer line's sentence; when the host marks it ("Faltam 2, 20h–22h"), in
- * the readable warning ink with a warning bar before it — a shape, so colour
- * is never the only signal.
- */
-export function footerNoteSx(marked: boolean): SxProps<Theme> {
-  return (theme: Theme) => ({
-    fontSize: rem(theme, M.meta),
-    color: footerInk(theme, marked, theme.palette.text.secondary),
-    fontWeight: marked ? 500 : 400,
-    ...(marked ? { borderLeft: `${rem(theme, 3)} solid ${theme.palette.warning.main}`, paddingLeft: rem(theme, 6) } : {}),
-  });
-}
-
-/** A group's trend line: as tall as the coverage row, drawn in the primary colour. */
-export const trendSx: SxProps<Theme> = (theme: Theme) => ({
-  display: 'block',
-  width: '100%',
-  height: rem(theme, M.coverage.height + M.coverage.height / 2),
-  color: theme.palette.primary.main,
-  overflow: 'visible',
-});

package/src/components/data-display/DayRuler/DayRuler.tsx

@@ -9,7 +9,8 @@ import { useAnnouncer } from '../ScheduleGrid/useAnnouncer';
 import { handleBlockKey, keyCreateSpan, type RulerAbilities, type RulerScale } from './DayRuler.keyboard';
 import { EN_US_DAY_RULER_LABELS } from './DayRuler.en-US';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
-import { Axis, Coverage, GroupFooter, RulerRow, type RowContext } from './DayRuler.parts';
+import { GroupFooter } from './DayRuler.footer';
+import { Axis, Coverage, RulerRow, type RowContext } from './DayRuler.parts';
 import { groupTitleSx, rootSx, rowSx, skeletonNameSx, skeletonTrackSx } from './DayRuler.styles';
 import type { DayRulerProps, DayRulerRow } from './DayRuler.types';
 import { useRulerDrag } from './useRulerDrag';
@@ -119,7 +120,7 @@ export function DayRuler(props: DayRulerProps): React.JSX.Element {
 
   return (
     <Box
-      sx={rootSx(props.rows.some((row) => row.actions !== undefined && row.actions !== null))}
+      sx={rootSx}
       data-testid={testId}
       role="region"
       aria-label={props['aria-label']}

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

@@ -14,9 +14,14 @@ export interface DayRulerBlock {
   id: string;
   start: RulerHour;
   end: RulerHour;
-  /** What the block says ("↻ 20:39–00:00", "Ausente"). One line, cut with an ellipsis. */
+  /**
+   * What the block says ("↻ 20:39–00:00", "Ausente"). One line, drawn whole or
+   * not at all: a bar too short for it says `shortLabel`, and one too short
+   * even for that says nothing — never a cut text (FUT-3831). Either way it
+   * stays the block's tooltip (unless `title`) and its accessible name.
+   */
   label: string;
-  /** What a NARROW block says on a narrow ruler (a phone) instead of a cut label — its start ("20:39"). */
+  /** What a block too short for its `label` says instead, at any width — its start ("20:39"). */
   shortLabel?: string;
   tone: ScheduleBlockTone;
   /** Its middle can be dragged along the row (and Alt+←/→ moves it). */
@@ -53,7 +58,12 @@ export interface DayRulerRow {
   nameAdornment?: React.ReactNode;
   /** Under the meta: the host's chips (praça, "Em pausa desde …"). One line; a chip that does not fit shrinks, its label cut. */
   chips?: React.ReactNode;
-  /** The row's own buttons ("Encerrar turno", "Iniciar agora"), at the end of the row. */
+  /**
+   * The row's own buttons ("Encerrar turno", "Iniciar agora"): under the name
+   * on a computer, beside it when the row stacks. They take no column of their
+   * own, so every track keeps the same width and the hours stay aligned
+   * (FUT-3831).
+   */
   actions?: React.ReactNode;
   blocks: readonly DayRulerBlock[];
   actual?: DayRulerActual;

package/src/components/data-display/DayRuler/day-ruler-model.ts

@@ -81,3 +81,48 @@ export function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour
   for (let h = from; h <= to + 1e-9; h += step) out.push(h);
   return out;
 }
+
+/** A bar along the track: where it starts and how long it is, both in % of the track. */
+export interface TrackSpan {
+  at: number;
+  share: number;
+}
+
+/**
+ * How far each bar's hit band may reach, in % of the track (FUT-3831): from
+ * `lo` to `hi`, never past the track's ends and never past the MIDPOINT of
+ * the gap to the bar beside it, so a band widened round a short bar cannot
+ * take a tap meant for its neighbour. Two bars that touch or overlap give each
+ * other nothing: the band stays on the bar's own edge on that side.
+ *
+ * The band itself is drawn in CSS — at least the hit area wide, centred on the
+ * bar, then cut to `lo…hi` — because the bar's width in px is the layout's.
+ */
+export function hitBoundsOf(spans: readonly TrackSpan[]): { lo: number; hi: number }[] {
+  const order = spans.map((_, index) => index).sort((a, b) => spans[a]!.at - spans[b]!.at);
+  const out = spans.map(() => ({ lo: 0, hi: 100 }));
+  for (let k = 1; k < order.length; k += 1) {
+    const left = spans[order[k - 1]!]!;
+    const right = spans[order[k]!]!;
+    const leftEnd = left.at + left.share;
+    const mid = leftEnd <= right.at ? (leftEnd + right.at) / 2 : null;
+    out[order[k - 1]!]!.hi = Math.min(out[order[k - 1]!]!.hi, mid ?? leftEnd);
+    out[order[k]!]!.lo = Math.max(out[order[k]!]!.lo, mid ?? right.at);
+  }
+  return out;
+}
+
+/** What a block can say in its bar: its full text, its start, or nothing. */
+export type BlockTextFit = 'full' | 'short' | 'none';
+
+/**
+ * Which of a block's texts fits the room it leaves inside the bar, by pixels
+ * (FUT-3831): the full one, else the short one, else NOTHING — a cut "12:"
+ * says less than an empty bar whose title and accessible name carry the text.
+ */
+export function textFitOf(fullWidth: number, shortWidth: number, room: number): BlockTextFit {
+  const slack = 0.5;
+  if (fullWidth <= room + slack) return 'full';
+  if (shortWidth <= room + slack) return 'short';
+  return 'none';
+}

package/src/components/data-display/DayRuler/useTextFits.ts

@@ -1,41 +1,84 @@
 import type * as React from 'react';
 import { useLayoutEffect, useState } from 'react';
 
+import { textFitOf, type BlockTextFit } from './day-ruler-model';
+
+/** A text span's own width (its laid-out text, whatever the span's own box). */
+function textWidth(span: HTMLElement | null): number {
+  if (!span) return Number.POSITIVE_INFINITY;
+  const range = span.ownerDocument.createRange();
+  range.selectNodeContents(span);
+  return range.getBoundingClientRect().width;
+}
+
 /**
- * Whether a block's full text fits it, by pixels (FUT-3825): the full text's
- * own width against the room the block leaves it, re-read whenever the block
- * is resized. A wide block on a narrow ruler keeps "18:00–23:00"; only one too
- * short for it says its start.
+ * The block's fit, measured in ONE layout: every write first (both texts
+ * shown for the measurement alone), then every read, then the writes undone —
+ * so a ruler of many blocks forces one layout per block, not one per text.
+ * `null` when there is nothing to measure yet.
+ */
+function measureFit(el: HTMLElement): BlockTextFit | null {
+  const full = el.querySelector<HTMLElement>('[data-dr-text="full"]');
+  if (!full) return null;
+  const short = el.querySelector<HTMLElement>('[data-dr-text="short"]');
+  const spans = [full, short].filter((span): span is HTMLElement => span !== null);
+  const shown = spans.map((span) => span.style.display);
+  for (const span of spans) span.style.display = 'inline';
+  const fullWidth = textWidth(full);
+  const shortWidth = textWidth(short);
+  const style = getComputedStyle(el);
+  const outer = el.clientWidth;
+  const room = outer - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+  spans.forEach((span, index) => {
+    span.style.display = shown[index] ?? '';
+  });
+  if (room > 0) return textFitOf(fullWidth, shortWidth, room);
+  // A bar with no room at all (narrower than its own padding) says nothing.
+  return outer > 0 ? 'none' : null;
+}
+
+/**
+ * Which of a block's texts fits it, by pixels (FUT-3825, FUT-3831): the full
+ * text's and the short text's own widths against the room the block leaves
+ * them. A wide block keeps "18:00–23:00"; one too short for it says its start
+ * ("18:00"); one too short even for that says nothing — never a cut "18:".
  *
- * The full text is measured with its span shown for the measurement alone
- * (synchronously, so nothing is painted), even while the short text stands in
- * for it. Where nothing can be measured (no `ResizeObserver`) it answers
- * `fallback`.
+ * Measured at once (synchronously, so nothing is painted), then again on the
+ * next frame whenever the block is resized, and once more when the page's
+ * fonts have loaded: a webfont arriving late changes every text's width, and
+ * a fit read in the fallback font would leave a label cut. Where nothing can
+ * be measured (no `ResizeObserver`) it answers `fallback`.
  */
-export function useTextFits(block: React.RefObject<HTMLElement | null>, text: string, fallback: boolean): boolean {
-  const [fits, setFits] = useState(fallback);
+export function useTextFit(block: React.RefObject<HTMLElement | null>, text: string, short: string, fallback: BlockTextFit): BlockTextFit {
+  const [fit, setFit] = useState<BlockTextFit>(fallback);
 
   useLayoutEffect(() => {
     const el = block.current;
     if (!el || typeof ResizeObserver === 'undefined') return undefined;
+    let live = true;
+    let frame = 0;
     const measure = (): void => {
-      const full = el.querySelector<HTMLElement>('[data-dr-text="full"]');
-      if (!full) return;
-      const shown = full.style.display;
-      full.style.display = 'inline';
-      const range = el.ownerDocument.createRange();
-      range.selectNodeContents(full);
-      const width = range.getBoundingClientRect().width;
-      full.style.display = shown;
-      const style = getComputedStyle(el);
-      const room = el.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
-      if (room > 0) setFits(width <= room + 0.5);
+      frame = 0;
+      if (!live) return;
+      const next = measureFit(el);
+      if (next) setFit(next);
+    };
+    // Resizes and the fonts come in bursts: one measurement per frame.
+    const schedule = (): void => {
+      if (frame || !live) return;
+      frame = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(measure) : 0;
+      if (!frame) measure();
     };
     measure();
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(schedule);
     observer.observe(el);
-    return () => observer.disconnect();
-  }, [block, text]);
+    el.ownerDocument.fonts?.ready.then(schedule, () => undefined);
+    return () => {
+      live = false;
+      observer.disconnect();
+      if (frame && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(frame);
+    };
+  }, [block, text, short]);
 
-  return fits;
+  return fit;
 }

package/src/components/data-display/ErrorState/ErrorState.metrics.ts

@@ -27,6 +27,11 @@ export const ERROR_MESSAGE_LINE_HEIGHT = 1.6;
 /** The retry button: 8px below the text, no narrower than 120px. */
 export const RETRY_MARGIN_TOP_UNITS = 1;
 export const RETRY_MIN_WIDTH = 120;
+/**
+ * The web retry is never shorter than the 40px tap floor. MUI's medium outlined
+ * button is 37px tall on its own (FUT-1310), so the floor is stated, not inherited.
+ */
+export const RETRY_MIN_HEIGHT = 40;
 /**
  * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px
  * border, 14px type, the theme's radius, a 20px start icon. The native side

package/src/components/data-display/ErrorState/ErrorState.tsx

@@ -20,6 +20,7 @@ import {
   ERROR_STATE_PADDING_UNITS,
   ERROR_TEXT_GAP_UNITS,
   RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_HEIGHT,
   RETRY_MIN_WIDTH,
 } from './ErrorState.metrics';
 import type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';
@@ -153,6 +154,7 @@ export const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {
           sx={{
             mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
             minWidth: rem(theme, RETRY_MIN_WIDTH),
+            minHeight: rem(theme, RETRY_MIN_HEIGHT),
           }}
         >
           {retryLabel}

package/src/components/data-display/ScheduleGrid/schedule-tones.ts

@@ -108,6 +108,19 @@ export function blockToneStyles(theme: Theme, tone: ScheduleBlockTone, dashedPla
   }
 }
 
+/**
+ * An OPAQUE ground for a ruler block's label where the block's own fill is
+ * not opaque (the dashed plan's faint wash, the away / uncovered outline): the
+ * fill flattened over the cell's ground, so the label reads the same and
+ * whatever the track draws under the block — the "agora" line — never shows
+ * through the text (FUT-3831). An opaque fill needs none: `undefined`.
+ */
+export function dashedLabelGround(theme: Theme, tone: ScheduleBlockTone): string | undefined {
+  if (tone === 'away' || tone === 'uncovered') return cellGround(theme);
+  if (tone === 'plan') return flatten(cellGround(theme), theme.palette.action.hover);
+  return undefined;
+}
+
 /**
  * A break inside a block (a meal break): the page's own ground with diagonal
  * stripes of the disabled action colour, opaque, so the block reads as CUT there in any

package/src/components/feedback/ConfirmAction/ConfirmAction.md

@@ -29,6 +29,16 @@ Whichever of the three entry points you use, you get the same contract:
 - **The popup names the thing.** `entityName` is echoed into the body, so it
   reads "Bebidas", not "este item".
 
+## On a phone
+
+The popup is an `AlertDialog`, so it takes that dialog's narrow layout
+(FUT-3831): given less than 480px — a container query, never a media query —
+the icon moves above the title so the question has the paper's whole width, and
+the buttons stack each across the row, **the verb on top and Cancel at the
+bottom**, the library's stacked order (`components-guidelines.md`, "Stacked
+buttons"). The keyboard contract is unchanged: a destructive popup still opens
+with focus on Cancel, and Cancel is still the first button to tab to.
+
 ## Three entry points
 
 ### `withConfirmation(Component, defaults?)` — the HOC

package/dist/chunk-6HPVCDVU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type * as React from 'react';\nimport { useRef } from 'react';\n\nimport { ScheduleNameCell } from '../ScheduleGrid/ScheduleNameCell';\nimport type { RulerAbilities, RulerScale } from './DayRuler.keyboard';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\nimport { useTextFits } from './useTextFits';\nimport { formatHour, formatRange, percentOf, ticksOf } from './day-ruler-model';\nimport { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';\nimport {\n  actionsSx,\n  actualLabelSx,\n  actualSx,\n  axisSx,\n  blockSx,\n  breakSx,\n  coverageCellSx,\n  coverageLabelSx,\n  coverageSx,\n  footerCellSx,\n  footerNoteSx,\n  handleSx,\n  lineSx,\n  nowSx,\n  rowSx,\n  trackSx,\n  trendSx,\n  whoSx,\n  type Span,\n} from './DayRuler.styles';\nimport type { DayRulerBlock, DayRulerFooterCell, DayRulerFooterRow, DayRulerRow, RulerHour } from './DayRuler.types';\nimport type { RulerDrag, RulerDragApi } from './useRulerDrag';\n\nexport const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {\n  const at = percentOf(start, scale.from, scale.to);\n  return { at, share: Math.max(0, percentOf(end, scale.from, scale.to) - at) };\n};\n\n/** What every row of one ruler shares. */\nexport interface RowContext {\n  scale: RulerScale;\n  now?: RulerHour;\n  can: RulerAbilities;\n  drag: RulerDrag | null;\n  dragApi: RulerDragApi;\n  onBlockClick?: (blockId: string) => void;\n  onKeyCreate: (row: DayRulerRow) => void;\n  onBlockKey: (event: React.KeyboardEvent, block: DayRulerBlock) => void;\n  createLabel: (row: string) => string;\n  testId: string;\n}\n\n/** The keys a block answers to, for `aria-keyshortcuts`. */\nfunction shortcutsOf(movable: boolean, resizable: boolean): string | undefined {\n  const keys = [\n    movable ? 'Alt+ArrowLeft Alt+ArrowRight' : '',\n    resizable ? 'Shift+ArrowLeft Shift+ArrowRight Shift+Alt+ArrowLeft Shift+Alt+ArrowRight' : '',\n  ];\n  return keys.filter(Boolean).join(' ') || undefined;\n}\n\nfunction Handle({ side, onPointerDown, testId }: { side: 'l' | 'r'; onPointerDown: (event: React.PointerEvent<HTMLElement>) => void; testId: string }) {\n  return <Box component=\"span\" aria-hidden sx={handleSx(side)} data-testid={testId} onPointerDown={onPointerDown} />;\n}\n\ninterface BlockProps {\n  row: DayRulerRow;\n  block: DayRulerBlock;\n  /** Where it is drawn: its own hours, or where a drag has it now. */\n  span: Span;\n  /** The hours it is drawn at (its own, or a drag's). */\n  at: { start: RulerHour; end: RulerHour };\n  text: string;\n  ctx: RowContext;\n  testId: string;\n}\n\n/**\n * The block's break, where it falls inside the block as drawn: it moves with a\n * dragged block (same offset from its start) and is cut to the block's ends.\n */\nfunction breakShare(block: DayRulerBlock, start: RulerHour, end: RulerHour): Span | null {\n  const span = block.breakSpan;\n  const length = end - start;\n  if (!span || !(length > 0)) return null;\n  const shift = Math.abs(length - (block.end - block.start)) < 1e-6 ? start - block.start : 0;\n  const a = Math.max(start, span.start + shift);\n  const b = Math.min(end, span.end + shift);\n  if (!(b > a)) return null;\n  return { at: ((a - start) / length) * 100, share: ((b - a) / length) * 100 };\n}\n\n/** The block's break as a hatched band, when it falls inside the block as drawn. */\nfunction BreakBand({ block, at, testId }: { block: DayRulerBlock; at: BlockProps['at']; testId: string }): React.JSX.Element | null {\n  const gap = breakShare(block, at.start, at.end);\n  if (!gap) return null;\n  return <Box component=\"span\" aria-hidden sx={breakSx(gap)} data-dr-break=\"\" data-testid={testId} />;\n}\n\nfunction RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): React.JSX.Element {\n  const { can, dragApi, scale } = ctx;\n  const movable = can.move && Boolean(block.movable);\n  const resizable = can.resize && Boolean(block.resizable);\n  const ref = useRef<HTMLButtonElement | null>(null);\n  // Short by pixels; where nothing can be measured, by the prototype's 30% rule.\n  const fits = useTextFits(ref, text, (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare);\n  const press = (mode: 'move' | 'start' | 'end') => (event: React.PointerEvent<HTMLElement>) =>\n    dragApi.startBlock(event, row.id, block, mode);\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable })}\n      title={block.title ?? block.label}\n      aria-keyshortcuts={shortcutsOf(movable, resizable)}\n      aria-current={block.selected ? 'true' : undefined}\n      ref={ref}\n      data-narrow={fits ? undefined : ''}\n      data-tone={block.tone}\n      data-testid={testId}\n      onPointerDown={movable ? press('move') : undefined}\n      onClick={() => {\n        if (!dragApi.takeClick()) ctx.onBlockClick?.(block.id);\n      }}\n      onKeyDown={(event: React.KeyboardEvent) => ctx.onBlockKey(event, block)}\n    >\n      <BreakBand block={block} at={at} testId={`${ctx.testId}-break-${block.id}`} />\n      {resizable ? <Handle side=\"l\" onPointerDown={press('start')} testId={`${ctx.testId}-handle-l-${block.id}`} /> : null}\n      <span data-dr-text=\"full\" title={text}>\n        {text}\n      </span>\n      <span data-dr-text=\"short\" title={text}>\n        {block.shortLabel ?? text}\n      </span>\n      {resizable ? <Handle side=\"r\" onPointerDown={press('end')} testId={`${ctx.testId}-handle-r-${block.id}`} /> : null}\n    </Box>\n  );\n}\n\n/** A row's blocks, each where a drag has it now (with its live hours) or where it is. */\nfunction Blocks({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n  const mine = ctx.drag && ctx.drag.rowId === row.id ? ctx.drag : null;\n  return (\n    <>\n      {row.blocks.map((block) => {\n        const live = mine?.blockId === block.id ? mine : null;\n        const start = live ? live.start : block.start;\n        const end = live ? live.end : block.end;\n        return (\n          <RulerBlock\n            key={block.id}\n            row={row}\n            block={block}\n            span={spanOf(start, end, ctx.scale)}\n            at={{ start, end }}\n            text={live?.moved ? formatRange(start, end) : block.label}\n            ctx={ctx}\n            testId={`${ctx.testId}-block-${block.id}`}\n          />\n        );\n      })}\n      {mine && mine.mode === 'create' ? <CreatePreview row={row} drag={mine} ctx={ctx} /> : null}\n    </>\n  );\n}\n\n/** The block a create drag is drawing, with its live hours. */\nfunction CreatePreview({ row, drag, ctx }: { row: DayRulerRow; drag: RulerDrag; ctx: RowContext }): React.JSX.Element {\n  const range = formatRange(drag.start, drag.end);\n  return (\n    <RulerBlock\n      row={row}\n      block={{ id: '\\u0000new', start: drag.start, end: drag.end, label: range, tone: 'plan' }}\n      span={spanOf(drag.start, Math.max(drag.end, drag.start + ctx.scale.snap), ctx.scale)}\n      at={{ start: drag.start, end: drag.end }}\n      text={range}\n      ctx={ctx}\n      testId={`${ctx.testId}-preview`}\n    />\n  );\n}\n\n/** The real shift under the blocks, and its label at its start. */\nfunction Actual({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element | null {\n  const { actual } = row;\n  if (!actual) return null;\n  return (\n    <>\n      <Box sx={actualSx(spanOf(actual.start, actual.end, ctx.scale))} data-testid={`${ctx.testId}-actual-${row.id}`} />\n      {row.actualLabel ? (\n        <Box component=\"span\" sx={actualLabelSx(percentOf(actual.start, ctx.scale.from, ctx.scale.to))}>\n          {row.actualLabel}\n        </Box>\n      ) : null}\n    </>\n  );\n}\n\n/** A row's track: the actual bar, its blocks (or the one being dragged, live) and the now line. */\nfunction Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n  const { scale, now, can, dragApi } = ctx;\n  const showNow = now !== undefined && now >= scale.from && now <= scale.to;\n  return (\n    <Box\n      sx={trackSx({ hours: scale.to - scale.from, tickHours: scale.tickHours, interactive: can.create })}\n      data-dr-track=\"\"\n      data-testid={`${ctx.testId}-track-${row.id}`}\n      role={can.create ? 'group' : undefined}\n      tabIndex={can.create ? 0 : undefined}\n      aria-label={can.create ? ctx.createLabel(row.label) : undefined}\n      onPointerDown={can.create ? (event: React.PointerEvent<HTMLElement>) => dragApi.startCreate(event, row.id) : undefined}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (!can.create || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n        event.preventDefault();\n        ctx.onKeyCreate(row);\n      }}\n    >\n      <Actual row={row} ctx={ctx} />\n      <Blocks row={row} ctx={ctx} />\n      {showNow ? <Box sx={nowSx(percentOf(now, scale.from, scale.to))} data-testid={`${ctx.testId}-now`} /> : null}\n    </Box>\n  );\n}\n\n/** One person: name, meta and chips · the track · the row's actions. */\nexport function RulerRow({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n  return (\n    <Box sx={rowSx} data-testid={`${ctx.testId}-row-${row.id}`} role=\"listitem\">\n      <ScheduleNameCell row={row} sx={whoSx} sizes={{ name: M.name, meta: M.meta, chipsTop: 0.75 }} />\n      <Track row={row} ctx={ctx} />\n      <Box sx={actionsSx}>{row.actions}</Box>\n    </Box>\n  );\n}\n\n/** \"Na escala, por hora\": a count per hour above the axis. */\nexport function Coverage(props: { coverage: readonly number[]; label?: string; scale: RulerScale; testId: string }): React.JSX.Element {\n  const { coverage, label, scale, testId } = props;\n  const hours = scale.to - scale.from;\n  return (\n    <Box sx={lineSx} data-testid={`${testId}-coverage`}>\n      <Box component=\"span\" sx={coverageLabelSx}>\n        {label}\n      </Box>\n      <Box sx={coverageSx(hours)}>\n        {Array.from({ length: hours }, (_, index) => {\n          const count = coverage[index] ?? 0;\n          return (\n            <Box key={index} component=\"span\" sx={coverageCellSx(count)} title={`${formatHour(scale.from + index)} · ${count}`}>\n              {count > 0 ? count : ''}\n            </Box>\n          );\n        })}\n      </Box>\n      <span />\n    </Box>\n  );\n}\n\n/** The points of a trend over the hours' centres, in a 100 × 40 box: the highest value near the top, `null` breaks nothing (it is skipped). */\nexport function trendPoints(values: readonly (number | null)[], hours: number): string {\n  const present = values.slice(0, hours).filter((value): value is number => value !== null);\n  const max = Math.max(0, ...present);\n  return values\n    .slice(0, hours)\n    .flatMap((value, index) => {\n      if (value === null) return [];\n      const x = ((index + 0.5) * 100) / hours;\n      const y = max > 0 ? 38 - (value / max) * 34 : 38;\n      return [`${x.toFixed(2)},${y.toFixed(2)}`];\n    })\n    .join(' ');\n}\n\n/** One hour's default words: \"20:00 · 4\"; just the hour when it says nothing. */\nconst hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));\n\n/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */\nfunction markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {\n  return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;\n}\n\ninterface FooterContext {\n  hours: number;\n  from: RulerHour;\n  /** `labels.footerMarked`. */\n  marked: string;\n}\n\nfunction FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {\n  return (\n    <Box sx={coverageSx(ctx.hours)}>\n      {Array.from({ length: ctx.hours }, (_, index) => {\n        const cell = cells[index] ?? { text: '' };\n        const hour = ctx.from + index;\n        return (\n          <Box\n            key={index}\n            component=\"span\"\n            sx={footerCellSx(Boolean(cell.marked))}\n            title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}\n            data-marked={cell.marked ? '' : undefined}\n          >\n            {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}\n            {cell.marked ? (\n              <>\n                <span aria-hidden>{cell.text}</span>\n                <Box component=\"span\" sx={SR_ONLY_SX}>\n                  {markedWords(cell, hour, ctx.marked)}\n                </Box>\n              </>\n            ) : (\n              cell.text\n            )}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n/** A trend's figures in words, for the reader the drawn line does not reach: \"11:00 4 · 12:00 6\". */\nfunction trendWords(values: readonly (number | null)[], ctx: FooterContext): string {\n  return values\n    .slice(0, ctx.hours)\n    .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))\n    .join(' · ');\n}\n\nfunction FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {\n  if (row.trend) {\n    return (\n      <Box component=\"span\" sx={{ display: 'block', minWidth: 0 }}>\n        <Box component=\"svg\" viewBox=\"0 0 100 40\" preserveAspectRatio=\"none\" sx={trendSx} aria-hidden>\n          <polyline fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} vectorEffect=\"non-scaling-stroke\" points={trendPoints(row.trend, ctx.hours)} />\n        </Box>\n        <Box component=\"span\" sx={SR_ONLY_SX}>\n          {trendWords(row.trend, ctx)}\n        </Box>\n      </Box>\n    );\n  }\n  if (row.note !== undefined) {\n    return (\n      <Box component=\"span\" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>\n        {row.note}\n      </Box>\n    );\n  }\n  return <FooterCells cells={row.cells ?? []} ctx={ctx} />;\n}\n\n/**\n * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a\n * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.\n */\nexport function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {\n  const { rows, scale, testId } = props;\n  const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };\n  return (\n    <>\n      {rows.map((row) => (\n        <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>\n          <Box component=\"span\" sx={coverageLabelSx}>\n            {row.label}\n          </Box>\n          <FooterFigures row={row} ctx={ctx} />\n          <span />\n        </Box>\n      ))}\n    </>\n  );\n}\n\n/** The hour labels under the coverage row. */\nexport function Axis({ scale, testId }: { scale: RulerScale; testId: string }): React.JSX.Element {\n  return (\n    <Box sx={lineSx} data-testid={`${testId}-axis`} aria-hidden>\n      <span />\n      <Box sx={axisSx}>\n        {ticksOf(scale.from, scale.to, scale.tickHours).map((h) => (\n          <span key={h} style={{ left: `${percentOf(h, scale.from, scale.to)}%` }}>\n            {formatHour(h)}\n          </span>\n        ))}\n      </Box>\n      <span />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-7ZQ3KQ7J.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.metrics.ts"],"sourcesContent":["/**\n * THE DAY RULER'S NUMBERS — the approved prototype's (FUT-3823, frames d02 at\n * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.\n */\nexport const DAY_RULER_METRICS = {\n  /** The name and the actions columns on a computer. */\n  sideColumn: 220,\n  gap: 16,\n  /**\n   * Below this container width a row stacks: name and actions on top, the\n   * track under them. Two 220px side columns, their gaps and a track of at\n   * least 320px (where the hour labels every 4 hours do not collide): 792,\n   * rounded up.\n   */\n  compactBelow: 800,\n  /**\n   * Below this container width the pane is phone-sized: no coverage row and\n   * no hour axis. Between it and `compactBelow` the rows stack and the two\n   * lines are drawn across the full width, like the tracks.\n   */\n  phoneBelow: 600,\n  rowPaddingY: 8,\n  track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },\n  block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },\n  /** The end handles' hit area. */\n  handle: 10,\n  actual: { top: 31, height: 6, compactTop: 24, compactHeight: 4, radius: 3 },\n  actualLabel: { top: 8, offset: 6, font: 12 },\n  now: { width: 2, overhang: 2 },\n  coverage: { height: 26, gap: 2, radius: 4, font: 12 },\n  axis: { height: 18, font: 12 },\n  name: 15,\n  meta: 13,\n  groupTitle: 12,\n  ring: 2,\n  /** How far a block's focus ring stands off it. */\n  ringOffset: 1,\n  /** The loading row's name bar. */\n  skeletonNameRadius: 4,\n  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */\n  narrowShare: 0.3,\n  /** The shortest block a resize leaves, in hours. */\n  minHours: 0.5,\n  skeletonRows: 4,\n  /** The hatch of a break inside a block: stripe width. */\n  breakStripe: { ink: 2, gap: 3 },\n} as const;\n"],"mappings":";AAIO,IAAM,oBAAoB;AAAA;AAAA,EAE/B,YAAY;AAAA,EACZ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOL,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO,EAAE,QAAQ,IAAI,eAAe,IAAI,QAAQ,GAAG,eAAe,EAAE;AAAA,EACpE,OAAO,EAAE,KAAK,GAAG,QAAQ,IAAI,YAAY,GAAG,eAAe,IAAI,QAAQ,GAAG,UAAU,GAAG,MAAM,IAAI,SAAS,GAAG;AAAA;AAAA,EAE7G,QAAQ;AAAA,EACR,QAAQ,EAAE,KAAK,IAAI,QAAQ,GAAG,YAAY,IAAI,eAAe,GAAG,QAAQ,EAAE;AAAA,EAC1E,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EAC3C,KAAK,EAAE,OAAO,GAAG,UAAU,EAAE;AAAA,EAC7B,UAAU,EAAE,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EACpD,MAAM,EAAE,QAAQ,IAAI,MAAM,GAAG;AAAA,EAC7B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA;AAAA,EAEpB,aAAa;AAAA;AAAA,EAEb,UAAU;AAAA,EACV,cAAc;AAAA;AAAA,EAEd,aAAa,EAAE,KAAK,GAAG,KAAK,EAAE;AAChC;","names":[]}

package/dist/chunk-COK65GX2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.parts.tsx"],"sourcesContent":["/**\n * The AlertDialog's action row, kept apart from the dialog shell so each stays\n * inside the complexity budget: which button is filled, where each one sits,\n * and how the row wraps.\n */\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nimport type { AlertDialogProps } from './AlertDialog.types';\n\n/**\n * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair\n * that did not fit side by side used to squeeze the longer label onto two\n * lines, so one button stood twice as tall as its neighbour. Now the row breaks\n * instead. `wrap-reverse` puts the LAST button — the primary, whichever\n * `emphasis` picks — on top when it stacks, the same slot it holds on the right\n * when the row fits. A pair that fits is laid out exactly as before: natural\n * widths, pushed to the right.\n *\n * `fill` — set only by `emphasis=\"cancel\"` — lets the buttons grow to share the\n * row, and so to take the full width of their line once it stacks. It is not\n * the default because growing also stretches a pair that fits, which would\n * redraw every existing dialog's footer.\n *\n * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every\n * button after the first, which would indent a button that wrapped onto a line\n * of its own. The gaps below replace it, at the same 16px across.\n */\nconst StyledDialogActions = styled(DialogActions, {\n  shouldForwardProp: (prop) => prop !== 'fill',\n})<{ fill: boolean }>(({ theme, fill }) => ({\n  padding: theme.spacing(2, 3, 3, 3),\n  flexWrap: 'wrap-reverse',\n  columnGap: theme.spacing(2),\n  rowGap: theme.spacing(1),\n  // A 40px tap target, the floor the kit's own Button keeps (FUT-3269): MUI's\n  // medium button is 37px, short of it on a phone.\n  '& > .MuiButton-root': { minHeight: rem(theme, 40) },\n  ...(fill && { '& > .MuiButton-root': { flexGrow: 1, minHeight: rem(theme, 40) } }),\n}));\n\nconst confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>\n  variant === 'destructive' ? 'error' : 'primary';\n\ninterface ButtonLook {\n  variant: ButtonProps['variant'];\n  color: ButtonProps['color'];\n}\n\n/**\n * How each button is drawn, by `emphasis`: the emphasised one is filled, the\n * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that\n * steps down drops the variant's colour too, so the one filled button is the\n * only coloured thing in the row and the eye has a single place to land.\n */\nconst buttonLooks = (\n  emphasis: AlertDialogProps['emphasis'],\n  variant: AlertDialogProps['variant'],\n): { cancel: ButtonLook; confirm: ButtonLook } =>\n  emphasis === 'cancel'\n    ? {\n        cancel: { variant: 'contained', color: 'primary' },\n        confirm: { variant: 'outlined', color: 'inherit' },\n      }\n    : {\n        cancel: { variant: 'outlined', color: 'inherit' },\n        confirm: { variant: 'contained', color: confirmButtonColor(variant) },\n      };\n\n/**\n * The emphasis that applies: `cancel` only while the cancel is shown. A hidden\n * cancel with the confirm stepped down would leave a dialog with no primary.\n */\nconst effectiveEmphasis = (\n  emphasis: AlertDialogProps['emphasis'],\n  showCancel: boolean,\n): NonNullable<AlertDialogProps['emphasis']> =>\n  emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';\n\n/**\n * Whether the cancel owns focus on open: what `initialFocus` says, and when it\n * says nothing, the emphasised button — so Enter on a steered question keeps\n * the work instead of completing the loss.\n */\nconst focusesCancel = (\n  initialFocus: AlertDialogProps['initialFocus'],\n  emphasis: NonNullable<AlertDialogProps['emphasis']>,\n): boolean => (initialFocus ?? emphasis) === 'cancel';\n\n/** The two buttons in slot order: the emphasised one LAST, the primary slot. */\nconst inSlotOrder = (\n  emphasis: AlertDialogProps['emphasis'],\n  cancel: React.ReactNode,\n  confirm: React.ReactNode,\n): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);\n\n/**\n * Action row: the optional cancel button and the (variant-coloured) confirm,\n * with the emphasised one LAST — the primary slot, on the right or, once the\n * row stacks, on top. DOM order is the tab order, so it follows the same rule.\n */\nexport function AlertDialogFooter({\n  variant,\n  cancelText = EN_US_UI_LABELS.alertDialog.cancel,\n  confirmText = EN_US_UI_LABELS.alertDialog.confirm,\n  showCancel = true,\n  loading = false,\n  confirmDisabled = false,\n  initialFocus,\n  emphasis: asked,\n  onCancel,\n  onConfirm,\n  dataTestId,\n}: Pick<\n  AlertDialogProps,\n  | 'variant'\n  | 'cancelText'\n  | 'confirmText'\n  | 'showCancel'\n  | 'loading'\n  | 'confirmDisabled'\n  | 'initialFocus'\n  | 'emphasis'\n> & {\n  onCancel: () => void;\n  onConfirm: () => void;\n  dataTestId: string;\n}): React.ReactElement {\n  const theme = useTheme();\n  const emphasis = effectiveEmphasis(asked, showCancel);\n  const look = buttonLooks(emphasis, variant);\n  const cancelFocused = focusesCancel(initialFocus, emphasis);\n  const cancel = showCancel && (\n    <Button\n      key=\"cancel\"\n      onClick={onCancel}\n      variant={look.cancel.variant}\n      color={look.cancel.color}\n      disabled={loading}\n      autoFocus={cancelFocused}\n      data-testid={`${dataTestId}-cancel-button`}\n    >\n      {cancelText}\n    </Button>\n  );\n  const confirm = (\n    <Button\n      key=\"confirm\"\n      onClick={onConfirm}\n      variant={look.confirm.variant}\n      color={look.confirm.color}\n      disabled={confirmDisabled || loading}\n      startIcon={\n        loading ? (\n          <CircularProgress\n            size={rem(theme, 16)}\n            color=\"inherit\"\n            data-testid={`${dataTestId}-loading-spinner`}\n          />\n        ) : undefined\n      }\n      autoFocus={!cancelFocused}\n      data-testid={`${dataTestId}-confirm-button`}\n    >\n      {confirmText}\n    </Button>\n  );\n  return (\n    <StyledDialogActions\n      disableSpacing\n      fill={emphasis === 'cancel'}\n      data-testid={`${dataTestId}-actions`}\n    >\n      {inSlotOrder(emphasis, cancel, confirm)}\n    </StyledDialogActions>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,SAAS,QAAQ,gBAAgB;AAmI7B;AAzGJ,IAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAqB,CAAC,EAAE,OAAO,KAAK,OAAO;AAAA,EAC1C,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,QAAQ,MAAM,QAAQ,CAAC;AAAA;AAAA;AAAA,EAGvB,uBAAuB,EAAE,WAAW,IAAI,OAAO,EAAE,EAAE;AAAA,EACnD,GAAI,QAAQ,EAAE,uBAAuB,EAAE,UAAU,GAAG,WAAW,IAAI,OAAO,EAAE,EAAE,EAAE;AAClF,EAAE;AAEF,IAAM,qBAAqB,CAAC,YAC1B,YAAY,gBAAgB,UAAU;AAaxC,IAAM,cAAc,CAClB,UACA,YAEA,aAAa,WACT;AAAA,EACE,QAAQ,EAAE,SAAS,aAAa,OAAO,UAAU;AAAA,EACjD,SAAS,EAAE,SAAS,YAAY,OAAO,UAAU;AACnD,IACA;AAAA,EACE,QAAQ,EAAE,SAAS,YAAY,OAAO,UAAU;AAAA,EAChD,SAAS,EAAE,SAAS,aAAa,OAAO,mBAAmB,OAAO,EAAE;AACtE;AAMN,IAAM,oBAAoB,CACxB,UACA,eAEA,aAAa,YAAY,aAAa,WAAW;AAOnD,IAAM,gBAAgB,CACpB,cACA,cACa,gBAAgB,cAAc;AAG7C,IAAM,cAAc,CAClB,UACA,QACA,YACuB,aAAa,WAAW,CAAC,SAAS,MAAM,IAAI,CAAC,QAAQ,OAAO;AAO9E,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,aAAa,gBAAgB,YAAY;AAAA,EACzC,cAAc,gBAAgB,YAAY;AAAA,EAC1C,aAAa;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAcuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,kBAAkB,OAAO,UAAU;AACpD,QAAM,OAAO,YAAY,UAAU,OAAO;AAC1C,QAAM,gBAAgB,cAAc,cAAc,QAAQ;AAC1D,QAAM,SAAS,cACb;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK,OAAO;AAAA,MACnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IARG;AAAA,EASN;AAEF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,QAAQ;AAAA,MACtB,OAAO,KAAK,QAAQ;AAAA,MACpB,UAAU,mBAAmB;AAAA,MAC7B,WACE,UACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI,OAAO,EAAE;AAAA,UACnB,OAAM;AAAA,UACN,eAAa,GAAG,UAAU;AAAA;AAAA,MAC5B,IACE;AAAA,MAEN,WAAW,CAAC;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IAjBG;AAAA,EAkBN;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,MAAM,aAAa;AAAA,MACnB,eAAa,GAAG,UAAU;AAAA,MAEzB,sBAAY,UAAU,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEJ;","names":[]}