@12-apps/ui 6.86.2 → 6.87.0

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

@@ -0,0 +1,66 @@
+import Box from '@mui/material/Box/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import type * as React from 'react';
+
+import { chipsSx, metaSx, nameButtonSx, nameLineSx, nameTextSx } from './schedule-name.styles';
+
+/** What a row says about its person, in both views. */
+export interface ScheduleNameRow {
+  label: string;
+  meta?: string;
+  metaTone?: 'default' | 'warning';
+  onLabelClick?: () => void;
+  labelAccessible?: string;
+  nameAdornment?: React.ReactNode;
+  chips?: React.ReactNode;
+}
+
+interface ScheduleNameCellProps {
+  row: ScheduleNameRow;
+  /** The cell's own box (where it sits in its view's row). */
+  sx: SxProps<Theme>;
+  /** `rowheader` in the week grid's table; none on the ruler. */
+  role?: string;
+  /** The view's type sizes (px) and the space above the chips (spacing units). */
+  sizes: { name: number; meta: number; chipsTop: number };
+}
+
+/**
+ * The first column of a schedule row (FUT-3825): the name (a button when the
+ * host acts on it), its adornment, its meta line and its chips — one part for
+ * the week grid and the day ruler, so a person reads the same in both.
+ */
+export function ScheduleNameCell({ row, sx, role, sizes }: ScheduleNameCellProps): React.JSX.Element {
+  const name = (
+    <Box component="span" sx={nameTextSx(sizes.name)} title={row.label}>
+      {row.label}
+    </Box>
+  );
+  const named = row.onLabelClick ? (
+    <Box component="button" type="button" sx={nameButtonSx} onClick={row.onLabelClick} aria-label={row.labelAccessible}>
+      {name}
+    </Box>
+  ) : (
+    name
+  );
+  return (
+    <Box role={role} sx={sx}>
+      {row.nameAdornment ? (
+        <Box sx={nameLineSx}>
+          {named}
+          <Box component="span" data-schedule-adornment="">
+            {row.nameAdornment}
+          </Box>
+        </Box>
+      ) : (
+        named
+      )}
+      {row.meta ? (
+        <Box component="span" sx={metaSx(row.metaTone ?? 'default', sizes.meta)} title={row.meta}>
+          {row.meta}
+        </Box>
+      ) : null}
+      {row.chips ? <Box sx={chipsSx(sizes.chipsTop)}>{row.chips}</Box> : null}
+    </Box>
+  );
+}

package/src/components/data-display/ScheduleGrid/drag-session.ts

@@ -0,0 +1,120 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * WHAT THE WEEK GRID'S AND THE DAY RULER'S DRAGS SHARE (FUT-3825): the window
+ * listeners a running drag needs, the ways to abort one, and the click a
+ * finished or aborted drag leaves behind.
+ */
+
+/** Why a drag ended without being committed. */
+export type DragAbort =
+  /** Escape pressed while dragging: the button may still be down. */
+  | 'escape'
+  /** The window lost focus (another app, a dialog): the release may never reach the page. */
+  | 'blur'
+  /** A move arrived with no button down: the release happened where the page could not see it. */
+  | 'released'
+  /** The browser took the pointer (a scroll, a system gesture). */
+  | 'pointercancel';
+
+export interface DragWindowHandlers {
+  move: (event: PointerEvent) => void;
+  /** The release, wherever it happens: a release outside the grid still commits. */
+  up: (event: PointerEvent) => void;
+  abort: (reason: DragAbort) => void;
+}
+
+/**
+ * Listen on the window while `active`: moves, the release, and the four ways a
+ * drag is abandoned. Escape is taken in the capture phase and stopped there,
+ * so a drawer or dialog around the grid does not also close on it.
+ */
+export function useDragWindow(active: boolean, handlers: DragWindowHandlers): void {
+  const latest = useRef(handlers);
+  latest.current = handlers;
+  useEffect(() => {
+    if (!active) return undefined;
+    const onMove = (event: PointerEvent): void => {
+      if (event.buttons === 0) latest.current.abort('released');
+      else latest.current.move(event);
+    };
+    const onUp = (event: PointerEvent): void => latest.current.up(event);
+    const onCancel = (): void => latest.current.abort('pointercancel');
+    const onBlur = (): void => latest.current.abort('blur');
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopPropagation();
+      latest.current.abort('escape');
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onCancel);
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('keydown', onKey, true);
+    };
+  }, [active]);
+}
+
+export interface TrailingClick {
+  /**
+   * Ignore the click this gesture leaves behind. `released`: the button is
+   * already up (a commit), so that click is in flight now; otherwise (an
+   * abort with the button still down) it follows the coming release.
+   */
+  arm: (released: boolean) => void;
+  /** A new drag starts: nothing to ignore. */
+  reset: () => void;
+  /** True once, for the click to ignore. */
+  take: () => boolean;
+}
+
+/**
+ * The click a drag leaves behind, and only that one: the flag lives until the
+ * task after the release (the browser dispatches the release's click before
+ * any task runs) and dies with the next press, so a later click on anything —
+ * a block that cannot move, another cell — is never eaten.
+ */
+export function useTrailingClick(): TrailingClick {
+  const armed = useRef(false);
+  const undo = useRef<(() => void) | null>(null);
+
+  const clear = (): void => {
+    armed.current = false;
+    undo.current?.();
+    undo.current = null;
+  };
+
+  useEffect(() => clear, []);
+
+  const arm = (released: boolean): void => {
+    clear();
+    armed.current = true;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const later = (): void => {
+      timer = setTimeout(clear, 0);
+    };
+    window.addEventListener('pointerdown', clear, true);
+    if (released) later();
+    else window.addEventListener('pointerup', later, { capture: true, once: true });
+    undo.current = () => {
+      if (timer !== undefined) clearTimeout(timer);
+      window.removeEventListener('pointerdown', clear, true);
+      window.removeEventListener('pointerup', later, true);
+    };
+  };
+
+  const take = (): boolean => {
+    const swallow = armed.current;
+    if (swallow) clear();
+    return swallow;
+  };
+
+  return { arm, reset: clear, take };
+}

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

@@ -0,0 +1,12 @@
+export { ScheduleGrid } from './ScheduleGrid';
+export type {
+  ScheduleBlockBreak,
+  ScheduleBlockTone,
+  ScheduleGridBlock,
+  ScheduleGridCell,
+  ScheduleGridColumn,
+  ScheduleGridGroup,
+  ScheduleGridProps,
+  ScheduleGridRow,
+} from './ScheduleGrid.types';
+export type { ScheduleGridLabels } from '../../../copy/labels';

package/src/components/data-display/ScheduleGrid/schedule-grid-model.ts

@@ -0,0 +1,39 @@
+import type { ScheduleGridCell } from './ScheduleGrid.types';
+
+/**
+ * THE GRID'S RULES, as pure functions (FUT-3825): which days a gesture lands
+ * on. The host decides everything else — hours, limits, refusals.
+ */
+
+/** A cell that can take a new turno: nothing in it and not closed to the row. */
+export function isOpen(cell: ScheduleGridCell): boolean {
+  return !cell.blocked && cell.blocks.length === 0;
+}
+
+/** Every day from `a` to `b` inclusive, in order, whichever is larger. */
+export function daysBetween(a: number, b: number): number[] {
+  const from = Math.min(a, b);
+  const to = Math.max(a, b);
+  return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+}
+
+/** A create across `anchor…current` of one row: the crossed days that are open (G-R1). */
+export function createTargets(cellOf: (day: number) => ScheduleGridCell, anchor: number, current: number): number[] {
+  return daysBetween(anchor, current).filter((day) => isOpen(cellOf(day)));
+}
+
+/** A copy of the block on `source` across `source…current`: never its own day, never a taken or closed one (G-R2). */
+export function copyTargets(cellOf: (day: number) => ScheduleGridCell, source: number, current: number): number[] {
+  return daysBetween(source, current).filter((day) => day !== source && isOpen(cellOf(day)));
+}
+
+/** A move may land on an open cell that is not its own (G-R3). */
+export function canDrop(target: ScheduleGridCell, sameCell: boolean): boolean {
+  return !sameCell && isOpen(target);
+}
+
+/** The day one step left (-1) or right (+1) of `day`, or `undefined` past either end. */
+export function stepDay(day: number, direction: -1 | 1, dayCount: number): number | undefined {
+  const next = day + direction;
+  return next >= 0 && next < dayCount ? next : undefined;
+}

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

@@ -0,0 +1,96 @@
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+
+import { rem } from '../../../tokens/relative';
+import { SCHEDULE_NAME_METRICS as M } from './ScheduleGrid.metrics';
+import { signalInk } from './schedule-tones';
+
+/**
+ * THE PERSON'S NAME COLUMN, shared by the week grid and the day ruler
+ * (FUT-3825): one look for the name, its adornment, its meta line and chips.
+ * Each view passes its own type sizes; everything else is the same.
+ */
+
+/** The name as a button: it reads as text, underlines under the pointer. */
+export const nameButtonSx: SxProps<Theme> = (theme: Theme) => ({
+  // A block of its content's width: an inline-block button would sit on the
+  // line's baseline and its strut would push the meta 6px down.
+  display: 'block',
+  width: 'fit-content',
+  maxWidth: '100%',
+  font: 'inherit',
+  background: 'transparent',
+  border: 0,
+  color: 'inherit',
+  p: 0,
+  textAlign: 'left',
+  cursor: 'pointer',
+  minHeight: rem(theme, M.button.minHeight),
+  borderRadius: rem(theme, M.button.radius),
+  position: 'relative',
+  // A 40px hit area around the 24px name, the look unchanged (a phone's finger).
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '50%',
+    height: rem(theme, M.button.hitArea),
+    transform: 'translateY(-50%)',
+  },
+  '&:hover > span': { textDecoration: 'underline' },
+  '&:focus-visible': {
+    outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`,
+    outlineOffset: rem(theme, M.button.ringOffset),
+  },
+});
+
+/** At most two lines, the rest cut with an ellipsis (the whole text in `title`). */
+const twoLines = {
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  overflow: 'hidden',
+  overflowWrap: 'anywhere',
+} as const;
+
+export function nameTextSx(size: number): SxProps<Theme> {
+  return (theme: Theme) => ({ ...twoLines, fontSize: rem(theme, size), fontWeight: 500 });
+}
+
+/** The line under the name; `warning` in the signal's ink, readable on the page. */
+export function metaSx(tone: 'default' | 'warning', size: number): SxProps<Theme> {
+  return (theme: Theme) => ({
+    ...twoLines,
+    fontSize: rem(theme, size),
+    mt: 0.25,
+    color: tone === 'warning' ? signalInk(theme, 'warning', theme.palette.background.default) : theme.palette.text.secondary,
+  });
+}
+
+/** The name and its adornment: one line while both fit, the adornment under the name when not. */
+export const nameLineSx: SxProps<Theme> = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  columnGap: 0.75,
+  rowGap: 0.25,
+  minWidth: 0,
+  '& > :first-of-type': { minWidth: 0 },
+  '& > [data-schedule-adornment]': { flexShrink: 0, display: 'inline-flex' },
+};
+
+/** The host's chips under the meta: ONE line; a chip that does not fit shrinks and cuts its label. `top` in spacing units. */
+export function chipsSx(top: number): SxProps<Theme> {
+  return {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    gap: 0.75,
+    mt: top,
+    minWidth: 0,
+    overflow: 'hidden',
+    // Over the name button's 40px hit area, which reaches into the space above them.
+    position: 'relative',
+    zIndex: 1,
+    '& > *': { minWidth: 0, flexShrink: 1, maxWidth: '100%' },
+  };
+}

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

@@ -0,0 +1,126 @@
+import type { Theme } from '@mui/material/styles/index.js';
+import type { CSSObject } from '@mui/material/styles/index.js';
+
+import { blend, darken, decomposeColor, getContrastRatio, getLuminance, lighten } from '../../../tokens/color';
+import { fieldEdge } from '../../../tokens/field-edge';
+import { absoluteInk } from '../../../tokens/ink';
+import { softSignal, surfaces } from '../../../tokens/surfaces';
+import type { ScheduleBlockTone } from './ScheduleGrid.types';
+
+/** WCAG AA for a block's text (12px, not large): every tone's ink clears it on its ground. */
+export const TONE_TEXT_CONTRAST = 4.5;
+
+/** A translucent colour as it shows over an opaque `ground`. */
+function flatten(ground: string, overlay: string): string {
+  const { values, type } = decomposeColor(overlay);
+  const opacity = type.endsWith('a') ? (values[3] ?? 1) : 1;
+  return blend(ground, overlay, opacity);
+}
+
+/** The ground a block with no fill of its own sits on: a cell (or a track) over the page. */
+export function cellGround(theme: Theme): string {
+  return flatten(theme.palette.background.default, theme.palette.action.hover);
+}
+
+/** The first ink that reads at {@link TONE_TEXT_CONTRAST} on `ground`; none does, the one that reads best. */
+export function readableInk(ground: string, candidates: readonly string[]): string {
+  let best = candidates[0] ?? '';
+  let bestRatio = -1;
+  for (const ink of candidates) {
+    const ratio = getContrastRatio(flatten(ground, ink), ground);
+    if (ratio >= TONE_TEXT_CONTRAST) return ink;
+    if (ratio > bestRatio) [best, bestRatio] = [ink, ratio];
+  }
+  return best;
+}
+
+/** `color`, then ten steps of it towards whichever end reads on `ground` — the hue kept as long as it can be. */
+function deepening(color: string, ground: string): string[] {
+  const toward = getLuminance(ground) > LUMINANCE_MIDPOINT ? darken : lighten;
+  return Array.from({ length: 11 }, (_, step) => (step === 0 ? color : toward(color, step / 10)));
+}
+
+/** Where black and white read equally well on a ground (WCAG luminance). */
+const LUMINANCE_MIDPOINT = 0.179;
+
+/**
+ * The signal's readable ink on a ground that is not its own colour: its deep
+ * step on a light ground, its light step on a dark one, deepened further until
+ * it reads at 4.5:1 (MUI's `warning.dark` is 3.6:1 on a light cell).
+ */
+export function signalInk(theme: Theme, signal: 'warning' | 'success', ground: string): string {
+  const step = theme.palette.mode === 'dark' ? theme.palette[signal].light : theme.palette[signal].dark;
+  return readableInk(ground, deepening(step, ground));
+}
+
+/**
+ * The ink on a solid signal fill: the palette's own `contrastText` when it
+ * reads (a host's brand decision), else the page's own text, else black or
+ * white — MUI's default `warning` has white at 3.1:1 on its orange; the
+ * prototype writes it in the dark ink.
+ */
+function inkOnFill(theme: Theme, fill: string, incumbent: string): string {
+  const { black, white } = absoluteInk(theme);
+  return readableInk(fill, [incumbent, theme.palette.text.primary, black, white]);
+}
+
+/**
+ * How a block of each tone is drawn — in the week grid and on the day ruler
+ * alike, so one tone reads the same in both views. `dashedPlan` is the ruler's
+ * escala block (a dashed outline over a faint ground); the grid's plan block is
+ * a raised chip. Never colour alone: every tone also carries its note text.
+ */
+export function blockToneStyles(theme: Theme, tone: ScheduleBlockTone, dashedPlan = false): CSSObject {
+  const hairline = '1px solid';
+  switch (tone) {
+    case 'late':
+      return {
+        backgroundColor: theme.palette.warning.main,
+        color: inkOnFill(theme, theme.palette.warning.main, theme.palette.warning.contrastText),
+        border: `${hairline} ${theme.palette.warning.main}`,
+      };
+    case 'away':
+    case 'uncovered':
+      return {
+        backgroundColor: 'transparent',
+        color: signalInk(theme, 'warning', cellGround(theme)),
+        border: `1px dashed ${theme.palette.warning.main}`,
+      };
+    case 'onduty':
+      return {
+        backgroundColor: softSignal(theme, 'success'),
+        color: theme.palette.text.primary,
+        border: `${hairline} ${theme.palette.success.main}`,
+      };
+    case 'plan':
+    default:
+      return dashedPlan
+        ? {
+            backgroundColor: theme.palette.action.hover,
+            color: theme.palette.text.primary,
+            border: `1px dashed ${theme.palette.text.secondary}`,
+          }
+        : {
+            backgroundColor: surfaces(theme).raised,
+            color: theme.palette.text.primary,
+            border: `${hairline} ${fieldEdge(theme, surfaces(theme).raised)}`,
+          };
+  }
+}
+
+/**
+ * A break inside a block (a meal break): the page's own ground with diagonal
+ * stripes of the disabled action colour, opaque, so the block reads as CUT there in any
+ * tone, light or dark. `stripe` / `period` are CSS lengths (a stripe and the
+ * stripe plus its gap).
+ */
+export function breakHatch(theme: Theme, stripe: string, period: string): string {
+  const ink = theme.palette.action.disabled;
+  const ground = theme.palette.background.default;
+  return `repeating-linear-gradient(135deg, ${ink} 0, ${ink} ${stripe}, ${ground} ${stripe}, ${ground} ${period}), ${ground}`;
+}
+
+/** The thin bar under a ruler row that says the shift is really running. */
+export function actualBarColor(theme: Theme): string {
+  return theme.palette.success.main;
+}

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

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * The live region's sentence, for the week grid and the day ruler (FUT-3825).
+ *
+ * The region stays mounted: a screen reader watches the node it found, and a
+ * region swapped for a new one per sentence is announced unreliably or not at
+ * all. Each sentence clears the region first and is written on the next frame,
+ * so the same sentence twice ("refused", "refused") is a change both times.
+ */
+export function useAnnouncer(): { text: string; say: (text: string) => void } {
+  const [text, setText] = useState('');
+  const frame = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+    },
+    [],
+  );
+
+  const say = useCallback((next: string): void => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    setText('');
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null;
+      setText(next);
+    });
+  }, []);
+
+  return { text, say };
+}

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

@@ -0,0 +1,137 @@
+import type * as React from 'react';
+import { useCallback, useRef, useState } from 'react';
+
+import { useDragWindow, useTrailingClick } from './drag-session';
+import { canDrop, copyTargets, createTargets } from './schedule-grid-model';
+import type { ScheduleGridCell } from './ScheduleGrid.types';
+
+/** The gesture in progress, and where the pointer is now. */
+export type GridDrag =
+  | { mode: 'create'; rowId: string; anchor: number; day: number; moved: boolean }
+  | { mode: 'copy'; rowId: string; blockId: string; preview: string; anchor: number; day: number; moved: boolean }
+  | { mode: 'move'; blockId: string; fromRow: string; fromDay: number; rowId: string; day: number; moved: boolean };
+
+interface DragHandlers {
+  cell: (rowId: string, day: number) => ScheduleGridCell;
+  onCreate?: (rowId: string, days: number[]) => void;
+  onCopy?: (blockId: string, days: number[]) => void;
+  onMove?: (blockId: string, toRowId: string, toDay: number) => void;
+}
+
+export interface GridDragApi {
+  drag: GridDrag | null;
+  /** Pointer down on an empty cell. */
+  startCreate: (event: React.PointerEvent, rowId: string, day: number) => void;
+  /** Pointer down on a block's edge grip. */
+  startCopy: (event: React.PointerEvent, blockId: string, rowId: string, day: number, preview: string) => void;
+  /** Pointer down on a block's middle. */
+  startMove: (event: React.PointerEvent, blockId: string, rowId: string, day: number) => void;
+  /** True once, for the click a finished drag leaves behind — the caller ignores that click. */
+  takeClick: () => boolean;
+}
+
+/** A drag starts only for the primary button of a mouse or a pen: touch scrolls, and taps are clicks. */
+function startsDrag(event: React.PointerEvent): boolean {
+  return event.pointerType !== 'touch' && (event.button ?? 0) === 0;
+}
+
+/** The cell under a pointer event, from the `data-sg-*` attributes of the cell element. */
+function cellUnder(target: EventTarget | null, root: HTMLElement | null): { rowId: string; day: number } | null {
+  if (!(target instanceof Element) || !root) return null;
+  const cell = target.closest<HTMLElement>('[data-sg-cell]');
+  if (!cell || !root.contains(cell)) return null;
+  const rowId = cell.dataset.sgRow;
+  const day = Number(cell.dataset.sgDay);
+  return rowId !== undefined && Number.isInteger(day) ? { rowId, day } : null;
+}
+
+/** A create drag: every crossed day that is open. A press in place is left to the "+"'s own click. */
+function finishCreate(drag: Extract<GridDrag, { mode: 'create' }>, handlers: DragHandlers): boolean {
+  if (!drag.moved) return false;
+  const days = createTargets((day) => handlers.cell(drag.rowId, day), drag.anchor, drag.day);
+  if (days.length > 0) handlers.onCreate?.(drag.rowId, days);
+  return true;
+}
+
+/** A grip drag: the crossed days but the block's own. A grip pressed in place is not the block's click either. */
+function finishCopy(drag: Extract<GridDrag, { mode: 'copy' }>, handlers: DragHandlers): boolean {
+  const days = copyTargets((day) => handlers.cell(drag.rowId, day), drag.anchor, drag.day);
+  if (days.length > 0) handlers.onCopy?.(drag.blockId, days);
+  return true;
+}
+
+/** A middle drag: dropped on an open cell that is not its own. Not moved, it is the block's click. */
+function finishMove(drag: Extract<GridDrag, { mode: 'move' }>, handlers: DragHandlers): boolean {
+  if (!drag.moved) return false;
+  const same = drag.rowId === drag.fromRow && drag.day === drag.fromDay;
+  if (canDrop(handlers.cell(drag.rowId, drag.day), same)) handlers.onMove?.(drag.blockId, drag.rowId, drag.day);
+  return true;
+}
+
+/** Report the finished gesture to the host. Returns whether the trailing click must be ignored. */
+function finish(drag: GridDrag, handlers: DragHandlers): boolean {
+  if (drag.mode === 'create') return finishCreate(drag, handlers);
+  if (drag.mode === 'copy') return finishCopy(drag, handlers);
+  return finishMove(drag, handlers);
+}
+
+/**
+ * Click-and-drag on the week grid (FUT-3825): create across empty cells of one
+ * row, copy a block along its row by an edge grip, move a block by its middle.
+ *
+ * Window listeners while a drag runs, so the pointer may leave the grid and
+ * come back, and a release anywhere commits; the cell under the pointer comes
+ * from the event's own target (a mouse is never captured, so it is the
+ * element under the pointer). Escape, the window losing focus, or a move with
+ * no button down abandons the drag: nothing is reported.
+ */
+export function useGridDrag(rootRef: React.RefObject<HTMLElement | null>, handlers: DragHandlers): GridDragApi {
+  const [drag, setDrag] = useState<GridDrag | null>(null);
+  const live = useRef<GridDrag | null>(null);
+  const latest = useRef(handlers);
+  latest.current = handlers;
+  const click = useTrailingClick();
+
+  const set = useCallback((next: GridDrag | null) => {
+    live.current = next;
+    setDrag(next);
+  }, []);
+
+  useDragWindow(drag !== null, {
+    move: (event) => {
+      const current = live.current;
+      const under = cellUnder(event.target, rootRef.current);
+      if (!current || !under) return;
+      const rowId = current.mode === 'move' ? under.rowId : current.rowId;
+      if (under.day === current.day && rowId === current.rowId) return;
+      set({ ...current, rowId, day: under.day, moved: true } as GridDrag);
+    },
+    up: () => {
+      const current = live.current;
+      set(null);
+      if (current && finish(current, latest.current)) click.arm(true);
+    },
+    // Abandoned: nothing reported, the ghost and the highlight gone. With the
+    // button still down, the click its release leaves is not a click either.
+    abort: (reason) => {
+      set(null);
+      if (reason === 'escape' || reason === 'blur') click.arm(false);
+    },
+  });
+
+  const begin = (event: React.PointerEvent, next: GridDrag): void => {
+    if (!startsDrag(event)) return;
+    click.reset();
+    set(next);
+  };
+  const startCreate = (event: React.PointerEvent, rowId: string, day: number): void =>
+    begin(event, { mode: 'create', rowId, anchor: day, day, moved: false });
+  const startCopy = (event: React.PointerEvent, blockId: string, rowId: string, day: number, preview: string): void => {
+    event.stopPropagation();
+    begin(event, { mode: 'copy', rowId, blockId, preview, anchor: day, day, moved: false });
+  };
+  const startMove = (event: React.PointerEvent, blockId: string, rowId: string, day: number): void =>
+    begin(event, { mode: 'move', blockId, fromRow: rowId, fromDay: day, rowId, day, moved: false });
+
+  return { drag, startCreate, startCopy, startMove, takeClick: click.take };
+}