@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/gantt-chart/gantt-chart.js

@@ -0,0 +1,1144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import { DEFAULT_EXPORT_TEXTS, ExportMenu } from "../core/export-menu.js";
+import { formatPercent } from "../core/format.js";
+import {
+  criticalPath,
+  DAY_MS,
+  GANTT_ZOOM_ORDER,
+  GANTT_ZOOMS,
+  ganttDomain,
+  ganttHeader,
+  ganttRows,
+  ganttScale,
+  HOUR_MS,
+  nonWorkingSpans,
+  snapTime
+} from "../core/gantt.js";
+import { EASE_OUT, useEntryAnimation, useReducedMotion } from "../core/motion.js";
+import { formatDate, shortMonth } from "../core/scales/time.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { resolveLabels } from "../core/types.js";
+import { useIsomorphicLayoutEffect } from "../core/use-chart-size.js";
+import { buildTaskListSvg } from "./gantt-export.js";
+import {
+  AnnotationLayer,
+  barBox,
+  DependencyLayer,
+  dependencyLinks,
+  HEADER_HEIGHT,
+  placeAnnotations,
+  TimelineBackdrop,
+  TimelineBars,
+  TimelineHeader
+} from "./gantt-marks.js";
+const DEFAULT_TEXTS = {
+  tasks: "Tasks",
+  start: "Start",
+  end: "End",
+  progress: "Progress",
+  duration: "Duration",
+  milestone: "Milestone",
+  assignee: "Assignee",
+  dependsOn: "Depends on",
+  day: "day",
+  days: "days",
+  hours: "h",
+  today: "Today",
+  zoom: "Zoom",
+  zoomLevels: {
+    hour: "Hours",
+    day: "Days",
+    week: "Weeks",
+    month: "Months",
+    quarter: "Quarters",
+    year: "Year"
+  },
+  zoomShort: { hour: "H", day: "D", week: "W", month: "M", quarter: "Q", year: "Y" },
+  baseline: "Baseline",
+  variance: "Variance",
+  criticalPath: "Critical path",
+  critical: "Critical",
+  slack: "Slack",
+  annotations: "Annotations",
+  exportTexts: DEFAULT_EXPORT_TEXTS,
+  divider: "Resize the task list",
+  keyboardHint: "Up and down move between tasks, left and right collapse or expand. Editable tasks: Alt plus arrows move, Shift plus arrows change the end, plus and minus change the progress.",
+  quarter: (quarter) => `Q${quarter}`
+};
+const TOOLBAR_HEIGHT = 32;
+const TOOLBAR_GAP = 8;
+const BORDER = 2;
+const MIN_PANE = 96;
+function GanttChart({
+  tasks,
+  title,
+  description,
+  zoom: zoomProp,
+  defaultZoom = "day",
+  onZoomChange,
+  zoomLevels = GANTT_ZOOM_ORDER,
+  today = "auto",
+  height,
+  aspectRatio,
+  rowHeight = 36,
+  gridWidth,
+  columns = ["start", "end", "progress"],
+  editable = false,
+  onTaskChange,
+  workingDays = [1, 2, 3, 4, 5],
+  holidays,
+  defaultCollapsed,
+  dependencies = true,
+  showCriticalPath = false,
+  showBaselines = false,
+  annotations,
+  exportable = false,
+  tooltip = true,
+  loading,
+  animate = true,
+  texts: textOverrides,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = resolveLabels(labelOverrides);
+  const texts = {
+    ...DEFAULT_TEXTS,
+    ...textOverrides,
+    zoomLevels: { ...DEFAULT_TEXTS.zoomLevels, ...textOverrides?.zoomLevels },
+    zoomShort: { ...DEFAULT_TEXTS.zoomShort, ...textOverrides?.zoomShort }
+  };
+  const [zoomState, setZoomState] = useState(defaultZoom);
+  const zoom = zoomProp ?? zoomState;
+  const setZoom = (next) => {
+    if (zoomProp == null) setZoomState(next);
+    onZoomChange?.(next);
+  };
+  const [collapsed, setCollapsed] = useState(
+    () => new Set(defaultCollapsed ?? [])
+  );
+  const rows = useMemo(() => ganttRows(tasks, collapsed), [tasks, collapsed]);
+  const allRows = useMemo(() => ganttRows(tasks), [tasks]);
+  const chrome = TOOLBAR_HEIGHT + TOOLBAR_GAP + HEADER_HEIGHT + BORDER + 12;
+  const autoHeight = Math.min(560, Math.max(220, chrome + rows.length * rowHeight));
+  const names = useMemo(() => new Map(tasks.map((task) => [task.id, task.name])), [tasks]);
+  const critical = useMemo(
+    () => showCriticalPath ? criticalPath(tasks) : null,
+    [showCriticalPath, tasks]
+  );
+  const hasBaselines = showBaselines && tasks.some((task) => task.baseline);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height: height ?? autoHeight,
+      aspectRatio,
+      labels,
+      loading,
+      empty: tasks.length === 0,
+      skeleton: "bars",
+      className,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: texts.tasks,
+          categories: allRows.map((row) => `${"\xB7 ".repeat(row.depth)}${row.task.name}`),
+          columns: [
+            {
+              id: "start",
+              name: texts.start,
+              values: allRows.map((row) => formatDate(row.start))
+            },
+            {
+              id: "end",
+              name: texts.end,
+              values: allRows.map((row) => formatDate(displayEnd(row.start, row.end)))
+            },
+            {
+              id: "duration",
+              name: texts.duration,
+              values: allRows.map((row) => durationText(row.end - row.start, texts))
+            },
+            {
+              id: "progress",
+              name: texts.progress,
+              values: allRows.map(
+                (row) => row.task.milestone && !row.parent ? texts.milestone : formatPercent(row.progress)
+              )
+            },
+            {
+              id: "dependsOn",
+              name: texts.dependsOn,
+              values: allRows.map(
+                (row) => (row.task.dependencies ?? []).map((id) => names.get(id) ?? id).join(", ")
+              )
+            },
+            ...hasBaselines ? [
+              {
+                id: "baseline",
+                name: texts.baseline,
+                values: allRows.map(
+                  (row) => row.task.baseline ? `${formatDate(+row.task.baseline.start)} - ${formatDate(+row.task.baseline.end)}` : ""
+                )
+              }
+            ] : [],
+            ...critical ? [
+              {
+                id: "critical",
+                name: texts.criticalPath,
+                values: allRows.map(
+                  (row) => critical.tasks.has(row.task.id) ? texts.critical : ""
+                )
+              }
+            ] : []
+          ]
+        }
+      ),
+      children: (width, drawingHeight) => /* @__PURE__ */ jsx(
+        GanttBody,
+        {
+          width,
+          height: drawingHeight,
+          title,
+          rows,
+          names,
+          zoom,
+          zoomLevels,
+          onZoom: setZoom,
+          today,
+          rowHeight,
+          initialGridWidth: gridWidth,
+          columns,
+          editable,
+          onTaskChange,
+          workingDays,
+          holidays,
+          dependencies,
+          critical,
+          baselines: hasBaselines,
+          annotations,
+          exportable,
+          tooltip,
+          animate,
+          texts,
+          onToggle: (id) => setCollapsed((current) => {
+            const next = new Set(current);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+          })
+        }
+      )
+    }
+  );
+}
+function displayEnd(start, end) {
+  const midnight = new Date(end).setHours(0, 0, 0, 0) === end;
+  return midnight && end - start >= DAY_MS ? end - 1 : end;
+}
+function durationText(ms, texts) {
+  if (ms < DAY_MS) return `${Math.round(ms / HOUR_MS)} ${texts.hours}`;
+  const days = Math.round(ms / DAY_MS);
+  return `${days} ${days === 1 ? texts.day : texts.days}`;
+}
+function clockText(time) {
+  const d = new Date(time);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+function shortDate(time, withTime) {
+  const d = new Date(time);
+  const day = `${d.getDate()} ${shortMonth(d)}`;
+  return withTime ? `${day} ${clockText(time)}` : day;
+}
+const COLUMN_WIDTH = { start: 64, end: 64, progress: 52 };
+const NAME_MIN = 120;
+function GanttBody({
+  width,
+  height,
+  title,
+  rows,
+  names,
+  zoom,
+  zoomLevels,
+  onZoom,
+  today,
+  rowHeight,
+  initialGridWidth,
+  columns,
+  editable,
+  onTaskChange,
+  workingDays,
+  holidays,
+  dependencies,
+  critical,
+  baselines,
+  annotations,
+  exportable,
+  tooltip,
+  animate,
+  texts,
+  onToggle
+}) {
+  const uid = useId().replace(/:/g, "");
+  const reducedMotion = useReducedMotion();
+  const wrapperRef = useRef(null);
+  const scrollerRef = useRef(null);
+  const [scrollbar, setScrollbar] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const next = scroller.offsetWidth - scroller.clientWidth - BORDER;
+    if (next !== scrollbar && next >= 0) setScrollbar(next);
+  });
+  const svgRef = useRef(null);
+  const treeRef = useRef(null);
+  const [split, setSplit] = useState(initialGridWidth ?? null);
+  const [scroll, setScroll] = useState({ left: 0, top: 0 });
+  const [hover, setHover] = useState(
+    null
+  );
+  const [focusRow, setFocusRow] = useState(0);
+  const [focused, setFocused] = useState(false);
+  const [draft, setDraft] = useState(null);
+  const drag = useRef(null);
+  const narrow = width < 440;
+  const defaultGrid = Math.round(Math.min(380, Math.max(120, width * (narrow ? 0.38 : 0.4))));
+  const gridW = Math.round(Math.min(Math.max(split ?? defaultGrid, MIN_PANE), width - MIN_PANE));
+  const viewport = Math.max(MIN_PANE, width - gridW - BORDER - scrollbar);
+  const withTime = zoom === "hour";
+  const visibleColumns = useMemo(() => {
+    let room = gridW - NAME_MIN;
+    const out = [];
+    for (const column of ["progress", "start", "end"]) {
+      if (!columns.includes(column) || room < COLUMN_WIDTH[column]) continue;
+      out.push(column);
+      room -= COLUMN_WIDTH[column];
+    }
+    return ["start", "end", "progress"].filter((column) => out.includes(column));
+  }, [gridW, columns]);
+  const todayTime = today === false ? null : today === "auto" ? Date.now() : +today;
+  const level = GANTT_ZOOMS[zoom];
+  const domainKey = rows.map((row) => `${row.start}-${row.end}`).join("|");
+  const domain = useMemo(() => {
+    const times = rows.flatMap((row) => [row.start, row.end]);
+    if (baselines) {
+      for (const row of rows) {
+        if (row.task.baseline) times.push(+row.task.baseline.start, +row.task.baseline.end);
+      }
+    }
+    for (const a of annotations ?? []) times.push(+a.at, +(a.to ?? a.at));
+    if (todayTime != null) times.push(todayTime);
+    return ganttDomain(times.length ? times : [Date.now()], zoom);
+  }, [domainKey, zoom, baselines, annotations, todayTime != null ? startOfDay(todayTime) : null]);
+  const scale = useMemo(() => ganttScale(domain, zoom, viewport), [domain, zoom, viewport]);
+  const header = useMemo(
+    () => ganttHeader(scale, zoom, { quarter: texts.quarter }),
+    [scale, zoom, texts.quarter]
+  );
+  const shading = useMemo(
+    () => level.shadeNonWorking ? nonWorkingSpans(domain, workingDays, holidays) : [],
+    [level.shadeNonWorking, domain, workingDays, holidays]
+  );
+  const links = useMemo(
+    () => dependencies ? dependencyLinks(rows, scale, rowHeight) : [],
+    [dependencies, rows, scale, rowHeight]
+  );
+  const placed = useMemo(() => placeAnnotations(annotations ?? [], scale), [annotations, scale]);
+  const todayX = todayTime != null && todayTime >= domain[0] && todayTime <= domain[1] ? scale.x(todayTime) : null;
+  const bodyHeight = rows.length * rowHeight;
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const bars = root.querySelectorAll("[data-bar]");
+      const per = Math.min(40, 500 / Math.max(1, bars.length));
+      bars.forEach((bar, i) => {
+        bar.animate(
+          [
+            { transform: "scaleX(0)", opacity: 0 },
+            { transform: "scaleX(1)", opacity: 1 }
+          ],
+          { duration: 520, delay: i * per, easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+    },
+    { disabled: !animate }
+  );
+  const clampedFocus = Math.min(focusRow, Math.max(0, rows.length - 1));
+  useEffect(() => {
+    if (focusRow !== clampedFocus) setFocusRow(clampedFocus);
+  }, [focusRow, clampedFocus]);
+  const scrollToTime = (time, smooth) => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    scroller.scrollTo({
+      left: Math.max(0, scale.x(time) - viewport * 0.2),
+      behavior: smooth && !reducedMotion ? "smooth" : "auto"
+    });
+  };
+  const firstStart = rows[0]?.start;
+  useEffect(() => {
+    const target = todayX != null && todayTime != null ? todayTime : firstStart ?? domain[0];
+    scrollToTime(target, false);
+  }, [zoom]);
+  const ensureVisible = (index) => {
+    const scroller = scrollerRef.current;
+    const row = rows[index];
+    if (!scroller || !row) return;
+    const top = index * rowHeight;
+    const visible = scroller.clientHeight - HEADER_HEIGHT;
+    if (top < scroller.scrollTop) scroller.scrollTop = top;
+    else if (top + rowHeight > scroller.scrollTop + visible) {
+      scroller.scrollTop = top + rowHeight - visible;
+    }
+    const box = barBox(row, scale, rowHeight);
+    if (box.x0 < scroller.scrollLeft || box.x0 > scroller.scrollLeft + viewport - 40) {
+      scroller.scrollLeft = Math.max(0, box.x0 - 24);
+    }
+  };
+  const moveFocus = (index) => {
+    const next = Math.min(Math.max(0, index), rows.length - 1);
+    setFocusRow(next);
+    ensureVisible(next);
+    const item = treeRef.current?.querySelector(`[data-row="${next}"]`);
+    item?.focus({ preventScroll: true });
+  };
+  const commit = (change) => onTaskChange?.(change);
+  const onTreeKey = (event) => {
+    const row = rows[clampedFocus];
+    if (!row) return;
+    const leaf = !row.parent;
+    const canEdit = editable && leaf;
+    const sign = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (canEdit && sign !== 0 && (event.altKey || event.shiftKey)) {
+      const step = level.snap * sign;
+      if (event.altKey || row.task.milestone) {
+        commit({
+          id: row.task.id,
+          start: new Date(row.start + step),
+          end: new Date(row.end + step),
+          progress: row.progress,
+          source: "move"
+        });
+      } else {
+        const end = Math.max(row.start + level.snap, row.end + step);
+        commit({
+          id: row.task.id,
+          start: new Date(row.start),
+          end: new Date(end),
+          progress: row.progress,
+          source: "resize"
+        });
+      }
+      event.preventDefault();
+      return;
+    }
+    if (canEdit && !row.task.milestone && ["+", "=", "-"].includes(event.key)) {
+      const delta = event.key === "-" ? -0.1 : 0.1;
+      const progress = Math.round(Math.min(1, Math.max(0, row.progress + delta)) * 100) / 100;
+      commit({
+        id: row.task.id,
+        start: new Date(row.start),
+        end: new Date(row.end),
+        progress,
+        source: "progress"
+      });
+      event.preventDefault();
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        moveFocus(clampedFocus + 1);
+        break;
+      case "ArrowUp":
+        moveFocus(clampedFocus - 1);
+        break;
+      case "Home":
+        moveFocus(0);
+        break;
+      case "End":
+        moveFocus(rows.length - 1);
+        break;
+      case "ArrowRight":
+        if (row.parent && row.collapsed) onToggle(row.task.id);
+        else if (row.parent) moveFocus(clampedFocus + 1);
+        break;
+      case "ArrowLeft":
+        if (row.parent && !row.collapsed) onToggle(row.task.id);
+        else if (row.depth > 0) {
+          let parent = clampedFocus - 1;
+          while (parent >= 0 && rows[parent].depth >= row.depth) parent -= 1;
+          if (parent >= 0) moveFocus(parent);
+        }
+        break;
+      case "Enter":
+      case " ":
+        if (row.parent) onToggle(row.task.id);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const rowAt = (clientY) => {
+    const svg = svgRef.current;
+    if (!svg) return -1;
+    const index = Math.floor((clientY - svg.getBoundingClientRect().top) / rowHeight);
+    return index >= 0 && index < rows.length ? index : -1;
+  };
+  const onPointerDown = (event) => {
+    if (!editable || event.button !== 0) return;
+    const target = event.target;
+    const handle = target.closest("[data-handle]")?.getAttribute("data-handle");
+    const id = target.closest("[data-task]")?.getAttribute("data-task");
+    const index = rows.findIndex((row2) => row2.task.id === id);
+    const row = rows[index];
+    if (!handle || !row || row.parent) return;
+    const box = barBox(row, scale, rowHeight);
+    const svgLeft = event.currentTarget.getBoundingClientRect().left;
+    drag.current = {
+      id: row.task.id,
+      mode: row.task.milestone ? "move" : handle,
+      originX: event.clientX,
+      start: row.start,
+      end: row.end,
+      progress: row.progress,
+      barLeft: svgLeft + box.x0,
+      barWidth: box.x1 - box.x0,
+      milestone: !!row.task.milestone
+    };
+    setFocusRow(index);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  };
+  const onPointerMove = (event) => {
+    const state = drag.current;
+    if (state) {
+      const dt = (event.clientX - state.originX) / scale.k;
+      const snap = (time) => snapTime(time, level.snap);
+      let next;
+      if (state.mode === "move") {
+        const start = snap(state.start + dt);
+        next = {
+          id: state.id,
+          start,
+          end: start + (state.end - state.start),
+          progress: state.progress
+        };
+      } else if (state.mode === "start") {
+        const start = Math.min(state.end - level.snap, snap(state.start + dt));
+        next = { id: state.id, start, end: state.end, progress: state.progress };
+      } else if (state.mode === "end") {
+        const end = Math.max(state.start + level.snap, snap(state.end + dt));
+        next = { id: state.id, start: state.start, end, progress: state.progress };
+      } else {
+        const ratio = (event.clientX - state.barLeft) / Math.max(1, state.barWidth);
+        next = {
+          id: state.id,
+          start: state.start,
+          end: state.end,
+          progress: Math.round(Math.min(1, Math.max(0, ratio)) * 20) / 20
+        };
+      }
+      setDraft(next);
+      return;
+    }
+    const wrapper = wrapperRef.current?.getBoundingClientRect();
+    const index = rowAt(event.clientY);
+    if (!wrapper || index < 0) {
+      setHover(null);
+      return;
+    }
+    setHover({
+      row: index,
+      x: event.clientX - wrapper.left,
+      y: event.clientY - wrapper.top,
+      onBar: !!event.target.closest("[data-task]")
+    });
+  };
+  const endDrag = (event) => {
+    const state = drag.current;
+    drag.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    if (!state || !draft || draft.id !== state.id) {
+      setDraft(null);
+      return;
+    }
+    const changed = draft.start !== state.start || draft.end !== state.end || draft.progress !== state.progress;
+    if (changed) {
+      commit({
+        id: draft.id,
+        start: new Date(draft.start),
+        end: new Date(draft.end),
+        progress: draft.progress,
+        source: state.mode === "progress" ? "progress" : state.mode === "move" ? "move" : "resize"
+      });
+    }
+    setDraft(null);
+  };
+  const dividerDrag = useRef(null);
+  const onDividerKey = (event) => {
+    const delta = event.key === "ArrowLeft" ? -16 : event.key === "ArrowRight" ? 16 : 0;
+    if (delta) setSplit(gridW + delta);
+    else if (event.key === "Home") setSplit(MIN_PANE);
+    else if (event.key === "End") setSplit(width - MIN_PANE);
+    else return;
+    event.preventDefault();
+  };
+  const activeIndex = draft ? rows.findIndex((row) => row.task.id === draft.id) : hover ? hover.row : focused ? clampedFocus : -1;
+  const activeRow = activeIndex >= 0 ? rows[activeIndex] : void 0;
+  const tipRow = hover?.onBar ? rows[hover.row] : !hover && focused ? activeRow : void 0;
+  const tipSource = tipRow && draft?.id === tipRow.task.id ? { ...tipRow, start: draft.start, end: draft.end, progress: draft.progress } : tipRow;
+  let tipAnchor = null;
+  if (tipSource) {
+    if (hover?.onBar) tipAnchor = { x: hover.x, y: hover.y };
+    else {
+      const box = barBox(tipSource, scale, rowHeight);
+      const index = rows.indexOf(tipRow);
+      tipAnchor = {
+        x: Math.min(width - 8, Math.max(gridW, gridW + box.x1 - scroll.left)),
+        y: TOOLBAR_HEIGHT + TOOLBAR_GAP + HEADER_HEIGHT + index * rowHeight + rowHeight / 2 - scroll.top
+      };
+    }
+  }
+  const describe = (row) => {
+    const parts = [row.task.name];
+    if (row.task.milestone && !row.parent) {
+      parts.push(`${texts.milestone}, ${shortDate(row.start, withTime)}`);
+    } else {
+      parts.push(
+        `${texts.start} ${shortDate(row.start, withTime)}`,
+        `${texts.end} ${shortDate(withTime ? row.end : displayEnd(row.start, row.end), withTime)}`,
+        `${texts.progress} ${formatPercent(row.progress)}`
+      );
+    }
+    const deps = (row.task.dependencies ?? []).map((id) => names.get(id) ?? id);
+    if (deps.length) parts.push(`${texts.dependsOn} ${deps.join(", ")}`);
+    return parts.join(". ");
+  };
+  const tipRows = (row) => {
+    const color = row.task.color ?? (row.parent ? "var(--ink-2)" : "var(--accent-word)");
+    const out = [];
+    if (row.task.milestone && !row.parent) {
+      out.push({
+        id: "date",
+        name: texts.milestone,
+        value: withTime ? `${formatDate(row.start)} ${clockText(row.start)}` : formatDate(row.start),
+        color: row.task.color ?? "var(--ink)",
+        shape: "square"
+      });
+    } else {
+      const endShown = withTime ? row.end : displayEnd(row.start, row.end);
+      out.push(
+        {
+          id: "start",
+          name: texts.start,
+          value: withTime ? `${formatDate(row.start)} ${clockText(row.start)}` : formatDate(row.start),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        {
+          id: "end",
+          name: texts.end,
+          value: withTime ? `${formatDate(endShown)} ${clockText(endShown)}` : formatDate(endShown),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        {
+          id: "duration",
+          name: texts.duration,
+          value: durationText(row.end - row.start, texts),
+          color: "var(--ink-3)",
+          shape: "dot"
+        },
+        {
+          id: "progress",
+          name: texts.progress,
+          value: formatPercent(row.progress),
+          color,
+          shape: "square"
+        }
+      );
+    }
+    if (row.task.assignee) {
+      out.push({
+        id: "assignee",
+        name: texts.assignee,
+        value: row.task.assignee,
+        color: "transparent"
+      });
+    }
+    const plan = row.task.baseline;
+    if (baselines && plan && !row.parent) {
+      const slip = row.end - +plan.end;
+      out.push({
+        id: "baseline",
+        name: texts.baseline,
+        value: `${shortDate(+plan.start, false)} - ${shortDate(+plan.end, false)}`,
+        color: "var(--ink-3)",
+        shape: "dot"
+      });
+      out.push({
+        id: "variance",
+        name: texts.variance,
+        value: `${slip > 0 ? "+" : slip < 0 ? "-" : ""}${durationText(Math.abs(slip), texts)}`,
+        color: slip > 0 ? "var(--danger)" : "var(--chart-up)",
+        shape: "dot",
+        emphasis: slip !== 0
+      });
+    }
+    if (critical && !row.parent) {
+      const isCritical = critical.tasks.has(row.task.id);
+      const slack = critical.slack.get(row.task.id);
+      out.push({
+        id: "critical",
+        name: isCritical ? texts.criticalPath : texts.slack,
+        value: isCritical ? texts.critical : slack == null ? "" : durationText(slack, texts),
+        color: isCritical ? "var(--danger)" : "var(--ink-3)",
+        shape: "dot"
+      });
+    }
+    const deps = (row.task.dependencies ?? []).map((id) => names.get(id) ?? id);
+    if (deps.length) {
+      out.push({
+        id: "deps",
+        name: texts.dependsOn,
+        value: deps.join(", "),
+        color: "transparent",
+        emphasis: true
+      });
+    }
+    return out;
+  };
+  const columnDate = (time) => withTime ? clockText(time) : shortDate(time, false);
+  const hintId = `${uid}-hint`;
+  const gridTemplate = `${gridW}px ${scale.width}px`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "relative flex flex-col",
+      style: { width, height, gap: TOOLBAR_GAP },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center justify-between gap-2",
+            style: { height: TOOLBAR_HEIGHT },
+            children: [
+              /* @__PURE__ */ jsxs("fieldset", { className: "m-0 flex min-w-0 items-center gap-0.5 rounded-button border-0 bg-surface-2 p-0.5", children: [
+                /* @__PURE__ */ jsx("legend", { className: "sr-only", children: texts.zoom }),
+                zoomLevels.map((level2) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": zoom === level2,
+                    "aria-label": texts.zoomLevels[level2],
+                    onClick: () => onZoom(level2),
+                    className: cn(
+                      "cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink @md/chart:px-3",
+                      zoom === level2 ? "bg-surface text-ink shadow-xs" : "text-ink-3 hover:text-ink"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "@md/chart:hidden", "aria-hidden": "true", children: texts.zoomShort[level2] }),
+                      /* @__PURE__ */ jsx("span", { className: "hidden @md/chart:inline", "aria-hidden": "true", children: texts.zoomLevels[level2] })
+                    ]
+                  },
+                  level2
+                ))
+              ] }),
+              critical || baselines ? /* @__PURE__ */ jsxs("ul", { className: "m-0 hidden min-w-0 list-none items-center gap-3 p-0 text-[11.5px] text-ink-3 @xl/chart:flex", children: [
+                critical ? /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "h-2 w-4 rounded-button",
+                      style: { background: "var(--danger)" }
+                    }
+                  ),
+                  texts.criticalPath
+                ] }) : null,
+                baselines ? /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "h-1 w-4 rounded-button",
+                      style: { background: "var(--ink-3)", opacity: 0.55 }
+                    }
+                  ),
+                  texts.baseline
+                ] }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                exportable ? /* @__PURE__ */ jsx(
+                  ExportMenu,
+                  {
+                    title,
+                    texts: texts.exportTexts,
+                    getSvgs: () => Array.from(
+                      scrollerRef.current?.querySelectorAll("svg[data-export-part]") ?? []
+                    ),
+                    getLeading: () => {
+                      const host = wrapperRef.current;
+                      if (!host) return null;
+                      const list = buildTaskListSvg({
+                        rows: rows.map((row) => ({
+                          name: row.task.name,
+                          depth: row.depth,
+                          parent: Boolean(row.parent),
+                          collapsed: Boolean(row.collapsed),
+                          cells: visibleColumns.map(
+                            (column) => column === "start" ? columnDate(row.start) : row.task.milestone && !row.parent ? "" : column === "end" ? columnDate(withTime ? row.end : displayEnd(row.start, row.end)) : formatPercent(row.progress, { decimals: 0 })
+                          )
+                        })),
+                        columns: visibleColumns.map((column) => ({
+                          width: COLUMN_WIDTH[column],
+                          label: column === "start" ? texts.start : column === "end" ? texts.end : texts.progress
+                        })),
+                        tasksLabel: texts.tasks,
+                        width: gridW,
+                        headerHeight: HEADER_HEIGHT,
+                        rowHeight
+                      });
+                      list.setAttribute(
+                        "style",
+                        "position:absolute;left:-99999px;top:0;pointer-events:none"
+                      );
+                      host.appendChild(list);
+                      return list;
+                    }
+                  }
+                ) : null,
+                todayX != null && todayTime != null ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => scrollToTime(todayTime, true),
+                    className: "shrink-0 cursor-pointer rounded-button border-divider bg-surface-control px-3 py-1 font-semibold text-[11.5px] text-ink-2 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-accent-ink",
+                    children: texts.today
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollerRef,
+              onScroll: (event) => setScroll({
+                left: event.currentTarget.scrollLeft,
+                top: event.currentTarget.scrollTop
+              }),
+              className: "absolute inset-0 overflow-auto overscroll-contain rounded-event border-divider bg-surface",
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid",
+                  style: {
+                    gridTemplateColumns: gridTemplate,
+                    gridTemplateRows: `${HEADER_HEIGHT}px ${bodyHeight}px`,
+                    width: gridW + scale.width
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "sticky top-0 left-0 z-30 flex items-end border-r-divider border-b-divider bg-surface",
+                        style: { height: HEADER_HEIGHT, borderBottomColor: "var(--line-strong)" },
+                        children: /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            "aria-hidden": "true",
+                            className: "flex w-full items-center font-semibold text-[11px] text-ink-3",
+                            style: { height: HEADER_HEIGHT / 2 },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate px-3", children: texts.tasks }),
+                              visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "shrink-0 truncate pr-3 text-right",
+                                  style: { width: COLUMN_WIDTH[column] },
+                                  children: column === "start" ? texts.start : column === "end" ? texts.end : texts.progress
+                                },
+                                column
+                              ))
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-surface", children: /* @__PURE__ */ jsx(
+                      TimelineHeader,
+                      {
+                        header,
+                        width: scale.width,
+                        scrollLeft: scroll.left,
+                        viewport,
+                        todayX,
+                        todayLabel: texts.today
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: treeRef,
+                        role: "tree",
+                        "aria-label": texts.tasks,
+                        "aria-describedby": hintId,
+                        onKeyDown: onTreeKey,
+                        onFocus: () => setFocused(true),
+                        onBlur: (event) => {
+                          if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+                        },
+                        onPointerLeave: () => setHover(null),
+                        className: "sticky left-0 z-10 border-r-divider bg-surface",
+                        children: rows.map((row, i) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            "data-row": i,
+                            role: "treeitem",
+                            tabIndex: i === clampedFocus ? 0 : -1,
+                            "aria-level": row.depth + 1,
+                            "aria-expanded": row.parent ? !row.collapsed : void 0,
+                            "aria-selected": i === clampedFocus,
+                            "aria-label": describe(row),
+                            onFocus: () => setFocusRow(i),
+                            onPointerEnter: (event) => {
+                              const wrapper = wrapperRef.current?.getBoundingClientRect();
+                              if (wrapper) {
+                                setHover({
+                                  row: i,
+                                  x: event.clientX - wrapper.left,
+                                  y: event.clientY - wrapper.top,
+                                  onBar: false
+                                });
+                              }
+                            },
+                            className: cn(
+                              "flex items-center text-[12px] outline-none focus-visible:bg-accent-soft focus-visible:shadow-[inset_2px_0_0_var(--accent-word)]",
+                              activeIndex === i && "bg-[var(--chart-grid)]"
+                            ),
+                            style: { height: rowHeight, boxShadow: "inset 0 -1px 0 var(--chart-grid)" },
+                            children: [
+                              /* @__PURE__ */ jsxs(
+                                "span",
+                                {
+                                  className: "flex min-w-0 flex-1 items-center gap-1 pr-2",
+                                  style: { paddingLeft: 8 + row.depth * 14 },
+                                  children: [
+                                    row.parent ? /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        tabIndex: -1,
+                                        "aria-hidden": "true",
+                                        onClick: (event) => {
+                                          event.stopPropagation();
+                                          onToggle(row.task.id);
+                                        },
+                                        className: "grid size-5 shrink-0 cursor-pointer place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-ink",
+                                        children: /* @__PURE__ */ jsx(
+                                          "svg",
+                                          {
+                                            "aria-hidden": "true",
+                                            width: "10",
+                                            height: "10",
+                                            viewBox: "0 0 10 10",
+                                            className: cn(
+                                              "motion-safe:transition-transform",
+                                              !row.collapsed && "rotate-90"
+                                            ),
+                                            children: /* @__PURE__ */ jsx(
+                                              "path",
+                                              {
+                                                d: "M3 1.5 6.5 5 3 8.5",
+                                                fill: "none",
+                                                strokeWidth: "1.6",
+                                                stroke: "currentColor"
+                                              }
+                                            )
+                                          }
+                                        )
+                                      }
+                                    ) : /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0" }),
+                                    row.task.milestone && !row.parent ? /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        "aria-hidden": "true",
+                                        className: "size-2 shrink-0 rotate-45 rounded-[1px]",
+                                        style: { background: row.task.color ?? "var(--ink)" }
+                                      }
+                                    ) : null,
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          "min-w-0 truncate",
+                                          row.parent ? "font-bold text-ink" : "text-ink-2"
+                                        ),
+                                        children: row.task.name
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              visibleColumns.map((column) => /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: "shrink-0 truncate pr-3 text-right text-[11.5px] text-ink-3 tabular-nums",
+                                  style: { width: COLUMN_WIDTH[column] },
+                                  children: column === "start" ? columnDate(row.start) : column === "end" ? row.task.milestone && !row.parent ? "" : columnDate(withTime ? row.end : displayEnd(row.start, row.end)) : row.task.milestone && !row.parent ? "" : formatPercent(row.progress, { decimals: 0 })
+                                },
+                                column
+                              ))
+                            ]
+                          },
+                          row.task.id
+                        ))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        ref: svgRef,
+                        role: "img",
+                        "aria-label": title,
+                        width: scale.width,
+                        height: bodyHeight,
+                        "data-export-part": "",
+                        className: cn("block touch-pan-y select-none", draft && "cursor-grabbing"),
+                        onPointerDown,
+                        onPointerMove,
+                        onPointerUp: endDrag,
+                        onPointerCancel: endDrag,
+                        onPointerLeave: () => {
+                          if (!drag.current) setHover(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            TimelineBackdrop,
+                            {
+                              header,
+                              scale,
+                              shading,
+                              rows: rows.length,
+                              rowHeight,
+                              todayX
+                            }
+                          ),
+                          activeIndex >= 0 ? /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              x: 0,
+                              y: activeIndex * rowHeight,
+                              width: scale.width,
+                              height: rowHeight,
+                              className: "pointer-events-none",
+                              style: { fill: "var(--chart-grid)" }
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsx(AnnotationLayer, { items: placed, height: bodyHeight }),
+                          /* @__PURE__ */ jsx(
+                            DependencyLayer,
+                            {
+                              critical: critical?.links,
+                              links,
+                              activeId: activeRow?.task.id ?? null,
+                              markerId: `${uid}-arrow`
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            TimelineBars,
+                            {
+                              rows,
+                              scale,
+                              rowHeight,
+                              editable,
+                              draft,
+                              critical: critical?.tasks,
+                              baselines
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              tabIndex: 0,
+              "aria-orientation": "vertical",
+              "aria-label": texts.divider,
+              "aria-valuemin": MIN_PANE,
+              "aria-valuemax": width - MIN_PANE,
+              "aria-valuenow": gridW,
+              onKeyDown: onDividerKey,
+              onPointerDown: (event) => {
+                dividerDrag.current = { x: event.clientX, width: gridW };
+                event.currentTarget.setPointerCapture(event.pointerId);
+              },
+              onPointerMove: (event) => {
+                const state = dividerDrag.current;
+                if (state) setSplit(state.width + event.clientX - state.x);
+              },
+              onPointerUp: (event) => {
+                dividerDrag.current = null;
+                event.currentTarget.releasePointerCapture(event.pointerId);
+              },
+              className: "group/divider absolute top-0 bottom-0 z-40 w-2.5 -translate-x-1/2 cursor-col-resize touch-none outline-none",
+              style: { left: gridW + 1 },
+              children: /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 rounded-button bg-transparent group-hover/divider:bg-accent-word group-focus-visible/divider:bg-accent-word motion-safe:transition-colors" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { id: hintId, className: "sr-only", children: texts.keyboardHint }),
+        annotations?.length ? /* @__PURE__ */ jsx("ul", { className: "sr-only", "aria-label": texts.annotations, children: annotations.map((a) => /* @__PURE__ */ jsxs("li", { children: [
+          a.label,
+          ": ",
+          formatDate(+a.at),
+          a.to != null ? ` - ${formatDate(+a.to)}` : ""
+        ] }, a.id)) }) : null,
+        tooltip && tipSource && tipAnchor ? /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            x: tipAnchor.x,
+            y: Math.min(
+              Math.max(tipAnchor.y, Math.min(96, height / 2)),
+              Math.max(height - 96, height / 2)
+            ),
+            containerWidth: width,
+            title: tipSource.task.name,
+            rows: tipRows(tipSource)
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function startOfDay(time) {
+  return new Date(time).setHours(0, 0, 0, 0);
+}
+export {
+  GanttChart
+};