@12-apps/ui 6.91.0 → 6.92.1

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

@@ -47,6 +47,7 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 | `now` | `number?` | The "agora" line, when on the ruler. |
 | `coverage` | `number[]?` | People per hour, index 0 = `from…from+1`. |
 | `coverageLabel` | `string?` | Beside the counts ("Na escala, por hora"). |
+| `groupFooter` | `(group) => DayRulerFooterRow[]?` | Lines under a group's rows, on the tracks' columns (FUT-3882), for the group titled `group` (`undefined` for rows with no group). A row is `{ id, label, cells }` — one `{ text, marked?, title? }` per hour from `from`, a `marked` hour drawn in the warning ink (deepened to read at 4.5:1 on the page) inside a `warning.main` outline ("O movimento pede", an hour short of people). A marked hour's `title` is also said as visually hidden text; without one, it reads "20:00 · 2 · " + `labels.footerMarked`. An unmarked hour's default title is "20:00 · 2", or just the hour when it says nothing — or `{ id, label, trend }`, one value (or `null`) per hour drawn as a line in the primary colour, the highest near the top ("Média de pedidos/hora"; the drawing is `aria-hidden` and its figures are said as visually hidden text, "11:00 4 · 12:00 6"). A row `{ id, label, note, marked? }` says a sentence across the track instead ("Pouco histórico: menos de 4 semanas com pedidos na cozinha."); `marked` draws it in the readable warning ink behind a warning bar (a shape, not colour alone) and flags it `data-marked` ("Faltam 2, 20h–22h"). Not drawn in a phone-sized pane, like the coverage row. Called for every group on each render: keep it cheap (derive the rows once, outside, and look them up). A host drawing these usually leaves out `coverage`: the same counts would show twice. |
 | `tickHours` | `number` (default 4) | An axis label every this many hours (HH:MM). |
 | `snapMinutes` | `number` (default 15) | |
 | `createHours` | `number` (default 4) | What a click alone creates. |
@@ -55,8 +56,8 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 | `onCreate` / `onMove` / `onResize` / `onBlockClick` | see Gestures | Each is offered only when its handler is given. |
 | `loading` / `error` / `empty` | `boolean` / node / node | Skeleton rows with `aria-busy`; the host's error; the host's empty sentence. |
 | `aria-label` | `string?` | The region's name. |
-| `labels` | `Partial<DayRulerLabels>` | `createTrack(row)`, `moved(block, range)`, `resized(block, range)`, `refused`, `loading`. Default: the English pack; pt-BR: `DAY_RULER_LABELS['pt-BR']` from `@12-apps/ui/data-display/DayRuler`. |
-| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-row-${rowId}`, `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
+| `labels` | `Partial<DayRulerLabels>` | `createTrack(row)`, `moved(block, range)`, `resized(block, range)`, `refused`, `loading`, `footerMarked`. Default: the English pack; pt-BR: `DAY_RULER_LABELS['pt-BR']` from `@12-apps/ui/data-display/DayRuler`. |
+| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`, `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
 
 Tones are `ScheduleGrid`'s; on the ruler a `plan` block is a dashed outline over a faint ground.
 

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

@@ -7,6 +7,7 @@ import type { RulerAbilities, RulerScale } from './DayRuler.keyboard';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
 import { useTextFits } from './useTextFits';
 import { formatHour, formatRange, percentOf, ticksOf } from './day-ruler-model';
+import { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';
 import {
   actionsSx,
   actualLabelSx,
@@ -17,15 +18,18 @@ import {
   coverageCellSx,
   coverageLabelSx,
   coverageSx,
+  footerCellSx,
+  footerNoteSx,
   handleSx,
   lineSx,
   nowSx,
   rowSx,
   trackSx,
+  trendSx,
   whoSx,
   type Span,
 } from './DayRuler.styles';
-import type { DayRulerBlock, DayRulerRow, RulerHour } from './DayRuler.types';
+import type { DayRulerBlock, DayRulerFooterCell, DayRulerFooterRow, DayRulerRow, RulerHour } from './DayRuler.types';
 import type { RulerDrag, RulerDragApi } from './useRulerDrag';
 
 export const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {
@@ -254,6 +258,121 @@ export function Coverage(props: { coverage: readonly number[]; label?: string; s
   );
 }
 
+/** 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). */
+export function trendPoints(values: readonly (number | null)[], hours: number): string {
+  const present = values.slice(0, hours).filter((value): value is number => value !== null);
+  const max = Math.max(0, ...present);
+  return values
+    .slice(0, hours)
+    .flatMap((value, index) => {
+      if (value === null) return [];
+      const x = ((index + 0.5) * 100) / hours;
+      const y = max > 0 ? 38 - (value / max) * 34 : 38;
+      return [`${x.toFixed(2)},${y.toFixed(2)}`];
+    })
+    .join(' ');
+}
+
+/** One hour's default words: "20:00 · 4"; just the hour when it says nothing. */
+const hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));
+
+/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */
+function markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {
+  return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;
+}
+
+interface FooterContext {
+  hours: number;
+  from: RulerHour;
+  /** `labels.footerMarked`. */
+  marked: string;
+}
+
+function FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {
+  return (
+    <Box sx={coverageSx(ctx.hours)}>
+      {Array.from({ length: ctx.hours }, (_, index) => {
+        const cell = cells[index] ?? { text: '' };
+        const hour = ctx.from + index;
+        return (
+          <Box
+            key={index}
+            component="span"
+            sx={footerCellSx(Boolean(cell.marked))}
+            title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}
+            data-marked={cell.marked ? '' : undefined}
+          >
+            {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}
+            {cell.marked ? (
+              <>
+                <span aria-hidden>{cell.text}</span>
+                <Box component="span" sx={SR_ONLY_SX}>
+                  {markedWords(cell, hour, ctx.marked)}
+                </Box>
+              </>
+            ) : (
+              cell.text
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** A trend's figures in words, for the reader the drawn line does not reach: "11:00 4 · 12:00 6". */
+function trendWords(values: readonly (number | null)[], ctx: FooterContext): string {
+  return values
+    .slice(0, ctx.hours)
+    .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))
+    .join(' · ');
+}
+
+function FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {
+  if (row.trend) {
+    return (
+      <Box component="span" sx={{ display: 'block', minWidth: 0 }}>
+        <Box component="svg" viewBox="0 0 100 40" preserveAspectRatio="none" sx={trendSx} aria-hidden>
+          <polyline fill="none" stroke="currentColor" strokeWidth={1.5} vectorEffect="non-scaling-stroke" points={trendPoints(row.trend, ctx.hours)} />
+        </Box>
+        <Box component="span" sx={SR_ONLY_SX}>
+          {trendWords(row.trend, ctx)}
+        </Box>
+      </Box>
+    );
+  }
+  if (row.note !== undefined) {
+    return (
+      <Box component="span" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>
+        {row.note}
+      </Box>
+    );
+  }
+  return <FooterCells cells={row.cells ?? []} ctx={ctx} />;
+}
+
+/**
+ * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a
+ * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.
+ */
+export function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {
+  const { rows, scale, testId } = props;
+  const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };
+  return (
+    <>
+      {rows.map((row) => (
+        <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>
+          <Box component="span" sx={coverageLabelSx}>
+            {row.label}
+          </Box>
+          <FooterFigures row={row} ctx={ctx} />
+          <span />
+        </Box>
+      ))}
+    </>
+  );
+}
+
 /** The hour labels under the coverage row. */
 export function Axis({ scale, testId }: { scale: RulerScale; testId: string }): React.JSX.Element {
   return (

package/src/components/data-display/DayRuler/DayRuler.pt-BR.ts

@@ -8,4 +8,5 @@ export const PT_BR_DAY_RULER_LABELS: DayRulerLabels = {
   refused: "Não dá para ir além",
   notMovable: "Este turno não muda por aqui",
   loading: "Carregando o dia",
+  footerMarked: "falta gente",
 };

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

@@ -2,7 +2,7 @@ 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 } from '../ScheduleGrid/schedule-tones';
+import { actualBarColor, blockToneStyles, breakHatch, signalInk } from '../ScheduleGrid/schedule-tones';
 import type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
 
@@ -301,3 +301,52 @@ 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,7 @@ 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, RulerRow, type RowContext } from './DayRuler.parts';
+import { Axis, Coverage, GroupFooter, 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';
@@ -40,6 +40,14 @@ function abilitiesOf(props: DayRulerProps): RulerAbilities {
   return { create: open && Boolean(props.onCreate), move: open && Boolean(props.onMove), resize: open && Boolean(props.onResize) };
 }
 
+/** A group's lines under its rows, when the host gives any (`groupFooter`). */
+function FooterOf({ props, group, ctx }: { props: DayRulerProps; group: string | undefined; ctx: RowContext }): React.JSX.Element | null {
+  const rows = props.groupFooter?.(group);
+  if (!rows || rows.length === 0) return null;
+  const marked = props.labels?.footerMarked ?? EN_US_DAY_RULER_LABELS.footerMarked;
+  return <GroupFooter rows={rows} scale={ctx.scale} testId={ctx.testId} marked={marked} />;
+}
+
 /** The groups and their rows — or the skeleton, the host's error, or the host's empty state. */
 function RulerBody({ props, ctx }: { props: DayRulerProps; ctx: RowContext }): React.JSX.Element {
   if (props.error) return <>{props.error}</>;
@@ -68,6 +76,7 @@ function RulerBody({ props, ctx }: { props: DayRulerProps; ctx: RowContext }): R
           {group.rows.map((row) => (
             <RulerRow key={row.id} row={row} ctx={ctx} />
           ))}
+          <FooterOf props={props} group={group.title} ctx={ctx} />
         </Box>
       ))}
     </>

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

@@ -66,6 +66,29 @@ export interface DayRulerRow {
   labelAccessible?: string;
 }
 
+/** One hour of a group's count line: what it says, and whether the host marks it (an hour short of people). */
+export interface DayRulerFooterCell {
+  /** What the hour says ("4", "—"). Empty draws nothing. */
+  text: string;
+  /** Drawn in the warning ink inside a warning outline. Never the only signal: say it in `title` too. */
+  marked?: boolean;
+  /** The hour's tooltip and accessible words ("20h · o movimento pede 4, a escala tem 2"). Default: the hour and `text`. */
+  title?: string;
+}
+
+/**
+ * A line under a group's rows, on the tracks' columns (FUT-3882): one count
+ * per hour (`cells`, index 0 = `from…from+1`) — "Na escala, por hora",
+ * "O movimento pede" —, a trend drawn as a line (`trend`, one value per hour,
+ * `null` for none) — "Média de pedidos/hora" —, or a sentence across the
+ * track where the figures would be (`note`) — "Pouco histórico: …", or,
+ * `marked`, in the warning ink: "Faltam 2, 20h–22h".
+ */
+export type DayRulerFooterRow =
+  | { id: string; label: string; cells: readonly DayRulerFooterCell[]; trend?: undefined; note?: undefined }
+  | { id: string; label: string; trend: readonly (number | null)[]; cells?: undefined; note?: undefined }
+  | { id: string; label: string; note: string; marked?: boolean; cells?: undefined; trend?: undefined };
+
 export interface DayRulerProps {
   rows: readonly DayRulerRow[];
   /** The ruler's first hour (default 6, 06:00). */
@@ -78,6 +101,12 @@ export interface DayRulerProps {
   coverage?: readonly number[];
   /** Beside the coverage row ("Na escala, por hora"). */
   coverageLabel?: string;
+  /**
+   * Lines under a group's rows, on the tracks' columns, for the group titled
+   * `group` (`undefined` for rows with no group). Like the coverage row they
+   * are not drawn in a phone-sized pane, where the host says it its own way.
+   */
+  groupFooter?: (group: string | undefined) => readonly DayRulerFooterRow[] | undefined;
   /** An axis label every this many hours (default 4). */
   tickHours?: number;
   /** Every gesture snaps to this (default 15 minutes). */
@@ -99,7 +128,7 @@ export interface DayRulerProps {
   /** The component's own words. Default: the English pack. */
   labels?: Partial<DayRulerLabels>;
   /**
-   * Base test id (default `day-ruler`). Parts: `-coverage`, `-axis`, `-row-${rowId}`,
+   * Base test id (default `day-ruler`). Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`,
    * `-track-${rowId}`, `-block-${blockId}`, `-handle-l-${blockId}`, `-handle-r-${blockId}`, `-break-${blockId}`,
    * `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`.
    */

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

@@ -2,6 +2,8 @@ export { DayRuler } from './DayRuler';
 export type {
   DayRulerActual,
   DayRulerBlock,
+  DayRulerFooterCell,
+  DayRulerFooterRow,
   DayRulerProps,
   DayRulerRow,
   RulerHour,

package/src/components/data-display/ScheduleGrid/ScheduleGrid.md

@@ -48,10 +48,11 @@ lists events on one axis). For one day by the hour, or for a phone, use `DayRule
 
 | Prop | Type | Description |
 |---|---|---|
-| `columns` | `ScheduleGridColumn[]` | `label` (wraps to a second line when its column is short, never cut, and never between a word and the number after it: "Seg 19/10" stays whole; also in `title`), `sublabel?`, `today?` (label in the primary colour, cells framed), `past?` (the day has gone: label in `text.secondary`, see [Closed days](#closed-days)). A day is its index here. |
+| `columns` | `ScheduleGridColumn[]` | `label` (wraps to a second line when its column is short, never cut, and never between a word and the number after it: "Seg 19/10" stays whole; also in `title`), `sublabel?`, `adornment?` (a node under the label and sublabel, inside the pinned header and the column's width — a host's own figure for the day, such as an hour band and a "falta 2 · 20–22h" line; every header cell grows to the tallest, so keep it short; it sits inside the `columnheader`, so its words become part of the day's accessible name — draw a figure `aria-hidden` and give it words of its own, as `role="img"` with an `aria-label`), `today?` (label in the primary colour, cells framed), `past?` (the day has gone: label in `text.secondary`, see [Closed days](#closed-days)). A day is its index here. |
 | `groups` | `ScheduleGridGroup[]` | `title?` (upper-case heading, names the row group), `rows`: `id`, `label`, `meta?`, `metaTone?` (`'warning'` for "acima de 40h"), `total?`, `onLabelClick?` (makes the name a button), `labelAccessible?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when the column has no room for both), `chips?` (node under the meta — "2 regras ›"; one line, a chip that does not fit shrinks and cuts its label). |
 | `cell` | `(rowId, day) => ScheduleGridCell` | `blocks` (`id`, `label`, `note?`, `tone`, `movable?`, `copyable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` as fractions 0…1 of the block, a meal break drawn as a hatched gap; its words go in `note`), `blocked?` (hatched, refuses create and drop), `blockedLabel?`, `closed?` (the day can take no new turno — it has gone: no fill, no "+", see [Closed days](#closed-days)), `closedLabel?` (a closed cell's visually hidden words, "Já passou"). Called for every cell on each render: keep it cheap. |
 | `totalLabel` | `string?` | The last column's header ("horas"). |
+| `corner` | `ReactNode?` | The header row's cell above the names, pinned with it ("Movimento, 11h–23h" — what the days' adornments show), on the days' label line. A string never breaks at a range's dash ("11h–23h" stays whole). The cell itself always spans the header row's full height: it is the opaque mask the days scroll under. Empty by default. |
 | `readOnly` | `boolean?` | No "+", no grips, no drag; empty cells are not focusable. Block clicks still reach `onBlockClick`. |
 | `onCreate` / `onCopy` / `onMove` / `onBlockClick` | see Gestures | Each gesture is offered only when its handler is given. |
 | `createPreview` | `(rowId) => string` | The ghost text a create drag shows (the person's last hours). |
@@ -62,7 +63,7 @@ lists events on one axis). For one day by the hour, or for a phone, use `DayRule
 | `scrollToDay` | `number?` (an index into `columns`) | While the days scroll sideways, the day they open on. Applied **once per value** (and per day count): as soon as the days are drawn, they scroll at once (`behavior: 'instant'`, never smoothly, so reduced motion needs nothing else) until that day is the first column after the pinned names — or to the end of their reach, when the day is that close to the end. While `loading`, `error` or `empty` it waits for the rows; while the grid has no box (`display: none`, a container that gets its width after mount) it waits for the first width. The header row follows; focus and the page's vertical scroll are untouched. A re-render or a refetch with the same value keeps the person's own scroll, and **a later resize does not re-anchor** — pass a new value for that. A value outside the columns, and a grid whose days fit, do nothing. **Assumes LTR**: the names are the left column. Pass today's index (`3` on a Thursday) so a week opened mid-week does not start on the gone days. |
 | `aria-label` | `string?` | The grid's name. |
 | `labels` | `Partial<ScheduleGridLabels>` | `createCell(row, column)`, `blockedCell(row, column)`, `copied(block, column)`, `moved(block, row, column)`, `refused`, `loading`. Default: the English pack; a pt-BR host passes `SCHEDULE_GRID_LABELS['pt-BR']` from `@12-apps/ui/data-display/ScheduleGrid`. |
-| `dataTestId` | `string?` (default `schedule-grid`) | Parts: `-header`, `-row-${rowId}`, `-cell-${rowId}-${day}`, `-block-${blockId}`, `-grip-l-${blockId}`, `-grip-r-${blockId}`, `-break-${blockId}`, `-live`, `-loading`. |
+| `dataTestId` | `string?` (default `schedule-grid`) | Parts: `-header`, `-corner`, `-adornment-${day}`, `-row-${rowId}`, `-cell-${rowId}-${day}`, `-block-${blockId}`, `-grip-l-${blockId}`, `-grip-r-${blockId}`, `-break-${blockId}`, `-live`, `-loading`. |
 
 ### Tones — never colour alone
 

package/src/components/data-display/ScheduleGrid/ScheduleGrid.parts.tsx

@@ -25,6 +25,7 @@ import {
   totalCellSx,
   totalHeaderSx,
 } from './ScheduleGrid.styles';
+import { cornerSx, headerAdornmentSx } from './schedule-header-host.styles';
 import type { CellLook } from './ScheduleGrid.styles';
 import type {
   ScheduleGridBlock,
@@ -248,22 +249,31 @@ interface HeaderProps {
   columns: readonly ScheduleGridColumn[];
   /** Present when the grid has a last column. */
   totalLabel?: string;
+  /** Above the names (`ScheduleGridProps.corner`). */
+  corner?: React.ReactNode;
   rowSx: RowSx;
   testId: string;
 }
 
 /** The days, their counts and the total column's header — pinned while the grid scrolls. */
 
+/** A range ("11h–23h") breaks before or after it, never at its dash; a spaced dash ("11h – 23h") keeps its spaces. */
+function keepRangesWhole(node: React.ReactNode): React.ReactNode {
+  return typeof node === 'string' ? node.replace(/(\S)–(\S)/g, '$1\u2060–\u2060$2') : node;
+}
+
 /** A label wraps between words, never inside "Seg 19/10": the space before a number holds. */
 function keepDatesWhole(label: string): string {
   return label.replace(/ (?=\d)/g, '\u00a0');
 }
 
-export function GridHeader({ columns, totalLabel, rowSx, testId }: HeaderProps): React.JSX.Element {
+export function GridHeader({ columns, totalLabel, corner, rowSx, testId }: HeaderProps): React.JSX.Element {
   return (
     <Box role="row" sx={[rowSx, headerRowSx]} data-testid={`${testId}-header`}>
-      {/* Above the names: a cell of the header row, with nothing to head. */}
-      <span role="cell" data-sg-corner="" />
+      {/* Above the names: a cell of the header row, with nothing to head but the host's corner words. */}
+      <Box component="span" role="cell" data-sg-corner="" sx={cornerSx} data-testid={`${testId}-corner`}>
+        {keepRangesWhole(corner)}
+      </Box>
       {columns.map((column, day) => (
         <Box
           role="columnheader"
@@ -279,6 +289,11 @@ export function GridHeader({ columns, totalLabel, rowSx, testId }: HeaderProps):
               {column.sublabel}
             </Box>
           ) : null}
+          {column.adornment ? (
+            <Box component="span" sx={headerAdornmentSx} data-sg-col="adornment" data-testid={`${testId}-adornment-${day}`}>
+              {column.adornment}
+            </Box>
+          ) : null}
         </Box>
       ))}
       {totalLabel !== undefined ? (

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

@@ -132,7 +132,7 @@ export function ScheduleGrid(props: ScheduleGridProps): React.JSX.Element {
       >
         {/* The header row sits outside the sideways scroller, so it sticks to the page; it follows the days sideways. */}
         <Box ref={headRef} role="none" sx={headerSx(props.stickyTop ?? 0)} data-sg-head="" data-testid={`${testId}-head`} onWheel={sideways.forwardWheel}>
-          <GridHeader columns={columns} totalLabel={hasTotal ? (props.totalLabel ?? '') : undefined} rowSx={rowSx} testId={testId} />
+          <GridHeader columns={columns} totalLabel={hasTotal ? (props.totalLabel ?? '') : undefined} corner={props.corner} rowSx={rowSx} testId={testId} />
         </Box>
         <Box ref={bodyRef} role="none" sx={scrollSx} data-sg-scroll="" data-testid={`${testId}-scroll`} onScroll={sideways.follow}
           onFocus={sideways.bringOut}

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

@@ -19,6 +19,13 @@ export interface ScheduleGridColumn {
   label: string;
   /** Under the label ("3 turnos", "ninguém"). */
   sublabel?: string;
+  /**
+   * Under the label and the sublabel, inside the pinned header row: the host's
+   * own figure for that day (an hour band of how busy it gets, a "falta 2 ·
+   * 20–22h" line). It takes the column's width and travels with the header,
+   * sideways too. Keep it short: every header cell grows to the tallest.
+   */
+  adornment?: React.ReactNode;
   /** Today's column: its label in the primary colour and its cells framed. */
   today?: boolean;
   /**
@@ -125,6 +132,11 @@ export interface ScheduleGridProps {
   cell: (rowId: string, day: number) => ScheduleGridCell;
   /** The last column's header ("horas"). Without it and without row totals, there is no last column. */
   totalLabel?: string;
+  /**
+   * The header row's cell above the names, pinned with it ("Movimento,
+   * 11h–23h" — what the days' adornments show). Empty by default.
+   */
+  corner?: React.ReactNode;
   /**
    * No create, copy or move: no "+", no grips, empty cells are not focusable.
    * Block clicks still reach `onBlockClick` (a read-only window).

package/src/components/data-display/ScheduleGrid/schedule-header-host.styles.ts

@@ -0,0 +1,35 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { sxRem } from '../../../tokens/relative';
+import { SCHEDULE_GRID_METRICS as M } from './ScheduleGrid.metrics';
+
+/**
+ * The header row's host figures (FUT-3882): a day's adornment under its label
+ * and the corner above the names. Their own module to keep the grid's styles
+ * under the file-size budget.
+ */
+
+/** A day's adornment: under its label, the column's full width, in the secondary ink unless the host says otherwise. */
+export const headerAdornmentSx: SxProps<Theme> = {
+  mt: 0.5,
+  fontSize: sxRem(M.headerSublabel),
+  fontWeight: 400,
+  color: 'text.secondary',
+};
+
+/**
+ * The cell above the names. It is the pinned mask over the names column (the
+ * grid's sticky rule): it must stay a stretched grid item, the header row's
+ * full height, or a day scrolled sideways shows above the names. Its words sit
+ * inside it on the days' label line (the prototype's "Movimento, 11h–23h").
+ */
+export const cornerSx: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  fontSize: sxRem(M.headerSublabel),
+  color: 'text.secondary',
+  pt: 0.5,
+  pr: 0.5,
+  minWidth: 0,
+};

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useContext } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { TableFilterContext } from '../../layout/TableFilter/TableFilterContext';\nimport { RangePresets } from './data-views-preset-chips';\nimport { RangeBounds } from './data-views-range-bounds';\nimport { RangeSummary } from './data-views-range-summary';\nimport { useStillAnchor } from './data-views-still-anchor';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n  isRangeInverted,\n  isRangeSet,\n  numericRange,\n  rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { rem, remPx, sxRem } from '../../../tokens/relative';\n\n// Re-exported: the pair moved to its own file, and its importers keep their path.\nexport { RangeBounds };\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n  label,\n  onClear,\n  testId,\n}: {\n  label: string;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const clear = (event: React.SyntheticEvent): void => {\n    event.stopPropagation();\n    onClear();\n  };\n  return (\n    <Box\n      component=\"span\"\n      role=\"button\"\n      tabIndex={0}\n      aria-label={copy.filters.clearRange(label)}\n      data-testid={testId}\n      onClick={clear}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        clear(event);\n      }}\n      sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n    >\n      <CloseIcon sx={{ fontSize: sxRem(14) }} />\n    </Box>\n  );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpen,\n  open,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  onOpen: (anchor: HTMLElement) => void;\n  open: boolean;\n  testId: string;\n}): React.JSX.Element {\n  const active = isRangeSet(value);\n  const inverted = isRangeInverted(value);\n  // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n  // one: it is applied, and it matches nothing, and those are different states.\n  // At rest the pill draws the one field border (`fieldEdge`).\n  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      onClick={(event) => onOpen(event.currentTarget)}\n      // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n      // replace the chevron at the end, so a range pill and a multi-select pill\n      // put the clear in different places, and an applied range lost the\n      // affordance that says it opens.\n      startIcon={\n        active ? (\n          <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}\n      sx={{\n        borderRadius: fieldRadiusPx,\n        height: fieldHeight,\n        px: 1.5,\n        maxWidth: sxRem(280),\n        color: inverted ? 'error.main' : 'text.primary',\n        fontWeight: 600,\n        fontSize: sxRem(13),\n        textTransform: 'none',\n        whiteSpace: 'nowrap',\n        borderColor: (theme) => tone ?? fieldEdge(theme),\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': {\n          borderColor: active ? tone : 'text.primary',\n          bgcolor: active ? 'action.selected' : 'action.hover',\n        },\n      }}\n    >\n      {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n          the very thing that is narrowing the list. */}\n      <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Box>\n    </Button>\n  );\n}\n\n/**\n * How many months the pill's calendar shows: two from the theme's `md` up,\n * where the popover has the ~670px they take; one below it.\n *\n * A media query, not an `sx` breakpoint, because it decides what to RENDER —\n * CSS cannot un-render a second month. `up('md')` so that where nothing can be\n * measured (a test, the server) the answer is the one month that always fits.\n */\nfunction useCalendarMonths(): 1 | 2 {\n  const theme = useTheme();\n  return useMediaQuery(theme.breakpoints.up('md')) ? 2 : 1;\n}\n\n/**\n * The day popover's width. Below `sm` it takes the screen's (less the\n * popover's own 16px margins, which its `maxWidth` already keeps), so the boxes\n * and the month share it instead of leaving a strip of grid beside a narrow\n * card. From `sm` to `md` it holds one month, and sized to its content the\n * preset row alone stretched it to ~515px with the month hugging the left and\n * a band of nothing beside it; 400 keeps the month and the boxes one width.\n * From `md` its content — two months — sets it.\n */\nconst DAY_PAPER_SX = (theme: Theme) => ({\n  width: { xs: '100%', sm: rem(theme, 400), md: 'auto' },\n  // Below `sm` 8px from each edge and 8px of padding, so the month gets the\n  // 280px seven 40px day columns need: at 320 it had 256 and every day was a\n  // 33px target (FUT-4144 UI review).\n  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },\n  p: { xs: 1, sm: 2 },\n});\n\n\nexport function RangePill<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpenChange,\n  testIdPrefix,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  /** So a measured toolbar can hold still while this is open. */\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const still = useStillAnchor();\n  const testId = `${testIdPrefix}-range-${field.id}`;\n  const calendarMonths = useCalendarMonths();\n  const theme = useTheme();\n  const phone = useMediaQuery(theme.breakpoints.down('sm'));\n  return (\n    <>\n      <RangeTrigger\n        field={field}\n        value={value}\n        onChange={onChange}\n        onOpen={(element) => {\n          still.open(element);\n          onOpenChange?.(true);\n        }}\n        open={Boolean(still.anchor)}\n        testId={testId}\n      />\n      <Popover\n        {...still.popoverProps}\n        onClose={() => {\n          still.close();\n          onOpenChange?.(false);\n        }}\n        // Below `sm` a day popover keeps 8px from the screen's edges instead of 16.\n        marginThreshold={field.kind === 'day' && phone ? remPx(theme, 8) : undefined}\n        slotProps={{ paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === 'day' && DAY_PAPER_SX] } }}\n      >\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          calendarMonths={calendarMonths}\n        />\n        <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />\n      </Popover>\n    </>\n  );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  // The slide-in panel stays mounted while closed; its calendar does not.\n  // Outside a `TableFilter` (the \"Mais\" sheet, a test) the pair is on screen.\n  const panel = useContext(TableFilterContext);\n  if (field.kind === \"day\") {\n    return (\n      <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n        <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: \"text.secondary\" }}>\n          {field.label}\n        </Typography>\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          showCalendar={panel ? panel.open : true}\n        />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n      <TableFilter.RangeField\n        label={field.label}\n        unit={field.unit}\n        value={numericRange(value)}\n        onChange={(range) => onChange(range)}\n        testId={testId}\n      />\n      {/* Below the numeric control here, unlike the pill's popover: this one\n          renders its own label, and chips above it would separate the label\n          from the field it names. */}\n      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ACM3HHZY.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 {\n  actionsSx,\n  actualLabelSx,\n  actualSx,\n  axisSx,\n  blockSx,\n  breakSx,\n  coverageCellSx,\n  coverageLabelSx,\n  coverageSx,\n  handleSx,\n  lineSx,\n  nowSx,\n  rowSx,\n  trackSx,\n  whoSx,\n  type Span,\n} from './DayRuler.styles';\nimport type { DayRulerBlock, 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 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-FORAVDJF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-bounds.tsx"],"sourcesContent":["'use client';\n\n/**\n * The `De`/`Até` pair of a range filter, its preset chips, the line under it\n * and — for a day range — the calendar under that (FUT-4144). Shared by the\n * pill's popover, the slide-in panel and the \"Mais\" sheet, so the three cannot\n * drift on what a bound accepts or how it clears.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport { DayBoundInput } from './data-views-day-input';\nimport { NumberBoundInput } from './data-views-number-input';\nimport { RangePresets } from './data-views-preset-chips';\nimport { DayRangeCalendar } from './data-views-range-calendar';\nimport { presetsFor } from './data-views-range-presets';\nimport { useOutsideResetKey } from './data-views-range-reset';\nimport { isRangeInverted } from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form\n * both the field and the backend speak) and is typed through the masked\n * `dd/mm/aaaa` field rather than a native date input — see\n * {@link DayBoundInput} for why. A number parses, and an unparseable/blank\n * entry CLEARS the bound rather than writing `NaN`.\n */\nfunction BoundField<T extends Record<string, unknown>>({\n  field,\n  label,\n  value,\n  onChange,\n  testId,\n  fill,\n}: {\n  field: RangeFieldConfig<T>;\n  label: string;\n  value: number | string | undefined;\n  onChange: (bound: number | string | undefined) => void;\n  testId: string;\n  /** A number box takes its cell's width; a day box always does. */\n  fill: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === 'day') {\n    return (\n      <DayBoundInput\n        fill\n        mask={copy.filters.dayMask}\n        invalidMessage={copy.filters.dayInvalid}\n        label={label}\n        value={value == null ? undefined : String(value)}\n        onChange={onChange}\n        testId={testId}\n      />\n    );\n  }\n  return (\n    <NumberBoundInput\n      fill={fill}\n      label={label}\n      value={value}\n      unit={field.unit}\n      onChange={onChange}\n      testId={testId}\n    />\n  );\n}\n\n\n/** One box of the pair: an equal share of the row for a day, as it was for a number. */\nfunction BoundCell({ grow, children }: { grow: boolean; children: React.ReactNode }): React.JSX.Element {\n  if (!grow) return <>{children}</>;\n  return <Box sx={{ flex: '1 1 0', minWidth: 0 }}>{children}</Box>;\n}\n\n/**\n * The line under the pair: why an inverted window matches nothing, or — for a\n * day range — that BOTH days are in the result. Saying so is FUT-668's other\n * half: the bounds compare as ISO strings precisely so `até` keeps its whole\n * day, and nothing on screen would otherwise tell the merchant that.\n */\nfunction RangeNote({\n  day,\n  inverted,\n  testId,\n}: {\n  day: boolean;\n  inverted: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (inverted) {\n    return (\n      <Typography\n        component=\"p\"\n        data-testid={`${testId}-inverted`}\n        sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}\n      >\n        {copy.filters.rangeInvalid}\n      </Typography>\n    );\n  }\n  if (!day) return null;\n  return (\n    <Typography\n      component=\"p\"\n      data-testid={`${testId}-inclusive`}\n      // `text.secondary`, not `disabled`: the note is read, and disabled grey\n      // at 12px is 2.68:1 (FUT-4144 UI review).\n      sx={{ mt: { xs: 0.25, sm: 0.75 }, fontSize: sxRem(12), color: 'text.secondary' }}\n    >\n      {copy.filters.rangeInclusiveNote}\n    </Typography>\n  );\n}\n\n/** Props of {@link RangeBounds}. */\ninterface RangeBoundsProps<T extends Record<string, unknown>> {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n  /**\n   * Months the day calendar shows side by side (FUT-4144). Two where the\n   * popover has the room; one, with the month/year selectors, on a phone and\n   * in the panels.\n   */\n  calendarMonths?: 1 | 2;\n  /**\n   * Whether the day calendar is mounted. A host that keeps the pair mounted\n   * while hidden (the slide-in panel) passes its open state, so a closed panel\n   * holds no calendar of its own.\n   */\n  showCalendar?: boolean;\n  /**\n   * A NUMBER pair splits the row equally too, as a day pair always does. Set\n   * by the panels, whose width is the row's; the pill's popover sizes itself to\n   * its content and keeps the boxes' own width.\n   */\n  fillRow?: boolean;\n}\n\n/**\n * The `De`/`Até` pair for a range — shared by the pill's popover and the\n * slide-in panel's day fields, so the two surfaces cannot drift on what a bound\n * accepts or how it clears.\n */\nexport function RangeBounds<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n  calendarMonths = 1,\n  showCalendar = true,\n  fillRow = false,\n}: RangeBoundsProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { key, emitted } = useOutsideResetKey(value);\n  // Moves the calendar to a TYPED day. A typed write is the fields' own, so\n  // the outside key above does not see it; a tap on the calendar moves\n  // neither, which is what keeps it still under the finger.\n  const [typed, setTyped] = useState(0);\n  const typedChange = (range: RangeValue) => {\n    setTyped((n) => n + 1);\n    onChange(emitted(range));\n  };\n  const day = field.kind === 'day';\n  return (\n    <Box data-testid={`${testId}-panel`}>\n      {/* Above the inputs, not below: the presets are the answer for most\n          merchants, and the two date pickers are the escape hatch. */}\n      <Box sx={{ '&:not(:empty)': { mb: { xs: 1, sm: 1.5 } } }}>\n        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n      </Box>\n      {/* Top-aligned: a day that does not exist grows ITS field by a message\n          line, and centring would push the other box half a line down. The two\n          boxes are one height, so with no message this is the same row. */}\n      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>\n        {/* A day pair shares the row equally, so it spans the calendar under\n            it; a number pair keeps its own widths. */}\n        <BoundCell grow={day || fillRow}>\n          <BoundField\n            key={`min-${key}`}\n            field={field}\n            label={copy.filters.rangeStart}\n            value={value.min}\n            onChange={(min) => typedChange({ ...value, min })}\n            testId={`${testId}-min`}\n            fill={fillRow}\n          />\n        </BoundCell>\n        <BoundCell grow={day || fillRow}>\n          <BoundField\n            key={`max-${key}`}\n            field={field}\n            label={copy.filters.rangeEnd}\n            value={value.max}\n            onChange={(max) => typedChange({ ...value, max })}\n            testId={`${testId}-max`}\n            fill={fillRow}\n          />\n        </BoundCell>\n      </Box>\n      <RangeNote day={day} inverted={isRangeInverted(value)} testId={testId} />\n      {/* Under the boxes and the note, with no button to reach it: the typed\n          path stays as short as it was, and a period is two taps (FUT-4144). */}\n      {day && showCalendar && (\n        <DayRangeCalendar\n          fieldLabel={field.label}\n          value={value}\n          onChange={(range) => onChange(emitted(range))}\n          months={calendarMonths}\n          viewKey={`${key}-${typed}`}\n          testId={testId}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}