@multiplatform.one/components 7.7.6 → 7.10.0

package/dist/esm/views/Gantt.mjs

@@ -4,15 +4,35 @@ import { Skeleton } from "../Skeleton/index.mjs";
 import { ViewSwitcher } from "../layouts/ViewSwitcher.mjs";
 import { useDirection } from "../hooks/useDirection.mjs";
 import { withInterp } from "../shared/t.mjs";
-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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "../shared/i18n.mjs";
 import { ScrollView as RNScrollView } from "react-native-web";
 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.mjs";
+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.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const CanvasScroller = isWeb ? ScrollView : RNScrollView;
+function boundedSpan(ref) {
+  const span = ref.span;
+  return isBoundedSpan(span) ? {
+    start: span.start,
+    end: span.end
+  } : null;
+}
+function resolveSpans(task) {
+  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}`
+  }));
+}
 const DRAG_THRESHOLD_PX = 4;
 const TOUCH_LONG_PRESS_MS = 300;
 const TOUCH_SLOP_PX = 8;
@@ -199,6 +219,10 @@ function GanttView({
   showZoomSwitcher = true,
   firstDayOfWeek = 0,
   initialDate,
+  markerDate,
+  onMarkerDateChange,
+  enableMarkerDrag,
+  markerLabel,
   ...stackProps
 }) {
   const {
@@ -230,12 +254,18 @@ function GanttView({
   const space = knobProps.space;
   const barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
   const barHeight = Math.max(10, rowHeight - barInset * 2);
+  const railHeight = Math.max(4, Math.round(barHeight / 2));
   const transition = knobProps.transition;
   const webLayoutTransition = isWeb ? transition : void 0;
-  const spans = useMemo(() => tasks.map(task => ({
-    start: task.start,
-    end: task.end
-  })), [tasks]);
+  const spans = useMemo(() => {
+    const flat = [];
+    for (const task of tasks) for (const ref of resolveSpans(task)) flat.push(ref.span);
+    if (markerDate !== void 0) flat.push({
+      start: markerDate,
+      end: markerDate
+    });
+    return openSpanExtents(flat);
+  }, [tasks, markerDate]);
   const range = useMemo(() => computeGanttRange(spans, zoom, /* @__PURE__ */new Date(), firstDayOfWeek), [spans, zoom, firstDayOfWeek]);
   const chartWidth = rangeDays(range) * pxPerDay;
   const ticks = useMemo(() => generateTicks(range, zoom, pxPerDay, firstDayOfWeek), [range, zoom, pxPerDay, firstDayOfWeek]);
@@ -251,16 +281,16 @@ function GanttView({
   const hScrollRef = useRef(null);
   const axisScrollRef = useRef(null);
   const canvasViewportRef = useRef(null);
-  const pendingRtlAnchorRef = useRef(null);
+  const pendingAnchorRef = useRef(null);
   const scrollToDate = useCallback((date, animated) => {
-    const ltrX = Math.max(0, dateToX(date, range.start, pxPerDay) - labelWidth);
-    let x = ltrX;
-    if (rtl) {
-      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
@@ -284,11 +314,11 @@ function GanttView({
   }, []);
   const handleCanvasLayout = useCallback(event => {
     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);
     }
   }, []);
@@ -308,16 +338,13 @@ function GanttView({
       suppressClickRef.current = false;
     }, 0);
   }, []);
-  const commitDrag = useCallback((task, dayDelta) => {
-    if (dayDelta !== 0) {
-      onItemMove?.(task, shiftSpanByDays({
-        start: task.start,
-        end: task.end
-      }, dayDelta));
-    }
+  const commitDrag = useCallback((task, ref, span, dayDelta) => {
+    if (dayDelta !== 0) onItemMove?.(task, shiftSpanByDays(span, dayDelta), ref);
   }, [onItemMove]);
-  const handleBarPointerDown = useCallback((task, e) => {
+  const handleBarPointerDown = useCallback((task, ref, e) => {
     if (!webDragEnabled) return;
+    const span = boundedSpan(ref);
+    if (!span) return;
     if (e.button !== void 0 && e.button !== 0) return;
     e.stopPropagation?.();
     dragCleanupRef.current?.();
@@ -336,7 +363,7 @@ function GanttView({
       prevUserSelect = document.body.style.userSelect;
       document.body.style.userSelect = "none";
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx,
         dayDelta: toDayDelta(dx)
       });
@@ -365,7 +392,7 @@ function GanttView({
         return;
       }
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx,
         dayDelta: toDayDelta(dx)
       });
@@ -376,7 +403,7 @@ function GanttView({
       teardown();
       if (!wasActive) return;
       suppressNextClick();
-      commitDrag(task, dayDelta);
+      commitDrag(task, ref, span, dayDelta);
     };
     const onKey = ke => {
       if (ke.key !== "Escape" || !active) return;
@@ -400,10 +427,14 @@ function GanttView({
     window.addEventListener("keydown", onKey, true);
     dragCleanupRef.current = teardown;
   }, [webDragEnabled, pxPerDay, commitDrag, suppressNextClick]);
-  const handleNativeGrant = useCallback((task, e) => {
+  const handleNativeGrant = useCallback((task, ref, e) => {
     if (!nativeDragEnabled) return;
+    const span = boundedSpan(ref);
+    if (!span) return;
     const session = {
       task,
+      ref,
+      span,
       startX: e.nativeEvent?.pageX ?? 0,
       dragging: false,
       liftTimer: null
@@ -413,7 +444,7 @@ function GanttView({
       if (nativeSessionRef.current !== session) return;
       session.dragging = true;
       setDrag({
-        id: task.id,
+        key: ref.key,
         dx: 0,
         dayDelta: 0
       });
@@ -432,7 +463,7 @@ function GanttView({
       return;
     }
     setDrag({
-      id: session.task.id,
+      key: session.ref.key,
       dx,
       dayDelta: dirSignRef.current * dxToDayDelta(dx, pxPerDay)
     });
@@ -448,7 +479,7 @@ 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]);
   const handleNativeTerminate = useCallback(() => {
     const session = nativeSessionRef.current;
@@ -456,15 +487,13 @@ function GanttView({
     nativeSessionRef.current = null;
     setDrag(null);
   }, []);
-  const handleResizePointerDown = useCallback((task, edge, e) => {
+  const handleResizePointerDown = useCallback((task, ref, edge, e) => {
     if (!webDragEnabled) return;
+    const span = boundedSpan(ref);
+    if (!span) return;
     if (e.button !== void 0 && e.button !== 0) return;
     e.stopPropagation?.();
     dragCleanupRef.current?.();
-    const span = {
-      start: task.start,
-      end: task.end
-    };
     const maxShrinkPx = (spanInclusiveDays(span) - 1) * pxPerDay;
     const startX = e.clientX;
     const sign = dirSignRef.current;
@@ -495,7 +524,7 @@ function GanttView({
         document.body.style.userSelect = "none";
       }
       setResize({
-        id: task.id,
+        key: ref.key,
         edge,
         logicalDx: clampLogicalDx(dx),
         dayDelta: toDayDelta(dx)
@@ -507,9 +536,7 @@ 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 => {
       if (ke.key !== "Escape" || !active) return;
@@ -527,10 +554,11 @@ function GanttView({
     window.addEventListener("keydown", onKey, true);
     dragCleanupRef.current = teardown;
   }, [webDragEnabled, pxPerDay, onItemMove, suppressNextClick]);
-  const getBarDragProps = useCallback(task => {
+  const getBarDragProps = useCallback((task, ref) => {
+    if (!boundedSpan(ref)) return {};
     if (webDragEnabled) {
       return {
-        onPointerDown: e => handleBarPointerDown(task, e)
+        onPointerDown: e => handleBarPointerDown(task, ref, e)
       };
     }
     if (nativeDragEnabled) {
@@ -539,7 +567,7 @@ function GanttView({
         onStartShouldSetResponder: () => true,
         onMoveShouldSetResponder: () => true,
         onResponderTerminationRequest: () => !nativeSessionRef.current?.dragging,
-        onResponderGrant: e => handleNativeGrant(task, e),
+        onResponderGrant: e => handleNativeGrant(task, ref, e),
         onResponderMove: handleNativeMove,
         onResponderRelease: handleNativeRelease,
         onResponderTerminate: handleNativeTerminate
@@ -547,45 +575,205 @@ function GanttView({
     }
     return {};
   }, [webDragEnabled, nativeDragEnabled, handleBarPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
-  const handleBarKeyboardMove = useCallback((task, key, shiftKey) => {
+  const handleBarKeyboardMove = useCallback((task, ref, key, shiftKey) => {
+    const span = boundedSpan(ref);
+    if (!span) return;
     const physical = key === "ArrowRight" ? 1 : -1;
     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)
     }));
   }, [onItemMove, t]);
-  const renderBar = task => {
-    const geom = barGeometry(task, range.start, pxPerDay);
-    const activeDrag = drag && drag.id === task.id ? drag : null;
+  const markerDragEnabled = (enableMarkerDrag ?? onMarkerDateChange !== void 0) && onMarkerDateChange !== void 0;
+  const [markerDragging, setMarkerDragging] = useState(false);
+  const markerGrantRef = useRef(null);
+  const markerEmittedRef = useRef(null);
+  const markerSessionRef = useRef(null);
+  const emitMarker = useCallback(dayDelta => {
+    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 === void 0) return false;
+    const base = startOfDay(markerDate);
+    markerGrantRef.current = base;
+    markerEmittedRef.current = base.getTime();
+    return true;
+  }, [markerDate]);
+  const handleMarkerPointerDown = useCallback(e => {
+    if (!markerDragEnabled || !hasDom) return;
+    if (e.button !== void 0 && 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 => 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 => {
+      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 => {
+      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]);
+  const markerNativeProps = useMemo(() => {
+    if (!markerDragEnabled || isWeb) return {};
+    return {
+      onStartShouldSetResponder: () => true,
+      onMoveShouldSetResponder: () => true,
+      onResponderTerminationRequest: () => false,
+      onResponderGrant: e => {
+        if (!openMarkerSession()) return;
+        markerSessionRef.current = {
+          startX: e?.nativeEvent?.pageX ?? 0
+        };
+        setMarkerDragging(true);
+      },
+      onResponderMove: e => {
+        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, shiftKey) => {
+    if (!markerDragEnabled || markerDate === void 0) 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 === void 0 ? null : dateLineX(range, pxPerDay, markerDate);
+  const markerName = markerLabel ?? t("Marker");
+  const spanAccessibleName = (title, span) => {
+    if (isBoundedSpan(span)) {
+      return ganttTaskAccessibleLabel({
+        title,
+        start: span.start,
+        end: span.end
+      });
+    }
+    const 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
+    });
+  };
+  const renderBar = (task, ref) => {
+    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 = {
-      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;
     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");
-    const progress = clampProgress(task.progress);
-    const showLabel = liveWidth >= 44;
-    const isBarFocused = focusedBarId === task.id;
+    const barColor = span.color ?? task.color;
+    const barIntent = span.intent ?? task.intent;
+    const barTitle = span.title ?? task.title;
+    const fill = barColor ?? (barIntent && barIntent !== "accent" ? "$color9" : "$accentBackground");
+    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;
-    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 = rtl ? "end" : "start";
     const physicalRightEdge = rtl ? "start" : "end";
+    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 height2 = geom.eternal ? railHeight : barHeight;
     return /* @__PURE__ */jsxs(BarIntentWrap, {
-      intent: task.color ? void 0 : task.intent,
+      intent: barColor ? void 0 : barIntent,
       children: [sessionLive && dayDelta !== 0 && previewGeom && /* @__PURE__ */jsx(YStack, {
         position: "absolute",
         ...canvasPos(previewGeom.x),
@@ -599,40 +787,42 @@ function GanttView({
         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,
+        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",
         transition: sessionLive ? void 0 : webLayoutTransition,
         role: "button",
         tabIndex: 0,
-        "aria-label": ganttTaskAccessibleLabel(task),
+        "aria-label": spanAccessibleName(barTitle, span),
         ...(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);
         },
         ...{
@@ -646,17 +836,23 @@ 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);
           }
         },
         ...{
-          "data-gantt-bar": task.id
+          "data-gantt-bar": barKey
         },
-        ...(nativeDragEnabled ? null : getBarDragProps(task)),
-        onPress: nativeDragEnabled ? void 0 : e => {
+        ...(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)),
+        onPress: nativeDragEnabled && bounded ? void 0 : e => {
           e?.stopPropagation?.();
           if (suppressClickRef.current) return;
           onItemPress?.(task);
@@ -678,8 +874,32 @@ function GanttView({
             "data-gantt-progress": String(progress)
           }
         }), showLabel && /* @__PURE__ */jsx(GanttBarLabel, {
-          title: task.title,
+          title: barTitle,
           fill
+        }), 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"
         }), previewSpan && /* @__PURE__ */jsx(XStack, {
           position: "absolute",
           top: -(axisHeight - 6),
@@ -714,7 +934,7 @@ function GanttView({
             cursor: "ew-resize",
             backgroundColor: showHandles ? "$color12" : "transparent",
             opacity: showHandles ? 0.28 : 0,
-            onPointerDown: e => handleResizePointerDown(task, physicalLeftEdge, e),
+            onPointerDown: e => handleResizePointerDown(task, ref, physicalLeftEdge, e),
             ...{
               "data-gantt-resize-handle": physicalLeftEdge
             }
@@ -727,24 +947,24 @@ function GanttView({
             cursor: "ew-resize",
             backgroundColor: showHandles ? "$color12" : "transparent",
             opacity: showHandles ? 0.28 : 0,
-            onPointerDown: e => handleResizePointerDown(task, physicalRightEdge, e),
+            onPointerDown: e => handleResizePointerDown(task, ref, physicalRightEdge, e),
             ...{
               "data-gantt-resize-handle": physicalRightEdge
             }
           })]
-        }), 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);
   };
-  const scrollLocked = drag !== null || resize !== null;
+  const scrollLocked = drag !== null || resize !== null || markerDragging;
   const majorGridColor = "$borderColor";
   const minorGridColor = componentColors.divider;
   const scrollerDirection = {
@@ -823,7 +1043,7 @@ function GanttView({
           },
           children: /* @__PURE__ */jsx(Text, {
             ...knobProps.label,
-            color: componentColors.text.muted,
+            color: knobProps.textAccentColor,
             numberOfLines: 1,
             children: t("Task")
           })
@@ -870,7 +1090,7 @@ function GanttView({
               top: 2,
               width: Math.max(0, band.width - 8),
               ...knobProps.label,
-              color: componentColors.text.secondary,
+              color: knobProps.textAccentColor,
               numberOfLines: 1,
               children: band.label
             }, band.key)), ticks.map(tick => /* @__PURE__ */jsx(Text, {
@@ -882,7 +1102,7 @@ function GanttView({
               }),
               top: axisHeight / 2,
               ...knobProps.label,
-              color: tick.major ? componentColors.text.secondary : componentColors.text.muted,
+              color: knobProps.textAccentColor,
               numberOfLines: 1,
               children: formatDayOfMonth(tick.date)
             }, tick.date.toISOString())), /* @__PURE__ */jsx(YStack, {
@@ -893,6 +1113,53 @@ function GanttView({
               height: hairlineWidth,
               backgroundColor: componentColors.divider,
               pointerEvents: "none"
+            }), 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: e => handleMarkerPointerDown(e)
+                } : null),
+                ...markerNativeProps,
+                onKeyDown: ke => {
+                  if (ke.key !== "ArrowLeft" && ke.key !== "ArrowRight") return;
+                  ke.preventDefault?.();
+                  ke.stopPropagation?.();
+                  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"
+                })
+              })]
             })]
           })
         })]
@@ -909,9 +1176,11 @@ function GanttView({
             ...hairlineEnd,
             borderColor: "$borderColor",
             children: 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;
+              const firstKey = refs[0]?.key ?? task.id;
               return /* @__PURE__ */jsx(XStack, {
                 height: rowHeight,
                 alignItems: "center",
@@ -926,11 +1195,11 @@ function GanttView({
                 },
                 onPress: onItemPress ? () => {
                   if (suppressClickRef.current) return;
-                  setFocusedBarId(task.id);
+                  setFocusedBarId(firstKey);
                   setBarKeyboardRing(false);
                   onItemPress(task);
                 } : () => {
-                  setFocusedBarId(task.id);
+                  setFocusedBarId(firstKey);
                   setBarKeyboardRing(false);
                 },
                 ...{
@@ -1001,7 +1270,8 @@ function GanttView({
                   backgroundColor: tick.major ? majorGridColor : minorGridColor,
                   pointerEvents: "none"
                 }, tick.date.toISOString())), 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 /* @__PURE__ */jsx(XStack, {
@@ -1017,8 +1287,21 @@ function GanttView({
                     ...{
                       "data-gantt-row": task.id
                     },
-                    children: renderBar(task)
+                    children: refs.map(ref => renderBar(task, ref))
                   }, task.id);
+                }), 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"
+                  }
                 }), todayX !== null && /* @__PURE__ */jsx(YStack, {
                   position: "absolute",
                   ...canvasPos(todayX - 1),