makersclaw 0.2.0 → 0.3.0

package/registry/blocks/task-model/dnd.jsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MeasuringStrategy,
+  PointerSensor,
+  TouchSensor,
+  closestCenter,
+  pointerWithin,
+  rectIntersection,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Icon, cx } from "../../ui";
+
+// Drag primitives for every task view, on @dnd-kit — one interaction
+// model: a mouse drags after 5px, a finger after a short press (so a list
+// still scrolls under it), the keyboard picks up with Space or Enter,
+// moves with the arrows and drops with Space (Escape puts it back). What
+// is dragged floats as a lifted copy; where it will land is the view's to
+// draw (`isOver`). Views never import @dnd-kit themselves: they use these.
+//
+//   <TaskDragProvider onDragEnd={({ active, over }) => …} overlay={(a) => <TaskChip task={a.data.task} lifted />}>
+//     <SortableGroup ids={ids}>{rows.map((t) => <Row key={t.id} … />)}</SortableGroup>
+//   </TaskDragProvider>
+//
+//   function Row({ task }) {
+//     const s = useSortableTask(task.id, { task, group: "todo" });
+//     return <li ref={s.setNodeRef} style={s.style}><DragHandle handle={s.handle} label={task.title} />…</li>;
+//   }
+//
+// `data` is yours: whatever you pass comes back on `active.data` and
+// `over.data` in the callbacks (a task, a group key, a day).
+
+/** Whether the viewer asked for less motion. */
+export function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const on = () => setReduced(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return reduced;
+}
+
+// Lists: the item under the pointer wins over the group around it; the
+// group wins in its gaps (its heading, below its last row, when it is
+// empty or folded); the keyboard, which has no pointer, takes the closest.
+function listCollision(args) {
+  const within = pointerWithin(args);
+  if (!within.length) return closestCenter(args);
+  const items = within.filter((c) => args.droppableContainers.find((d) => d.id === c.id)?.data?.current?.task);
+  return items.length ? items : within;
+}
+
+const COLLISIONS = { list: listCollision, closest: closestCenter, pointer: pointerWithin, rect: rectIntersection };
+
+// The shape the callbacks get: plain ids and the data the view attached.
+function simplify(e) {
+  const a = e.active;
+  const o = e.over;
+  return {
+    active: a ? { id: String(a.id), data: a.data?.current ?? {} } : null,
+    over: o ? { id: String(o.id), data: o.data?.current ?? {} } : null,
+    delta: e.delta ?? { x: 0, y: 0 },
+  };
+}
+
+/** The drag area. Callbacks get { active: { id, data }, over: { id,
+ *  data } | null, delta }. `overlay(active)` draws the lifted copy under
+ *  the pointer (default: none — the item itself moves). `collision`:
+ *  "list" (default: the item under the pointer, else the group under it,
+ *  else — the keyboard — the closest) · "closest" · "pointer" (grids,
+ *  calendars: the cell under the pointer) · "rect" · your own function
+ *  (dnd-kit's collision detection signature). `describe(active)` names the item for a
+ *  screen reader ("Write brief"); `place(over)` names where it is
+ *  ("To do", "Tuesday 23"). */
+export function TaskDragProvider({ children, onDragStart, onDragOver, onDragEnd, onDragCancel, overlay, collision = "list", describe, place, disabled = false }) {
+  const id = useId();
+  const reduced = useReducedMotion();
+  const [active, setActive] = useState(null);
+  const [portal, setPortal] = useState(null);
+  useEffect(() => setPortal(document.body), []);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  const nameOf = (a) => describe?.(a) ?? a?.data?.task?.title ?? a?.data?.label ?? "Item";
+  const whereOf = (o) => (o ? place?.(o) ?? o.data?.label ?? o.data?.group ?? null : null);
+  const announcements = {
+    onDragStart: ({ active: a }) => `Picked up ${nameOf(simplify({ active: a }).active)}. Move with the arrow keys, drop with Space, cancel with Escape.`,
+    onDragOver: ({ active: a, over: o }) => {
+      const s = simplify({ active: a, over: o });
+      const w = whereOf(s.over);
+      return w ? `${nameOf(s.active)} is over ${w}.` : `${nameOf(s.active)} is not over a place to drop.`;
+    },
+    onDragEnd: ({ active: a, over: o }) => {
+      const s = simplify({ active: a, over: o });
+      const w = whereOf(s.over);
+      return w ? `${nameOf(s.active)} dropped on ${w}.` : `${nameOf(s.active)} put back.`;
+    },
+    onDragCancel: ({ active: a }) => `Moving ${nameOf(simplify({ active: a }).active)} was cancelled. It is back where it was.`,
+  };
+  return (
+    <DndContext
+      id={id}
+      sensors={disabled ? NO_SENSORS : sensors}
+      collisionDetection={typeof collision === "function" ? collision : COLLISIONS[collision] ?? listCollision}
+      measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}
+      accessibility={{
+        announcements,
+        screenReaderInstructions: { draggable: "To move this, press Space or Enter, then the arrow keys. Space drops it, Escape cancels." },
+      }}
+      onDragStart={(e) => {
+        const s = simplify(e);
+        setActive(s.active);
+        onDragStart?.(s);
+      }}
+      onDragOver={(e) => onDragOver?.(simplify(e))}
+      onDragEnd={(e) => {
+        setActive(null);
+        onDragEnd?.(simplify(e));
+      }}
+      onDragCancel={(e) => {
+        setActive(null);
+        onDragCancel?.(simplify(e));
+      }}
+    >
+      {children}
+      {overlay && portal
+        ? createPortal(
+            <DragOverlay dropAnimation={reduced ? null : { duration: 150, easing: "ease-out" }} zIndex={60}>
+              {active ? <div className={cx("cursor-grabbing", !reduced && "rotate-1 scale-[1.02]")}>{overlay(active)}</div> : null}
+            </DragOverlay>,
+            portal,
+          )
+        : null}
+    </DndContext>
+  );
+}
+
+const NO_SENSORS = [];
+
+const STRATEGIES = { vertical: verticalListSortingStrategy, horizontal: horizontalListSortingStrategy, grid: rectSortingStrategy };
+
+/** A run of items that reorder among themselves (and take items from
+ *  other groups in the same provider). `ids` in the order shown. */
+export function SortableGroup({ ids, layout = "vertical", children }) {
+  return (
+    <SortableContext items={ids} strategy={STRATEGIES[layout] ?? verticalListSortingStrategy}>
+      {children}
+    </SortableContext>
+  );
+}
+
+/** One item in a SortableGroup: put `setNodeRef` and `style` on the item,
+ *  spread `handle` on its grip (or on the item itself for drag-anywhere).
+ *  `isDragging` (it is the one moving: dim it), `isOver` (something is
+ *  over it). */
+export function useSortableTask(id, data, { disabled = false } = {}) {
+  const s = useSortable({ id, data, disabled });
+  return {
+    setNodeRef: s.setNodeRef,
+    setHandleRef: s.setActivatorNodeRef,
+    style: { transform: CSS.Translate.toString(s.transform), transition: s.transition },
+    handle: { ...s.attributes, ...s.listeners },
+    isDragging: s.isDragging,
+    isOver: s.isOver,
+    isSorting: s.isSorting,
+  };
+}
+
+/** A free item that is dragged onto targets (a calendar chip, a gantt
+ *  bar): no reordering. `transform` is the pointer's offset, for views
+ *  that move the item itself instead of an overlay. */
+export function useDraggableTask(id, data, { disabled = false } = {}) {
+  const d = useDraggable({ id, data, disabled });
+  return {
+    setNodeRef: d.setNodeRef,
+    setHandleRef: d.setActivatorNodeRef,
+    handle: { ...d.attributes, ...d.listeners },
+    transform: d.transform,
+    style: d.transform ? { transform: CSS.Translate.toString(d.transform) } : undefined,
+    isDragging: d.isDragging,
+  };
+}
+
+/** A place to drop (a group, a day, a person's week). `isOver` while
+ *  something is over it; `active` is what is being dragged, if anything. */
+export function useDropTarget(id, data, { disabled = false } = {}) {
+  const d = useDroppable({ id, data, disabled });
+  return {
+    setNodeRef: d.setNodeRef,
+    isOver: d.isOver,
+    active: d.active ? { id: String(d.active.id), data: d.active.data?.current ?? {} } : null,
+  };
+}
+
+/** The grip a row is dragged by: a quiet square with the grip glyph,
+ *  shown on hover (always on touch). `handle` from useSortableTask. */
+export function DragHandle({ handle, handleRef, label, className, alwaysVisible = false }) {
+  return (
+    // raw: dnd-kit's listeners and its role/aria go on the element that
+    // starts the drag; it must not be a click action like a kit Button.
+    <button
+      type="button"
+      ref={handleRef}
+      {...handle}
+      aria-label={`Move ${label}`}
+      className={cx(
+        "inline-flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing",
+        !alwaysVisible && "opacity-0 transition-opacity duration-150 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100",
+        className,
+      )}
+    >
+      <Icon name="grip" size={14} />
+    </button>
+  );
+}
+
+/** A line where a dragged item will land (between rows). */
+export function DropLine({ className }) {
+  return <span aria-hidden="true" className={cx("pointer-events-none block h-0.5 rounded-full bg-primary", className)} />;
+}
+
+/** The lifted look for an overlay you draw yourself. */
+export const LIFTED = "rounded-md border border-border bg-card text-card-foreground shadow-lg ring-1 ring-primary/20";
+
+export { arrayMove };

package/registry/blocks/task-model/index.js

@@ -0,0 +1,97 @@
+// The task-model block — `makersclaw add task-model`. The work-item shape
+// every task view reads (list, board, table, calendar, gantt, workload…),
+// its pure helpers, the small parts those views share, the toolbar, and
+// the drag primitives on @dnd-kit. Fixed: compose it through its exports
+// (README.md beside this file). Views built on it import it, never
+// @dnd-kit directly. The helpers in model.js and dates.js are pure and
+// run anywhere, the server included.
+export * from "./dates";
+export {
+  NONE,
+  PRIORITIES,
+  DEFAULT_STATUSES,
+  TASK_FIELDS,
+  DEFAULT_VIEW,
+  normalizeTask,
+  normalizeTasks,
+  createTaskContext,
+  fieldOf,
+  isDone,
+  doneStatusId,
+  openStatusId,
+  toggleDoneChange,
+  newTaskId,
+  draftTask,
+  valuesOf,
+  optionsOf,
+  labelOf,
+  searchText,
+  searchTasks,
+  filterTasks,
+  orderOf,
+  sortTasks,
+  sortOptions,
+  groupTasks,
+  groupOptions,
+  movePatch,
+  applyView,
+  activeFilterCount,
+  rankBetween,
+  placeChange,
+  childrenMap,
+  buildTree,
+  flattenTree,
+  descendantIds,
+  ancestorIds,
+  subtaskCounts,
+  rollup,
+  progressOf,
+  dependencyEdges,
+  blockersOf,
+  wouldCycle,
+  dateConflicts,
+  criticalPath,
+  hoursPerDay,
+  workload,
+  sumOf,
+  applyChange,
+  invertChange,
+  changeWrites,
+  isNewId,
+  changedIds,
+  deleteChange,
+  toBoard,
+  toTableRows,
+  taskFacets,
+} from "./model";
+export { useTaskChanges } from "./changes";
+export {
+  StatusPill,
+  CompleteToggle,
+  AssigneeStack,
+  PersonLabel,
+  DueLabel,
+  PriorityFlag,
+  TagList,
+  SubtaskCount,
+  ProgressLine,
+  TaskChip,
+  GroupLabel,
+  taskColumns,
+  TONE_TEXT,
+  HUE_EDGE,
+  HUE_BG,
+} from "./parts";
+export { ViewToolbar } from "./toolbar";
+export {
+  TaskDragProvider,
+  SortableGroup,
+  useSortableTask,
+  useDraggableTask,
+  useDropTarget,
+  DragHandle,
+  DropLine,
+  LIFTED,
+  useReducedMotion,
+  arrayMove,
+} from "./dnd";