@multiplatform.one/components 7.7.6 → 7.8.0

package/dist/esm/views/Gantt.native.js

@@ -5,14 +5,37 @@ import { Skeleton } from "../Skeleton/index.native.js";
 import { ViewSwitcher } from "../layouts/ViewSwitcher.native.js";
 import { useDirection } from "../hooks/useDirection.native.js";
 import { withInterp } from "../shared/t.native.js";
-import { Intent, MIN_PRESS_TARGET, ensureKeyboardModalityTracking, formatDayOfMonth, formatMonthYear, hairline, hairlineWidth, keyboardFocusRingProps, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { Intent, MIN_PRESS_TARGET, ensureKeyboardModalityTracking, formatAbsoluteDate, formatDayOfMonth, formatMonthYear, hairline, hairlineWidth, keyboardFocusRingProps, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { Button } from "@multiplatform.one/forms";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "../shared/i18n.native.js";
 import { ScrollView as RNScrollView } from "react-native";
 import { ScrollView, Text, XStack, YStack, isWeb } from "tamagui";
-import { addDays, barGeometry, clampResizeDayDelta, computeGanttRange, dateToX, dayDiff, dxToDayDelta, formatRangeLabel, formatSpanLabel, ganttTaskAccessibleLabel, generateTicks, rangeDays, resizeSpanByDays, shiftSpanByDays, spanInclusiveDays, startOfDay, todayLineX } from "./ganttMath.native.js";
+import { addDays, barGeometry, clampResizeDayDelta, computeGanttRange, dateLineX, dateToX, dayDiff, dxToDayDelta, formatRangeLabel, formatSpanLabel, ganttTaskAccessibleLabel, generateTicks, isBoundedSpan, openBarGeometry, openSpanExtents, openSpanLabelParts, rangeDays, resizeSpanByDays, scrollAnchorX, shiftSpanByDays, spanInclusiveDays, startOfDay, todayLineX } from "./ganttMath.native.js";
 var CanvasScroller = isWeb ? ScrollView : RNScrollView;
+function boundedSpan(ref) {
+  var span = ref.span;
+  return isBoundedSpan(span) ? {
+    start: span.start,
+    end: span.end
+  } : null;
+}
+function resolveSpans(task) {
+  var list = task.spans;
+  if (!list || list.length === 0) return [{
+    span: task,
+    index: 0,
+    key: task.id
+  }];
+  return list.map(function (span, index) {
+    var _span_id;
+    return {
+      span,
+      index,
+      key: (_span_id = span.id) !== null && _span_id !== void 0 ? _span_id : `${task.id}#${index}`
+    };
+  });
+}
 var DRAG_THRESHOLD_PX = 4;
 var TOUCH_LONG_PRESS_MS = 300;
 var TOUCH_SLOP_PX = 8;
@@ -204,6 +227,10 @@ function GanttView(param) {
     showZoomSwitcher = true,
     firstDayOfWeek = 0,
     initialDate,
+    markerDate,
+    onMarkerDateChange,
+    enableMarkerDrag,
+    markerLabel,
     ...stackProps
   } = param;
   var {
@@ -237,16 +264,60 @@ function GanttView(param) {
   var space = knobProps.space;
   var barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
   var barHeight = Math.max(10, rowHeight - barInset * 2);
+  var railHeight = Math.max(4, Math.round(barHeight / 2));
   var transition = knobProps.transition;
   var webLayoutTransition = isWeb ? transition : void 0;
   var spans = useMemo(function () {
-    return tasks.map(function (task) {
-      return {
-        start: task.start,
-        end: task.end
-      };
+    var flat = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0,
+      _iteratorNormalCompletion1 = true,
+      _didIteratorError1 = false,
+      _iteratorError1 = void 0;
+    try {
+      for (var _iterator = tasks[Symbol.iterator](), _step; !(_iteratorNormalCompletion1 = (_step = _iterator.next()).done); _iteratorNormalCompletion1 = true) {
+        var task = _step.value;
+        try {
+          for (var _iterator1 = resolveSpans(task)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion = true) {
+            var ref = _step1.value;
+            flat.push(ref.span);
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator1.return != null) {
+              _iterator1.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      }
+    } catch (err) {
+      _didIteratorError1 = true;
+      _iteratorError1 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion1 && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError1) {
+          throw _iteratorError1;
+        }
+      }
+    }
+    if (markerDate !== void 0) flat.push({
+      start: markerDate,
+      end: markerDate
     });
-  }, [tasks]);
+    return openSpanExtents(flat);
+  }, [tasks, markerDate]);
   var range = useMemo(function () {
     return computeGanttRange(spans, zoom, /* @__PURE__ */new Date(), firstDayOfWeek);
   }, [spans, zoom, firstDayOfWeek]);
@@ -272,17 +343,17 @@ function GanttView(param) {
   var hScrollRef = useRef(null);
   var axisScrollRef = useRef(null);
   var canvasViewportRef = useRef(null);
-  var pendingRtlAnchorRef = useRef(null);
+  var pendingAnchorRef = useRef(null);
   var scrollToDate = useCallback(function (date, animated) {
     var _hScrollRef_current_scrollTo, _hScrollRef_current, _axisScrollRef_current_scrollTo, _axisScrollRef_current;
-    var ltrX = Math.max(0, dateToX(date, range.start, pxPerDay) - labelWidth);
-    var x = ltrX;
-    if (rtl) {
-      var viewport = canvasViewportRef.current;
-      if (viewport === null) pendingRtlAnchorRef.current = date;
-      var max = Math.max(0, chartWidth - (viewport !== null && viewport !== void 0 ? viewport : 0));
-      x = Math.min(max, Math.max(0, max - ltrX));
-    }
+    var viewportWidth = canvasViewportRef.current;
+    if (viewportWidth === null) pendingAnchorRef.current = date;
+    var x = scrollAnchorX(date, range.start, pxPerDay, {
+      labelWidth,
+      chartWidth,
+      viewportWidth,
+      rtl
+    });
     (_hScrollRef_current = hScrollRef.current) === null || _hScrollRef_current === void 0 ? void 0 : (_hScrollRef_current_scrollTo = _hScrollRef_current.scrollTo) === null || _hScrollRef_current_scrollTo === void 0 ? void 0 : _hScrollRef_current_scrollTo.call(_hScrollRef_current, {
       x,
       animated
@@ -312,11 +383,11 @@ function GanttView(param) {
   var handleCanvasLayout = useCallback(function (event) {
     var _event_nativeEvent_layout, _event_nativeEvent;
     var width = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : (_event_nativeEvent_layout = _event_nativeEvent.layout) === null || _event_nativeEvent_layout === void 0 ? void 0 : _event_nativeEvent_layout.width;
-    if (typeof width !== "number") return;
+    if (typeof width !== "number" || !Number.isFinite(width) || width <= 0) return;
     canvasViewportRef.current = width;
-    var pending = pendingRtlAnchorRef.current;
+    var pending = pendingAnchorRef.current;
     if (pending) {
-      pendingRtlAnchorRef.current = null;
+      pendingAnchorRef.current = null;
       scrollToDateRef.current(pending, false);
     }
   }, []);
@@ -341,17 +412,14 @@ function GanttView(param) {
       suppressClickRef.current = false;
     }, 0);
   }, []);
-  var commitDrag = useCallback(function (task, dayDelta) {
-    if (dayDelta !== 0) {
-      onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, shiftSpanByDays({
-        start: task.start,
-        end: task.end
-      }, dayDelta));
-    }
+  var commitDrag = useCallback(function (task, ref, span, dayDelta) {
+    if (dayDelta !== 0) onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, shiftSpanByDays(span, dayDelta), ref);
   }, [onItemMove]);
-  var handleBarPointerDown = useCallback(function (task, e) {
+  var handleBarPointerDown = useCallback(function (task, ref, e) {
     var _e_stopPropagation, _dragCleanupRef_current;
     if (!webDragEnabled) return;
+    var span = boundedSpan(ref);
+    if (!span) return;
     if (e.button !== void 0 && e.button !== 0) return;
     (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
     (_dragCleanupRef_current = dragCleanupRef.current) === null || _dragCleanupRef_current === void 0 ? void 0 : _dragCleanupRef_current.call(dragCleanupRef);
@@ -372,7 +440,7 @@ function GanttView(param) {
       prevUserSelect = document.body.style.userSelect;
       document.body.style.userSelect = "none";
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx,
         dayDelta: toDayDelta(dx)
       });
@@ -401,7 +469,7 @@ function GanttView(param) {
         return;
       }
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx,
         dayDelta: toDayDelta(dx)
       });
@@ -412,7 +480,7 @@ function GanttView(param) {
       teardown();
       if (!wasActive) return;
       suppressNextClick();
-      commitDrag(task, dayDelta);
+      commitDrag(task, ref, span, dayDelta);
     };
     var onKey = function onKey2(ke) {
       if (ke.key !== "Escape" || !active) return;
@@ -438,12 +506,16 @@ function GanttView(param) {
     window.addEventListener("keydown", onKey, true);
     dragCleanupRef.current = teardown;
   }, [webDragEnabled, pxPerDay, commitDrag, suppressNextClick]);
-  var handleNativeGrant = useCallback(function (task, e) {
+  var handleNativeGrant = useCallback(function (task, ref, e) {
     var _ref;
     var _e_nativeEvent;
     if (!nativeDragEnabled) return;
+    var span = boundedSpan(ref);
+    if (!span) return;
     var session = {
       task,
+      ref,
+      span,
       startX: (_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0,
       dragging: false,
       liftTimer: null
@@ -453,7 +525,7 @@ function GanttView(param) {
       if (nativeSessionRef.current !== session) return;
       session.dragging = true;
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx: 0,
         dayDelta: 0
       });
@@ -474,7 +546,7 @@ function GanttView(param) {
       return;
     }
     setDrag({
-      id: session.task.id,
+      key: session.ref.key,
       dx,
       dayDelta: dirSignRef.current * dxToDayDelta(dx, pxPerDay)
     });
@@ -492,7 +564,7 @@ function GanttView(param) {
     }
     var dayDelta = dirSignRef.current * dxToDayDelta(((_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0) - session.startX, pxPerDay);
     setDrag(null);
-    commitDrag(session.task, dayDelta);
+    commitDrag(session.task, session.ref, session.span, dayDelta);
   }, [onItemPress, pxPerDay, commitDrag]);
   var handleNativeTerminate = useCallback(function () {
     var session = nativeSessionRef.current;
@@ -500,16 +572,14 @@ function GanttView(param) {
     nativeSessionRef.current = null;
     setDrag(null);
   }, []);
-  var handleResizePointerDown = useCallback(function (task, edge, e) {
+  var handleResizePointerDown = useCallback(function (task, ref, edge, e) {
     var _e_stopPropagation, _dragCleanupRef_current;
     if (!webDragEnabled) return;
+    var span = boundedSpan(ref);
+    if (!span) return;
     if (e.button !== void 0 && e.button !== 0) return;
     (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
     (_dragCleanupRef_current = dragCleanupRef.current) === null || _dragCleanupRef_current === void 0 ? void 0 : _dragCleanupRef_current.call(dragCleanupRef);
-    var span = {
-      start: task.start,
-      end: task.end
-    };
     var maxShrinkPx = (spanInclusiveDays(span) - 1) * pxPerDay;
     var startX = e.clientX;
     var sign = dirSignRef.current;
@@ -542,7 +612,7 @@ function GanttView(param) {
         document.body.style.userSelect = "none";
       }
       setResize({
-        id: task.id,
+        key: ref.key,
         edge,
         logicalDx: clampLogicalDx(dx),
         dayDelta: toDayDelta(dx)
@@ -554,9 +624,7 @@ function GanttView(param) {
       teardown();
       if (!wasActive) return;
       suppressNextClick();
-      if (dayDelta !== 0) {
-        onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, resizeSpanByDays(span, edge, dayDelta));
-      }
+      if (dayDelta !== 0) onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, resizeSpanByDays(span, edge, dayDelta), ref);
     };
     var onKey = function onKey2(ke) {
       if (ke.key !== "Escape" || !active) return;
@@ -576,11 +644,12 @@ function GanttView(param) {
     window.addEventListener("keydown", onKey, true);
     dragCleanupRef.current = teardown;
   }, [webDragEnabled, pxPerDay, onItemMove, suppressNextClick]);
-  var getBarDragProps = useCallback(function (task) {
+  var getBarDragProps = useCallback(function (task, ref) {
+    if (!boundedSpan(ref)) return {};
     if (webDragEnabled) {
       return {
         onPointerDown: function onPointerDown(e) {
-          return handleBarPointerDown(task, e);
+          return handleBarPointerDown(task, ref, e);
         }
       };
     }
@@ -598,7 +667,7 @@ function GanttView(param) {
           return !((_nativeSessionRef_current = nativeSessionRef.current) === null || _nativeSessionRef_current === void 0 ? void 0 : _nativeSessionRef_current.dragging);
         },
         onResponderGrant: function onResponderGrant(e) {
-          return handleNativeGrant(task, e);
+          return handleNativeGrant(task, ref, e);
         },
         onResponderMove: handleNativeMove,
         onResponderRelease: handleNativeRelease,
@@ -607,46 +676,222 @@ function GanttView(param) {
     }
     return {};
   }, [webDragEnabled, nativeDragEnabled, handleBarPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
-  var handleBarKeyboardMove = useCallback(function (task, key, shiftKey) {
+  var handleBarKeyboardMove = useCallback(function (task, ref, key, shiftKey) {
+    var _ref_span_title;
+    var span = boundedSpan(ref);
+    if (!span) return;
     var physical = key === "ArrowRight" ? 1 : -1;
     var dayDelta = physical * dirSignRef.current * (shiftKey ? 7 : 1);
-    var next = shiftSpanByDays({
-      start: task.start,
-      end: task.end
-    }, dayDelta);
-    onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, next);
+    var next = shiftSpanByDays(span, dayDelta);
+    onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, next, ref);
     setAnnouncement(withInterp(t("{{title}} moved to {{range}}"), {
-      title: task.title,
+      title: (_ref_span_title = ref.span.title) !== null && _ref_span_title !== void 0 ? _ref_span_title : task.title,
       range: formatSpanLabel(next)
     }));
   }, [onItemMove, t]);
-  var renderBar = function renderBar2(task) {
-    var _ref, _ref1, _task_color;
-    var geom = barGeometry(task, range.start, pxPerDay);
-    var activeDrag = drag && drag.id === task.id ? drag : null;
+  var markerDragEnabled = (enableMarkerDrag !== null && enableMarkerDrag !== void 0 ? enableMarkerDrag : onMarkerDateChange !== void 0) && onMarkerDateChange !== void 0;
+  var [markerDragging, setMarkerDragging] = useState(false);
+  var markerGrantRef = useRef(null);
+  var markerEmittedRef = useRef(null);
+  var markerSessionRef = useRef(null);
+  var emitMarker = useCallback(function (dayDelta) {
+    var base = markerGrantRef.current;
+    if (!base) return;
+    var next = addDays(base, dayDelta);
+    if (markerEmittedRef.current === next.getTime()) return;
+    markerEmittedRef.current = next.getTime();
+    onMarkerDateChange === null || onMarkerDateChange === void 0 ? void 0 : onMarkerDateChange(next);
+  }, [onMarkerDateChange]);
+  var openMarkerSession = useCallback(function () {
+    if (markerDate === void 0) return false;
+    var base = startOfDay(markerDate);
+    markerGrantRef.current = base;
+    markerEmittedRef.current = base.getTime();
+    return true;
+  }, [markerDate]);
+  var handleMarkerPointerDown = useCallback(function (e) {
+    var _e_stopPropagation, _dragCleanupRef_current;
+    if (!markerDragEnabled || !hasDom) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    if (!openMarkerSession()) return;
+    (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+    (_dragCleanupRef_current = dragCleanupRef.current) === null || _dragCleanupRef_current === void 0 ? void 0 : _dragCleanupRef_current.call(dragCleanupRef);
+    var startX = e.clientX;
+    var active = false;
+    var ended = false;
+    var prevUserSelect = "";
+    var toDayDelta = function toDayDelta2(dx) {
+      return dirSignRef.current * dxToDayDelta(dx, pxPerDay);
+    };
+    var teardown = function teardown2() {
+      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;
+    };
+    var onMove = function onMove2(me) {
+      var 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));
+    };
+    var onUp = function onUp2() {
+      return teardown();
+    };
+    var onKey = function onKey2(ke) {
+      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]);
+  var markerNativeProps = useMemo(function () {
+    if (!markerDragEnabled || isWeb) return {};
+    return {
+      onStartShouldSetResponder: function onStartShouldSetResponder() {
+        return true;
+      },
+      onMoveShouldSetResponder: function onMoveShouldSetResponder() {
+        return true;
+      },
+      onResponderTerminationRequest: function onResponderTerminationRequest() {
+        return false;
+      },
+      onResponderGrant: function onResponderGrant(e) {
+        var _ref;
+        var _e_nativeEvent;
+        if (!openMarkerSession()) return;
+        markerSessionRef.current = {
+          startX: (_ref = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0
+        };
+        setMarkerDragging(true);
+      },
+      onResponderMove: function onResponderMove(e) {
+        var _ref;
+        var _e_nativeEvent;
+        var session = markerSessionRef.current;
+        if (!session) return;
+        var dx = ((_ref = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0) - session.startX;
+        emitMarker(dirSignRef.current * dxToDayDelta(dx, pxPerDay));
+      },
+      onResponderRelease: function onResponderRelease() {
+        markerSessionRef.current = null;
+        markerGrantRef.current = null;
+        setMarkerDragging(false);
+      },
+      onResponderTerminate: function onResponderTerminate() {
+        markerSessionRef.current = null;
+        markerGrantRef.current = null;
+        setMarkerDragging(false);
+      }
+    };
+  }, [markerDragEnabled, openMarkerSession, emitMarker, pxPerDay]);
+  var handleMarkerKeyboardMove = useCallback(function (key, shiftKey) {
+    if (!markerDragEnabled || markerDate === void 0) return;
+    var physical = key === "ArrowRight" ? 1 : -1;
+    var dayDelta = physical * dirSignRef.current * (shiftKey ? 7 : 1);
+    var next = addDays(startOfDay(markerDate), dayDelta);
+    markerEmittedRef.current = next.getTime();
+    onMarkerDateChange === null || onMarkerDateChange === void 0 ? void 0 : onMarkerDateChange(next);
+    setAnnouncement(withInterp(t("Marker moved to {{date}}"), {
+      date: formatAbsoluteDate(next)
+    }));
+  }, [markerDragEnabled, markerDate, onMarkerDateChange, t]);
+  var markerX = markerDate === void 0 ? null : dateLineX(range, pxPerDay, markerDate);
+  var markerName = markerLabel !== null && markerLabel !== void 0 ? markerLabel : t("Marker");
+  var spanAccessibleName = function spanAccessibleName2(title, span) {
+    if (isBoundedSpan(span)) {
+      return ganttTaskAccessibleLabel({
+        title,
+        start: span.start,
+        end: span.end
+      });
+    }
+    var parts = openSpanLabelParts(span);
+    if (parts.start !== void 0) {
+      return withInterp(t("{{title}}, from {{start}}, no end"), {
+        title,
+        start: parts.start
+      });
+    }
+    if (parts.end !== void 0) {
+      return withInterp(t("{{title}}, until {{end}}, no start"), {
+        title,
+        end: parts.end
+      });
+    }
+    return withInterp(t("{{title}}, always, no dates"), {
+      title
+    });
+  };
+  var renderBar = function renderBar2(task, ref) {
+    var _ref, _ref1, _span_color, _span_intent, _span_title, _span_progress;
+    var span = ref.span;
+    var barKey = ref.key;
+    var bounded = boundedSpan(ref);
+    var geom = openBarGeometry(span, range, pxPerDay);
+    var activeDrag = drag && drag.key === barKey ? drag : null;
     var dragging = activeDrag !== null;
-    var activeResize = resize && resize.id === task.id ? resize : null;
+    var activeResize = resize && resize.key === barKey ? resize : null;
     var resizing = activeResize !== null;
     var sessionLive = dragging || resizing;
     var dayDelta = (_ref = (_ref1 = activeDrag === null || activeDrag === void 0 ? void 0 : activeDrag.dayDelta) !== null && _ref1 !== void 0 ? _ref1 : activeResize === null || activeResize === void 0 ? void 0 : activeResize.dayDelta) !== null && _ref !== void 0 ? _ref : 0;
-    var span = {
-      start: task.start,
-      end: task.end
-    };
-    var previewSpan = activeDrag ? shiftSpanByDays(span, dayDelta) : activeResize ? resizeSpanByDays(span, activeResize.edge, activeResize.dayDelta) : null;
+    var previewSpan = bounded && activeDrag ? shiftSpanByDays(bounded, dayDelta) : bounded && activeResize ? resizeSpanByDays(bounded, activeResize.edge, activeResize.dayDelta) : null;
     var previewGeom = previewSpan ? barGeometry(previewSpan, range.start, pxPerDay) : null;
     var liveWidth = activeResize ? Math.max(6, activeResize.edge === "end" ? geom.width + activeResize.logicalDx : geom.width - activeResize.logicalDx) : geom.width;
     var liveTransformX = activeDrag ? activeDrag.dx : activeResize && activeResize.edge === "start" ? activeResize.logicalDx * dirSign : 0;
-    var fill = (_task_color = task.color) !== null && _task_color !== void 0 ? _task_color : task.intent && task.intent !== "accent" ? "$color9" : "$accentBackground";
-    var progress = clampProgress(task.progress);
-    var showLabel = liveWidth >= 44;
-    var isBarFocused = focusedBarId === task.id;
+    var barColor = (_span_color = span.color) !== null && _span_color !== void 0 ? _span_color : task.color;
+    var barIntent = (_span_intent = span.intent) !== null && _span_intent !== void 0 ? _span_intent : task.intent;
+    var barTitle = (_span_title = span.title) !== null && _span_title !== void 0 ? _span_title : task.title;
+    var fill = barColor !== null && barColor !== void 0 ? barColor : barIntent && barIntent !== "accent" ? "$color9" : "$accentBackground";
+    var progress = bounded ? clampProgress((_span_progress = span.progress) !== null && _span_progress !== void 0 ? _span_progress : task.progress) : null;
+    var showLabel = !geom.eternal && liveWidth >= 44;
+    var isBarFocused = focusedBarId === barKey;
     var showHandles = hoveredId === task.id || sessionLive;
-    var handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
+    var handleWidth = bounded ? geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0 : 0;
     var physicalLeftEdge = rtl ? "end" : "start";
     var physicalRightEdge = rtl ? "start" : "end";
+    var openStartSide = rtl ? {
+      right: 2
+    } : {
+      left: 2
+    };
+    var openEndSide = rtl ? {
+      left: 2
+    } : {
+      right: 2
+    };
+    var squareStart = rtl ? {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    } : {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+    var squareEnd = rtl ? {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    } : {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+    var height2 = geom.eternal ? railHeight : barHeight;
     return /* @__PURE__ */_jsxs(BarIntentWrap, {
-      intent: task.color ? void 0 : task.intent,
+      intent: barColor ? void 0 : barIntent,
       children: [/* Snapped drop preview (the raw bar tracks the pointer 1:1). */
       sessionLive && dayDelta !== 0 && previewGeom && /* @__PURE__ */_jsx(YStack, {
         position: "absolute",
@@ -660,25 +905,28 @@ function GanttView(param) {
         backgroundColor: "$accentBackground",
         opacity: 0.25,
         pointerEvents: "none",
-        "data-gantt-drop-preview": task.id
+        "data-gantt-drop-preview": barKey
       }), /* @__PURE__ */_jsxs(YStack, {
         position: "absolute",
         ...canvasPos(geom.x),
         width: liveWidth,
-        top: barInset,
-        height: barHeight,
+        top: barInset + (barHeight - height2) / 2,
+        height: height2,
         x: liveTransformX,
         zIndex: sessionLive ? 3 : 1,
         ...knobProps.borderRadius,
+        ...(geom.openStart ? squareStart : null),
+        ...(geom.openEnd ? squareEnd : null),
         backgroundColor: fill,
-        opacity: sessionLive ? 0.85 : 1,
+        // 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 : 0.9
+          opacity: sessionLive ? 0.85 : geom.eternal ? 0.7 : 0.9
         },
         pressStyle: {
           opacity: 0.8
         },
-        cursor: webDragEnabled ? "grab" : onItemPress ? "pointer" : void 0,
+        cursor: bounded && webDragEnabled ? "grab" : onItemPress ? "pointer" : void 0,
         justifyContent: "center",
         // LC-25: committed/reverted geometry jumps tween on web; the live
         // drag/resize tracking stays 1:1 (no transition while the session
@@ -686,18 +934,18 @@ function GanttView(param) {
         transition: sessionLive ? void 0 : webLayoutTransition,
         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: function onFocus() {
-          setFocusedBarId(task.id);
+          setFocusedBarId(barKey);
           setBarKeyboardRing(wasKeyboardFocus());
         },
         onBlur: function onBlur() {
           setFocusedBarId(function (id) {
-            return id === task.id ? null : id;
+            return id === barKey ? null : id;
           });
           setBarKeyboardRing(false);
         },
@@ -721,17 +969,23 @@ function GanttView(param) {
             onItemPress === null || onItemPress === void 0 ? void 0 : onItemPress(task);
             return;
           }
-          if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled) {
+          if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled && bounded) {
             var _ke_preventDefault1, _ke_stopPropagation1;
             (_ke_preventDefault1 = ke.preventDefault) === null || _ke_preventDefault1 === void 0 ? void 0 : _ke_preventDefault1.call(ke);
             (_ke_stopPropagation1 = ke.stopPropagation) === null || _ke_stopPropagation1 === void 0 ? void 0 : _ke_stopPropagation1.call(ke);
-            handleBarKeyboardMove(task, ke.key, ke.shiftKey === true);
+            handleBarKeyboardMove(task, ref, ke.key, ke.shiftKey === true);
           }
         },
-        "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 ? void 0 : function (e) {
+        onPress: nativeDragEnabled && bounded ? void 0 : function (e) {
           var _e_stopPropagation;
           e === null || e === void 0 ? void 0 : (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
           if (suppressClickRef.current) return;
@@ -752,8 +1006,29 @@ function GanttView(param) {
           pointerEvents: "none",
           "data-gantt-progress": String(progress)
         }), showLabel && /* @__PURE__ */_jsx(GanttBarLabel, {
-          title: task.title,
+          title: barTitle,
           fill
+        }), /* "This end is not an end" — a mark, never a cap. */
+        geom.openStart && /* @__PURE__ */_jsx(Text, {
+          position: "absolute",
+          ...openStartSide,
+          ...knobProps.label,
+          color: "$color12",
+          opacity: 0.75,
+          pointerEvents: "none",
+          "aria-hidden": true,
+          "data-gantt-open-start": "true",
+          children: rtl ? "\xBB" : "\xAB"
+        }), geom.openEnd && /* @__PURE__ */_jsx(Text, {
+          position: "absolute",
+          ...openEndSide,
+          ...knobProps.label,
+          color: "$color12",
+          opacity: 0.75,
+          pointerEvents: "none",
+          "aria-hidden": true,
+          "data-gantt-open-end": "true",
+          children: rtl ? "\xAB" : "\xBB"
         }), /* Live date label while dragging (honest preview of the commit). */
         previewSpan && /* @__PURE__ */_jsx(XStack, {
           position: "absolute",
@@ -789,7 +1064,7 @@ function GanttView(param) {
             backgroundColor: showHandles ? "$color12" : "transparent",
             opacity: showHandles ? 0.28 : 0,
             onPointerDown: function onPointerDown(e) {
-              return handleResizePointerDown(task, physicalLeftEdge, e);
+              return handleResizePointerDown(task, ref, physicalLeftEdge, e);
             },
             "data-gantt-resize-handle": physicalLeftEdge
           }), /* @__PURE__ */_jsx(YStack, {
@@ -802,7 +1077,7 @@ function GanttView(param) {
             backgroundColor: showHandles ? "$color12" : "transparent",
             opacity: showHandles ? 0.28 : 0,
             onPointerDown: function onPointerDown(e) {
-              return handleResizePointerDown(task, physicalRightEdge, e);
+              return handleResizePointerDown(task, ref, physicalRightEdge, e);
             },
             "data-gantt-resize-handle": physicalRightEdge
           })]
@@ -810,19 +1085,19 @@ function GanttView(param) {
         /* 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 && /* @__PURE__ */_jsx(YStack, {
+        nativeDragEnabled && bounded && /* @__PURE__ */_jsx(YStack, {
           position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
           zIndex: 5,
-          ...getBarDragProps(task)
+          ...getBarDragProps(task, ref)
         })]
       })]
-    }, task.id);
+    }, barKey);
   };
-  var scrollLocked = drag !== null || resize !== null;
+  var scrollLocked = drag !== null || resize !== null || markerDragging;
   var majorGridColor = "$borderColor";
   var minorGridColor = componentColors.divider;
   var scrollerDirection = {
@@ -984,6 +1259,57 @@ function GanttView(param) {
               height: hairlineWidth,
               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 && /* @__PURE__ */_jsxs(_Fragment, {
+              children: [/* @__PURE__ */_jsx(YStack, {
+                position: "absolute",
+                ...canvasPos(markerX - 1),
+                top: 0,
+                bottom: 0,
+                width: 2,
+                backgroundColor: "$color12",
+                opacity: 0.9,
+                pointerEvents: "none"
+              }), /* @__PURE__ */_jsx(YStack, {
+                position: "absolute",
+                ...canvasPos(markerX - 12),
+                top: 0,
+                bottom: 0,
+                width: 24,
+                alignItems: "center",
+                justifyContent: "flex-end",
+                zIndex: 4,
+                cursor: markerDragEnabled ? "ew-resize" : void 0,
+                role: "slider",
+                tabIndex: markerDragEnabled ? 0 : -1,
+                "aria-label": markerName,
+                "aria-valuetext": markerDate ? formatAbsoluteDate(markerDate) : void 0,
+                ...(markerDragEnabled && hasDom ? {
+                  onPointerDown: function onPointerDown(e) {
+                    return handleMarkerPointerDown(e);
+                  }
+                } : null),
+                ...markerNativeProps,
+                onKeyDown: function onKeyDown(ke) {
+                  var _ke_preventDefault, _ke_stopPropagation;
+                  if (ke.key !== "ArrowLeft" && ke.key !== "ArrowRight") return;
+                  (_ke_preventDefault = ke.preventDefault) === null || _ke_preventDefault === void 0 ? void 0 : _ke_preventDefault.call(ke);
+                  (_ke_stopPropagation = ke.stopPropagation) === null || _ke_stopPropagation === void 0 ? void 0 : _ke_stopPropagation.call(ke);
+                  handleMarkerKeyboardMove(ke.key, ke.shiftKey === true);
+                },
+                "data-gantt-marker-handle": "true",
+                children: /* @__PURE__ */_jsx(YStack, {
+                  width: 11,
+                  height: 9,
+                  marginBottom: 2,
+                  borderRadius: 2,
+                  backgroundColor: "$color12",
+                  opacity: markerDragging ? 1 : 0.9,
+                  pointerEvents: "none"
+                })
+              })]
             })]
           })
         })]
@@ -1004,9 +1330,15 @@ function GanttView(param) {
             ...hairlineEnd,
             borderColor: "$borderColor",
             children: tasks.map(function (task, index) {
-              var selected = focusedBarId === task.id;
+              var _ref;
+              var _refs_;
+              var refs = resolveSpans(task);
+              var selected = refs.some(function (ref) {
+                return ref.key === focusedBarId;
+              });
               var hovered = hoveredId === task.id;
               var last = index === tasks.length - 1;
+              var firstKey = (_ref = (_refs_ = refs[0]) === null || _refs_ === void 0 ? void 0 : _refs_.key) !== null && _ref !== void 0 ? _ref : task.id;
               return /* @__PURE__ */_jsx(XStack, {
                 height: rowHeight,
                 alignItems: "center",
@@ -1029,11 +1361,11 @@ function GanttView(param) {
                 },
                 onPress: onItemPress ? function () {
                   if (suppressClickRef.current) return;
-                  setFocusedBarId(task.id);
+                  setFocusedBarId(firstKey);
                   setBarKeyboardRing(false);
                   onItemPress(task);
                 } : function () {
-                  setFocusedBarId(task.id);
+                  setFocusedBarId(firstKey);
                   setBarKeyboardRing(false);
                 },
                 "data-gantt-row-label": task.id,
@@ -1106,7 +1438,10 @@ function GanttView(param) {
                   }, tick.date.toISOString());
                 }), /* Task rows */
                 tasks.map(function (task, index) {
-                  var selected = focusedBarId === task.id;
+                  var refs = resolveSpans(task);
+                  var selected = refs.some(function (ref) {
+                    return ref.key === focusedBarId;
+                  });
                   var hovered = hoveredId === task.id;
                   var last = index === tasks.length - 1;
                   return /* @__PURE__ */_jsx(XStack, {
@@ -1128,8 +1463,22 @@ function GanttView(param) {
                       }
                     },
                     "data-gantt-row": task.id,
-                    children: renderBar(task)
+                    children: refs.map(function (ref) {
+                      return renderBar(task, ref);
+                    })
                   }, task.id);
+                }), /* Marker line (controlled — the caller owns the date) */
+                markerX !== null && /* @__PURE__ */_jsx(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 && /* @__PURE__ */_jsx(YStack, {
                   position: "absolute",