gantt-lib 0.112.0 → 0.113.0

package/dist/index.mjs

@@ -557,10 +557,10 @@ function buildTaskRangeFromStart(startDate, duration, businessDays = false, week
       end: parseDateOnly(addBusinessDays(normalizedStart, duration, weekendPredicate))
     };
   }
-  const DAY_MS5 = 24 * 60 * 60 * 1e3;
+  const DAY_MS6 = 24 * 60 * 60 * 1e3;
   return {
     start: normalizedStart,
-    end: new Date(normalizedStart.getTime() + (Math.max(1, duration) - 1) * DAY_MS5)
+    end: new Date(normalizedStart.getTime() + (Math.max(1, duration) - 1) * DAY_MS6)
   };
 }
 function buildTaskRangeFromEnd(endDate, duration, businessDays = false, weekendPredicate, snapDirection = -1) {
@@ -571,9 +571,9 @@ function buildTaskRangeFromEnd(endDate, duration, businessDays = false, weekendP
       end: normalizedEnd
     };
   }
-  const DAY_MS5 = 24 * 60 * 60 * 1e3;
+  const DAY_MS6 = 24 * 60 * 60 * 1e3;
   return {
-    start: new Date(normalizedEnd.getTime() - (Math.max(1, duration) - 1) * DAY_MS5),
+    start: new Date(normalizedEnd.getTime() - (Math.max(1, duration) - 1) * DAY_MS6),
     end: normalizedEnd
   };
 }
@@ -988,13 +988,13 @@ function computeParentProgress(parentId, tasks) {
   if (children.length === 0) {
     return 0;
   }
-  const DAY_MS5 = 24 * 60 * 60 * 1e3;
+  const DAY_MS6 = 24 * 60 * 60 * 1e3;
   let totalWeight = 0;
   let weightedSum = 0;
   for (const child of children) {
     const start = new Date(child.startDate).getTime();
     const end = new Date(child.endDate).getTime();
-    const duration = (end - start + DAY_MS5) / DAY_MS5;
+    const duration = (end - start + DAY_MS6) / DAY_MS6;
     const progress = child.progress ?? 0;
     totalWeight += duration;
     weightedSum += duration * progress;
@@ -10448,8 +10448,9 @@ function TableMatrix({
 }
 
 // src/components/PlanFactMatrix/PlanFactMatrix.tsx
-import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef10, useState as useState10 } from "react";
+import React15, { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef10, useState as useState10 } from "react";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var DAY_MS5 = 24 * 60 * 60 * 1e3;
 function joinClasses2(...values) {
   return values.filter(Boolean).join(" ");
 }
@@ -10472,13 +10473,25 @@ function parseNumberInput(value) {
   }
   return parsed;
 }
-function isDateWithinTask(task, date) {
+function getDateOnlyMs(date) {
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+}
+function getPlannedIndexRange(task, rangeStartMs, rangeLength) {
+  if (rangeLength <= 0) return null;
   const start = parseUTCDate(task.startDate);
   const end = parseUTCDate(task.endDate);
-  const dateMs = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
-  const startMs = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());
-  const endMs = Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate());
-  return startMs <= dateMs && dateMs <= endMs;
+  const startIndex = Math.ceil((getDateOnlyMs(start) - rangeStartMs) / DAY_MS5);
+  const endIndex = Math.floor((getDateOnlyMs(end) - rangeStartMs) / DAY_MS5);
+  const clampedStartIndex = Math.max(0, startIndex);
+  const clampedEndIndex = Math.min(rangeLength - 1, endIndex);
+  if (clampedStartIndex > clampedEndIndex) return null;
+  return {
+    startIndex: clampedStartIndex,
+    endIndex: clampedEndIndex
+  };
+}
+function isDateIndexWithinPlannedRange(dateIndex, range) {
+  return !!range && range.startIndex <= dateIndex && dateIndex <= range.endIndex;
 }
 function formatValue(value) {
   if (value === void 0) return "";
@@ -10577,6 +10590,261 @@ function PlanFactCellEditor({
     }
   );
 }
+function getCellSignatureForTask(cell, taskId) {
+  return cell?.taskId === taskId ? `${cell.dateIndex}:${cell.kind}` : "";
+}
+function getEditingCellSignatureForTask(cell, taskId) {
+  return cell?.taskId === taskId ? `${cell.dateIndex}:${cell.kind}:${cell.startValue ?? ""}` : "";
+}
+function getRangeAnchorSignatureForTask(range, taskId) {
+  return range?.anchor.taskId === taskId ? `${range.anchor.dateIndex}:${range.anchor.kind}` : "";
+}
+function doesRangeTouchRow(bounds, rowIndex) {
+  if (!bounds) return false;
+  const firstSubrowIndex = rowIndex * 2;
+  const lastSubrowIndex = firstSubrowIndex + 1;
+  return bounds.fromSubrowIndex <= lastSubrowIndex && bounds.toSubrowIndex >= firstSubrowIndex;
+}
+function areRangeBoundsEqual(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.fromDateIndex === right.fromDateIndex && left.toDateIndex === right.toDateIndex && left.fromSubrowIndex === right.fromSubrowIndex && left.toSubrowIndex === right.toSubrowIndex;
+}
+function PlanFactRowInner({
+  task,
+  rowIndex,
+  dateRange,
+  dateKeys,
+  renderedDateIndices,
+  rowHeight,
+  subrowHeight,
+  dayWidth,
+  plannedRange,
+  todayDateIndex,
+  isParent,
+  isHighlighted,
+  selectedTaskId,
+  activeCell,
+  editingCell,
+  selectedRange,
+  renderedRangeBounds,
+  didDragSelectRef,
+  isSelectingRef,
+  isFillDraggingRef,
+  onTaskSelect,
+  selectSingleCell,
+  queueHoverCellUpdate,
+  setActiveCell,
+  setEditingCell,
+  setFillRange,
+  clearSelectedCells,
+  commitCell,
+  commitSelectedCells,
+  moveActiveCell,
+  extendSelectedRange,
+  focusCell,
+  showOverflowTooltip,
+  hideOverflowTooltip
+}) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      "data-gantt-task-row-id": task.id,
+      className: joinClasses2(
+        "gantt-pf-row",
+        isParent && "gantt-pf-row-parent",
+        selectedTaskId === task.id && "gantt-pf-row-selected",
+        isHighlighted && "gantt-pf-row-highlighted"
+      ),
+      style: {
+        top: `${rowIndex * rowHeight}px`,
+        height: `${rowHeight}px`,
+        gridTemplateColumns: `repeat(${dateRange.length}, ${dayWidth}px)`,
+        ["--gantt-pf-today-left"]: todayDateIndex !== void 0 && todayDateIndex >= 0 ? `${todayDateIndex * dayWidth}px` : void 0
+      },
+      onClick: () => onTaskSelect?.(task.id),
+      children: renderedDateIndices.map((dateIndex) => {
+        const dateKey = dateKeys[dateIndex];
+        if (dateKey === void 0) return null;
+        const planned = isDateIndexWithinPlannedRange(dateIndex, plannedRange);
+        return ["plan", "fact"].map((kind) => {
+          const subrowIndex = getSubrowIndex(rowIndex, kind);
+          const isInRenderedRange = !!renderedRangeBounds && dateIndex >= renderedRangeBounds.fromDateIndex && dateIndex <= renderedRangeBounds.toDateIndex && subrowIndex >= renderedRangeBounds.fromSubrowIndex && subrowIndex <= renderedRangeBounds.toSubrowIndex;
+          const planValue = task.planByDate?.[dateKey];
+          const factValue = task.factByDate?.[dateKey];
+          const value = kind === "plan" ? planValue : factValue;
+          const factStatus = factValue === void 0 || planValue === void 0 ? null : factValue >= planValue ? "success" : "warning";
+          const isActive = activeCell?.taskId === task.id && activeCell.dateIndex === dateIndex && activeCell.kind === kind;
+          const isEditing = editingCell?.taskId === task.id && editingCell.dateIndex === dateIndex && editingCell.kind === kind;
+          const currentCell = { taskId: task.id, dateIndex, kind };
+          const isSelected = !isParent && isInRenderedRange;
+          const showFillHandle = !isParent && !isEditing && isInRenderedRange && renderedRangeBounds !== null && dateIndex === renderedRangeBounds.toDateIndex && subrowIndex === renderedRangeBounds.toSubrowIndex;
+          const isRangeAnchor = !showFillHandle && !isParent && selectedRange?.anchor.taskId === task.id && selectedRange.anchor.dateIndex === dateIndex && selectedRange.anchor.kind === kind;
+          return /* @__PURE__ */ jsxs14(
+            "div",
+            {
+              "data-plan-fact-task-id": task.id,
+              "data-plan-fact-date-index": dateIndex,
+              "data-plan-fact-kind": kind,
+              className: joinClasses2(
+                "gantt-pf-cell",
+                `gantt-pf-cell-${kind}`,
+                planned && kind === "plan" && "gantt-pf-cell-planned",
+                value !== void 0 && "gantt-pf-cell-hasValue",
+                kind === "fact" && factStatus === "success" && "gantt-pf-cell-factSuccess",
+                kind === "fact" && factStatus === "warning" && "gantt-pf-cell-factWarning",
+                isSelected && "gantt-pf-cell-selected",
+                isInRenderedRange && renderedRangeBounds !== null && dateIndex === renderedRangeBounds.fromDateIndex && "gantt-pf-cell-rangeLeft",
+                isInRenderedRange && renderedRangeBounds !== null && dateIndex === renderedRangeBounds.toDateIndex && "gantt-pf-cell-rangeRight",
+                isInRenderedRange && renderedRangeBounds !== null && subrowIndex === renderedRangeBounds.fromSubrowIndex && "gantt-pf-cell-rangeTop",
+                isInRenderedRange && renderedRangeBounds !== null && subrowIndex === renderedRangeBounds.toSubrowIndex && "gantt-pf-cell-rangeBottom",
+                isRangeAnchor && "gantt-pf-cell-rangeAnchor",
+                isActive && "gantt-pf-cell-active",
+                isEditing && "gantt-pf-cell-editing",
+                isParent && "gantt-pf-cell-readonly"
+              ),
+              style: {
+                gridColumn: dateIndex + 1,
+                gridRow: kind === "plan" ? 1 : 2,
+                height: `${subrowHeight}px`
+              },
+              tabIndex: isParent ? -1 : 0,
+              onMouseDown: (event) => {
+                if (isParent) return;
+                event.preventDefault();
+                event.stopPropagation();
+                didDragSelectRef.current = false;
+                isSelectingRef.current = true;
+                selectSingleCell(currentCell);
+                onTaskSelect?.(task.id);
+                event.currentTarget.focus();
+              },
+              onMouseEnter: () => {
+                if (isParent) return;
+                if (!isFillDraggingRef.current && !isSelectingRef.current) return;
+                queueHoverCellUpdate(currentCell);
+              },
+              onFocus: () => {
+                if (isParent) return;
+                setActiveCell({ taskId: task.id, dateIndex, kind });
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+                if (didDragSelectRef.current) {
+                  didDragSelectRef.current = false;
+                  return;
+                }
+                onTaskSelect?.(task.id);
+                if (isParent) return;
+                selectSingleCell(currentCell);
+                event.currentTarget.focus();
+              },
+              onDoubleClick: (event) => {
+                event.stopPropagation();
+                if (isParent) return;
+                setEditingCell({ taskId: task.id, dateIndex, kind });
+              },
+              onKeyDown: (event) => {
+                if (isParent || isEditing) return;
+                if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  const direction = event.key.replace("Arrow", "").toLowerCase();
+                  if (event.shiftKey) {
+                    extendSelectedRange(selectedRange?.focus ?? currentCell, direction);
+                  } else {
+                    moveActiveCell(currentCell, direction);
+                  }
+                  return;
+                }
+                if (event.key === "Enter" || event.key === "F2") {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  setEditingCell(selectedRange?.anchor ?? currentCell);
+                  return;
+                }
+                if (event.key === "Backspace" || event.key === "Delete") {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  clearSelectedCells();
+                  return;
+                }
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  setEditingCell({ ...currentCell, startValue: event.key });
+                }
+              },
+              children: [
+                isEditing ? /* @__PURE__ */ jsx18(
+                  PlanFactCellEditor,
+                  {
+                    value,
+                    startValue: editingCell.startValue,
+                    onCommit: (nextValue) => {
+                      commitCell(task, dateIndex, kind, nextValue);
+                      setEditingCell(null);
+                      const nextActiveCell = { taskId: task.id, dateIndex, kind };
+                      selectSingleCell(nextActiveCell);
+                      focusCell(nextActiveCell);
+                    },
+                    onCommitRange: (nextValue) => {
+                      commitSelectedCells(nextValue);
+                      setEditingCell(null);
+                      const nextActiveCell = { taskId: task.id, dateIndex, kind };
+                      selectSingleCell(nextActiveCell);
+                      focusCell(nextActiveCell);
+                    },
+                    onCancel: () => {
+                      setEditingCell(null);
+                      const nextActiveCell = { taskId: task.id, dateIndex, kind };
+                      selectSingleCell(nextActiveCell);
+                      focusCell(nextActiveCell);
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx18(
+                  "span",
+                  {
+                    className: "gantt-pf-cellValue",
+                    onMouseEnter: (event) => {
+                      if (isParent || value === void 0) return;
+                      const compactValue = formatValue(value);
+                      const fullValue = formatTooltipValue(value);
+                      showOverflowTooltip(event.currentTarget, fullValue, compactValue !== fullValue);
+                    },
+                    onMouseLeave: hideOverflowTooltip,
+                    children: isParent ? "" : formatValue(value)
+                  }
+                ),
+                showFillHandle && /* @__PURE__ */ jsx18(
+                  "span",
+                  {
+                    className: "gantt-pf-fillHandle",
+                    "aria-hidden": "true",
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      isSelectingRef.current = false;
+                      isFillDraggingRef.current = true;
+                      setFillRange(selectedRange);
+                    }
+                  }
+                )
+              ]
+            },
+            `${task.id}:${dateKey}:${kind}`
+          );
+        });
+      })
+    }
+  );
+}
+function arePlanFactRowsEqual(previous, next) {
+  const previousRangeTouchesRow = doesRangeTouchRow(previous.renderedRangeBounds, previous.rowIndex);
+  const nextRangeTouchesRow = doesRangeTouchRow(next.renderedRangeBounds, next.rowIndex);
+  return previous.task === next.task && previous.rowIndex === next.rowIndex && previous.dateRange === next.dateRange && previous.dateKeys === next.dateKeys && previous.renderedDateIndices === next.renderedDateIndices && previous.rowHeight === next.rowHeight && previous.subrowHeight === next.subrowHeight && previous.dayWidth === next.dayWidth && previous.plannedRange === next.plannedRange && previous.todayDateIndex === next.todayDateIndex && previous.isParent === next.isParent && previous.isHighlighted === next.isHighlighted && previous.selectedTaskId === previous.task.id === (next.selectedTaskId === next.task.id) && getCellSignatureForTask(previous.activeCell, previous.task.id) === getCellSignatureForTask(next.activeCell, next.task.id) && getEditingCellSignatureForTask(previous.editingCell, previous.task.id) === getEditingCellSignatureForTask(next.editingCell, next.task.id) && getRangeAnchorSignatureForTask(previous.selectedRange, previous.task.id) === getRangeAnchorSignatureForTask(next.selectedRange, next.task.id) && previousRangeTouchesRow === nextRangeTouchesRow && (!nextRangeTouchesRow || areRangeBoundsEqual(previous.renderedRangeBounds, next.renderedRangeBounds));
+}
+var PlanFactRow = React15.memo(PlanFactRowInner, arePlanFactRowsEqual);
 function PlanFactMatrix({
   tasks,
   allTasks = tasks,
@@ -10590,7 +10858,10 @@ function PlanFactMatrix({
   onTasksChange,
   onCellCommit,
   highlightedTaskIds,
-  filterMode = "highlight"
+  filterMode = "highlight",
+  visibleRowIndices,
+  visibleDateIndices,
+  todayDateIndex
 }) {
   const [activeCell, setActiveCell] = useState10(null);
   const [editingCell, setEditingCell] = useState10(null);
@@ -10600,10 +10871,20 @@ function PlanFactMatrix({
   const isSelectingRef = useRef10(false);
   const isFillDraggingRef = useRef10(false);
   const didDragSelectRef = useRef10(false);
+  const pendingHoverCellRef = useRef10(null);
+  const hoverFrameRef = useRef10(null);
   const rootRef = useRef10(null);
   const bodyRef = useRef10(null);
   const totalWidth = dateRange.length * dayWidth;
   const subrowHeight = rowHeight / 2;
+  const renderedRowIndices = useMemo12(
+    () => visibleRowIndices ?? tasks.map((_, index) => index),
+    [tasks, visibleRowIndices]
+  );
+  const renderedDateIndices = useMemo12(
+    () => visibleDateIndices ?? dateRange.map((_, index) => index),
+    [dateRange, visibleDateIndices]
+  );
   const parentTaskIds = useMemo12(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const task of allTasks) {
@@ -10612,11 +10893,32 @@ function PlanFactMatrix({
     return ids;
   }, [allTasks]);
   const dateKeys = useMemo12(() => dateRange.map(formatDateKey), [dateRange]);
+  const dateRangeStartMs = dateRange[0] ? getDateOnlyMs(dateRange[0]) : 0;
   const taskIndexById = useMemo12(() => {
     const indexById = /* @__PURE__ */ new Map();
     tasks.forEach((task, index) => indexById.set(task.id, index));
     return indexById;
   }, [tasks]);
+  const taskById = useMemo12(
+    () => new Map(tasks.map((task) => [task.id, task])),
+    [tasks]
+  );
+  const monthSeparatorIndices = useMemo12(() => {
+    const indices = [];
+    for (let index = 1; index < dateRange.length; index += 1) {
+      if (dateRange[index].getUTCDate() === 1) {
+        indices.push(index);
+      }
+    }
+    return indices;
+  }, [dateRange]);
+  const plannedRangeByTaskId = useMemo12(() => {
+    const rangeByTaskId = /* @__PURE__ */ new Map();
+    for (const task of tasks) {
+      rangeByTaskId.set(task.id, getPlannedIndexRange(task, dateRangeStartMs, dateRange.length));
+    }
+    return rangeByTaskId;
+  }, [dateRange.length, dateRangeStartMs, tasks]);
   const focusCell = useCallback9((cell) => {
     window.requestAnimationFrame(() => {
       const selector = [
@@ -10628,6 +10930,11 @@ function PlanFactMatrix({
     });
   }, []);
   const clearSelection = useCallback9(() => {
+    if (hoverFrameRef.current !== null) {
+      window.cancelAnimationFrame(hoverFrameRef.current);
+      hoverFrameRef.current = null;
+    }
+    pendingHoverCellRef.current = null;
     isSelectingRef.current = false;
     isFillDraggingRef.current = false;
     didDragSelectRef.current = false;
@@ -10640,6 +10947,29 @@ function PlanFactMatrix({
   const hideOverflowTooltip = useCallback9(() => {
     setOverflowTooltip(null);
   }, []);
+  const flushPendingHoverCell = useCallback9(() => {
+    hoverFrameRef.current = null;
+    const currentCell = pendingHoverCellRef.current;
+    if (!currentCell) return;
+    if (isFillDraggingRef.current && selectedRange) {
+      setFillRange({ anchor: selectedRange.anchor, focus: currentCell });
+      setActiveCell(currentCell);
+      onTaskSelect?.(currentCell.taskId);
+      return;
+    }
+    if (!isSelectingRef.current) return;
+    didDragSelectRef.current = true;
+    setSelectedRange((currentRange) => ({
+      anchor: currentRange?.anchor ?? currentCell,
+      focus: currentCell
+    }));
+    onTaskSelect?.(currentCell.taskId);
+  }, [onTaskSelect, selectedRange]);
+  const queueHoverCellUpdate = useCallback9((cell) => {
+    pendingHoverCellRef.current = cell;
+    if (hoverFrameRef.current !== null) return;
+    hoverFrameRef.current = window.requestAnimationFrame(flushPendingHoverCell);
+  }, [flushPendingHoverCell]);
   const showOverflowTooltip = useCallback9((target, label, force = false) => {
     if (!rootRef.current || !label) return;
     if (!force && target.scrollWidth <= target.clientWidth) {
@@ -10678,6 +11008,11 @@ function PlanFactMatrix({
       )
     };
   }, [taskIndexById]);
+  const renderedRange = fillRange ?? selectedRange;
+  const renderedRangeBounds = useMemo12(
+    () => renderedRange ? getRangeBounds(renderedRange) : null,
+    [getRangeBounds, renderedRange]
+  );
   const getCellFromPosition = useCallback9((subrowIndex, dateIndex) => {
     const task = tasks[Math.floor(subrowIndex / 2)];
     if (!task) return null;
@@ -10697,33 +11032,6 @@ function PlanFactMatrix({
     const cellSubrowIndex = getSubrowIndex(cellTaskIndex, cell.kind);
     return cell.dateIndex >= bounds.fromDateIndex && cell.dateIndex <= bounds.toDateIndex && cellSubrowIndex >= bounds.fromSubrowIndex && cellSubrowIndex <= bounds.toSubrowIndex;
   }, [getRangeBounds, taskIndexById]);
-  const isCellInSelectedRange = useCallback9((cell) => {
-    if (!selectedRange) return false;
-    return isCellInRange(cell, fillRange ?? selectedRange);
-  }, [fillRange, isCellInRange, selectedRange]);
-  const getSelectedRangeEdgeClasses = useCallback9((cell) => {
-    if (!selectedRange) return [];
-    const range = fillRange ?? selectedRange;
-    const bounds = getRangeBounds(range);
-    const taskIndex = taskIndexById.get(cell.taskId);
-    if (!bounds || taskIndex === void 0 || !isCellInRange(cell, range)) return [];
-    const subrowIndex = getSubrowIndex(taskIndex, cell.kind);
-    return [
-      cell.dateIndex === bounds.fromDateIndex && "gantt-pf-cell-rangeLeft",
-      cell.dateIndex === bounds.toDateIndex && "gantt-pf-cell-rangeRight",
-      subrowIndex === bounds.fromSubrowIndex && "gantt-pf-cell-rangeTop",
-      subrowIndex === bounds.toSubrowIndex && "gantt-pf-cell-rangeBottom"
-    ];
-  }, [fillRange, getRangeBounds, isCellInRange, selectedRange, taskIndexById]);
-  const isFillHandleCell = useCallback9((cell) => {
-    if (!selectedRange) return false;
-    const range = fillRange ?? selectedRange;
-    const bounds = getRangeBounds(range);
-    const taskIndex = taskIndexById.get(cell.taskId);
-    if (!bounds || taskIndex === void 0 || !isCellInRange(cell, range)) return false;
-    const subrowIndex = getSubrowIndex(taskIndex, cell.kind);
-    return cell.dateIndex === bounds.toDateIndex && subrowIndex === bounds.toSubrowIndex;
-  }, [fillRange, getRangeBounds, isCellInRange, selectedRange, taskIndexById]);
   const commitCell = useCallback9((task, dateIndex, kind, value) => {
     const dateKey = dateKeys[dateIndex];
     const source = kind === "plan" ? task.planByDate : task.factByDate;
@@ -10746,40 +11054,45 @@ function PlanFactMatrix({
       value
     });
   }, [dateKeys, dateRange, onCellCommit, onTasksChange]);
-  const clearSelectedCells = useCallback9(() => {
-    if (!selectedRange) {
-      if (!activeCell) return;
-      const task = tasks.find((candidate) => candidate.id === activeCell.taskId);
-      if (!task || parentTaskIds.has(task.id)) return;
-      commitCell(task, activeCell.dateIndex, activeCell.kind, void 0);
-      return;
-    }
+  const commitRangeCells = useCallback9((bounds, value, mode) => {
     const changedTasksById = /* @__PURE__ */ new Map();
-    for (const task of tasks) {
-      if (parentTaskIds.has(task.id)) continue;
-      let nextPlanByDate = task.planByDate;
-      let nextFactByDate = task.factByDate;
+    for (let subrowIndex = bounds.fromSubrowIndex; subrowIndex <= bounds.toSubrowIndex; subrowIndex += 1) {
+      const task = tasks[Math.floor(subrowIndex / 2)];
+      if (!task || parentTaskIds.has(task.id)) continue;
+      const kind = subrowIndex % 2 === 0 ? "plan" : "fact";
+      const currentChangedTask = changedTasksById.get(task.id) ?? task;
+      let nextPlanByDate = currentChangedTask.planByDate;
+      let nextFactByDate = currentChangedTask.factByDate;
       let didChange = false;
-      for (let dateIndex = 0; dateIndex < dateKeys.length; dateIndex += 1) {
+      for (let dateIndex = bounds.fromDateIndex; dateIndex <= bounds.toDateIndex; dateIndex += 1) {
         const dateKey = dateKeys[dateIndex];
-        const planCell = { taskId: task.id, dateIndex, kind: "plan" };
-        if (isCellInSelectedRange(planCell) && nextPlanByDate?.[dateKey] !== void 0) {
+        if (dateKey === void 0) continue;
+        const currentValues = kind === "plan" ? nextPlanByDate : nextFactByDate;
+        const currentValue = currentValues?.[dateKey];
+        const nextValue = mode === "clear" ? void 0 : value;
+        if (currentValue === nextValue) continue;
+        if (kind === "plan") {
           nextPlanByDate = { ...nextPlanByDate ?? {} };
-          delete nextPlanByDate[dateKey];
-          didChange = true;
-        }
-        const factCell = { taskId: task.id, dateIndex, kind: "fact" };
-        if (isCellInSelectedRange(factCell) && nextFactByDate?.[dateKey] !== void 0) {
+          if (nextValue === void 0) {
+            delete nextPlanByDate[dateKey];
+          } else {
+            nextPlanByDate[dateKey] = nextValue;
+          }
+        } else {
           nextFactByDate = { ...nextFactByDate ?? {} };
-          delete nextFactByDate[dateKey];
-          didChange = true;
+          if (nextValue === void 0) {
+            delete nextFactByDate[dateKey];
+          } else {
+            nextFactByDate[dateKey] = nextValue;
+          }
         }
+        didChange = true;
       }
       if (didChange) {
         changedTasksById.set(task.id, {
-          ...task,
-          ...nextPlanByDate !== task.planByDate ? { planByDate: nextPlanByDate ?? {} } : {},
-          ...nextFactByDate !== task.factByDate ? { factByDate: nextFactByDate ?? {} } : {}
+          ...currentChangedTask,
+          ...nextPlanByDate !== currentChangedTask.planByDate ? { planByDate: nextPlanByDate ?? {} } : {},
+          ...nextFactByDate !== currentChangedTask.factByDate ? { factByDate: nextFactByDate ?? {} } : {}
         });
       }
     }
@@ -10787,67 +11100,46 @@ function PlanFactMatrix({
     if (changedTasks.length > 0) {
       onTasksChange?.(changedTasks);
     }
-  }, [activeCell, commitCell, dateKeys, isCellInSelectedRange, onTasksChange, parentTaskIds, selectedRange, tasks]);
+  }, [dateKeys, onTasksChange, parentTaskIds, tasks]);
+  const clearSelectedCells = useCallback9(() => {
+    const activeRange = fillRange ?? selectedRange;
+    if (!activeRange) {
+      if (!activeCell) return;
+      const task = taskById.get(activeCell.taskId);
+      if (!task || parentTaskIds.has(task.id)) return;
+      commitCell(task, activeCell.dateIndex, activeCell.kind, void 0);
+      return;
+    }
+    const bounds = getRangeBounds(activeRange);
+    if (bounds) {
+      commitRangeCells(bounds, void 0, "clear");
+    }
+  }, [activeCell, commitCell, commitRangeCells, fillRange, getRangeBounds, parentTaskIds, selectedRange, taskById]);
   const commitSelectedCells = useCallback9((value) => {
-    if (!selectedRange) {
+    const activeRange = fillRange ?? selectedRange;
+    if (!activeRange) {
       if (!activeCell) return;
-      const task = tasks.find((candidate) => candidate.id === activeCell.taskId);
+      const task = taskById.get(activeCell.taskId);
       if (!task || parentTaskIds.has(task.id)) return;
       commitCell(task, activeCell.dateIndex, activeCell.kind, value);
       return;
     }
-    const changedTasksById = /* @__PURE__ */ new Map();
-    for (const task of tasks) {
-      if (parentTaskIds.has(task.id)) continue;
-      let nextPlanByDate = task.planByDate;
-      let nextFactByDate = task.factByDate;
-      let didChange = false;
-      for (let dateIndex = 0; dateIndex < dateKeys.length; dateIndex += 1) {
-        const dateKey = dateKeys[dateIndex];
-        const planCell = { taskId: task.id, dateIndex, kind: "plan" };
-        if (isCellInSelectedRange(planCell) && nextPlanByDate?.[dateKey] !== value) {
-          nextPlanByDate = { ...nextPlanByDate ?? {} };
-          if (value === void 0) {
-            delete nextPlanByDate[dateKey];
-          } else {
-            nextPlanByDate[dateKey] = value;
-          }
-          didChange = true;
-        }
-        const factCell = { taskId: task.id, dateIndex, kind: "fact" };
-        if (isCellInSelectedRange(factCell) && nextFactByDate?.[dateKey] !== value) {
-          nextFactByDate = { ...nextFactByDate ?? {} };
-          if (value === void 0) {
-            delete nextFactByDate[dateKey];
-          } else {
-            nextFactByDate[dateKey] = value;
-          }
-          didChange = true;
-        }
-      }
-      if (didChange) {
-        changedTasksById.set(task.id, {
-          ...task,
-          ...nextPlanByDate !== task.planByDate ? { planByDate: nextPlanByDate ?? {} } : {},
-          ...nextFactByDate !== task.factByDate ? { factByDate: nextFactByDate ?? {} } : {}
-        });
-      }
-    }
-    const changedTasks = Array.from(changedTasksById.values());
-    if (changedTasks.length > 0) {
-      onTasksChange?.(changedTasks);
+    const bounds = getRangeBounds(activeRange);
+    if (bounds) {
+      commitRangeCells(bounds, value, "set");
     }
-  }, [activeCell, commitCell, dateKeys, isCellInSelectedRange, onTasksChange, parentTaskIds, selectedRange, tasks]);
+  }, [activeCell, commitCell, commitRangeCells, fillRange, getRangeBounds, parentTaskIds, selectedRange, taskById]);
   const getCellValue = useCallback9((cell) => {
-    const task = tasks.find((candidate) => candidate.id === cell.taskId);
+    const task = taskById.get(cell.taskId);
     if (!task) return void 0;
     const dateKey = dateKeys[cell.dateIndex];
     return cell.kind === "plan" ? task.planByDate?.[dateKey] : task.factByDate?.[dateKey];
-  }, [dateKeys, tasks]);
-  const applyFillRange = useCallback9(() => {
-    if (!selectedRange || !fillRange) return;
+  }, [dateKeys, taskById]);
+  const applyFillRange = useCallback9((nextFillRange) => {
+    const targetRange = nextFillRange ?? fillRange;
+    if (!selectedRange || !targetRange) return;
     const sourceBounds = getRangeBounds(selectedRange);
-    const targetBounds = getRangeBounds(fillRange);
+    const targetBounds = getRangeBounds(targetRange);
     if (!sourceBounds || !targetBounds) return;
     const sourceDateSpan = sourceBounds.toDateIndex - sourceBounds.fromDateIndex + 1;
     const sourceSubrowSpan = sourceBounds.toSubrowIndex - sourceBounds.fromSubrowIndex + 1;
@@ -10855,7 +11147,7 @@ function PlanFactMatrix({
     for (let subrowIndex = targetBounds.fromSubrowIndex; subrowIndex <= targetBounds.toSubrowIndex; subrowIndex += 1) {
       const targetCellForRow = getCellFromPosition(subrowIndex, targetBounds.fromDateIndex);
       if (!targetCellForRow || parentTaskIds.has(targetCellForRow.taskId)) continue;
-      const originalTask = tasks.find((task) => task.id === targetCellForRow.taskId);
+      const originalTask = taskById.get(targetCellForRow.taskId);
       if (!originalTask) continue;
       let changedTask = changedTasksById.get(originalTask.id) ?? originalTask;
       let nextPlanByDate = changedTask.planByDate;
@@ -10901,8 +11193,8 @@ function PlanFactMatrix({
     if (changedTasks.length > 0) {
       onTasksChange?.(changedTasks);
     }
-    setSelectedRange(fillRange);
-    setActiveCell(fillRange.anchor);
+    setSelectedRange(targetRange);
+    setActiveCell(targetRange.anchor);
     setFillRange(null);
   }, [
     dateKeys,
@@ -10914,7 +11206,7 @@ function PlanFactMatrix({
     onTasksChange,
     parentTaskIds,
     selectedRange,
-    tasks
+    taskById
   ]);
   const moveActiveCell = useCallback9((cell, direction) => {
     const taskIndex = tasks.findIndex((task) => task.id === cell.taskId);
@@ -10986,9 +11278,19 @@ function PlanFactMatrix({
   }, [dateRange.length, focusCell, onTaskSelect, parentTaskIds, selectedRange, tasks]);
   useEffect9(() => {
     const endSelection = () => {
+      let pendingFillRange = null;
+      if (hoverFrameRef.current !== null) {
+        window.cancelAnimationFrame(hoverFrameRef.current);
+        hoverFrameRef.current = null;
+        const pendingCell = pendingHoverCellRef.current;
+        if (pendingCell && isFillDraggingRef.current && selectedRange) {
+          pendingFillRange = { anchor: selectedRange.anchor, focus: pendingCell };
+        }
+        flushPendingHoverCell();
+      }
       if (isFillDraggingRef.current) {
         isFillDraggingRef.current = false;
-        applyFillRange();
+        applyFillRange(pendingFillRange);
       }
       isSelectingRef.current = false;
     };
@@ -10996,7 +11298,12 @@ function PlanFactMatrix({
     return () => {
       window.removeEventListener("mouseup", endSelection);
     };
-  }, [applyFillRange]);
+  }, [applyFillRange, flushPendingHoverCell]);
+  useEffect9(() => () => {
+    if (hoverFrameRef.current !== null) {
+      window.cancelAnimationFrame(hoverFrameRef.current);
+    }
+  }, []);
   useEffect9(() => {
     const handleKeyDown = (event) => {
       if (event.key !== "Escape") return;
@@ -11026,15 +11333,39 @@ function PlanFactMatrix({
         ["--gantt-pf-day-width"]: `${dayWidth}px`
       },
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "gantt-pf-header", style: { width: `${totalWidth}px`, height: `${headerHeight}px` }, children: /* @__PURE__ */ jsx18(
-          TimeScaleHeader_default,
+        /* @__PURE__ */ jsxs14("div", { className: "gantt-pf-header", style: { width: `${totalWidth}px`, height: `${headerHeight}px` }, children: [
+          /* @__PURE__ */ jsx18(
+            TimeScaleHeader_default,
+            {
+              days: dateRange,
+              dayWidth,
+              headerHeight: headerHeight - 1,
+              viewMode: "day"
+            }
+          ),
+          todayDateIndex !== void 0 && todayDateIndex >= 0 && /* @__PURE__ */ jsx18(
+            "span",
+            {
+              className: "gantt-pf-headerTodayLine",
+              "aria-hidden": "true",
+              style: {
+                left: `${todayDateIndex * dayWidth}px`,
+                top: `${Math.max(0, headerHeight / 2)}px`
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx18("div", { className: "gantt-pf-monthSeparatorLayer", "aria-hidden": "true", children: monthSeparatorIndices.map((dateIndex) => /* @__PURE__ */ jsx18(
+          "span",
           {
-            days: dateRange,
-            dayWidth,
-            headerHeight: headerHeight - 1,
-            viewMode: "day"
-          }
-        ) }),
+            className: "gantt-pf-monthSeparator",
+            style: {
+              left: `${Math.round(dateIndex * dayWidth)}px`,
+              top: `${Math.max(0, headerHeight / 2)}px`
+            }
+          },
+          `month-separator-${dateIndex}`
+        )) }),
         /* @__PURE__ */ jsx18(
           "div",
           {
@@ -11045,202 +11376,48 @@ function PlanFactMatrix({
               minHeight: bodyMinHeight,
               width: `${totalWidth}px`
             },
-            children: tasks.map((task, rowIndex) => {
+            children: renderedRowIndices.map((rowIndex) => {
+              const task = tasks[rowIndex];
+              if (!task) return null;
               const isParent = parentTaskIds.has(task.id);
               const isHighlighted = filterMode === "highlight" && !!highlightedTaskIds?.has(task.id);
               return /* @__PURE__ */ jsx18(
-                "div",
+                PlanFactRow,
                 {
-                  "data-gantt-task-row-id": task.id,
-                  className: joinClasses2(
-                    "gantt-pf-row",
-                    isParent && "gantt-pf-row-parent",
-                    selectedTaskId === task.id && "gantt-pf-row-selected",
-                    isHighlighted && "gantt-pf-row-highlighted"
-                  ),
-                  style: {
-                    top: `${rowIndex * rowHeight}px`,
-                    height: `${rowHeight}px`,
-                    gridTemplateColumns: `repeat(${dateRange.length}, ${dayWidth}px)`
-                  },
-                  onClick: () => onTaskSelect?.(task.id),
-                  children: dateRange.map((date, dateIndex) => {
-                    const dateKey = dateKeys[dateIndex];
-                    const planned = isDateWithinTask(task, date);
-                    return ["plan", "fact"].map((kind) => {
-                      const planValue = task.planByDate?.[dateKey];
-                      const factValue = task.factByDate?.[dateKey];
-                      const value = kind === "plan" ? planValue : factValue;
-                      const factStatus = factValue === void 0 || planValue === void 0 ? null : factValue >= planValue ? "success" : "warning";
-                      const isActive = activeCell?.taskId === task.id && activeCell.dateIndex === dateIndex && activeCell.kind === kind;
-                      const isEditing = editingCell?.taskId === task.id && editingCell.dateIndex === dateIndex && editingCell.kind === kind;
-                      const currentCell = { taskId: task.id, dateIndex, kind };
-                      const isSelected = !isParent && isCellInSelectedRange(currentCell);
-                      const showFillHandle = !isParent && !isEditing && isFillHandleCell(currentCell);
-                      const isRangeAnchor = !showFillHandle && !isParent && selectedRange?.anchor.taskId === task.id && selectedRange.anchor.dateIndex === dateIndex && selectedRange.anchor.kind === kind;
-                      return /* @__PURE__ */ jsxs14(
-                        "div",
-                        {
-                          "data-plan-fact-task-id": task.id,
-                          "data-plan-fact-date-index": dateIndex,
-                          "data-plan-fact-kind": kind,
-                          className: joinClasses2(
-                            "gantt-pf-cell",
-                            `gantt-pf-cell-${kind}`,
-                            planned && kind === "plan" && !isParent && "gantt-pf-cell-planned",
-                            value !== void 0 && "gantt-pf-cell-hasValue",
-                            kind === "fact" && factStatus === "success" && "gantt-pf-cell-factSuccess",
-                            kind === "fact" && factStatus === "warning" && "gantt-pf-cell-factWarning",
-                            isSelected && "gantt-pf-cell-selected",
-                            ...getSelectedRangeEdgeClasses(currentCell),
-                            isRangeAnchor && "gantt-pf-cell-rangeAnchor",
-                            isActive && "gantt-pf-cell-active",
-                            isEditing && "gantt-pf-cell-editing",
-                            isParent && "gantt-pf-cell-readonly"
-                          ),
-                          style: {
-                            gridColumn: dateIndex + 1,
-                            gridRow: kind === "plan" ? 1 : 2,
-                            height: `${subrowHeight}px`
-                          },
-                          tabIndex: isParent ? -1 : 0,
-                          onMouseDown: (event) => {
-                            if (isParent) return;
-                            event.preventDefault();
-                            event.stopPropagation();
-                            didDragSelectRef.current = false;
-                            isSelectingRef.current = true;
-                            selectSingleCell(currentCell);
-                            onTaskSelect?.(task.id);
-                            event.currentTarget.focus();
-                          },
-                          onMouseEnter: () => {
-                            if (!isParent && isFillDraggingRef.current && selectedRange) {
-                              setFillRange({ anchor: selectedRange.anchor, focus: currentCell });
-                              setActiveCell(currentCell);
-                              onTaskSelect?.(task.id);
-                              return;
-                            }
-                            if (isParent || !isSelectingRef.current) return;
-                            didDragSelectRef.current = true;
-                            setSelectedRange((currentRange) => ({
-                              anchor: currentRange?.anchor ?? currentCell,
-                              focus: currentCell
-                            }));
-                            onTaskSelect?.(task.id);
-                          },
-                          onFocus: () => {
-                            if (isParent) return;
-                            setActiveCell({ taskId: task.id, dateIndex, kind });
-                          },
-                          onClick: (event) => {
-                            event.stopPropagation();
-                            if (didDragSelectRef.current) {
-                              didDragSelectRef.current = false;
-                              return;
-                            }
-                            onTaskSelect?.(task.id);
-                            if (isParent) return;
-                            selectSingleCell(currentCell);
-                            event.currentTarget.focus();
-                          },
-                          onDoubleClick: (event) => {
-                            event.stopPropagation();
-                            if (isParent) return;
-                            setEditingCell({ taskId: task.id, dateIndex, kind });
-                          },
-                          onKeyDown: (event) => {
-                            if (isParent || isEditing) return;
-                            if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              const direction = event.key.replace("Arrow", "").toLowerCase();
-                              if (event.shiftKey) {
-                                extendSelectedRange(selectedRange?.focus ?? currentCell, direction);
-                              } else {
-                                moveActiveCell(currentCell, direction);
-                              }
-                              return;
-                            }
-                            if (event.key === "Enter" || event.key === "F2") {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              setEditingCell(selectedRange?.anchor ?? currentCell);
-                              return;
-                            }
-                            if (event.key === "Backspace" || event.key === "Delete") {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              clearSelectedCells();
-                              return;
-                            }
-                            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              setEditingCell({ ...currentCell, startValue: event.key });
-                            }
-                          },
-                          children: [
-                            isEditing ? /* @__PURE__ */ jsx18(
-                              PlanFactCellEditor,
-                              {
-                                value,
-                                startValue: editingCell.startValue,
-                                onCommit: (nextValue) => {
-                                  commitCell(task, dateIndex, kind, nextValue);
-                                  setEditingCell(null);
-                                  const nextActiveCell = { taskId: task.id, dateIndex, kind };
-                                  selectSingleCell(nextActiveCell);
-                                  focusCell(nextActiveCell);
-                                },
-                                onCommitRange: (nextValue) => {
-                                  commitSelectedCells(nextValue);
-                                  setEditingCell(null);
-                                  const nextActiveCell = { taskId: task.id, dateIndex, kind };
-                                  setActiveCell(nextActiveCell);
-                                  focusCell(nextActiveCell);
-                                },
-                                onCancel: () => {
-                                  setEditingCell(null);
-                                  const nextActiveCell = { taskId: task.id, dateIndex, kind };
-                                  setActiveCell(nextActiveCell);
-                                  focusCell(nextActiveCell);
-                                }
-                              }
-                            ) : /* @__PURE__ */ jsx18(
-                              "span",
-                              {
-                                className: "gantt-pf-cellValue",
-                                onMouseEnter: (event) => {
-                                  if (isParent || value === void 0) return;
-                                  const compactValue = formatValue(value);
-                                  const fullValue = formatTooltipValue(value);
-                                  showOverflowTooltip(event.currentTarget, fullValue, compactValue !== fullValue);
-                                },
-                                onMouseLeave: hideOverflowTooltip,
-                                children: isParent ? "" : formatValue(value)
-                              }
-                            ),
-                            showFillHandle && /* @__PURE__ */ jsx18(
-                              "span",
-                              {
-                                className: "gantt-pf-fillHandle",
-                                "aria-hidden": "true",
-                                onMouseDown: (event) => {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  isSelectingRef.current = false;
-                                  isFillDraggingRef.current = true;
-                                  setFillRange(selectedRange);
-                                }
-                              }
-                            )
-                          ]
-                        },
-                        `${task.id}:${dateKey}:${kind}`
-                      );
-                    });
-                  })
+                  task,
+                  rowIndex,
+                  dateRange,
+                  dateKeys,
+                  renderedDateIndices,
+                  rowHeight,
+                  subrowHeight,
+                  dayWidth,
+                  plannedRange: plannedRangeByTaskId.get(task.id) ?? null,
+                  todayDateIndex,
+                  isParent,
+                  isHighlighted,
+                  selectedTaskId,
+                  activeCell,
+                  editingCell,
+                  selectedRange,
+                  renderedRangeBounds,
+                  didDragSelectRef,
+                  isSelectingRef,
+                  isFillDraggingRef,
+                  onTaskSelect,
+                  selectSingleCell,
+                  queueHoverCellUpdate,
+                  setActiveCell,
+                  setEditingCell,
+                  setFillRange,
+                  clearSelectedCells,
+                  commitCell,
+                  commitSelectedCells,
+                  moveActiveCell,
+                  extendSelectedRange,
+                  focusCell,
+                  showOverflowTooltip,
+                  hideOverflowTooltip
                 },
                 task.id
               );
@@ -11676,6 +11853,57 @@ function createTaskPreviewPositionStore() {
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var SCROLL_TO_ROW_CONTEXT_ROWS = 2;
 var TASK_ROW_OVERSCAN = 8;
+var PLAN_FACT_COLUMN_OVERSCAN = 24;
+var PLAN_FACT_COLUMN_WINDOW_STEP = 14;
+function getFullMonthDays(tasks) {
+  if (!tasks || tasks.length === 0) {
+    return getMultiMonthDays(tasks);
+  }
+  let minDate = null;
+  let maxDate = null;
+  for (const task of tasks) {
+    const start = parseUTCDate(task.startDate);
+    const end = parseUTCDate(task.endDate);
+    if (!minDate || start.getTime() < minDate.getTime()) {
+      minDate = start;
+    }
+    if (!maxDate || end.getTime() > maxDate.getTime()) {
+      maxDate = end;
+    }
+  }
+  if (!minDate || !maxDate) {
+    return getMultiMonthDays(tasks);
+  }
+  const startOfMonth2 = new Date(Date.UTC(minDate.getUTCFullYear(), minDate.getUTCMonth(), 1));
+  const endOfMonth = new Date(Date.UTC(maxDate.getUTCFullYear(), maxDate.getUTCMonth() + 1, 0));
+  const days = [];
+  const current = new Date(startOfMonth2);
+  while (current.getTime() <= endOfMonth.getTime()) {
+    days.push(new Date(Date.UTC(
+      current.getUTCFullYear(),
+      current.getUTCMonth(),
+      current.getUTCDate()
+    )));
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+  return days;
+}
+function getPlanFactRangeTasks(tasks) {
+  const rangeTasks = [];
+  for (const task of tasks) {
+    rangeTasks.push({ startDate: task.startDate, endDate: task.endDate });
+    for (const dateKey of Object.keys(task.planByDate ?? {})) {
+      rangeTasks.push({ startDate: dateKey, endDate: dateKey });
+    }
+    for (const dateKey of Object.keys(task.factByDate ?? {})) {
+      rangeTasks.push({ startDate: dateKey, endDate: dateKey });
+    }
+  }
+  return rangeTasks;
+}
+function clampScrollValue(value, max) {
+  return Math.min(max, Math.max(0, value));
+}
 function arePositionMapsEqual(left, right) {
   if (left.size !== right.size) return false;
   for (const [taskId, leftPosition] of left) {
@@ -11798,6 +12026,7 @@ function TaskGanttChartInner(props, ref) {
   const [taskListHasRightShadow, setTaskListHasRightShadow] = useState11(false);
   const [internalTaskDateChangeMode, setInternalTaskDateChangeMode] = useState11("preserve-duration");
   const [scrollViewport, setScrollViewport] = useState11({ scrollTop: 0, viewportHeight: 0 });
+  const [planFactDateWindow, setPlanFactDateWindow] = useState11(null);
   const [selectedChip, setSelectedChip] = useState11(null);
   const [activeTimelineTooltip, setActiveTimelineTooltip] = useState11(null);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState11(/* @__PURE__ */ new Set());
@@ -11816,6 +12045,9 @@ function TaskGanttChartInner(props, ref) {
     [customDays, isWeekend3]
   );
   const dateRangeTasks = useMemo13(() => {
+    if (isPlanFactMode) {
+      return getPlanFactRangeTasks(normalizedTasks);
+    }
     if (!showBaseline) {
       return normalizedTasks;
     }
@@ -11824,8 +12056,11 @@ function TaskGanttChartInner(props, ref) {
       startDate: task.baselineStartDate && parseUTCDate(task.baselineStartDate).getTime() < parseUTCDate(task.startDate).getTime() ? task.baselineStartDate : task.startDate,
       endDate: task.baselineEndDate && parseUTCDate(task.baselineEndDate).getTime() > parseUTCDate(task.endDate).getTime() ? task.baselineEndDate : task.endDate
     }));
-  }, [normalizedTasks, showBaseline]);
-  const dateRange = useMemo13(() => getMultiMonthDays(dateRangeTasks), [dateRangeTasks]);
+  }, [isPlanFactMode, normalizedTasks, showBaseline]);
+  const dateRange = useMemo13(
+    () => isPlanFactMode ? getFullMonthDays(dateRangeTasks) : getMultiMonthDays(dateRangeTasks),
+    [dateRangeTasks, isPlanFactMode]
+  );
   const [validationResult, setValidationResult] = useState11(null);
   const [cascadeOverrides, setCascadeOverrides] = useState11(/* @__PURE__ */ new Map());
   const gridWidth = useMemo13(
@@ -11891,11 +12126,12 @@ function TaskGanttChartInner(props, ref) {
     const firstDay = dateRange[0];
     return new Date(Date.UTC(firstDay.getUTCFullYear(), firstDay.getUTCMonth(), 1));
   }, [dateRange]);
-  const todayInRange = useMemo13(() => {
+  const todayIndex = useMemo13(() => {
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
-    return dateRange.some((day) => day.getTime() === today.getTime());
+    return dateRange.findIndex((day) => day.getTime() === today.getTime());
   }, [dateRange]);
+  const todayInRange = todayIndex !== -1;
   const visibleTimelineMarkers = useMemo13(() => {
     if (isTableMatrixMode || !timelineMarkers || timelineMarkers.length === 0 || dateRange.length === 0) {
       return [];
@@ -11914,9 +12150,9 @@ function TaskGanttChartInner(props, ref) {
     if (!container || dateRange.length === 0) return;
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
-    const todayIndex = dateRange.findIndex((day) => day.getTime() === today.getTime());
-    if (todayIndex === -1) return;
-    const todayOffset = todayIndex * dayWidth;
+    const todayIndex2 = dateRange.findIndex((day) => day.getTime() === today.getTime());
+    if (todayIndex2 === -1) return;
+    const todayOffset = todayIndex2 * dayWidth;
     const containerWidth = container.clientWidth;
     const scrollLeft = Math.round(todayOffset + dayWidth / 2 - containerWidth * 0.3);
     container.scrollLeft = Math.max(0, scrollLeft);
@@ -11930,13 +12166,33 @@ function TaskGanttChartInner(props, ref) {
       frameId = null;
       const nextHasRightShadow = container.scrollLeft > 0;
       const nextViewportHeight = Math.max(0, container.clientHeight - timelineHeaderHeight);
+      const nextViewportWidth = Math.max(0, container.clientWidth - (showTaskList ? taskListWidth : 0));
       const nextScrollTop = container.scrollTop;
+      const nextScrollLeft = container.scrollLeft;
+      const nextChartScrollLeft = Math.max(0, nextScrollLeft);
       setTaskListHasRightShadow(
         (previous) => previous === nextHasRightShadow ? previous : nextHasRightShadow
       );
       setScrollViewport(
         (previous) => previous.scrollTop === nextScrollTop && previous.viewportHeight === nextViewportHeight ? previous : { scrollTop: nextScrollTop, viewportHeight: nextViewportHeight }
       );
+      setPlanFactDateWindow((previous) => {
+        if (!isPlanFactMode || dateRange.length === 0 || nextViewportWidth <= 0) {
+          return previous === null ? previous : null;
+        }
+        const firstVisibleColumn = Math.max(0, Math.floor(nextChartScrollLeft / dayWidth));
+        const visibleColumnCount = Math.max(1, Math.ceil(nextViewportWidth / dayWidth));
+        const lastVisibleColumn = Math.min(dateRange.length - 1, firstVisibleColumn + visibleColumnCount - 1);
+        const rangeStart = Math.max(
+          0,
+          Math.floor(Math.max(0, firstVisibleColumn - PLAN_FACT_COLUMN_OVERSCAN) / PLAN_FACT_COLUMN_WINDOW_STEP) * PLAN_FACT_COLUMN_WINDOW_STEP
+        );
+        const rangeEnd = Math.min(
+          dateRange.length - 1,
+          Math.ceil((lastVisibleColumn + PLAN_FACT_COLUMN_OVERSCAN + 1) / PLAN_FACT_COLUMN_WINDOW_STEP) * PLAN_FACT_COLUMN_WINDOW_STEP - 1
+        );
+        return previous?.start === rangeStart && previous.end === rangeEnd ? previous : { start: rangeStart, end: rangeEnd };
+      });
     };
     const scheduleUpdate = () => {
       if (frameId !== null) return;
@@ -11957,16 +12213,16 @@ function TaskGanttChartInner(props, ref) {
       container.removeEventListener("scroll", scheduleUpdate);
       window.removeEventListener("resize", scheduleUpdate);
     };
-  }, [timelineHeaderHeight]);
+  }, [dateRange.length, dayWidth, isPlanFactMode, showTaskList, taskListWidth, timelineHeaderHeight]);
   const scrollToToday = useCallback10(() => {
     if (isTableMatrixMode) return;
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
-    const todayIndex = dateRange.findIndex((day) => day.getTime() === today.getTime());
-    if (todayIndex === -1) return;
-    const todayOffset = todayIndex * dayWidth;
+    const todayIndex2 = dateRange.findIndex((day) => day.getTime() === today.getTime());
+    if (todayIndex2 === -1) return;
+    const todayOffset = todayIndex2 * dayWidth;
     const containerWidth = container.clientWidth;
     const scrollLeft = Math.round(todayOffset + dayWidth / 2 - containerWidth * 0.3);
     container.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
@@ -12202,6 +12458,15 @@ function TaskGanttChartInner(props, ref) {
     }
     return Array.from(indices).sort((left, right) => left - right);
   }, [effectiveRowHeight, forcedRenderedTaskIds, scrollViewport, visibleTaskIndexMap, visibleTasks.length]);
+  const visiblePlanFactDateIndices = useMemo13(() => {
+    if (!isPlanFactMode || dateRange.length === 0 || !planFactDateWindow) {
+      return void 0;
+    }
+    return Array.from(
+      { length: planFactDateWindow.end - planFactDateWindow.start + 1 },
+      (_, index) => planFactDateWindow.start + index
+    );
+  }, [dateRange.length, isPlanFactMode, planFactDateWindow]);
   const renderedChartTasks = useMemo13(
     () => visibleTaskWindowIndices.map((index) => {
       const task = previewVisibleTasks[index];
@@ -12458,7 +12723,10 @@ function TaskGanttChartInner(props, ref) {
       startX: e.clientX,
       startY: e.clientY,
       scrollX: container.scrollLeft,
-      scrollY: container.scrollTop
+      scrollY: container.scrollTop,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      frameId: null
     };
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
@@ -12467,16 +12735,37 @@ function TaskGanttChartInner(props, ref) {
     e.preventDefault();
   }, []);
   useEffect10(() => {
-    const handlePanMove = (e) => {
+    const flushPanMove = () => {
       const pan = panStateRef.current;
       if (!pan?.active) return;
+      pan.frameId = null;
       const container = scrollContainerRef.current;
       if (!container) return;
-      container.scrollLeft = pan.scrollX - (e.clientX - pan.startX);
-      container.scrollTop = pan.scrollY - (e.clientY - pan.startY);
+      const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+      const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+      const nextScrollLeft = clampScrollValue(pan.scrollX - (pan.currentX - pan.startX), maxScrollLeft);
+      const nextScrollTop = clampScrollValue(pan.scrollY - (pan.currentY - pan.startY), maxScrollTop);
+      if (Math.abs(container.scrollLeft - nextScrollLeft) > 0.5) {
+        container.scrollLeft = nextScrollLeft;
+      }
+      if (Math.abs(container.scrollTop - nextScrollTop) > 0.5) {
+        container.scrollTop = nextScrollTop;
+      }
+    };
+    const handlePanMove = (e) => {
+      const pan = panStateRef.current;
+      if (!pan?.active) return;
+      pan.currentX = e.clientX;
+      pan.currentY = e.clientY;
+      if (pan.frameId !== null) return;
+      pan.frameId = window.requestAnimationFrame(flushPanMove);
     };
     const handlePanEnd = () => {
-      if (!panStateRef.current?.active) return;
+      const pan = panStateRef.current;
+      if (!pan?.active) return;
+      if (pan.frameId !== null) {
+        window.cancelAnimationFrame(pan.frameId);
+      }
       panStateRef.current = null;
       const container = scrollContainerRef.current;
       if (container) container.style.cursor = "";
@@ -12603,7 +12892,10 @@ function TaskGanttChartInner(props, ref) {
                         onTasksChange: handleTaskChange,
                         onCellCommit: onPlanFactCellCommit,
                         highlightedTaskIds: taskListHighlightedTaskIds,
-                        filterMode
+                        filterMode,
+                        visibleRowIndices: visibleTaskWindowIndices,
+                        visibleDateIndices: visiblePlanFactDateIndices,
+                        todayDateIndex: todayInRange ? todayIndex : void 0
                       }
                     ) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
                       /* @__PURE__ */ jsxs15(