@multiplatform.one/components 6.0.4 → 6.3.0

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

@@ -0,0 +1,931 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { componentColors, sectionHeading } from "../componentColors.native.js";
+import { AsyncBoundary } from "../layouts/AsyncBoundary.native.js";
+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, hairline, hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Button } from "@multiplatform.one/forms";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, Text, XStack, YStack, isWeb } from "tamagui";
+import { barGeometry, clampResizeDayDelta, computeGanttRange, dateToX, dxToDayDelta, formatRangeLabel, formatSpanLabel, ganttTaskAccessibleLabel, generateTicks, rangeDays, resizeSpanByDays, shiftSpanByDays, spanInclusiveDays, todayLineX } from "./ganttMath.native.js";
+var DRAG_THRESHOLD_PX = 4;
+var TOUCH_LONG_PRESS_MS = 300;
+var TOUCH_SLOP_PX = 8;
+var hairlineEnd = isWeb ? {
+  borderInlineEndWidth: hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: hairlineWidth
+};
+var SKELETON_BARS = [{
+  x: 24,
+  width: 120
+}, {
+  x: 96,
+  width: 180
+}, {
+  x: 180,
+  width: 140
+}, {
+  x: 64,
+  width: 220
+}, {
+  x: 240,
+  width: 110
+}];
+function GanttSkeleton(param) {
+  var {
+    labelWidth,
+    rowHeight
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */_jsxs(YStack, {
+    width: "100%",
+    "aria-busy": true,
+    "aria-label": t("Loading"),
+    "data-gantt-skeleton": "true",
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      height: rowHeight,
+      alignItems: "center",
+      ...hairline.bottom,
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsx(XStack, {
+        width: labelWidth,
+        paddingHorizontal: "$3",
+        children: /* @__PURE__ */_jsx(Skeleton, {
+          width: 64,
+          height: 12
+        })
+      }), /* @__PURE__ */_jsx(Skeleton, {
+        width: 220,
+        height: 12
+      })]
+    }), SKELETON_BARS.map(function (bar, i) {
+      return /* @__PURE__ */_jsxs(XStack, {
+        height: rowHeight,
+        alignItems: "center",
+        ...hairline.bottom,
+        borderColor: componentColors.divider,
+        children: [/* @__PURE__ */_jsx(XStack, {
+          width: labelWidth,
+          paddingHorizontal: "$3",
+          children: /* @__PURE__ */_jsx(Skeleton, {
+            width: i % 2 === 0 ? 96 : 72,
+            height: 12
+          })
+        }), /* @__PURE__ */_jsx(YStack, {
+          marginLeft: bar.x,
+          children: /* @__PURE__ */_jsx(Skeleton, {
+            variant: "rounded",
+            width: bar.width,
+            height: Math.max(10, rowHeight - 20)
+          })
+        })]
+      }, i);
+    })]
+  });
+}
+function BarIntentWrap(param) {
+  var {
+    intent,
+    children
+  } = param;
+  if (!intent || intent === "accent") return /* @__PURE__ */_jsx(_Fragment, {
+    children
+  });
+  return /* @__PURE__ */_jsx(Intent, {
+    name: intent,
+    children
+  });
+}
+function GanttView(param) {
+  var {
+    tasks,
+    zoom: initialZoom = "week",
+    onZoomChange,
+    onItemPress,
+    onItemMove,
+    enableItemDrag,
+    isLoading = false,
+    error = null,
+    onRetry,
+    emptyTitle,
+    emptyDescription,
+    height: heightProp,
+    labelWidth = 180,
+    showToday = true,
+    showNavigation = true,
+    showZoomSwitcher = true,
+    firstDayOfWeek = 0,
+    initialDate,
+    ...stackProps
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var [zoom, setZoom] = useState(initialZoom);
+  var rtl = useDirection() === "rtl";
+  var dirSign = rtl ? -1 : 1;
+  var dirSignRef = useRef(dirSign);
+  dirSignRef.current = dirSign;
+  var canvasPos = useCallback(function (x) {
+    return rtl ? {
+      right: x
+    } : {
+      left: x
+    };
+  }, [rtl]);
+  var [announcement, setAnnouncement] = useState("");
+  var sz = knobProps.sizeToken;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 400 : sz === "$5" ? 560 : 480;
+  var rowHeight = sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
+  var axisHeight = sz === "$3" ? 28 : sz === "$5" ? 36 : 32;
+  var pxPerDay = zoom === "day" ? sz === "$3" ? 48 : sz === "$5" ? 80 : 64 : zoom === "week" ? sz === "$3" ? 18 : sz === "$5" ? 30 : 24 : sz === "$3" ? 6 : sz === "$5" ? 10 : 8;
+  var space = knobProps.space;
+  var barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
+  var barHeight = Math.max(10, rowHeight - barInset * 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
+      };
+    });
+  }, [tasks]);
+  var range = useMemo(function () {
+    return computeGanttRange(spans, zoom, /* @__PURE__ */new Date(), firstDayOfWeek);
+  }, [spans, zoom, firstDayOfWeek]);
+  var chartWidth = rangeDays(range) * pxPerDay;
+  var ticks = useMemo(function () {
+    return generateTicks(range, zoom, pxPerDay, firstDayOfWeek);
+  }, [range, zoom, pxPerDay, firstDayOfWeek]);
+  var todayX = showToday ? todayLineX(range, pxPerDay) : null;
+  var rangeLabel = useMemo(function () {
+    return formatRangeLabel(range);
+  }, [range]);
+  var changeZoom = useCallback(function (next) {
+    setZoom(next);
+    onZoomChange === null || onZoomChange === void 0 ? void 0 : onZoomChange(next);
+  }, [onZoomChange]);
+  var hScrollRef = useRef(null);
+  var axisScrollRef = useRef(null);
+  var canvasViewportRef = useRef(null);
+  var pendingRtlAnchorRef = 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));
+    }
+    (_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
+    });
+    (_axisScrollRef_current = axisScrollRef.current) === null || _axisScrollRef_current === void 0 ? void 0 : (_axisScrollRef_current_scrollTo = _axisScrollRef_current.scrollTo) === null || _axisScrollRef_current_scrollTo === void 0 ? void 0 : _axisScrollRef_current_scrollTo.call(_axisScrollRef_current, {
+      x,
+      animated: false
+    });
+  }, [range.start, pxPerDay, labelWidth, rtl, chartWidth]);
+  var scrollToDateRef = useRef(scrollToDate);
+  scrollToDateRef.current = scrollToDate;
+  useEffect(function () {
+    scrollToDateRef.current(initialDate !== null && initialDate !== void 0 ? initialDate : /* @__PURE__ */new Date(), false);
+  },
+  // Re-anchor when the scale changes (zoom flip re-lays the whole canvas)
+  // or the direction flips (the whole canvas mirrors).
+  [zoom, initialDate, rtl]);
+  var handleCanvasScroll = useCallback(function (event) {
+    var _ref;
+    var _event_nativeEvent_contentOffset, _event_nativeEvent, _axisScrollRef_current_scrollTo, _axisScrollRef_current;
+    var x = (_ref = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : (_event_nativeEvent_contentOffset = _event_nativeEvent.contentOffset) === null || _event_nativeEvent_contentOffset === void 0 ? void 0 : _event_nativeEvent_contentOffset.x) !== null && _ref !== void 0 ? _ref : 0;
+    (_axisScrollRef_current = axisScrollRef.current) === null || _axisScrollRef_current === void 0 ? void 0 : (_axisScrollRef_current_scrollTo = _axisScrollRef_current.scrollTo) === null || _axisScrollRef_current_scrollTo === void 0 ? void 0 : _axisScrollRef_current_scrollTo.call(_axisScrollRef_current, {
+      x,
+      animated: false
+    });
+  }, []);
+  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;
+    canvasViewportRef.current = width;
+    var pending = pendingRtlAnchorRef.current;
+    if (pending) {
+      pendingRtlAnchorRef.current = null;
+      scrollToDateRef.current(pending, false);
+    }
+  }, []);
+  var dragEnabled = (enableItemDrag !== null && enableItemDrag !== void 0 ? enableItemDrag : onItemMove !== void 0) && onItemMove !== void 0;
+  var hasDom = isWeb && typeof window !== "undefined" && typeof document !== "undefined";
+  var webDragEnabled = dragEnabled && hasDom;
+  var nativeDragEnabled = dragEnabled && !isWeb;
+  var [drag, setDrag] = useState(null);
+  var [resize, setResize] = useState(null);
+  var suppressClickRef = useRef(false);
+  var dragCleanupRef = useRef(null);
+  var nativeSessionRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      var _dragCleanupRef_current;
+      return (_dragCleanupRef_current = dragCleanupRef.current) === null || _dragCleanupRef_current === void 0 ? void 0 : _dragCleanupRef_current.call(dragCleanupRef);
+    };
+  }, []);
+  var suppressNextClick = useCallback(function () {
+    suppressClickRef.current = true;
+    setTimeout(function () {
+      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));
+    }
+  }, [onItemMove]);
+  var handleBarPointerDown = useCallback(function (task, e) {
+    var _e_stopPropagation, _dragCleanupRef_current;
+    if (!webDragEnabled) 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 isTouch = e.pointerType === "touch";
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var active = false;
+    var ended = false;
+    var liftArmed = !isTouch;
+    var prevUserSelect = "";
+    var longPressTimer = null;
+    var toDayDelta = function toDayDelta2(dx) {
+      return dirSignRef.current * dxToDayDelta(dx, pxPerDay);
+    };
+    var activate = function activate2(dx) {
+      if (active) return;
+      active = true;
+      prevUserSelect = document.body.style.userSelect;
+      document.body.style.userSelect = "none";
+      setDrag({
+        id: task.id,
+        dx,
+        dayDelta: toDayDelta(dx)
+      });
+    };
+    var teardown = function teardown2() {
+      if (ended) return;
+      ended = true;
+      if (longPressTimer) clearTimeout(longPressTimer);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("keydown", onKey, true);
+      if (active) document.body.style.userSelect = prevUserSelect;
+      setDrag(null);
+      dragCleanupRef.current = null;
+    };
+    var onMove = function onMove2(me) {
+      var dx = me.clientX - startX;
+      if (!active) {
+        var travel = Math.hypot(me.clientX - startX, me.clientY - startY);
+        if (isTouch && !liftArmed) {
+          if (travel > TOUCH_SLOP_PX) teardown();
+          return;
+        }
+        if (travel < DRAG_THRESHOLD_PX) return;
+        activate(dx);
+        return;
+      }
+      setDrag({
+        id: task.id,
+        dx,
+        dayDelta: toDayDelta(dx)
+      });
+    };
+    var onUp = function onUp2(ue) {
+      var wasActive = active;
+      var dayDelta = toDayDelta(ue.clientX - startX);
+      teardown();
+      if (!wasActive) return;
+      suppressNextClick();
+      commitDrag(task, dayDelta);
+    };
+    var onKey = function onKey2(ke) {
+      if (ke.key !== "Escape" || !active) return;
+      ke.stopPropagation();
+      teardown();
+      suppressClickRef.current = true;
+      window.addEventListener("pointerup", function () {
+        return setTimeout(function () {
+          suppressClickRef.current = false;
+        }, 0);
+      }, {
+        once: true
+      });
+    };
+    if (isTouch) {
+      longPressTimer = setTimeout(function () {
+        liftArmed = true;
+        activate(0);
+      }, TOUCH_LONG_PRESS_MS);
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("keydown", onKey, true);
+    dragCleanupRef.current = teardown;
+  }, [webDragEnabled, pxPerDay, commitDrag, suppressNextClick]);
+  var handleNativeGrant = useCallback(function (task, e) {
+    var _ref;
+    var _e_nativeEvent;
+    if (!nativeDragEnabled) return;
+    var session = {
+      task,
+      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
+    };
+    session.liftTimer = setTimeout(function () {
+      session.liftTimer = null;
+      if (nativeSessionRef.current !== session) return;
+      session.dragging = true;
+      setDrag({
+        id: task.id,
+        dx: 0,
+        dayDelta: 0
+      });
+    }, TOUCH_LONG_PRESS_MS);
+    nativeSessionRef.current = session;
+  }, [nativeDragEnabled]);
+  var handleNativeMove = useCallback(function (e) {
+    var _ref;
+    var _e_nativeEvent;
+    var session = nativeSessionRef.current;
+    if (!session) return;
+    var dx = ((_ref = (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.pageX) !== null && _ref !== void 0 ? _ref : 0) - session.startX;
+    if (!session.dragging) {
+      if (Math.abs(dx) >= TOUCH_SLOP_PX) {
+        if (session.liftTimer) clearTimeout(session.liftTimer);
+        nativeSessionRef.current = null;
+      }
+      return;
+    }
+    setDrag({
+      id: session.task.id,
+      dx,
+      dayDelta: dirSignRef.current * dxToDayDelta(dx, pxPerDay)
+    });
+  }, [pxPerDay]);
+  var handleNativeRelease = useCallback(function (e) {
+    var _ref;
+    var _e_nativeEvent;
+    var session = nativeSessionRef.current;
+    nativeSessionRef.current = null;
+    if (!session) return;
+    if (session.liftTimer) clearTimeout(session.liftTimer);
+    if (!session.dragging) {
+      onItemPress === null || onItemPress === void 0 ? void 0 : onItemPress(session.task);
+      return;
+    }
+    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);
+  }, [onItemPress, pxPerDay, commitDrag]);
+  var handleNativeTerminate = useCallback(function () {
+    var session = nativeSessionRef.current;
+    if (session === null || session === void 0 ? void 0 : session.liftTimer) clearTimeout(session.liftTimer);
+    nativeSessionRef.current = null;
+    setDrag(null);
+  }, []);
+  var handleResizePointerDown = useCallback(function (task, edge, e) {
+    var _e_stopPropagation, _dragCleanupRef_current;
+    if (!webDragEnabled) 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;
+    var active = false;
+    var ended = false;
+    var prevUserSelect = "";
+    var clampLogicalDx = function clampLogicalDx2(dx) {
+      var logicalDx = dx * sign;
+      return edge === "start" ? Math.min(logicalDx, maxShrinkPx) : Math.max(logicalDx, -maxShrinkPx);
+    };
+    var toDayDelta = function toDayDelta2(dx) {
+      return clampResizeDayDelta(span, edge, dxToDayDelta(clampLogicalDx(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;
+      setResize(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";
+      }
+      setResize({
+        id: task.id,
+        edge,
+        logicalDx: clampLogicalDx(dx),
+        dayDelta: toDayDelta(dx)
+      });
+    };
+    var onUp = function onUp2(ue) {
+      var wasActive = active;
+      var dayDelta = toDayDelta(ue.clientX - startX);
+      teardown();
+      if (!wasActive) return;
+      suppressNextClick();
+      if (dayDelta !== 0) {
+        onItemMove === null || onItemMove === void 0 ? void 0 : onItemMove(task, resizeSpanByDays(span, edge, dayDelta));
+      }
+    };
+    var onKey = function onKey2(ke) {
+      if (ke.key !== "Escape" || !active) return;
+      ke.stopPropagation();
+      teardown();
+      suppressClickRef.current = true;
+      window.addEventListener("pointerup", function () {
+        return setTimeout(function () {
+          suppressClickRef.current = false;
+        }, 0);
+      }, {
+        once: true
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("keydown", onKey, true);
+    dragCleanupRef.current = teardown;
+  }, [webDragEnabled, pxPerDay, onItemMove, suppressNextClick]);
+  var getBarDragProps = useCallback(function (task) {
+    if (webDragEnabled) {
+      return {
+        onPointerDown: function onPointerDown(e) {
+          return handleBarPointerDown(task, e);
+        }
+      };
+    }
+    if (nativeDragEnabled) {
+      return {
+        // Claim the touch so moves continue outside the bar (ScrollView-safe once dragging).
+        onStartShouldSetResponder: function onStartShouldSetResponder() {
+          return true;
+        },
+        onMoveShouldSetResponder: function onMoveShouldSetResponder() {
+          return true;
+        },
+        onResponderTerminationRequest: function onResponderTerminationRequest() {
+          var _nativeSessionRef_current;
+          return !((_nativeSessionRef_current = nativeSessionRef.current) === null || _nativeSessionRef_current === void 0 ? void 0 : _nativeSessionRef_current.dragging);
+        },
+        onResponderGrant: function onResponderGrant(e) {
+          return handleNativeGrant(task, e);
+        },
+        onResponderMove: handleNativeMove,
+        onResponderRelease: handleNativeRelease,
+        onResponderTerminate: handleNativeTerminate
+      };
+    }
+    return {};
+  }, [webDragEnabled, nativeDragEnabled, handleBarPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
+  var handleBarKeyboardMove = useCallback(function (task, key, shiftKey) {
+    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);
+    setAnnouncement(withInterp(t("{{title}} moved to {{range}}"), {
+      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 dragging = activeDrag !== null;
+    var activeResize = resize && resize.id === task.id ? 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 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 handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
+    var physicalLeftEdge = rtl ? "end" : "start";
+    var physicalRightEdge = rtl ? "start" : "end";
+    return /* @__PURE__ */_jsxs(BarIntentWrap, {
+      intent: task.color ? void 0 : task.intent,
+      children: [/* Snapped drop preview (the raw bar tracks the pointer 1:1). */
+      sessionLive && dayDelta !== 0 && previewGeom && /* @__PURE__ */_jsx(YStack, {
+        position: "absolute",
+        ...canvasPos(previewGeom.x),
+        width: previewGeom.width,
+        top: barInset,
+        height: barHeight,
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$accentColor",
+        backgroundColor: "$accentBackground",
+        opacity: 0.25,
+        pointerEvents: "none",
+        "data-gantt-drop-preview": task.id
+      }), /* @__PURE__ */_jsxs(YStack, {
+        position: "absolute",
+        ...canvasPos(geom.x),
+        width: liveWidth,
+        top: barInset,
+        height: barHeight,
+        x: liveTransformX,
+        zIndex: sessionLive ? 3 : 1,
+        ...knobProps.borderRadius,
+        backgroundColor: fill,
+        opacity: sessionLive ? 0.85 : 1,
+        hoverStyle: {
+          opacity: sessionLive ? 0.85 : 0.9
+        },
+        pressStyle: {
+          opacity: 0.8
+        },
+        cursor: webDragEnabled ? "grab" : onItemPress ? "pointer" : void 0,
+        // LC-25: committed/reverted geometry jumps tween on web; the live
+        // drag/resize tracking stays 1:1 (no transition while the session
+        // is live).
+        transition: sessionLive ? void 0 : webLayoutTransition,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ganttTaskAccessibleLabel(task),
+        outlineWidth: 0,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineColor: "$accentColor",
+          outlineStyle: "solid",
+          outlineOffset: 1
+        },
+        onKeyDown: function onKeyDown(ke) {
+          if (ke.key === "Enter" || ke.key === " ") {
+            var _ke_preventDefault, _ke_stopPropagation;
+            (_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);
+            onItemPress === null || onItemPress === void 0 ? void 0 : onItemPress(task);
+            return;
+          }
+          if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled) {
+            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);
+          }
+        },
+        "data-gantt-bar": task.id,
+        ...(nativeDragEnabled ? null : getBarDragProps(task)),
+        // Native drag responders own the tap → press is handled on release.
+        onPress: nativeDragEnabled ? 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;
+          onItemPress === null || onItemPress === void 0 ? void 0 : onItemPress(task);
+        },
+        children: [/* Live date label while dragging (honest preview of the commit). */
+        previewSpan && /* @__PURE__ */_jsx(XStack, {
+          position: "absolute",
+          top: -(axisHeight - 6),
+          ...(rtl ? {
+            right: 0
+          } : {
+            left: 0
+          }),
+          backgroundColor: "$background",
+          ...knobProps.borderRadius,
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          paddingHorizontal: "$2",
+          pointerEvents: "none",
+          zIndex: 4,
+          "data-gantt-drag-label": "true",
+          children: /* @__PURE__ */_jsx(Text, {
+            fontSize: "$1",
+            color: "$color",
+            numberOfLines: 1,
+            children: formatSpanLabel(previewSpan)
+          })
+        }), /* Edge-resize handles (web pointer; native resize deferred). */
+        webDragEnabled && handleWidth > 0 && /* @__PURE__ */_jsxs(_Fragment, {
+          children: [/* @__PURE__ */_jsx(YStack, {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: handleWidth,
+            cursor: "ew-resize",
+            onPointerDown: function onPointerDown(e) {
+              return handleResizePointerDown(task, physicalLeftEdge, e);
+            },
+            "data-gantt-resize-handle": physicalLeftEdge
+          }), /* @__PURE__ */_jsx(YStack, {
+            position: "absolute",
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: handleWidth,
+            cursor: "ew-resize",
+            onPointerDown: function onPointerDown(e) {
+              return handleResizePointerDown(task, physicalRightEdge, e);
+            },
+            "data-gantt-resize-handle": physicalRightEdge
+          })]
+        }),
+        /* Native drag surface: responders live on a plain fill view because
+        the bar's Tamagui pressability would clobber them (Kanban keeps
+        its drag responders off the pressable Card the same way). */
+        nativeDragEnabled && /* @__PURE__ */_jsx(YStack, {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 5,
+          ...getBarDragProps(task)
+        })]
+      })]
+    }, task.id);
+  };
+  var scrollLocked = drag !== null || resize !== null;
+  var majorGridColor = "$borderColor";
+  var minorGridColor = componentColors.divider;
+  var scrollerDirection = {
+    direction: "ltr"
+  };
+  var showSkeleton = !error && isLoading && tasks.length === 0;
+  return /* @__PURE__ */_jsx(AsyncBoundary, {
+    loading: showSkeleton ? /* @__PURE__ */_jsx(GanttSkeleton, {
+      labelWidth,
+      rowHeight
+    }) : false,
+    empty: !error && !isLoading && tasks.length === 0,
+    error,
+    onRetry,
+    emptyTitle: emptyTitle !== null && emptyTitle !== void 0 ? emptyTitle : t("No tasks"),
+    emptyDescription,
+    ...stackProps,
+    children: /* @__PURE__ */_jsxs(YStack, {
+      height,
+      overflow: "hidden",
+      backgroundColor: "$background",
+      // Panel-tier lift follows the elevation knob (LC-18: the gantt frame
+      // is a themed surface, same as Calendar / Kanban columns).
+      elevation: knobProps.elevation,
+      "data-gantt-view": zoom,
+      children: [/* Header */
+      (showNavigation || showZoomSwitcher) && /* @__PURE__ */_jsxs(XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        ...hairline.bottom,
+        borderColor: "$borderColor",
+        children: [showNavigation && /* @__PURE__ */_jsx(Button, {
+          size: knobProps.sizeToken,
+          onPress: function onPress() {
+            return scrollToDate(/* @__PURE__ */new Date(), true);
+          },
+          children: t("Today")
+        }), /* Range title is the panel's section heading — shared scale (LC-17). */
+        /* @__PURE__ */_jsx(Text, {
+          ...knobProps.heading,
+          ...sectionHeading,
+          numberOfLines: 1,
+          children: rangeLabel
+        }), showZoomSwitcher && /* Canonical fused view picker (LC-16 ONE-IMPLEMENTATION). */
+        /* @__PURE__ */_jsx(ViewSwitcher, {
+          views: [{
+            type: "day",
+            label: t("Day")
+          }, {
+            type: "week",
+            label: t("Week")
+          }, {
+            type: "month",
+            label: t("Month")
+          }],
+          currentView: zoom,
+          onViewChange: function onViewChange(val) {
+            return changeZoom(val);
+          }
+        })]
+      }),
+      /* Pinned axis row: the "Task" header cell + the time-axis strip stay
+      put while rows scroll vertically. The strip is a scroll-follower
+      of the canvas scroller (works web + native), so the tick grid and
+      bars can never drift apart horizontally. */
+      /* @__PURE__ */
+      _jsxs(XStack, {
+        ...hairline.bottom,
+        borderColor: "$borderColor",
+        "data-gantt-axis-row": "true",
+        children: [/* @__PURE__ */_jsx(XStack, {
+          width: labelWidth,
+          flexShrink: 0,
+          height: axisHeight,
+          alignItems: "center",
+          paddingHorizontal: "$3",
+          ...hairlineEnd,
+          borderColor: "$borderColor",
+          backgroundColor: componentColors.surface.background,
+          children: /* @__PURE__ */_jsx(Text, {
+            ...knobProps.body,
+            fontSize: "$2",
+            fontWeight: "500",
+            color: componentColors.text.muted,
+            numberOfLines: 1,
+            children: t("Task")
+          })
+        }), /* @__PURE__ */_jsx(ScrollView, {
+          ref: axisScrollRef,
+          horizontal: true,
+          flex: 1,
+          scrollEnabled: false,
+          showsHorizontalScrollIndicator: false,
+          style: scrollerDirection,
+          children: /* @__PURE__ */_jsx(XStack, {
+            width: chartWidth,
+            height: axisHeight,
+            position: "relative",
+            backgroundColor: componentColors.surface.background,
+            "data-gantt-axis": zoom,
+            children: ticks.filter(function (tick) {
+              return tick.label;
+            }).map(function (tick) {
+              return /* @__PURE__ */_jsx(Text, {
+                position: "absolute",
+                ...(rtl ? {
+                  right: tick.x + 4
+                } : {
+                  left: tick.x + 4
+                }),
+                top: axisHeight / 2 - 8,
+                fontSize: "$1",
+                color: componentColors.text.muted,
+                numberOfLines: 1,
+                children: tick.label
+              }, tick.date.toISOString());
+            })
+          })
+        })]
+      }),
+      /* Body: labels + chart share one vertical scroller so rows stay
+      aligned; the chart owns its horizontal scroller so bars never
+      paint past the frame (LC-10). */
+      /* @__PURE__ */
+      _jsx(ScrollView, {
+        flex: 1,
+        scrollEnabled: !scrollLocked,
+        children: /* @__PURE__ */_jsxs(XStack, {
+          "data-gantt-scroll-body": "true",
+          children: [/* Task label column */
+          /* @__PURE__ */_jsx(YStack, {
+            width: labelWidth,
+            flexShrink: 0,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            children: tasks.map(function (task) {
+              return /* @__PURE__ */_jsx(XStack, {
+                height: rowHeight,
+                alignItems: "center",
+                paddingHorizontal: "$3",
+                ...hairline.bottom,
+                borderColor: minorGridColor,
+                cursor: onItemPress ? "pointer" : void 0,
+                hoverStyle: {
+                  backgroundColor: componentColors.surface.background
+                },
+                onPress: onItemPress ? function () {
+                  if (suppressClickRef.current) return;
+                  onItemPress(task);
+                } : void 0,
+                "data-gantt-row-label": task.id,
+                children: /* @__PURE__ */_jsx(Text, {
+                  ...knobProps.body,
+                  fontSize: "$2",
+                  numberOfLines: 1,
+                  color: "$color",
+                  children: task.title
+                })
+              }, task.id);
+            })
+          }), /* Timeline chart */
+          /* @__PURE__ */_jsx(ScrollView, {
+            ref: hScrollRef,
+            horizontal: true,
+            flex: 1,
+            scrollEnabled: !scrollLocked,
+            showsHorizontalScrollIndicator: true,
+            onScroll: handleCanvasScroll,
+            scrollEventThrottle: 16,
+            onLayout: handleCanvasLayout,
+            style: scrollerDirection,
+            children: /* @__PURE__ */_jsx(YStack, {
+              width: chartWidth,
+              position: "relative",
+              "data-gantt-chart": "true",
+              children: (/* Rows + grid + today line */
+              /* @__PURE__ */_jsxs(YStack, {
+                position: "relative",
+                "data-gantt-body": "true",
+                children: [/* Vertical grid lines (under the rows) */
+                ticks.map(function (tick) {
+                  return /* @__PURE__ */_jsx(YStack, {
+                    position: "absolute",
+                    ...canvasPos(tick.x),
+                    top: 0,
+                    bottom: 0,
+                    width: hairlineWidth,
+                    backgroundColor: tick.major ? majorGridColor : minorGridColor,
+                    pointerEvents: "none"
+                  }, tick.date.toISOString());
+                }), /* Task rows */
+                tasks.map(function (task) {
+                  return /* @__PURE__ */_jsx(XStack, {
+                    height: rowHeight,
+                    position: "relative",
+                    ...hairline.bottom,
+                    borderColor: minorGridColor,
+                    "data-gantt-row": task.id,
+                    children: renderBar(task)
+                  }, task.id);
+                }), /* Today line (above bars, non-interactive) */
+                todayX !== null && /* @__PURE__ */_jsx(YStack, {
+                  position: "absolute",
+                  ...canvasPos(todayX - 1),
+                  top: 0,
+                  bottom: 0,
+                  width: 2,
+                  backgroundColor: "$accentBackground",
+                  opacity: 0.9,
+                  pointerEvents: "none",
+                  zIndex: 2,
+                  "data-gantt-today": "true"
+                })]
+              }))
+            })
+          })]
+        })
+      }),
+      /* Screen-reader announcements for keyboard rescheduling (visually
+      hidden — Kanban/TreeView announcer pattern). */
+      /* @__PURE__ */
+      _jsx(YStack, {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        overflow: "hidden",
+        opacity: 0,
+        pointerEvents: "none",
+        "aria-live": "assertive",
+        "aria-atomic": true,
+        "data-gantt-live": "true",
+        children: /* @__PURE__ */_jsx(Text, {
+          children: announcement
+        })
+      })]
+    })
+  });
+}
+export { GanttView };
+//# sourceMappingURL=Gantt.native.js.map