@12-apps/ui 6.93.0 → 6.93.1

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

@@ -1,13 +1,12 @@
 import Box from '@mui/material/Box/index.js';
 import type * as React from 'react';
-import { useRef } from 'react';
+import { Fragment, isValidElement, useRef } from 'react';
 
 import { ScheduleNameCell } from '../ScheduleGrid/ScheduleNameCell';
 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 { useTextFit } from './useTextFits';
+import { formatHour, formatRange, hitBoundsOf, percentOf, ticksOf, type BlockTextFit } from './day-ruler-model';
 import {
   actionsSx,
   actualLabelSx,
@@ -18,18 +17,16 @@ import {
   coverageCellSx,
   coverageLabelSx,
   coverageSx,
-  footerCellSx,
-  footerNoteSx,
   handleSx,
   lineSx,
   nowSx,
   rowSx,
   trackSx,
-  trendSx,
   whoSx,
+  type HitBounds,
   type Span,
 } from './DayRuler.styles';
-import type { DayRulerBlock, DayRulerFooterCell, DayRulerFooterRow, DayRulerRow, RulerHour } from './DayRuler.types';
+import type { DayRulerBlock, DayRulerRow, RulerHour } from './DayRuler.types';
 import type { RulerDrag, RulerDragApi } from './useRulerDrag';
 
 export const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {
@@ -71,6 +68,8 @@ interface BlockProps {
   span: Span;
   /** The hours it is drawn at (its own, or a drag's). */
   at: { start: RulerHour; end: RulerHour };
+  /** How far its hit band may reach on a narrow ruler, in % of the track (the midpoints to its neighbours). */
+  hit: HitBounds;
   text: string;
   ctx: RowContext;
   testId: string;
@@ -98,25 +97,39 @@ function BreakBand({ block, at, testId }: { block: DayRulerBlock; at: BlockProps
   return <Box component="span" aria-hidden sx={breakSx(gap)} data-dr-break="" data-testid={testId} />;
 }
 
-function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): React.JSX.Element {
+/** Where nothing can be measured, a block shorter than the prototype's 30% of the ruler says its start. */
+function fallbackFit(block: DayRulerBlock, scale: RulerScale): BlockTextFit {
+  return (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare ? 'full' : 'short';
+}
+
+/**
+ * What the bar's fit puts on it: `data-fit` for the styles, and — while the bar
+ * shows less than its full text — that full text as its name, so the name still
+ * says all of it.
+ */
+function fitProps(fit: BlockTextFit, text: string): { 'aria-label'?: string; 'data-fit'?: BlockTextFit } {
+  return fit === 'full' ? {} : { 'aria-label': text, 'data-fit': fit };
+}
+
+function RulerBlock({ row, block, span, at, hit, text, ctx, testId }: BlockProps): React.JSX.Element {
   const { can, dragApi, scale } = ctx;
   const movable = can.move && Boolean(block.movable);
   const resizable = can.resize && Boolean(block.resizable);
   const ref = useRef<HTMLButtonElement | null>(null);
-  // Short by pixels; where nothing can be measured, by the prototype's 30% rule.
-  const fits = useTextFits(ref, text, (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare);
+  const short = block.shortLabel ?? text;
+  const fit = useTextFit(ref, text, short, fallbackFit(block, scale));
   const press = (mode: 'move' | 'start' | 'end') => (event: React.PointerEvent<HTMLElement>) =>
     dragApi.startBlock(event, row.id, block, mode);
   return (
     <Box
       component="button"
       type="button"
-      sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable })}
+      sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable, hit })}
       title={block.title ?? block.label}
+      {...fitProps(fit, text)}
       aria-keyshortcuts={shortcutsOf(movable, resizable)}
       aria-current={block.selected ? 'true' : undefined}
       ref={ref}
-      data-narrow={fits ? undefined : ''}
       data-tone={block.tone}
       data-testid={testId}
       onPointerDown={movable ? press('move') : undefined}
@@ -131,7 +144,7 @@ function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): Re
         {text}
       </span>
       <span data-dr-text="short" title={text}>
-        {block.shortLabel ?? text}
+        {short}
       </span>
       {resizable ? <Handle side="r" onPointerDown={press('end')} testId={`${ctx.testId}-handle-r-${block.id}`} /> : null}
     </Box>
@@ -141,39 +154,51 @@ function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): Re
 /** A row's blocks, each where a drag has it now (with its live hours) or where it is. */
 function Blocks({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
   const mine = ctx.drag && ctx.drag.rowId === row.id ? ctx.drag : null;
+  const drawn = row.blocks.map((block) => {
+    const live = mine?.blockId === block.id ? mine : null;
+    const start = live ? live.start : block.start;
+    const end = live ? live.end : block.end;
+    return { block, live, start, end, span: spanOf(start, end, ctx.scale) };
+  });
+  const preview = mine && mine.mode === 'create' ? previewSpan(mine, ctx.scale) : null;
+  // Every bar drawn on the row, the create's preview included, bounds its neighbours' hit bands.
+  const hits = hitBoundsOf([...drawn.map((d) => d.span), ...(preview ? [preview] : [])]);
   return (
     <>
-      {row.blocks.map((block) => {
-        const live = mine?.blockId === block.id ? mine : null;
-        const start = live ? live.start : block.start;
-        const end = live ? live.end : block.end;
-        return (
-          <RulerBlock
-            key={block.id}
-            row={row}
-            block={block}
-            span={spanOf(start, end, ctx.scale)}
-            at={{ start, end }}
-            text={live?.moved ? formatRange(start, end) : block.label}
-            ctx={ctx}
-            testId={`${ctx.testId}-block-${block.id}`}
-          />
-        );
-      })}
-      {mine && mine.mode === 'create' ? <CreatePreview row={row} drag={mine} ctx={ctx} /> : null}
+      {drawn.map(({ block, live, start, end, span }, index) => (
+        <RulerBlock
+          key={block.id}
+          row={row}
+          block={block}
+          span={span}
+          at={{ start, end }}
+          hit={hits[index]!}
+          text={live?.moved ? formatRange(start, end) : block.label}
+          ctx={ctx}
+          testId={`${ctx.testId}-block-${block.id}`}
+        />
+      ))}
+      {mine && preview ? <CreatePreview row={row} drag={mine} span={preview} hit={hits[drawn.length]!} ctx={ctx} /> : null}
     </>
   );
 }
 
+/** Where a create drag's preview is drawn: at least one snap long. */
+function previewSpan(drag: RulerDrag, scale: RulerScale): Span {
+  return spanOf(drag.start, Math.max(drag.end, drag.start + scale.snap), scale);
+}
+
 /** The block a create drag is drawing, with its live hours. */
-function CreatePreview({ row, drag, ctx }: { row: DayRulerRow; drag: RulerDrag; ctx: RowContext }): React.JSX.Element {
+function CreatePreview(props: { row: DayRulerRow; drag: RulerDrag; span: Span; hit: HitBounds; ctx: RowContext }): React.JSX.Element {
+  const { row, drag, span, hit, ctx } = props;
   const range = formatRange(drag.start, drag.end);
   return (
     <RulerBlock
       row={row}
       block={{ id: '\u0000new', start: drag.start, end: drag.end, label: range, tone: 'plan' }}
-      span={spanOf(drag.start, Math.max(drag.end, drag.start + ctx.scale.snap), ctx.scale)}
+      span={span}
       at={{ start: drag.start, end: drag.end }}
+      hit={hit}
       text={range}
       ctx={ctx}
       testId={`${ctx.testId}-preview`}
@@ -197,7 +222,7 @@ function Actual({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.
   );
 }
 
-/** A row's track: the actual bar, its blocks (or the one being dragged, live) and the now line. */
+/** A row's track: the actual bar, the now line under its blocks (or the one being dragged, live). */
 function Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
   const { scale, now, can, dragApi } = ctx;
   const showNow = now !== undefined && now >= scale.from && now <= scale.to;
@@ -217,19 +242,42 @@ function Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.E
       }}
     >
       <Actual row={row} ctx={ctx} />
-      <Blocks row={row} ctx={ctx} />
+      {/* Before the blocks, so it paints under them and never through a label. */}
       {showNow ? <Box sx={nowSx(percentOf(now, scale.from, scale.to))} data-testid={`${ctx.testId}-now`} /> : null}
+      <Blocks row={row} ctx={ctx} />
     </Box>
   );
 }
 
-/** One person: name, meta and chips · the track · the row's actions. */
+/**
+ * Whether a node draws anything: nothing, a boolean, an empty string, an empty
+ * array and an empty fragment do not — the actions slot (and its 8px above)
+ * is rendered only for content.
+ */
+export function hasContent(node: React.ReactNode): boolean {
+  if (node === null || node === undefined || typeof node === 'boolean' || node === '') return false;
+  if (Array.isArray(node)) return node.some((child) => hasContent(child as React.ReactNode));
+  if (isValidElement<{ children?: React.ReactNode }>(node) && node.type === Fragment) return hasContent(node.props.children);
+  return true;
+}
+
+/**
+ * One person: name, meta and chips, the row's actions under them · the track.
+ * The actions live in the name's column, never a column of their own: a
+ * column reserved for one row's "Iniciar agora" left every other row a blank
+ * band, and a per-row one would have cut the hours out of line (FUT-3831).
+ */
 export function RulerRow({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
+  const hasActions = hasContent(row.actions);
   return (
     <Box sx={rowSx} data-testid={`${ctx.testId}-row-${row.id}`} role="listitem">
       <ScheduleNameCell row={row} sx={whoSx} sizes={{ name: M.name, meta: M.meta, chipsTop: 0.75 }} />
       <Track row={row} ctx={ctx} />
-      <Box sx={actionsSx}>{row.actions}</Box>
+      {hasActions ? (
+        <Box sx={actionsSx} data-testid={`${ctx.testId}-actions-${row.id}`}>
+          {row.actions}
+        </Box>
+      ) : null}
     </Box>
   );
 }
@@ -253,126 +301,10 @@ export function Coverage(props: { coverage: readonly number[]; label?: string; s
           );
         })}
       </Box>
-      <span />
     </Box>
   );
 }
 
-/** 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 (
@@ -385,7 +317,6 @@ export function Axis({ scale, testId }: { scale: RulerScale; testId: string }):
           </span>
         ))}
       </Box>
-      <span />
     </Box>
   );
 }

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']}