@multiplatform.one/components 6.1.0 → 6.3.0

package/src/views/Gantt.spec.tsx

@@ -0,0 +1,611 @@
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { GanttView, type GanttTask } from "./Gantt";
+import {
+  addDays,
+  barGeometry,
+  clampResizeDayDelta,
+  computeGanttRange,
+  dateToX,
+  dayDiff,
+  dxToDayDelta,
+  formatSpanLabel,
+  ganttTaskAccessibleLabel,
+  generateTicks,
+  normalizeSpanEdges,
+  resizeSpanByDays,
+  shiftSpanByDays,
+  spanInclusiveDays,
+  todayLineX,
+  type GanttRange,
+} from "./ganttMath";
+
+afterEach(cleanup);
+
+const mar = (day: number, hours = 0, minutes = 0) => new Date(2026, 2, day, hours, minutes);
+
+// ---------------------------------------------------------------------------
+// Pure math: date → position
+// ---------------------------------------------------------------------------
+describe("ganttMath", () => {
+  describe("day arithmetic", () => {
+    it("computes whole-day differences and shifts", () => {
+      expect(dayDiff(mar(10), mar(13))).toBe(3);
+      expect(dayDiff(mar(13), mar(10))).toBe(-3);
+      expect(addDays(mar(10, 9, 30), 2)).toEqual(mar(12, 9, 30));
+    });
+  });
+
+  describe("normalizeSpanEdges", () => {
+    it("treats midnight ends as inclusive whole days (Frappe date fields)", () => {
+      const { startEdge, endEdge } = normalizeSpanEdges({ start: mar(10), end: mar(12) });
+      expect(startEdge).toEqual(mar(10));
+      expect(endEdge).toEqual(mar(13));
+    });
+
+    it("keeps timed ends as exact edges", () => {
+      const { endEdge } = normalizeSpanEdges({ start: mar(10, 9), end: mar(12, 17) });
+      expect(endEdge).toEqual(mar(12, 17));
+    });
+
+    it("clamps degenerate/inverted spans to at least one day", () => {
+      const same = normalizeSpanEdges({ start: mar(10), end: mar(10) });
+      expect(same.endEdge).toEqual(mar(11));
+      const inverted = normalizeSpanEdges({ start: mar(10, 9), end: mar(8) });
+      expect(inverted.endEdge).toEqual(mar(11));
+    });
+  });
+
+  describe("dateToX / barGeometry", () => {
+    const rangeStart = mar(8);
+
+    it("maps dates to px offsets at the day scale", () => {
+      expect(dateToX(mar(8), rangeStart, 24)).toBe(0);
+      expect(dateToX(mar(10), rangeStart, 24)).toBe(48);
+      expect(dateToX(mar(10, 12, 0), rangeStart, 24)).toBe(60);
+    });
+
+    it("positions bars with inclusive-day widths", () => {
+      // Mar 10 → Mar 12 inclusive = 3 days wide starting 2 days in.
+      const geom = barGeometry({ start: mar(10), end: mar(12) }, rangeStart, 24);
+      expect(geom.x).toBe(48);
+      expect(geom.width).toBe(72);
+    });
+
+    it("clamps bar width to the minimum so degenerate spans stay visible", () => {
+      const geom = barGeometry({ start: mar(10), end: mar(10) }, rangeStart, 4, 6);
+      expect(geom.width).toBe(6);
+    });
+  });
+
+  describe("zoom-level scale changes", () => {
+    const tasks = [{ start: mar(10), end: mar(12) }];
+
+    it("scales bar geometry with px-per-day", () => {
+      const range = computeGanttRange(tasks, "day", mar(11));
+      const atDay = barGeometry(tasks[0], range.start, 64);
+      const atWeek = barGeometry(tasks[0], range.start, 24);
+      expect(atDay.width / atWeek.width).toBeCloseTo(64 / 24);
+      expect(atDay.x / atWeek.x).toBeCloseTo(64 / 24);
+    });
+
+    it("aligns the range per zoom level", () => {
+      const dayRange = computeGanttRange(tasks, "day", mar(11));
+      expect(dayRange.start).toEqual(mar(8));
+      expect(dayRange.end).toEqual(mar(15));
+
+      const weekRange = computeGanttRange(tasks, "week", mar(11));
+      // Week-aligned (Sunday) with a week of padding each side.
+      expect(weekRange.start.getDay()).toBe(0);
+      expect(weekRange.end.getDay()).toBe(0);
+      expect(weekRange.start).toEqual(mar(1));
+
+      const monthRange = computeGanttRange(tasks, "month", mar(11));
+      expect(monthRange.start).toEqual(new Date(2026, 1, 1));
+      expect(monthRange.end).toEqual(new Date(2026, 4, 1));
+    });
+
+    it("expands the range to cover today", () => {
+      const range = computeGanttRange(tasks, "day", mar(25));
+      expect(range.end.getTime()).toBeGreaterThan(mar(25).getTime());
+    });
+  });
+
+  describe("generateTicks", () => {
+    it("emits a labeled major tick per day at day zoom", () => {
+      const range: GanttRange = { start: mar(8), end: mar(12) };
+      const ticks = generateTicks(range, "day", 64);
+      expect(ticks).toHaveLength(4);
+      expect(ticks.every((tick) => tick.major && tick.label)).toBe(true);
+      expect(ticks.map((tick) => tick.x)).toEqual([0, 64, 128, 192]);
+    });
+
+    it("labels only week starts at week zoom", () => {
+      const range: GanttRange = { start: mar(1), end: mar(29) };
+      const ticks = generateTicks(range, "week", 24);
+      expect(ticks).toHaveLength(28);
+      const majors = ticks.filter((tick) => tick.major);
+      expect(majors).toHaveLength(4);
+      expect(majors.every((tick) => tick.date.getDay() === 0 && tick.label)).toBe(true);
+      expect(ticks.filter((tick) => !tick.major).every((tick) => tick.label === undefined)).toBe(
+        true,
+      );
+    });
+
+    it("labels only month starts at month zoom (weeks as minor grid)", () => {
+      const range: GanttRange = { start: new Date(2026, 1, 1), end: new Date(2026, 4, 1) };
+      const ticks = generateTicks(range, "month", 8);
+      const majors = ticks.filter((tick) => tick.major);
+      expect(majors).toHaveLength(3);
+      expect(majors.every((tick) => tick.date.getDate() === 1 && tick.label)).toBe(true);
+      expect(ticks.some((tick) => !tick.major)).toBe(true);
+    });
+  });
+
+  describe("drag math", () => {
+    it("snaps drag distances to whole days", () => {
+      expect(dxToDayDelta(48, 24)).toBe(2);
+      expect(dxToDayDelta(-49, 24)).toBe(-2);
+      expect(dxToDayDelta(11, 24)).toBe(0);
+      expect(dxToDayDelta(13, 24)).toBe(1);
+    });
+
+    it("shifts spans preserving duration and wall-clock times", () => {
+      const moved = shiftSpanByDays({ start: mar(10, 9, 30), end: mar(12, 17, 0) }, 3);
+      expect(moved.start).toEqual(mar(13, 9, 30));
+      expect(moved.end).toEqual(mar(15, 17, 0));
+    });
+  });
+
+  describe("resize math", () => {
+    it("counts inclusive days from normalized edges", () => {
+      expect(spanInclusiveDays({ start: mar(10), end: mar(12) })).toBe(3);
+      expect(spanInclusiveDays({ start: mar(10), end: mar(10) })).toBe(1);
+    });
+
+    it("resizes the end edge only, preserving wall-clock times", () => {
+      const resized = resizeSpanByDays({ start: mar(10, 9, 30), end: mar(12, 17, 0) }, "end", 2);
+      expect(resized.start).toEqual(mar(10, 9, 30));
+      expect(resized.end).toEqual(mar(14, 17, 0));
+    });
+
+    it("resizes the start edge only", () => {
+      const resized = resizeSpanByDays({ start: mar(10), end: mar(14) }, "start", 2);
+      expect(resized.start).toEqual(mar(12));
+      expect(resized.end).toEqual(mar(14));
+    });
+
+    it("clamps shrinking so at least one inclusive day survives", () => {
+      // Mar 10 → Mar 12 = 3 inclusive days: the shrink bound is ±2.
+      expect(clampResizeDayDelta({ start: mar(10), end: mar(12) }, "start", 5)).toBe(2);
+      expect(clampResizeDayDelta({ start: mar(10), end: mar(12) }, "end", -5)).toBe(-2);
+      // Growing is unbounded (either direction away from the other edge).
+      expect(clampResizeDayDelta({ start: mar(10), end: mar(12) }, "start", -30)).toBe(-30);
+      expect(clampResizeDayDelta({ start: mar(10), end: mar(12) }, "end", 30)).toBe(30);
+      const collapsed = resizeSpanByDays({ start: mar(10), end: mar(12) }, "start", 99);
+      expect(collapsed.start).toEqual(mar(12));
+      expect(collapsed.end).toEqual(mar(12));
+    });
+  });
+
+  describe("today line", () => {
+    it("positions today at the middle of its column", () => {
+      const range: GanttRange = { start: mar(8), end: mar(15) };
+      expect(todayLineX(range, 24, mar(10, 14, 30))).toBe(60);
+    });
+
+    it("returns null when today is outside the range", () => {
+      const range: GanttRange = { start: mar(8), end: mar(15) };
+      expect(todayLineX(range, 24, mar(20))).toBeNull();
+    });
+  });
+
+  describe("labels", () => {
+    it("builds accessible names with the inclusive day range", () => {
+      const label = ganttTaskAccessibleLabel({
+        title: "Design review",
+        start: mar(10),
+        end: mar(12),
+      });
+      expect(label).toContain("Design review");
+      expect(label).toMatch(/10/);
+      expect(label).toMatch(/12/);
+    });
+
+    it("collapses single-day spans to one date", () => {
+      expect(formatSpanLabel({ start: mar(10), end: mar(10) })).not.toContain("–");
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Component: rendering, states, callbacks
+// ---------------------------------------------------------------------------
+
+const tasks: GanttTask[] = [
+  { id: "t1", title: "Design review", start: mar(10), end: mar(12), intent: "accent" },
+  { id: "t2", title: "Implementation", start: mar(12), end: mar(18), intent: "success" },
+  { id: "t3", title: "Launch", start: mar(19), end: mar(19), intent: "error" },
+];
+
+describe("GanttView", () => {
+  it("renders one labeled row and one bar per task", () => {
+    const { container } = renderWithProviders(<GanttView tasks={tasks} />);
+    expect(screen.getByText("Design review")).toBeInTheDocument();
+    expect(screen.getByText("Implementation")).toBeInTheDocument();
+    expect(container.querySelectorAll("[data-gantt-bar]")).toHaveLength(3);
+    expect(container.querySelector('[data-gantt-bar="t1"]')).toBeTruthy();
+  });
+
+  it("marks the axis with the active zoom level", () => {
+    const { container } = renderWithProviders(<GanttView tasks={tasks} zoom="month" />);
+    expect(container.querySelector('[data-gantt-axis="month"]')).toBeTruthy();
+    expect(container.querySelector('[data-gantt-view="month"]')).toBeTruthy();
+  });
+
+  it("renders the today line when today is inside the range", () => {
+    const today = new Date();
+    const liveTasks: GanttTask[] = [
+      { id: "now", title: "Current work", start: addDays(today, -2), end: addDays(today, 2) },
+    ];
+    const { container } = renderWithProviders(<GanttView tasks={liveTasks} />);
+    expect(container.querySelector('[data-gantt-today="true"]')).toBeTruthy();
+  });
+
+  it("fires onItemPress when a bar is clicked", () => {
+    const onItemPress = vi.fn();
+    const { container } = renderWithProviders(
+      <GanttView tasks={tasks} onItemPress={onItemPress} />,
+    );
+    fireEvent.click(container.querySelector('[data-gantt-bar="t1"]') as Element);
+    expect(onItemPress).toHaveBeenCalledTimes(1);
+    expect(onItemPress.mock.calls[0][0].id).toBe("t1");
+  });
+
+  it("fires onItemPress from the keyboard (Enter on a focused bar)", () => {
+    const onItemPress = vi.fn();
+    const { container } = renderWithProviders(
+      <GanttView tasks={tasks} onItemPress={onItemPress} />,
+    );
+    fireEvent.keyDown(container.querySelector('[data-gantt-bar="t2"]') as Element, {
+      key: "Enter",
+    });
+    expect(onItemPress).toHaveBeenCalledTimes(1);
+    expect(onItemPress.mock.calls[0][0].id).toBe("t2");
+  });
+
+  describe("bar drag (web pointer)", () => {
+    it("fires onItemMove with a whole-day-shifted range on drop", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      // Default medium size at week zoom = 24 px/day → +48px = +2 days.
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      expect(onItemMove).toHaveBeenCalledTimes(1);
+      const [movedTask, span] = onItemMove.mock.calls[0];
+      expect(movedTask.id).toBe("t1");
+      expect(span.start).toEqual(mar(12));
+      expect(span.end).toEqual(mar(14));
+    });
+
+    it("does not fire onItemMove when movement stays under the drag threshold", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 101, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 101, clientY: 100 });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+
+    it("does not fire onItemMove for a snapped zero-day drop", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      // 8px travel activates the drag but rounds to 0 days at 24 px/day.
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 108, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 108, clientY: 100 });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+
+    it("still fires onItemPress for a plain click when drag is enabled", () => {
+      const onItemMove = vi.fn();
+      const onItemPress = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} onItemPress={onItemPress} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 100, clientY: 100 });
+      fireEvent.click(bar);
+
+      expect(onItemPress).toHaveBeenCalledTimes(1);
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+
+    it("cancels an in-flight drag with Escape", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.keyDown(window, { key: "Escape" });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("keyboard rescheduling", () => {
+    it("ArrowRight moves the focused bar 1 day later and announces the range", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      fireEvent.keyDown(container.querySelector('[data-gantt-bar="t1"]') as Element, {
+        key: "ArrowRight",
+      });
+      expect(onItemMove).toHaveBeenCalledTimes(1);
+      const [task, span] = onItemMove.mock.calls[0];
+      expect(task.id).toBe("t1");
+      expect(span.start).toEqual(mar(11));
+      expect(span.end).toEqual(mar(13));
+      // aria-live announcement carries the task title and the new range.
+      const live = document.querySelector('[data-gantt-live="true"]');
+      expect(live?.getAttribute("aria-live")).toBe("assertive");
+      expect(live?.textContent).toContain("Design review");
+      expect(live?.textContent).toContain(formatSpanLabel(span));
+    });
+
+    it("ArrowLeft moves 1 day earlier; Shift+Arrow moves 7 days", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.keyDown(bar, { key: "ArrowLeft" });
+      expect(onItemMove.mock.calls[0][1].start).toEqual(mar(9));
+      expect(onItemMove.mock.calls[0][1].end).toEqual(mar(11));
+
+      fireEvent.keyDown(bar, { key: "ArrowRight", shiftKey: true });
+      expect(onItemMove.mock.calls[1][1].start).toEqual(mar(17));
+      expect(onItemMove.mock.calls[1][1].end).toEqual(mar(19));
+
+      fireEvent.keyDown(bar, { key: "ArrowLeft", shiftKey: true });
+      expect(onItemMove.mock.calls[2][1].start).toEqual(mar(3));
+      expect(onItemMove.mock.calls[2][1].end).toEqual(mar(5));
+    });
+
+    it("ignores arrows when rescheduling is disabled", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} enableItemDrag={false} />,
+      );
+      fireEvent.keyDown(container.querySelector('[data-gantt-bar="t1"]') as Element, {
+        key: "ArrowRight",
+      });
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("bar resize (web pointer)", () => {
+    it("dragging the end handle extends the end only, snapped to whole days", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const handle = container.querySelector(
+        '[data-gantt-bar="t1"] [data-gantt-resize-handle="end"]',
+      ) as Element;
+      expect(handle).toBeTruthy();
+
+      // Default medium size at week zoom = 24 px/day → +48px = +2 days.
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      expect(onItemMove).toHaveBeenCalledTimes(1);
+      const [task, span] = onItemMove.mock.calls[0];
+      expect(task.id).toBe("t1");
+      expect(span.start).toEqual(mar(10));
+      expect(span.end).toEqual(mar(14));
+    });
+
+    it("dragging the start handle moves the start only", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const handle = container.querySelector(
+        '[data-gantt-bar="t1"] [data-gantt-resize-handle="start"]',
+      ) as Element;
+
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 52, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 52, clientY: 100 });
+
+      const [, span] = onItemMove.mock.calls[0];
+      expect(span.start).toEqual(mar(8));
+      expect(span.end).toEqual(mar(12));
+    });
+
+    it("clamps a start resize so one inclusive day survives", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const handle = container.querySelector(
+        '[data-gantt-bar="t1"] [data-gantt-resize-handle="start"]',
+      ) as Element;
+
+      // +240px would be +10 days, but t1 spans 3 inclusive days → clamp +2.
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 340, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 340, clientY: 100 });
+
+      const [, span] = onItemMove.mock.calls[0];
+      expect(span.start).toEqual(mar(12));
+      expect(span.end).toEqual(mar(12));
+    });
+
+    it("does not fire for a zero-day snapped resize", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const handle = container.querySelector(
+        '[data-gantt-bar="t1"] [data-gantt-resize-handle="end"]',
+      ) as Element;
+
+      // 8px activates the session but rounds to 0 days at 24 px/day.
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 108, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 108, clientY: 100 });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+
+    it("cancels an in-flight resize with Escape", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const handle = container.querySelector(
+        '[data-gantt-bar="t1"] [data-gantt-resize-handle="end"]',
+      ) as Element;
+
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.keyDown(window, { key: "Escape" });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("RTL delta inversion (useDirection)", () => {
+    beforeEach(() => {
+      document.documentElement.setAttribute("dir", "rtl");
+    });
+    afterEach(() => {
+      document.documentElement.removeAttribute("dir");
+    });
+
+    it("ArrowRight moves the bar EARLIER under RTL", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      fireEvent.keyDown(container.querySelector('[data-gantt-bar="t1"]') as Element, {
+        key: "ArrowRight",
+      });
+      const [, span] = onItemMove.mock.calls[0];
+      expect(span.start).toEqual(mar(9));
+      expect(span.end).toEqual(mar(11));
+    });
+
+    it("a rightward pointer drag moves the bar EARLIER under RTL", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      const [, span] = onItemMove.mock.calls[0];
+      expect(span.start).toEqual(mar(8));
+      expect(span.end).toEqual(mar(10));
+    });
+
+    it("the physical-left handle is the END edge under RTL and inverts its delta", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as HTMLElement;
+      const handles = bar.querySelectorAll("[data-gantt-resize-handle]");
+      // Render order: physical-left first — mapped to the logical end edge.
+      expect((handles[0] as HTMLElement).getAttribute("data-gantt-resize-handle")).toBe("end");
+
+      // Physical leftward drag (-48px) = +2 logical days in RTL.
+      fireEvent.pointerDown(handles[0] as Element, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 52, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 52, clientY: 100 });
+
+      const [, span] = onItemMove.mock.calls[0];
+      expect(span.start).toEqual(mar(10));
+      expect(span.end).toEqual(mar(14));
+    });
+  });
+
+  describe("pinned axis header", () => {
+    it("keeps the axis outside the vertical scroller; labels and rows share it", () => {
+      const { container } = renderWithProviders(<GanttView tasks={tasks} />);
+      // Axis lives in the pinned row above the body scroller.
+      expect(
+        container.querySelector('[data-gantt-axis-row="true"] [data-gantt-axis="week"]'),
+      ).toBeTruthy();
+      expect(
+        container.querySelector('[data-gantt-scroll-body="true"] [data-gantt-axis]'),
+      ).toBeNull();
+      // The alignment invariant: label column and rows stay in ONE scroller.
+      const body = container.querySelector('[data-gantt-scroll-body="true"]') as HTMLElement;
+      expect(body.querySelector('[data-gantt-row-label="t1"]')).toBeTruthy();
+      expect(body.querySelector('[data-gantt-row="t1"]')).toBeTruthy();
+    });
+  });
+
+  describe("honest states (Axiom 6 / W9)", () => {
+    it("renders the empty state when there are no tasks", () => {
+      renderWithProviders(<GanttView tasks={[]} />);
+      expect(document.querySelector('[data-async-state="empty"]')).toBeTruthy();
+      expect(screen.getByText("No tasks")).toBeInTheDocument();
+    });
+
+    it("shows the gantt skeleton while loading with no tasks", () => {
+      renderWithProviders(<GanttView tasks={[]} isLoading />);
+      expect(document.querySelector('[data-gantt-skeleton="true"]')).toBeTruthy();
+      expect(document.querySelector('[data-async-state="empty"]')).toBeNull();
+    });
+
+    it("forbids empty chrome when error is set and retries (DG-ST-01)", () => {
+      const onRetry = vi.fn();
+      renderWithProviders(<GanttView tasks={[]} error="Tasks failed to load" onRetry={onRetry} />);
+      expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+      expect(screen.queryByText("No tasks")).toBeNull();
+      expect(screen.getByText("Tasks failed to load")).toBeInTheDocument();
+      fireEvent.click(screen.getByText("Retry"));
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
+    it("keeps showing stale bars while refreshing with data present", () => {
+      const { container } = renderWithProviders(<GanttView tasks={tasks} isLoading />);
+      expect(container.querySelectorAll("[data-gantt-bar]")).toHaveLength(3);
+      expect(document.querySelector('[data-gantt-skeleton="true"]')).toBeNull();
+    });
+  });
+});