makersclaw 0.2.0 → 0.3.0

package/registry/blocks/gantt/index.js

@@ -0,0 +1,7 @@
+// The Gantt block — `makersclaw add gantt` (it brings task-model). Tasks
+// on a timeline: drag, resize, link, zoom, the critical path. Fixed:
+// compose it through its props (README.md beside this file); a timeline
+// it cannot be is your own component in components/, built from
+// task-model's helpers and these schedule helpers.
+export { Gantt } from "./gantt";
+export { ZOOMS, ganttRange, headerTiers, planMove, afterBlockersPatch, isMilestone, summarySpan, arrowPath } from "./schedule";

package/registry/blocks/gantt/rows.jsx

@@ -0,0 +1,468 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Avatar, Button, Icon, Input, Menu, StatusDot, cx } from "../../ui";
+import { GroupLabel, formatDate, useDraggableTask, useDropTarget } from "../task-model";
+import { daysFromPixels, lengthOf } from "./schedule";
+
+// The gantt's rows: the list pane's row (a task, a group heading, a
+// quick-add) and the timeline's row (a bar, a milestone diamond, a
+// summary bracket, or — for a task without dates — a ghost bar that
+// schedules it where it is clicked). Geometry comes in from gantt.jsx;
+// what a drag did goes back out through `on`.
+
+export const ROW = 36;
+export const ADD_ROW = 48;
+const BAR_H = 24;
+
+// Bar colours, written out whole so Tailwind finds every class: a
+// project's hue (chart-1…5) or a status tone. `fill` is the progress.
+export const TINTS = {
+  1: { bar: "bg-chart-1/25 border-chart-1/70", fill: "bg-chart-1/45", solid: "bg-chart-1" },
+  2: { bar: "bg-chart-2/25 border-chart-2/70", fill: "bg-chart-2/45", solid: "bg-chart-2" },
+  3: { bar: "bg-chart-3/25 border-chart-3/70", fill: "bg-chart-3/45", solid: "bg-chart-3" },
+  4: { bar: "bg-chart-4/25 border-chart-4/70", fill: "bg-chart-4/45", solid: "bg-chart-4" },
+  5: { bar: "bg-chart-5/25 border-chart-5/70", fill: "bg-chart-5/45", solid: "bg-chart-5" },
+  primary: { bar: "bg-primary/25 border-primary/70", fill: "bg-primary/45", solid: "bg-primary" },
+  info: { bar: "bg-info/25 border-info/70", fill: "bg-info/45", solid: "bg-info" },
+  success: { bar: "bg-success/25 border-success/70", fill: "bg-success/45", solid: "bg-success" },
+  warning: { bar: "bg-warning/25 border-warning/70", fill: "bg-warning/45", solid: "bg-warning" },
+  danger: { bar: "bg-destructive/25 border-destructive/70", fill: "bg-destructive/45", solid: "bg-destructive" },
+  neutral: { bar: "bg-muted-foreground/15 border-muted-foreground/55", fill: "bg-muted-foreground/30", solid: "bg-muted-foreground" },
+};
+
+/** "Sep 22 – 26" · "Sep 29 – Oct 3" · "Sep 22" */
+export function spanWords(span, locale) {
+  if (!span) return "No dates";
+  const a = formatDate(span.start, { month: "short", day: "numeric" }, { locale });
+  if (span.start === span.end) return a;
+  const sameMonth = span.start.slice(0, 7) === span.end.slice(0, 7);
+  const b = formatDate(span.end, sameMonth ? { day: "numeric" } : { month: "short", day: "numeric" }, { locale });
+  return `${a} – ${b}`;
+}
+
+// ---- the list pane -------------------------------------------------------
+
+/** A group's heading in the list pane: fold, face, count. */
+export function GroupRow({ group, by, ctx, folded, onFold, hot, onHot, count }) {
+  return (
+    <div
+      className={cx("flex items-center gap-1 border-t border-border bg-muted/40 pe-2 ps-1 first:border-t-0", hot && "bg-accent/60")}
+      style={{ height: ROW }}
+      onPointerEnter={onHot}
+    >
+      {/* raw: the heading folds its group; a kit Button would centre it
+          and weigh it as an action. */}
+      <button
+        type="button"
+        aria-expanded={!folded}
+        onClick={onFold}
+        className="flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <Icon name={folded ? "chevron-right" : "chevron-down"} size={14} className="shrink-0 text-muted-foreground" />
+        <GroupLabel group={group} by={by} ctx={ctx} className="min-w-0" />
+        <span data-nums className="shrink-0 text-xs font-normal tabular-nums text-muted-foreground">
+          {count}
+        </span>
+      </button>
+    </div>
+  );
+}
+
+/** A task's row in the list pane: fold (a parent), status, title, the
+ *  first face and its length; a menu on hover. */
+export function ListRow({ row, ctx, hot, onHot, onFold, onOpen, menu, conflict, blockers }) {
+  const t = row.task;
+  const status = ctx.statusById.get(String(t.status));
+  const person = t.assignees?.[0] ? ctx.personById.get(t.assignees[0]) : null;
+  const len = lengthOf(row.span);
+  const title = t.title || "Untitled";
+  return (
+    <div
+      className={cx("group/row flex items-center gap-1.5 pe-1", hot && "bg-accent/60")}
+      style={{ height: ROW, paddingInlineStart: 4 + row.depth * 16 }}
+      onPointerEnter={onHot}
+    >
+      {row.hasChildren ? (
+        // raw: a 24px fold inside a 36px row; the kit's IconButton is a
+        // 36/44px target that would push the title out of line.
+        <button
+          type="button"
+          aria-expanded={!row.collapsed}
+          aria-label={`${row.collapsed ? "Show" : "Hide"} the subtasks of ${title}`}
+          onClick={onFold}
+          className="inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Icon name={row.collapsed ? "chevron-right" : "chevron-down"} size={14} />
+        </button>
+      ) : (
+        <span aria-hidden="true" className="size-6 shrink-0" />
+      )}
+      {row.milestone ? (
+        <Icon name="diamond" size={12} className="shrink-0 text-muted-foreground" />
+      ) : (
+        <StatusDot tone={status ? status.tone ?? (status.hue ? undefined : "neutral") : "neutral"} hue={status?.hue} size="sm" />
+      )}
+      {onOpen ? (
+        // raw: a title that opens the task; a kit Button would centre and
+        // pad it as an action.
+        <button
+          type="button"
+          title={title}
+          onClick={() => onOpen(t)}
+          className={cx(
+            "min-w-0 flex-1 truncate rounded-sm text-left text-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring",
+            row.done && "text-muted-foreground line-through",
+            row.hasChildren && "font-medium",
+          )}
+        >
+          {title}
+        </button>
+      ) : (
+        <span title={title} className={cx("min-w-0 flex-1 truncate text-sm", row.done && "text-muted-foreground line-through", row.hasChildren && "font-medium")}>
+          {title}
+        </span>
+      )}
+      {conflict ? (
+        <span className="shrink-0 text-destructive" title={`Starts before ${blockers} ends`}>
+          <Icon name="warning" size={14} />
+          <span className="sr-only">Starts before {blockers} ends</span>
+        </span>
+      ) : null}
+      {person ? <Avatar name={person.name} src={person.src} size="xs" className="hidden shrink-0 sm:inline-flex" /> : null}
+      <span data-nums className="hidden w-8 shrink-0 text-end text-xs tabular-nums text-muted-foreground sm:inline">
+        {len ? `${len}d` : "–"}
+        <span className="sr-only">{len ? (len === 1 ? " day" : " days") : "no dates"}</span>
+      </span>
+      {menu?.length ? (
+        <Menu
+          label={`More for ${title}`}
+          items={menu}
+          className="shrink-0 opacity-0 transition-opacity duration-150 focus-visible:opacity-100 group-hover/row:opacity-100 group-focus-within/row:opacity-100 aria-expanded:opacity-100 [@media(hover:none)]:opacity-100"
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/** The last row of a group: "Add task", then a field — Enter adds and
+ *  stays open for the next one, Escape closes. */
+export function QuickAdd({ group, open, onOpen, onClose, onCreate, addLabel, uid }) {
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const id = `${uid}-add-${group.key}`;
+  async function submit() {
+    const title = draft.trim();
+    if (!title || busy) return;
+    setBusy(true);
+    const r = await onCreate(title, group.key);
+    setBusy(false);
+    if (r?.ok !== false) setDraft("");
+  }
+  return (
+    <div className="flex items-center px-1.5" style={{ height: ADD_ROW }}>
+      {open ? (
+        <>
+          <label htmlFor={id} className="sr-only">
+            New task in {group.label}
+          </label>
+          <Input
+            id={id}
+            autoFocus
+            value={draft}
+            disabled={busy}
+            placeholder="Task name, then Enter"
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                submit();
+              } else if (e.key === "Escape") {
+                setDraft("");
+                onClose();
+              }
+            }}
+            onBlur={() => {
+              if (!draft.trim()) onClose();
+            }}
+          />
+        </>
+      ) : (
+        <Button variant="quiet" size="sm" icon="plus" align="start" onClick={onOpen} className="text-muted-foreground">
+          {addLabel}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+// ---- the timeline --------------------------------------------------------
+
+/** A task's row on the timeline: the drop target a link lands on, and
+ *  whatever the task draws. */
+export function TimelineRow({ row, hot, onHot, linking, children }) {
+  const drop = useDropTarget(`drop:${row.key}`, { task: row.task, label: row.task.title || "Untitled" }, { disabled: !linking });
+  const over = drop.isOver && drop.active?.data?.kind === "link" && drop.active.data.task.id !== row.task.id;
+  return (
+    <div ref={drop.setNodeRef} className={cx("relative", hot && "bg-accent/40", over && "z-[6]")} style={{ height: ROW }} onPointerEnter={onHot} data-over={over || undefined}>
+      {typeof children === "function" ? children(over) : children}
+    </div>
+  );
+}
+
+/** A task's bar: drag the body to move it, an edge to change its start or
+ *  end, the dot past its end onto another bar to make that one wait on
+ *  it. Arrow keys move it a day; Shift changes its end, Alt its start.
+ *  A parent's bar is a summary bracket (moves with its subtasks); a
+ *  milestone is a diamond on its day. */
+export function Bar({
+  row,
+  x,
+  w,
+  dayWidth,
+  tint,
+  shape = "bar",
+  editable,
+  onOpen,
+  onPreview,
+  onNudge,
+  clickGuard,
+  dim,
+  critical,
+  over,
+  moving,
+  hintId,
+  locale,
+}) {
+  const t = row.task;
+  const title = t.title || "Untitled";
+  const bar = shape === "bar";
+  const move = useDraggableTask(`bar:${row.key}`, { task: t, kind: "move", label: title }, { disabled: !editable });
+  const start = useDraggableTask(`start:${row.key}`, { task: t, kind: "start", label: `the start of ${title}` }, { disabled: !editable || !bar });
+  const end = useDraggableTask(`end:${row.key}`, { task: t, kind: "end", label: `the end of ${title}` }, { disabled: !editable || !bar });
+  const link = useDraggableTask(`link:${row.key}`, { task: t, kind: "link", label: `a link from ${title}` }, { disabled: !editable });
+
+  const active = move.isDragging ? ["move", move] : start.isDragging ? ["start", start] : end.isDragging ? ["end", end] : null;
+  const days = active ? daysFromPixels(active[1].transform?.x, dayWidth) : 0;
+  const kind = active?.[0];
+  useEffect(() => {
+    if (kind) onPreview?.(t.id, kind, days);
+  }, [kind, days, t.id, onPreview]);
+
+  const words = spanWords(row.span, locale);
+  const len = lengthOf(row.span);
+  const progress = typeof row.progress === "number" ? Math.max(0, Math.min(100, row.progress)) : null;
+  const label = `${title}${shape === "milestone" ? ", milestone" : ""}, ${words}${len > 1 ? `, ${len} days` : ""}${progress !== null && bar ? `, ${Math.round(progress)}% done` : ""}${row.done ? ", done" : ""}`;
+  const inside = bar && w >= 64;
+  const dragging = Boolean(kind) || moving;
+
+  function onKeyDown(e) {
+    if (!editable) {
+      if ((e.key === "Enter" || e.key === " ") && onOpen) {
+        e.preventDefault();
+        onOpen(t);
+      }
+      return;
+    }
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const step = e.key === "ArrowRight" ? 1 : -1;
+      onNudge(t.id, bar && e.shiftKey ? "end" : bar && e.altKey ? "start" : "move", step);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (moving) onNudge(t.id, null, 0, "flush");
+      else onOpen?.(t);
+    } else if (e.key === "Escape" && moving) {
+      e.preventDefault();
+      onNudge(t.id, null, 0, "cancel");
+    }
+  }
+
+  const body = cx(
+    "absolute outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card",
+    editable ? "cursor-grab touch-manipulation active:cursor-grabbing" : onOpen ? "cursor-pointer" : "cursor-default",
+    over && "ring-2 ring-primary ring-offset-1 ring-offset-card",
+    critical && !over && "ring-2 ring-primary/70",
+  );
+  const handle = editable ? { ...move.handle } : {};
+  // Our keys, not dnd-kit's keyboard drag: a bar moves by whole days.
+  const common = {
+    ...handle,
+    ref: move.setNodeRef,
+    role: onOpen || editable ? "button" : "img",
+    tabIndex: onOpen || editable ? 0 : undefined,
+    "aria-roledescription": editable ? "timeline bar" : undefined,
+    "aria-describedby": editable ? hintId : undefined,
+    "aria-label": label,
+    onKeyDown,
+    onClick: () => {
+      if (clickGuard?.()) return;
+      onOpen?.(t);
+    },
+  };
+
+  return (
+    <div
+      className={cx(
+        "group/bar absolute",
+        !dragging && "motion-safe:transition-[left,width,opacity] motion-safe:duration-150",
+        dim && !dragging && "opacity-40",
+        dragging && "z-20",
+      )}
+      style={{ left: x, width: w, top: shape === "bar" ? (ROW - BAR_H) / 2 : 0, height: shape === "bar" ? BAR_H : ROW }}
+    >
+      {shape === "milestone" ? (
+        // raw: a draggable diamond on the timeline; no kit part is a
+        // shape that moves.
+        <div {...common} className={cx(body, "left-1/2 top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[3px] shadow-sm", row.done ? "bg-success" : tint.solid)} />
+      ) : shape === "summary" ? (
+        // raw: the summary bracket over a parent's subtasks; it drags the
+        // whole family.
+        <div {...common} className={cx(body, "inset-x-0 top-1/2 h-3 -translate-y-1/2 rounded-sm")}>
+          <span aria-hidden="true" className="absolute inset-x-0 top-0 h-1.5 rounded-sm bg-foreground/70" />
+          <span aria-hidden="true" className="absolute start-0 top-0 h-3 w-1.5 rounded-b-sm bg-foreground/70" />
+          <span aria-hidden="true" className="absolute end-0 top-0 h-3 w-1.5 rounded-b-sm bg-foreground/70" />
+        </div>
+      ) : (
+        // raw: the bar is a draggable, resizable shape; a kit Button would
+        // centre and pad it as an action.
+        <div
+          {...common}
+          className={cx(
+            body,
+            "inset-0 overflow-hidden rounded-md border text-xs text-foreground shadow-xs",
+            tint.bar,
+            row.done && "opacity-70",
+            dragging && "shadow-md",
+          )}
+        >
+          {progress ? <span aria-hidden="true" className={cx("absolute inset-y-0 start-0", tint.fill)} style={{ width: `${progress}%` }} /> : null}
+          {inside ? (
+            <span className="relative flex h-full items-center gap-1 px-2">
+              {row.done ? <Icon name="check" size={12} className="shrink-0 text-success" /> : null}
+              <span className={cx("truncate font-medium", row.done && "line-through decoration-muted-foreground")}>{title}</span>
+            </span>
+          ) : null}
+        </div>
+      )}
+
+      {editable && bar ? (
+        <>
+          {/* raw: pointer-only edge grips (the keyboard uses Shift/Alt +
+              arrows); dnd-kit's listeners go on the element that drags. */}
+          <span
+            ref={start.setNodeRef}
+            {...start.handle}
+            role={undefined}
+            tabIndex={-1}
+            aria-hidden="true"
+            className="absolute inset-y-0 -start-1 z-10 flex w-3 cursor-ew-resize touch-none items-center justify-center opacity-0 transition-opacity duration-150 group-hover/bar:opacity-100 [@media(hover:none)]:hidden"
+          >
+            <span className="h-3 w-1 rounded-full bg-foreground/50" />
+          </span>
+          <span
+            ref={end.setNodeRef}
+            {...end.handle}
+            role={undefined}
+            tabIndex={-1}
+            aria-hidden="true"
+            className="absolute inset-y-0 -end-1 z-10 flex w-3 cursor-ew-resize touch-none items-center justify-center opacity-0 transition-opacity duration-150 group-hover/bar:opacity-100 [@media(hover:none)]:hidden"
+          >
+            <span className="h-3 w-1 rounded-full bg-foreground/50" />
+          </span>
+        </>
+      ) : null}
+      {editable ? (
+        <LinkDot link={link} title={title} />
+      ) : null}
+
+      {/* The words beside the bar: its title when it does not fit inside,
+          its dates on hover, focus and while it moves. */}
+      <span
+        className={cx(
+          "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-2 whitespace-nowrap ps-2 text-xs",
+          editable ? "start-[calc(100%+14px)]" : "start-full",
+        )}
+      >
+        {!inside ? <span className={cx("font-medium text-foreground", row.done && "text-muted-foreground line-through")}>{title}</span> : null}
+        <span
+          data-nums
+          className={cx(
+            "tabular-nums text-muted-foreground transition-opacity duration-150",
+            dragging ? "opacity-100" : "opacity-0 group-hover/bar:opacity-100 group-focus-within/bar:opacity-100",
+          )}
+        >
+          {words}
+          {len > 1 ? ` · ${len}d` : ""}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+// The dot past a bar's end: drag it onto another bar to link them. While
+// it is dragged, a dashed line follows the pointer.
+function LinkDot({ link, title }) {
+  const tx = link.transform?.x ?? 0;
+  const ty = link.transform?.y ?? 0;
+  return (
+    <>
+      {/* raw: a pointer-only link grip (the keyboard links from the row's
+          menu, "Waits on"). */}
+      <span
+        ref={link.setNodeRef}
+        {...link.handle}
+        role={undefined}
+        tabIndex={-1}
+        aria-hidden="true"
+        title={`Drag onto another task to make it wait on ${title}`}
+        className={cx(
+          "absolute -end-3.5 top-1/2 z-10 flex size-4 -translate-y-1/2 cursor-crosshair touch-none items-center justify-center",
+          link.isDragging ? "opacity-100" : "opacity-0 transition-opacity duration-150 group-hover/bar:opacity-100 [@media(hover:none)]:hidden",
+        )}
+      >
+        <span className="size-2.5 rounded-full border-2 border-primary bg-card" />
+      </span>
+      {link.isDragging ? (
+        // raw: an SVG drawing — the link being drawn; no kit part draws one.
+        <svg aria-hidden="true" className="pointer-events-none absolute -end-1.5 top-1/2 z-20 overflow-visible" width="1" height="1">
+          <path d={`M0 0 L${tx} ${ty}`} className="stroke-primary" strokeWidth={1.5} strokeDasharray="4 3" fill="none" />
+          <circle cx={tx} cy={ty} r={3.5} className="fill-primary" />
+        </svg>
+      ) : null}
+    </>
+  );
+}
+
+/** A task with no dates: a ghost bar follows the pointer; a click (or a
+ *  tap) schedules it there. */
+export function Unscheduled({ row, dayWidth, length, onSchedule }) {
+  const [day, setDay] = useState(null);
+  const dayAt = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    return Math.max(0, Math.floor((e.clientX - r.left) / dayWidth));
+  };
+  const w = Math.max(length * dayWidth, 24);
+  return (
+    // raw: a whole timeline row is the place to click; a kit Button would
+    // be one small target in a row a person points anywhere along.
+    <button
+      type="button"
+      aria-label={`Schedule ${row.task.title || "Untitled"}: pick a day`}
+      tabIndex={-1}
+      className="absolute inset-0 cursor-copy outline-none"
+      onPointerMove={(e) => setDay(dayAt(e))}
+      onPointerLeave={() => setDay(null)}
+      onClick={(e) => onSchedule(row.task, dayAt(e))}
+    >
+      {day !== null ? (
+        <span
+          className="pointer-events-none absolute flex items-center overflow-hidden whitespace-nowrap rounded-md border border-dashed border-primary/60 bg-primary/5 px-2 text-xs text-muted-foreground"
+          style={{ left: day * dayWidth, width: w, top: (ROW - BAR_H) / 2, height: BAR_H }}
+        >
+          {w >= 96 ? "Click to schedule" : ""}
+        </span>
+      ) : null}
+    </button>
+  );
+}