makersclaw 0.8.0 → 0.8.1

package/registry/blocks/time-grid/time-grid.jsx

@@ -0,0 +1,1325 @@
+"use client";
+
+// Days side by side on an hour grid, with the agent's proposals in pencil.
+// What is already there is ink: events in their kind's colour, a lock on the
+// ones another calendar owns. What the agent suggests is pencil: a hatched
+// card on a dashed edge, on its hour, with a tag hanging off it that quotes
+// the words it came from. Keep inks a block in (the same block, so its
+// colours fade from pencil to ink; kept together they ink one by one), Keep
+// all says what it will do before it does it, a clash is hatched where two
+// things overlap, and a strip of goals can sit above the days.
+//
+// Props in, callbacks out: the block never reads or writes data. Moving a
+// block, making one by dragging across free hours, dropping an item in from
+// a list, Keep, Dismiss and Keep all each go out through one callback and
+// come back as new props; a save that fails puts the block back and says so.
+// README.md beside this file is the contract.
+//
+// Geometry never depends on data, so nothing shifts when rows arrive: the
+// header, the hour rows and the columns are fixed; blocks are absolute.
+// Narrow containers (a container query, no JS measuring) show one day at a
+// time under a strip of the days.
+
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, Icon, Notice, Skeleton, cx } from "../../ui";
+import {
+  clamp,
+  clashesOf,
+  clock,
+  dateNum,
+  durationWords,
+  gridLanes,
+  keyChange,
+  lookOf,
+  namesOf,
+  newlyInked,
+  planKeepAll,
+  previewOf,
+  readItem,
+  snapFloor,
+  snapRound,
+  span,
+  tagPlacement,
+  toHHMM,
+  toMin,
+  walkProposal,
+  weekdayIndex,
+} from "./grid-model";
+
+export const TIME_GRID_MIME = "application/x-time-grid-item";
+
+// The item being dragged in from outside, in this window. dragover cannot
+// read dataTransfer (the browser protects it until drop), so the preview
+// reads this instead.
+let carried = null;
+
+/** Spread onto a list item to make it droppable on a TimeGrid:
+ *  <li {...timeGridDragProps({ id, title, minutes: 60 })}>… */
+export function timeGridDragProps(item) {
+  return {
+    draggable: true,
+    onDragStart(e) {
+      carried = item;
+      try {
+        e.dataTransfer.setData(TIME_GRID_MIME, JSON.stringify(item));
+        e.dataTransfer.setData("text/plain", String(item?.title ?? ""));
+        e.dataTransfer.effectAllowed = "copyMove";
+      } catch {
+        // some browsers refuse custom types; `carried` still works
+      }
+    },
+    onDragEnd() {
+      carried = null;
+    },
+  };
+}
+
+// ---- looks: tokens only, as literal class names so Tailwind sees each ----
+
+const WASH = {
+  neutral: "border-border bg-muted",
+  primary: "border-primary bg-primary/15",
+  info: "border-info bg-info/15",
+  success: "border-success bg-success/15",
+  warning: "border-warning bg-warning/15",
+  danger: "border-destructive bg-destructive/15",
+};
+const WASH_HUE = { 1: "border-chart-1 bg-chart-1/15", 2: "border-chart-2 bg-chart-2/15", 3: "border-chart-3 bg-chart-3/15", 4: "border-chart-4 bg-chart-4/15", 5: "border-chart-5 bg-chart-5/15" };
+const SOLID = "border-primary bg-primary text-primary-foreground";
+
+const EDGE = {
+  neutral: "border-muted-foreground",
+  primary: "border-primary",
+  info: "border-info",
+  success: "border-success",
+  warning: "border-warning",
+  danger: "border-destructive",
+};
+const EDGE_HUE = { 1: "border-chart-1", 2: "border-chart-2", 3: "border-chart-3", 4: "border-chart-4", 5: "border-chart-5" };
+
+const INK_TEXT = {
+  neutral: "text-muted-foreground",
+  primary: "text-primary",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+};
+const INK_TEXT_HUE = { 1: "text-chart-1", 2: "text-chart-2", 3: "text-chart-3", 4: "text-chart-4", 5: "text-chart-5" };
+
+const NOTE_TONE = {
+  neutral: "text-muted-foreground",
+  primary: "text-primary",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+};
+
+const HATCH = "bg-[image:repeating-linear-gradient(135deg,transparent_0_5px,var(--color-border)_5px_6px)]";
+const OFF_HATCH = "bg-[image:repeating-linear-gradient(135deg,transparent_0_6px,var(--color-border)_6px_7px)] bg-muted/40";
+const CLASH_HATCH = "bg-[image:repeating-linear-gradient(135deg,var(--color-warning)_0_3px,transparent_3px_7px)]";
+
+// Column templates, written out whole so Tailwind sees each class.
+const WIDE_COLS = {
+  1: "@min-[36rem]:grid-cols-[3rem_repeat(1,minmax(0,1fr))]",
+  2: "@min-[36rem]:grid-cols-[3rem_repeat(2,minmax(0,1fr))]",
+  3: "@min-[36rem]:grid-cols-[3rem_repeat(3,minmax(0,1fr))]",
+  4: "@min-[36rem]:grid-cols-[3rem_repeat(4,minmax(0,1fr))]",
+  5: "@min-[36rem]:grid-cols-[3rem_repeat(5,minmax(0,1fr))]",
+  6: "@min-[36rem]:grid-cols-[3rem_repeat(6,minmax(0,1fr))]",
+  7: "@min-[36rem]:grid-cols-[3rem_repeat(7,minmax(0,1fr))]",
+};
+const STRIP_COLS = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 5: "grid-cols-5", 6: "grid-cols-6", 7: "grid-cols-7" };
+
+const WORDS = {
+  allDay: "all day",
+  keep: "Keep",
+  dismiss: "Dismiss",
+  unkeep: "Back to pencil",
+  keepAll: "Keep all",
+  pencilled: "pencilled in, waiting for you",
+  unsure: "Unsure",
+  failed: "Didn’t add",
+  replaced: "Replaced",
+  was: "Was",
+  clash: "Clash",
+  locked: "locked",
+  drafting: "Pencilling in…",
+  newBlock: "New block",
+  empty: "Nothing on these days yet.",
+  retry: "Try again",
+  back: "went back: the change was not saved.",
+};
+
+const reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/** Words typed into, or a key meant for something else: J and K are left alone. */
+function isTyping(el) {
+  if (!el || el.nodeType !== 1) return false;
+  return Boolean(el.closest?.("input, textarea, select, [contenteditable=''], [contenteditable='true']"));
+}
+
+const cut = (s) => String(s ?? "");
+
+/** One look for one item: the classes of its shell. */
+function shellOf(look, kind, pencilColor) {
+  const tone = kind.tone ?? "neutral";
+  const hue = kind.hue;
+  const edge = hue ? EDGE_HUE[hue] : (EDGE[tone] ?? EDGE.neutral);
+  if (look === "ink") {
+    if (kind.solid) return cx("border text-primary-foreground", SOLID);
+    return cx("border text-foreground", hue ? WASH_HUE[hue] : (WASH[tone] ?? WASH.neutral));
+  }
+  const pencil = cx("bg-card text-foreground", HATCH);
+  if (look === "pencil") return cx(pencil, "border-[1.5px] border-dashed", pencilColor === "kind" ? edge : EDGE.neutral);
+  if (look === "unsure") return cx(pencil, "border-2 border-dotted", pencilColor === "kind" ? edge : EDGE.neutral);
+  if (look === "failed") return "border-[1.5px] border-solid border-destructive bg-card text-foreground";
+  if (look === "replaced") return cx(pencil, "border-[1.5px] border-dashed border-muted-foreground opacity-60");
+  return "border-[1.5px] border-dotted border-input bg-transparent text-muted-foreground"; // was
+}
+
+function labelToneOf(look, kind, clashed) {
+  if (clashed) return "text-warning";
+  if (look === "failed") return "text-destructive";
+  if (look === "ink") return "text-inherit";
+  return kind.hue ? INK_TEXT_HUE[kind.hue] : (INK_TEXT[kind.tone ?? "neutral"] ?? INK_TEXT.neutral);
+}
+
+// ---- the inside of a block ------------------------------------------------
+
+function Face({ item, h, kind, look, label, fmt, clashed, pencilClassName, words }) {
+  const compact = h < 26;
+  const pencilish = look !== "ink";
+  const struck = look === "replaced" || item.struck;
+  const chip = label ? (
+    <span className={cx("min-w-0 shrink-0 whitespace-nowrap text-2xs font-semibold leading-tight", labelToneOf(look, kind, clashed))}>{label}</span>
+  ) : null;
+  const icon = item.locked || kind.locked ? "lock" : item.done ? "check" : (item.icon ?? kind.icon);
+  return (
+    <span className={cx("flex h-full min-w-0 flex-col overflow-hidden text-left", compact ? "justify-center px-1.5 py-0" : "gap-0.5 px-2 py-1")}>
+      {!compact && chip}
+      <span className={cx("flex min-w-0 gap-1", compact ? "items-center" : "items-start")}>
+        {compact ? chip : null}
+        {icon ? <Icon name={icon} size={12} className={cx("shrink-0", !compact && "mt-0.5")} /> : null}
+        <span
+          className={cx(
+            "min-w-0",
+            compact ? "truncate" : "line-clamp-3",
+            pencilish && pencilClassName,
+            "text-xs font-medium leading-tight",
+            struck && "line-through decoration-1",
+          )}
+        >
+          {item.title}
+        </span>
+      </span>
+      {!compact && h >= 38 ? (
+        <span data-nums className={cx("truncate font-mono text-2xs leading-tight", look === "ink" && kind.solid ? "" : "text-muted-foreground")}>
+          {span(item.s, item.e, fmt)}
+          {item.caption ? `, ${item.caption}` : ""}
+        </span>
+      ) : null}
+      {!compact && h >= 62 && item.sub ? <span className="line-clamp-2 text-2xs leading-tight text-muted-foreground">{item.sub}</span> : null}
+      {!compact && h >= 62 && item.note && pencilish ? (
+        <span className="mt-auto flex min-w-0 items-center gap-1 text-2xs leading-tight text-muted-foreground">
+          <Icon name="pencil" size={10} className="shrink-0" />
+          <span className="truncate">{item.note}</span>
+        </span>
+      ) : null}
+      <span className="sr-only">{look === "pencil" || look === "unsure" ? words.pencilled : ""}</span>
+    </span>
+  );
+}
+
+/** Keep and Dismiss (or Back to pencil), small enough for a block. */
+function MiniActions({ item, look, onAction, busy, words, tall, show }) {
+  const run = (e, id) => {
+    e.stopPropagation();
+    onAction?.(item, id);
+  };
+  const stop = (e) => e.stopPropagation();
+  const base =
+    "inline-flex h-5 items-center justify-center gap-1 rounded-[4px] border px-1.5 text-2xs font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50";
+  if (look === "ink") {
+    return (
+      <span className={cx("absolute right-1 top-1 z-10 flex gap-0.5", !show && "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100")}>
+        <button type="button" disabled={busy} onPointerDown={stop} onClick={(e) => run(e, "unkeep")} className={cx(base, "border-border bg-card text-foreground")}>
+          {words.unkeep}
+        </button>
+      </span>
+    );
+  }
+  return (
+    <span className={cx("absolute z-10 flex gap-0.5", tall ? "inset-x-1.5 bottom-1" : "right-0.5 top-0.5", !tall && !show && "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100")}>
+      <button type="button" disabled={busy} onPointerDown={stop} onClick={(e) => run(e, "keep")} className={cx(base, "border-primary bg-primary text-primary-foreground")}>
+        <Icon name="check" size={10} />
+        <span className={tall ? "" : "sr-only"}>{words.keep}</span>
+      </button>
+      <button type="button" disabled={busy} onPointerDown={stop} onClick={(e) => run(e, "dismiss")} aria-label={words.dismiss} title={words.dismiss} className={cx(base, "border-border bg-card px-1 text-foreground")}>
+        <Icon name="x" size={10} />
+      </button>
+    </span>
+  );
+}
+
+// ---- the grid ---------------------------------------------------------------
+
+export function TimeGrid({
+  days = [],
+  events = [],
+  proposals = [],
+  kinds = {},
+  today,
+  now,
+  startHour = 5,
+  endHour = 21,
+  snap = 15,
+  hourHeight = 40,
+  workStart,
+  workEnd,
+  scrollTo,
+  height,
+  locale = "en-GB",
+  formatTime = clock,
+  corner,
+  above,
+  dayNotes,
+  renderDayHeader,
+  pencilColor = "neutral",
+  pencilClassName,
+  tags = "selected",
+  clashAmong = false,
+  keepAll = false,
+  selectedId,
+  defaultSelectedId = null,
+  onSelect,
+  onOpen,
+  onAction,
+  onKeepAll,
+  onChange,
+  onCompose,
+  onDrop,
+  explainBlock,
+  explainOffHours,
+  draft,
+  drafting,
+  status = "ready",
+  error,
+  onRetry,
+  readOnly = false,
+  keys = true,
+  words: wordsIn,
+  emptyText,
+  label = "Week",
+  className,
+}) {
+  const words = useMemo(() => ({ ...WORDS, ...(wordsIn ?? {}) }), [wordsIn]);
+  const keepWordsId = useId();
+  const list = days;
+  const lo = startHour * 60;
+  const hi = endHour * 60;
+  const ppm = hourHeight / 60;
+  const bodyHeight = (endHour - startHour) * hourHeight;
+  const ws = toMin(workStart);
+  const we = toMin(workEnd);
+  const box = { lo, hi, ws, we, snap };
+  const editable = !readOnly && Boolean(onChange);
+
+  const [innerSel, setInnerSel] = useState(defaultSelectedId);
+  const sel = selectedId !== undefined ? selectedId : innerSel;
+  const select = (id) => {
+    if (selectedId === undefined) setInnerSel(id);
+    onSelect?.(id);
+  };
+
+  const [day, setDay] = useState(() => (list.includes(today) ? today : list[0]));
+  useEffect(() => {
+    if (!list.includes(day)) setDay(list.includes(today) ? today : list[0]);
+  }, [list.join(","), today]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const root = useRef(null);
+  const scroller = useRef(null);
+  const cols = useRef(new Map()); // date → the day's body element
+  const gesture = useRef(null);
+  const suppressClick = useRef(false);
+  const latest = useRef({});
+  const [preview, setPreview] = useState(null);
+  const [overrides, setOverrides] = useState(() => new Map());
+  const [pending, setPending] = useState([]); // drops waiting for their row
+  const [dropHint, setDropHint] = useState(null);
+  const [note, setNote] = useState(null); // { date, minute, node }
+  const [problem, setProblem] = useState(null); // { message, retry }
+  const [busy, setBusy] = useState(() => new Set());
+  const [keepingAll, setKeepingAll] = useState(false);
+  const [clockMin, setClockMin] = useState(null);
+  const [, tick] = useState(0);
+
+  // The now line: the viewer's clock after mount (the server's is not
+  // theirs), unless the page says what time it is.
+  useEffect(() => {
+    if (now != null) return undefined;
+    const t = () => {
+      const d = new Date();
+      setClockMin(d.getHours() * 60 + d.getMinutes());
+    };
+    t();
+    const id = setInterval(t, 60_000);
+    return () => clearInterval(id);
+  }, [now]);
+  const nowMin = now != null ? toMin(now) : clockMin;
+
+  useEffect(() => {
+    if (!note) return undefined;
+    const id = setTimeout(() => setNote(null), 9000);
+    return () => clearTimeout(id);
+  }, [note]);
+
+  // Open on the working day when the hours scroll (a grid with a height).
+  const scrolledByHand = useRef(false);
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el || !height) return undefined;
+    const target = Math.max(0, ((toMin(scrollTo) ?? ws ?? 8 * 60) - lo) * ppm - 12);
+    const apply = () => {
+      if (!scrolledByHand.current && scroller.current) scroller.current.scrollTop = target;
+    };
+    apply();
+    const id = setTimeout(apply, 120);
+    const mark = () => {
+      if (Math.abs((scroller.current?.scrollTop ?? target) - target) > 2) scrolledByHand.current = true;
+    };
+    el.addEventListener("scroll", mark, { passive: true });
+    return () => {
+      clearTimeout(id);
+      el.removeEventListener("scroll", mark);
+    };
+  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---- what is drawn: ink and pencil in one list, so a block that is kept
+  // stays the same element and its colours fade from pencil to ink.
+  const items = useMemo(() => {
+    const out = [];
+    const seen = new Set();
+    const put = (raw, pencil) => {
+      const it = readItem(raw, { days: list, lo, hi, snap, pencil });
+      if (!it || seen.has(it.id)) return;
+      seen.add(it.id);
+      const o = overrides.get(it.id);
+      if (o && !it.allDay) {
+        out.push({ ...it, date: o.date, s: toMin(o.start), e: toMin(o.end) });
+      } else out.push(it);
+    };
+    for (const r of events ?? []) put(r, false);
+    for (const r of proposals ?? []) put(r, true);
+    return out;
+  }, [events, proposals, overrides, list.join(","), lo, hi, snap]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const looks = useMemo(() => new Map(items.map((i) => [i.id, lookOf(i)])), [items]);
+  const clashes = useMemo(() => clashesOf(items, { among: clashAmong }), [items, clashAmong]);
+  const plan = useMemo(() => planKeepAll(items, { clashes, kinds, skip: keepAll && keepAll.skip ? keepAll.skip : ["clash"], fmt: formatTime }), [items, clashes, kinds, keepAll, formatTime]);
+
+  // Blocks that were pencil and are ink now, in reading order: they ink in one by one.
+  const before = useRef(new Map());
+  const fresh = newlyInked(before.current, items, list);
+  useEffect(() => {
+    before.current = new Map(looks);
+    if (fresh.length < 2) return undefined;
+    const id = setTimeout(() => tick((n) => n + 1), 220 * fresh.length + 900);
+    return () => clearTimeout(id);
+  }); // runs after every render on purpose: `before` must always be the render just drawn
+
+  // A saved change stays on screen until the rows carry it.
+  useEffect(() => {
+    latest.current.items = items;
+    setOverrides((cur) => {
+      if (!cur.size) return cur;
+      const next = new Map(cur);
+      const rows = [...(events ?? []), ...(proposals ?? [])];
+      for (const [id, o] of cur) {
+        const b = rows.find((x) => String(x.id) === id);
+        if (!b || (b.date === o.date && toMin(b.start) === toMin(o.start) && toMin(b.end) === toMin(o.end))) next.delete(id);
+      }
+      return next.size === cur.size ? cur : next;
+    });
+    setPending((cur) => (cur.length ? cur.filter((p) => !(p.done || matches(p, [...(events ?? []), ...(proposals ?? [])]))) : cur));
+  }, [events, proposals]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function matches(p, rows) {
+    return rows.some((b) => b.date === p.date && toMin(b.start) === p.start && toMin(b.end) === p.end);
+  }
+
+  const byDay = useMemo(() => {
+    const map = new Map(list.map((d) => [d, { timed: [], allDay: [], was: [] }]));
+    for (const it of items) {
+      const slot = map.get(it.date);
+      if (!slot) continue;
+      if (it.allDay) slot.allDay.push(it);
+      else if (looks.get(it.id) === "was") slot.was.push(it);
+      else slot.timed.push(it);
+    }
+    for (const slot of map.values()) slot.lanes = gridLanes(slot.timed.map((b) => ({ id: b.id, s: b.s, e: b.e })));
+    return map;
+  }, [items, looks, list.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const kindOf = (it) => kinds[it.kind] ?? {};
+  const waitingCount = plan.total;
+
+  // ---- geometry: pointer → (day, minute)
+  function slotAt(x, y, fixedDate) {
+    let date = fixedDate ?? null;
+    let rect = null;
+    if (date) rect = cols.current.get(date)?.getBoundingClientRect() ?? null;
+    else {
+      let best = null;
+      for (const d of list) {
+        const r = cols.current.get(d)?.getBoundingClientRect();
+        if (!r || r.width === 0) continue;
+        const dist = x < r.left ? r.left - x : x > r.right ? x - r.right : 0;
+        if (!best || dist < best.dist) best = { d, r, dist };
+      }
+      if (best) {
+        date = best.d;
+        rect = best.r;
+      }
+    }
+    if (!date || !rect) return null;
+    return { date, minute: lo + (y - rect.top) / ppm };
+  }
+  const offHours = (m) => (ws != null && m < ws) || (we != null && m >= we);
+
+  // ---- gestures: window listeners, so a drag that leaves the grid (or a
+  // pointer event dispatched from a script) still lands.
+  const listeners = useRef(null);
+  if (!listeners.current) {
+    listeners.current = {
+      move: (e) => latest.current.onMove?.(e),
+      up: (e) => latest.current.onUp?.(e),
+      cancel: () => latest.current.cancel?.(),
+    };
+  }
+  function attach() {
+    window.addEventListener("pointermove", listeners.current.move);
+    window.addEventListener("pointerup", listeners.current.up);
+    window.addEventListener("pointercancel", listeners.current.cancel);
+    window.addEventListener("blur", listeners.current.cancel);
+  }
+  function detach() {
+    window.removeEventListener("pointermove", listeners.current.move);
+    window.removeEventListener("pointerup", listeners.current.up);
+    window.removeEventListener("pointercancel", listeners.current.cancel);
+    window.removeEventListener("blur", listeners.current.cancel);
+    stopAutoScroll();
+  }
+  useEffect(() => () => detach(), []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Auto-scroll near the scroller's edges while dragging. An interval, not
+  // animation frames: a hidden tab never runs those.
+  const autoScroll = useRef(null);
+  function stopAutoScroll() {
+    if (autoScroll.current) clearInterval(autoScroll.current.id);
+    autoScroll.current = null;
+  }
+  function maybeAutoScroll(y) {
+    const el = scroller.current;
+    if (!el || !height) return;
+    const r = el.getBoundingClientRect();
+    const dir = y < r.top + 36 ? -1 : y > r.bottom - 36 ? 1 : 0;
+    if (!dir) return stopAutoScroll();
+    if (autoScroll.current?.dir === dir) return;
+    stopAutoScroll();
+    autoScroll.current = {
+      dir,
+      id: setInterval(() => {
+        el.scrollTop += dir * 14;
+        const g = gesture.current;
+        if (g?.active && g.last) {
+          const p = previewOf(g, slotAt(g.last.x, g.last.y, g.kind === "move" ? undefined : g.date), box);
+          if (p) {
+            g.preview = p;
+            setPreview(p);
+          }
+        }
+      }, 30),
+    };
+  }
+
+  const pointerPreview = (g, x, y) => previewOf(g, slotAt(x, y, g.kind === "move" ? undefined : g.date), box);
+
+  latest.current.onMove = (e) => {
+    const g = gesture.current;
+    if (!g || (e.pointerId != null && g.pointerId != null && e.pointerId !== g.pointerId)) return;
+    // Released outside the window: the page never saw the pointerup.
+    if (e.pointerType === "mouse" && e.buttons === 0) return latest.current.cancel();
+    g.last = { x: e.clientX, y: e.clientY };
+    if (!g.active) {
+      if (Math.hypot(e.clientX - g.x0, e.clientY - g.y0) < 4) return;
+      g.active = true;
+      if (g.kind === "held") {
+        // A block that cannot move: say why, once, where it is.
+        gesture.current = null;
+        detach();
+        const node = explainBlock?.(g.item);
+        if (node) setNote({ date: g.item.date, minute: g.item.s, node });
+        return;
+      }
+    }
+    const p = pointerPreview(g, e.clientX, e.clientY);
+    if (p) {
+      g.preview = p;
+      setPreview(p);
+    }
+    maybeAutoScroll(e.clientY);
+  };
+
+  latest.current.onUp = (e) => {
+    const g = gesture.current;
+    if (!g || (e.pointerId != null && g.pointerId != null && e.pointerId !== g.pointerId)) return;
+    gesture.current = null;
+    detach();
+    if (g.kind === "held") return;
+    const p = g.active ? (pointerPreview(g, e.clientX, e.clientY) ?? g.preview) : null;
+    setPreview(null);
+    if (g.kind === "create") {
+      const range = p ?? {
+        date: g.date,
+        start: clamp(g.anchor, ws ?? lo, (we ?? hi) - 60),
+        end: clamp(g.anchor + 60, (ws ?? lo) + snap, we ?? hi),
+      };
+      onCompose?.({ date: range.date, start: toHHMM(range.start), end: toHHMM(range.end) });
+      return;
+    }
+    if (!g.active || !p) return;
+    suppressClick.current = true;
+    setTimeout(() => {
+      suppressClick.current = false;
+    }, 0);
+    if (p.date === g.item.date && p.start === g.s0 && p.end === g.e0) return;
+    commitChange(g.item, p);
+  };
+
+  latest.current.cancel = () => {
+    if (!gesture.current) return;
+    gesture.current = null;
+    detach();
+    setPreview(null);
+  };
+
+  const fail = (message, retry) => setProblem({ message, retry });
+
+  async function commitChange(item, p) {
+    const id = item.id;
+    const next = { date: p.date, start: toHHMM(p.start), end: toHHMM(p.end) };
+    setProblem(null);
+    setOverrides((m) => new Map(m).set(id, next));
+    let result;
+    try {
+      result = await onChange?.(item, { ...next, mode: p.mode, from: { date: item.date, start: toHHMM(item.s), end: toHHMM(item.e) } }, { proposal: item.pencil });
+    } catch (err) {
+      result = { ok: false, error: err?.message ?? String(err) };
+    }
+    if (result && result.ok === false) {
+      setOverrides((m) => {
+        const n = new Map(m);
+        n.delete(id);
+        return n;
+      });
+      fail(`“${item.title}” ${words.back}${result.error ? ` ${result.error}` : ""}`, () => commitChange(item, p));
+    }
+  }
+
+  async function runAction(item, id) {
+    if (!onAction || readOnly) return;
+    setProblem(null);
+    setBusy((s) => new Set(s).add(item.id));
+    let result;
+    try {
+      result = await onAction(item, id);
+    } catch (err) {
+      result = { ok: false, error: err?.message ?? String(err) };
+    }
+    setBusy((s) => {
+      const n = new Set(s);
+      n.delete(item.id);
+      return n;
+    });
+    if (result && result.ok === false) fail(`“${item.title}”: ${result.error ?? "that did not save."}`, () => runAction(item, id));
+  }
+
+  async function runKeepAll() {
+    if (!onKeepAll || readOnly || !plan.keep.length) return;
+    setProblem(null);
+    setKeepingAll(true);
+    let result;
+    try {
+      result = await onKeepAll(plan);
+    } catch (err) {
+      result = { ok: false, error: err?.message ?? String(err) };
+    }
+    setKeepingAll(false);
+    if (result && result.ok === false) fail(result.error ?? "None of it was kept.", runKeepAll);
+  }
+
+  function onBlockPointerDown(e, it) {
+    if (gesture.current) latest.current.cancel();
+    if (it.allDay) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const held = !editable || it.draggable === false || it.locked || kindOf(it).locked || looks.get(it.id) === "failed" || looks.get(it.id) === "replaced";
+    if (held) {
+      gesture.current = { kind: "held", item: it, x0: e.clientX, y0: e.clientY, pointerId: e.pointerId ?? null, active: false };
+      attach();
+      return;
+    }
+    const edge = e.target.closest?.("[data-edge]")?.getAttribute("data-edge");
+    const at = slotAt(e.clientX, e.clientY, it.date);
+    gesture.current = {
+      kind: edge === "start" ? "start" : edge === "end" ? "end" : "move",
+      id: it.id,
+      item: it,
+      date: it.date,
+      s0: it.s,
+      e0: it.e,
+      offset: at ? at.minute - it.s : 0,
+      x0: e.clientX,
+      y0: e.clientY,
+      pointerId: e.pointerId ?? null,
+      active: false,
+    };
+    attach();
+  }
+
+  function onColumnPointerDown(e, date) {
+    if (e.target !== e.currentTarget) return;
+    if (gesture.current) latest.current.cancel();
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    select(null);
+    const at = slotAt(e.clientX, e.clientY, date);
+    if (!at) return;
+    setNote(null);
+    if (offHours(at.minute) && explainOffHours) {
+      const node = explainOffHours({ date, minute: at.minute, before: ws != null && at.minute < ws });
+      if (node) setNote({ date, minute: Math.round(at.minute), node });
+      return;
+    }
+    if (!onCompose || readOnly) return;
+    e.preventDefault();
+    gesture.current = {
+      kind: "create",
+      date,
+      anchor: clamp(snapFloor(at.minute, snap), ws ?? lo, (we ?? hi) - snap),
+      x0: e.clientX,
+      y0: e.clientY,
+      pointerId: e.pointerId ?? null,
+      active: false,
+    };
+    attach();
+  }
+
+  // Esc cancels a drag or a note, and clears the selection.
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (gesture.current) latest.current.cancel();
+      else setNote(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  // ---- drops from outside (a task list beside the grid)
+  function onDragOver(e) {
+    if (!onDrop || readOnly) return;
+    const ours = carried || [...(e.dataTransfer?.types ?? [])].includes(TIME_GRID_MIME);
+    if (!ours) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+    const at = slotAt(e.clientX, e.clientY);
+    if (!at) return;
+    const minutes = clamp(Number(carried?.minutes) || 60, snap, hi - lo);
+    const s = clamp(snapFloor(at.minute, snap), lo, hi - minutes);
+    setDropHint({ date: at.date, start: s, end: s + minutes, title: carried?.title ?? "" });
+  }
+  function onDragLeave(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDropHint(null);
+  }
+  async function onDropHere(e) {
+    if (!onDrop || readOnly) return;
+    let item = carried;
+    try {
+      const raw = e.dataTransfer?.getData(TIME_GRID_MIME);
+      if (raw) item = JSON.parse(raw);
+    } catch {
+      // keep `carried`
+    }
+    const hint = dropHint;
+    setDropHint(null);
+    carried = null;
+    if (!item) return;
+    e.preventDefault();
+    const at = slotAt(e.clientX, e.clientY);
+    const minutes = clamp(Number(item.minutes) || 60, snap, hi - lo);
+    const s = at ? clamp(snapFloor(at.minute, snap), lo, hi - minutes) : hint?.start;
+    const date = at?.date ?? hint?.date;
+    if (date == null || s == null) return;
+    const key = `drop-${item.id}-${Date.now()}`;
+    const ghost = { key, date, start: s, end: s + minutes, title: item.title ?? "", done: false };
+    setPending((cur) => [...cur, ghost]);
+    let result;
+    try {
+      result = await onDrop(item, { date, start: toHHMM(s), end: toHHMM(s + minutes) });
+    } catch (err) {
+      result = { ok: false, error: err?.message ?? String(err) };
+    }
+    if (result && result.ok === false) {
+      setPending((cur) => cur.filter((p) => p.key !== key));
+      fail(`“${item.title}” was not placed.${result.error ? ` ${result.error}` : ""}`);
+      return;
+    }
+    if (matches(ghost, [...(events ?? []), ...(proposals ?? [])])) setPending((cur) => cur.filter((p) => p.key !== key));
+    else setPending((cur) => cur.map((p) => (p.key === key ? { ...p, done: true } : p)));
+  }
+
+  // ---- keyboard: a focused block moves by the snap, a day, or grows
+  function onBlockKeyDown(e, it) {
+    if (!editable || it.draggable === false || it.locked || kindOf(it).locked || it.allDay) return;
+    const p = keyChange(e.key, e.shiftKey, it, { days: list, lo, hi, snap });
+    if (!p) return;
+    e.preventDefault();
+    if (p.date === it.date && p.start === it.s && p.end === it.e) return;
+    commitChange(it, p);
+  }
+
+  // J and K walk the proposals that are waiting.
+  function onRootKeyDown(e) {
+    if (!keys || e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || isTyping(e.target)) return;
+    if (e.key === "Escape") {
+      if (sel != null) select(null);
+      return;
+    }
+    const dir = e.key === "j" || e.key === "J" ? 1 : e.key === "k" || e.key === "K" ? -1 : 0;
+    if (!dir) return;
+    const id = walkProposal(items, list, sel, dir);
+    if (id == null) return;
+    e.preventDefault();
+    select(id);
+    const it = items.find((i) => i.id === id);
+    if (it && list.includes(it.date)) setDay(it.date);
+    requestAnimationFrame(() => {
+      const el = root.current?.querySelector(`[data-block="${CSS.escape(id)}"]`);
+      el?.scrollIntoView?.({ block: "nearest", behavior: reducedMotion() ? "auto" : "smooth" });
+    });
+  }
+
+  // ---- drawing
+  const isToday = (d) => d === today;
+  const top = (min) => (min - lo) * ppm;
+  const fmtDay = useMemo(() => {
+    try {
+      return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+    } catch {
+      return new Intl.DateTimeFormat("en-GB", { weekday: "short", timeZone: "UTC" });
+    }
+  }, [locale]);
+  const fmtLong = useMemo(() => {
+    try {
+      return new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" });
+    } catch {
+      return new Intl.DateTimeFormat("en-GB", { weekday: "long", timeZone: "UTC" });
+    }
+  }, [locale]);
+  const weekday = (d, long) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(d);
+    if (!m) return "";
+    return (long ? fmtLong : fmtDay).format(new Date(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3]))));
+  };
+  const hours = [];
+  for (let h = startHour + 1; h < endHour; h += 1) hours.push(h);
+
+  const headerFor = (d, i, compact) => {
+    if (renderDayHeader) return renderDayHeader(d, { isToday: isToday(d), index: i, compact, selected: d === day });
+    const n = dayNotes?.[d];
+    return (
+      <span className={cx("flex min-w-0 gap-x-1.5", compact ? "flex-col items-center" : "items-baseline")}>
+        <span className={cx("text-xs font-medium", isToday(d) ? "text-primary" : "text-muted-foreground")}>{weekday(d)}</span>
+        <span data-nums className={cx("text-sm font-semibold", isToday(d) && "rounded-full bg-primary px-1.5 text-primary-foreground")}>
+          {dateNum(d)}
+        </span>
+        {n?.text ? (
+          <span data-nums className={cx("min-w-0 truncate text-2xs font-medium", compact ? "" : "ml-auto", NOTE_TONE[n.tone ?? "neutral"] ?? NOTE_TONE.neutral)}>
+            {n.text}
+          </span>
+        ) : null}
+      </span>
+    );
+  };
+
+  const floating = (b, h, look = "ink", kind = {}) => (
+    <div
+      aria-hidden="true"
+      className={cx("pointer-events-none absolute inset-x-[3px] z-40 rounded-[4px] shadow-lg transition-[top,height] duration-75 ease-out", shellOf(look, kind, pencilColor))}
+      style={{ top: top(b.s) + 1, height: h }}
+    >
+      <Face item={b} h={h} kind={kind} look={look} fmt={formatTime} words={words} pencilClassName={pencilClassName} />
+    </div>
+  );
+
+  const labelOf = (it, look, clashed) => {
+    if (it.label != null) return it.label;
+    if (clashed) return `${words.clash} · ${namesOf(clashed, formatTime, 1)}`;
+    if (look === "unsure") return `${words.unsure}${kindOf(it).label ? ` · ${kindOf(it).label}` : ""}`;
+    if (look === "failed") return words.failed;
+    if (look === "replaced") return words.replaced;
+    if (look === "was") return words.was;
+    if (look === "pencil") return kindOf(it).label ?? "";
+    return null;
+  };
+
+  const showKeepAll = Boolean(keepAll) && !readOnly && waitingCount > 0;
+  const selectedItem = sel != null ? items.find((i) => i.id === String(sel)) : null;
+
+  // ---- loading / failed
+  if (status === "failed") {
+    return (
+      <div className={cx("@container", className)} role="group" aria-label={label}>
+        <Notice tone="danger" title={words.failedTitle ?? "The week did not load"} action={onRetry ? <Button size="sm" onClick={onRetry}>{words.retry}</Button> : null}>
+          {error ?? "Something went wrong reading the week."}
+        </Notice>
+      </div>
+    );
+  }
+  const loading = status === "loading";
+
+  return (
+    <div
+      ref={root}
+      className={cx("@container relative select-none outline-none focus-visible:ring-2 focus-visible:ring-ring", height === "fill" && "flex min-h-0 flex-1 flex-col", className)}
+      aria-label={label}
+      role="group"
+      tabIndex={keys ? 0 : undefined}
+      aria-busy={loading || undefined}
+      onKeyDown={onRootKeyDown}
+    >
+      {above ? <div className="mb-2">{above}</div> : null}
+
+      {showKeepAll ? (
+        <div className="grid items-center gap-2 border-b border-border px-2 py-2 @min-[36rem]:grid-cols-[minmax(0,1fr)_auto]">
+          <p className="m-0 min-w-0 text-xs text-muted-foreground" id={keepWordsId}>
+            {plan.words}
+          </p>
+          <Button
+            size="sm"
+            variant={keepAll.primary ? "primary" : "secondary"}
+            loading={keepingAll}
+            disabled={!plan.keep.length || !onKeepAll}
+            onClick={runKeepAll}
+            aria-describedby={keepWordsId}
+          >
+            {`${keepAll.label ?? words.keepAll} (${plan.keep.length})`}
+          </Button>
+        </div>
+      ) : null}
+
+      {problem ? (
+        <Notice
+          tone="danger"
+          className="m-2"
+          onDismiss={() => setProblem(null)}
+          action={problem.retry ? <Button size="sm" onClick={problem.retry}>{words.retry}</Button> : null}
+        >
+          {problem.message}
+        </Notice>
+      ) : null}
+
+      {/* one day at a time on a narrow window: the strip picks it */}
+      <div className={cx("grid gap-1 border-b border-border p-2 @min-[36rem]:hidden", STRIP_COLS[list.length] ?? "grid-cols-5")}>
+        {list.map((d, i) => (
+          <button
+            key={d}
+            type="button"
+            aria-pressed={d === day}
+            onClick={() => setDay(d)}
+            className={cx("flex min-h-11 flex-col items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring", d === day ? "bg-accent" : "hover:bg-accent/50")}
+          >
+            {headerFor(d, i, true)}
+          </button>
+        ))}
+      </div>
+
+      <div
+        ref={scroller}
+        className={cx("relative overflow-x-clip", height && "overflow-y-auto overscroll-contain", height === "fill" && "min-h-0 flex-1")}
+        style={height && height !== "fill" ? { height } : undefined}
+      >
+        {/* the date row and the all-day row stay on top while the hours scroll */}
+        <div className="sticky top-0 z-30 bg-card">
+          <div className={cx("hidden @min-[36rem]:grid", WIDE_COLS[list.length])}>
+            <div aria-hidden={corner ? undefined : "true"} className="flex items-end justify-end border-b border-border px-1.5 pb-1 text-2xs text-muted-foreground">
+              {corner}
+            </div>
+            {list.map((d, i) => (
+              <div key={d} className={cx("relative min-w-0 border-l border-border px-2.5 pb-1.5 pt-2", isToday(d) ? "border-b-2 border-b-primary bg-primary/5" : "border-b border-b-border")}>
+                {headerFor(d, i, false)}
+              </div>
+            ))}
+          </div>
+          <div className={cx("grid grid-cols-[3rem_minmax(0,1fr)] border-b border-border", WIDE_COLS[list.length])}>
+            <div className="flex items-center justify-end pr-1.5 text-2xs text-muted-foreground">{words.allDay}</div>
+            {list.map((d) => (
+              <div key={d} className={cx("min-h-7 min-w-0 space-y-0.5 border-l border-border p-[3px]", d !== day && "hidden @min-[36rem]:block", isToday(d) && "bg-primary/5")}>
+                {(byDay.get(d)?.allDay ?? []).map((it) => {
+                  const look = looks.get(it.id);
+                  const kind = kindOf(it);
+                  const waiting = look !== "ink" && look !== "failed" && look !== "replaced" && look !== "was";
+                  return (
+                    <div key={it.id} className={cx("group relative flex min-h-5 min-w-0 items-center rounded-[4px]", shellOf(look, kind, pencilColor), String(sel) === it.id && "ring-2 ring-primary")}>
+                      <button
+                        type="button"
+                        data-block={it.id}
+                        title={it.title}
+                        onClick={(e) => {
+                          select(it.id);
+                          onOpen?.(it, e.currentTarget);
+                        }}
+                        className="flex min-h-5 min-w-0 flex-1 items-center gap-1 rounded-[4px] px-1.5 text-left text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      >
+                        <Icon name={it.locked || kind.locked ? "lock" : (it.icon ?? kind.icon ?? "calendar")} size={11} className="shrink-0" />
+                        <span className="min-w-0 truncate">{it.title}</span>
+                      </button>
+                      {waiting && onAction && !readOnly && String(sel) === it.id ? (
+                        <span className="flex shrink-0 gap-0.5 pr-0.5">
+                          <button type="button" disabled={busy.has(it.id)} onClick={() => runAction(it, "keep")} aria-label={words.keep} title={words.keep} className="inline-flex size-5 items-center justify-center rounded-[4px] bg-primary text-primary-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                            <Icon name="check" size={10} />
+                          </button>
+                          <button type="button" disabled={busy.has(it.id)} onClick={() => runAction(it, "dismiss")} aria-label={words.dismiss} title={words.dismiss} className="inline-flex size-5 items-center justify-center rounded-[4px] border border-border bg-card outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                            <Icon name="x" size={10} />
+                          </button>
+                        </span>
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className={cx("relative grid grid-cols-[3rem_minmax(0,1fr)]", WIDE_COLS[list.length])} style={{ height: bodyHeight }}>
+          {/* the hour gutter: the working day's ends in weight */}
+          <div aria-hidden="true" className="relative">
+            {hours.map((h) =>
+              (ws != null && Math.abs(h * 60 - ws) < 30) || (we != null && Math.abs(h * 60 - we) < 30) ? null : (
+                <span key={h} data-nums className="absolute right-1.5 -translate-y-1/2 font-mono text-2xs text-muted-foreground" style={{ top: top(h * 60) }}>
+                  {formatTime(h * 60)}
+                </span>
+              ),
+            )}
+            {[ws, we].map((m, i) =>
+              m != null && m > lo && m < hi ? (
+                <span key={i} data-nums className="absolute right-1.5 -translate-y-1/2 font-mono text-2xs font-semibold text-foreground" style={{ top: top(m) }}>
+                  {formatTime(m)}
+                </span>
+              ) : null,
+            )}
+          </div>
+
+          {list.map((d, di) => {
+            const slot = byDay.get(d) ?? { timed: [], was: [], lanes: new Map() };
+            return (
+              <div
+                key={d}
+                ref={(el) => {
+                  if (el) cols.current.set(d, el);
+                  else cols.current.delete(d);
+                }}
+                data-day={d}
+                onPointerDown={(e) => onColumnPointerDown(e, d)}
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
+                onDrop={onDropHere}
+                className={cx("relative min-w-0 touch-pan-y border-l border-border", d !== day && "hidden @min-[36rem]:block", isToday(d) && "bg-primary/5", onCompose && !readOnly && "cursor-cell")}
+              >
+                {/* ruled hours, and the hatched time outside the working day */}
+                <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+                  {ws != null && ws > lo ? <div className={cx("absolute inset-x-0 top-0 border-b border-border", OFF_HATCH)} style={{ height: top(ws) }} /> : null}
+                  {we != null && we < hi ? <div className={cx("absolute inset-x-0 bottom-0 border-t border-border", OFF_HATCH)} style={{ top: top(we) }} /> : null}
+                  {hours.map((h) => (
+                    <div key={h} className="absolute inset-x-0 border-t border-border/60" style={{ top: top(h * 60) }} />
+                  ))}
+                </div>
+
+                {loading ? (
+                  <div aria-hidden="true" className="pointer-events-none absolute inset-x-[3px] top-0 space-y-6 pt-10">
+                    {[0, 1, 2].map((n) => (
+                      <Skeleton key={n} shape="rect" className={cx("w-full", n === 1 ? "h-16" : "h-10")} />
+                    ))}
+                  </div>
+                ) : null}
+
+                {/* where it used to be: a dotted marker under everything */}
+                {slot.was.map((it) => {
+                  const h = Math.max(14, (it.e - it.s) * ppm - 2);
+                  return (
+                    <div key={it.id} aria-hidden="true" className={cx("pointer-events-none absolute inset-x-[3px] z-[1] rounded-[4px]", shellOf("was", {}, pencilColor))} style={{ top: top(it.s) + 1, height: h }}>
+                      <Face item={it} h={h} kind={{}} look="was" label={it.label ?? words.was} fmt={formatTime} words={words} pencilClassName={pencilClassName} />
+                    </div>
+                  );
+                })}
+
+                {!loading
+                  ? slot.timed.map((it) => {
+                      const lane = slot.lanes.get(it.id) ?? { lane: 0, lanes: 1 };
+                      const h = Math.max(14, (it.e - it.s) * ppm - 2);
+                      const look = looks.get(it.id);
+                      const kind = kindOf(it);
+                      const clashed = clashes.get(it.id);
+                      const waiting = it.pencil && (look === "pencil" || look === "unsure");
+                      const dragging = preview?.id === it.id;
+                      const movable = editable && it.draggable !== false && !it.locked && !kind.locked && look !== "failed" && look !== "replaced";
+                      const selected = String(sel) === it.id;
+                      const delay = fresh.indexOf(it.id);
+                      const left = `calc(${(lane.lane / lane.lanes) * 100}% + 3px)`;
+                      const width = `calc(${100 / lane.lanes}% - 6px)`;
+                      const tall = h >= 54;
+                      const showActions = Boolean(onAction) && !readOnly && it.pencil && look !== "failed" && look !== "replaced" && look !== "was";
+                      const dayName = weekday(it.date, true);
+                      return (
+                        <div
+                          key={it.id}
+                          data-id={it.id}
+                          data-look={look}
+                          onPointerDown={(e) => onBlockPointerDown(e, it)}
+                          className={cx(
+                            "group absolute z-10 overflow-hidden rounded-[4px] outline-none motion-safe:transition-[background-color,border-color,color,box-shadow,opacity] motion-safe:duration-700",
+                            shellOf(look, kind, pencilColor),
+                            it.pencil && "z-20",
+                            movable ? "cursor-grab touch-none" : "cursor-pointer",
+                            dragging && "opacity-30",
+                            busy.has(it.id) && "opacity-70",
+                            selected && "z-30 shadow-md ring-2 ring-primary",
+                          )}
+                          style={{ top: top(it.s) + 1, height: h, left, width, transitionDelay: delay > 0 ? `${delay * 160}ms` : undefined }}
+                        >
+                          <button
+                            type="button"
+                            data-block={it.id}
+                            title={`${it.title}, ${span(it.s, it.e, formatTime)}`}
+                            aria-label={`${it.title}, ${dayName} ${span(it.s, it.e, formatTime)}${waiting ? `, ${words.pencilled}` : ""}${it.locked || kind.locked ? `, ${words.locked}` : ""}`}
+                            aria-pressed={it.pencil ? selected : undefined}
+                            onKeyDown={(e) => onBlockKeyDown(e, it)}
+                            onClick={(e) => {
+                              if (suppressClick.current) return;
+                              select(it.id);
+                              onOpen?.(it, e.currentTarget);
+                            }}
+                            className="absolute inset-0 block rounded-[4px] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          >
+                            <Face item={it} h={h} kind={kind} look={look} label={labelOf(it, look, clashed)} fmt={formatTime} clashed={Boolean(clashed)} words={words} pencilClassName={pencilClassName} />
+                          </button>
+                          {showActions && (waiting || it.state === "kept") ? (
+                            <MiniActions item={it} look={look} onAction={runAction} busy={busy.has(it.id)} words={words} tall={tall && look !== "ink"} show={selected} />
+                          ) : null}
+                          {movable && h >= 22 ? (
+                            <>
+                              <span data-edge="start" aria-hidden="true" className="absolute inset-x-0 top-0 h-1.5 cursor-ns-resize" />
+                              <span data-edge="end" aria-hidden="true" className="absolute inset-x-0 bottom-0 flex h-2 cursor-ns-resize items-end justify-center pb-0.5">
+                                <span className="h-0.5 w-6 rounded-full bg-current opacity-0 transition-opacity group-hover:opacity-40" />
+                              </span>
+                            </>
+                          ) : null}
+                        </div>
+                      );
+                    })
+                  : null}
+
+                {/* where two things overlap: hatched across the day, before anything is kept */}
+                {slot.timed.flatMap((it) =>
+                  (clashes.get(it.id) ?? []).map((c) => (
+                    <div
+                      key={`${it.id}-${c.withId}`}
+                      data-clash={it.id}
+                      aria-hidden="true"
+                      className={cx("pointer-events-none absolute inset-x-0 z-[25] border-y border-warning opacity-60", CLASH_HATCH)}
+                      style={{ top: top(c.s), height: Math.max(2, (c.e - c.s) * ppm) }}
+                    />
+                  )),
+                )}
+
+                {/* the tag: the words the proposal came from, hanging off its block */}
+                {slot.timed.map((it) => {
+                  if (!it.pencil || !it.tag) return null;
+                  if (!(tags === "all" || (tags === "selected" && String(sel) === it.id))) return null;
+                  const lane = slot.lanes.get(it.id) ?? { lane: 0, lanes: 1 };
+                  const tg = typeof it.tag === "string" ? { quote: it.tag } : it.tag;
+                  const blockTop = top(it.s) + 1;
+                  const blockBottom = top(it.e) - 1;
+                  const place = tagPlacement({ dayIndex: di, dayCount: list.length, bottom: blockBottom, top: blockTop, bodyHeight });
+                  const style = {};
+                  if (place.above) style.bottom = bodyHeight - blockTop + 6;
+                  else style.top = blockBottom + 6;
+                  if (place.side === "left") style.left = `calc(${(lane.lane / lane.lanes) * 100}% + 3px)`;
+                  else style.right = `calc(${(1 - (lane.lane + 1) / lane.lanes) * 100}% + 3px)`;
+                  return (
+                    <div key={`tag-${it.id}`} role="note" className="pointer-events-none absolute z-[45] w-60 max-w-[calc(100cqw-4rem)] rounded-md bg-primary px-2 py-1.5 text-xs leading-snug text-primary-foreground shadow-md" style={style}>
+                      <span aria-hidden="true" className={cx("absolute size-2 rotate-45 bg-primary", place.above ? "-bottom-1" : "-top-1", place.side === "left" ? "left-4" : "right-4")} />
+                      {tg.quote ? <q className="font-medium italic">{tg.quote}</q> : null}
+                      {tg.source ? <span className="mt-0.5 block text-2xs opacity-90">{tg.source}</span> : null}
+                    </div>
+                  );
+                })}
+
+                {/* the agent still pencilling this day in */}
+                {(drafting ?? [])
+                  .filter((g) => g.date === d)
+                  .map((g, i) => (
+                    <div
+                      key={i}
+                      aria-hidden="true"
+                      className={cx("pointer-events-none absolute inset-x-[3px] z-10 flex items-center justify-center rounded-[4px] border-[1.5px] border-dashed border-border text-muted-foreground motion-safe:animate-pulse", HATCH, pencilClassName, "text-xs italic")}
+                      style={{ top: top(toMin(g.start)) + 1, height: Math.max(14, (toMin(g.end) - toMin(g.start)) * ppm - 2) }}
+                    >
+                      {g.label ?? words.drafting}
+                    </div>
+                  ))}
+
+                {/* the block being made, while its editor is open */}
+                {draft && draft.date === d ? (
+                  <div data-draft aria-hidden="true" className="pointer-events-none absolute inset-x-[3px] z-30 rounded-[4px] shadow-lg ring-2 ring-primary">
+                    {(() => {
+                      const s = toMin(draft.start);
+                      const e = toMin(draft.end);
+                      const h = Math.max(14, (e - s) * ppm - 2);
+                      return (
+                        <div className={cx("absolute inset-x-0 rounded-[4px]", shellOf("ink", { solid: true }, pencilColor))} style={{ top: top(s) + 1, height: h }}>
+                          <Face item={{ title: draft.title || words.newBlock, s, e }} h={h} kind={{ solid: true }} look="ink" fmt={formatTime} words={words} />
+                        </div>
+                      );
+                    })()}
+                  </div>
+                ) : null}
+
+                {/* the block in the hand: lifted, snapping */}
+                {preview && preview.date === d
+                  ? (() => {
+                      const src = preview.id ? items.find((x) => x.id === preview.id) : null;
+                      const h = Math.max(14, (preview.end - preview.start) * ppm - 2);
+                      const b = src ? { ...src, s: preview.start, e: preview.end } : { title: words.newBlock, s: preview.start, e: preview.end };
+                      return floating(b, h, src ? looks.get(src.id) : "ink", src ? kindOf(src) : { solid: true });
+                    })()
+                  : null}
+
+                {/* a drop from the list, before it lands */}
+                {dropHint && dropHint.date === d ? floating({ title: dropHint.title, s: dropHint.start, e: dropHint.end }, Math.max(14, (dropHint.end - dropHint.start) * ppm - 2), "pencil") : null}
+
+                {/* dropped and waiting for its row */}
+                {pending
+                  .filter((p) => p.date === d)
+                  .map((p) => (
+                    <div key={p.key}>{floating({ title: p.title, s: p.start, e: p.end }, Math.max(14, (p.end - p.start) * ppm - 2), "ink", { solid: true })}</div>
+                  ))}
+
+                {/* why this time cannot be used */}
+                {note && note.date === d ? (
+                  <div role="note" className="absolute inset-x-1 z-50 rounded-lg bg-foreground px-3 py-2.5 text-sm leading-snug text-background shadow-lg" style={{ top: Math.min(bodyHeight - 110, Math.max(4, top(note.minute) - 8)) }}>
+                    {note.node}
+                  </div>
+                ) : null}
+
+                {/* now */}
+                {isToday(d) && nowMin != null && nowMin >= lo && nowMin <= hi ? (
+                  <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 z-[35]" style={{ top: top(nowMin) }}>
+                    <div className="relative h-0.5 bg-primary">
+                      <span className="absolute -left-[5px] -top-1 size-2.5 rounded-full bg-primary" />
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+
+          {!loading && emptyText !== false && !items.length ? (
+            <div className="pointer-events-none absolute inset-0 grid place-items-center p-6 text-center text-sm text-muted-foreground">
+              <p className="m-0 max-w-xs">{emptyText ?? words.empty}</p>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <p aria-live="polite" className="sr-only">
+        {selectedItem ? `${selectedItem.title}, ${weekday(selectedItem.date, true)} ${span(selectedItem.s ?? 0, selectedItem.e ?? 0, formatTime)}${selectedItem.s == null ? "" : `, ${durationWords(selectedItem.e - selectedItem.s)}`}` : ""}
+      </p>
+    </div>
+  );
+}
+
+// ---- the goals strip ------------------------------------------------------
+
+const GOAL_LOOK = {
+  ink: "border-border bg-card",
+  pencil: cx("border-dashed border-muted-foreground bg-card", HATCH),
+  done: "border-success bg-success/10",
+  empty: "border-dashed border-border bg-transparent text-muted-foreground",
+};
+
+/**
+ * A strip of goals to sit above the days, and a summary cell at its end (a
+ * total against a target, red once it is over). Goals are pencil until kept,
+ * like the blocks beside them.
+ *   items    [{ id, title, number?, state: "ink" | "pencil" | "done" | "empty", meta?, mark? }]
+ *   summary  { label, value, of?, unit?, over?, note? }   value / of are numbers or strings
+ *   empty    what to show with no goals
+ */
+export function GoalStrip({ items = [], summary, selectedId, onSelect, empty, label = "Goals", className }) {
+  if (!items.length && !summary && !empty) return null;
+  return (
+    <div role="group" aria-label={label} className={cx("grid grid-cols-[repeat(auto-fit,minmax(9.5rem,1fr))] gap-2", className)}>
+      {items.length ? (
+        items.map((g, i) => {
+          const state = GOAL_LOOK[g.state] ? g.state : "ink";
+          const on = selectedId != null && String(selectedId) === String(g.id);
+          const body = (
+            <>
+              <span className="flex min-w-0 items-start gap-2">
+                <span data-nums className={cx("inline-flex size-5 shrink-0 items-center justify-center rounded-full border text-2xs font-semibold", state === "pencil" || state === "empty" ? "border-dashed border-muted-foreground" : "border-border", state === "done" && "border-success text-success")}>
+                  {state === "done" ? <Icon name="check" size={10} /> : (g.number ?? i + 1)}
+                </span>
+                <span className={cx("min-w-0 text-xs font-medium leading-snug", state === "done" ? "text-muted-foreground" : "")}>{cut(g.title)}</span>
+              </span>
+              {g.meta || g.mark ? (
+                <span className="mt-1 flex min-w-0 items-center gap-1 pl-7 text-2xs text-muted-foreground">
+                  {state === "pencil" ? <Icon name="pencil" size={10} className="shrink-0" /> : null}
+                  <span className="truncate">{g.mark ?? g.meta}</span>
+                </span>
+              ) : null}
+            </>
+          );
+          const cls = cx("block min-w-0 rounded-md border px-2 py-1.5 text-left motion-safe:transition-[background-color,border-color] motion-safe:duration-700", GOAL_LOOK[state], on && "ring-2 ring-primary");
+          return onSelect ? (
+            <button key={g.id} type="button" aria-pressed={on} onClick={() => onSelect(g.id)} className={cx(cls, "outline-none focus-visible:ring-2 focus-visible:ring-ring")}>
+              {body}
+            </button>
+          ) : (
+            <div key={g.id} className={cls}>
+              {body}
+            </div>
+          );
+        })
+      ) : empty ? (
+        <div className={cx("min-w-0 rounded-md border px-2 py-1.5 text-xs", GOAL_LOOK.empty)} style={{ gridColumn: "1 / -1" }}>
+          {empty}
+        </div>
+      ) : null}
+      {summary ? (
+        <div className="min-w-0 rounded-md border border-border bg-card px-2 py-1.5" data-summary>
+          <span className="block text-2xs font-medium uppercase tracking-wide text-muted-foreground">{summary.label}</span>
+          <span data-nums className={cx("block text-sm font-semibold", summary.over ? "text-destructive" : "")}>
+            {summary.value}
+            {summary.of != null ? <span className="font-normal text-muted-foreground">{` of ${summary.of}`}</span> : null}
+            {summary.unit ? ` ${summary.unit}` : ""}
+            {summary.over ? <span className="ml-1 text-2xs font-semibold">over</span> : null}
+          </span>
+          {summary.note ? <span className="block truncate text-2xs text-muted-foreground">{summary.note}</span> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}