@12-apps/ui 6.86.2 → 6.87.0

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/dist/utility/WorkflowStep.js

@@ -1,19 +1,19 @@
 import "../chunk-IO36MEBD.js";
 import {
   WorkflowStep
-} from "../chunk-UQ5GJPVZ.js";
-import "../chunk-CAOL4AIB.js";
-import "../chunk-IMYKJTVX.js";
-import "../chunk-UBVKMM3V.js";
+} from "../chunk-N3C4J6Z2.js";
+import "../chunk-AEAVVKGY.js";
+import "../chunk-KLLHCPA2.js";
+import "../chunk-YGQ2DLIM.js";
 import "../chunk-LL2BWQPM.js";
-import "../chunk-XOXXG7Q5.js";
+import "../chunk-57FIUJJJ.js";
 import "../chunk-B7ZHEOQQ.js";
 import "../chunk-BRHRK7BK.js";
 import "../chunk-25MSGLNU.js";
 import "../chunk-GAXHYRX6.js";
 import "../chunk-NP6SHLQ3.js";
-import "../chunk-TZ23DNKY.js";
 import "../chunk-7ZPUN7TV.js";
+import "../chunk-TZ23DNKY.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-RGVNXES5.js";
 import "../chunk-GDN2LUTZ.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.86.2",
+  "version": "6.87.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -192,6 +192,10 @@
       "types": "./dist/types/components/data-display/DataViews/index.d.ts",
       "default": "./dist/data-display/DataViews.js"
     },
+    "./data-display/DayRuler": {
+      "types": "./dist/types/components/data-display/DayRuler/index.d.ts",
+      "default": "./dist/data-display/DayRuler.js"
+    },
     "./data-display/DescriptionItem": {
       "types": "./dist/types/components/data-display/DescriptionItem/index.d.ts",
       "default": "./dist/data-display/DescriptionItem.js"
@@ -216,6 +220,10 @@
       "types": "./dist/types/components/data-display/RegionMap/index.d.ts",
       "default": "./dist/data-display/RegionMap.js"
     },
+    "./data-display/ScheduleGrid": {
+      "types": "./dist/types/components/data-display/ScheduleGrid/index.d.ts",
+      "default": "./dist/data-display/ScheduleGrid.js"
+    },
     "./data-display/SectionOnboarding": {
       "types": "./dist/types/components/data-display/SectionOnboarding/index.d.ts",
       "default": "./dist/data-display/SectionOnboarding.js"

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

@@ -0,0 +1,94 @@
+import type * as React from 'react';
+
+import type { DayRulerLabels } from '../../../copy/labels';
+import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
+import { clamp, formatRange, moved, resized, snapTo } from './day-ruler-model';
+import type { DayRulerBlock, RulerHour } from './DayRuler.types';
+
+/** The ruler's span and step, resolved once per render. */
+export interface RulerScale {
+  from: RulerHour;
+  to: RulerHour;
+  /** The snap, in hours (0.25 for 15 minutes). */
+  snap: number;
+  createHours: number;
+  tickHours: number;
+}
+
+/** What the ruler lets a row do, resolved once per render. */
+export interface RulerAbilities {
+  create: boolean;
+  move: boolean;
+  resize: boolean;
+}
+
+/** Which gesture a modified arrow asks of a block, if the ruler allows it. */
+type Gesture = 'move' | 'start' | 'end';
+
+function gestureOf(event: React.KeyboardEvent, block: DayRulerBlock, can: RulerAbilities): Gesture | null {
+  if (event.altKey && !event.shiftKey) return can.move && block.movable ? 'move' : null;
+  if (!event.shiftKey) return null;
+  if (!can.resize || !block.resizable) return null;
+  return event.altKey ? 'start' : 'end';
+}
+
+/** The block's hours after one snap of `gesture` in `direction`. */
+function stepped(block: DayRulerBlock, gesture: Gesture, direction: -1 | 1, scale: RulerScale): [RulerHour, RulerHour] {
+  const step = direction * scale.snap;
+  if (gesture === 'move') return moved(block.start, block.end, step, scale.from, scale.to);
+  const edge = (gesture === 'start' ? block.start : block.end) + step;
+  return resized(block.start, block.end, gesture, edge, M.minHours, scale.from, scale.to);
+}
+
+interface BlockKeyContext {
+  scale: RulerScale;
+  can: RulerAbilities;
+  onMove?: (blockId: string, start: RulerHour, end: RulerHour) => void;
+  onResize?: (blockId: string, start: RulerHour, end: RulerHour) => void;
+  labels: DayRulerLabels;
+  say: (text: string) => void;
+}
+
+/**
+ * A focused block's keys (FUT-3825): Alt+←/→ moves it one snap, Shift+←/→
+ * moves its end, Shift+Alt+←/→ its start. Each is read by the live region; one
+ * that cannot go further, or that the block does not allow, is refused aloud
+ * and changes nothing.
+ */
+/** Shift and/or Alt with ← or →, and no Ctrl or Meta: a key the ruler answers for a block. */
+function isBlockKey(event: React.KeyboardEvent): boolean {
+  const arrow = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+  return arrow && (event.altKey || event.shiftKey) && !event.ctrlKey && !event.metaKey;
+}
+
+export function handleBlockKey(event: React.KeyboardEvent, block: DayRulerBlock, ctx: BlockKeyContext): void {
+  if (!isBlockKey(event)) return;
+  // The key is the ruler's either way: Alt+← would otherwise be the browser's Back.
+  event.preventDefault();
+  const gesture = gestureOf(event, block, ctx.can);
+  if (!gesture) {
+    ctx.say(ctx.labels.notMovable);
+    return;
+  }
+  const [start, end] = stepped(block, gesture, event.key === 'ArrowLeft' ? -1 : 1, ctx.scale);
+  if (start === block.start && end === block.end) {
+    ctx.say(ctx.labels.refused);
+    return;
+  }
+  const range = formatRange(start, end);
+  if (gesture === 'move') {
+    ctx.onMove?.(block.id, start, end);
+    ctx.say(ctx.labels.moved(block.label, range));
+    return;
+  }
+  ctx.onResize?.(block.id, start, end);
+  ctx.say(ctx.labels.resized(block.label, range));
+}
+
+/** Where Enter on a track creates: the host's `createStart`, else `now` snapped up, else `from` — kept on the ruler. */
+export function keyCreateSpan(scale: RulerScale, now: RulerHour | undefined, hostStart: RulerHour | undefined): [RulerHour, RulerHour] {
+  const onRuler = now !== undefined && now >= scale.from && now < scale.to;
+  const fallback = onRuler ? Math.ceil(now / scale.snap) * scale.snap : scale.from;
+  const start = clamp(snapTo(hostStart ?? fallback, scale.snap), scale.from, scale.to - M.minHours);
+  return [start, Math.min(scale.to, start + scale.createHours)];
+}

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

@@ -0,0 +1,84 @@
+# DayRuler
+
+One day as an **hour ruler per row** — who is on the escala when (blocks), who is really on
+shift (a thin bar under them), "agora" (a line across every track) and how many people are on
+each hour (a row of counts above the axis) (FUT-3825, Turnos prototype D). The ruler reports
+gestures; hours, limits and refusals are the host's.
+
+```
+Na escala, por hora   [  ][  ][5][5][5] … [1][1][1][  ][  ]
+                      06:00     10:00     …     22:00     02:00
+ENTREGAS
+Luiz entrega          |··········[↻ 20:39–00:00]···|     [Iniciar agora]
+atrasado · era 20:39                        ┃ agora
+Anderson Paiva        |  sem escala · desde 08:26  |     [Encerrar turno]
+                      |  ━━━━━━━━━━━━━━━━━━━━━━━━━┃|
+```
+
+Times are **hours from the day's midnight**, fractions included: `20.75` is 20:45 and a value past
+24 is the next morning (`26` is 02:00).
+
+## Gestures
+
+| gesture | pointer (mouse, pen) | keyboard | reports |
+|---|---|---|---|
+| create | drag on an empty stretch of a row's track; **a click alone is `createHours`** (4h) | Enter on the focused track: `createHours` from `createStart(rowId)` (default: `now` snapped up, else `from`) | `onCreate(rowId, start, end)` |
+| move | drag a block's middle — its length is kept, it stays on the ruler | Alt+← / Alt+→ | `onMove(blockId, start, end)` |
+| change the end / start | drag the block's right / left handle — never shorter than 30 min | Shift+← / Shift+→ (end), Shift+Alt+← / Shift+Alt+→ (start) | `onResize(blockId, start, end)` |
+| open | click or tap a block | Enter | `onBlockClick(blockId)` |
+
+- Every hour snaps to `snapMinutes` (15) and is kept within `from…to`.
+- While a drag runs the block is redrawn live with its hours.
+- **Touch never drags and a tap on the track creates nothing** (the phone schedules with the host's
+  "+ Agendar ⟨dia⟩"); a tap on a block opens it.
+- A release anywhere commits the drag. **Escape**, the window losing focus, or a move with no
+  button down abandons it: nothing is reported, the block goes back to its hours (a create's
+  preview goes), and only the click that release leaves behind is ignored.
+- Keyboard moves, resizes and refusals (past the ruler; `labels.notMovable` on a block that is
+  not `movable` / `resizable`) are read by a polite live region that stays mounted; the same sentence twice is
+  read twice.
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `rows` | `DayRulerRow[]` | `id`, `label`, `meta?`, `metaTone?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when there is no room for both), `chips?` (node — one line, a chip that does not fit shrinks and cuts its label), `actions?` (node — "Encerrar turno", "Iniciar agora"), `blocks` (`id`, `start`, `end`, `label`, `shortLabel?`, `tone`, `movable?`, `resizable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` in ruler hours, a meal break drawn as a hatched gap inside the block: it travels with a moved block and is cut to its ends while one is dragged; a span that falls outside the block, is empty or is reversed (`end <= start`) draws nothing; its words are the host's, in `label` / `title`), `actual?` (`start`, `end`), `actualLabel?`, `group?` (a new value starts a new heading), `onLabelClick?`, `labelAccessible?`. |
+| `from` / `to` | `number` (default 6 / 26) | The ruler's span. |
+| `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"). |
+| `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. |
+| `createStart` | `(rowId) => number` | Where Enter creates. |
+| `readOnly` | `boolean?` | Nothing creates, moves or resizes; blocks still open. |
+| `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: `UI_LABELS['pt-BR'].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`. |
+
+Tones are `ScheduleGrid`'s; on the ruler a `plan` block is a dashed outline over a faint ground.
+
+## Layout
+
+- **Computer:** name 220px · track (`minmax(0, 1fr)`) · actions 220px (none when no row has
+  `actions`), 16px gap; a hairline between rows. Track 40px tall with a line every hour; blocks 24px at +4px; the actual bar 6px
+  at +31px; the now line the track's full height.
+- **Stacked (a container under 800px: a phone, a tablet in portrait)** — a container query, not a
+  media query: name, meta, chips and the actions on top, the track under them at full width, 30px
+  tall with a line every `tickHours`; the coverage row (its label above the counts) and the hour
+  axis span the same full width. **Under 600px** (a phone-sized pane) there is no coverage row and
+  no axis. Every bound is "from that width up". A block whose range does not fit it, by pixels,
+  says only its `shortLabel` (its start), never a cut "20:39–00:". The 20px blocks and the 24px name buttons
+  answer a 40px finger (an invisible hit area), the look unchanged.
+
+## Accessibility
+
+Rows are a `list` per group. Blocks are native buttons with `aria-keyshortcuts`; the `selected`
+block is `aria-current="true"`. An interactive
+track is a focusable `group` named `labels.createTrack(row)`; Enter or Space creates.
+
+## Related
+
+`ScheduleGrid` (the week), `SequenceResolver` (the problems a late block opens).

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

@@ -0,0 +1,47 @@
+/**
+ * THE DAY RULER'S NUMBERS — the approved prototype's (FUT-3823, frames d02 at
+ * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.
+ */
+export const DAY_RULER_METRICS = {
+  /** The name and the actions columns on a computer. */
+  sideColumn: 220,
+  gap: 16,
+  /**
+   * Below this container width a row stacks: name and actions on top, the
+   * track under them. Two 220px side columns, their gaps and a track of at
+   * least 320px (where the hour labels every 4 hours do not collide): 792,
+   * rounded up.
+   */
+  compactBelow: 800,
+  /**
+   * Below this container width the pane is phone-sized: no coverage row and
+   * no hour axis. Between it and `compactBelow` the rows stack and the two
+   * lines are drawn across the full width, like the tracks.
+   */
+  phoneBelow: 600,
+  rowPaddingY: 8,
+  track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },
+  block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },
+  /** The end handles' hit area. */
+  handle: 10,
+  actual: { top: 31, height: 6, compactTop: 24, compactHeight: 4, radius: 3 },
+  actualLabel: { top: 8, offset: 6, font: 12 },
+  now: { width: 2, overhang: 2 },
+  coverage: { height: 26, gap: 2, radius: 4, font: 12 },
+  axis: { height: 18, font: 12 },
+  name: 15,
+  meta: 13,
+  groupTitle: 12,
+  ring: 2,
+  /** How far a block's focus ring stands off it. */
+  ringOffset: 1,
+  /** The loading row's name bar. */
+  skeletonNameRadius: 4,
+  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */
+  narrowShare: 0.3,
+  /** The shortest block a resize leaves, in hours. */
+  minHours: 0.5,
+  skeletonRows: 4,
+  /** The hatch of a break inside a block: stripe width. */
+  breakStripe: { ink: 2, gap: 3 },
+} as const;

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

@@ -0,0 +1,272 @@
+import Box from '@mui/material/Box/index.js';
+import type * as React from 'react';
+import { 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 {
+  actionsSx,
+  actualLabelSx,
+  actualSx,
+  axisSx,
+  blockSx,
+  breakSx,
+  coverageCellSx,
+  coverageLabelSx,
+  coverageSx,
+  handleSx,
+  lineSx,
+  nowSx,
+  rowSx,
+  trackSx,
+  whoSx,
+  type Span,
+} from './DayRuler.styles';
+import type { DayRulerBlock, DayRulerRow, RulerHour } from './DayRuler.types';
+import type { RulerDrag, RulerDragApi } from './useRulerDrag';
+
+export const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {
+  const at = percentOf(start, scale.from, scale.to);
+  return { at, share: Math.max(0, percentOf(end, scale.from, scale.to) - at) };
+};
+
+/** What every row of one ruler shares. */
+export interface RowContext {
+  scale: RulerScale;
+  now?: RulerHour;
+  can: RulerAbilities;
+  drag: RulerDrag | null;
+  dragApi: RulerDragApi;
+  onBlockClick?: (blockId: string) => void;
+  onKeyCreate: (row: DayRulerRow) => void;
+  onBlockKey: (event: React.KeyboardEvent, block: DayRulerBlock) => void;
+  createLabel: (row: string) => string;
+  testId: string;
+}
+
+/** The keys a block answers to, for `aria-keyshortcuts`. */
+function shortcutsOf(movable: boolean, resizable: boolean): string | undefined {
+  const keys = [
+    movable ? 'Alt+ArrowLeft Alt+ArrowRight' : '',
+    resizable ? 'Shift+ArrowLeft Shift+ArrowRight Shift+Alt+ArrowLeft Shift+Alt+ArrowRight' : '',
+  ];
+  return keys.filter(Boolean).join(' ') || undefined;
+}
+
+function Handle({ side, onPointerDown, testId }: { side: 'l' | 'r'; onPointerDown: (event: React.PointerEvent<HTMLElement>) => void; testId: string }) {
+  return <Box component="span" aria-hidden sx={handleSx(side)} data-testid={testId} onPointerDown={onPointerDown} />;
+}
+
+interface BlockProps {
+  row: DayRulerRow;
+  block: DayRulerBlock;
+  /** Where it is drawn: its own hours, or where a drag has it now. */
+  span: Span;
+  /** The hours it is drawn at (its own, or a drag's). */
+  at: { start: RulerHour; end: RulerHour };
+  text: string;
+  ctx: RowContext;
+  testId: string;
+}
+
+/**
+ * The block's break, where it falls inside the block as drawn: it moves with a
+ * dragged block (same offset from its start) and is cut to the block's ends.
+ */
+function breakShare(block: DayRulerBlock, start: RulerHour, end: RulerHour): Span | null {
+  const span = block.breakSpan;
+  const length = end - start;
+  if (!span || !(length > 0)) return null;
+  const shift = Math.abs(length - (block.end - block.start)) < 1e-6 ? start - block.start : 0;
+  const a = Math.max(start, span.start + shift);
+  const b = Math.min(end, span.end + shift);
+  if (!(b > a)) return null;
+  return { at: ((a - start) / length) * 100, share: ((b - a) / length) * 100 };
+}
+
+/** The block's break as a hatched band, when it falls inside the block as drawn. */
+function BreakBand({ block, at, testId }: { block: DayRulerBlock; at: BlockProps['at']; testId: string }): React.JSX.Element | null {
+  const gap = breakShare(block, at.start, at.end);
+  if (!gap) return null;
+  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 {
+  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 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 })}
+      title={block.title ?? block.label}
+      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}
+      onClick={() => {
+        if (!dragApi.takeClick()) ctx.onBlockClick?.(block.id);
+      }}
+      onKeyDown={(event: React.KeyboardEvent) => ctx.onBlockKey(event, block)}
+    >
+      <BreakBand block={block} at={at} testId={`${ctx.testId}-break-${block.id}`} />
+      {resizable ? <Handle side="l" onPointerDown={press('start')} testId={`${ctx.testId}-handle-l-${block.id}`} /> : null}
+      <span data-dr-text="full" title={text}>
+        {text}
+      </span>
+      <span data-dr-text="short" title={text}>
+        {block.shortLabel ?? text}
+      </span>
+      {resizable ? <Handle side="r" onPointerDown={press('end')} testId={`${ctx.testId}-handle-r-${block.id}`} /> : null}
+    </Box>
+  );
+}
+
+/** 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;
+  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}
+    </>
+  );
+}
+
+/** 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 {
+  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)}
+      at={{ start: drag.start, end: drag.end }}
+      text={range}
+      ctx={ctx}
+      testId={`${ctx.testId}-preview`}
+    />
+  );
+}
+
+/** The real shift under the blocks, and its label at its start. */
+function Actual({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element | null {
+  const { actual } = row;
+  if (!actual) return null;
+  return (
+    <>
+      <Box sx={actualSx(spanOf(actual.start, actual.end, ctx.scale))} data-testid={`${ctx.testId}-actual-${row.id}`} />
+      {row.actualLabel ? (
+        <Box component="span" sx={actualLabelSx(percentOf(actual.start, ctx.scale.from, ctx.scale.to))}>
+          {row.actualLabel}
+        </Box>
+      ) : null}
+    </>
+  );
+}
+
+/** A row's track: the actual bar, its blocks (or the one being dragged, live) and the now line. */
+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;
+  return (
+    <Box
+      sx={trackSx({ hours: scale.to - scale.from, tickHours: scale.tickHours, interactive: can.create })}
+      data-dr-track=""
+      data-testid={`${ctx.testId}-track-${row.id}`}
+      role={can.create ? 'group' : undefined}
+      tabIndex={can.create ? 0 : undefined}
+      aria-label={can.create ? ctx.createLabel(row.label) : undefined}
+      onPointerDown={can.create ? (event: React.PointerEvent<HTMLElement>) => dragApi.startCreate(event, row.id) : undefined}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (!can.create || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;
+        event.preventDefault();
+        ctx.onKeyCreate(row);
+      }}
+    >
+      <Actual row={row} ctx={ctx} />
+      <Blocks row={row} ctx={ctx} />
+      {showNow ? <Box sx={nowSx(percentOf(now, scale.from, scale.to))} data-testid={`${ctx.testId}-now`} /> : null}
+    </Box>
+  );
+}
+
+/** One person: name, meta and chips · the track · the row's actions. */
+export function RulerRow({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
+  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>
+    </Box>
+  );
+}
+
+/** "Na escala, por hora": a count per hour above the axis. */
+export function Coverage(props: { coverage: readonly number[]; label?: string; scale: RulerScale; testId: string }): React.JSX.Element {
+  const { coverage, label, scale, testId } = props;
+  const hours = scale.to - scale.from;
+  return (
+    <Box sx={lineSx} data-testid={`${testId}-coverage`}>
+      <Box component="span" sx={coverageLabelSx}>
+        {label}
+      </Box>
+      <Box sx={coverageSx(hours)}>
+        {Array.from({ length: hours }, (_, index) => {
+          const count = coverage[index] ?? 0;
+          return (
+            <Box key={index} component="span" sx={coverageCellSx(count)} title={`${formatHour(scale.from + index)} · ${count}`}>
+              {count > 0 ? count : ''}
+            </Box>
+          );
+        })}
+      </Box>
+      <span />
+    </Box>
+  );
+}
+
+/** The hour labels under the coverage row. */
+export function Axis({ scale, testId }: { scale: RulerScale; testId: string }): React.JSX.Element {
+  return (
+    <Box sx={lineSx} data-testid={`${testId}-axis`} aria-hidden>
+      <span />
+      <Box sx={axisSx}>
+        {ticksOf(scale.from, scale.to, scale.tickHours).map((h) => (
+          <span key={h} style={{ left: `${percentOf(h, scale.from, scale.to)}%` }}>
+            {formatHour(h)}
+          </span>
+        ))}
+      </Box>
+      <span />
+    </Box>
+  );
+}