@multiplatform.one/components 6.1.0 → 6.3.0

package/src/views/Gantt.tsx

@@ -0,0 +1,1183 @@
+import { componentColors, sectionHeading } from "../componentColors";
+import { AsyncBoundary } from "../layouts/AsyncBoundary";
+import { Skeleton } from "../Skeleton";
+import { ViewSwitcher } from "../layouts/ViewSwitcher";
+import { useDirection } from "../hooks/useDirection";
+import { withInterp } from "../shared/t";
+import { Intent, hairline, hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Button } from "@multiplatform.one/forms";
+import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import {
+  barGeometry,
+  clampResizeDayDelta,
+  computeGanttRange,
+  dateToX,
+  dxToDayDelta,
+  formatRangeLabel,
+  formatSpanLabel,
+  ganttTaskAccessibleLabel,
+  generateTicks,
+  rangeDays,
+  resizeSpanByDays,
+  shiftSpanByDays,
+  spanInclusiveDays,
+  todayLineX,
+  type GanttResizeEdge,
+  type GanttSpan,
+  type GanttZoom,
+} from "./ganttMath";
+
+/**
+ * A Gantt task rendered as one row with a duration bar.
+ */
+export interface GanttTask {
+  /** Unique task identifier */
+  id: string;
+  /** Task title shown in the label column and the bar's accessible name */
+  title: string;
+  /** Task start date */
+  start: Date;
+  /** Task end date (midnight ends are inclusive whole days — Frappe date fields) */
+  end: Date;
+  /**
+   * Explicit bar color (hex/rgb/token). Passes through untouched — the
+   * literal is the value (Axiom 11). Wins over `intent`.
+   */
+  color?: string;
+  /** Semantic bar intent rendered via the theme ramps (LC-05 / LC-27). */
+  intent?: "accent" | "error" | "warning" | "success";
+  /** Any additional data */
+  [key: string]: unknown;
+}
+
+/** New start/end range produced by a bar drag-move. */
+export interface GanttItemMoveRange {
+  start: Date;
+  end: Date;
+}
+
+/**
+ * Props for the generic GanttView component.
+ */
+export interface GanttViewProps extends Omit<YStackProps, "children"> {
+  /** Tasks to display (one row per task) */
+  tasks: GanttTask[];
+  /** Initial zoom level (default: 'week') */
+  zoom?: GanttZoom;
+  /** Called when the zoom level changes via the switcher */
+  onZoomChange?: (zoom: GanttZoom) => void;
+  /** Called when a task bar is pressed */
+  onItemPress?: (task: GanttTask) => void;
+  /**
+   * Called when a bar is rescheduled onto new dates — by a horizontal drag
+   * (whole bar moves, duration preserved), by keyboard arrows on a focused
+   * bar (ArrowLeft/ArrowRight = 1 day, Shift = 7 days), or by an edge-resize
+   * drag (start or end adjusts independently, duration changes; web
+   * pointer only). All paths preserve wall-clock times and snap to whole
+   * days. Web drags use pointer tracking (Escape cancels); native uses the
+   * responder system (best-effort — scroll locks while dragging).
+   */
+  onItemMove?: (task: GanttTask, range: GanttItemMoveRange) => void;
+  /**
+   * Enable bar rescheduling — pointer drag, keyboard arrows, and edge
+   * resize (default: enabled when onItemMove is provided).
+   */
+  enableItemDrag?: boolean;
+  /** Whether data is loading (skeleton shows only while there are no tasks) */
+  isLoading?: boolean;
+  /**
+   * Failed load (DG-ST-01 / W9). Wins over the empty state — never shows
+   * empty chrome.
+   */
+  error?: boolean | string | Error | ReactNode | null;
+  /** Retry handler for the default error UI. */
+  onRetry?: () => void;
+  /** Title for the default empty state */
+  emptyTitle?: string;
+  /** Description for the default empty state */
+  emptyDescription?: string;
+  /** Height of the chart in pixels (default steps with the size knob) */
+  height?: number;
+  /** Width of the task-label column in pixels (default: 180) */
+  labelWidth?: number;
+  /** Show the today line (default: true) */
+  showToday?: boolean;
+  /** Show the "Today" scroll button (default: true) */
+  showNavigation?: boolean;
+  /** Show the zoom-level switcher (default: true) */
+  showZoomSwitcher?: boolean;
+  /** First day of week for week alignment: 0 = Sunday, 1 = Monday (default: 0) */
+  firstDayOfWeek?: 0 | 1;
+  /** Date scrolled into view on mount (defaults to today) */
+  initialDate?: Date;
+}
+
+// ── Interaction constants (gesture recognition, not animation timing) ──
+
+/** Pixels of pointer travel before a press becomes a drag (clicks stay clicks below this). */
+const DRAG_THRESHOLD_PX = 4;
+/** Touch pointers lift after a hold instead of a travel threshold. */
+const TOUCH_LONG_PRESS_MS = 300;
+/** Touch travel allowed before a pending long-press yields to scrolling. */
+const TOUCH_SLOP_PX = 8;
+
+/**
+ * Inline-END hairline rule for the label column edge (same SB-M-1215 pattern
+ * as Calendar/Sidebar: tamagui's RN `borderEndWidth` does not compile to
+ * working CSS on web, so web takes CSS logical props + the low-DPI fallback
+ * class; native takes the RN logical prop).
+ */
+const hairlineEnd = isWeb
+  ? {
+      borderInlineEndWidth: hairlineWidth,
+      borderInlineEndStyle: "solid" as any,
+      className: "mp-hairline-ie",
+    }
+  : { borderEndWidth: hairlineWidth };
+
+// ── Loading skeleton (LC-20: mirrors the real anatomy) ────────
+
+/** Deterministic per-index bar offsets/widths (LC-20: never Math.random). */
+const SKELETON_BARS = [
+  { x: 24, width: 120 },
+  { x: 96, width: 180 },
+  { x: 180, width: 140 },
+  { x: 64, width: 220 },
+  { x: 240, width: 110 },
+] as const;
+
+function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeight: number }) {
+  const { t } = useTranslation();
+  return (
+    <YStack width="100%" aria-busy aria-label={t("Loading")} {...{ "data-gantt-skeleton": "true" }}>
+      <XStack
+        height={rowHeight}
+        alignItems="center"
+        {...hairline.bottom}
+        borderColor="$borderColor"
+      >
+        <XStack width={labelWidth} paddingHorizontal="$3">
+          <Skeleton width={64} height={12} />
+        </XStack>
+        <Skeleton width={220} height={12} />
+      </XStack>
+      {SKELETON_BARS.map((bar, i) => (
+        <XStack
+          key={i}
+          height={rowHeight}
+          alignItems="center"
+          {...hairline.bottom}
+          borderColor={componentColors.divider}
+        >
+          <XStack width={labelWidth} paddingHorizontal="$3">
+            <Skeleton width={i % 2 === 0 ? 96 : 72} height={12} />
+          </XStack>
+          <YStack marginLeft={bar.x}>
+            <Skeleton variant="rounded" width={bar.width} height={Math.max(10, rowHeight - 20)} />
+          </YStack>
+        </XStack>
+      ))}
+    </YStack>
+  );
+}
+
+// ── Bar fill resolution ───────────────────────────────────────
+
+/**
+ * Semantic intents ride their hue sub-theme (`<Intent name>` → `$color9`,
+ * tint-independent, LC-05); the default/accent identity stays on the base
+ * theme's `$accentBackground`. Explicit `color` values pass through
+ * untouched — they are values, not chrome (Axiom 11 / LC-27).
+ */
+function BarIntentWrap({
+  intent,
+  children,
+}: {
+  intent?: GanttTask["intent"];
+  children: ReactNode;
+}) {
+  if (!intent || intent === "accent") return <>{children}</>;
+  return <Intent name={intent}>{children}</Intent>;
+}
+
+// ── GanttView ─────────────────────────────────────────────────
+
+/**
+ * Generic Gantt view: one row per task, a horizontal time axis with
+ * day/week/month zoom levels, duration bars positioned from start/end dates,
+ * and a today line. Bars press to `onItemPress`; with `onItemMove` they drag
+ * horizontally with 1:1 pointer tracking (A-GESTURE), a snapped drop preview
+ * and live date label, and whole-day snapping on release (LC-25: the commit
+ * jump tweens on web). Focused bars also reschedule from the keyboard
+ * (ArrowLeft/ArrowRight = 1 day, Shift+Arrow = 7 days — an aria-live region
+ * announces the new range), and edge handles resize start/end independently
+ * with the same snapped-preview + Escape-cancel semantics (web pointer;
+ * native resize deferred). Loading / empty / error are honest first-class
+ * states (Axiom 6) via AsyncBoundary.
+ *
+ * The time axis stays pinned while rows scroll vertically (labels and rows
+ * share one vertical scroller so alignment is structural); the label column
+ * stays pinned while the canvas scrolls horizontally — the axis strip is a
+ * scroll-follower synchronized with the canvas scroller, which works on web
+ * and native alike.
+ *
+ * Under RTL (`useDirection()`), the timeline mirrors: time flows
+ * right→left, the axis/bars/today line reflect, and drag/keyboard deltas
+ * invert so "toward earlier dates" always matches the visual direction.
+ * Native RTL follows `I18nManager` (best-effort — not device-verified).
+ *
+ * @example
+ * ```tsx
+ * <GanttView
+ *   tasks={tasks}
+ *   zoom="week"
+ *   onItemPress={(task) => openTask(task)}
+ *   onItemMove={(task, range) => reschedule(task, range)}
+ * />
+ * ```
+ */
+export function GanttView({
+  tasks,
+  zoom: initialZoom = "week",
+  onZoomChange,
+  onItemPress,
+  onItemMove,
+  enableItemDrag,
+  isLoading = false,
+  error = null,
+  onRetry,
+  emptyTitle,
+  emptyDescription,
+  height: heightProp,
+  labelWidth = 180,
+  showToday = true,
+  showNavigation = true,
+  showZoomSwitcher = true,
+  firstDayOfWeek = 0,
+  initialDate,
+  ...stackProps
+}: GanttViewProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const [zoom, setZoom] = useState<GanttZoom>(initialZoom);
+
+  // ── Direction (RTL mirrors the canvas; deltas invert) ────────────────────
+  const rtl = useDirection() === "rtl";
+  // Physical→logical sign: +1 physical-right is "later" in LTR, "earlier" in RTL.
+  const dirSign = rtl ? -1 : 1;
+  const dirSignRef = useRef(dirSign);
+  dirSignRef.current = dirSign;
+  /** Mirror an LTR canvas offset: same value anchored from the other edge. */
+  const canvasPos = useCallback((x: number) => (rtl ? { right: x } : { left: x }), [rtl]);
+
+  // Keyboard-reschedule announcements (Kanban/TreeView announcer pattern).
+  const [announcement, setAnnouncement] = useState("");
+
+  // ── Knob-derived geometry (LC-18: size/space step the density) ──────────
+  const sz = knobProps.sizeToken as string;
+  const height = heightProp ?? (sz === "$3" ? 400 : sz === "$5" ? 560 : 480);
+  const rowHeight = sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
+  const axisHeight = sz === "$3" ? 28 : sz === "$5" ? 36 : 32;
+  const pxPerDay =
+    zoom === "day"
+      ? sz === "$3"
+        ? 48
+        : sz === "$5"
+          ? 80
+          : 64
+      : zoom === "week"
+        ? sz === "$3"
+          ? 18
+          : sz === "$5"
+            ? 30
+            : 24
+        : sz === "$3"
+          ? 6
+          : sz === "$5"
+            ? 10
+            : 8;
+  const space = knobProps.space;
+  const barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
+  const barHeight = Math.max(10, rowHeight - barInset * 2);
+  const transition = knobProps.transition;
+  // Layout props (left) only tween on web — the RN driver cannot animate
+  // layout, so native keeps committed jumps instant (Axiom 4 note).
+  const webLayoutTransition = isWeb ? transition : undefined;
+
+  // ── Chart range + axis ───────────────────────────────────────────────────
+  const spans = useMemo<GanttSpan[]>(
+    () => tasks.map((task) => ({ start: task.start, end: task.end })),
+    [tasks],
+  );
+  const range = useMemo(
+    () => computeGanttRange(spans, zoom, new Date(), firstDayOfWeek),
+    [spans, zoom, firstDayOfWeek],
+  );
+  const chartWidth = rangeDays(range) * pxPerDay;
+  const ticks = useMemo(
+    () => generateTicks(range, zoom, pxPerDay, firstDayOfWeek),
+    [range, zoom, pxPerDay, firstDayOfWeek],
+  );
+  const todayX = showToday ? todayLineX(range, pxPerDay) : null;
+  const rangeLabel = useMemo(() => formatRangeLabel(range), [range]);
+
+  const changeZoom = useCallback(
+    (next: GanttZoom) => {
+      setZoom(next);
+      onZoomChange?.(next);
+    },
+    [onZoomChange],
+  );
+
+  // ── Scroll-to-date (mount + Today button) + pinned-axis sync ─────────────
+  const hScrollRef = useRef<any>(null);
+  const axisScrollRef = useRef<any>(null);
+  const canvasViewportRef = useRef<number | null>(null);
+  // RTL initial anchor needs the viewport width; re-run once layout reports it.
+  const pendingRtlAnchorRef = useRef<Date | null>(null);
+
+  const scrollToDate = useCallback(
+    (date: Date, animated: boolean) => {
+      const ltrX = Math.max(0, dateToX(date, range.start, pxPerDay) - labelWidth);
+      let x = ltrX;
+      if (rtl) {
+        // Mirrored canvas: the anchor sits `ltrX` from the content's END.
+        const viewport = canvasViewportRef.current;
+        if (viewport === null) pendingRtlAnchorRef.current = date;
+        const max = Math.max(0, chartWidth - (viewport ?? 0));
+        x = Math.min(max, Math.max(0, max - ltrX));
+      }
+      hScrollRef.current?.scrollTo?.({ x, animated });
+      // Keep the pinned axis strip in step even where programmatic scrolls
+      // don't emit onScroll.
+      axisScrollRef.current?.scrollTo?.({ x, animated: false });
+    },
+    [range.start, pxPerDay, labelWidth, rtl, chartWidth],
+  );
+  const scrollToDateRef = useRef(scrollToDate);
+  scrollToDateRef.current = scrollToDate;
+
+  useEffect(() => {
+    // Land near the interesting period instead of the padded range start.
+    scrollToDateRef.current(initialDate ?? new Date(), false);
+    // Re-anchor when the scale changes (zoom flip re-lays the whole canvas)
+    // or the direction flips (the whole canvas mirrors).
+  }, [zoom, initialDate, rtl]);
+
+  /** Canvas scroll drives the pinned axis strip (follower is not scrollable). */
+  const handleCanvasScroll = useCallback((event: any) => {
+    const x = event?.nativeEvent?.contentOffset?.x ?? 0;
+    axisScrollRef.current?.scrollTo?.({ x, animated: false });
+  }, []);
+
+  const handleCanvasLayout = useCallback((event: any) => {
+    const width = event?.nativeEvent?.layout?.width;
+    if (typeof width !== "number") return;
+    canvasViewportRef.current = width;
+    const pending = pendingRtlAnchorRef.current;
+    if (pending) {
+      pendingRtlAnchorRef.current = null;
+      scrollToDateRef.current(pending, false);
+    }
+  }, []);
+
+  // ── Bar drag (web pointer session / native responder) ────────────────────
+  const dragEnabled = (enableItemDrag ?? onItemMove !== undefined) && onItemMove !== undefined;
+  const hasDom = isWeb && typeof window !== "undefined" && typeof document !== "undefined";
+  const webDragEnabled = dragEnabled && hasDom;
+  const nativeDragEnabled = dragEnabled && !isWeb;
+
+  const [drag, setDrag] = useState<{ id: string; dx: number; dayDelta: number } | null>(null);
+  // Edge-resize session (web pointer only): logicalDx is clamped so the bar
+  // never shrinks below one inclusive day.
+  const [resize, setResize] = useState<{
+    id: string;
+    edge: GanttResizeEdge;
+    logicalDx: number;
+    dayDelta: number;
+  } | null>(null);
+  // Set after a drag ends so the trailing click doesn't fire onItemPress.
+  const suppressClickRef = useRef(false);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+  const nativeSessionRef = useRef<{
+    task: GanttTask;
+    startX: number;
+    dragging: boolean;
+    liftTimer: ReturnType<typeof setTimeout> | null;
+  } | null>(null);
+
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+
+  const suppressNextClick = useCallback(() => {
+    suppressClickRef.current = true;
+    setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+  }, []);
+
+  const commitDrag = useCallback(
+    (task: GanttTask, dayDelta: number) => {
+      if (dayDelta !== 0) {
+        onItemMove?.(task, shiftSpanByDays({ start: task.start, end: task.end }, dayDelta));
+      }
+    },
+    [onItemMove],
+  );
+
+  // Web: window-level pointer session with travel threshold (mouse/pen) or
+  // long-press (touch) activation and Escape cancellation — the Calendar
+  // view's session contract, reduced to a single horizontal axis.
+  const handleBarPointerDown = useCallback(
+    (
+      task: GanttTask,
+      e: {
+        button?: number;
+        clientX: number;
+        clientY: number;
+        pointerType?: string;
+        stopPropagation?: () => void;
+      },
+    ) => {
+      if (!webDragEnabled) return;
+      if (e.button !== undefined && e.button !== 0) return;
+      e.stopPropagation?.();
+      dragCleanupRef.current?.();
+
+      const isTouch = e.pointerType === "touch";
+      const startX = e.clientX;
+      const startY = e.clientY;
+      let active = false;
+      let ended = false;
+      let liftArmed = !isTouch;
+      let prevUserSelect = "";
+      let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+      // Pointer dx is physical; the day delta is logical (inverts under RTL).
+      const toDayDelta = (dx: number) => dirSignRef.current * dxToDayDelta(dx, pxPerDay);
+
+      const activate = (dx: number) => {
+        if (active) return;
+        active = true;
+        prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = "none";
+        setDrag({ id: task.id, dx, dayDelta: toDayDelta(dx) });
+      };
+
+      const teardown = () => {
+        if (ended) return;
+        ended = true;
+        if (longPressTimer) clearTimeout(longPressTimer);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("keydown", onKey, true);
+        if (active) document.body.style.userSelect = prevUserSelect;
+        setDrag(null);
+        dragCleanupRef.current = null;
+      };
+
+      const onMove = (me: PointerEvent) => {
+        const dx = me.clientX - startX;
+        if (!active) {
+          const travel = Math.hypot(me.clientX - startX, me.clientY - startY);
+          if (isTouch && !liftArmed) {
+            // Still waiting on the long press — a real swipe yields to scrolling.
+            if (travel > TOUCH_SLOP_PX) teardown();
+            return;
+          }
+          if (travel < DRAG_THRESHOLD_PX) return;
+          activate(dx);
+          return;
+        }
+        setDrag({ id: task.id, dx, dayDelta: toDayDelta(dx) });
+      };
+
+      const onUp = (ue: PointerEvent) => {
+        const wasActive = active;
+        const dayDelta = toDayDelta(ue.clientX - startX);
+        teardown();
+        if (!wasActive) return;
+        suppressNextClick();
+        commitDrag(task, dayDelta);
+      };
+
+      const onKey = (ke: KeyboardEvent) => {
+        if (ke.key !== "Escape" || !active) return;
+        ke.stopPropagation();
+        teardown();
+        // Escape cancel: pointer is still down — keep suppressing until release.
+        suppressClickRef.current = true;
+        window.addEventListener(
+          "pointerup",
+          () =>
+            setTimeout(() => {
+              suppressClickRef.current = false;
+            }, 0),
+          { once: true },
+        );
+      };
+
+      if (isTouch) {
+        longPressTimer = setTimeout(() => {
+          liftArmed = true;
+          activate(0);
+        }, TOUCH_LONG_PRESS_MS);
+      }
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("keydown", onKey, true);
+      dragCleanupRef.current = teardown;
+    },
+    [webDragEnabled, pxPerDay, commitDrag, suppressNextClick],
+  );
+
+  // Native: responder-based horizontal drag. The move is a pure dx→dayDelta
+  // mapping (no hit-testing needed), so this is a full best-effort path —
+  // scroll locks once the drag activates.
+  const handleNativeGrant = useCallback(
+    (task: GanttTask, e: { nativeEvent?: { pageX?: number } }) => {
+      if (!nativeDragEnabled) return;
+      // Long-press lift (Kanban/Calendar parity): a stationary hold arms the
+      // drag and locks scroll BEFORE any movement, because on iOS the
+      // ScrollView's pan gesture is recognized natively and would win any
+      // move-threshold race against the JS responder system.
+      const session = {
+        task,
+        startX: e.nativeEvent?.pageX ?? 0,
+        dragging: false,
+        liftTimer: null as ReturnType<typeof setTimeout> | null,
+      };
+      session.liftTimer = setTimeout(() => {
+        session.liftTimer = null;
+        if (nativeSessionRef.current !== session) return;
+        session.dragging = true;
+        setDrag({ id: task.id, dx: 0, dayDelta: 0 });
+      }, TOUCH_LONG_PRESS_MS);
+      nativeSessionRef.current = session;
+    },
+    [nativeDragEnabled],
+  );
+
+  const handleNativeMove = useCallback(
+    (e: { nativeEvent?: { pageX?: number } }) => {
+      const session = nativeSessionRef.current;
+      if (!session) return;
+      const dx = (e.nativeEvent?.pageX ?? 0) - session.startX;
+      if (!session.dragging) {
+        // Pre-lift movement = scroll intent: cancel the pending lift and yield
+        // (the termination request then returns true, freeing the ScrollView).
+        if (Math.abs(dx) >= TOUCH_SLOP_PX) {
+          if (session.liftTimer) clearTimeout(session.liftTimer);
+          nativeSessionRef.current = null;
+        }
+        return;
+      }
+      setDrag({
+        id: session.task.id,
+        dx,
+        dayDelta: dirSignRef.current * dxToDayDelta(dx, pxPerDay),
+      });
+    },
+    [pxPerDay],
+  );
+
+  const handleNativeRelease = useCallback(
+    (e: { nativeEvent?: { pageX?: number } }) => {
+      const session = nativeSessionRef.current;
+      nativeSessionRef.current = null;
+      if (!session) return;
+      if (session.liftTimer) clearTimeout(session.liftTimer);
+      if (!session.dragging) {
+        // Treat as a tap — responders steal onPress when drag is enabled.
+        onItemPress?.(session.task);
+        return;
+      }
+      const dayDelta =
+        dirSignRef.current * dxToDayDelta((e.nativeEvent?.pageX ?? 0) - session.startX, pxPerDay);
+      setDrag(null);
+      commitDrag(session.task, dayDelta);
+    },
+    [onItemPress, pxPerDay, commitDrag],
+  );
+
+  const handleNativeTerminate = useCallback(() => {
+    const session = nativeSessionRef.current;
+    if (session?.liftTimer) clearTimeout(session.liftTimer);
+    nativeSessionRef.current = null;
+    setDrag(null);
+  }, []);
+
+  // Web edge-resize session: same activation threshold, Escape-cancel, and
+  // snapped-preview semantics as the move drag (LC-25 — the live edge tracks
+  // the pointer 1:1, the preview shows the whole-day commit). Native resize
+  // is deferred (handles render on web only).
+  const handleResizePointerDown = useCallback(
+    (
+      task: GanttTask,
+      edge: GanttResizeEdge,
+      e: {
+        button?: number;
+        clientX: number;
+        clientY: number;
+        stopPropagation?: () => void;
+      },
+    ) => {
+      if (!webDragEnabled) return;
+      if (e.button !== undefined && e.button !== 0) return;
+      // A handle press must not start a whole-bar move session.
+      e.stopPropagation?.();
+      dragCleanupRef.current?.();
+
+      const span: GanttSpan = { start: task.start, end: task.end };
+      const maxShrinkPx = (spanInclusiveDays(span) - 1) * pxPerDay;
+      const startX = e.clientX;
+      const sign = dirSignRef.current;
+      let active = false;
+      let ended = false;
+      let prevUserSelect = "";
+
+      const clampLogicalDx = (dx: number) => {
+        const logicalDx = dx * sign;
+        return edge === "start"
+          ? Math.min(logicalDx, maxShrinkPx)
+          : Math.max(logicalDx, -maxShrinkPx);
+      };
+
+      const toDayDelta = (dx: number) =>
+        clampResizeDayDelta(span, edge, dxToDayDelta(clampLogicalDx(dx), pxPerDay));
+
+      const teardown = () => {
+        if (ended) return;
+        ended = true;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("keydown", onKey, true);
+        if (active) document.body.style.userSelect = prevUserSelect;
+        setResize(null);
+        dragCleanupRef.current = null;
+      };
+
+      const onMove = (me: PointerEvent) => {
+        const dx = me.clientX - startX;
+        if (!active) {
+          if (Math.abs(dx) < DRAG_THRESHOLD_PX) return;
+          active = true;
+          prevUserSelect = document.body.style.userSelect;
+          document.body.style.userSelect = "none";
+        }
+        setResize({ id: task.id, edge, logicalDx: clampLogicalDx(dx), dayDelta: toDayDelta(dx) });
+      };
+
+      const onUp = (ue: PointerEvent) => {
+        const wasActive = active;
+        const dayDelta = toDayDelta(ue.clientX - startX);
+        teardown();
+        if (!wasActive) return;
+        suppressNextClick();
+        if (dayDelta !== 0) {
+          onItemMove?.(task, resizeSpanByDays(span, edge, dayDelta));
+        }
+      };
+
+      const onKey = (ke: KeyboardEvent) => {
+        if (ke.key !== "Escape" || !active) return;
+        ke.stopPropagation();
+        teardown();
+        // Escape cancel: pointer is still down — keep suppressing until release.
+        suppressClickRef.current = true;
+        window.addEventListener(
+          "pointerup",
+          () =>
+            setTimeout(() => {
+              suppressClickRef.current = false;
+            }, 0),
+          { once: true },
+        );
+      };
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("keydown", onKey, true);
+      dragCleanupRef.current = teardown;
+    },
+    [webDragEnabled, pxPerDay, onItemMove, suppressNextClick],
+  );
+
+  const getBarDragProps = useCallback(
+    (task: GanttTask): Record<string, unknown> => {
+      if (webDragEnabled) {
+        return { onPointerDown: (e: any) => handleBarPointerDown(task, e) };
+      }
+      if (nativeDragEnabled) {
+        return {
+          // Claim the touch so moves continue outside the bar (ScrollView-safe once dragging).
+          onStartShouldSetResponder: () => true,
+          onMoveShouldSetResponder: () => true,
+          onResponderTerminationRequest: () => !nativeSessionRef.current?.dragging,
+          onResponderGrant: (e: any) => handleNativeGrant(task, e),
+          onResponderMove: handleNativeMove,
+          onResponderRelease: handleNativeRelease,
+          onResponderTerminate: handleNativeTerminate,
+        };
+      }
+      return {};
+    },
+    [
+      webDragEnabled,
+      nativeDragEnabled,
+      handleBarPointerDown,
+      handleNativeGrant,
+      handleNativeMove,
+      handleNativeRelease,
+      handleNativeTerminate,
+    ],
+  );
+
+  // ── Keyboard rescheduling (focused bar, discrete jumps — LC-25) ──────────
+  const handleBarKeyboardMove = useCallback(
+    (task: GanttTask, key: "ArrowLeft" | "ArrowRight", shiftKey: boolean) => {
+      const physical = key === "ArrowRight" ? 1 : -1;
+      // Physical arrow direction maps to a logical day delta (inverts in RTL).
+      const dayDelta = physical * dirSignRef.current * (shiftKey ? 7 : 1);
+      const next = shiftSpanByDays({ start: task.start, end: task.end }, dayDelta);
+      onItemMove?.(task, next);
+      setAnnouncement(
+        withInterp(t("{{title}} moved to {{range}}"), {
+          title: task.title,
+          range: formatSpanLabel(next),
+        }),
+      );
+    },
+    [onItemMove, t],
+  );
+
+  // ── Bar rendering ─────────────────────────────────────────────────────────
+  const renderBar = (task: GanttTask) => {
+    const geom = barGeometry(task, range.start, pxPerDay);
+    const activeDrag = drag && drag.id === task.id ? drag : null;
+    const dragging = activeDrag !== null;
+    const activeResize = resize && resize.id === task.id ? resize : null;
+    const resizing = activeResize !== null;
+    const sessionLive = dragging || resizing;
+    const dayDelta = activeDrag?.dayDelta ?? activeResize?.dayDelta ?? 0;
+    const span: GanttSpan = { start: task.start, end: task.end };
+    const previewSpan = activeDrag
+      ? shiftSpanByDays(span, dayDelta)
+      : activeResize
+        ? resizeSpanByDays(span, activeResize.edge, activeResize.dayDelta)
+        : null;
+    const previewGeom = previewSpan ? barGeometry(previewSpan, range.start, pxPerDay) : null;
+    // Live geometry: a move rides a pure transform; a resize tracks the
+    // dragged edge 1:1 (the opposite edge stays put in both directions).
+    const liveWidth = activeResize
+      ? Math.max(
+          6,
+          activeResize.edge === "end"
+            ? geom.width + activeResize.logicalDx
+            : geom.width - activeResize.logicalDx,
+        )
+      : geom.width;
+    const liveTransformX = activeDrag
+      ? activeDrag.dx
+      : activeResize && activeResize.edge === "start"
+        ? activeResize.logicalDx * dirSign
+        : 0;
+    const fill =
+      task.color ?? (task.intent && task.intent !== "accent" ? "$color9" : "$accentBackground");
+    // Edge handles map physical sides to logical edges (mirrored under RTL).
+    const handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
+    const physicalLeftEdge: GanttResizeEdge = rtl ? "end" : "start";
+    const physicalRightEdge: GanttResizeEdge = rtl ? "start" : "end";
+
+    return (
+      <BarIntentWrap key={task.id} intent={task.color ? undefined : task.intent}>
+        {/* Snapped drop preview (the raw bar tracks the pointer 1:1). */}
+        {sessionLive && dayDelta !== 0 && previewGeom && (
+          <YStack
+            position="absolute"
+            {...canvasPos(previewGeom.x)}
+            width={previewGeom.width}
+            top={barInset}
+            height={barHeight}
+            {...knobProps.borderRadius}
+            borderWidth={1}
+            borderColor="$accentColor"
+            backgroundColor="$accentBackground"
+            opacity={0.25}
+            pointerEvents="none"
+            {...{ "data-gantt-drop-preview": task.id }}
+          />
+        )}
+        <YStack
+          position="absolute"
+          {...canvasPos(geom.x)}
+          width={liveWidth}
+          top={barInset}
+          height={barHeight}
+          x={liveTransformX}
+          zIndex={sessionLive ? 3 : 1}
+          {...knobProps.borderRadius}
+          backgroundColor={fill as any}
+          opacity={sessionLive ? 0.85 : 1}
+          hoverStyle={{ opacity: sessionLive ? 0.85 : 0.9 }}
+          pressStyle={{ opacity: 0.8 }}
+          cursor={webDragEnabled ? "grab" : onItemPress ? "pointer" : undefined}
+          // LC-25: committed/reverted geometry jumps tween on web; the live
+          // drag/resize tracking stays 1:1 (no transition while the session
+          // is live).
+          transition={(sessionLive ? undefined : webLayoutTransition) as any}
+          role="button"
+          tabIndex={0}
+          aria-label={ganttTaskAccessibleLabel(task)}
+          outlineWidth={0}
+          focusVisibleStyle={{
+            outlineWidth: 2,
+            outlineColor: "$accentColor",
+            outlineStyle: "solid",
+            outlineOffset: 1,
+          }}
+          onKeyDown={
+            ((ke: any) => {
+              if (ke.key === "Enter" || ke.key === " ") {
+                ke.preventDefault?.();
+                ke.stopPropagation?.();
+                onItemPress?.(task);
+                return;
+              }
+              if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled) {
+                ke.preventDefault?.();
+                ke.stopPropagation?.();
+                handleBarKeyboardMove(task, ke.key, ke.shiftKey === true);
+              }
+            }) as any
+          }
+          {...{ "data-gantt-bar": task.id }}
+          {...(nativeDragEnabled ? null : getBarDragProps(task))}
+          // Native drag responders own the tap → press is handled on release.
+          onPress={
+            nativeDragEnabled
+              ? undefined
+              : (e) => {
+                  (e as any)?.stopPropagation?.();
+                  if (suppressClickRef.current) return;
+                  onItemPress?.(task);
+                }
+          }
+        >
+          {/* Live date label while dragging (honest preview of the commit). */}
+          {previewSpan && (
+            <XStack
+              position="absolute"
+              top={-(axisHeight - 6)}
+              {...(rtl ? { right: 0 } : { left: 0 })}
+              backgroundColor="$background"
+              {...knobProps.borderRadius}
+              borderWidth={1}
+              borderColor="$borderColor"
+              paddingHorizontal="$2"
+              pointerEvents="none"
+              zIndex={4}
+              {...{ "data-gantt-drag-label": "true" }}
+            >
+              <Text fontSize="$1" color="$color" numberOfLines={1}>
+                {formatSpanLabel(previewSpan)}
+              </Text>
+            </XStack>
+          )}
+
+          {/* Edge-resize handles (web pointer; native resize deferred). */}
+          {webDragEnabled && handleWidth > 0 && (
+            <>
+              <YStack
+                position="absolute"
+                left={0}
+                top={0}
+                bottom={0}
+                width={handleWidth}
+                cursor="ew-resize"
+                onPointerDown={(e: any) => handleResizePointerDown(task, physicalLeftEdge, e)}
+                {...{ "data-gantt-resize-handle": physicalLeftEdge }}
+              />
+              <YStack
+                position="absolute"
+                right={0}
+                top={0}
+                bottom={0}
+                width={handleWidth}
+                cursor="ew-resize"
+                onPointerDown={(e: any) => handleResizePointerDown(task, physicalRightEdge, e)}
+                {...{ "data-gantt-resize-handle": physicalRightEdge }}
+              />
+            </>
+          )}
+
+          {/* Native drag surface: responders live on a plain fill view because
+              the bar's Tamagui pressability would clobber them (Kanban keeps
+              its drag responders off the pressable Card the same way). */}
+          {nativeDragEnabled && (
+            <YStack
+              position="absolute"
+              top={0}
+              left={0}
+              right={0}
+              bottom={0}
+              zIndex={5}
+              {...getBarDragProps(task)}
+            />
+          )}
+        </YStack>
+      </BarIntentWrap>
+    );
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+  const scrollLocked = drag !== null || resize !== null;
+  const majorGridColor = "$borderColor";
+  const minorGridColor = componentColors.divider;
+  // Manual mirroring owns RTL inside the horizontal scrollers: force their
+  // scroll math to LTR so contentOffset.x stays 0-at-content-start on web.
+  const scrollerDirection = { direction: "ltr" as const };
+
+  const showSkeleton = !error && isLoading && tasks.length === 0;
+
+  return (
+    <AsyncBoundary
+      loading={
+        showSkeleton ? <GanttSkeleton labelWidth={labelWidth} rowHeight={rowHeight} /> : false
+      }
+      empty={!error && !isLoading && tasks.length === 0}
+      error={error}
+      onRetry={onRetry}
+      emptyTitle={emptyTitle ?? t("No tasks")}
+      emptyDescription={emptyDescription}
+      {...stackProps}
+    >
+      <YStack
+        height={height}
+        overflow="hidden"
+        backgroundColor="$background"
+        // Panel-tier lift follows the elevation knob (LC-18: the gantt frame
+        // is a themed surface, same as Calendar / Kanban columns).
+        elevation={knobProps.elevation}
+        {...{ "data-gantt-view": zoom }}
+      >
+        {/* Header */}
+        {(showNavigation || showZoomSwitcher) && (
+          <XStack
+            {...knobProps.panelPadding}
+            alignItems="center"
+            justifyContent="space-between"
+            {...knobProps.gap}
+            {...hairline.bottom}
+            borderColor="$borderColor"
+          >
+            {showNavigation && (
+              <Button size={knobProps.sizeToken} onPress={() => scrollToDate(new Date(), true)}>
+                {t("Today")}
+              </Button>
+            )}
+
+            {/* Range title is the panel's section heading — shared scale (LC-17). */}
+            <Text {...knobProps.heading} {...sectionHeading} numberOfLines={1}>
+              {rangeLabel}
+            </Text>
+
+            {showZoomSwitcher && (
+              /* Canonical fused view picker (LC-16 ONE-IMPLEMENTATION). */
+              <ViewSwitcher
+                views={[
+                  { type: "day", label: t("Day") },
+                  { type: "week", label: t("Week") },
+                  { type: "month", label: t("Month") },
+                ]}
+                currentView={zoom}
+                onViewChange={(val) => changeZoom(val as GanttZoom)}
+              />
+            )}
+          </XStack>
+        )}
+
+        {/* Pinned axis row: the "Task" header cell + the time-axis strip stay
+            put while rows scroll vertically. The strip is a scroll-follower
+            of the canvas scroller (works web + native), so the tick grid and
+            bars can never drift apart horizontally. */}
+        <XStack
+          {...hairline.bottom}
+          borderColor="$borderColor"
+          {...{ "data-gantt-axis-row": "true" }}
+        >
+          <XStack
+            width={labelWidth}
+            flexShrink={0}
+            height={axisHeight}
+            alignItems="center"
+            paddingHorizontal="$3"
+            {...hairlineEnd}
+            borderColor="$borderColor"
+            {...{ backgroundColor: componentColors.surface.background }}
+          >
+            <Text
+              {...knobProps.body}
+              fontSize="$2"
+              fontWeight="500"
+              color={componentColors.text.muted}
+              numberOfLines={1}
+            >
+              {t("Task")}
+            </Text>
+          </XStack>
+          <ScrollView
+            ref={axisScrollRef}
+            horizontal
+            flex={1}
+            scrollEnabled={false}
+            showsHorizontalScrollIndicator={false}
+            style={scrollerDirection as any}
+          >
+            <XStack
+              width={chartWidth}
+              height={axisHeight}
+              position="relative"
+              {...{
+                backgroundColor: componentColors.surface.background,
+                "data-gantt-axis": zoom,
+              }}
+            >
+              {ticks
+                .filter((tick) => tick.label)
+                .map((tick) => (
+                  <Text
+                    key={tick.date.toISOString()}
+                    position="absolute"
+                    {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
+                    top={axisHeight / 2 - 8}
+                    fontSize="$1"
+                    color={componentColors.text.muted}
+                    numberOfLines={1}
+                  >
+                    {tick.label}
+                  </Text>
+                ))}
+            </XStack>
+          </ScrollView>
+        </XStack>
+
+        {/* Body: labels + chart share one vertical scroller so rows stay
+            aligned; the chart owns its horizontal scroller so bars never
+            paint past the frame (LC-10). */}
+        <ScrollView flex={1} scrollEnabled={!scrollLocked}>
+          <XStack {...{ "data-gantt-scroll-body": "true" }}>
+            {/* Task label column */}
+            <YStack width={labelWidth} flexShrink={0} {...hairlineEnd} borderColor="$borderColor">
+              {tasks.map((task) => (
+                <XStack
+                  key={task.id}
+                  height={rowHeight}
+                  alignItems="center"
+                  paddingHorizontal="$3"
+                  {...hairline.bottom}
+                  borderColor={minorGridColor}
+                  cursor={onItemPress ? "pointer" : undefined}
+                  hoverStyle={{ backgroundColor: componentColors.surface.background }}
+                  onPress={
+                    onItemPress
+                      ? () => {
+                          if (suppressClickRef.current) return;
+                          onItemPress(task);
+                        }
+                      : undefined
+                  }
+                  {...{ "data-gantt-row-label": task.id }}
+                >
+                  <Text {...knobProps.body} fontSize="$2" numberOfLines={1} color="$color">
+                    {task.title}
+                  </Text>
+                </XStack>
+              ))}
+            </YStack>
+
+            {/* Timeline chart */}
+            <ScrollView
+              ref={hScrollRef}
+              horizontal
+              flex={1}
+              scrollEnabled={!scrollLocked}
+              showsHorizontalScrollIndicator
+              onScroll={handleCanvasScroll}
+              scrollEventThrottle={16}
+              onLayout={handleCanvasLayout}
+              style={scrollerDirection as any}
+            >
+              <YStack width={chartWidth} position="relative" {...{ "data-gantt-chart": "true" }}>
+                {/* Rows + grid + today line */}
+                <YStack position="relative" {...{ "data-gantt-body": "true" }}>
+                  {/* Vertical grid lines (under the rows) */}
+                  {ticks.map((tick) => (
+                    <YStack
+                      key={tick.date.toISOString()}
+                      position="absolute"
+                      {...canvasPos(tick.x)}
+                      top={0}
+                      bottom={0}
+                      width={hairlineWidth}
+                      backgroundColor={tick.major ? majorGridColor : minorGridColor}
+                      pointerEvents="none"
+                    />
+                  ))}
+
+                  {/* Task rows */}
+                  {tasks.map((task) => (
+                    <XStack
+                      key={task.id}
+                      height={rowHeight}
+                      position="relative"
+                      {...hairline.bottom}
+                      borderColor={minorGridColor}
+                      {...{ "data-gantt-row": task.id }}
+                    >
+                      {renderBar(task)}
+                    </XStack>
+                  ))}
+
+                  {/* Today line (above bars, non-interactive) */}
+                  {todayX !== null && (
+                    <YStack
+                      position="absolute"
+                      {...canvasPos(todayX - 1)}
+                      top={0}
+                      bottom={0}
+                      width={2}
+                      backgroundColor="$accentBackground"
+                      opacity={0.9}
+                      pointerEvents="none"
+                      zIndex={2}
+                      {...{ "data-gantt-today": "true" }}
+                    />
+                  )}
+                </YStack>
+              </YStack>
+            </ScrollView>
+          </XStack>
+        </ScrollView>
+
+        {/* Screen-reader announcements for keyboard rescheduling (visually
+            hidden — Kanban/TreeView announcer pattern). */}
+        <YStack
+          position="absolute"
+          width={1}
+          height={1}
+          overflow="hidden"
+          opacity={0}
+          pointerEvents="none"
+          aria-live="assertive"
+          aria-atomic
+          {...{ "data-gantt-live": "true" }}
+        >
+          <Text>{announcement}</Text>
+        </YStack>
+      </YStack>
+    </AsyncBoundary>
+  );
+}