@multiplatform.one/components 7.7.6 → 7.8.0

package/src/views/Gantt.tsx

@@ -8,6 +8,7 @@ import {
   Intent,
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
+  formatAbsoluteDate,
   formatDayOfMonth,
   formatMonthYear,
   hairline,
@@ -27,6 +28,7 @@ import {
   barGeometry,
   clampResizeDayDelta,
   computeGanttRange,
+  dateLineX,
   dateToX,
   dayDiff,
   dxToDayDelta,
@@ -34,12 +36,18 @@ import {
   formatSpanLabel,
   ganttTaskAccessibleLabel,
   generateTicks,
+  isBoundedSpan,
+  openBarGeometry,
+  openSpanExtents,
+  openSpanLabelParts,
   rangeDays,
   resizeSpanByDays,
+  scrollAnchorX,
   shiftSpanByDays,
   spanInclusiveDays,
   startOfDay,
   todayLineX,
+  type GanttOpenSpan,
   type GanttRange,
   type GanttResizeEdge,
   type GanttSpan,
@@ -52,17 +60,39 @@ import {
 const CanvasScroller = (isWeb ? ScrollView : RNScrollView) as typeof ScrollView;
 
 /**
- * A Gantt task rendered as one row with a duration bar.
+ * One drawn span on a Gantt row: a duration bar, or an open-ended one.
+ *
+ * BOTH BOUNDS ARE OPTIONAL, and an absent bound means the span is open at
+ * that end — not that the caller forgot it. Each of the three shapes paints
+ * differently, because a viewer must never read an edge nobody chose:
+ *
+ * | `start` | `end` | drawn as |
+ * |---|---|---|
+ * | set | set | a capped bar between the two dates (inclusive whole days) |
+ * | set | absent | a bar from `start`, uncapped, running off the chart's end edge with a `»` |
+ * | absent | set | a bar to `end`, uncapped, running off the chart's start edge with a `«` |
+ * | absent | absent | a thin half-height RAIL across the whole chart, `«` and `»` at both ends |
+ *
+ * The rail is a different SHAPE on purpose. Painting an eternal span as a
+ * full-width BAR would put two capped edges on screen at the chart's own
+ * padding, and the reader would take that padding for a decision.
+ *
+ * Rescheduling needs both bounds. A span missing either one gets no drag
+ * session, no resize handles and no keyboard moves — there is no second
+ * edge to preserve a duration against. `progress` is likewise ignored on an
+ * open span: a percentage of an unknown duration says nothing.
  */
-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;
+export interface GanttTaskSpan {
+  /**
+   * Stable id, unique within the task. Used as the React key, the drag
+   * session key and the `data-gantt-bar` attribute. Optional: a row's spans
+   * fall back to `<task id>#<index>`.
+   */
+  id?: string;
+  /** Span start date. Absent = open at the start. */
+  start?: Date;
+  /** Span end date (midnight ends are inclusive whole days — Frappe date fields). Absent = open at the end. */
+  end?: Date;
   /**
    * Explicit bar color (hex/rgb/token). Passes through untouched — the
    * literal is the value (Axiom 11). Wins over `intent`.
@@ -72,13 +102,54 @@ export interface GanttTask {
   intent?: "accent" | "error" | "warning" | "success";
   /**
    * Optional completion 0–100. Paints a darker overlay on the bar (Frappe
-   * Gantt / MS Project progress). Omitted or 0 shows an empty bar.
+   * Gantt / MS Project progress). Omitted or 0 shows an empty bar. Ignored
+   * on an open-ended span.
    */
   progress?: number;
+  /** Bar label, when it should differ from the row's title. */
+  title?: string;
+}
+
+/**
+ * A Gantt task rendered as one row.
+ *
+ * The row carries ONE span by default — the task's own `start`/`end`, which
+ * is what every caller before `spans` existed passes — or SEVERAL when
+ * `spans` is set. Several is for one logical subject that ships a variant
+ * per period: three rules named `..._2026`, `..._2027`, `..._2028` are one
+ * emitter and want one row carrying three strips, not three unrelated rows.
+ */
+export interface GanttTask extends GanttTaskSpan {
+  /** Unique task identifier */
+  id: string;
+  /** Task title shown in the label column and the bar's accessible name */
+  title: string;
+  /**
+   * Several spans on this one row. When set and non-empty it REPLACES the
+   * task's own `start`/`end` as the thing drawn; the label column still
+   * shows one row. Leave it off for the one-bar-per-row shape, which is
+   * unchanged in every respect down to the `data-gantt-bar` attribute.
+   */
+  spans?: GanttTaskSpan[];
   /** Any additional data */
   [key: string]: unknown;
 }
 
+/**
+ * Which span of a row a callback is about.
+ *
+ * A single-span row reports `index: 0` and `key: task.id`, so a caller that
+ * never sets `spans` can keep ignoring this argument entirely.
+ */
+export interface GanttSpanRef {
+  /** The span itself — the task object for a single-span row. */
+  span: GanttTaskSpan;
+  /** Position within `task.spans`, or 0 for a single-span row. */
+  index: number;
+  /** Stable key: `span.id`, else `task.id` (single-span) or `<task id>#<index>`. */
+  key: string;
+}
+
 /** New start/end range produced by a bar drag-move. */
 export interface GanttItemMoveRange {
   start: Date;
@@ -105,8 +176,16 @@ export interface GanttViewProps extends Omit<YStackProps, "children"> {
    * 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).
+   *
+   * `span` names WHICH span of a multi-span row moved. A single-span row
+   * reports `{ index: 0, key: task.id }` and the span object IS the task, so
+   * a two-argument handler stays correct and needs no change.
+   *
+   * Only fully-bounded spans reschedule: an open-ended one has no second
+   * edge to hold a duration against, so it is never dragged and this never
+   * fires for it.
    */
-  onItemMove?: (task: GanttTask, range: GanttItemMoveRange) => void;
+  onItemMove?: (task: GanttTask, range: GanttItemMoveRange, span?: GanttSpanRef) => void;
   /**
    * Enable bar rescheduling — pointer drag, keyboard arrows, and edge
    * resize (default: enabled when onItemMove is provided).
@@ -139,6 +218,50 @@ export interface GanttViewProps extends Omit<YStackProps, "children"> {
   firstDayOfWeek?: 0 | 1;
   /** Date scrolled into view on mount (defaults to today) */
   initialDate?: Date;
+  /**
+   * Controlled marker date — a playhead the caller owns.
+   *
+   * Independent of both `showToday`, which pins a line to the real today and
+   * cannot move, and `initialDate`, which only picks the mount scroll
+   * position. Set it and a marker line paints across the axis and the rows
+   * with a grab handle on the axis; leave it unset and nothing renders. The
+   * component never moves it on its own — it draws exactly the date it is
+   * given, which is what makes an as-of view possible.
+   */
+  markerDate?: Date;
+  /**
+   * Called when the marker is scrubbed: drag its axis handle, or focus the
+   * handle and press ArrowLeft/ArrowRight (Shift = 7 days). Fires per whole
+   * day crossed, not per pointer move, and Escape mid-drag fires once more
+   * with the date the drag started from.
+   */
+  onMarkerDateChange?: (date: Date) => void;
+  /**
+   * Enable scrubbing the marker (default: enabled when `onMarkerDateChange`
+   * is provided). A marker with no callback still renders, read-only.
+   */
+  enableMarkerDrag?: boolean;
+  /** Accessible name for the marker handle (default: "Marker"). */
+  markerLabel?: string;
+}
+
+/**
+ * The spans a row draws, in paint order.
+ *
+ * A task with no `spans` IS its own single span and takes the task id as its
+ * key, so every data attribute, drag session and callback on the
+ * one-bar-per-row path is exactly what it was before `spans` existed.
+ */
+/** The span as a closed duration, or null when either bound is open. */
+function boundedSpan(ref: GanttSpanRef): GanttSpan | null {
+  const span = ref.span;
+  return isBoundedSpan(span) ? { start: span.start, end: span.end } : null;
+}
+
+function resolveSpans(task: GanttTask): GanttSpanRef[] {
+  const list = task.spans;
+  if (!list || list.length === 0) return [{ span: task, index: 0, key: task.id }];
+  return list.map((span, index) => ({ span, index, key: span.id ?? `${task.id}#${index}` }));
 }
 
 // ── Interaction constants (gesture recognition, not animation timing) ──
@@ -345,6 +468,15 @@ function GanttTaskName({
  * invert so "toward earlier dates" always matches the visual direction.
  * Native RTL follows `I18nManager` (best-effort — not device-verified).
  *
+ * Three things make it a TRACK view as well as a schedule. A span's bounds
+ * are both optional, and the missing side paints as an uncapped edge (or, with
+ * neither bound, a half-height rail) instead of an invented date. A row can
+ * carry SEVERAL spans via `task.spans`, so one subject that ships a variant
+ * per period reads as one row. And `markerDate` is a controlled playhead the
+ * caller owns — scrubbed by dragging its handle on the axis or by arrows on
+ * the focused handle, reported through `onMarkerDateChange` — independent of
+ * the today line, which stays pinned to the real today.
+ *
  * @example
  * ```tsx
  * <GanttView
@@ -354,6 +486,22 @@ function GanttTaskName({
  *   onItemMove={(task, range) => reschedule(task, range)}
  * />
  * ```
+ *
+ * @example A track view: open-ended spans, several per row, a scrubbed marker.
+ * ```tsx
+ * <GanttView
+ *   tasks={[
+ *     { id: "fed", title: "Federal true-up", spans: [
+ *       { id: "2026", start: jan(2026), end: dec(2026) },
+ *       { id: "2027", start: jan(2027), end: dec(2027) },
+ *     ] },
+ *     { id: "vat", title: "VAT", start: jan(2025) },   // no end: open at the end
+ *     { id: "base", title: "Base policy" },            // no dates: a rail
+ *   ]}
+ *   markerDate={asOf}
+ *   onMarkerDateChange={setAsOf}
+ * />
+ * ```
  */
 export function GanttView({
   tasks,
@@ -374,6 +522,10 @@ export function GanttView({
   showZoomSwitcher = true,
   firstDayOfWeek = 0,
   initialDate,
+  markerDate,
+  onMarkerDateChange,
+  enableMarkerDrag,
+  markerLabel,
   ...stackProps
 }: GanttViewProps) {
   const { t } = useTranslation();
@@ -424,16 +576,26 @@ export function GanttView({
   const space = knobProps.space;
   const barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
   const barHeight = Math.max(10, rowHeight - barInset * 2);
+  // An eternal span is a RAIL, not a bar: half the height, no caps. The
+  // shape is the message — a full-width capped bar would put two chosen-
+  // looking edges on the chart's own padding.
+  const railHeight = Math.max(4, Math.round(barHeight / 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],
-  );
+  // Every span on every row, in one flat list. Open spans contribute only
+  // the date they actually name (an eternal one contributes nothing, so it
+  // cannot stretch the axis), and the marker joins them so it always has
+  // somewhere to land — the same courtesy computeGanttRange pays today.
+  const spans = useMemo<GanttSpan[]>(() => {
+    const flat: GanttOpenSpan[] = [];
+    for (const task of tasks) for (const ref of resolveSpans(task)) flat.push(ref.span);
+    if (markerDate !== undefined) flat.push({ start: markerDate, end: markerDate });
+    return openSpanExtents(flat);
+  }, [tasks, markerDate]);
   const range = useMemo(
     () => computeGanttRange(spans, zoom, new Date(), firstDayOfWeek),
     [spans, zoom, firstDayOfWeek],
@@ -461,20 +623,19 @@ export function GanttView({
   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);
+  // Re-anchor in either direction once the canvas viewport has been measured.
+  const pendingAnchorRef = 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));
-      }
+      const viewportWidth = canvasViewportRef.current;
+      if (viewportWidth === null) pendingAnchorRef.current = date;
+      const x = scrollAnchorX(date, range.start, pxPerDay, {
+        labelWidth,
+        chartWidth,
+        viewportWidth,
+        rtl,
+      });
       hScrollRef.current?.scrollTo?.({ x, animated });
       // Keep the pinned axis strip in step even where programmatic scrolls
       // don't emit onScroll.
@@ -500,11 +661,11 @@ export function GanttView({
 
   const handleCanvasLayout = useCallback((event: any) => {
     const width = event?.nativeEvent?.layout?.width;
-    if (typeof width !== "number") return;
+    if (typeof width !== "number" || !Number.isFinite(width) || width <= 0) return;
     canvasViewportRef.current = width;
-    const pending = pendingRtlAnchorRef.current;
+    const pending = pendingAnchorRef.current;
     if (pending) {
-      pendingRtlAnchorRef.current = null;
+      pendingAnchorRef.current = null;
       scrollToDateRef.current(pending, false);
     }
   }, []);
@@ -515,11 +676,14 @@ export function GanttView({
   const webDragEnabled = dragEnabled && hasDom;
   const nativeDragEnabled = dragEnabled && !isWeb;
 
-  const [drag, setDrag] = useState<{ id: string; dx: number; dayDelta: number } | null>(null);
+  // Sessions key on the SPAN key, not the task id — a row can carry several
+  // spans and only the grabbed one moves. For a single-span row the span key
+  // IS the task id, so this is the same value it always was.
+  const [drag, setDrag] = useState<{ key: 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;
+    key: string;
     edge: GanttResizeEdge;
     logicalDx: number;
     dayDelta: number;
@@ -529,6 +693,8 @@ export function GanttView({
   const dragCleanupRef = useRef<(() => void) | null>(null);
   const nativeSessionRef = useRef<{
     task: GanttTask;
+    ref: GanttSpanRef;
+    span: GanttSpan;
     startX: number;
     dragging: boolean;
     liftTimer: ReturnType<typeof setTimeout> | null;
@@ -544,10 +710,8 @@ export function GanttView({
   }, []);
 
   const commitDrag = useCallback(
-    (task: GanttTask, dayDelta: number) => {
-      if (dayDelta !== 0) {
-        onItemMove?.(task, shiftSpanByDays({ start: task.start, end: task.end }, dayDelta));
-      }
+    (task: GanttTask, ref: GanttSpanRef, span: GanttSpan, dayDelta: number) => {
+      if (dayDelta !== 0) onItemMove?.(task, shiftSpanByDays(span, dayDelta), ref);
     },
     [onItemMove],
   );
@@ -558,6 +722,7 @@ export function GanttView({
   const handleBarPointerDown = useCallback(
     (
       task: GanttTask,
+      ref: GanttSpanRef,
       e: {
         button?: number;
         clientX: number;
@@ -567,6 +732,8 @@ export function GanttView({
       },
     ) => {
       if (!webDragEnabled) return;
+      const span = boundedSpan(ref);
+      if (!span) return;
       if (e.button !== undefined && e.button !== 0) return;
       e.stopPropagation?.();
       dragCleanupRef.current?.();
@@ -588,7 +755,7 @@ export function GanttView({
         active = true;
         prevUserSelect = document.body.style.userSelect;
         document.body.style.userSelect = "none";
-        setDrag({ id: task.id, dx, dayDelta: toDayDelta(dx) });
+        setDrag({ key: ref.key, dx, dayDelta: toDayDelta(dx) });
       };
 
       const teardown = () => {
@@ -616,7 +783,7 @@ export function GanttView({
           activate(dx);
           return;
         }
-        setDrag({ id: task.id, dx, dayDelta: toDayDelta(dx) });
+        setDrag({ key: ref.key, dx, dayDelta: toDayDelta(dx) });
       };
 
       const onUp = (ue: PointerEvent) => {
@@ -625,7 +792,7 @@ export function GanttView({
         teardown();
         if (!wasActive) return;
         suppressNextClick();
-        commitDrag(task, dayDelta);
+        commitDrag(task, ref, span, dayDelta);
       };
 
       const onKey = (ke: KeyboardEvent) => {
@@ -663,14 +830,18 @@ export function GanttView({
   // 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 } }) => {
+    (task: GanttTask, ref: GanttSpanRef, e: { nativeEvent?: { pageX?: number } }) => {
       if (!nativeDragEnabled) return;
+      const span = boundedSpan(ref);
+      if (!span) 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,
+        ref,
+        span,
         startX: e.nativeEvent?.pageX ?? 0,
         dragging: false,
         liftTimer: null as ReturnType<typeof setTimeout> | null,
@@ -679,7 +850,7 @@ export function GanttView({
         session.liftTimer = null;
         if (nativeSessionRef.current !== session) return;
         session.dragging = true;
-        setDrag({ id: task.id, dx: 0, dayDelta: 0 });
+        setDrag({ key: ref.key, dx: 0, dayDelta: 0 });
       }, TOUCH_LONG_PRESS_MS);
       nativeSessionRef.current = session;
     },
@@ -701,7 +872,7 @@ export function GanttView({
         return;
       }
       setDrag({
-        id: session.task.id,
+        key: session.ref.key,
         dx,
         dayDelta: dirSignRef.current * dxToDayDelta(dx, pxPerDay),
       });
@@ -723,7 +894,7 @@ export function GanttView({
       const dayDelta =
         dirSignRef.current * dxToDayDelta((e.nativeEvent?.pageX ?? 0) - session.startX, pxPerDay);
       setDrag(null);
-      commitDrag(session.task, dayDelta);
+      commitDrag(session.task, session.ref, session.span, dayDelta);
     },
     [onItemPress, pxPerDay, commitDrag],
   );
@@ -742,6 +913,7 @@ export function GanttView({
   const handleResizePointerDown = useCallback(
     (
       task: GanttTask,
+      ref: GanttSpanRef,
       edge: GanttResizeEdge,
       e: {
         button?: number;
@@ -751,12 +923,13 @@ export function GanttView({
       },
     ) => {
       if (!webDragEnabled) return;
+      const span = boundedSpan(ref);
+      if (!span) 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;
@@ -793,7 +966,7 @@ export function GanttView({
           prevUserSelect = document.body.style.userSelect;
           document.body.style.userSelect = "none";
         }
-        setResize({ id: task.id, edge, logicalDx: clampLogicalDx(dx), dayDelta: toDayDelta(dx) });
+        setResize({ key: ref.key, edge, logicalDx: clampLogicalDx(dx), dayDelta: toDayDelta(dx) });
       };
 
       const onUp = (ue: PointerEvent) => {
@@ -802,9 +975,7 @@ export function GanttView({
         teardown();
         if (!wasActive) return;
         suppressNextClick();
-        if (dayDelta !== 0) {
-          onItemMove?.(task, resizeSpanByDays(span, edge, dayDelta));
-        }
+        if (dayDelta !== 0) onItemMove?.(task, resizeSpanByDays(span, edge, dayDelta), ref);
       };
 
       const onKey = (ke: KeyboardEvent) => {
@@ -832,9 +1003,12 @@ export function GanttView({
   );
 
   const getBarDragProps = useCallback(
-    (task: GanttTask): Record<string, unknown> => {
+    (task: GanttTask, ref: GanttSpanRef): Record<string, unknown> => {
+      // An open-ended span has no second edge to hold a duration against, so
+      // it gets no session at all rather than a drag that invents one.
+      if (!boundedSpan(ref)) return {};
       if (webDragEnabled) {
-        return { onPointerDown: (e: any) => handleBarPointerDown(task, e) };
+        return { onPointerDown: (e: any) => handleBarPointerDown(task, ref, e) };
       }
       if (nativeDragEnabled) {
         return {
@@ -842,7 +1016,7 @@ export function GanttView({
           onStartShouldSetResponder: () => true,
           onMoveShouldSetResponder: () => true,
           onResponderTerminationRequest: () => !nativeSessionRef.current?.dragging,
-          onResponderGrant: (e: any) => handleNativeGrant(task, e),
+          onResponderGrant: (e: any) => handleNativeGrant(task, ref, e),
           onResponderMove: handleNativeMove,
           onResponderRelease: handleNativeRelease,
           onResponderTerminate: handleNativeTerminate,
@@ -863,15 +1037,17 @@ export function GanttView({
 
   // ── Keyboard rescheduling (focused bar, discrete jumps — LC-25) ──────────
   const handleBarKeyboardMove = useCallback(
-    (task: GanttTask, key: "ArrowLeft" | "ArrowRight", shiftKey: boolean) => {
+    (task: GanttTask, ref: GanttSpanRef, key: "ArrowLeft" | "ArrowRight", shiftKey: boolean) => {
+      const span = boundedSpan(ref);
+      if (!span) return;
       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);
+      const next = shiftSpanByDays(span, dayDelta);
+      onItemMove?.(task, next, ref);
       setAnnouncement(
         withInterp(t("{{title}} moved to {{range}}"), {
-          title: task.title,
+          title: ref.span.title ?? task.title,
           range: formatSpanLabel(next),
         }),
       );
@@ -879,21 +1055,183 @@ export function GanttView({
     [onItemMove, t],
   );
 
+  // ── Controlled marker (a playhead the caller owns) ───────────────────────
+  const markerDragEnabled =
+    (enableMarkerDrag ?? onMarkerDateChange !== undefined) && onMarkerDateChange !== undefined;
+  const [markerDragging, setMarkerDragging] = useState(false);
+  // The date the scrub STARTED from. Every emitted date is that date plus a
+  // whole-day delta, never the last emitted one — otherwise a controlled
+  // caller that applies each scrub would compound its own updates.
+  const markerGrantRef = useRef<Date | null>(null);
+  const markerEmittedRef = useRef<number | null>(null);
+  const markerSessionRef = useRef<{ startX: number } | null>(null);
+
+  /** Emit a whole-day offset from the grant date, once per day crossed. */
+  const emitMarker = useCallback(
+    (dayDelta: number) => {
+      const base = markerGrantRef.current;
+      if (!base) return;
+      const next = addDays(base, dayDelta);
+      if (markerEmittedRef.current === next.getTime()) return;
+      markerEmittedRef.current = next.getTime();
+      onMarkerDateChange?.(next);
+    },
+    [onMarkerDateChange],
+  );
+
+  const openMarkerSession = useCallback(() => {
+    if (markerDate === undefined) return false;
+    const base = startOfDay(markerDate);
+    markerGrantRef.current = base;
+    markerEmittedRef.current = base.getTime();
+    return true;
+  }, [markerDate]);
+
+  // Web: the bar drag's session contract on a single control — travel
+  // threshold, 1:1 tracking, Escape restores the date the drag started from.
+  const handleMarkerPointerDown = useCallback(
+    (e: { button?: number; clientX: number; stopPropagation?: () => void }) => {
+      if (!markerDragEnabled || !hasDom) return;
+      if (e.button !== undefined && e.button !== 0) return;
+      if (!openMarkerSession()) return;
+      e.stopPropagation?.();
+      dragCleanupRef.current?.();
+
+      const startX = e.clientX;
+      let active = false;
+      let ended = false;
+      let prevUserSelect = "";
+      const toDayDelta = (dx: number) => dirSignRef.current * dxToDayDelta(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;
+        setMarkerDragging(false);
+        markerGrantRef.current = 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";
+          setMarkerDragging(true);
+        }
+        emitMarker(toDayDelta(dx));
+      };
+
+      const onUp = () => teardown();
+
+      const onKey = (ke: KeyboardEvent) => {
+        if (ke.key !== "Escape" || !active) return;
+        ke.stopPropagation();
+        emitMarker(0);
+        teardown();
+      };
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("keydown", onKey, true);
+      dragCleanupRef.current = teardown;
+    },
+    [markerDragEnabled, hasDom, openMarkerSession, emitMarker, pxPerDay],
+  );
+
+  // Native: the axis strip does not scroll, so the handle can claim the touch
+  // immediately — no long-press lift to arbitrate against a scroller.
+  const markerNativeProps = useMemo<Record<string, unknown>>(() => {
+    if (!markerDragEnabled || isWeb) return {};
+    return {
+      onStartShouldSetResponder: () => true,
+      onMoveShouldSetResponder: () => true,
+      onResponderTerminationRequest: () => false,
+      onResponderGrant: (e: any) => {
+        if (!openMarkerSession()) return;
+        markerSessionRef.current = { startX: e?.nativeEvent?.pageX ?? 0 };
+        setMarkerDragging(true);
+      },
+      onResponderMove: (e: any) => {
+        const session = markerSessionRef.current;
+        if (!session) return;
+        const dx = (e?.nativeEvent?.pageX ?? 0) - session.startX;
+        emitMarker(dirSignRef.current * dxToDayDelta(dx, pxPerDay));
+      },
+      onResponderRelease: () => {
+        markerSessionRef.current = null;
+        markerGrantRef.current = null;
+        setMarkerDragging(false);
+      },
+      onResponderTerminate: () => {
+        markerSessionRef.current = null;
+        markerGrantRef.current = null;
+        setMarkerDragging(false);
+      },
+    };
+  }, [markerDragEnabled, openMarkerSession, emitMarker, pxPerDay]);
+
+  const handleMarkerKeyboardMove = useCallback(
+    (key: "ArrowLeft" | "ArrowRight", shiftKey: boolean) => {
+      if (!markerDragEnabled || markerDate === undefined) return;
+      const physical = key === "ArrowRight" ? 1 : -1;
+      const dayDelta = physical * dirSignRef.current * (shiftKey ? 7 : 1);
+      const next = addDays(startOfDay(markerDate), dayDelta);
+      markerEmittedRef.current = next.getTime();
+      onMarkerDateChange?.(next);
+      setAnnouncement(
+        withInterp(t("Marker moved to {{date}}"), { date: formatAbsoluteDate(next) }),
+      );
+    },
+    [markerDragEnabled, markerDate, onMarkerDateChange, t],
+  );
+
+  const markerX = markerDate === undefined ? null : dateLineX(range, pxPerDay, markerDate);
+  const markerName = markerLabel ?? t("Marker");
+
   // ── Bar rendering ─────────────────────────────────────────────────────────
-  const renderBar = (task: GanttTask) => {
-    const geom = barGeometry(task, range.start, pxPerDay);
-    const activeDrag = drag && drag.id === task.id ? drag : null;
+
+  /**
+   * The bar's spoken name. Bounded spans keep the exact wording they had
+   * ("Design review, Mar 10 – Mar 12"); the open shapes say which end is
+   * open in words, because "…" is silence to a screen reader.
+   */
+  const spanAccessibleName = (title: string, span: GanttOpenSpan): string => {
+    if (isBoundedSpan(span)) {
+      return ganttTaskAccessibleLabel({ title, start: span.start, end: span.end });
+    }
+    const parts = openSpanLabelParts(span);
+    if (parts.start !== undefined) {
+      return withInterp(t("{{title}}, from {{start}}, no end"), { title, start: parts.start });
+    }
+    if (parts.end !== undefined) {
+      return withInterp(t("{{title}}, until {{end}}, no start"), { title, end: parts.end });
+    }
+    return withInterp(t("{{title}}, always, no dates"), { title });
+  };
+
+  const renderBar = (task: GanttTask, ref: GanttSpanRef) => {
+    const span = ref.span;
+    const barKey = ref.key;
+    const bounded = boundedSpan(ref);
+    const geom = openBarGeometry(span, range, pxPerDay);
+    const activeDrag = drag && drag.key === barKey ? drag : null;
     const dragging = activeDrag !== null;
-    const activeResize = resize && resize.id === task.id ? resize : null;
+    const activeResize = resize && resize.key === barKey ? 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 previewSpan =
+      bounded && activeDrag
+        ? shiftSpanByDays(bounded, dayDelta)
+        : bounded && activeResize
+          ? resizeSpanByDays(bounded, 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).
@@ -910,19 +1248,35 @@ export function GanttView({
       : activeResize && activeResize.edge === "start"
         ? activeResize.logicalDx * dirSign
         : 0;
+    const barColor = span.color ?? task.color;
+    const barIntent = span.intent ?? task.intent;
+    const barTitle = span.title ?? task.title;
     const fill =
-      task.color ?? (task.intent && task.intent !== "accent" ? "$color9" : "$accentBackground");
-    const progress = clampProgress(task.progress);
-    const showLabel = liveWidth >= 44;
-    const isBarFocused = focusedBarId === task.id;
+      barColor ?? (barIntent && barIntent !== "accent" ? "$color9" : "$accentBackground");
+    // Progress is a fraction of a DURATION; an open span has none, so a bar
+    // that claimed 40% of forever would be inventing the denominator.
+    const progress = bounded ? clampProgress(span.progress ?? task.progress) : null;
+    const showLabel = !geom.eternal && liveWidth >= 44;
+    const isBarFocused = focusedBarId === barKey;
     const showHandles = hoveredId === task.id || sessionLive;
     // Edge handles map physical sides to logical edges (mirrored under RTL).
-    const handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
+    const handleWidth = bounded ? (geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0) : 0;
     const physicalLeftEdge: GanttResizeEdge = rtl ? "end" : "start";
     const physicalRightEdge: GanttResizeEdge = rtl ? "start" : "end";
+    // An open END is physically on the right in LTR and on the left in RTL —
+    // the chevron follows the mirror, and so does which glyph it is.
+    const openStartSide = rtl ? { right: 2 } : { left: 2 };
+    const openEndSide = rtl ? { left: 2 } : { right: 2 };
+    const squareStart = rtl
+      ? { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
+      : { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
+    const squareEnd = rtl
+      ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
+      : { borderTopRightRadius: 0, borderBottomRightRadius: 0 };
+    const height = geom.eternal ? railHeight : barHeight;
 
     return (
-      <BarIntentWrap key={task.id} intent={task.color ? undefined : task.intent}>
+      <BarIntentWrap key={barKey} intent={barColor ? undefined : barIntent}>
         {/* Snapped drop preview (the raw bar tracks the pointer 1:1). */}
         {sessionLive && dayDelta !== 0 && previewGeom && (
           <YStack
@@ -937,23 +1291,26 @@ export function GanttView({
             backgroundColor="$accentBackground"
             opacity={0.25}
             pointerEvents="none"
-            {...{ "data-gantt-drop-preview": task.id }}
+            {...{ "data-gantt-drop-preview": barKey }}
           />
         )}
         <YStack
           position="absolute"
           {...canvasPos(geom.x)}
           width={liveWidth}
-          top={barInset}
-          height={barHeight}
+          top={barInset + (barHeight - height) / 2}
+          height={height}
           x={liveTransformX}
           zIndex={sessionLive ? 3 : 1}
           {...knobProps.borderRadius}
+          {...(geom.openStart ? squareStart : null)}
+          {...(geom.openEnd ? squareEnd : null)}
           backgroundColor={fill as any}
-          opacity={sessionLive ? 0.85 : 1}
-          hoverStyle={{ opacity: sessionLive ? 0.85 : 0.9 }}
+          // A rail reads as chrome, not as a duration somebody set.
+          opacity={sessionLive ? 0.85 : geom.eternal ? 0.55 : 1}
+          hoverStyle={{ opacity: sessionLive ? 0.85 : geom.eternal ? 0.7 : 0.9 }}
           pressStyle={{ opacity: 0.8 }}
-          cursor={webDragEnabled ? "grab" : onItemPress ? "pointer" : undefined}
+          cursor={bounded && webDragEnabled ? "grab" : onItemPress ? "pointer" : undefined}
           justifyContent="center"
           // LC-25: committed/reverted geometry jumps tween on web; the live
           // drag/resize tracking stays 1:1 (no transition while the session
@@ -961,15 +1318,15 @@ export function GanttView({
           transition={(sessionLive ? undefined : webLayoutTransition) as any}
           role="button"
           tabIndex={0}
-          aria-label={ganttTaskAccessibleLabel(task)}
+          aria-label={spanAccessibleName(barTitle, span)}
           // LC-71: one ring on the bar (the perceived control), keyboard-only.
           {...(isBarFocused && barKeyboardRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
           onFocus={() => {
-            setFocusedBarId(task.id);
+            setFocusedBarId(barKey);
             setBarKeyboardRing(wasKeyboardFocus());
           }}
           onBlur={() => {
-            setFocusedBarId((id) => (id === task.id ? null : id));
+            setFocusedBarId((id) => (id === barKey ? null : id));
             setBarKeyboardRing(false);
           }}
           // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
@@ -986,18 +1343,24 @@ export function GanttView({
                 onItemPress?.(task);
                 return;
               }
-              if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled) {
+              if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled && bounded) {
                 ke.preventDefault?.();
                 ke.stopPropagation?.();
-                handleBarKeyboardMove(task, ke.key, ke.shiftKey === true);
+                handleBarKeyboardMove(task, ref, ke.key, ke.shiftKey === true);
               }
             }) as any
           }
-          {...{ "data-gantt-bar": task.id }}
-          {...(nativeDragEnabled ? null : getBarDragProps(task))}
+          {...{ "data-gantt-bar": barKey }}
+          {...(geom.eternal ? { "data-gantt-rail": "true" } : null)}
+          {...(geom.openStart || geom.openEnd
+            ? {
+                "data-gantt-span-open": geom.eternal ? "both" : geom.openStart ? "start" : "end",
+              }
+            : null)}
+          {...(nativeDragEnabled ? null : getBarDragProps(task, ref))}
           // Native drag responders own the tap → press is handled on release.
           onPress={
-            nativeDragEnabled
+            nativeDragEnabled && bounded
               ? undefined
               : (e) => {
                   (e as any)?.stopPropagation?.();
@@ -1019,7 +1382,37 @@ export function GanttView({
               {...{ "data-gantt-progress": String(progress) }}
             />
           )}
-          {showLabel && <GanttBarLabel title={task.title} fill={fill} />}
+          {showLabel && <GanttBarLabel title={barTitle} fill={fill} />}
+
+          {/* "This end is not an end" — a mark, never a cap. */}
+          {geom.openStart && (
+            <Text
+              position="absolute"
+              {...openStartSide}
+              {...knobProps.label}
+              color="$color12"
+              opacity={0.75}
+              pointerEvents="none"
+              aria-hidden
+              {...{ "data-gantt-open-start": "true" }}
+            >
+              {rtl ? "»" : "«"}
+            </Text>
+          )}
+          {geom.openEnd && (
+            <Text
+              position="absolute"
+              {...openEndSide}
+              {...knobProps.label}
+              color="$color12"
+              opacity={0.75}
+              pointerEvents="none"
+              aria-hidden
+              {...{ "data-gantt-open-end": "true" }}
+            >
+              {rtl ? "«" : "»"}
+            </Text>
+          )}
 
           {/* Live date label while dragging (honest preview of the commit). */}
           {previewSpan && (
@@ -1054,7 +1447,7 @@ export function GanttView({
                 cursor="ew-resize"
                 backgroundColor={showHandles ? "$color12" : "transparent"}
                 opacity={showHandles ? 0.28 : 0}
-                onPointerDown={(e: any) => handleResizePointerDown(task, physicalLeftEdge, e)}
+                onPointerDown={(e: any) => handleResizePointerDown(task, ref, physicalLeftEdge, e)}
                 {...{ "data-gantt-resize-handle": physicalLeftEdge }}
               />
               <YStack
@@ -1066,7 +1459,7 @@ export function GanttView({
                 cursor="ew-resize"
                 backgroundColor={showHandles ? "$color12" : "transparent"}
                 opacity={showHandles ? 0.28 : 0}
-                onPointerDown={(e: any) => handleResizePointerDown(task, physicalRightEdge, e)}
+                onPointerDown={(e: any) => handleResizePointerDown(task, ref, physicalRightEdge, e)}
                 {...{ "data-gantt-resize-handle": physicalRightEdge }}
               />
             </>
@@ -1075,7 +1468,7 @@ export function GanttView({
           {/* 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 && (
+          {nativeDragEnabled && bounded && (
             <YStack
               position="absolute"
               top={0}
@@ -1083,7 +1476,7 @@ export function GanttView({
               right={0}
               bottom={0}
               zIndex={5}
-              {...getBarDragProps(task)}
+              {...getBarDragProps(task, ref)}
             />
           )}
         </YStack>
@@ -1092,7 +1485,7 @@ export function GanttView({
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
-  const scrollLocked = drag !== null || resize !== null;
+  const scrollLocked = drag !== null || resize !== null || markerDragging;
   const majorGridColor = "$borderColor";
   const minorGridColor = componentColors.divider;
   // Manual mirroring owns RTL inside the horizontal scrollers: force their
@@ -1267,6 +1660,60 @@ export function GanttView({
                 backgroundColor={componentColors.divider}
                 pointerEvents="none"
               />
+              {/* The marker is scrubbed on the AXIS, never on the rows — a
+                  press inside a row stays a press on that bar. */}
+              {markerX !== null && (
+                <>
+                  <YStack
+                    position="absolute"
+                    {...canvasPos(markerX - 1)}
+                    top={0}
+                    bottom={0}
+                    width={2}
+                    backgroundColor="$color12"
+                    opacity={0.9}
+                    pointerEvents="none"
+                  />
+                  <YStack
+                    position="absolute"
+                    {...canvasPos(markerX - 12)}
+                    top={0}
+                    bottom={0}
+                    width={24}
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    zIndex={4}
+                    cursor={markerDragEnabled ? "ew-resize" : undefined}
+                    role="slider"
+                    tabIndex={markerDragEnabled ? 0 : -1}
+                    aria-label={markerName}
+                    aria-valuetext={markerDate ? formatAbsoluteDate(markerDate) : undefined}
+                    {...(markerDragEnabled && hasDom
+                      ? { onPointerDown: (e: any) => handleMarkerPointerDown(e) }
+                      : null)}
+                    {...markerNativeProps}
+                    onKeyDown={
+                      ((ke: any) => {
+                        if (ke.key !== "ArrowLeft" && ke.key !== "ArrowRight") return;
+                        ke.preventDefault?.();
+                        ke.stopPropagation?.();
+                        handleMarkerKeyboardMove(ke.key, ke.shiftKey === true);
+                      }) as any
+                    }
+                    {...{ "data-gantt-marker-handle": "true" }}
+                  >
+                    <YStack
+                      width={11}
+                      height={9}
+                      marginBottom={2}
+                      borderRadius={2}
+                      backgroundColor="$color12"
+                      opacity={markerDragging ? 1 : 0.9}
+                      pointerEvents="none"
+                    />
+                  </YStack>
+                </>
+              )}
             </XStack>
           </ScrollView>
         </XStack>
@@ -1279,9 +1726,13 @@ export function GanttView({
             {/* Task label column */}
             <YStack width={labelWidth} flexShrink={0} {...hairlineEnd} borderColor="$borderColor">
               {tasks.map((task, index) => {
-                const selected = focusedBarId === task.id;
+                const refs = resolveSpans(task);
+                // A row is "selected" when any of ITS spans holds focus — for
+                // a single-span row that is still `focusedBarId === task.id`.
+                const selected = refs.some((ref) => ref.key === focusedBarId);
                 const hovered = hoveredId === task.id;
                 const last = index === tasks.length - 1;
+                const firstKey = refs[0]?.key ?? task.id;
                 return (
                   <XStack
                     key={task.id}
@@ -1308,12 +1759,12 @@ export function GanttView({
                       onItemPress
                         ? () => {
                             if (suppressClickRef.current) return;
-                            setFocusedBarId(task.id);
+                            setFocusedBarId(firstKey);
                             setBarKeyboardRing(false);
                             onItemPress(task);
                           }
                         : () => {
-                            setFocusedBarId(task.id);
+                            setFocusedBarId(firstKey);
                             setBarKeyboardRing(false);
                           }
                     }
@@ -1385,7 +1836,8 @@ export function GanttView({
 
                   {/* Task rows */}
                   {tasks.map((task, index) => {
-                    const selected = focusedBarId === task.id;
+                    const refs = resolveSpans(task);
+                    const selected = refs.some((ref) => ref.key === focusedBarId);
                     const hovered = hoveredId === task.id;
                     const last = index === tasks.length - 1;
                     return (
@@ -1408,11 +1860,27 @@ export function GanttView({
                         } as Record<string, unknown>)}
                         {...{ "data-gantt-row": task.id }}
                       >
-                        {renderBar(task)}
+                        {refs.map((ref) => renderBar(task, ref))}
                       </XStack>
                     );
                   })}
 
+                  {/* Marker line (controlled — the caller owns the date) */}
+                  {markerX !== null && (
+                    <YStack
+                      position="absolute"
+                      {...canvasPos(markerX - 1)}
+                      top={0}
+                      bottom={0}
+                      width={2}
+                      backgroundColor="$color12"
+                      opacity={markerDragging ? 0.95 : 0.75}
+                      pointerEvents="none"
+                      zIndex={2}
+                      {...{ "data-gantt-marker": "true" }}
+                    />
+                  )}
+
                   {/* Today line (above bars, non-interactive) */}
                   {todayX !== null && (
                     <YStack