makersclaw 0.2.0 → 0.3.0

package/registry/blocks/calendar-view/paint.js

@@ -0,0 +1,69 @@
+// How an item is coloured on the calendar — tokens only. A timed block
+// and an all-day bar wear a tint with a solid leading edge; a timed item
+// in a month cell is a dot. The colour comes from the task's project
+// (chart-1…5), or its status's tone with colorBy="status"; one without
+// either wears the theme's primary.
+
+const HUE_TINT = {
+  1: "bg-chart-1/15 hover:bg-chart-1/25 border-s-chart-1",
+  2: "bg-chart-2/15 hover:bg-chart-2/25 border-s-chart-2",
+  3: "bg-chart-3/15 hover:bg-chart-3/25 border-s-chart-3",
+  4: "bg-chart-4/15 hover:bg-chart-4/25 border-s-chart-4",
+  5: "bg-chart-5/15 hover:bg-chart-5/25 border-s-chart-5",
+};
+
+const HUE_DOT = { 1: "bg-chart-1", 2: "bg-chart-2", 3: "bg-chart-3", 4: "bg-chart-4", 5: "bg-chart-5" };
+
+const TONE_TINT = {
+  neutral: "bg-muted hover:bg-accent border-s-muted-foreground",
+  primary: "bg-primary/10 hover:bg-primary/15 border-s-primary",
+  info: "bg-info/15 hover:bg-info/25 border-s-info",
+  success: "bg-success/15 hover:bg-success/25 border-s-success",
+  warning: "bg-warning/15 hover:bg-warning/25 border-s-warning",
+  danger: "bg-destructive/10 hover:bg-destructive/20 border-s-destructive",
+};
+
+const TONE_DOT = {
+  neutral: "bg-muted-foreground",
+  primary: "bg-primary",
+  info: "bg-info",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+};
+
+const DEFAULT = { tint: TONE_TINT.primary, dot: TONE_DOT.primary };
+
+/** { tint, dot } class strings for a task. */
+export function paintOf(task, ctx, colorBy = "project") {
+  if (colorBy === "status") {
+    const s = ctx.statusById.get(String(task.status));
+    if (s?.hue && HUE_TINT[s.hue]) return { tint: HUE_TINT[s.hue], dot: HUE_DOT[s.hue] };
+    const tone = s?.tone ?? "neutral";
+    return { tint: TONE_TINT[tone] ?? TONE_TINT.neutral, dot: TONE_DOT[tone] ?? TONE_DOT.neutral };
+  }
+  if (colorBy === "project") {
+    const p = ctx.projectById.get(String(task.project));
+    if (p?.hue && HUE_TINT[p.hue]) return { tint: HUE_TINT[p.hue], dot: HUE_DOT[p.hue] };
+  }
+  return DEFAULT;
+}
+
+/** A drag handle's props with our keys first: `onKey(e)` returns true
+ *  when it handled the key, and dnd-kit's own keyboard pickup never sees
+ *  it (Enter opens, Delete deletes, the arrows nudge a timed block). */
+export function withKeys(handle, onKey) {
+  return {
+    ...handle,
+    onKeyDown: (e) => {
+      if (onKey?.(e) === true) return;
+      handle?.onKeyDown?.(e);
+    },
+  };
+}
+
+/** Whether a key event came from a field the founder is typing in. */
+export function isTyping(e) {
+  const t = e.target;
+  return Boolean(t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)));
+}

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

@@ -0,0 +1,527 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../../ui";
+import { dayOf, formatDate, isDone, isWeekend, minutesOf, useDraggableTask, useDropTarget } from "../task-model";
+import { DAY_MINUTES, eventTimeLabel, hourLabel, layoutLanes, layoutTimed, minutesLabel, snapMinutes } from "./calendar-model";
+import { DraftInput } from "./draft";
+import { paintOf, withKeys } from "./paint";
+
+// The week and the day: a strip of all-day items on top, then the hours
+// as a scrolling grid with one column per day. Timed tasks are tinted
+// blocks placed by their times; overlapping ones share the column side by
+// side. Drag a block to move it (it snaps to the quarter hour and to the
+// day columns as it goes), drag its bottom edge to change how long it
+// runs, press on an empty stretch and drag to make a new one (a click
+// makes an hour). A line marks now. The available-time layer draws closed
+// hours muted and open slots as dashed boxes.
+//
+// Keyboard: a focused block moves with the arrow keys (up/down 15
+// minutes, left/right a day), Shift+up/down changes its length, Enter
+// opens it, Delete removes it (with Undo).
+
+const GUTTER = "w-14 shrink-0";
+
+export function TimeGrid({ days, events, api, hourHeight = 48, height = "40rem", closed, slots, renderSlot, onSlotClick, selectedSlot, slotLabel, now }) {
+  const { ctx, locale } = api;
+  const n = days.length;
+  const cols = { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` };
+  const scrollRef = useRef(null);
+  const colsRef = useRef(null);
+  const colWidth = () => (colsRef.current?.getBoundingClientRect().width ?? 700) / n;
+  const timed = useMemo(() => events.filter((e) => e.timed), [events]);
+  const allDay = useMemo(() => events.filter((e) => !e.timed), [events]);
+  const nowDay = dayOf(now);
+  const nowMin = now ? minutesOf(now) : null;
+
+  // Open the grid near what matters: now, else the day's first item, else 8 AM.
+  const first = timed.length ? Math.min(...timed.map((e) => e.from)) : null;
+  const focusMin = nowDay && days.includes(nowDay) && nowMin !== null ? nowMin - 90 : first !== null ? first - 30 : 8 * 60;
+  const scrollKey = `${days[0]}:${n}`;
+  const scrolled = useRef(null);
+  useEffect(() => {
+    if (scrolled.current === scrollKey || !scrollRef.current) return;
+    scrolled.current = scrollKey;
+    scrollRef.current.scrollTop = Math.max(0, (focusMin / 60) * hourHeight);
+  }, [scrollKey, focusMin, hourHeight]);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex overflow-y-hidden border-b border-border [scrollbar-gutter:stable]">
+        <div className={GUTTER} />
+        <div className="grid flex-1" style={cols}>
+          {days.map((day) => (
+            <DayHead key={day} day={day} api={api} single={n === 1} />
+          ))}
+        </div>
+      </div>
+      <AllDayStrip days={days} events={allDay} api={api} cols={cols} />
+      <div ref={scrollRef} className="relative overflow-y-auto overscroll-contain [scrollbar-gutter:stable]" style={{ height }}>
+        <div className="relative flex" style={{ height: 24 * hourHeight }}>
+          <div className={cx(GUTTER, "relative")} aria-hidden="true">
+            {Array.from({ length: 23 }, (_, i) => i + 1).map((h) => (
+              <span key={h} data-nums className="absolute end-2 -translate-y-1/2 text-2xs text-muted-foreground" style={{ top: h * hourHeight }}>
+                {hourLabel(h, { locale })}
+              </span>
+            ))}
+          </div>
+          <div ref={colsRef} className="relative grid flex-1" style={cols}>
+            <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+              {Array.from({ length: 23 }, (_, i) => i + 1).map((h) => (
+                <div key={h} className="absolute inset-x-0 border-t border-border" style={{ top: h * hourHeight }} />
+              ))}
+            </div>
+            {days.map((day, i) => (
+              <DayColumn
+                key={day}
+                day={day}
+                index={i}
+                days={days}
+                events={timed.filter((e) => e.start === day)}
+                api={api}
+                hourHeight={hourHeight}
+                colWidth={colWidth}
+                closed={closed ? closed(day) : null}
+                slots={slots?.filter((s) => s.day === day)}
+                renderSlot={renderSlot}
+                onSlotClick={onSlotClick}
+                selectedSlot={selectedSlot}
+                slotLabel={slotLabel}
+                nowMin={day === nowDay ? nowMin : null}
+                weekend={isWeekend(day, ctx.weekend)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DayHead({ day, api, single }) {
+  const { ctx, locale } = api;
+  const today = day === ctx.today;
+  return (
+    <div className={cx("flex min-w-0 items-center justify-center border-s border-border py-2 first:border-s-0", single && "justify-start ps-3")}>
+      {/* raw: the heading is the way into that day (a button in the header
+          row); a kit Button would pad it as an action. */}
+      <button
+        type="button"
+        onClick={() => api.openDay(day)}
+        disabled={single}
+        aria-label={`${formatDate(day, { weekday: "long", month: "long", day: "numeric" }, { locale })}. Open the day`}
+        aria-current={today ? "date" : undefined}
+        className="group/head inline-flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:hover:bg-transparent"
+      >
+        <span className={cx("text-xs", today ? "font-medium text-primary" : "text-muted-foreground")}>{formatDate(day, { weekday: "short" }, { locale })}</span>
+        <span
+          data-nums
+          className={cx("inline-flex size-7 items-center justify-center rounded-full text-sm font-semibold", today ? "bg-primary text-primary-foreground" : "text-foreground")}
+        >
+          {Number(day.slice(8, 10))}
+        </span>
+      </button>
+    </div>
+  );
+}
+
+// ---- the all-day strip ----------------------------------------------------
+
+const STRIP_LANES = 3;
+
+function AllDayStrip({ days, events, api, cols }) {
+  const [open, setOpen] = useState(false);
+  const rowRef = useRef(null);
+  const layout = useMemo(() => layoutLanes(events, days), [events, days]);
+  const over = layout.lanes > STRIP_LANES && !open;
+  const lanes = over ? STRIP_LANES - 1 : layout.lanes;
+  const hiddenCount = layout.items.filter((it) => it.lane >= lanes).length;
+  const cellWidth = () => (rowRef.current?.getBoundingClientRect().width ?? 700) / days.length;
+  const drafting = api.draft?.allDay && days.includes(api.draft.day);
+  const rows = Math.max(lanes + (over ? 1 : 0) + (drafting ? 1 : 0), 1);
+  return (
+    <div className="flex overflow-y-hidden border-b border-border [scrollbar-gutter:stable]">
+      <div className={cx(GUTTER, "flex items-start justify-end pe-2 pt-1.5 text-2xs text-muted-foreground")}>All day</div>
+      <div ref={rowRef} className="relative grid flex-1" style={{ ...cols, minHeight: rows * 24 + 8 }}>
+        {days.map((day) => (
+          <StripCell key={day} day={day} api={api} />
+        ))}
+        <div className="pointer-events-none absolute inset-x-0 top-1 grid gap-y-0.5" style={{ ...cols, gridAutoRows: "22px" }}>
+          {layout.items
+            .filter((it) => it.lane < lanes)
+            .map((it) => (
+              <StripItem key={it.event.id} item={it} days={days} api={api} cellWidth={cellWidth} />
+            ))}
+          {over ? (
+            // raw: a line of small text sized to a lane that opens the strip;
+            // a kit Button is a 36px action.
+            <button
+              type="button"
+              onClick={() => setOpen(true)}
+              style={{ gridColumn: `1 / span ${days.length}`, gridRow: lanes + 1 }}
+              className="pointer-events-auto mx-1 justify-self-start rounded-sm px-1.5 text-xs font-medium text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {hiddenCount} more
+            </button>
+          ) : null}
+          {drafting ? (
+            <div
+              style={{ gridColumn: `${days.indexOf(api.draft.day) + 1}`, gridRow: lanes + (over ? 2 : 1) }}
+              className="pointer-events-auto mx-1 flex items-center rounded-sm bg-primary/10 px-1.5 ring-1 ring-primary"
+            >
+              <DraftInput label={`New all-day task on ${formatDate(api.draft.day, { weekday: "long", month: "long", day: "numeric" })}`} onSubmit={api.saveDraft} onCancel={api.cancelDraft} />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StripCell({ day, api }) {
+  const label = `${formatDate(day, { weekday: "long", month: "long", day: "numeric" }, { locale: api.locale })}, all day`;
+  const drop = useDropTarget(`strip:${day}`, { kind: "cell", day, label });
+  return (
+    <div
+      ref={drop.setNodeRef}
+      onClick={(e) => {
+        if (api.editable && e.target === e.currentTarget) api.startDraft({ day, allDay: true });
+      }}
+      className={cx("border-s border-border transition-colors duration-150 first:border-s-0", drop.isOver && "bg-accent")}
+    />
+  );
+}
+
+function StripItem({ item, days, api, cellWidth }) {
+  const { event, col, span, lane, clippedStart, clippedEnd } = item;
+  const { ctx, editable } = api;
+  const task = event.task;
+  const done = isDone(task, ctx);
+  const paint = paintOf(task, ctx, api.colorBy);
+  const title = task.title || "Untitled";
+  const d = useDraggableTask(`strip:${event.id}`, { kind: "span", task, event }, { disabled: !editable });
+  const canResize = editable && !clippedEnd;
+  const r = useDraggableTask(`sx:${event.id}`, { kind: "resize-x", task, event, cellWidth }, { disabled: !canResize });
+  const grow = r.isDragging && r.transform ? Math.round(r.transform.x / cellWidth()) : 0;
+  const shownSpan = Math.max(1, Math.min(days.length - col, span + Math.max(grow, 1 - span)));
+  const keys = withKeys(d.handle, (e) => {
+    if (e.key === "Enter") return true;
+    if ((e.key === "Delete" || e.key === "Backspace") && editable) {
+      e.preventDefault();
+      api.remove(task);
+      return true;
+    }
+    if (editable && e.shiftKey && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+      e.preventDefault();
+      api.extend(event, e.key === "ArrowRight" ? 1 : -1);
+      return true;
+    }
+    return false;
+  });
+  return (
+    // raw: an all-day bar is a drag source that also opens; a kit
+    // Button would centre and pad it as an action.
+    <button
+      type="button"
+      ref={d.setNodeRef}
+      data-cal-id={event.id}
+      {...(editable ? keys : {})}
+      onPointerDown={(e) => {
+        if (!editable) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const w = rect.width / shownSpan;
+        api.setGrab(days[col + Math.max(0, Math.min(shownSpan - 1, Math.floor((e.clientX - rect.left) / w)))]);
+        keys.onPointerDown?.(e);
+      }}
+      onClick={api.open ? () => api.open(task) : undefined}
+      aria-label={`${title}, ${event.start === event.end ? "all day" : `${formatDate(event.start, { month: "short", day: "numeric" })} to ${formatDate(event.end, { month: "short", day: "numeric" })}`}${done ? ", done" : ""}`}
+      title={title}
+      style={{ gridColumn: `${col + 1} / span ${shownSpan}`, gridRow: lane + 1 }}
+      className={cx(
+        "pointer-events-auto relative flex min-w-0 items-center rounded-sm border-s-[3px] px-1.5 text-left text-xs font-medium text-foreground outline-none transition-[opacity,background-color] duration-150 focus-visible:ring-2 focus-visible:ring-ring",
+        paint.tint,
+        clippedStart ? "ms-0 rounded-s-none border-s-0 ps-2" : "ms-1",
+        clippedEnd ? "me-0 rounded-e-none" : "me-1",
+        editable ? "cursor-grab active:cursor-grabbing" : api.open ? "cursor-pointer" : "cursor-default",
+        d.isDragging && "opacity-40",
+        r.isDragging && "ring-2 ring-primary",
+        done && "text-muted-foreground",
+      )}
+    >
+      <span className={cx("min-w-0 flex-1 truncate", done && "line-through")}>{title}</span>
+      {canResize ? (
+        <span
+          ref={r.setNodeRef}
+          {...r.handle}
+          role="presentation"
+          tabIndex={-1}
+          aria-hidden="true"
+          onClick={(e) => e.stopPropagation()}
+          className="absolute inset-y-0 end-0 w-2 cursor-ew-resize rounded-e-sm hover:bg-primary/30"
+        />
+      ) : null}
+    </button>
+  );
+}
+
+// ---- one day's column of hours ------------------------------------------
+
+function DayColumn({ day, index, days, events, api, hourHeight, colWidth, closed, slots, renderSlot, onSlotClick, selectedSlot, slotLabel, nowMin, weekend }) {
+  const { editable, locale } = api;
+  const ppm = hourHeight / 60;
+  const ref = useRef(null);
+  const label = formatDate(day, { weekday: "long", month: "long", day: "numeric" }, { locale });
+  const drop = useDropTarget(`col:${day}`, { kind: "column", day, label, top: () => ref.current?.getBoundingClientRect().top ?? 0 });
+  const layout = useMemo(() => layoutTimed(events), [events]);
+  const [hover, setHover] = useState(null); // minutes under the mouse
+  const [making, setMaking] = useState(null); // { a, b } while press-dragging a new block
+  const lastPointer = useRef("mouse");
+  const drafting = api.draft && !api.draft.allDay && api.draft.day === day ? api.draft : null;
+
+  const minuteAt = (clientY) => {
+    const top = ref.current?.getBoundingClientRect().top ?? 0;
+    return Math.max(0, Math.min(DAY_MINUTES - 15, (clientY - top) / ppm));
+  };
+  const onBg = (e) => e.target === e.currentTarget || e.target.dataset?.calBg !== undefined;
+
+  return (
+    <div
+      ref={(el) => {
+        ref.current = el;
+        drop.setNodeRef(el);
+      }}
+      data-cal-bg=""
+      className={cx(
+        "relative border-s border-border transition-colors duration-150 first:border-s-0",
+        weekend && "bg-muted/20",
+        drop.isOver && "bg-accent/50",
+      )}
+      onPointerDown={(e) => {
+        lastPointer.current = e.pointerType;
+        if (!editable || e.pointerType !== "mouse" || e.button !== 0 || !onBg(e)) return;
+        const m = snapMinutes(minuteAt(e.clientY) - 7, 15);
+        setMaking({ a: m, b: m + 15 });
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+      }}
+      onPointerMove={(e) => {
+        if (e.pointerType !== "mouse") return;
+        const m = minuteAt(e.clientY);
+        if (making) {
+          const b = snapMinutes(m, 15);
+          setMaking((x) => (x && (b !== x.b ? { ...x, b: Math.max(b, x.a + 15) } : x)));
+        } else if (editable && onBg(e)) {
+          const h = Math.floor(m / 30) * 30;
+          if (h !== hover) setHover(h);
+        } else if (hover !== null) setHover(null);
+      }}
+      onPointerLeave={() => setHover(null)}
+      onPointerUp={(e) => {
+        if (!making) return;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+        const { a, b } = making;
+        setMaking(null);
+        setHover(null);
+        // A click (no real drag) makes the default length from the half hour.
+        if (b - a <= 15) {
+          const from = Math.floor(a / 30) * 30;
+          api.startDraft({ day, from, to: Math.min(DAY_MINUTES, from + api.defaultDuration) });
+        } else api.startDraft({ day, from: a, to: b });
+      }}
+      onClick={(e) => {
+        // A tap on a touch screen: an hour from the half hour tapped.
+        if (!editable || lastPointer.current === "mouse" || !onBg(e)) return;
+        const from = Math.floor(minuteAt(e.clientY) / 30) * 30;
+        api.startDraft({ day, from, to: Math.min(DAY_MINUTES, from + api.defaultDuration) });
+      }}
+    >
+      {closed?.map(([a, b]) => (
+        <div key={a} data-cal-bg="" aria-hidden="true" className="absolute inset-x-0 bg-muted/60" style={{ top: a * ppm, height: (b - a) * ppm }} />
+      ))}
+      {slots?.map((s) => (
+        <Slot key={s.id} slot={s} ppm={ppm} renderSlot={renderSlot} onSlotClick={onSlotClick} selected={selectedSlot != null && (selectedSlot === s.id || selectedSlot === s.start)} label={slotLabel} locale={locale} />
+      ))}
+      {hover !== null && !making && !drafting ? (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-1 flex items-start rounded-md border border-dashed border-primary/40 px-1.5 pt-0.5 text-2xs font-medium text-primary"
+          style={{ top: hover * ppm + 1, height: 30 * ppm - 2 }}
+        >
+          + {minutesLabel(hover, { locale })}
+        </div>
+      ) : null}
+      {events.map((e) => (
+        <EventBlock key={e.id} event={e} pos={layout.get(e.id) ?? { col: 0, cols: 1, span: 1 }} ppm={ppm} api={api} index={index} days={days} colWidth={colWidth} />
+      ))}
+      {making ? (
+        <div aria-hidden="true" className="pointer-events-none absolute inset-x-1 z-10 rounded-md bg-primary/15 px-1.5 py-0.5 text-2xs font-medium text-primary ring-1 ring-primary" style={{ top: making.a * ppm, height: (making.b - making.a) * ppm }}>
+          {minutesLabel(making.a, { locale })} – {minutesLabel(making.b, { locale })}
+        </div>
+      ) : null}
+      {drafting ? (
+        <div
+          className="absolute inset-x-1 z-20 flex flex-col gap-0.5 rounded-md bg-card px-1.5 py-1 shadow-md ring-1 ring-primary"
+          style={{ top: drafting.from * ppm, height: Math.max((drafting.to - drafting.from) * ppm, 40) }}
+        >
+          <DraftInput label={`New task on ${label}, ${minutesLabel(drafting.from, { locale })} to ${minutesLabel(drafting.to, { locale })}`} onSubmit={api.saveDraft} onCancel={api.cancelDraft} />
+          <span data-nums className="text-2xs text-muted-foreground">
+            {minutesLabel(drafting.from, { locale })} – {minutesLabel(drafting.to, { locale })}
+          </span>
+        </div>
+      ) : null}
+      {nowMin !== null ? (
+        <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 z-10 flex items-center" style={{ top: nowMin * ppm - 1 }}>
+          <span className="-ms-1 size-2.5 shrink-0 rounded-full bg-primary ring-2 ring-card" />
+          <span className="h-0.5 flex-1 bg-primary" />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Slot({ slot, ppm, renderSlot, onSlotClick, selected, label = "Open", locale }) {
+  const style = { top: slot.from * ppm + 1, height: Math.max((slot.to - slot.from) * ppm - 2, 16) };
+  const words = `${label}, ${minutesLabel(slot.from, { locale })} to ${minutesLabel(slot.to, { locale })}`;
+  const face = renderSlot ? (
+    renderSlot(slot, { selected })
+  ) : (
+    <span data-nums className="truncate">
+      {minutesLabel(slot.from, { locale })}
+    </span>
+  );
+  const cls = cx(
+    "absolute inset-x-1 flex items-start overflow-hidden rounded-md border border-dashed px-1.5 pt-0.5 text-left text-2xs font-medium transition-colors duration-150",
+    selected ? "border-solid border-primary bg-primary text-primary-foreground" : "border-primary/50 bg-primary/5 text-primary",
+  );
+  if (!onSlotClick) {
+    return (
+      <div className={cx(cls, "pointer-events-none")} style={style} aria-label={words}>
+        {face}
+      </div>
+    );
+  }
+  return (
+    // raw: an open slot is a box on the grid placed by its times; a kit
+    // Button would pad and centre it as an action.
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onSlotClick(slot);
+      }}
+      onPointerDown={(e) => e.stopPropagation()}
+      aria-label={words}
+      aria-pressed={selected}
+      style={style}
+      className={cx(cls, "z-[1] outline-none hover:bg-primary/15 focus-visible:ring-2 focus-visible:ring-ring", selected && "hover:bg-primary")}
+    >
+      {face}
+    </button>
+  );
+}
+
+function EventBlock({ event, pos, ppm, api, index, days, colWidth }) {
+  const { ctx, editable, locale } = api;
+  const task = event.task;
+  const done = isDone(task, ctx);
+  const paint = paintOf(task, ctx, api.colorBy);
+  const title = task.title || "Untitled";
+  const d = useDraggableTask(`ev:${event.id}`, { kind: "timed", task, event, colIndex: index, colWidth }, { disabled: !editable });
+  const canResize = editable && !event.deadline;
+  const r = useDraggableTask(`ry:${event.id}`, { kind: "resize-y", task, event }, { disabled: !canResize });
+
+  // While dragged, the block itself shows where it will land: snapped to
+  // the quarter hour and to a day column.
+  let from = event.from;
+  let to = event.to;
+  let dx = 0;
+  if (d.isDragging && d.transform) {
+    const w = colWidth();
+    const k = Math.max(-index, Math.min(days.length - 1 - index, Math.round(d.transform.x / w)));
+    dx = k * w;
+    const dm = Math.max(-event.from, Math.min(DAY_MINUTES - event.to, snapMinutes(d.transform.y / ppm, api.snap)));
+    from += dm;
+    to += dm;
+  }
+  if (r.isDragging && r.transform) to = Math.max(from + 15, Math.min(DAY_MINUTES, to + snapMinutes(r.transform.y / ppm, api.snap)));
+  const h = Math.max((to - from) * ppm, 18);
+  const tall = h >= 38;
+  const shown = { ...event, from, to };
+  const time = eventTimeLabel(shown, { locale });
+  const moving = d.isDragging || r.isDragging;
+
+  const keys = withKeys(d.handle, (e) => {
+    if (e.key === "Enter" || e.key === " ") return true;
+    if (!editable) return false;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      api.remove(task);
+      return true;
+    }
+    const step = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -1, ArrowRight: 1 }[e.key];
+    if (!step) return false;
+    e.preventDefault();
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") api.nudge(event, { dd: step });
+    else if (e.shiftKey) api.nudge(event, { dr: step * 15 });
+    else api.nudge(event, { dm: step * 15 });
+    return true;
+  });
+
+  return (
+    // raw: a timed block is a drag source placed by its times that also
+    // opens; a kit Button would centre and pad it as an action.
+    <button
+      type="button"
+      ref={d.setNodeRef}
+      data-cal-id={event.id}
+      {...(editable ? keys : { onKeyDown: keys.onKeyDown })}
+      onClick={api.open ? () => api.open(task) : undefined}
+      aria-label={`${title}, ${time}${done ? ", done" : ""}`}
+      aria-keyshortcuts={editable ? "ArrowUp ArrowDown ArrowLeft ArrowRight Shift+ArrowUp Shift+ArrowDown Enter Delete" : undefined}
+      title={`${title}\n${time}`}
+      style={{
+        top: from * ppm + 1,
+        height: h - 2,
+        left: `calc(${(pos.col / pos.cols) * 100}% + 2px)`,
+        width: `calc(${(pos.span / pos.cols) * 100}% - ${pos.col + pos.span < pos.cols ? 2 : 6}px)`,
+        transform: dx ? `translateX(${dx}px)` : undefined,
+      }}
+      className={cx(
+        "absolute flex flex-col overflow-hidden rounded-md border-s-[3px] px-1.5 text-left text-xs leading-tight text-foreground outline-none transition-[box-shadow,opacity,background-color] duration-150 focus-visible:z-20 focus-visible:ring-2 focus-visible:ring-ring",
+        paint.tint,
+        tall ? "py-1" : "justify-center py-0",
+        pos.cols > 1 && !moving && "ring-1 ring-card",
+        editable ? "cursor-grab active:cursor-grabbing" : api.open ? "cursor-pointer" : "cursor-default",
+        moving && "z-30 shadow-lg ring-1 ring-primary/40",
+        event.preview && "z-20 ring-2 ring-primary",
+        done && "text-muted-foreground",
+      )}
+    >
+      {tall ? (
+        <>
+          <span className={cx("line-clamp-2 font-medium", done && "line-through")}>{title}</span>
+          <span data-nums className="mt-0.5 truncate text-2xs text-muted-foreground">
+            {time}
+          </span>
+        </>
+      ) : (
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className={cx("truncate font-medium", done && "line-through")}>{title}</span>
+          <span data-nums className="shrink-0 text-2xs text-muted-foreground">
+            {minutesLabel(from, { locale })}
+          </span>
+        </span>
+      )}
+      {canResize ? (
+        <span
+          ref={r.setNodeRef}
+          {...r.handle}
+          role="presentation"
+          tabIndex={-1}
+          aria-hidden="true"
+          onClick={(e) => e.stopPropagation()}
+          className="absolute inset-x-0 bottom-0 h-2 cursor-ns-resize after:absolute after:inset-x-1/3 after:bottom-0.5 after:h-0.5 after:rounded-full after:bg-foreground/30 after:opacity-0 after:transition-opacity hover:after:opacity-100"
+        />
+      ) : null}
+    </button>
+  );
+}

package/registry/blocks/calendar-view/tray.jsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Icon, cx } from "../../ui";
+import { DueLabel, TaskChip, useDraggableTask, useDropTarget } from "../task-model";
+import { withKeys } from "./paint";
+
+// The unscheduled tray: open tasks with no date yet. Beside a wide
+// calendar it is a column to drag from (onto a day, onto an hour) and to
+// drop on (which takes the date off). On a phone, where there is nothing
+// to drag onto, each task has a date picker instead.
+
+export function UnscheduledTray({ tasks, api, mode = "panel", className }) {
+  const drop = useDropTarget("tray", { kind: "tray", label: "Unscheduled" }, { disabled: !api.editable || mode !== "panel" });
+  const dragging = drop.active && drop.active.data?.kind !== "tray";
+  return (
+    <section
+      ref={drop.setNodeRef}
+      aria-label="Unscheduled tasks"
+      className={cx(
+        "flex min-h-0 flex-col gap-2 transition-colors duration-150",
+        mode === "panel" && "rounded-lg border border-border bg-card p-3",
+        mode === "panel" && dragging && "border-dashed border-primary",
+        drop.isOver && "bg-accent",
+        className,
+      )}
+    >
+      {mode === "panel" ? (
+        <header className="flex items-baseline justify-between gap-2">
+          <h3 className="text-sm font-semibold">Unscheduled</h3>
+          <span data-nums className="text-xs text-muted-foreground">
+            {tasks.length}
+          </span>
+        </header>
+      ) : null}
+      {dragging ? (
+        <p className="text-xs text-muted-foreground">Drop here to take the date off.</p>
+      ) : tasks.length && api.editable && mode === "panel" ? (
+        <p className="text-xs text-muted-foreground">Drag a task onto a day or an hour to schedule it.</p>
+      ) : null}
+      {tasks.length ? (
+        <ul className="grid gap-1.5">
+          {tasks.map((t) => (mode === "panel" ? <TrayItem key={t.id} task={t} api={api} /> : <SheetItem key={t.id} task={t} api={api} />))}
+        </ul>
+      ) : (
+        <div className="grid place-items-center gap-1.5 rounded-md border border-dashed border-border px-3 py-6 text-center">
+          <Icon name="circle-check" size={18} className="text-muted-foreground" />
+          <p className="text-sm font-medium">Everything has a date</p>
+          <p className="text-xs text-muted-foreground">Tasks without one wait here.</p>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function TrayItem({ task, api }) {
+  const d = useDraggableTask(`tray:${task.id}`, { kind: "tray", task }, { disabled: !api.editable });
+  const keys = withKeys(d.handle, (e) => e.key === "Enter");
+  return (
+    <li ref={d.setNodeRef} data-cal-id={task.id}>
+      <TaskChip
+        task={task}
+        ctx={api.ctx}
+        onOpen={api.open ?? undefined}
+        dragging={d.isDragging}
+        dragProps={api.editable ? keys : undefined}
+        className={cx("min-h-9", api.editable && "cursor-grab active:cursor-grabbing")}
+      />
+    </li>
+  );
+}
+
+function SheetItem({ task, api }) {
+  return (
+    <li className="group/row flex min-h-11 items-center gap-2">
+      <TaskChip task={task} ctx={api.ctx} onOpen={api.open ?? undefined} className="min-h-9 flex-1" />
+      {api.editable ? (
+        <DueLabel
+          value={null}
+          ctx={api.ctx}
+          quiet={false}
+          placeholder="Schedule"
+          onChange={(day) => day && api.update(task, { due: day }, `Scheduled “${task.title}”`)}
+        />
+      ) : null}
+    </li>
+  );
+}