makersclaw 0.2.0 → 0.3.0

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

@@ -0,0 +1,195 @@
+"use client";
+
+// CalendarView three ways — the gallery's and the smoke test's surface.
+// Not installed into apps: `makersclaw add calendar-view` lays the block's
+// files only.
+//   Team      a launch team's September: meetings, deadlines, spans, a
+//             tray of undated work; saves in memory (a switch makes them
+//             fail, to show the rollback); an item opens a sheet.
+//   Booking   the available-time layer: working hours, busy meetings,
+//             open slots from getSlots (freeSlots) to pick one.
+//   Empty     no tasks yet: click any day to add one.
+import { useCallback, useState } from "react";
+import { Button, Notice, Sheet, Switch, TabPanel, Tabs } from "../components/ui";
+import { CalendarView, eventTimeLabel, eventOf, freeSlots, minutesLabel } from "../components/blocks/calendar-view";
+import { applyChange, formatDay } from "../components/blocks/task-model";
+
+const TODAY = "2026-09-23";
+const NOW = "2026-09-23T10:40";
+
+const STATUSES = [
+  { id: "todo", label: "To do", tone: "neutral" },
+  { id: "doing", label: "In progress", tone: "info" },
+  { id: "review", label: "In review", tone: "warning" },
+  { id: "done", label: "Done", tone: "success", done: true },
+];
+
+const PEOPLE = [
+  { id: "maya", name: "Maya Chen" },
+  { id: "leo", name: "Leo Park" },
+  { id: "priya", name: "Priya Nair" },
+  { id: "sam", name: "Sam Okafor" },
+];
+
+const PROJECTS = [
+  { id: "site", name: "Website relaunch", hue: 1 },
+  { id: "q4", name: "Q4 campaign", hue: 3 },
+  { id: "team", name: "Team", hue: 5 },
+];
+
+const TEAM_TASKS = [
+  { id: "c1", title: "Weekly planning", status: "done", assignees: ["maya", "leo", "priya", "sam"], start: "2026-09-21T09:00", due: "2026-09-21T09:45", project: "team" },
+  { id: "c2", title: "Q4 campaign brief", status: "doing", assignees: ["sam"], start: "2026-09-22", due: "2026-09-24", project: "q4", priority: "high" },
+  { id: "c3", title: "Finalise pricing page copy", status: "doing", assignees: ["maya"], due: "2026-09-23", project: "site", priority: "high" },
+  { id: "c4", title: "Design review: pricing page", status: "todo", assignees: ["maya", "priya"], start: "2026-09-23T11:00", due: "2026-09-23T12:00", project: "site" },
+  { id: "c5", title: "Call with Northwind", status: "todo", assignees: ["sam"], start: "2026-09-23T11:30", due: "2026-09-23T12:15", project: "q4" },
+  { id: "c6", title: "Write the launch email", status: "todo", assignees: ["sam"], start: "2026-09-23T14:00", due: "2026-09-23T16:00", project: "q4", estimate: 2 },
+  { id: "c7", title: "Reply to the press list", status: "todo", assignees: ["leo"], due: "2026-09-23", project: "q4" },
+  { id: "c8", title: "Order launch swag", status: "todo", assignees: ["priya"], due: "2026-09-23", project: "team" },
+  { id: "c9", title: "Interview: product designer", status: "todo", assignees: ["maya"], start: "2026-09-24T10:00", due: "2026-09-24T11:00", project: "team" },
+  { id: "c10", title: "Set up redirects from the old site", status: "review", assignees: ["leo"], due: "2026-09-24T17:00", project: "site", priority: "medium" },
+  { id: "c11", title: "Product photo shoot", status: "todo", assignees: ["leo", "priya"], start: "2026-09-25T09:00", due: "2026-09-25T13:00", project: "q4", priority: "urgent" },
+  { id: "c12", title: "Launch week", status: "todo", assignees: ["maya", "leo", "priya", "sam"], start: "2026-09-28", due: "2026-10-02", project: "site" },
+  { id: "c13", title: "Pay contractor invoices", status: "todo", assignees: ["sam"], due: "2026-09-30", project: "team" },
+  { id: "c14", title: "Board update", status: "todo", assignees: ["maya"], due: "2026-10-06T15:00", project: "team" },
+  { id: "c15", title: "Team offsite", status: "todo", assignees: ["maya", "leo", "priya", "sam"], start: "2026-10-08", due: "2026-10-09", project: "team" },
+  { id: "c16", title: "Choose the analytics events", status: "done", assignees: ["sam"], due: "2026-09-18", project: "site" },
+  { id: "c17", title: "Brief the paid social agency", status: "done", assignees: ["maya"], start: "2026-09-17T15:00", due: "2026-09-17T16:00", project: "q4" },
+  { id: "c18", title: "Accessibility pass on the new nav", status: "todo", assignees: ["priya"], due: "2026-09-29", project: "site" },
+  { id: "c19", title: "Draft the customer story", status: "todo", assignees: [], project: "q4", estimate: 3 },
+  { id: "c20", title: "Refresh the pitch deck", status: "todo", assignees: ["maya"], project: "team", estimate: 2 },
+  { id: "c21", title: "Shortlist offsite venues", status: "todo", assignees: ["priya"], project: "team" },
+];
+
+const MEETINGS = [
+  { id: "m1", title: "Team standup", status: "todo", assignees: ["maya"], start: "2026-09-23T09:00", due: "2026-09-23T09:30", project: "team" },
+  { id: "m2", title: "Pipeline review", status: "todo", assignees: ["maya"], start: "2026-09-23T13:00", due: "2026-09-23T14:00", project: "q4" },
+  { id: "m3", title: "Customer call: Lumen Labs", status: "todo", assignees: ["maya"], start: "2026-09-24T11:00", due: "2026-09-24T12:00", project: "q4" },
+  { id: "m4", title: "Focus time", status: "todo", assignees: ["maya"], start: "2026-09-25T09:00", due: "2026-09-25T11:30", project: "site" },
+];
+
+const HOURS = { days: [1, 2, 3, 4, 5], from: "09:00", to: "17:00" };
+
+function useTasks(start, failRef) {
+  const [tasks, setTasks] = useState(start);
+  const onChange = async (change) => {
+    await new Promise((r) => setTimeout(r, 350));
+    if (failRef?.current) return { ok: false, error: "the server did not answer" };
+    setTasks((all) => applyChange(all, change));
+    return { ok: true };
+  };
+  return [tasks, onChange];
+}
+
+export default function CalendarDemo() {
+  const [tab, setTab] = useState("team");
+  const [fail, setFail] = useState(false);
+  const failRef = { current: fail };
+  const [tasks, onChange] = useTasks(TEAM_TASKS, failRef);
+  const [none, onChangeNone] = useTasks([]);
+  const [open, setOpen] = useState(null);
+  const [picked, setPicked] = useState(null);
+  const [booked, setBooked] = useState(null);
+  const meetings = booked
+    ? [...MEETINGS, { id: "b1", title: "Intro call: Ada from Brightwave", status: "todo", assignees: ["maya"], start: booked.start, due: booked.end, project: "q4" }]
+    : MEETINGS;
+  const getSlots = useCallback(
+    ({ from, to }) =>
+      freeSlots({ from, to, availability: HOURS, busy: booked ? [...MEETINGS, booked] : MEETINGS, minutes: 30, step: 60, notice: 60, now: NOW }),
+    [booked],
+  );
+  const openEvent = open ? eventOf(open) : null;
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="Calendar examples"
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "team", label: "Team" },
+          { key: "booking", label: "Booking" },
+          { key: "empty", label: "Empty" },
+        ]}
+      />
+      <TabPanel tab="team" value={tab}>
+        <div className="grid gap-4">
+          <Switch id="calendar-fail" label="Make saves fail" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+          <CalendarView
+            label="Launch calendar"
+            tasks={tasks}
+            statuses={STATUSES}
+            people={PEOPLE}
+            projects={PROJECTS}
+            today={TODAY}
+            now={NOW}
+            onChange={onChange}
+            onOpen={setOpen}
+            defaultMode="week"
+          />
+          <Sheet
+            open={Boolean(open)}
+            onClose={() => setOpen(null)}
+            title={open?.title}
+            description={openEvent ? `${formatDay(openEvent.start, TODAY)} · ${eventTimeLabel(openEvent)}` : "No date yet"}
+          >
+            <p className="text-sm text-muted-foreground">The task's own page goes here: its description, comments and history.</p>
+          </Sheet>
+        </div>
+      </TabPanel>
+      <TabPanel tab="booking" value={tab}>
+        <div className="grid gap-4">
+          <CalendarView
+            label="Pick a time"
+            tasks={meetings}
+            projects={PROJECTS}
+            today={TODAY}
+            now={NOW}
+            modes={["week", "day"]}
+            defaultMode="week"
+            toolbar={false}
+            tray={false}
+            availability={HOURS}
+            getSlots={getSlots}
+            slotLabel="Book"
+            selectedSlot={picked?.id}
+            onSlotClick={(s) => setPicked(s)}
+            height="30rem"
+          />
+          {booked ? (
+            <Notice tone="success" onDismiss={() => setBooked(null)}>
+              Booked for {formatDay(booked.day, TODAY)} at {minutesLabel(booked.from)}. A confirmation is on its way.
+            </Notice>
+          ) : null}
+          <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card p-3">
+            <p className="text-sm text-muted-foreground">
+              {picked ? (
+                <>
+                  <span className="font-medium text-foreground">
+                    {formatDay(picked.day, TODAY)}, {minutesLabel(picked.from)} – {minutesLabel(picked.to)}
+                  </span>{" "}
+                  · 30 minutes
+                </>
+              ) : (
+                "Pick an open time on the calendar."
+              )}
+            </p>
+            <Button
+              variant="primary"
+              size="sm"
+              disabled={!picked}
+              onClick={() => {
+                setBooked(picked);
+                setPicked(null);
+              }}
+            >
+              Book this time
+            </Button>
+          </div>
+        </div>
+      </TabPanel>
+      <TabPanel tab="empty" value={tab}>
+        <CalendarView label="My calendar" tasks={none} statuses={STATUSES} people={PEOPLE} today={TODAY} now={NOW} onChange={onChangeNone} />
+      </TabPanel>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { cx } from "../../ui";
+
+// The quick-add field that opens where the founder clicked: an empty
+// month day, a stretch of the time grid, the top of an agenda day. Type a
+// title, Enter saves (the item appears at once), Escape or leaving it
+// empty puts it away; leaving it with words in it saves them.
+export function DraftInput({ label, placeholder = "New task", onSubmit, onCancel, className }) {
+  const [value, setValue] = useState("");
+  const settled = useRef(false);
+  function submit() {
+    if (settled.current) return;
+    const title = value.trim();
+    settled.current = true;
+    if (!title) onCancel?.();
+    else onSubmit?.(title);
+  }
+  return (
+    // The title is typed straight into the new item's own box, the way a
+    // calendar names a new event; the box around it is the border.
+    // raw: a kit Input is a 44px bordered form field, too big for a slot.
+    <input
+      type="text"
+      autoFocus
+      aria-label={label}
+      value={value}
+      placeholder={placeholder}
+      enterKeyHint="done"
+      onChange={(e) => setValue(e.target.value)}
+      onPointerDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+          e.preventDefault();
+          submit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          settled.current = true;
+          onCancel?.();
+        }
+      }}
+      onBlur={submit}
+      className={cx("w-full min-w-0 bg-transparent text-xs font-medium text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground", className)}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+// The calendar-view block — `makersclaw add calendar-view` (it brings task-model).
+// Tasks on a month, week, day or agenda: drag to move, drag an end to
+// resize, an unscheduled tray, a line at now, click an empty slot to add.
+// Fixed: compose it through its props (README.md beside this file). The
+// helpers in calendar-model.js are pure (the server included): where a
+// task sits, overlap and lane layout, the patches a gesture saves, and
+// the available-time layer (availabilityOn, freeSlots) booking-page uses.
+export { CalendarView } from "./calendar";
+export {
+  CALENDAR_MODES,
+  MODE_LABELS,
+  DAY_MINUTES,
+  UNSCHEDULE,
+  snapMinutes,
+  durationOf,
+  eventOf,
+  eventsOf,
+  unscheduledOf,
+  layoutTimed,
+  layoutLanes,
+  moveEventPatch,
+  resizeEventPatch,
+  placeEventPatch,
+  timedPatch,
+  dayPatch,
+  allDayPatch,
+  extendPatch,
+  rangeFor,
+  stepAnchor,
+  rangeLabel,
+  titleFor,
+  hourLabel,
+  minutesLabel,
+  eventTimeLabel,
+  availabilityOn,
+  closedOn,
+  freeSlots,
+  normalizeSlots,
+} from "./calendar-model";

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

@@ -0,0 +1,346 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import { IconButton, Popover, cx } from "../../ui";
+import { TaskChip, formatDate, isDone, isWeekend, useDraggableTask, useDropTarget } from "../task-model";
+import { layoutLanes, minutesLabel } from "./calendar-model";
+import { DraftInput } from "./draft";
+import { paintOf, withKeys } from "./paint";
+import { AgendaDay } from "./agenda";
+
+// The month: weeks of seven days. All-day tasks and spans are tinted bars
+// that run across the days they cover (stacked in lanes, never over each
+// other); a timed task is a dot, its time and its title. Three lanes show;
+// past that a day says "2 more" and opens its full list. Drag a bar to
+// another day, drag its end to make it longer, click an empty day to add
+// a task there. On a phone the days show dots, and tapping one lists it
+// under the grid.
+
+const LANES = 3;
+const LANE_PX = 24;
+
+const dayName = (day, locale) => formatDate(day, { weekday: "long", month: "long", day: "numeric" }, { locale });
+
+export function MonthView({ weeks, month, events, api, narrow, selected, onSelect }) {
+  const locale = api.locale;
+  const heads = weeks[0] ?? [];
+  if (narrow) return <NarrowMonth weeks={weeks} month={month} events={events} api={api} selected={selected} onSelect={onSelect} />;
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="grid grid-cols-7 border-b border-border">
+        {heads.map((d) => (
+          <div key={d} className="px-2 py-2 text-xs font-medium text-muted-foreground">
+            {formatDate(d, { weekday: "short" }, { locale })}
+          </div>
+        ))}
+      </div>
+      {weeks.map((week) => (
+        <WeekRow key={week[0]} week={week} month={month} events={events} api={api} />
+      ))}
+    </div>
+  );
+}
+
+function WeekRow({ week, month, events, api }) {
+  const rowRef = useRef(null);
+  const layout = useMemo(() => layoutLanes(events, week), [events, week]);
+  const overflow = layout.lanes > LANES;
+  const shownLanes = overflow ? LANES - 1 : layout.lanes;
+  const visible = layout.items.filter((it) => it.lane < shownLanes);
+  // What each day cannot show: its items in the lanes that did not fit.
+  const hidden = week.map((_, i) => layout.items.filter((it) => it.lane >= shownLanes && it.col <= i && i < it.col + it.span));
+  const cellWidth = () => (rowRef.current?.getBoundingClientRect().width ?? 700) / 7;
+  const reserve = Math.max(shownLanes + (overflow ? 1 : 0), 1) * LANE_PX;
+  return (
+    <div ref={rowRef} className="relative grid grid-cols-7 border-b border-border last:border-b-0">
+      {week.map((day, i) => (
+        <DayCell
+          key={day}
+          day={day}
+          inMonth={day.slice(0, 7) === month}
+          api={api}
+          reserve={reserve}
+          hidden={hidden[i]}
+          dayItems={layout.items.filter((it) => it.col <= i && i < it.col + it.span)}
+          overflow={overflow}
+        />
+      ))}
+      <div className="pointer-events-none absolute inset-x-0 top-10 grid grid-cols-7 gap-y-0.5" style={{ gridAutoRows: `${LANE_PX - 2}px` }}>
+        {visible.map((it) => (
+          <MonthItem key={`${it.event.id}:${week[0]}`} item={it} week={week} api={api} cellWidth={cellWidth} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DayCell({ day, inMonth, api, reserve, hidden, dayItems, overflow }) {
+  const { ctx, editable, locale } = api;
+  const today = day === ctx.today;
+  const label = dayName(day, locale);
+  const drop = useDropTarget(`cell:${day}`, { kind: "cell", day, label });
+  const drafting = api.draft && api.draft.allDay && api.draft.day === day;
+  const firstOfMonth = day.endsWith("-01");
+  const onBackground = (e) => {
+    // Only the cell's own empty space: not its buttons, not the "more"
+    // list (a popover inside the cell, whose clicks bubble here).
+    if (!editable || e.target.dataset?.calBg === undefined) return;
+    api.startDraft({ day, allDay: true });
+  };
+  return (
+    <div
+      ref={drop.setNodeRef}
+      data-cal-bg=""
+      onClick={onBackground}
+      className={cx(
+        "group/cell relative flex min-h-32 min-w-0 flex-col border-e border-border p-1 transition-colors duration-150 last:border-e-0",
+        !inMonth && "bg-muted/40",
+        inMonth && isWeekend(day, ctx.weekend) && "bg-muted/20",
+        editable && "cursor-default",
+        drop.isOver && "bg-accent",
+      )}
+    >
+      <div className="flex h-9 items-center justify-between gap-1">
+        <DayNumber day={day} today={today} muted={!inMonth} label={firstOfMonth ? formatDate(day, { month: "short", day: "numeric" }, { locale }) : null} api={api} count={dayItems.length} />
+        {editable ? (
+          <IconButton
+            size="sm"
+            icon="plus"
+            label={`${api.addLabel} on ${label}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              api.startDraft({ day, allDay: true });
+            }}
+            className="opacity-0 transition-opacity duration-150 group-hover/cell:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:hidden"
+          />
+        ) : null}
+      </div>
+      <div data-cal-bg="" aria-hidden="true" style={{ height: reserve - (overflow ? LANE_PX : 0) }} />
+      {overflow && hidden.length ? <MoreItems day={day} label={label} items={dayItems} count={hidden.length} api={api} /> : overflow ? <div aria-hidden="true" style={{ height: LANE_PX }} /> : null}
+      {drafting ? (
+        <div className="mt-0.5 flex h-6 items-center rounded-sm bg-primary/10 px-1.5 ring-1 ring-primary">
+          <DraftInput label={`New task on ${label}`} onSubmit={api.saveDraft} onCancel={api.cancelDraft} />
+        </div>
+      ) : null}
+      <div data-cal-bg="" className="min-h-2 flex-1" />
+    </div>
+  );
+}
+
+function DayNumber({ day, today, muted, label, api, count }) {
+  const n = Number(day.slice(8, 10));
+  const words = `${dayName(day, api.locale)}${count ? `, ${count} ${count === 1 ? "item" : "items"}` : ""}. Open the day`;
+  return (
+    // raw: the date is a small round target in the corner of the cell
+    // (the day view opens from it); a kit Button is a 36px padded action.
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        api.openDay(day);
+      }}
+      aria-label={words}
+      aria-current={today ? "date" : undefined}
+      className={cx(
+        "inline-flex h-7 min-w-7 items-center justify-center rounded-full px-1.5 text-xs tabular-nums outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring",
+        today ? "bg-primary font-semibold text-primary-foreground" : "hover:bg-accent",
+        !today && (muted ? "text-muted-foreground" : "font-medium text-foreground"),
+      )}
+    >
+      {label ?? n}
+    </button>
+  );
+}
+
+function MoreItems({ day, label, items, count, api }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover
+      label={`Everything on ${label}`}
+      open={open}
+      onOpenChange={setOpen}
+      width="md"
+      align="start"
+      className="p-2"
+      trigger={(props) => (
+        // raw: a line of small text inside the day cell, sized to a lane;
+        // Popover hands its trigger props to a button of ours.
+        <button
+          type="button"
+          {...props}
+          onClick={(e) => e.stopPropagation()}
+          className="flex h-6 items-center rounded-sm px-1.5 text-left text-xs font-medium text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {count} more
+        </button>
+      )}
+    >
+      <p className="px-1 pb-2 text-sm font-semibold">{label}</p>
+      <ul className="grid gap-1">
+        {items.map((it) => (
+          <li key={it.event.id}>
+            <TaskChip task={it.event.task} ctx={api.ctx} onOpen={api.open ? (t) => (setOpen(false), api.open(t)) : undefined} />
+          </li>
+        ))}
+      </ul>
+    </Popover>
+  );
+}
+
+function MonthItem({ item, week, 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 bar = !event.timed;
+  const d = useDraggableTask(`bar:${event.id}:${week[0]}`, { kind: "span", task, event }, { disabled: !editable });
+  const canResize = editable && bar && !clippedEnd;
+  const r = useDraggableTask(`rx:${event.id}:${week[0]}`, { kind: "resize-x", task, event, cellWidth }, { disabled: !canResize });
+  let grow = 0;
+  if (r.isDragging && r.transform) grow = Math.round(r.transform.x / cellWidth());
+  const shownSpan = Math.max(1, Math.min(7 - col, span + Math.max(grow, 1 - span)));
+  const when = event.timed ? minutesLabel(event.from, { locale: api.locale }) : "";
+  const words = `${title}, ${event.timed ? (event.deadline ? `due ${when}` : when) : event.start === event.end ? "all day" : `${formatDate(event.start, { month: "short", day: "numeric" })} to ${formatDate(event.end, { month: "short", day: "numeric" })}`}${done ? ", done" : ""}`;
+  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 (bar && 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 item on the month 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) {
+          // Which of its days was grabbed: a span moves by the days
+          // between that one and the one it is dropped on.
+          const rect = e.currentTarget.getBoundingClientRect();
+          const w = rect.width / shownSpan;
+          api.setGrab(week[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={words}
+      title={title}
+      style={{ gridColumn: `${col + 1} / span ${shownSpan}`, gridRow: lane + 1 }}
+      className={cx(
+        "pointer-events-auto relative flex min-w-0 items-center gap-1.5 text-left text-xs outline-none transition-[opacity,background-color] duration-150 focus-visible:ring-2 focus-visible:ring-ring",
+        clippedStart ? "ms-0 rounded-s-none" : "ms-1",
+        clippedEnd ? "me-0 rounded-e-none" : "me-1",
+        bar ? cx("rounded-sm border-s-[3px] px-1.5 font-medium text-foreground", paint.tint, clippedStart && "border-s-0 ps-2") : "rounded-sm px-1.5 hover:bg-accent",
+        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",
+      )}
+    >
+      {bar ? null : <span aria-hidden="true" className={cx("size-2 shrink-0 rounded-full", paint.dot, done && "opacity-50")} />}
+      {when ? (
+        <span data-nums className="shrink-0 text-muted-foreground">
+          {when}
+        </span>
+      ) : null}
+      <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>
+  );
+}
+
+// ---- a phone's month: dots, and the tapped day listed under it ----------
+
+function NarrowMonth({ weeks, month, events, api, selected, onSelect }) {
+  const { ctx, locale } = api;
+  const byDay = useMemo(() => {
+    const m = new Map();
+    for (const e of events) {
+      for (const week of weeks) {
+        for (const day of week) if (e.start <= day && day <= e.end) m.set(day, [...(m.get(day) ?? []), e]);
+      }
+    }
+    return m;
+  }, [events, weeks]);
+  const day = selected ?? ctx.today;
+  return (
+    <div className="grid gap-4">
+      <div className="overflow-hidden rounded-lg border border-border bg-card">
+        <div className="grid grid-cols-7 border-b border-border">
+          {weeks[0].map((d) => (
+            <div key={d} className="py-2 text-center text-2xs font-medium text-muted-foreground">
+              {formatDate(d, { weekday: "narrow" }, { locale })}
+            </div>
+          ))}
+        </div>
+        {weeks.map((week) => (
+          <div key={week[0]} className="grid grid-cols-7">
+            {week.map((d) => {
+              const items = byDay.get(d) ?? [];
+              const isSel = d === day;
+              const isToday = d === ctx.today;
+              return (
+                // raw: a day on a phone's month is one tap target — a
+                // number and its dots — that lists the day below.
+                <button
+                  key={d}
+                  type="button"
+                  onClick={() => onSelect(d)}
+                  aria-pressed={isSel}
+                  aria-label={`${dayName(d, locale)}${items.length ? `, ${items.length} ${items.length === 1 ? "item" : "items"}` : ""}`}
+                  className={cx(
+                    "flex min-h-12 flex-col items-center justify-start gap-1 py-1.5 outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    d.slice(0, 7) !== month && "text-muted-foreground",
+                  )}
+                >
+                  <span
+                    className={cx(
+                      "inline-flex size-7 items-center justify-center rounded-full text-sm tabular-nums",
+                      isSel ? "bg-foreground font-semibold text-background" : isToday ? "font-semibold text-primary" : undefined,
+                    )}
+                  >
+                    {Number(d.slice(8, 10))}
+                  </span>
+                  <span className="flex h-1.5 items-center gap-0.5" aria-hidden="true">
+                    {items.slice(0, 3).map((e) => (
+                      <span key={e.id} className={cx("size-1.5 rounded-full", paintOf(e.task, ctx, api.colorBy).dot)} />
+                    ))}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <AgendaDay day={day} events={byDay.get(day) ?? eventsOn(events, day)} api={api} standalone />
+    </div>
+  );
+}
+
+function eventsOn(events, day) {
+  return events.filter((e) => e.start <= day && day <= e.end);
+}
+