gantt-lib 0.6.2 → 0.7.0

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   getMultiMonthDays: () => getMultiMonthDays,
   getSuccessorChain: () => getSuccessorChain,
   getTransitiveCascadeChain: () => getTransitiveCascadeChain,
+  getVisibleReorderPosition: () => getVisibleReorderPosition,
   isTaskParent: () => isTaskParent,
   isToday: () => isToday,
   isWeekend: () => isWeekend,
@@ -281,33 +282,33 @@ function detectCycles(tasks) {
   return { hasCycle: false };
 }
 function computeLagFromDates(linkType, predStart, predEnd, succStart, succEnd) {
-  const DAY_MS = 24 * 60 * 60 * 1e3;
+  const DAY_MS2 = 24 * 60 * 60 * 1e3;
   const pS = Date.UTC(predStart.getUTCFullYear(), predStart.getUTCMonth(), predStart.getUTCDate());
   const pE = Date.UTC(predEnd.getUTCFullYear(), predEnd.getUTCMonth(), predEnd.getUTCDate());
   const sS = Date.UTC(succStart.getUTCFullYear(), succStart.getUTCMonth(), succStart.getUTCDate());
   const sE = Date.UTC(succEnd.getUTCFullYear(), succEnd.getUTCMonth(), succEnd.getUTCDate());
   switch (linkType) {
     case "FS":
-      return Math.round((sS - pE) / DAY_MS) - 1;
+      return Math.round((sS - pE) / DAY_MS2) - 1;
     case "SS":
-      return Math.round((sS - pS) / DAY_MS);
+      return Math.round((sS - pS) / DAY_MS2);
     case "FF":
-      return Math.round((sE - pE) / DAY_MS);
+      return Math.round((sE - pE) / DAY_MS2);
     case "SF":
-      return Math.round((sE - pS) / DAY_MS) + 1;
+      return Math.round((sE - pS) / DAY_MS2) + 1;
   }
 }
 function calculateSuccessorDate(predecessorStart, predecessorEnd, linkType, lag = 0) {
-  const DAY_MS = 24 * 60 * 60 * 1e3;
+  const DAY_MS2 = 24 * 60 * 60 * 1e3;
   switch (linkType) {
     case "FS":
-      return new Date(predecessorEnd.getTime() + (lag + 1) * DAY_MS);
+      return new Date(predecessorEnd.getTime() + (lag + 1) * DAY_MS2);
     case "SS":
-      return new Date(predecessorStart.getTime() + lag * DAY_MS);
+      return new Date(predecessorStart.getTime() + lag * DAY_MS2);
     case "FF":
-      return new Date(predecessorEnd.getTime() + lag * DAY_MS);
+      return new Date(predecessorEnd.getTime() + lag * DAY_MS2);
     case "SF":
-      return new Date(predecessorStart.getTime() + (lag - 1) * DAY_MS);
+      return new Date(predecessorStart.getTime() + (lag - 1) * DAY_MS2);
   }
 }
 function validateDependencies(tasks) {
@@ -539,13 +540,13 @@ function computeParentProgress(parentId, tasks) {
   if (children.length === 0) {
     return 0;
   }
-  const DAY_MS = 24 * 60 * 60 * 1e3;
+  const DAY_MS2 = 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_MS) / DAY_MS;
+    const duration = (end - start + DAY_MS2) / DAY_MS2;
     const progress = child.progress ?? 0;
     totalWeight += duration;
     weightedSum += duration * progress;
@@ -2082,6 +2083,36 @@ var DependencyLines_default = DependencyLines;
 // src/components/TaskList/TaskList.tsx
 var import_react12 = __toESM(require("react"));
 
+// src/utils/taskListReorder.ts
+function getVisibleReorderPosition(orderedTasks, visibleTasks, movedTaskId, originVisibleIndex, dropVisibleIndex) {
+  const originOrderedIndex = orderedTasks.findIndex((task) => task.id === movedTaskId);
+  if (originOrderedIndex === -1) {
+    return null;
+  }
+  const reorderedWithoutMoved = orderedTasks.filter((task) => task.id !== movedTaskId);
+  const visibleWithoutMoved = visibleTasks.filter((task) => task.id !== movedTaskId);
+  const visibleInsertIndex = originVisibleIndex < dropVisibleIndex ? dropVisibleIndex - 1 : dropVisibleIndex;
+  if (visibleWithoutMoved.length === 0) {
+    return { originOrderedIndex, insertIndex: 0 };
+  }
+  if (visibleInsertIndex <= 0) {
+    return {
+      originOrderedIndex,
+      insertIndex: reorderedWithoutMoved.findIndex((task) => task.id === visibleWithoutMoved[0].id)
+    };
+  }
+  if (visibleInsertIndex >= visibleWithoutMoved.length) {
+    return {
+      originOrderedIndex,
+      insertIndex: reorderedWithoutMoved.length
+    };
+  }
+  return {
+    originOrderedIndex,
+    insertIndex: reorderedWithoutMoved.findIndex((task) => task.id === visibleWithoutMoved[visibleInsertIndex].id)
+  };
+}
+
 // src/components/ui/Popover.tsx
 var RadixPopover = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -2418,6 +2449,16 @@ var LINK_TYPE_LABELS = {
 
 // src/components/TaskList/TaskListRow.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var DAY_MS = 24 * 60 * 60 * 1e3;
+var getInclusiveDurationDays = (startDate, endDate) => {
+  const start = parseUTCDate(startDate);
+  const end = parseUTCDate(endDate);
+  return Math.max(1, Math.round((end.getTime() - start.getTime()) / DAY_MS) + 1);
+};
+var getEndDateFromDuration = (startDate, durationDays) => {
+  const start = parseUTCDate(startDate);
+  return new Date(start.getTime() + (durationDays - 1) * DAY_MS).toISOString().split("T")[0];
+};
 var TrashIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 6h18" }),
@@ -2432,6 +2473,7 @@ var DragHandleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg",
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "2", cy: "12", r: "1.5" }),
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "8", cy: "12", r: "1.5" })
 ] });
+var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m9 18 6-6-6-6" }) });
 var HierarchyButton = ({
   isChild,
   isParent,
@@ -2600,11 +2642,16 @@ var TaskListRow = import_react10.default.memo(
     const [editingName, setEditingName] = (0, import_react10.useState)(false);
     const [nameValue, setNameValue] = (0, import_react10.useState)("");
     const nameInputRef = (0, import_react10.useRef)(null);
+    const [editingDuration, setEditingDuration] = (0, import_react10.useState)(false);
+    const [durationValue, setDurationValue] = (0, import_react10.useState)(getInclusiveDurationDays(task.startDate, task.endDate));
+    const durationInputRef = (0, import_react10.useRef)(null);
     const [editingProgress, setEditingProgress] = (0, import_react10.useState)(false);
     const [progressValue, setProgressValue] = (0, import_react10.useState)(0);
     const progressInputRef = (0, import_react10.useRef)(null);
     const [overflowOpen, setOverflowOpen] = (0, import_react10.useState)(false);
-    const confirmedRef = (0, import_react10.useRef)(false);
+    const nameConfirmedRef = (0, import_react10.useRef)(false);
+    const durationConfirmedRef = (0, import_react10.useRef)(false);
+    const progressConfirmedRef = (0, import_react10.useRef)(false);
     const autoEditedForRef = (0, import_react10.useRef)(null);
     const editTriggerRef = (0, import_react10.useRef)("doubleclick");
     const [deletePending, setDeletePending] = (0, import_react10.useState)(false);
@@ -2659,7 +2706,7 @@ var TaskListRow = import_react10.default.memo(
     (0, import_react10.useEffect)(() => {
       if (editingTaskId === task.id && !disableTaskNameEditing && autoEditedForRef.current !== editingTaskId) {
         autoEditedForRef.current = editingTaskId;
-        confirmedRef.current = false;
+        nameConfirmedRef.current = false;
         editTriggerRef.current = "autoedit";
         setNameValue(task.name);
         setEditingName(true);
@@ -2674,7 +2721,7 @@ var TaskListRow = import_react10.default.memo(
     const handleNameDoubleClick = (0, import_react10.useCallback)((e) => {
       if (disableTaskNameEditing) return;
       e.stopPropagation();
-      confirmedRef.current = false;
+      nameConfirmedRef.current = false;
       editTriggerRef.current = "doubleclick";
       setNameValue(task.name);
       setEditingName(true);
@@ -2683,7 +2730,7 @@ var TaskListRow = import_react10.default.memo(
       if (editingProgress) return;
       if (!editingName && !disableTaskNameEditing && e.key === "F2") {
         e.preventDefault();
-        confirmedRef.current = false;
+        nameConfirmedRef.current = false;
         editTriggerRef.current = "keypress";
         setNameValue(task.name);
         setEditingName(true);
@@ -2691,15 +2738,15 @@ var TaskListRow = import_react10.default.memo(
       }
       if (!editingName && !disableTaskNameEditing && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
         e.preventDefault();
-        confirmedRef.current = false;
+        nameConfirmedRef.current = false;
         editTriggerRef.current = "keypress";
         setNameValue(e.key);
         setEditingName(true);
       }
     }, [editingName, disableTaskNameEditing, task.name]);
     const handleNameSave = (0, import_react10.useCallback)(() => {
-      if (confirmedRef.current) {
-        confirmedRef.current = false;
+      if (nameConfirmedRef.current) {
+        nameConfirmedRef.current = false;
         return;
       }
       if (nameValue.trim()) {
@@ -2712,7 +2759,7 @@ var TaskListRow = import_react10.default.memo(
     }, []);
     const handleNameKeyDown = (0, import_react10.useCallback)((e) => {
       if (e.key === "Enter") {
-        confirmedRef.current = true;
+        nameConfirmedRef.current = true;
         if (nameValue.trim()) {
           onTaskChange?.({ ...task, name: nameValue.trim() });
         }
@@ -2721,15 +2768,54 @@ var TaskListRow = import_react10.default.memo(
         handleNameCancel();
       }
     }, [nameValue, task, onTaskChange, handleNameCancel]);
+    const handleDurationClick = (0, import_react10.useCallback)((e) => {
+      if (task.locked) return;
+      e.stopPropagation();
+      durationConfirmedRef.current = false;
+      setDurationValue(getInclusiveDurationDays(task.startDate, task.endDate));
+      setEditingDuration(true);
+    }, [task.locked, task.startDate, task.endDate]);
+    const applyDurationChange = (0, import_react10.useCallback)((nextDuration) => {
+      const normalizedDuration = Math.max(1, Math.round(nextDuration) || 1);
+      setDurationValue(normalizedDuration);
+    }, []);
+    const handleDurationSave = (0, import_react10.useCallback)(() => {
+      if (durationConfirmedRef.current) {
+        durationConfirmedRef.current = false;
+        return;
+      }
+      const normalizedDuration = Math.max(1, Math.round(durationValue) || 1);
+      onTaskChange?.({ ...task, endDate: getEndDateFromDuration(task.startDate, normalizedDuration) });
+      setEditingDuration(false);
+    }, [durationValue, task, onTaskChange]);
+    const handleDurationCancel = (0, import_react10.useCallback)(() => {
+      setDurationValue(getInclusiveDurationDays(task.startDate, task.endDate));
+      setEditingDuration(false);
+    }, [task.startDate, task.endDate]);
+    const handleDurationAdjust = (0, import_react10.useCallback)((delta) => {
+      applyDurationChange(durationValue + delta);
+    }, [applyDurationChange, durationValue]);
+    const handleDurationKeyDown = (0, import_react10.useCallback)((e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        durationConfirmedRef.current = true;
+        const normalizedDuration = Math.max(1, Math.round(durationValue) || 1);
+        onTaskChange?.({ ...task, endDate: getEndDateFromDuration(task.startDate, normalizedDuration) });
+        setEditingDuration(false);
+      } else if (e.key === "Escape") {
+        handleDurationCancel();
+      }
+    }, [durationValue, task, onTaskChange, handleDurationCancel]);
     const handleProgressClick = (0, import_react10.useCallback)((e) => {
+      if (task.locked) return;
       e.stopPropagation();
-      confirmedRef.current = false;
+      progressConfirmedRef.current = false;
       setProgressValue(task.progress ?? 0);
       setEditingProgress(true);
-    }, [task.progress]);
+    }, [task.progress, task.locked]);
     const handleProgressSave = (0, import_react10.useCallback)(() => {
-      if (confirmedRef.current) {
-        confirmedRef.current = false;
+      if (progressConfirmedRef.current) {
+        progressConfirmedRef.current = false;
         return;
       }
       const clampedValue = Math.max(0, Math.min(100, progressValue));
@@ -2739,10 +2825,13 @@ var TaskListRow = import_react10.default.memo(
     const handleProgressCancel = (0, import_react10.useCallback)(() => {
       setEditingProgress(false);
     }, []);
+    const handleProgressAdjust = (0, import_react10.useCallback)((delta) => {
+      setProgressValue((current) => Math.max(0, Math.min(100, current + delta)));
+    }, []);
     const handleProgressKeyDown = (0, import_react10.useCallback)((e) => {
       e.stopPropagation();
       if (e.key === "Enter") {
-        confirmedRef.current = true;
+        progressConfirmedRef.current = true;
         const clampedValue = Math.max(0, Math.min(100, progressValue));
         onTaskChange?.({ ...task, progress: clampedValue });
         setEditingProgress(false);
@@ -2756,6 +2845,15 @@ var TaskListRow = import_react10.default.memo(
         progressInputRef.current.select();
       }
     }, [editingProgress]);
+    (0, import_react10.useEffect)(() => {
+      setDurationValue(getInclusiveDurationDays(task.startDate, task.endDate));
+    }, [task.startDate, task.endDate]);
+    (0, import_react10.useEffect)(() => {
+      if (editingDuration && durationInputRef.current) {
+        durationInputRef.current.focus();
+        durationInputRef.current.select();
+      }
+    }, [editingDuration]);
     const handleStartDateChange = (0, import_react10.useCallback)((newDateISO) => {
       if (!newDateISO) return;
       const origStart = parseUTCDate(task.startDate);
@@ -2820,7 +2918,7 @@ var TaskListRow = import_react10.default.memo(
       onChipSelect?.(null);
     }, [selectedChip, onRemoveDependency, onChipSelect]);
     const startDateISO = toISODate(task.startDate);
-    const endDateISO = toISODate(task.endDate);
+    const endDateISO = editingDuration ? getEndDateFromDuration(task.startDate, durationValue) : toISODate(task.endDate);
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
@@ -2846,21 +2944,12 @@ var TaskListRow = import_react10.default.memo(
         },
         tabIndex: isSelected ? 0 : -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: "gantt-tl-cell gantt-tl-cell-number",
               onClick: handleNumberClick,
-              children: isParent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "gantt-tl-collapse-btn",
-                  onClick: handleToggleCollapse,
-                  "aria-label": isCollapsed ? "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" : "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
-                  children: isCollapsed ? "+" : "-"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "span",
                   {
@@ -2876,10 +2965,20 @@ var TaskListRow = import_react10.default.memo(
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "gantt-tl-num-label", children: rowIndex + 1 })
-              ] })
+              ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
+            isParent && !editingName && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `gantt-tl-collapse-btn ${isCollapsed ? "gantt-tl-collapse-btn-collapsed" : ""}`,
+                onClick: handleToggleCollapse,
+                "aria-label": isCollapsed ? "Expand children" : "Collapse children",
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronRightIcon, {})
+              }
+            ),
             editingName && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Input,
               {
@@ -2889,7 +2988,7 @@ var TaskListRow = import_react10.default.memo(
                 onChange: (e) => setNameValue(e.target.value),
                 onBlur: handleNameSave,
                 onKeyDown: handleNameKeyDown,
-                className: "gantt-tl-name-input",
+                className: ["gantt-tl-name-input", isChild ? "gantt-tl-name-input-child" : ""].filter(Boolean).join(" "),
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2897,7 +2996,13 @@ var TaskListRow = import_react10.default.memo(
               "button",
               {
                 type: "button",
-                className: `gantt-tl-name-trigger ${disableTaskNameEditing ? "gantt-tl-name-locked" : ""}`,
+                className: [
+                  "gantt-tl-name-trigger",
+                  disableTaskNameEditing ? "gantt-tl-name-locked" : "",
+                  isParent ? "gantt-tl-name-trigger-parent" : "",
+                  isChild ? "gantt-tl-name-trigger-child" : ""
+                ].filter(Boolean).join(" "),
+                title: task.name,
                 onClick: handleNameClick,
                 onDoubleClick: handleNameDoubleClick,
                 style: editingName ? { visibility: "hidden", pointerEvents: "none" } : void 0,
@@ -2986,22 +3091,91 @@ var TaskListRow = import_react10.default.memo(
               disabled: task.locked
             }
           ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-duration", onClick: handleDurationClick, children: [
+            editingDuration && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-number-editor", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Input,
+                {
+                  ref: durationInputRef,
+                  type: "number",
+                  min: 1,
+                  step: 1,
+                  value: durationValue,
+                  onChange: (e) => applyDurationChange(parseInt(e.target.value, 10) || 1),
+                  onBlur: handleDurationSave,
+                  onKeyDown: handleDurationKeyDown,
+                  className: "gantt-tl-number-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-number-steppers", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-number-stepper",
+                    tabIndex: -1,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => handleDurationAdjust(1),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m18 15-6-6-6 6" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-number-stepper",
+                    tabIndex: -1,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => handleDurationAdjust(-1),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 9 6 6 6-6" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: editingDuration ? { visibility: "hidden", pointerEvents: "none" } : void 0, children: getInclusiveDurationDays(task.startDate, task.endDate) })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-progress", onClick: handleProgressClick, children: [
-            editingProgress && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              Input,
-              {
-                ref: progressInputRef,
-                type: "number",
-                min: 0,
-                max: 100,
-                value: progressValue,
-                onChange: (e) => setProgressValue(parseInt(e.target.value) || 0),
-                onBlur: handleProgressSave,
-                onKeyDown: handleProgressKeyDown,
-                className: "gantt-tl-progress-input",
-                onClick: (e) => e.stopPropagation()
-              }
-            ),
+            editingProgress && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-number-editor", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                Input,
+                {
+                  ref: progressInputRef,
+                  type: "number",
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  value: progressValue,
+                  onChange: (e) => setProgressValue(parseInt(e.target.value, 10) || 0),
+                  onBlur: handleProgressSave,
+                  onKeyDown: handleProgressKeyDown,
+                  className: "gantt-tl-number-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-number-steppers", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-number-stepper",
+                    tabIndex: -1,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => handleProgressAdjust(1),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m18 15-6-6-6 6" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-number-stepper",
+                    tabIndex: -1,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => handleProgressAdjust(-1),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 9 6 6 6-6" }) })
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: editingProgress ? { visibility: "hidden", pointerEvents: "none" } : void 0, children: task.progress ? `${Math.round(task.progress)}%` : "0%" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3158,15 +3332,17 @@ var NewTaskRow = ({ rowHeight, onConfirm, onCancel }) => {
 // src/components/TaskList/TaskList.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var LINK_TYPE_ORDER = ["FS", "SS", "FF", "SF"];
+var MIN_TASK_LIST_WIDTH = 640;
 var TaskList = ({
   tasks,
   rowHeight,
   headerHeight,
-  taskListWidth = 542,
+  taskListWidth = 640,
   onTaskChange,
   selectedTaskId,
   onTaskSelect,
   show = true,
+  hasRightShadow = false,
   disableTaskNameEditing = false,
   disableDependencyEditing = false,
   onScrollToTask,
@@ -3305,11 +3481,13 @@ var TaskList = ({
   const [draggingIndex, setDraggingIndex] = (0, import_react12.useState)(null);
   const [dragOverIndex, setDragOverIndex] = (0, import_react12.useState)(null);
   const dragOriginIndexRef = (0, import_react12.useRef)(null);
+  const dragTaskIdRef = (0, import_react12.useRef)(null);
   const handleDragStart = (0, import_react12.useCallback)((index, e) => {
     e.dataTransfer.effectAllowed = "move";
     setDraggingIndex(index);
     dragOriginIndexRef.current = index;
-  }, []);
+    dragTaskIdRef.current = visibleTasks[index]?.id ?? null;
+  }, [visibleTasks]);
   const handleDragOver = (0, import_react12.useCallback)((index, e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -3317,16 +3495,32 @@ var TaskList = ({
   }, []);
   const handleDrop = (0, import_react12.useCallback)((dropIndex, e) => {
     e.preventDefault();
-    const originIndex = dragOriginIndexRef.current;
-    if (originIndex === null || originIndex === dropIndex) {
+    const originVisibleIndex = dragOriginIndexRef.current;
+    const movedTaskId = dragTaskIdRef.current;
+    if (originVisibleIndex === null || movedTaskId === null || originVisibleIndex === dropIndex) {
+      setDraggingIndex(null);
+      setDragOverIndex(null);
+      dragOriginIndexRef.current = null;
+      dragTaskIdRef.current = null;
+      return;
+    }
+    const reorderPosition = getVisibleReorderPosition(
+      orderedTasks,
+      visibleTasks,
+      movedTaskId,
+      originVisibleIndex,
+      dropIndex
+    );
+    if (!reorderPosition) {
       setDraggingIndex(null);
       setDragOverIndex(null);
       dragOriginIndexRef.current = null;
+      dragTaskIdRef.current = null;
       return;
     }
+    const { originOrderedIndex, insertIndex } = reorderPosition;
     const reordered = [...orderedTasks];
-    const [moved] = reordered.splice(originIndex, 1);
-    const insertIndex = dropIndex === visibleTasks.length ? visibleTasks.length - 1 : originIndex < dropIndex ? dropIndex - 1 : dropIndex;
+    const [moved] = reordered.splice(originOrderedIndex, 1);
     const isChild = !!moved.parentId;
     const isParent = tasks.some((t) => t.parentId === moved.id);
     const taskType = isParent ? "PARENT" : isChild ? "CHILD" : "ROOT";
@@ -3336,10 +3530,11 @@ var TaskList = ({
       name: moved.name,
       type: taskType,
       parentId: moved.parentId,
-      originIndex,
+      originIndex: originOrderedIndex,
+      originVisibleIndex,
       dropIndex,
       insertIndex,
-      direction: originIndex < dropIndex ? "DOWN" : "UP"
+      direction: originVisibleIndex < dropIndex ? "DOWN" : "UP"
     });
     console.log("[TASKS ARRAY LENGTH]", orderedTasks.length);
     let inferredParentId;
@@ -3426,11 +3621,13 @@ var TaskList = ({
     setDraggingIndex(null);
     setDragOverIndex(null);
     dragOriginIndexRef.current = null;
-  }, [orderedTasks, visibleTasks.length, onReorder, onTaskSelect]);
+    dragTaskIdRef.current = null;
+  }, [orderedTasks, visibleTasks, onReorder, onTaskSelect]);
   const handleDragEnd = (0, import_react12.useCallback)(() => {
     setDraggingIndex(null);
     setDragOverIndex(null);
     dragOriginIndexRef.current = null;
+    dragTaskIdRef.current = null;
   }, []);
   const handleConfirmNewTask = (0, import_react12.useCallback)((name) => {
     const now = /* @__PURE__ */ new Date();
@@ -3454,18 +3651,20 @@ var TaskList = ({
     setIsCreating(false);
   }, [onAdd]);
   const handleCancelNewTask = (0, import_react12.useCallback)(() => setIsCreating(false), []);
+  const effectiveTaskListWidth = Math.max(taskListWidth, MIN_TASK_LIST_WIDTH);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref: overlayRef,
-      className: `gantt-tl-overlay${show ? "" : " gantt-tl-hidden"}`,
-      style: { width: `${taskListWidth}px` },
+      className: `gantt-tl-overlay${show ? "" : " gantt-tl-hidden"}${hasRightShadow ? " gantt-tl-overlay-shadowed" : ""}`,
+      style: { width: `${effectiveTaskListWidth}px`, minWidth: `${MIN_TASK_LIST_WIDTH}px` },
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-header", style: { height: `${headerHeight + 0.5}px` }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-number", children: "\u2116" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-name", children: "\u0418\u043C\u044F" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041D\u0430\u0447\u0430\u043B\u043E" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-duration", children: "\u0414\u043D." }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-headerCell gantt-tl-cell-progress", children: "%" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-headerCell gantt-tl-cell-deps", style: { position: "relative" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Popover, { open: typeMenuOpen, onOpenChange: setTypeMenuOpen, children: [
@@ -3591,7 +3790,7 @@ var GanttChart = (0, import_react13.forwardRef)(({
   disableConstraints,
   onCascade,
   showTaskList = false,
-  taskListWidth = 520,
+  taskListWidth = 660,
   disableTaskNameEditing = false,
   disableDependencyEditing = false,
   highlightExpiredTasks = false,
@@ -3603,6 +3802,7 @@ var GanttChart = (0, import_react13.forwardRef)(({
 }, ref) => {
   const scrollContainerRef = (0, import_react13.useRef)(null);
   const [selectedTaskId, setSelectedTaskId] = (0, import_react13.useState)(null);
+  const [taskListHasRightShadow, setTaskListHasRightShadow] = (0, import_react13.useState)(false);
   const [selectedChip, setSelectedChip] = (0, import_react13.useState)(null);
   const [collapsedParentIds, setCollapsedParentIds] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
   const [editingTaskId, setEditingTaskId] = (0, import_react13.useState)(null);
@@ -3649,6 +3849,18 @@ var GanttChart = (0, import_react13.forwardRef)(({
     const scrollLeft = Math.round(todayOffset - containerWidth / 2 + dayWidth / 2);
     container.scrollLeft = Math.max(0, scrollLeft);
   }, []);
+  (0, import_react13.useEffect)(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const updateShadow = () => {
+      setTaskListHasRightShadow(container.scrollLeft > 0);
+    };
+    updateShadow();
+    container.addEventListener("scroll", updateShadow, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", updateShadow);
+    };
+  }, []);
   const scrollToToday = (0, import_react13.useCallback)(() => {
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
@@ -4052,6 +4264,7 @@ var GanttChart = (0, import_react13.forwardRef)(({
             selectedTaskId: selectedTaskId ?? void 0,
             onTaskSelect: handleTaskSelect,
             show: showTaskList,
+            hasRightShadow: taskListHasRightShadow,
             disableTaskNameEditing,
             disableDependencyEditing,
             onScrollToTask: scrollToTask,
@@ -4215,6 +4428,7 @@ Button.displayName = "Button";
   getMultiMonthDays,
   getSuccessorChain,
   getTransitiveCascadeChain,
+  getVisibleReorderPosition,
   isTaskParent,
   isToday,
   isWeekend,