@comitor/ui 3.11.0 → 3.12.0

package/dist/components/composite/gantt.js

@@ -0,0 +1,1137 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cva } from "class-variance-authority";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { Button } from "../ui/button.js";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group.js";
+import {
+  GANTT_SCALES
+} from "./gantt-constants.js";
+import {
+  computeRange,
+  dayToLocalDate,
+  formatDay,
+  isDependencyViolated,
+  parseDay,
+  routeDependency,
+  SCALE_CONFIG,
+  shiftByUnit,
+  ticksBetween,
+  todayDay,
+  weekday
+} from "./gantt-utils.js";
+const ganttBarVariants = cva(
+  "absolute flex items-center overflow-hidden rounded-md border text-xs font-medium touch-none select-none",
+  {
+    variants: {
+      tone: {
+        neutral: "border-control-edge-strong bg-secondary text-secondary-foreground",
+        primary: "border-primary-ink bg-primary text-primary-foreground",
+        blue: "border-blue-ink bg-blue text-blue-foreground",
+        teal: "border-teal-ink bg-teal text-teal-foreground",
+        green: "border-green-ink bg-green text-green-foreground",
+        yellow: "border-yellow-ink bg-yellow text-yellow-foreground",
+        orange: "border-orange-ink bg-orange text-orange-foreground",
+        red: "border-destructive-ink bg-destructive text-destructive-foreground",
+        purple: "border-purple-ink bg-purple text-purple-foreground",
+        pink: "border-pink-ink bg-pink text-pink-foreground",
+        navy: "border-navy-ink bg-navy text-navy-foreground"
+      }
+    },
+    defaultVariants: { tone: "neutral" }
+  }
+);
+const ganttMarkVariants = cva("", {
+  variants: {
+    tone: {
+      neutral: "bg-foreground",
+      primary: "bg-primary-ink",
+      blue: "bg-blue-ink",
+      teal: "bg-teal-ink",
+      green: "bg-green-ink",
+      yellow: "bg-yellow-ink",
+      orange: "bg-orange-ink",
+      red: "bg-destructive-ink",
+      purple: "bg-purple-ink",
+      pink: "bg-pink-ink",
+      navy: "bg-navy-ink"
+    }
+  },
+  defaultVariants: { tone: "neutral" }
+});
+const HEADER_ROW = 26;
+const MIN_INNER_LABEL = 56;
+const MIN_BAR = 6;
+const SCHEDULE_DAYS = { day: 1, week: 5, month: 14, quarter: 30, year: 90 };
+const EDGE_SCROLL = 40;
+function useCoarsePointer() {
+  const subscribe = React.useCallback((onChange) => {
+    const mql = window.matchMedia("(pointer: coarse)");
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return React.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia("(pointer: coarse)").matches,
+    () => false
+  );
+}
+function Gantt({
+  items,
+  dependencies = [],
+  scale: scaleProp,
+  defaultScale = "week",
+  onScaleChange,
+  today: todayProp,
+  weekendDays = [0, 6],
+  nonWorkingDays,
+  weekStartsOn = 1,
+  range: rangeProp,
+  readOnly = false,
+  onItemChange,
+  onItemOpen,
+  onExpandedChange,
+  onDependencyCreate,
+  onDependencyClick,
+  rowHeight: rowHeightProp,
+  sidebarWidth = 280,
+  sidebarTitle,
+  renderSidebarItem,
+  toolbar = true,
+  labels,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const t = useComitorLabels("gantt", labels);
+  const { locale } = useComitorLocale();
+  const coarse = useCoarsePointer();
+  const rowHeight = rowHeightProp ?? (coarse ? 44 : 36);
+  const barHeight = rowHeight - 12;
+  const [scaleState, setScaleState] = React.useState(defaultScale);
+  const scale = scaleProp ?? scaleState;
+  const setScale = React.useCallback(
+    (next) => {
+      if (scaleProp === void 0) setScaleState(next);
+      onScaleChange?.(next);
+    },
+    [scaleProp, onScaleChange]
+  );
+  const config = SCALE_CONFIG[scale];
+  const ppd = config.pxPerDay;
+  const headerHeight = config.major ? HEADER_ROW * 2 : HEADER_ROW;
+  const today = React.useMemo(() => parseDay(todayProp) ?? todayDay(), [todayProp]);
+  const canEdit = !readOnly && !!onItemChange;
+  const rows = React.useMemo(
+    () => items.map((item, index) => {
+      const start = parseDay(item.start);
+      let end = item.type === "milestone" ? start : parseDay(item.end);
+      if (start != null && (end == null || end < start)) end = start;
+      return { item, index, start: end == null ? null : start, end: start == null ? null : end };
+    }),
+    [items]
+  );
+  const indexById = React.useMemo(() => new Map(rows.map((row) => [row.item.id, row.index])), [rows]);
+  const range = React.useMemo(() => {
+    const days = [];
+    for (const row of rows) {
+      if (row.start != null && row.end != null) days.push(row.start, row.end);
+    }
+    const override = rangeProp ? { start: parseDay(rangeProp.start), end: parseDay(rangeProp.end) } : void 0;
+    return computeRange(days, today, scale, weekStartsOn, override);
+  }, [rows, today, scale, weekStartsOn, rangeProp]);
+  const timelineWidth = Math.round((range.end - range.start) * ppd);
+  const xOf = React.useCallback((day) => (day - range.start) * ppd, [range.start, ppd]);
+  const nonWorking = React.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const value of nonWorkingDays ?? []) {
+      const day = parseDay(value);
+      if (day != null) set.add(day);
+    }
+    return set;
+  }, [nonWorkingDays]);
+  const weekendSet = React.useMemo(() => new Set(weekendDays), [weekendDays]);
+  const isOffDay = React.useCallback(
+    (day) => weekendSet.has(weekday(day)) || nonWorking.has(day),
+    [weekendSet, nonWorking]
+  );
+  const fmt = React.useMemo(
+    () => ({
+      dayNumber: new Intl.DateTimeFormat(locale, { day: "numeric" }),
+      weekdayNarrow: new Intl.DateTimeFormat(locale, { weekday: "narrow" }),
+      dayMonth: new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }),
+      monthShort: new Intl.DateTimeFormat(locale, { month: "short" }),
+      monthYear: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+      year: new Intl.DateTimeFormat(locale, { year: "numeric" }),
+      full: new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" })
+    }),
+    [locale]
+  );
+  const formatFull = React.useCallback((day) => fmt.full.format(dayToLocalDate(day)), [fmt]);
+  const formatShort = React.useCallback((day) => fmt.dayMonth.format(dayToLocalDate(day)), [fmt]);
+  const describeRange = React.useCallback(
+    (row) => row.item.type === "milestone" ? t.milestoneDate(formatFull(row.start)) : t.itemRange(formatFull(row.start), formatFull(row.end), row.end - row.start + 1),
+    [t, formatFull]
+  );
+  const scrollRef = React.useRef(null);
+  const [viewport, setViewport] = React.useState({ left: 0, width: 0 });
+  const readViewport = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setViewport(
+      (prev) => prev.left === el.scrollLeft && prev.width === el.clientWidth ? prev : { left: el.scrollLeft, width: el.clientWidth }
+    );
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    readViewport();
+    const observer = new ResizeObserver(readViewport);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [readViewport]);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => rowHeight,
+    overscan: 8,
+    paddingStart: headerHeight,
+    scrollPaddingStart: headerHeight
+  });
+  React.useEffect(() => {
+    virtualizer.measure();
+  }, [virtualizer, rowHeight, headerHeight]);
+  const virtualRows = virtualizer.getVirtualItems();
+  const firstVisible = virtualRows[0]?.index ?? 0;
+  const lastVisible = virtualRows[virtualRows.length - 1]?.index ?? -1;
+  const visibleWidth = Math.max(0, viewport.width - sidebarWidth);
+  const visible = { from: viewport.left, to: viewport.left + visibleWidth };
+  const anchorRef = React.useRef(null);
+  const placedRef = React.useRef(false);
+  const rangeRef = React.useRef(range);
+  rangeRef.current = range;
+  const ppdRef = React.useRef(ppd);
+  const scrollToDay = React.useCallback(
+    (day, behavior = "auto", ratio = 0.5) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const width = Math.max(0, el.clientWidth - sidebarWidth);
+      el.scrollTo({ left: Math.max(0, xOf(day) - width * ratio), behavior });
+    },
+    [xOf, sidebarWidth]
+  );
+  useIsomorphicLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || el.clientWidth === 0) return;
+    if (!placedRef.current) {
+      placedRef.current = true;
+      scrollToDay(today, "auto", 1 / 3);
+    } else if (anchorRef.current) {
+      scrollToDay(anchorRef.current.day);
+    }
+    anchorRef.current = null;
+    ppdRef.current = ppd;
+    readViewport();
+  }, [ppd, viewport.width > 0]);
+  const changeScale = (next) => {
+    const el = scrollRef.current;
+    if (el && next !== scale) {
+      const center = el.scrollLeft + Math.max(0, el.clientWidth - sidebarWidth) / 2;
+      anchorRef.current = { day: rangeRef.current.start + center / ppdRef.current };
+    }
+    setScale(next);
+  };
+  const [draft, setDraftState] = React.useState(null);
+  const draftRef = React.useRef(null);
+  const setDraft = React.useCallback((next) => {
+    const prev = draftRef.current;
+    if (prev === next || prev && next && prev.id === next.id && prev.start === next.start && prev.end === next.end) {
+      return;
+    }
+    draftRef.current = next;
+    setDraftState(next);
+  }, []);
+  const [linkDraft, setLinkDraft] = React.useState(null);
+  const dragRef = React.useRef(null);
+  const onItemChangeRef = React.useRef(onItemChange);
+  onItemChangeRef.current = onItemChange;
+  const datesOf = (row) => {
+    if (draft && draft.id === row.item.id) return draft;
+    if (row.start == null || row.end == null) return null;
+    return { start: row.start, end: row.end };
+  };
+  const geometryOf = (row) => {
+    const dates = datesOf(row);
+    if (!dates) return null;
+    const y = row.index * rowHeight + rowHeight / 2;
+    if (row.item.type === "milestone") {
+      const cx = xOf(dates.start) + ppd / 2;
+      const half = barHeight / 2 - 5;
+      return { x1: cx - half, x2: cx + half, y, ...dates };
+    }
+    const x1 = xOf(dates.start);
+    const x2 = Math.max(xOf(dates.end + 1), x1 + MIN_BAR);
+    return { x1, x2, y, ...dates };
+  };
+  const toTimeline = (clientX, clientY) => {
+    const el = scrollRef.current;
+    if (!el) return { x: 0, y: 0 };
+    const rect = el.getBoundingClientRect();
+    return {
+      x: clientX - rect.left + el.scrollLeft - sidebarWidth,
+      y: clientY - rect.top + el.scrollTop - headerHeight
+    };
+  };
+  const autoScroll = (clientX) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (clientX < rect.left + sidebarWidth + EDGE_SCROLL) el.scrollLeft -= 12;
+    else if (clientX > rect.right - EDGE_SCROLL) el.scrollLeft += 12;
+  };
+  const startDrag = (event, row, mode) => {
+    if (event.button !== 0 || !canEdit || row.item.readOnly || row.item.type === "summary") return;
+    const dates = datesOf(row);
+    if (!dates) return;
+    event.preventDefault();
+    event.stopPropagation();
+    focusRow(row.index, false);
+    dragRef.current = {
+      id: row.item.id,
+      mode: row.item.type === "milestone" ? "move" : mode,
+      originX: event.clientX,
+      originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
+      start: dates.start,
+      end: dates.end,
+      moved: false
+    };
+    const onMove = (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      autoScroll(e.clientX);
+      const scrolled = (scrollRef.current?.scrollLeft ?? 0) - drag.originScrollLeft;
+      const dx = e.clientX - drag.originX + scrolled;
+      if (Math.abs(dx) > 3) drag.moved = true;
+      const delta = Math.round(dx / ppd);
+      let start = drag.start;
+      let end = drag.end;
+      if (drag.mode === "move") {
+        start += delta;
+        end += delta;
+      } else if (drag.mode === "resize-start") {
+        start = Math.min(drag.start + delta, drag.end);
+      } else {
+        end = Math.max(drag.end + delta, drag.start);
+      }
+      setDraft({ id: drag.id, start, end });
+    };
+    const finish = (commit) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      window.removeEventListener("keydown", onKey, true);
+      const drag = dragRef.current;
+      dragRef.current = null;
+      const current = draftRef.current;
+      setDraft(null);
+      if (commit && drag && current && (current.start !== drag.start || current.end !== drag.end)) {
+        onItemChangeRef.current?.({
+          id: drag.id,
+          start: formatDay(current.start),
+          end: formatDay(current.end),
+          kind: drag.mode
+        });
+      }
+    };
+    const onUp = () => finish(true);
+    const onCancel = () => finish(false);
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        finish(false);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onKey, true);
+  };
+  const startLink = (event, row) => {
+    if (event.button !== 0 || !onDependencyCreate) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const from = row.item.id;
+    const update = (e) => {
+      autoScroll(e.clientX);
+      const point = toTimeline(e.clientX, e.clientY);
+      const index = Math.floor(point.y / rowHeight);
+      const target = rows[index];
+      const valid = target && target.item.id !== from && target.start != null && target.item.type !== "summary" ? target.item.id : null;
+      setLinkDraft({ from, x: point.x, y: point.y, target: valid });
+    };
+    const end = (commit, e) => {
+      window.removeEventListener("pointermove", update);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      setLinkDraft(null);
+      if (!commit || !e) return;
+      const point = toTimeline(e.clientX, e.clientY);
+      const target = rows[Math.floor(point.y / rowHeight)];
+      if (target && target.item.id !== from && target.start != null && target.item.type !== "summary") {
+        onDependencyCreate({ from, to: target.item.id, type: "finish-to-start" });
+      }
+    };
+    const onUp = (e) => end(true, e);
+    const onCancel = () => end(false);
+    window.addEventListener("pointermove", update);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    update(event.nativeEvent);
+  };
+  const [hover, setHover] = React.useState(null);
+  const onPointerMove = (event) => {
+    if (dragRef.current || event.pointerType === "touch") return;
+    const point = toTimeline(event.clientX, event.clientY);
+    const index = Math.floor(point.y / rowHeight);
+    const inTrack = point.x >= viewport.left && point.y >= 0 && index < rows.length;
+    const next = inTrack ? { index, day: range.start + Math.floor(point.x / ppd) } : null;
+    setHover((prev) => prev?.index === next?.index && prev?.day === next?.day ? prev : next);
+  };
+  const schedule = (row, day) => {
+    if (!canEdit || row.item.readOnly) return;
+    const length = row.item.type === "milestone" ? 1 : SCHEDULE_DAYS[scale];
+    onItemChange?.({ id: row.item.id, start: formatDay(day), end: formatDay(day + length - 1), kind: "schedule" });
+  };
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+  const pendingFocusRef = React.useRef(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const focusIndex = Math.min(focusedIndex, Math.max(0, rows.length - 1));
+  const focusRow = (index, scroll = true) => {
+    const clamped = Math.max(0, Math.min(rows.length - 1, index));
+    setFocusedIndex(clamped);
+    pendingFocusRef.current = clamped;
+    if (scroll) virtualizer.scrollToIndex(clamped, { align: "auto" });
+  };
+  React.useEffect(() => {
+    const index = pendingFocusRef.current;
+    if (index == null) return;
+    const el = scrollRef.current?.querySelector(`[data-gantt-row="${index}"]`);
+    if (el) {
+      pendingFocusRef.current = null;
+      if (document.activeElement !== el) el.focus({ preventScroll: true });
+    }
+  }, [focusIndex, virtualRows]);
+  const revealBar = (geometry) => {
+    const el = scrollRef.current;
+    if (!el || !geometry) return;
+    const width = Math.max(0, el.clientWidth - sidebarWidth);
+    if (geometry.x2 < el.scrollLeft + 24 || geometry.x1 > el.scrollLeft + width - 24) {
+      el.scrollLeft = Math.max(0, geometry.x1 - Math.min(96, width / 4));
+    }
+  };
+  const commitKeyboard = (row, start, end, kind) => {
+    if (!onItemChange) return;
+    onItemChange({ id: row.item.id, start: formatDay(start), end: formatDay(end), kind });
+    const text = row.item.type === "milestone" ? formatFull(start) : `${formatFull(start)} \u2013 ${formatFull(end)}`;
+    setAnnouncement(t.rescheduled(row.item.title, text));
+    revealBar({ x1: xOf(start), x2: xOf(end + 1) });
+  };
+  const onRowKeyDown = (event, row) => {
+    if (event.target !== event.currentTarget) return;
+    const page = Math.max(1, Math.floor((scrollRef.current?.clientHeight ?? 0) / rowHeight) - 1);
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focusRow(row.index + 1);
+        revealBar(geometryOf(rows[row.index + 1] ?? row));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        focusRow(row.index - 1);
+        revealBar(geometryOf(rows[row.index - 1] ?? row));
+        return;
+      case "Home":
+        event.preventDefault();
+        focusRow(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focusRow(rows.length - 1);
+        return;
+      case "PageDown":
+        event.preventDefault();
+        focusRow(row.index + page);
+        return;
+      case "PageUp":
+        event.preventDefault();
+        focusRow(row.index - page);
+        return;
+      case "Enter":
+        event.preventDefault();
+        onItemOpen?.(row.item);
+        return;
+      case " ":
+        if (row.item.hasChildren && onExpandedChange) {
+          event.preventDefault();
+          onExpandedChange(row.item.id, !row.item.expanded);
+        }
+        return;
+      case "ArrowLeft":
+      case "ArrowRight": {
+        if (!canEdit || row.item.readOnly || row.item.type === "summary") return;
+        if (row.start == null || row.end == null) return;
+        event.preventDefault();
+        const direction = event.key === "ArrowRight" ? 1 : -1;
+        const milestone = row.item.type === "milestone";
+        if (event.altKey && !milestone) {
+          const step = event.shiftKey ? "resize-start" : "resize-end";
+          if (step === "resize-end") {
+            commitKeyboard(row, row.start, Math.max(row.start, row.end + direction), step);
+          } else {
+            commitKeyboard(row, Math.min(row.end, row.start + direction), row.end, step);
+          }
+          return;
+        }
+        const next = event.shiftKey ? shiftByUnit(row.start, row.end, config.bigStep, direction) : { start: row.start + direction, end: row.end + direction };
+        commitKeyboard(row, next.start, next.end, "move");
+        return;
+      }
+    }
+  };
+  const conflicted = React.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const dep of dependencies) {
+      const a = rows[indexById.get(dep.from) ?? -1];
+      const b = rows[indexById.get(dep.to) ?? -1];
+      if (!a || !b || a.start == null || a.end == null || b.start == null || b.end == null) continue;
+      if (isDependencyViolated(
+        { start: a.start, end: a.end },
+        { start: b.start, end: b.end },
+        dep.type ?? "finish-to-start"
+      )) {
+        set.add(dep.to);
+      }
+    }
+    return set;
+  }, [dependencies, rows, indexById]);
+  const dependencyPaths = [];
+  for (const dep of dependencies) {
+    const a = rows[indexById.get(dep.from) ?? -1];
+    const b = rows[indexById.get(dep.to) ?? -1];
+    if (!a || !b) continue;
+    if (Math.max(a.index, b.index) < firstVisible || Math.min(a.index, b.index) > lastVisible) continue;
+    const ga = geometryOf(a);
+    const gb = geometryOf(b);
+    if (!ga || !gb) continue;
+    const type = dep.type ?? "finish-to-start";
+    dependencyPaths.push({
+      dep,
+      d: routeDependency(ga, gb, type, rowHeight),
+      violated: isDependencyViolated(ga, gb, type),
+      label: t.dependency(a.item.title, b.item.title)
+    });
+  }
+  const overscanPx = 400;
+  const visFrom = range.start + Math.max(0, Math.floor((visible.from - overscanPx) / ppd));
+  const visTo = Math.min(range.end, range.start + Math.ceil((visible.to + overscanPx) / ppd));
+  const minorTicks = viewport.width > 0 ? ticksBetween(visFrom, visTo, config.minor, weekStartsOn) : [];
+  const majorTicks = viewport.width > 0 && config.major ? ticksBetween(visFrom, visTo, config.major, weekStartsOn) : [];
+  const minorLabel = (day) => {
+    const date = dayToLocalDate(day);
+    switch (config.minor) {
+      case "day":
+        return fmt.dayNumber.format(date);
+      case "week":
+        return fmt.dayMonth.format(date);
+      case "month":
+        return fmt.monthShort.format(date);
+      case "quarter":
+        return t.quarter(Math.floor(date.getMonth() / 3) + 1, date.getFullYear());
+      default:
+        return fmt.year.format(date);
+    }
+  };
+  const majorLabel = (day) => config.major === "month" ? fmt.monthYear.format(dayToLocalDate(day)) : fmt.year.format(dayToLocalDate(day));
+  const offBands = [];
+  if (config.shadeDays && viewport.width > 0) {
+    for (let day = visFrom; day < visTo; day++) {
+      if (!isOffDay(day)) continue;
+      const last = offBands[offBands.length - 1];
+      if (last && last.end === day) last.end = day + 1;
+      else offBands.push({ start: day, end: day + 1 });
+    }
+  }
+  const rowsHeight = rows.length * rowHeight;
+  const totalHeight = headerHeight + rowsHeight;
+  const totalWidth = sidebarWidth + timelineWidth;
+  const todayX = xOf(today) + ppd / 2;
+  const showToday = today >= range.start && today < range.end;
+  const instructionsId = React.useId();
+  const toolbarExtra = typeof toolbar === "boolean" ? null : toolbar;
+  const scaleNames = {
+    day: t.scaleDay,
+    week: t.scaleWeek,
+    month: t.scaleMonth,
+    quarter: t.scaleQuarter,
+    year: t.scaleYear
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "gantt",
+      "data-scale": scale,
+      className: cn("flex min-h-0 flex-col overflow-hidden rounded-lg border bg-card text-card-foreground", className),
+      ...props,
+      children: [
+        toolbar !== false && /* @__PURE__ */ jsxs("div", { "data-slot": "gantt-toolbar", className: "flex flex-wrap items-center gap-2 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx(
+            ToggleGroup,
+            {
+              type: "single",
+              variant: "outline",
+              size: "sm",
+              value: scale,
+              onValueChange: (value) => value && changeScale(value),
+              "aria-label": t.scaleLabel,
+              children: GANTT_SCALES.map((value) => /* @__PURE__ */ jsx(ToggleGroupItem, { value, className: "px-2.5 text-xs", children: scaleNames[value] }, value))
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => scrollToDay(today, "smooth", 1 / 3), children: t.today }),
+          toolbarExtra && /* @__PURE__ */ jsx("div", { className: "ms-auto flex items-center gap-2", children: toolbarExtra })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            "data-slot": "gantt-viewport",
+            className: "relative min-h-0 flex-1 overflow-auto overscroll-contain",
+            onScroll: readViewport,
+            onPointerMove,
+            onPointerLeave: () => setHover(null),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "treegrid",
+                "aria-label": ariaLabel ?? t.label,
+                "aria-rowcount": rows.length + 1,
+                "aria-colcount": 2,
+                "aria-describedby": instructionsId,
+                "aria-readonly": !canEdit || void 0,
+                className: "group/gantt relative",
+                style: { width: totalWidth, height: totalHeight },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "row",
+                      "aria-rowindex": 1,
+                      tabIndex: -1,
+                      className: "sticky top-0 z-40 flex",
+                      style: { height: headerHeight },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "columnheader",
+                            tabIndex: -1,
+                            className: "sticky left-0 z-10 flex items-end border-e border-b bg-card px-3 pb-1.5 font-medium text-muted-foreground text-xs",
+                            style: { width: sidebarWidth },
+                            children: sidebarTitle ?? t.sidebarTitle
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            role: "columnheader",
+                            tabIndex: -1,
+                            "aria-label": t.label,
+                            className: "relative border-b bg-card",
+                            style: { width: timelineWidth },
+                            children: [
+                              majorTicks.map((tick) => /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: "absolute top-0 border-s border-border",
+                                  style: { left: xOf(tick.day), width: (tick.next - tick.day) * ppd, height: HEADER_ROW },
+                                  children: /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: "sticky inline-block whitespace-nowrap px-2 pt-1.5 font-medium text-foreground text-xs",
+                                      style: { left: sidebarWidth },
+                                      children: majorLabel(tick.day)
+                                    }
+                                  )
+                                },
+                                `major-${tick.day}`
+                              )),
+                              minorTicks.map((tick) => {
+                                const width = (tick.next - tick.day) * ppd;
+                                const isToday = config.minor === "day" && tick.day === today;
+                                return /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    title: formatFull(tick.day),
+                                    className: cn(
+                                      "absolute flex items-center border-s border-border text-muted-foreground text-xs tabular-nums",
+                                      config.minor === "day" ? "justify-center" : "px-2"
+                                    ),
+                                    style: { left: xOf(tick.day), width, top: headerHeight - HEADER_ROW, height: HEADER_ROW },
+                                    children: isToday ? /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-primary px-1 font-semibold text-primary-foreground", children: minorLabel(tick.day) }) : /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                                      config.minor === "day" && /* @__PURE__ */ jsx("span", { className: "me-0.5 text-[10px]", children: fmt.weekdayNarrow.format(dayToLocalDate(tick.day)) }),
+                                      minorLabel(tick.day)
+                                    ] })
+                                  },
+                                  `minor-${tick.day}`
+                                );
+                              }),
+                              showToday && config.minor !== "day" && /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: "absolute bottom-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-primary px-1 font-semibold text-[11px] text-primary-foreground",
+                                  style: { left: todayX },
+                                  children: formatShort(today)
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute z-0",
+                      style: { top: headerHeight, left: sidebarWidth, width: timelineWidth, height: rowsHeight },
+                      children: [
+                        offBands.map((band) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "data-slot": "gantt-off-day",
+                            className: "absolute inset-y-0 bg-muted",
+                            style: { left: xOf(band.start), width: (band.end - band.start) * ppd }
+                          },
+                          `off-${band.start}`
+                        )),
+                        minorTicks.map((tick) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "absolute inset-y-0 border-s border-border",
+                            style: { left: xOf(tick.day) }
+                          },
+                          `line-${tick.day}`
+                        )),
+                        showToday && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "data-slot": "gantt-today",
+                            className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-primary-ink",
+                            style: { left: todayX }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute z-10 overflow-visible",
+                      style: { top: headerHeight, left: sidebarWidth },
+                      width: timelineWidth,
+                      height: rowsHeight,
+                      children: [
+                        /* @__PURE__ */ jsxs("defs", { children: [
+                          /* @__PURE__ */ jsx(
+                            "marker",
+                            {
+                              id: `${instructionsId}-arrow`,
+                              viewBox: "0 0 8 8",
+                              refX: "7",
+                              refY: "4",
+                              markerWidth: "7",
+                              markerHeight: "7",
+                              orient: "auto",
+                              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,4 L0,8 z", className: "fill-muted-foreground" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "marker",
+                            {
+                              id: `${instructionsId}-arrow-alert`,
+                              viewBox: "0 0 8 8",
+                              refX: "7",
+                              refY: "4",
+                              markerWidth: "7",
+                              markerHeight: "7",
+                              orient: "auto",
+                              children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,4 L0,8 z", className: "fill-destructive-ink" })
+                            }
+                          )
+                        ] }),
+                        dependencyPaths.map(({ dep, d, violated, label }) => {
+                          const alert = violated || dep.critical;
+                          return /* @__PURE__ */ jsxs(
+                            "g",
+                            {
+                              "data-slot": "gantt-dependency",
+                              "data-critical": dep.critical || void 0,
+                              "data-conflict": violated || void 0,
+                              children: [
+                                /* @__PURE__ */ jsx("title", { children: label }),
+                                /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d,
+                                    fill: "none",
+                                    strokeWidth: dep.critical ? 2 : 1.5,
+                                    strokeDasharray: violated ? "4 3" : void 0,
+                                    markerEnd: `url(#${instructionsId}-${alert ? "arrow-alert" : "arrow"})`,
+                                    className: alert ? "stroke-destructive-ink" : "stroke-muted-foreground"
+                                  }
+                                ),
+                                onDependencyClick && // Vùng bấm rộng 12px dọc theo đường — nét 1,5px thì không ai bấm trúng.
+                                // biome-ignore lint/a11y/noStaticElementInteractions: mũi tên chỉ là lối tắt CHUỘT; app có lối bàn phím riêng
+                                /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d,
+                                    fill: "none",
+                                    stroke: "transparent",
+                                    strokeWidth: 12,
+                                    className: "pointer-events-auto cursor-pointer",
+                                    onClick: () => onDependencyClick(dep)
+                                  }
+                                )
+                              ]
+                            },
+                            dep.id
+                          );
+                        }),
+                        linkDraft && (() => {
+                          const source = rows[indexById.get(linkDraft.from) ?? -1];
+                          const geometry = source ? geometryOf(source) : null;
+                          if (!geometry) return null;
+                          return /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: `M${geometry.x2},${geometry.y} L${linkDraft.x},${linkDraft.y}`,
+                              fill: "none",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "4 3",
+                              markerEnd: `url(#${instructionsId}-arrow)`,
+                              className: "stroke-muted-foreground"
+                            }
+                          );
+                        })()
+                      ]
+                    }
+                  ),
+                  virtualRows.map((virtualRow) => {
+                    const row = rows[virtualRow.index];
+                    if (!row) return null;
+                    const { item } = row;
+                    const geometry = geometryOf(row);
+                    const tone = item.tone ?? "neutral";
+                    const depth = item.depth ?? 0;
+                    const editable = canEdit && !item.readOnly && item.type !== "summary";
+                    const isDragging = draft?.id === item.id;
+                    const isHovered = hover?.index === row.index;
+                    const isLinkTarget = linkDraft?.target === item.id;
+                    const conflict = conflicted.has(item.id);
+                    const description = [
+                      geometry ? describeRange({ item, start: geometry.start, end: geometry.end }) : t.unscheduled,
+                      item.progress != null ? t.progress(Math.round(item.progress)) : null,
+                      item.critical ? t.critical : null,
+                      conflict ? t.conflict : null
+                    ].filter(Boolean).join(". ");
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "row",
+                        "aria-rowindex": row.index + 2,
+                        "aria-level": depth + 1,
+                        "aria-expanded": item.hasChildren ? !!item.expanded : void 0,
+                        "aria-selected": row.index === focusIndex,
+                        tabIndex: row.index === focusIndex ? 0 : -1,
+                        "data-gantt-row": row.index,
+                        "data-slot": "gantt-row",
+                        className: "group/row pointer-events-none absolute left-0 z-20 flex outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring",
+                        style: { top: virtualRow.start, height: rowHeight, width: totalWidth },
+                        onKeyDown: (event) => onRowKeyDown(event, row),
+                        onFocus: (event) => {
+                          setFocusedIndex(row.index);
+                          if (event.target !== event.currentTarget) event.currentTarget.focus({ preventScroll: true });
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              role: "rowheader",
+                              tabIndex: -1,
+                              className: cn(
+                                "pointer-events-auto sticky left-0 z-10 flex min-w-0 items-center gap-1 border-e border-b bg-card pe-2",
+                                isHovered && "bg-muted",
+                                // Dòng đang chọn chỉ tô khi lưới đang giữ focus — rời lưới thì vệt tô không còn
+                                // đứng đó như một lựa chọn thật.
+                                row.index === focusIndex && "group-focus-within/gantt:bg-accent"
+                              ),
+                              style: { width: sidebarWidth, paddingInlineStart: 8 + depth * 16 },
+                              children: [
+                                item.hasChildren ? /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    tabIndex: -1,
+                                    "aria-label": item.expanded ? t.collapse : t.expand,
+                                    className: "flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+                                    onClick: () => onExpandedChange?.(item.id, !item.expanded),
+                                    children: item.expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5 rtl:rotate-180" })
+                                  }
+                                ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-5 shrink-0" }),
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    className: cn(
+                                      "min-w-0 flex-1 truncate text-foreground text-sm",
+                                      item.type === "summary" && "font-semibold",
+                                      onItemOpen && "cursor-pointer"
+                                    ),
+                                    onClick: () => {
+                                      focusRow(row.index, false);
+                                      onItemOpen?.(item);
+                                    },
+                                    children: renderSidebarItem ? renderSidebarItem(item) : item.title
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              role: "gridcell",
+                              tabIndex: -1,
+                              className: cn("relative border-b border-border", isHovered && "bg-muted/40"),
+                              style: { width: timelineWidth },
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: "sr-only", children: description }),
+                                !geometry && editable && // Dòng chưa có ngày: cả dải trục là một vùng bấm để xếp lịch ở ngày dưới con trỏ.
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "pointer-events-auto absolute inset-0 cursor-copy",
+                                    onClick: (event) => {
+                                      const point = toTimeline(event.clientX, event.clientY);
+                                      schedule(row, range.start + Math.floor(point.x / ppd));
+                                    },
+                                    children: isHovered && hover && /* @__PURE__ */ jsx(
+                                      "div",
+                                      {
+                                        className: "absolute flex items-center rounded-md border border-control-edge-strong border-dashed px-2 text-muted-foreground text-xs",
+                                        style: {
+                                          left: xOf(hover.day),
+                                          width: Math.max(SCHEDULE_DAYS[scale] * ppd, 96),
+                                          top: (rowHeight - barHeight) / 2,
+                                          height: barHeight
+                                        },
+                                        children: /* @__PURE__ */ jsx("span", { className: "truncate", children: t.scheduleHint })
+                                      }
+                                    )
+                                  }
+                                ),
+                                geometry && item.type === "milestone" && /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    "aria-hidden": "true",
+                                    "data-slot": "gantt-milestone",
+                                    "data-critical": item.critical || void 0,
+                                    className: cn(
+                                      "pointer-events-auto absolute rotate-45 rounded-[2px]",
+                                      ganttMarkVariants({ tone }),
+                                      item.critical && "outline-2 outline-destructive-ink",
+                                      editable ? "cursor-grab" : "cursor-default",
+                                      isDragging && "cursor-grabbing shadow-overlay"
+                                    ),
+                                    style: {
+                                      left: geometry.x1,
+                                      top: rowHeight / 2 - (geometry.x2 - geometry.x1) / 2,
+                                      width: geometry.x2 - geometry.x1,
+                                      height: geometry.x2 - geometry.x1
+                                    },
+                                    onPointerDown: (event) => startDrag(event, row, "move"),
+                                    onDoubleClick: () => onItemOpen?.(item)
+                                  }
+                                ),
+                                geometry && item.type === "summary" && /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    "aria-hidden": "true",
+                                    "data-slot": "gantt-summary",
+                                    className: cn("absolute h-2 rounded-sm", ganttMarkVariants({ tone })),
+                                    style: { left: geometry.x1, width: geometry.x2 - geometry.x1, top: rowHeight / 2 - 4 }
+                                  }
+                                ),
+                                geometry && (item.type ?? "task") === "task" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsxs(
+                                    "div",
+                                    {
+                                      "aria-hidden": "true",
+                                      "data-slot": "gantt-bar",
+                                      "data-critical": item.critical || void 0,
+                                      "data-conflict": conflict || void 0,
+                                      "data-dragging": isDragging || void 0,
+                                      className: cn(
+                                        ganttBarVariants({ tone }),
+                                        "pointer-events-auto overflow-visible",
+                                        item.critical && "border-2 border-destructive-ink",
+                                        isLinkTarget && "outline-2 outline-offset-2 outline-ring",
+                                        editable ? "cursor-grab" : "cursor-default",
+                                        isDragging && "z-10 cursor-grabbing shadow-overlay"
+                                      ),
+                                      style: {
+                                        left: geometry.x1,
+                                        width: geometry.x2 - geometry.x1,
+                                        top: (rowHeight - barHeight) / 2,
+                                        height: barHeight
+                                      },
+                                      onPointerDown: (event) => startDrag(event, row, "move"),
+                                      onDoubleClick: () => onItemOpen?.(item),
+                                      children: [
+                                        geometry.x2 - geometry.x1 >= MIN_INNER_LABEL && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate px-2", children: item.title }),
+                                        item.progress != null && item.progress > 0 && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: cn(
+                                              "absolute bottom-0 left-0 h-[3px] rounded-bs-md",
+                                              ganttMarkVariants({ tone })
+                                            ),
+                                            style: { width: `${Math.min(100, item.progress)}%` }
+                                          }
+                                        ),
+                                        editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                          !(coarse && geometry.x2 - geometry.x1 < 96) && /* @__PURE__ */ jsx(
+                                            "span",
+                                            {
+                                              "data-slot": "gantt-handle",
+                                              className: cn(
+                                                "absolute inset-y-0 cursor-ew-resize",
+                                                coarse ? "-start-[22px] w-11" : "start-0 w-2"
+                                              ),
+                                              onPointerDown: (event) => startDrag(event, row, "resize-start")
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx(
+                                            "span",
+                                            {
+                                              "data-slot": "gantt-handle",
+                                              className: cn(
+                                                "absolute inset-y-0 cursor-ew-resize",
+                                                coarse ? geometry.x2 - geometry.x1 < 96 ? "-end-11 w-11" : "-end-[22px] w-11" : "end-0 w-2"
+                                              ),
+                                              onPointerDown: (event) => startDrag(event, row, "resize-end")
+                                            }
+                                          )
+                                        ] }),
+                                        onDependencyCreate && editable && !coarse && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            "data-slot": "gantt-link-handle",
+                                            title: t.linkHandle(item.title),
+                                            className: "invisible absolute -end-4 top-1/2 size-2.5 -translate-y-1/2 cursor-crosshair rounded-full bg-primary-ink group-hover/row:visible",
+                                            onPointerDown: (event) => startLink(event, row)
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ),
+                                  geometry.x2 - geometry.x1 < MIN_INNER_LABEL && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "pointer-events-none absolute flex items-center whitespace-nowrap text-foreground text-xs",
+                                      style: {
+                                        left: geometry.x2 + (onDependencyCreate ? 20 : 6),
+                                        top: 0,
+                                        height: rowHeight
+                                      },
+                                      children: item.title
+                                    }
+                                  )
+                                ] }),
+                                geometry && item.type !== "summary" && (isHovered || isDragging) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "pointer-events-none absolute flex -translate-x-full items-center whitespace-nowrap pe-1.5 text-[11px] text-muted-foreground tabular-nums",
+                                      style: { left: geometry.x1, top: 0, height: rowHeight },
+                                      children: formatShort(geometry.start)
+                                    }
+                                  ),
+                                  item.type !== "milestone" && geometry.x2 - geometry.x1 >= MIN_INNER_LABEL && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "pointer-events-none absolute flex items-center whitespace-nowrap ps-1.5 text-[11px] text-muted-foreground tabular-nums",
+                                      style: { left: geometry.x2 + (onDependencyCreate ? 14 : 0), top: 0, height: rowHeight },
+                                      children: formatShort(geometry.end)
+                                    }
+                                  )
+                                ] }),
+                                geometry && viewport.width > 0 && geometry.x2 < visible.from + 4 && /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    tabIndex: -1,
+                                    "aria-label": t.scrollToItem(item.title),
+                                    className: "pointer-events-auto absolute flex size-6 items-center justify-center rounded-full border border-input bg-card text-muted-foreground shadow-control hover:text-foreground",
+                                    style: { left: visible.from + 6, top: rowHeight / 2 - 12 },
+                                    onClick: () => revealBar(geometry),
+                                    children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-3.5" })
+                                  }
+                                ),
+                                geometry && viewport.width > 0 && geometry.x1 > visible.to - 4 && /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    tabIndex: -1,
+                                    "aria-label": t.scrollToItem(item.title),
+                                    className: "pointer-events-auto absolute flex size-6 items-center justify-center rounded-full border border-input bg-card text-muted-foreground shadow-control hover:text-foreground",
+                                    style: { left: visible.to - 30, top: rowHeight / 2 - 12 },
+                                    onClick: () => revealBar(geometry),
+                                    children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5" })
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      item.id
+                    );
+                  })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { id: instructionsId, className: "sr-only", children: t.instructions }),
+        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  Gantt
+};
+//# sourceMappingURL=gantt.js.map