@eocrm/design-system 0.6.24 → 0.8.0

package/src/components/Calendar/useEventDrag.ts

@@ -1,783 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type MutableRefObject,
-  type PointerEvent,
-} from 'react';
-import { startOfDay } from '../../calendar/dateMath';
-import type {
-  CalendarDropCandidate,
-  CalendarDropResult,
-  CalendarEvent,
-  CalendarEventMove,
-  CalendarEventResize,
-  TimedEventBlock,
-} from './types';
-import type { HourGridColumnRef } from './utils';
-
-/** Which gesture a drag represents. */
-export type DragMode = 'move' | 'resize';
-
-/**
- * The live, uncommitted placement of the block being dragged.
- *
- * `startMinutes` / `endMinutes` are grid coordinates for rendering; `startsAt`
- * / `endsAt` are the projected instants the consumer will be offered. They are
- * computed together so the block's rendered position, its visible time label,
- * and the payload can never disagree.
- */
-export interface DragPreview {
-  /** `CalendarEvent.id` of the block being dragged. */
-  eventId: string;
-  mode: DragMode;
-  /** Column the block currently hovers over — may differ from where it started. */
-  columnIndex: number;
-  /** Minutes from `hourRange[0] * 60`. May sit outside the visible window (see `project`). */
-  startMinutes: number;
-  /** Minutes from `hourRange[0] * 60`. May sit outside the visible window (see `project`). */
-  endMinutes: number;
-  /** Projected start instant — `startsAt` of the proposal. */
-  startsAt: Date;
-  /** Projected end instant — `endsAt` of the proposal. */
-  endsAt: Date;
-  /** `canDropEvent` refused this placement — styled as a refused drop while the pointer rests on it. */
-  invalid: boolean;
-  /** The bounds moved the requested value — the gesture asked to go further than it may. */
-  clamped: boolean;
-}
-
-/** Pixels the pointer must travel before a press becomes a drag rather than a click. */
-const DRAG_THRESHOLD_PX = 3;
-
-/**
- * What the grid should announce in its live region. The hook reports the
- * placement and the outcome; the caller owns the wording, because formatting a
- * time is locale work and every user-facing string has to come from i18n.
- */
-export interface DragAnnouncement {
-  /** The event being dragged — every message names it, as the rest of the library's drag a11y does. */
-  event: CalendarEvent;
-  mode: DragMode;
-  startsAt: Date;
-  endsAt: Date;
-  /** The placement was refused — by `canDropEvent` mid-drag, or by the handler on drop. */
-  refused: boolean;
-  /** The gesture asked to go further than the grid allows, so nothing changed. */
-  atEdge: boolean;
-  /** The gesture ended exactly where it started — nothing refused it, it simply moved nothing. */
-  unchanged: boolean;
-  /** The gesture was abandoned (pointer cancelled, window blurred) and proposed nothing. */
-  cancelled: boolean;
-  /** Monotonic, so an identical message still re-announces. */
-  seq: number;
-}
-
-export interface UseEventDragArgs {
-  /** The grid's columns, in render order. */
-  columns: readonly HourGridColumnRef[];
-  /** Pixel height of one hour row — the px↔minutes conversion factor. */
-  hourRowHeight: number;
-  /** Inclusive start, exclusive end of the visible hour range. */
-  hourRange: readonly [number, number];
-  /** Snap granularity in minutes. Values below 1 are treated as 1. */
-  snapMinutes: number;
-  /** Live DOM nodes of the day columns, for pointer hit-testing. */
-  columnElements: MutableRefObject<(HTMLElement | null)[]>;
-  onEventMove?: (event: CalendarEvent, next: CalendarEventMove) => CalendarDropResult;
-  onEventResize?: (event: CalendarEvent, next: CalendarEventResize) => CalendarDropResult;
-  canDropEvent?: (event: CalendarEvent, next: CalendarDropCandidate) => boolean;
-}
-
-export interface UseEventDragResult {
-  /** The in-flight placement, or `null` when nothing is being dragged. */
-  preview: DragPreview | null;
-  /** Latest thing worth announcing, or `null` before any gesture. */
-  announcement: DragAnnouncement | null;
-  /** True while a drag gesture owns the pointer. */
-  dragging: boolean;
-  /** Whether this grid accepts move gestures at all. */
-  canMove: boolean;
-  /** Whether this grid accepts resize gestures at all. */
-  canResize: boolean;
-  /** Begin a pointer drag from a `pointerdown` on a block (or its resize handle). */
-  startPointerDrag: (block: TimedEventBlock, mode: DragMode, e: PointerEvent) => void;
-  /** Keyboard equivalent: nudge a block by whole snap steps and/or whole columns. */
-  nudge: (
-    block: TimedEventBlock,
-    delta: { mode: DragMode; steps: number; columns?: number },
-  ) => void;
-  /** True when the click that follows the drag we just finished must be swallowed. */
-  consumeClickSuppression: () => boolean;
-  /** Clear a stale suppression flag at the start of any fresh press. */
-  resetClickSuppression: () => void;
-}
-
-/**
- * The gesture's semantic starting point, captured once when it begins.
- *
- * This exists to keep `TimedEventBlock` out of the projection entirely. A
- * block carries *render* coordinates: `endMinutes` is clipped to the bottom of
- * the column for anything ending on a later day (`layoutEventsForHourGrid`),
- * and reading it for a semantic decision is what produced every drag bug this
- * component has had — a truncated overnight booking, a reversed gesture, a
- * no-op guard that could never match. The frame is derived from the
- * `CalendarEvent`, so clipping cannot leak into a proposal.
- *
- * Invariant for everything below: the controller reads `frame`, never `block`.
- */
-interface DragFrame {
-  event: CalendarEvent;
-  /** Column the gesture started in. */
-  columnIndex: number;
-  /** Minutes from `hourRange[0] * 60` to the event's real start. May be negative. */
-  startMinutes: number;
-  /**
-   * Minutes from `hourRange[0] * 60` to the event's real end, in WALL-CLOCK
-   * minutes. Never clipped. This is grid geometry — it is what the block's
-   * height is drawn from and what the bounds and the no-op check compare.
-   */
-  endMinutes: number;
-  /**
-   * ELAPSED milliseconds between the event's start and end.
-   *
-   * Kept separately from the wall-clock span because on a daylight-saving day
-   * the two genuinely differ, and each is right for a different job: the grid
-   * draws wall-clock (01:00–05:00 occupies four rows even though only three
-   * hours pass), while a booking IS its elapsed time — a 30-minute
-   * appointment takes 30 real minutes on any day of the year. The proposal
-   * therefore preserves this, not the row count.
-   */
-  durationMs: number;
-}
-
-/** A Date on `day`'s calendar date, at `minutes` past local midnight. */
-function dateAtMinutes(day: Date, minutes: number): Date {
-  const d = startOfDay(day);
-  // Wall-clock arithmetic, and it rolls past 24:00 into the next day — which
-  // is what an overnight booking needs.
-  d.setMinutes(d.getMinutes() + minutes);
-  return d;
-}
-
-/** Round to the nearest multiple of `snap` (always >= 1 so this can't divide by zero). */
-function snapTo(minutes: number, snap: number): number {
-  return Math.round(minutes / snap) * snap;
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-/** Capture the semantic frame for a gesture on `block`. */
-function frameOf(block: TimedEventBlock, baseMinutes: number): DragFrame {
-  const { event } = block;
-  const start = event.startsAt;
-  const startMinutes = start.getHours() * 60 + start.getMinutes() - baseMinutes;
-  const end = event.endsAt ?? event.startsAt;
-  // Wall-clock, NOT elapsed: `dateAtMinutes` projects in wall-clock minutes,
-  // so an elapsed-ms duration disagrees with it by an hour either side of a
-  // daylight-saving transition — proposing a resize that changes nothing, or
-  // a move that silently loses an hour.
-  const dayDiff = Math.round(
-    (startOfDay(end).getTime() - startOfDay(start).getTime()) / 86_400_000,
-  );
-  const startWall = start.getHours() * 60 + start.getMinutes();
-  const endWall = end.getHours() * 60 + end.getMinutes();
-  const wallMinutes = Math.max(0, dayDiff * 24 * 60 + (endWall - startWall));
-  return {
-    event,
-    columnIndex: block.dayIndex,
-    startMinutes,
-    endMinutes: startMinutes + wallMinutes,
-    durationMs: Math.max(0, end.getTime() - start.getTime()),
-  };
-}
-
-interface ProjectionConfig {
-  columns: readonly HourGridColumnRef[];
-  baseMinutes: number;
-  visibleMinutes: number;
-  snap: number;
-}
-
-/**
- * Turn a raw target (in grid minutes) into a fully-resolved preview: snapped,
- * bounded, and projected to real instants.
- *
- * **One invariant governs both bounds: the allowed range always contains the
- * value the gesture started from.** That is what keeps a clamp honest — it can
- * refuse to move further, but it can never move the event in the direction
- * opposite to the one the user asked for. Without it, an event already sitting
- * outside the window (clipped at the top of the grid, or ending after
- * midnight) gets yanked *into* the window by a gesture that asked to push it
- * further out.
- *
- * Within that invariant:
- * - a move keeps the start inside the visible window, because an unclamped
- *   upward drag goes negative and projects back into the previous calendar
- *   day — a proposal for a date the pointer never visited. The end is free to
- *   fall outside; an overnight booking must keep its duration.
- * - a resize may grow the event by at most a day per gesture, which stops a
- *   runaway pointer delta rolling through whole dates while leaving every
- *   duration — including a multi-day one — reachable.
- */
-function project(
-  frame: DragFrame,
-  mode: DragMode,
-  columnIndex: number,
-  target: number,
-  cfg: ProjectionConfig,
-  /** Skip snapping — the caller already decided the exact target (a pure column change). */
-  presnapped = false,
-): DragPreview {
-  const column = cfg.columns[columnIndex] ?? cfg.columns[frame.columnIndex];
-  const duration = frame.endMinutes - frame.startMinutes;
-
-  if (mode === 'move') {
-    const requested = presnapped ? target : snapTo(target, cfg.snap);
-    const startMinutes = clamp(
-      requested,
-      Math.min(0, frame.startMinutes),
-      Math.max(cfg.visibleMinutes - cfg.snap, frame.startMinutes),
-    );
-    const movedStart = dateAtMinutes(column.date, cfg.baseMinutes + startMinutes);
-    return {
-      eventId: frame.event.id,
-      mode,
-      columnIndex,
-      startMinutes,
-      endMinutes: startMinutes + duration,
-      clamped: startMinutes !== requested,
-      startsAt: movedStart,
-      // Offset from the projected START by the event's ELAPSED duration, not
-      // recomputed from midnight in wall-clock minutes. Recomputing collapses
-      // on a spring-forward day — 02:00 and 03:00 are the same instant, so a
-      // 60-minute booking dragged onto the skipped hour came back with
-      // `endsAt === startsAt`, a zero-length proposal.
-      endsAt: new Date(movedStart.getTime() + frame.durationMs),
-      invalid: false,
-    };
-  }
-
-  // Resize leaves the start alone — including when it sits above the visible
-  // window (an event that began before `hourRange`).
-  //
-  // The ceiling bounds the CHANGE (a day's growth per gesture), not the
-  // absolute duration. An absolute cap collapses onto the current end for
-  // anything already that long, which — combined with the no-op check in
-  // `commit` — silently swallows every attempt to lengthen a multi-day event.
-  const startMinutes = frame.startMinutes;
-  const requested = presnapped ? target : snapTo(target, cfg.snap);
-  const endMinutes = clamp(
-    requested,
-    // Symmetrical with the ceiling: a gesture may shrink by at most a day too,
-    // so a runaway delta can't collapse a three-day booking to 15 minutes.
-    Math.max(Math.min(startMinutes + cfg.snap, frame.endMinutes), frame.endMinutes - 24 * 60),
-    frame.endMinutes + 24 * 60,
-  );
-  return {
-    eventId: frame.event.id,
-    mode,
-    columnIndex,
-    startMinutes,
-    endMinutes,
-    clamped: endMinutes !== requested,
-    startsAt: frame.event.startsAt,
-    endsAt: dateAtMinutes(column.date, cfg.baseMinutes + endMinutes),
-    invalid: false,
-  };
-}
-
-/** Duck-typed thenable check — a consumer may return a non-native promise. */
-function isThenable(value: unknown): value is Promise<void | boolean> {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    typeof (value as { then?: unknown }).then === 'function'
-  );
-}
-
-/**
- * Pointer + keyboard drag controller for the hour grid's timed blocks.
- *
- * Hand-rolled on pointer events rather than built on `@dnd-kit`: the gesture
- * is a continuous px→minutes projection onto one shared time axis, not a
- * sortable list reorder, so the sensor/collision machinery would be pure
- * overhead here.
- *
- * The consumer stays the source of truth. A drop is *proposed*, never
- * applied: `canDropEvent` vetoes it live during the gesture, and the preview
- * renders refused for as long as the pointer sits on a refused slot.
- * `onEventMove` / `onEventResize` can also veto on release, by returning
- * `false` or a promise that resolves `false` or rejects; that verdict is
- * announced in the live region rather than styled, because by then the
- * gesture is over and the preview is being discarded either way. The block's
- * resting position always comes from `events`, so an accepted drop only moves
- * anything because the consumer commits it. Nothing here mutates the event.
- */
-export function useEventDrag({
-  columns,
-  hourRowHeight,
-  hourRange,
-  snapMinutes,
-  columnElements,
-  onEventMove,
-  onEventResize,
-  canDropEvent,
-}: UseEventDragArgs): UseEventDragResult {
-  const [preview, setPreview] = useState<DragPreview | null>(null);
-  const [dragging, setDragging] = useState(false);
-  const [announcement, setAnnouncement] = useState<DragAnnouncement | null>(null);
-  const seqRef = useRef(0);
-
-  const announce = useCallback(
-    (
-      event: CalendarEvent,
-      p: DragPreview,
-      opts: { refused?: boolean; atEdge?: boolean; unchanged?: boolean; cancelled?: boolean } = {},
-    ) => {
-      seqRef.current += 1;
-      setAnnouncement({
-        event,
-        mode: p.mode,
-        startsAt: p.startsAt,
-        endsAt: p.endsAt,
-        refused: opts.refused ?? false,
-        atEdge: opts.atEdge ?? false,
-        unchanged: opts.unchanged ?? false,
-        cancelled: opts.cancelled ?? false,
-        seq: seqRef.current,
-      });
-    },
-    [],
-  );
-
-  const canMove = onEventMove !== undefined;
-  const canResize = onEventResize !== undefined;
-  const snap = Math.max(1, Math.round(snapMinutes));
-  const baseMinutes = hourRange[0] * 60;
-  const visibleMinutes = Math.max(0, (hourRange[1] - hourRange[0]) * 60);
-
-  // Mutable gesture bookkeeping. Kept in a ref (not state) so the window
-  // listeners below can be registered exactly once per gesture instead of
-  // re-subscribing on every pointermove.
-  const gestureRef = useRef<{
-    token: number;
-    frame: DragFrame;
-    mode: DragMode;
-    pointerId: number;
-    originX: number;
-    originY: number;
-    moved: boolean;
-  } | null>(null);
-  const previewRef = useRef<DragPreview | null>(null);
-  const suppressClickRef = useRef(false);
-  // Monotonic gesture id. A settling async commit from gesture N must not tear
-  // down gesture N+1 that the user has already started.
-  const tokenRef = useRef(0);
-
-  // Latest props, read by the window listeners without re-subscribing. Synced
-  // in an effect so the values the listeners see are always ones that actually
-  // committed.
-  const latest = useRef({
-    columns,
-    hourRowHeight,
-    baseMinutes,
-    visibleMinutes,
-    snap,
-    canDropEvent,
-    columnElements,
-  });
-  useEffect(() => {
-    latest.current = {
-      columns,
-      hourRowHeight,
-      baseMinutes,
-      visibleMinutes,
-      snap,
-      canDropEvent,
-      columnElements,
-    };
-  });
-
-  const setPreviewBoth = useCallback((next: DragPreview | null) => {
-    previewRef.current = next;
-    setPreview(next);
-  }, []);
-
-  /**
-   * Mark the click that follows a gesture as one to swallow.
-   *
-   * Only pointer-derived clicks ever consume this (see `HourGrid`): a keyboard
-   * activation produces a click with no preceding `pointerdown`, so nothing
-   * would reset the flag and a gesture abandoned without a pointerup would
-   * silently eat the user's next Enter press.
-   */
-  const armClickSuppression = useCallback(() => {
-    suppressClickRef.current = true;
-  }, []);
-
-  const cfg = useCallback(
-    (): ProjectionConfig => ({
-      columns: latest.current.columns,
-      baseMinutes: latest.current.baseMinutes,
-      visibleMinutes: latest.current.visibleMinutes,
-      snap: latest.current.snap,
-    }),
-    [],
-  );
-
-  const toPayload = useCallback((p: DragPreview): CalendarEventMove => {
-    const column = latest.current.columns[p.columnIndex];
-    return {
-      startsAt: p.startsAt,
-      endsAt: p.endsAt,
-      resourceId: column?.resourceId ?? undefined,
-    };
-  }, []);
-
-  const validate = useCallback(
-    (p: DragPreview, frame: DragFrame): boolean => {
-      const check = latest.current.canDropEvent;
-      if (!check) return true;
-      const move = toPayload(p);
-      // A resize can't change the column, so the candidate it offers doesn't
-      // carry a `resourceId` the consumer might read and act on.
-      const candidate: CalendarDropCandidate =
-        p.mode === 'move'
-          ? { mode: 'move', ...move }
-          : {
-              mode: 'resize',
-              startsAt: move.startsAt,
-              endsAt: move.endsAt,
-              // The lane it is in, not a lane it is moving to.
-              resourceId: move.resourceId,
-            };
-      return check(frame.event, candidate);
-    },
-    [toPayload],
-  );
-
-  /**
-   * End the live gesture. Always runs to completion for the gesture that owns
-   * the pointer — never token-guarded, because leaving `gestureRef` populated
-   * is what strands the hook: `dragging` stays true, the window listeners stay
-   * subscribed, and `nudge` refuses to start because it thinks a drag is live.
-   */
-  const endGesture = useCallback(() => {
-    gestureRef.current = null;
-    setDragging(false);
-  }, []);
-
-  /**
-   * Drop the preview — but only if a newer gesture has not already taken over.
-   * This IS token-guarded: a settling async commit from gesture N must not
-   * wipe the preview gesture N+1 is currently drawing.
-   */
-  const clearPreview = useCallback(
-    (token: number) => {
-      if (token !== tokenRef.current) return;
-      setPreviewBoth(null);
-    },
-    [setPreviewBoth],
-  );
-
-  const finish = useCallback(
-    (token: number) => {
-      endGesture();
-      clearPreview(token);
-    },
-    [endGesture, clearPreview],
-  );
-
-  /**
-   * A gesture thrown away rather than committed. The live region was narrating
-   * a specific new time as the user dragged; leaving that as the last thing
-   * announced tells a screen-reader user the event moved when it did not.
-   */
-  const abandon = useCallback(
-    (g: { frame: DragFrame; moved: boolean }) => {
-      const p = previewRef.current;
-      if (g.moved && p) announce(g.frame.event, p, { cancelled: true });
-    },
-    [announce],
-  );
-
-  const commit = useCallback(
-    (p: DragPreview, frame: DragFrame, token: number) => {
-      // The gesture asked for something the bounds refused, so the proposal is
-      // identical to where the event already is. Say so, and do NOT call the
-      // handler — the documented consumer shape is an API write, and a drag
-      // that moved nothing must not fire one.
-      //
-      // Lives here rather than on the keyboard path so pointer drags get it
-      // too: a fully-clamped drag is just as much a no-op as a clamped nudge.
-      const currentEnd = frame.event.endsAt ?? frame.event.startsAt;
-      const sameInstants =
-        p.startsAt.getTime() === frame.event.startsAt.getTime() &&
-        p.endsAt.getTime() === currentEnd.getTime();
-      const sameCoordinates =
-        p.startMinutes === frame.startMinutes && p.endMinutes === frame.endMinutes;
-      // Both checks, because they catch different things. Coordinates catch a
-      // clamped gesture; instants catch one whose grid coordinates moved but
-      // whose projection landed back on the very same moment — which is what a
-      // daylight-saving collapse does, and it would otherwise fire the
-      // consumer's API write proposing the value the event already has.
-      if ((sameInstants || sameCoordinates) && p.columnIndex === frame.columnIndex) {
-        // Two different things end up here. `clamped` means the bounds refused
-        // to go further; otherwise the user simply released where they
-        // started, and telling them they "cannot move any further" would be
-        // nonsense.
-        announce(frame.event, p, p.clamped ? { atEdge: true } : { unchanged: true });
-        finish(token);
-        return;
-      }
-      // A refused placement never reaches the consumer.
-      if (!validate(p, frame)) {
-        announce(frame.event, p, { refused: true });
-        finish(token);
-        return;
-      }
-      const payload = toPayload(p);
-      const result: CalendarDropResult =
-        p.mode === 'move'
-          ? onEventMove?.(frame.event, payload)
-          : onEventResize?.(frame.event, { startsAt: payload.startsAt, endsAt: payload.endsAt });
-
-      if (isThenable(result)) {
-        // Hold the preview until the consumer's async verdict lands, so an
-        // accepted drop doesn't flash back to its old slot while the request
-        // is in flight. The gesture itself is over.
-        endGesture();
-        result.then(
-          (verdict) => {
-            // Guarded on the token: a verdict that lands after the user has
-            // begun another gesture must not narrate the old placement over
-            // the new one.
-            if (token === tokenRef.current)
-              announce(frame.event, p, { refused: verdict === false });
-            clearPreview(token);
-          },
-          () => {
-            if (token === tokenRef.current) announce(frame.event, p, { refused: true });
-            clearPreview(token);
-          },
-        );
-        return;
-      }
-      announce(frame.event, p, { refused: result === false });
-      finish(token);
-    },
-    [validate, toPayload, onEventMove, onEventResize, finish, endGesture, clearPreview, announce],
-  );
-
-  const startPointerDrag = useCallback(
-    (block: TimedEventBlock, mode: DragMode, e: PointerEvent) => {
-      if (mode === 'move' && !canMove) return;
-      if (mode === 'resize' && !canResize) return;
-      // Primary button only — a right-click must not start a reschedule.
-      if (e.button !== 0) return;
-      e.stopPropagation();
-      suppressClickRef.current = false;
-      // A fresh press starts from the event's real position — never from a
-      // preview left behind by a previous gesture whose async commit has not
-      // settled yet.
-      setPreviewBoth(null);
-      tokenRef.current += 1;
-      gestureRef.current = {
-        token: tokenRef.current,
-        frame: frameOf(block, latest.current.baseMinutes),
-        mode,
-        pointerId: e.pointerId,
-        originX: e.clientX,
-        originY: e.clientY,
-        moved: false,
-      };
-      setDragging(true);
-    },
-    [canMove, canResize, setPreviewBoth],
-  );
-
-  // One subscription per gesture. Listening on `window` (rather than relying
-  // on pointer capture alone) keeps the drag alive when the pointer leaves
-  // the grid — including drops outside it, which simply resolve to the last
-  // valid column.
-  useEffect(() => {
-    if (!dragging) return;
-
-    const handleMove = (e: globalThis.PointerEvent) => {
-      const g = gestureRef.current;
-      if (!g || e.pointerId !== g.pointerId) return;
-      const dy = e.clientY - g.originY;
-      const dx = e.clientX - g.originX;
-      if (!g.moved && Math.abs(dy) < DRAG_THRESHOLD_PX && Math.abs(dx) < DRAG_THRESHOLD_PX) return;
-      g.moved = true;
-
-      const { hourRowHeight: rowH, columns: cols, columnElements: els } = latest.current;
-      const rawDelta = (dy / rowH) * 60;
-
-      let columnIndex = previewRef.current?.columnIndex ?? g.frame.columnIndex;
-      if (g.mode === 'move') {
-        // Hit-test the columns horizontally so a drag can cross into another
-        // day (week view) or another resource lane (resource day view).
-        const hit = els.current.findIndex((el) => {
-          if (!el) return false;
-          const r = el.getBoundingClientRect();
-          // A zero-width rect means the element has no layout to hit-test
-          // against; treating that as "no hit" keeps the column stable.
-          if (r.width === 0) return false;
-          return e.clientX >= r.left && e.clientX < r.right;
-        });
-        if (hit !== -1) columnIndex = hit;
-      }
-      if (columnIndex < 0 || columnIndex >= cols.length) columnIndex = g.frame.columnIndex;
-
-      const target =
-        g.mode === 'move' ? g.frame.startMinutes + rawDelta : g.frame.endMinutes + rawDelta;
-      const next = project(g.frame, g.mode, columnIndex, target, cfg());
-      next.invalid = !validate(next, g.frame);
-      const prev = previewRef.current;
-      setPreviewBoth(next);
-      // Announce only when the proposed slot actually changed — snapping makes
-      // that discrete, so this is one message per slot rather than per pixel.
-      if (
-        !prev ||
-        prev.startMinutes !== next.startMinutes ||
-        prev.endMinutes !== next.endMinutes ||
-        prev.columnIndex !== next.columnIndex ||
-        prev.invalid !== next.invalid
-      ) {
-        announce(g.frame.event, next, { refused: next.invalid });
-      }
-    };
-
-    const handleUp = (e: globalThis.PointerEvent) => {
-      const g = gestureRef.current;
-      if (!g || e.pointerId !== g.pointerId) return;
-      const p = previewRef.current;
-      if (!g.moved || !p) {
-        // A press that never crossed the threshold is a click, not a drag.
-        finish(g.token);
-        return;
-      }
-      // The click event that follows this pointerup would otherwise open the
-      // consumer's detail UI — or, if the pointer ended over the column
-      // background rather than the block, create a booking at that slot.
-      armClickSuppression();
-      commit(p, g.frame, g.token);
-    };
-
-    const handleCancel = (e: globalThis.PointerEvent) => {
-      const g = gestureRef.current;
-      if (!g || e.pointerId !== g.pointerId) return;
-      // Pointer cancellation (a system gesture taking over, the element being
-      // removed) discards the drag without proposing anything. Say so: the
-      // last thing announced was a specific new time, and leaving that
-      // standing tells a screen-reader user the event moved when it didn't.
-      abandon(g);
-      finish(g.token);
-    };
-
-    // Last-resort recovery. There is no pointer capture here, so a `pointerup`
-    // delivered to another document — an alt-tab mid-drag, a devtools
-    // detach — never reaches us, and the gesture would otherwise stay live
-    // forever, taking the keyboard path down with it.
-    const handleBlur = () => {
-      const g = gestureRef.current;
-      if (!g) return;
-      // Arm the suppression the same way `handleUp` does. Without it the
-      // `pointerup` that follows finds no gesture, its `click` reaches the
-      // column, and the consumer's "create a booking here" UI opens at the
-      // spot the user was dragging to. Unlike `handleUp` there is no
-      // guarantee a click ever arrives to consume the flag, so it is armed
-      // with an expiry — see `armClickSuppression`.
-      if (g.moved) armClickSuppression();
-      abandon(g);
-      finish(g.token);
-    };
-
-    window.addEventListener('pointermove', handleMove);
-    window.addEventListener('pointerup', handleUp);
-    window.addEventListener('pointercancel', handleCancel);
-    window.addEventListener('blur', handleBlur);
-    return () => {
-      window.removeEventListener('pointermove', handleMove);
-      window.removeEventListener('pointerup', handleUp);
-      window.removeEventListener('pointercancel', handleCancel);
-      window.removeEventListener('blur', handleBlur);
-    };
-  }, [
-    dragging,
-    commit,
-    finish,
-    setPreviewBoth,
-    validate,
-    cfg,
-    announce,
-    abandon,
-    armClickSuppression,
-  ]);
-
-  const nudge = useCallback(
-    (block: TimedEventBlock, delta: { mode: DragMode; steps: number; columns?: number }) => {
-      if (delta.mode === 'move' && !canMove) return;
-      if (delta.mode === 'resize' && !canResize) return;
-      // A pointer gesture already owns the hook (pointerdown focused the
-      // block, so a keypress can land mid-drag). Bumping the token here would
-      // orphan that gesture: its pointerup would no-op and leave the grid
-      // stuck in the dragging state.
-      if (gestureRef.current) return;
-
-      const frame = frameOf(block, latest.current.baseMinutes);
-      const step = latest.current.snap;
-      const columnIndex = clamp(
-        frame.columnIndex + (delta.columns ?? 0),
-        0,
-        Math.max(0, latest.current.columns.length - 1),
-      );
-
-      // A pure column change must not also re-snap the time — moving a 09:07
-      // booking to the next lane should leave it at 09:07.
-      const base = delta.mode === 'move' ? frame.startMinutes : frame.endMinutes;
-      const pureColumnChange = delta.steps === 0;
-      const target = pureColumnChange ? base : snapTo(base, step) + delta.steps * step;
-      // `presnapped` for a pure column change, or `project` would re-snap the
-      // untouched time and quietly drag a 09:07 booking to 09:00.
-      const next = project(frame, delta.mode, columnIndex, target, cfg(), pureColumnChange);
-
-      tokenRef.current += 1;
-      // `commit` owns the no-op check, so a clamped nudge and a clamped drag
-      // report identically.
-      commit(next, frame, tokenRef.current);
-    },
-    [canMove, canResize, commit, cfg],
-  );
-
-  const consumeClickSuppression = useCallback(() => {
-    const was = suppressClickRef.current;
-    suppressClickRef.current = false;
-    return was;
-  }, []);
-
-  // A drop released outside the grid produces no click at all, so the flag
-  // would otherwise survive to swallow the next genuine one. Every fresh
-  // press clears it — including presses that start no gesture (a plain click,
-  // or a press on a block in a resize-only grid).
-  const resetClickSuppression = useCallback(() => {
-    suppressClickRef.current = false;
-  }, []);
-
-  return {
-    preview,
-    announcement,
-    dragging,
-    canMove,
-    canResize,
-    startPointerDrag,
-    nudge,
-    consumeClickSuppression,
-    resetClickSuppression,
-  };
-}