@multiplatform.one/components 6.0.4 → 6.3.0

package/dist/jsx/views/Gantt.mjs

@@ -0,0 +1,851 @@
+import { componentColors, sectionHeading } from "../componentColors.mjs";
+import { AsyncBoundary } from "../layouts/AsyncBoundary.mjs";
+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, hairline, hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Button } from "@multiplatform.one/forms";
+import { 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.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const DRAG_THRESHOLD_PX = 4;
+const TOUCH_LONG_PRESS_MS = 300;
+const TOUCH_SLOP_PX = 8;
+const hairlineEnd = isWeb ? {
+  borderInlineEndWidth: hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: hairlineWidth
+};
+const SKELETON_BARS = [{
+  x: 24,
+  width: 120
+}, {
+  x: 96,
+  width: 180
+}, {
+  x: 180,
+  width: 140
+}, {
+  x: 64,
+  width: 220
+}, {
+  x: 240,
+  width: 110
+}];
+function GanttSkeleton({
+  labelWidth,
+  rowHeight
+}) {
+  const {
+    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((bar, i) => /* @__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({
+  intent,
+  children
+}) {
+  if (!intent || intent === "accent") return /* @__PURE__ */jsx(Fragment, {
+    children
+  });
+  return /* @__PURE__ */jsx(Intent, {
+    name: intent,
+    children
+  });
+}
+function GanttView({
+  tasks,
+  zoom: initialZoom = "week",
+  onZoomChange,
+  onItemPress,
+  onItemMove,
+  enableItemDrag,
+  isLoading = false,
+  error = null,
+  onRetry,
+  emptyTitle,
+  emptyDescription,
+  height: heightProp,
+  labelWidth = 180,
+  showToday = true,
+  showNavigation = true,
+  showZoomSwitcher = true,
+  firstDayOfWeek = 0,
+  initialDate,
+  ...stackProps
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const [zoom, setZoom] = useState(initialZoom);
+  const rtl = useDirection() === "rtl";
+  const dirSign = rtl ? -1 : 1;
+  const dirSignRef = useRef(dirSign);
+  dirSignRef.current = dirSign;
+  const canvasPos = useCallback(x => rtl ? {
+    right: x
+  } : {
+    left: x
+  }, [rtl]);
+  const [announcement, setAnnouncement] = useState("");
+  const sz = knobProps.sizeToken;
+  const height = heightProp ?? (sz === "$3" ? 400 : sz === "$5" ? 560 : 480);
+  const rowHeight = sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
+  const axisHeight = sz === "$3" ? 28 : sz === "$5" ? 36 : 32;
+  const pxPerDay = zoom === "day" ? sz === "$3" ? 48 : sz === "$5" ? 80 : 64 : zoom === "week" ? sz === "$3" ? 18 : sz === "$5" ? 30 : 24 : sz === "$3" ? 6 : sz === "$5" ? 10 : 8;
+  const space = knobProps.space;
+  const barInset = space === "small" ? 4 : space === "large" ? 9 : 6;
+  const barHeight = Math.max(10, rowHeight - barInset * 2);
+  const transition = knobProps.transition;
+  const webLayoutTransition = isWeb ? transition : void 0;
+  const spans = useMemo(() => tasks.map(task => ({
+    start: task.start,
+    end: task.end
+  })), [tasks]);
+  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]);
+  const todayX = showToday ? todayLineX(range, pxPerDay) : null;
+  const rangeLabel = useMemo(() => formatRangeLabel(range), [range]);
+  const changeZoom = useCallback(next => {
+    setZoom(next);
+    onZoomChange?.(next);
+  }, [onZoomChange]);
+  const hScrollRef = useRef(null);
+  const axisScrollRef = useRef(null);
+  const canvasViewportRef = useRef(null);
+  const pendingRtlAnchorRef = 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));
+    }
+    hScrollRef.current?.scrollTo?.({
+      x,
+      animated
+    });
+    axisScrollRef.current?.scrollTo?.({
+      x,
+      animated: false
+    });
+  }, [range.start, pxPerDay, labelWidth, rtl, chartWidth]);
+  const scrollToDateRef = useRef(scrollToDate);
+  scrollToDateRef.current = scrollToDate;
+  useEffect(() => {
+    scrollToDateRef.current(initialDate ?? /* @__PURE__ */new Date(), false);
+  }, [zoom, initialDate, rtl]);
+  const handleCanvasScroll = useCallback(event => {
+    const x = event?.nativeEvent?.contentOffset?.x ?? 0;
+    axisScrollRef.current?.scrollTo?.({
+      x,
+      animated: false
+    });
+  }, []);
+  const handleCanvasLayout = useCallback(event => {
+    const width = event?.nativeEvent?.layout?.width;
+    if (typeof width !== "number") return;
+    canvasViewportRef.current = width;
+    const pending = pendingRtlAnchorRef.current;
+    if (pending) {
+      pendingRtlAnchorRef.current = null;
+      scrollToDateRef.current(pending, false);
+    }
+  }, []);
+  const dragEnabled = (enableItemDrag ?? onItemMove !== void 0) && onItemMove !== void 0;
+  const hasDom = isWeb && typeof window !== "undefined" && typeof document !== "undefined";
+  const webDragEnabled = dragEnabled && hasDom;
+  const nativeDragEnabled = dragEnabled && !isWeb;
+  const [drag, setDrag] = useState(null);
+  const [resize, setResize] = useState(null);
+  const suppressClickRef = useRef(false);
+  const dragCleanupRef = useRef(null);
+  const nativeSessionRef = useRef(null);
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+  const suppressNextClick = useCallback(() => {
+    suppressClickRef.current = true;
+    setTimeout(() => {
+      suppressClickRef.current = false;
+    }, 0);
+  }, []);
+  const commitDrag = useCallback((task, dayDelta) => {
+    if (dayDelta !== 0) {
+      onItemMove?.(task, shiftSpanByDays({
+        start: task.start,
+        end: task.end
+      }, dayDelta));
+    }
+  }, [onItemMove]);
+  const handleBarPointerDown = useCallback((task, e) => {
+    if (!webDragEnabled) return;
+    if (e.button !== void 0 && e.button !== 0) return;
+    e.stopPropagation?.();
+    dragCleanupRef.current?.();
+    const isTouch = e.pointerType === "touch";
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let active = false;
+    let ended = false;
+    let liftArmed = !isTouch;
+    let prevUserSelect = "";
+    let longPressTimer = null;
+    const toDayDelta = dx => dirSignRef.current * dxToDayDelta(dx, pxPerDay);
+    const activate = dx => {
+      if (active) return;
+      active = true;
+      prevUserSelect = document.body.style.userSelect;
+      document.body.style.userSelect = "none";
+      setDrag({
+        id: task.id,
+        dx,
+        dayDelta: toDayDelta(dx)
+      });
+    };
+    const teardown = () => {
+      if (ended) return;
+      ended = true;
+      if (longPressTimer) clearTimeout(longPressTimer);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("keydown", onKey, true);
+      if (active) document.body.style.userSelect = prevUserSelect;
+      setDrag(null);
+      dragCleanupRef.current = null;
+    };
+    const onMove = me => {
+      const dx = me.clientX - startX;
+      if (!active) {
+        const 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)
+      });
+    };
+    const onUp = ue => {
+      const wasActive = active;
+      const dayDelta = toDayDelta(ue.clientX - startX);
+      teardown();
+      if (!wasActive) return;
+      suppressNextClick();
+      commitDrag(task, dayDelta);
+    };
+    const onKey = ke => {
+      if (ke.key !== "Escape" || !active) return;
+      ke.stopPropagation();
+      teardown();
+      suppressClickRef.current = true;
+      window.addEventListener("pointerup", () => setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0), {
+        once: true
+      });
+    };
+    if (isTouch) {
+      longPressTimer = setTimeout(() => {
+        liftArmed = true;
+        activate(0);
+      }, TOUCH_LONG_PRESS_MS);
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("keydown", onKey, true);
+    dragCleanupRef.current = teardown;
+  }, [webDragEnabled, pxPerDay, commitDrag, suppressNextClick]);
+  const handleNativeGrant = useCallback((task, e) => {
+    if (!nativeDragEnabled) return;
+    const session = {
+      task,
+      startX: e.nativeEvent?.pageX ?? 0,
+      dragging: false,
+      liftTimer: null
+    };
+    session.liftTimer = setTimeout(() => {
+      session.liftTimer = null;
+      if (nativeSessionRef.current !== session) return;
+      session.dragging = true;
+      setDrag({
+        id: task.id,
+        dx: 0,
+        dayDelta: 0
+      });
+    }, TOUCH_LONG_PRESS_MS);
+    nativeSessionRef.current = session;
+  }, [nativeDragEnabled]);
+  const handleNativeMove = useCallback(e => {
+    const session = nativeSessionRef.current;
+    if (!session) return;
+    const dx = (e.nativeEvent?.pageX ?? 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]);
+  const handleNativeRelease = useCallback(e => {
+    const session = nativeSessionRef.current;
+    nativeSessionRef.current = null;
+    if (!session) return;
+    if (session.liftTimer) clearTimeout(session.liftTimer);
+    if (!session.dragging) {
+      onItemPress?.(session.task);
+      return;
+    }
+    const dayDelta = dirSignRef.current * dxToDayDelta((e.nativeEvent?.pageX ?? 0) - session.startX, pxPerDay);
+    setDrag(null);
+    commitDrag(session.task, dayDelta);
+  }, [onItemPress, pxPerDay, commitDrag]);
+  const handleNativeTerminate = useCallback(() => {
+    const session = nativeSessionRef.current;
+    if (session?.liftTimer) clearTimeout(session.liftTimer);
+    nativeSessionRef.current = null;
+    setDrag(null);
+  }, []);
+  const handleResizePointerDown = useCallback((task, edge, e) => {
+    if (!webDragEnabled) 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;
+    let active = false;
+    let ended = false;
+    let prevUserSelect = "";
+    const clampLogicalDx = dx => {
+      const logicalDx = dx * sign;
+      return edge === "start" ? Math.min(logicalDx, maxShrinkPx) : Math.max(logicalDx, -maxShrinkPx);
+    };
+    const toDayDelta = dx => clampResizeDayDelta(span, edge, dxToDayDelta(clampLogicalDx(dx), pxPerDay));
+    const teardown = () => {
+      if (ended) return;
+      ended = true;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("keydown", onKey, true);
+      if (active) document.body.style.userSelect = prevUserSelect;
+      setResize(null);
+      dragCleanupRef.current = null;
+    };
+    const onMove = me => {
+      const dx = me.clientX - startX;
+      if (!active) {
+        if (Math.abs(dx) < DRAG_THRESHOLD_PX) return;
+        active = true;
+        prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = "none";
+      }
+      setResize({
+        id: task.id,
+        edge,
+        logicalDx: clampLogicalDx(dx),
+        dayDelta: toDayDelta(dx)
+      });
+    };
+    const onUp = ue => {
+      const wasActive = active;
+      const dayDelta = toDayDelta(ue.clientX - startX);
+      teardown();
+      if (!wasActive) return;
+      suppressNextClick();
+      if (dayDelta !== 0) {
+        onItemMove?.(task, resizeSpanByDays(span, edge, dayDelta));
+      }
+    };
+    const onKey = ke => {
+      if (ke.key !== "Escape" || !active) return;
+      ke.stopPropagation();
+      teardown();
+      suppressClickRef.current = true;
+      window.addEventListener("pointerup", () => setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0), {
+        once: true
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("keydown", onKey, true);
+    dragCleanupRef.current = teardown;
+  }, [webDragEnabled, pxPerDay, onItemMove, suppressNextClick]);
+  const getBarDragProps = useCallback(task => {
+    if (webDragEnabled) {
+      return {
+        onPointerDown: e => handleBarPointerDown(task, e)
+      };
+    }
+    if (nativeDragEnabled) {
+      return {
+        // Claim the touch so moves continue outside the bar (ScrollView-safe once dragging).
+        onStartShouldSetResponder: () => true,
+        onMoveShouldSetResponder: () => true,
+        onResponderTerminationRequest: () => !nativeSessionRef.current?.dragging,
+        onResponderGrant: e => handleNativeGrant(task, e),
+        onResponderMove: handleNativeMove,
+        onResponderRelease: handleNativeRelease,
+        onResponderTerminate: handleNativeTerminate
+      };
+    }
+    return {};
+  }, [webDragEnabled, nativeDragEnabled, handleBarPointerDown, handleNativeGrant, handleNativeMove, handleNativeRelease, handleNativeTerminate]);
+  const handleBarKeyboardMove = useCallback((task, key, shiftKey) => {
+    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);
+    setAnnouncement(withInterp(t("{{title}} moved to {{range}}"), {
+      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 dragging = activeDrag !== null;
+    const activeResize = resize && resize.id === task.id ? resize : null;
+    const resizing = activeResize !== null;
+    const sessionLive = dragging || resizing;
+    const dayDelta = activeDrag?.dayDelta ?? activeResize?.dayDelta ?? 0;
+    const span = {
+      start: task.start,
+      end: task.end
+    };
+    const previewSpan = activeDrag ? shiftSpanByDays(span, dayDelta) : activeResize ? resizeSpanByDays(span, activeResize.edge, activeResize.dayDelta) : null;
+    const previewGeom = previewSpan ? barGeometry(previewSpan, range.start, pxPerDay) : null;
+    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 handleWidth = geom.width >= 24 ? 8 : geom.width >= 12 ? 4 : 0;
+    const physicalLeftEdge = rtl ? "end" : "start";
+    const physicalRightEdge = rtl ? "start" : "end";
+    return /* @__PURE__ */jsxs(BarIntentWrap, {
+      intent: task.color ? void 0 : task.intent,
+      children: [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,
+        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: ke => {
+          if (ke.key === "Enter" || ke.key === " ") {
+            ke.preventDefault?.();
+            ke.stopPropagation?.();
+            onItemPress?.(task);
+            return;
+          }
+          if ((ke.key === "ArrowLeft" || ke.key === "ArrowRight") && dragEnabled) {
+            ke.preventDefault?.();
+            ke.stopPropagation?.();
+            handleBarKeyboardMove(task, ke.key, ke.shiftKey === true);
+          }
+        },
+        ...{
+          "data-gantt-bar": task.id
+        },
+        ...(nativeDragEnabled ? null : getBarDragProps(task)),
+        onPress: nativeDragEnabled ? void 0 : e => {
+          e?.stopPropagation?.();
+          if (suppressClickRef.current) return;
+          onItemPress?.(task);
+        },
+        children: [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)
+          })
+        }), webDragEnabled && handleWidth > 0 && /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(YStack, {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: handleWidth,
+            cursor: "ew-resize",
+            onPointerDown: e => 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: e => handleResizePointerDown(task, physicalRightEdge, e),
+            ...{
+              "data-gantt-resize-handle": physicalRightEdge
+            }
+          })]
+        }), nativeDragEnabled && /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 5,
+          ...getBarDragProps(task)
+        })]
+      })]
+    }, task.id);
+  };
+  const scrollLocked = drag !== null || resize !== null;
+  const majorGridColor = "$borderColor";
+  const minorGridColor = componentColors.divider;
+  const scrollerDirection = {
+    direction: "ltr"
+  };
+  const 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 ?? t("No tasks"),
+    emptyDescription,
+    ...stackProps,
+    children: /* @__PURE__ */jsxs(YStack, {
+      height,
+      overflow: "hidden",
+      backgroundColor: "$background",
+      elevation: knobProps.elevation,
+      ...{
+        "data-gantt-view": zoom
+      },
+      children: [(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: () => scrollToDate(/* @__PURE__ */new Date(), true),
+          children: t("Today")
+        }), /* @__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: val => changeZoom(val)
+        })]
+      }), /* @__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(tick => tick.label).map(tick => /* @__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()))
+          })
+        })]
+      }), /* @__PURE__ */jsx(ScrollView, {
+        flex: 1,
+        scrollEnabled: !scrollLocked,
+        children: /* @__PURE__ */jsxs(XStack, {
+          ...{
+            "data-gantt-scroll-body": "true"
+          },
+          children: [/* @__PURE__ */jsx(YStack, {
+            width: labelWidth,
+            flexShrink: 0,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            children: tasks.map(task => /* @__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 ? () => {
+                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))
+          }), /* @__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: /* @__PURE__ */jsxs(YStack, {
+                position: "relative",
+                ...{
+                  "data-gantt-body": "true"
+                },
+                children: [ticks.map(tick => /* @__PURE__ */jsx(YStack, {
+                  position: "absolute",
+                  ...canvasPos(tick.x),
+                  top: 0,
+                  bottom: 0,
+                  width: hairlineWidth,
+                  backgroundColor: tick.major ? majorGridColor : minorGridColor,
+                  pointerEvents: "none"
+                }, tick.date.toISOString())), tasks.map(task => /* @__PURE__ */jsx(XStack, {
+                  height: rowHeight,
+                  position: "relative",
+                  ...hairline.bottom,
+                  borderColor: minorGridColor,
+                  ...{
+                    "data-gantt-row": task.id
+                  },
+                  children: renderBar(task)
+                }, task.id)), 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"
+                  }
+                })]
+              })
+            })
+          })]
+        })
+      }), /* @__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.mjs.map