@multiplatform.one/components 6.0.4 → 6.3.0

package/src/views/ganttMath.ts

@@ -0,0 +1,333 @@
+/**
+ * Pure timeline math for the Gantt view: date→position mapping, zoom scales,
+ * axis tick generation, and bar-drag day snapping.
+ *
+ * Everything here is platform-agnostic and side-effect free (same discipline
+ * as `calendarMath.ts` / `kanbanDnd.ts`) so web and native share one source
+ * of truth and the logic stays unit-testable without a DOM.
+ *
+ * All day math is LOCAL wall-clock (date-component construction, deltas
+ * rounded) so ranges survive DST boundaries — the Calendar view's
+ * `computeEventMoveRange` convention.
+ */
+
+export type GanttZoom = "day" | "week" | "month";
+
+export const MS_PER_DAY = 86_400_000;
+
+/** Local start-of-day for a date. */
+export function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+/** Add whole calendar days, preserving wall-clock time-of-day across DST. */
+export function addDays(date: Date, days: number): Date {
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate() + days,
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds(),
+    date.getMilliseconds(),
+  );
+}
+
+/** Whole-day difference `to - from` (start-of-day to start-of-day, DST-safe). */
+export function dayDiff(from: Date, to: Date): number {
+  return Math.round((startOfDay(to).getTime() - startOfDay(from).getTime()) / MS_PER_DAY);
+}
+
+// ── Span normalization ────────────────────────────────────────
+
+export interface GanttSpan {
+  start: Date;
+  end: Date;
+}
+
+/**
+ * Normalized paint edges for a task span.
+ *
+ * End dates at exact midnight are INCLUSIVE whole days (Frappe date fields
+ * parse to local midnight: a task `2026-03-10 → 2026-03-12` covers three
+ * days, its bar's trailing edge at the start of the 13th). Ends with a
+ * time-of-day are exact edges. Degenerate/inverted spans clamp to at least
+ * one full day from the start so every task paints a visible bar.
+ */
+export function normalizeSpanEdges(span: GanttSpan): { startEdge: Date; endEdge: Date } {
+  const startEdge = span.start;
+  const midnightEnd =
+    span.end.getHours() === 0 &&
+    span.end.getMinutes() === 0 &&
+    span.end.getSeconds() === 0 &&
+    span.end.getMilliseconds() === 0;
+  let endEdge = midnightEnd ? addDays(startOfDay(span.end), 1) : span.end;
+  if (endEdge.getTime() <= startEdge.getTime()) {
+    endEdge = addDays(startOfDay(startEdge), 1);
+  }
+  return { startEdge, endEdge };
+}
+
+/** Shift a span by whole days, preserving duration and wall-clock times. */
+export function shiftSpanByDays(span: GanttSpan, dayDelta: number): GanttSpan {
+  return { start: addDays(span.start, dayDelta), end: addDays(span.end, dayDelta) };
+}
+
+// ── Bar resize (edge drags) ───────────────────────────────────
+
+/** Which edge of a bar a resize drag adjusts. */
+export type GanttResizeEdge = "start" | "end";
+
+/** Inclusive whole days a span paints (normalized edges, minimum 1). */
+export function spanInclusiveDays(span: GanttSpan): number {
+  const { startEdge, endEdge } = normalizeSpanEdges(span);
+  return Math.max(1, dayDiff(startEdge, endEdge));
+}
+
+/**
+ * Clamp a whole-day resize delta so the span keeps at least one inclusive
+ * day: the start edge may move later at most `inclusiveDays - 1` days, the
+ * end edge earlier by the same bound. Growing is unbounded.
+ */
+export function clampResizeDayDelta(
+  span: GanttSpan,
+  edge: GanttResizeEdge,
+  dayDelta: number,
+): number {
+  const maxShrink = spanInclusiveDays(span) - 1;
+  return edge === "start" ? Math.min(dayDelta, maxShrink) : Math.max(dayDelta, -maxShrink);
+}
+
+/**
+ * Resize one edge of a span by whole days (clamped via
+ * `clampResizeDayDelta`), preserving the wall-clock time of both edges —
+ * the untouched edge never moves.
+ */
+export function resizeSpanByDays(
+  span: GanttSpan,
+  edge: GanttResizeEdge,
+  dayDelta: number,
+): GanttSpan {
+  const clamped = clampResizeDayDelta(span, edge, dayDelta);
+  return edge === "start"
+    ? { start: addDays(span.start, clamped), end: span.end }
+    : { start: span.start, end: addDays(span.end, clamped) };
+}
+
+// ── Chart range ───────────────────────────────────────────────
+
+/** Day-aligned chart window; `end` is EXCLUSIVE (first day past the chart). */
+export interface GanttRange {
+  start: Date;
+  end: Date;
+}
+
+function startOfWeek(date: Date, firstDayOfWeek: 0 | 1): Date {
+  const day = startOfDay(date);
+  let offset = day.getDay() - firstDayOfWeek;
+  if (offset < 0) offset += 7;
+  return addDays(day, -offset);
+}
+
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+/**
+ * Padded, zoom-aligned chart range covering every task (and today, so the
+ * today line always has somewhere to land). Alignment: day zoom pads ±2
+ * days; week zoom aligns to week boundaries with a week of padding; month
+ * zoom aligns to month boundaries with a month of padding. With no tasks
+ * the range centers on `today` (callers normally render an empty state
+ * instead).
+ */
+export function computeGanttRange(
+  spans: readonly GanttSpan[],
+  zoom: GanttZoom,
+  today: Date = new Date(),
+  firstDayOfWeek: 0 | 1 = 0,
+): GanttRange {
+  let min = startOfDay(today);
+  let max = addDays(min, 1);
+  for (const span of spans) {
+    const { startEdge, endEdge } = normalizeSpanEdges(span);
+    if (startOfDay(startEdge).getTime() < min.getTime()) min = startOfDay(startEdge);
+    if (endEdge.getTime() > max.getTime()) max = addDays(startOfDay(addDays(endEdge, -1)), 1);
+  }
+  if (zoom === "day") {
+    return { start: addDays(min, -2), end: addDays(max, 2) };
+  }
+  if (zoom === "week") {
+    return {
+      start: addDays(startOfWeek(min, firstDayOfWeek), -7),
+      end: addDays(startOfWeek(addDays(max, 6), firstDayOfWeek), 7),
+    };
+  }
+  const monthStart = startOfMonth(min);
+  const monthEnd = new Date(max.getFullYear(), max.getMonth() + 1, 1);
+  return {
+    start: new Date(monthStart.getFullYear(), monthStart.getMonth() - 1, 1),
+    end: new Date(monthEnd.getFullYear(), monthEnd.getMonth() + 1, 1),
+  };
+}
+
+/** Total whole days spanned by a range (its chart width in day units). */
+export function rangeDays(range: GanttRange): number {
+  return Math.max(1, dayDiff(range.start, range.end));
+}
+
+// ── Date ↔ pixel mapping ──────────────────────────────────────
+
+/** Horizontal px offset of a date within the range at a px-per-day scale. */
+export function dateToX(date: Date, rangeStart: Date, pxPerDay: number): number {
+  const dayPart = dayDiff(rangeStart, date);
+  const minutePart = (date.getHours() * 60 + date.getMinutes()) / (24 * 60);
+  return (dayPart + minutePart) * pxPerDay;
+}
+
+/** Start-of-day date at a horizontal px offset (fractional days floor). */
+export function xToDate(x: number, rangeStart: Date, pxPerDay: number): Date {
+  return addDays(startOfDay(rangeStart), Math.floor(x / pxPerDay));
+}
+
+/** Snapped whole-day delta for a horizontal drag distance. */
+export function dxToDayDelta(dx: number, pxPerDay: number): number {
+  return Math.round(dx / pxPerDay);
+}
+
+export interface GanttBarGeometry {
+  x: number;
+  width: number;
+}
+
+/**
+ * Bar geometry for a task span within the chart range. Widths clamp to
+ * `minWidthPx` so degenerate spans stay visible/pressable.
+ */
+export function barGeometry(
+  span: GanttSpan,
+  rangeStart: Date,
+  pxPerDay: number,
+  minWidthPx = 6,
+): GanttBarGeometry {
+  const { startEdge, endEdge } = normalizeSpanEdges(span);
+  const x = dateToX(startEdge, rangeStart, pxPerDay);
+  const width = Math.max(minWidthPx, dateToX(endEdge, rangeStart, pxPerDay) - x);
+  return { x, width };
+}
+
+/** X offset of the today line, or null when today is outside the range. */
+export function todayLineX(
+  range: GanttRange,
+  pxPerDay: number,
+  today: Date = new Date(),
+): number | null {
+  const day = startOfDay(today);
+  if (day.getTime() < range.start.getTime() || day.getTime() >= range.end.getTime()) return null;
+  // Line sits at the middle of today's column.
+  return dateToX(day, range.start, pxPerDay) + pxPerDay / 2;
+}
+
+// ── Axis ticks ────────────────────────────────────────────────
+
+export interface GanttTick {
+  /** Horizontal offset within the chart. */
+  x: number;
+  /** Tick date (start of its unit). */
+  date: Date;
+  /** Major ticks carry labels and stronger grid lines. */
+  major: boolean;
+  /** Axis label (major ticks only). */
+  label?: string;
+}
+
+const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { day: "numeric" });
+const monthDayFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" });
+const monthYearFormatter = new Intl.DateTimeFormat(undefined, { month: "short", year: "numeric" });
+
+/**
+ * Axis ticks for a range at a zoom level.
+ *
+ * - `day`: a major tick per day — month starts (and the first tick) label
+ *   "Mar 10", other days just the day number.
+ * - `week`: a minor tick per day, a major labeled tick per week start.
+ * - `month`: a minor tick per week start, a major labeled tick per month
+ *   start ("Mar 2026").
+ */
+export function generateTicks(
+  range: GanttRange,
+  zoom: GanttZoom,
+  pxPerDay: number,
+  firstDayOfWeek: 0 | 1 = 0,
+): GanttTick[] {
+  const ticks: GanttTick[] = [];
+  const totalDays = rangeDays(range);
+  for (let i = 0; i < totalDays; i++) {
+    const date = addDays(startOfDay(range.start), i);
+    const x = i * pxPerDay;
+    if (zoom === "day") {
+      const monthEdge = date.getDate() === 1 || i === 0;
+      ticks.push({
+        x,
+        date,
+        major: true,
+        label: monthEdge ? monthDayFormatter.format(date) : dayLabelFormatter.format(date),
+      });
+      continue;
+    }
+    if (zoom === "week") {
+      const weekStart = dayDiff(startOfWeek(date, firstDayOfWeek), date) === 0;
+      ticks.push({
+        x,
+        date,
+        major: weekStart,
+        label: weekStart ? monthDayFormatter.format(date) : undefined,
+      });
+      continue;
+    }
+    const monthStart = date.getDate() === 1;
+    const weekStart = dayDiff(startOfWeek(date, firstDayOfWeek), date) === 0;
+    if (!monthStart && !weekStart) continue;
+    ticks.push({
+      x,
+      date,
+      major: monthStart,
+      label: monthStart ? monthYearFormatter.format(date) : undefined,
+    });
+  }
+  return ticks;
+}
+
+/** Visible header label for the chart range: "Mar 2026 – Jun 2026". */
+export function formatRangeLabel(range: GanttRange): string {
+  const start = monthYearFormatter.format(range.start);
+  const end = monthYearFormatter.format(addDays(range.end, -1));
+  return start === end ? start : `${start} – ${end}`;
+}
+
+/**
+ * Full accessible name for a task bar (Axiom 12):
+ * "Design review, Mar 10 – Mar 12".
+ */
+export function ganttTaskAccessibleLabel(task: { title: string; start: Date; end: Date }): string {
+  const { startEdge, endEdge } = normalizeSpanEdges(task);
+  const lastDay = addDays(endEdge, -1);
+  const startLabel = monthDayFormatter.format(startEdge);
+  const endLabel = monthDayFormatter.format(
+    lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge,
+  );
+  return startLabel === endLabel
+    ? `${task.title}, ${startLabel}`
+    : `${task.title}, ${startLabel} – ${endLabel}`;
+}
+
+/** Visible label for a live drag preview: "Mar 10 – Mar 12" (or one day). */
+export function formatSpanLabel(span: GanttSpan): string {
+  const { startEdge, endEdge } = normalizeSpanEdges(span);
+  const lastDay = addDays(endEdge, -1);
+  const startLabel = monthDayFormatter.format(startEdge);
+  const endLabel = monthDayFormatter.format(
+    lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge,
+  );
+  return startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;
+}

package/src/views/index.ts

@@ -2,11 +2,36 @@ export { List, type ListProps, type ListHotkeys } from "./List";
 export { Kanban, type KanbanProps, type KanbanColumn, type KanbanHotkeys } from "./Kanban";
 export {
   Calendar,
+  computeEventMoveRange,
+  eventChipTextColor,
+  findDayKeyAtPoint,
   type CalendarProps,
   type CalendarEvent,
+  type CalendarEventMoveRange,
+  type CalendarEventDraft,
+  type CalendarDayLayout,
   type CalendarViewType,
 } from "./Calendar";
-export { TreeView, type TreeViewProps, type TreeNode, type TreeViewHotkeys } from "./TreeView";
+export {
+  snapMinutes,
+  layoutDayBlocks,
+  computeResizeRange,
+  moveRangeToSlot,
+  createRangeFromDrag,
+  moveFocusDate,
+  moveFocusSlot,
+  eventAccessibleLabel,
+  formatTimeRangeLabel,
+  type TimedBlockLayout,
+  type CalendarRange,
+} from "./calendarMath";
+export {
+  TreeView,
+  type TreeViewProps,
+  type TreeNode,
+  type TreeViewHotkeys,
+  type TreeViewDisplay,
+} from "./TreeView";
 export { ImageGrid, type ImageGridProps, type ImageGridHotkeys } from "./ImageGrid";
 export {
   Dashboard,
@@ -15,6 +40,7 @@ export {
   calculateTrend,
   calculatePercentageChange,
   aggregateData,
+  resolveTrendColor,
   type DashboardProps,
   type DashboardWidget,
   type KPICardConfig,
@@ -31,3 +57,24 @@ export {
   type ReportColumn,
   type GroupByConfig,
 } from "./ReportBuilder";
+export { GanttView, type GanttViewProps, type GanttTask, type GanttItemMoveRange } from "./Gantt";
+export {
+  barGeometry,
+  computeGanttRange,
+  dateToX,
+  dxToDayDelta,
+  ganttTaskAccessibleLabel,
+  generateTicks,
+  normalizeSpanEdges,
+  shiftSpanByDays,
+  todayLineX,
+  type GanttBarGeometry,
+  type GanttRange,
+  type GanttSpan,
+  type GanttTick,
+  type GanttZoom,
+} from "./ganttMath";
+// Universal chart catalog (d3 math + react-native-svg rendering). Charts are
+// data views; the package barrel star-exports this module, so the charts
+// submodule surfaces through the existing views barrel.
+export * from "../charts";

package/src/views/kanbanDnd.spec.ts

@@ -0,0 +1,259 @@
+import { describe, expect, it } from "vitest";
+import {
+  autoScrollVelocity,
+  describeCancel,
+  describeDragState,
+  gapPosition,
+  insertionIndexForY,
+  keyboardLift,
+  keyboardMove,
+  maxInsertionIndex,
+  resolveDrop,
+  siblingOffset,
+  uniformInsertionIndex,
+  type KanbanBoardColumnSnapshot,
+} from "./kanbanDnd";
+
+const H = 80;
+
+// Column of three cards A(0) B(1) C(2), uniform height H.
+const starts = [0, H, 2 * H];
+const getStart = (i: number) => starts[i];
+
+describe("siblingOffset", () => {
+  describe("source column (dragged card at index 1 of [A,B,C])", () => {
+    it("gap above A: A and C both make room, C also closes the origin", () => {
+      // final layout: [gap, A, C]
+      expect(siblingOffset({ index: 0, sourceIndex: 1, gapIndex: 0, size: H })).toBe(H);
+      expect(siblingOffset({ index: 2, sourceIndex: 1, gapIndex: 0, size: H })).toBe(0);
+    });
+
+    it("gap at origin: nothing moves", () => {
+      expect(siblingOffset({ index: 0, sourceIndex: 1, gapIndex: 1, size: H })).toBe(0);
+      expect(siblingOffset({ index: 2, sourceIndex: 1, gapIndex: 1, size: H })).toBe(0);
+    });
+
+    it("gap at end: C closes the origin gap upward", () => {
+      // final layout: [A, C, gap]
+      expect(siblingOffset({ index: 0, sourceIndex: 1, gapIndex: 2, size: H })).toBe(0);
+      expect(siblingOffset({ index: 2, sourceIndex: 1, gapIndex: 2, size: H })).toBe(-H);
+    });
+
+    it("target moved to another column: cards below origin close the gap", () => {
+      expect(siblingOffset({ index: 0, sourceIndex: 1, gapIndex: null, size: H })).toBe(0);
+      expect(siblingOffset({ index: 2, sourceIndex: 1, gapIndex: null, size: H })).toBe(-H);
+    });
+
+    it("the dragged card itself never receives a sibling offset", () => {
+      expect(siblingOffset({ index: 1, sourceIndex: 1, gapIndex: 0, size: H })).toBe(0);
+    });
+  });
+
+  describe("foreign target column [X,Y]", () => {
+    it("cards at/below the gap shift down", () => {
+      expect(siblingOffset({ index: 0, sourceIndex: null, gapIndex: 0, size: H })).toBe(H);
+      expect(siblingOffset({ index: 1, sourceIndex: null, gapIndex: 0, size: H })).toBe(H);
+      expect(siblingOffset({ index: 0, sourceIndex: null, gapIndex: 1, size: H })).toBe(0);
+      expect(siblingOffset({ index: 1, sourceIndex: null, gapIndex: 1, size: H })).toBe(H);
+    });
+
+    it("gap at end shifts nothing; no gap shifts nothing", () => {
+      expect(siblingOffset({ index: 1, sourceIndex: null, gapIndex: 2, size: H })).toBe(0);
+      expect(siblingOffset({ index: 1, sourceIndex: null, gapIndex: null, size: H })).toBe(0);
+    });
+  });
+});
+
+describe("gapPosition", () => {
+  it("source column: gap above, at, and below the origin", () => {
+    const base = { sourceIndex: 1, count: 3, size: H, totalSize: 3 * H, getStart };
+    expect(gapPosition({ ...base, gapIndex: 0 })).toBe(0);
+    expect(gapPosition({ ...base, gapIndex: 1 })).toBe(H); // origin slot
+    expect(gapPosition({ ...base, gapIndex: 2 })).toBe(2 * H); // end
+  });
+
+  it("single-card source column keeps the gap at the top", () => {
+    expect(
+      gapPosition({
+        gapIndex: 0,
+        sourceIndex: 0,
+        count: 1,
+        size: H,
+        totalSize: H,
+        getStart,
+      }),
+    ).toBe(0);
+  });
+
+  it("foreign column: gap before a card and at the end", () => {
+    const base = { sourceIndex: null, count: 2, size: H, totalSize: 2 * H, getStart };
+    expect(gapPosition({ ...base, gapIndex: 0 })).toBe(0);
+    expect(gapPosition({ ...base, gapIndex: 1 })).toBe(H);
+    expect(gapPosition({ ...base, gapIndex: 2 })).toBe(2 * H);
+  });
+});
+
+describe("insertionIndexForY", () => {
+  const items = [
+    { index: 0, start: 0, size: H },
+    { index: 1, start: H, size: H },
+    { index: 2, start: 2 * H, size: H },
+  ];
+
+  it("foreign column: midpoint rule picks the slot under the pointer", () => {
+    const base = { items, sourceIndex: null, count: 3, size: H };
+    expect(insertionIndexForY({ ...base, localY: 10 })).toBe(0);
+    expect(insertionIndexForY({ ...base, localY: H / 2 + 1 })).toBe(1);
+    expect(insertionIndexForY({ ...base, localY: 2.6 * H })).toBe(3);
+    expect(insertionIndexForY({ ...base, localY: 99 * H })).toBe(3);
+  });
+
+  it("source column: dragged card is removed from the flow before comparing", () => {
+    const base = { items, sourceIndex: 1, count: 3, size: H };
+    // without-dragged flow: A at 0, C at H
+    expect(insertionIndexForY({ ...base, localY: 10 })).toBe(0);
+    expect(insertionIndexForY({ ...base, localY: H })).toBe(1);
+    expect(insertionIndexForY({ ...base, localY: 1.9 * H })).toBe(2);
+  });
+
+  it("empty column drops at index 0", () => {
+    expect(
+      insertionIndexForY({ localY: 50, items: [], sourceIndex: null, count: 0, size: H }),
+    ).toBe(0);
+  });
+});
+
+describe("uniformInsertionIndex", () => {
+  it("matches the midpoint rule for uniform sizes", () => {
+    expect(uniformInsertionIndex(10, H, 3)).toBe(0);
+    expect(uniformInsertionIndex(H / 2 + 1, H, 3)).toBe(1);
+    expect(uniformInsertionIndex(2.6 * H, H, 3)).toBe(3);
+    expect(uniformInsertionIndex(99 * H, H, 3)).toBe(3);
+    expect(uniformInsertionIndex(-5, H, 3)).toBe(0);
+  });
+
+  it("degrades safely on empty lists and zero sizes", () => {
+    expect(uniformInsertionIndex(50, H, 0)).toBe(0);
+    expect(uniformInsertionIndex(50, 0, 3)).toBe(0);
+  });
+});
+
+describe("autoScrollVelocity", () => {
+  const zone = { start: 0, end: 400, edge: 48, maxSpeed: 16 };
+
+  it("is zero away from the edges", () => {
+    expect(autoScrollVelocity({ ...zone, pos: 200 })).toBe(0);
+  });
+
+  it("ramps with proximity and saturates at the edge", () => {
+    const half = autoScrollVelocity({ ...zone, pos: 24 });
+    expect(half).toBeCloseTo(-8);
+    expect(autoScrollVelocity({ ...zone, pos: 0 })).toBe(-16);
+    expect(autoScrollVelocity({ ...zone, pos: -20 })).toBe(-16); // past the edge stays saturated
+    expect(autoScrollVelocity({ ...zone, pos: 376 })).toBeCloseTo(8);
+    expect(autoScrollVelocity({ ...zone, pos: 400 })).toBe(16);
+  });
+
+  it("degrades gracefully on tiny viewports", () => {
+    expect(autoScrollVelocity({ pos: 10, start: 0, end: 60, edge: 48, maxSpeed: 16 })).toBeLessThan(
+      0,
+    );
+    expect(autoScrollVelocity({ pos: 30, start: 0, end: 60, edge: 48, maxSpeed: 16 })).toBe(0);
+  });
+});
+
+describe("keyboard drag state machine", () => {
+  const board: KanbanBoardColumnSnapshot[] = [
+    { id: "todo", title: "To Do", count: 3 },
+    { id: "review", title: "Review", count: 2 },
+    { id: "done", title: "Done", count: 0 },
+  ];
+
+  it("lifts a card at its own position", () => {
+    const drag = keyboardLift(board, "todo", 1);
+    expect(drag).toEqual({
+      sourceColumnId: "todo",
+      sourceIndex: 1,
+      target: { columnId: "todo", index: 1 },
+    });
+  });
+
+  it("rejects lifting a card that does not exist", () => {
+    expect(keyboardLift(board, "todo", 3)).toBeNull();
+    expect(keyboardLift(board, "missing", 0)).toBeNull();
+  });
+
+  it("moves up/down within the column and clamps at boundaries", () => {
+    let drag = keyboardLift(board, "todo", 1)!;
+    drag = keyboardMove(drag, board, "up");
+    expect(drag.target).toEqual({ columnId: "todo", index: 0 });
+    const clamped = keyboardMove(drag, board, "up");
+    expect(clamped).toBe(drag); // boundary no-op returns the same session
+    drag = keyboardMove(drag, board, "down");
+    drag = keyboardMove(drag, board, "down");
+    expect(drag.target).toEqual({ columnId: "todo", index: 2 });
+    // source column of 3 has wd insertion range 0..2
+    expect(keyboardMove(drag, board, "down")).toBe(drag);
+  });
+
+  it("moves across columns, clamping the index to the destination size", () => {
+    let drag = keyboardLift(board, "todo", 2)!;
+    drag = keyboardMove(drag, board, "right");
+    expect(drag.target).toEqual({ columnId: "review", index: 2 }); // review holds 2 cards → max 2
+    drag = keyboardMove(drag, board, "right");
+    expect(drag.target).toEqual({ columnId: "done", index: 0 }); // empty column → index 0
+    expect(keyboardMove(drag, board, "right")).toBe(drag); // last column no-op
+    drag = keyboardMove(drag, board, "left");
+    expect(drag.target).toEqual({ columnId: "review", index: 0 });
+  });
+
+  it("computes max insertion for source vs foreign columns", () => {
+    const drag = keyboardLift(board, "todo", 0)!;
+    expect(maxInsertionIndex(board, drag, "todo")).toBe(2);
+    expect(maxInsertionIndex(board, drag, "review")).toBe(2);
+    expect(maxInsertionIndex(board, drag, "done")).toBe(0);
+  });
+
+  it("resolves drops: no-op at origin, commit elsewhere", () => {
+    const home = keyboardLift(board, "todo", 1)!;
+    expect(resolveDrop(home).commit).toBe(false);
+
+    const moved = keyboardMove(home, board, "right");
+    const result = resolveDrop(moved);
+    expect(result.commit).toBe(true);
+    expect(result.from).toEqual({ columnId: "todo", index: 1 });
+    expect(result.to).toEqual({ columnId: "review", index: 1 });
+  });
+
+  it("announces lift, move, drop, and cancel with 1-based positions", () => {
+    let drag = keyboardLift(board, "todo", 1)!;
+    expect(describeDragState("lift", drag, board, "Fix login bug")).toEqual({
+      type: "lift",
+      card: "Fix login bug",
+      column: "To Do",
+      position: 2,
+      count: 3,
+    });
+
+    drag = keyboardMove(drag, board, "right");
+    expect(describeDragState("move", drag, board, "Fix login bug")).toEqual({
+      type: "move",
+      card: "Fix login bug",
+      column: "Review",
+      position: 2,
+      count: 3,
+    });
+
+    expect(describeDragState("drop", drag, board, "Fix login bug")).toMatchObject({
+      type: "drop",
+      column: "Review",
+      position: 2,
+    });
+
+    expect(describeCancel(drag, board, "Fix login bug")).toEqual({
+      type: "cancel",
+      card: "Fix login bug",
+      column: "To Do",
+    });
+  });
+});