gantt-lib 0.1.2 → 0.3.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/GanttChart/GanttChart.tsx
-import { useMemo as useMemo8, useCallback as useCallback6, useRef as useRef4, useState as useState5, useEffect as useEffect4, useImperativeHandle, forwardRef } from "react";
+import { useMemo as useMemo9, useCallback as useCallback6, useRef as useRef5, useState as useState6, useEffect as useEffect5, useImperativeHandle, forwardRef } from "react";
 
 // src/utils/dateUtils.ts
 var parseUTCDate = (date) => {
@@ -195,11 +195,35 @@ function detectCycles(tasks) {
   }
   return { hasCycle: false };
 }
+function computeLagFromDates(linkType, predStart, predEnd, succStart, succEnd) {
+  const DAY_MS = 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;
+    case "SS":
+      return Math.round((sS - pS) / DAY_MS);
+    case "FF":
+      return Math.round((sE - pE) / DAY_MS);
+    case "SF":
+      return Math.round((sE - pS) / DAY_MS) + 1;
+  }
+}
 function calculateSuccessorDate(predecessorStart, predecessorEnd, linkType, lag = 0) {
-  const baseDate = linkType.startsWith("F") ? predecessorEnd : predecessorStart;
-  const lagMs = lag * 24 * 60 * 60 * 1e3;
-  const resultDate = new Date(baseDate.getTime() + lagMs);
-  return resultDate;
+  const DAY_MS = 24 * 60 * 60 * 1e3;
+  switch (linkType) {
+    case "FS":
+      return new Date(predecessorEnd.getTime() + (lag + 1) * DAY_MS);
+    case "SS":
+      return new Date(predecessorStart.getTime() + lag * DAY_MS);
+    case "FF":
+      return new Date(predecessorEnd.getTime() + lag * DAY_MS);
+    case "SF":
+      return new Date(predecessorStart.getTime() + (lag - 1) * DAY_MS);
+  }
 }
 function validateDependencies(tasks) {
   const errors = [];
@@ -346,35 +370,10 @@ function recalculateIncomingLags(task, newStartDate, newEndDate, allTasks) {
   return task.dependencies.map((dep) => {
     const predecessor = taskById.get(dep.taskId);
     if (!predecessor) return dep;
-    if (dep.type === "FS") {
-      const predEnd = new Date(predecessor.endDate);
-      const lagDays = Math.round(
-        (Date.UTC(newStartDate.getUTCFullYear(), newStartDate.getUTCMonth(), newStartDate.getUTCDate()) - Date.UTC(predEnd.getUTCFullYear(), predEnd.getUTCMonth(), predEnd.getUTCDate())) / (24 * 60 * 60 * 1e3)
-      );
-      return { ...dep, lag: lagDays };
-    }
-    if (dep.type === "SS") {
-      const predStart = new Date(predecessor.startDate);
-      const lagDays = Math.max(0, Math.round(
-        (Date.UTC(newStartDate.getUTCFullYear(), newStartDate.getUTCMonth(), newStartDate.getUTCDate()) - Date.UTC(predStart.getUTCFullYear(), predStart.getUTCMonth(), predStart.getUTCDate())) / (24 * 60 * 60 * 1e3)
-      ));
-      return { ...dep, lag: lagDays };
-    }
-    if (dep.type === "FF") {
-      const predEnd = new Date(predecessor.endDate);
-      const lagDays = Math.round(
-        (Date.UTC(newEndDate.getUTCFullYear(), newEndDate.getUTCMonth(), newEndDate.getUTCDate()) - Date.UTC(predEnd.getUTCFullYear(), predEnd.getUTCMonth(), predEnd.getUTCDate())) / (24 * 60 * 60 * 1e3)
-      );
-      return { ...dep, lag: lagDays };
-    }
-    if (dep.type === "SF") {
-      const predStart = new Date(predecessor.startDate);
-      const lagDays = Math.min(0, Math.round(
-        (Date.UTC(newEndDate.getUTCFullYear(), newEndDate.getUTCMonth(), newEndDate.getUTCDate()) - Date.UTC(predStart.getUTCFullYear(), predStart.getUTCMonth(), predStart.getUTCDate()) + 24 * 60 * 60 * 1e3) / (24 * 60 * 60 * 1e3)
-      ));
-      return { ...dep, lag: lagDays };
-    }
-    return dep;
+    const predStart = new Date(predecessor.startDate);
+    const predEnd = new Date(predecessor.endDate);
+    const lagDays = computeLagFromDates(dep.type, predStart, predEnd, newStartDate, newEndDate);
+    return { ...dep, lag: lagDays };
   });
 }
 function getAllDependencyEdges(tasks) {
@@ -1093,29 +1092,51 @@ var useTaskDrag = (options) => {
 // src/components/TaskRow/TaskRow.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var arePropsEqual = (prevProps, nextProps) => {
-  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider;
+  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks;
 };
 var TaskRow = React2.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider, highlightExpiredTasks }) => {
     const { divider: taskDivider } = task;
     const taskStartDate = useMemo2(() => parseUTCDate(task.startDate), [task.startDate]);
     const taskEndDate = useMemo2(() => parseUTCDate(task.endDate), [task.endDate]);
+    const isExpired = useMemo2(() => {
+      if (!highlightExpiredTasks) return false;
+      const now = /* @__PURE__ */ new Date();
+      const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
+      const tomorrow = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate() + 1));
+      const taskStart = parseUTCDate(task.startDate);
+      const taskEnd = parseUTCDate(task.endDate);
+      const actualProgress = task.progress ?? 0;
+      if (actualProgress >= 100) {
+        return false;
+      }
+      const msPerDay = 1e3 * 60 * 60 * 24;
+      const taskDuration = taskEnd.getTime() - taskStart.getTime() + msPerDay;
+      const isTaskEndingTodayOrTomorrow = today.getUTCFullYear() === taskEnd.getUTCFullYear() && today.getUTCMonth() === taskEnd.getUTCMonth() && today.getUTCDate() === taskEnd.getUTCDate() || tomorrow.getUTCFullYear() === taskEnd.getUTCFullYear() && tomorrow.getUTCMonth() === taskEnd.getUTCMonth() && tomorrow.getUTCDate() === taskEnd.getUTCDate();
+      const elapsedCutoff = isTaskEndingTodayOrTomorrow ? new Date(today.getTime() - msPerDay) : today;
+      const daysFromStart = elapsedCutoff.getTime() - taskStart.getTime();
+      const todayPosition = Math.min(100, Math.max(0, daysFromStart / taskDuration * 100));
+      return actualProgress < todayPosition;
+    }, [task.startDate, task.endDate, task.progress, highlightExpiredTasks]);
     const { left, width } = useMemo2(
       () => calculateTaskBar(taskStartDate, taskEndDate, monthStart, dayWidth),
       [taskStartDate, taskEndDate, monthStart, dayWidth]
     );
-    const barColor = task.color || "var(--gantt-task-bar-default-color)";
+    const barColor = isExpired ? "var(--gantt-expired-color)" : task.color || "var(--gantt-task-bar-default-color)";
     const progressWidth = useMemo2(() => {
       if (task.progress === void 0 || task.progress <= 0) return 0;
       return Math.min(100, Math.max(0, Math.round(task.progress)));
     }, [task.progress]);
     const progressColor = useMemo2(() => {
+      if (isExpired) {
+        return "color-mix(in srgb, var(--gantt-expired-color) 40%, black)";
+      }
       if (progressWidth === 100) {
         return task.accepted ? "var(--gantt-progress-accepted, #22c55e)" : "var(--gantt-progress-completed, #fbbf24)";
       }
       const baseColor = task.color || "var(--gantt-task-bar-default-color)";
       return `color-mix(in srgb, ${baseColor} 40%, black)`;
-    }, [progressWidth, task.accepted, task.color]);
+    }, [isExpired, progressWidth, task.accepted, task.color]);
     const handleDragEnd = (result) => {
       const updatedTask = {
         ...task,
@@ -1401,60 +1422,11 @@ var DragGuideLines_default = DragGuideLines;
 import React5, { useMemo as useMemo5 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function calculateEffectiveLag(edge, predPosition, succPosition, monthStart, dayWidth) {
-  const predStartDate = pixelsToDate(predPosition.left, monthStart, dayWidth);
-  const predEndDate = pixelsToDate(predPosition.right - dayWidth, monthStart, dayWidth);
-  const succStartDate = pixelsToDate(succPosition.left, monthStart, dayWidth);
-  const succEndDate = pixelsToDate(succPosition.right - dayWidth, monthStart, dayWidth);
-  let lagMs = 0;
-  switch (edge.type) {
-    case "FS":
-      lagMs = Date.UTC(
-        succStartDate.getUTCFullYear(),
-        succStartDate.getUTCMonth(),
-        succStartDate.getUTCDate()
-      ) - Date.UTC(
-        predEndDate.getUTCFullYear(),
-        predEndDate.getUTCMonth(),
-        predEndDate.getUTCDate()
-      ) - 24 * 60 * 60 * 1e3;
-      break;
-    case "SS":
-      lagMs = Date.UTC(
-        succStartDate.getUTCFullYear(),
-        succStartDate.getUTCMonth(),
-        succStartDate.getUTCDate()
-      ) - Date.UTC(
-        predStartDate.getUTCFullYear(),
-        predStartDate.getUTCMonth(),
-        predStartDate.getUTCDate()
-      );
-      break;
-    case "FF":
-      lagMs = Date.UTC(
-        succEndDate.getUTCFullYear(),
-        succEndDate.getUTCMonth(),
-        succEndDate.getUTCDate()
-      ) - Date.UTC(
-        predEndDate.getUTCFullYear(),
-        predEndDate.getUTCMonth(),
-        predEndDate.getUTCDate()
-      );
-      break;
-    case "SF":
-      lagMs = Date.UTC(
-        succEndDate.getUTCFullYear(),
-        succEndDate.getUTCMonth(),
-        succEndDate.getUTCDate()
-      ) - Date.UTC(
-        predStartDate.getUTCFullYear(),
-        predStartDate.getUTCMonth(),
-        predStartDate.getUTCDate()
-      ) + 24 * 60 * 60 * 1e3;
-      break;
-    default:
-      return 0;
-  }
-  return Math.round(lagMs / (24 * 60 * 60 * 1e3));
+  const predStart = pixelsToDate(predPosition.left, monthStart, dayWidth);
+  const predEnd = pixelsToDate(predPosition.right - dayWidth, monthStart, dayWidth);
+  const succStart = pixelsToDate(succPosition.left, monthStart, dayWidth);
+  const succEnd = pixelsToDate(succPosition.right - dayWidth, monthStart, dayWidth);
+  return computeLagFromDates(edge.type, predStart, predEnd, succStart, succEnd);
 }
 var DependencyLines = React5.memo(({
   tasks,
@@ -1462,7 +1434,8 @@ var DependencyLines = React5.memo(({
   dayWidth,
   rowHeight,
   gridWidth,
-  dragOverrides
+  dragOverrides,
+  selectedDep
 }) => {
   const { taskPositions, taskIndices } = useMemo5(() => {
     const positions = /* @__PURE__ */ new Map();
@@ -1576,30 +1549,60 @@ var DependencyLines = React5.memo(({
                 }
               )
             }
-          )
-        ] }),
-        lines.map(({ id, path, hasCycle, lag, fromX, toX, fromY, reverseOrder }) => /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              d: path,
-              className: hasCycle ? "gantt-dependency-path gantt-dependency-cycle" : "gantt-dependency-path",
-              markerEnd: hasCycle ? "url(#arrowhead-cycle)" : "url(#arrowhead)"
-            }
           ),
-          lag !== 0 && /* @__PURE__ */ jsx6(
-            "text",
+          /* @__PURE__ */ jsx6(
+            "marker",
             {
-              className: "gantt-dependency-lag-label",
-              x: lag < 0 ? toX + 14 : toX - 14,
-              y: reverseOrder ? fromY - 4 : fromY + 12,
-              textAnchor: "middle",
-              fontSize: "10",
-              fill: hasCycle ? "var(--gantt-dependency-cycle-color, #ef4444)" : "var(--gantt-dependency-line-color, #666666)",
-              children: lag > 0 ? `+${lag}` : `${lag}`
+              id: "arrowhead-selected",
+              markerWidth: "8",
+              markerHeight: "6",
+              markerUnits: "userSpaceOnUse",
+              refX: "7",
+              refY: "3",
+              orient: "auto",
+              children: /* @__PURE__ */ jsx6(
+                "polygon",
+                {
+                  points: "0 0, 8 3, 0 6",
+                  fill: "#ef4444"
+                }
+              )
             }
           )
-        ] }, id))
+        ] }),
+        lines.map(({ id, path, hasCycle, lag, fromX, toX, fromY, reverseOrder }) => {
+          const isSelected = selectedDep != null && id === `${selectedDep.predecessorId}-${selectedDep.successorId}-${selectedDep.linkType}`;
+          let pathClassName = "gantt-dependency-path";
+          if (isSelected) pathClassName += " gantt-dependency-selected";
+          else if (hasCycle) pathClassName += " gantt-dependency-cycle";
+          let markerEnd;
+          if (isSelected) markerEnd = "url(#arrowhead-selected)";
+          else if (hasCycle) markerEnd = "url(#arrowhead-cycle)";
+          else markerEnd = "url(#arrowhead)";
+          const lagColor = isSelected ? "#ef4444" : hasCycle ? "var(--gantt-dependency-cycle-color, #ef4444)" : "var(--gantt-dependency-line-color, #666666)";
+          return /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
+            /* @__PURE__ */ jsx6(
+              "path",
+              {
+                d: path,
+                className: pathClassName,
+                markerEnd
+              }
+            ),
+            lag !== 0 && /* @__PURE__ */ jsx6(
+              "text",
+              {
+                className: "gantt-dependency-lag-label",
+                x: lag < 0 ? toX + 14 : toX - 14,
+                y: reverseOrder ? fromY - 4 : fromY + 12,
+                textAnchor: "middle",
+                fontSize: "10",
+                fill: lagColor,
+                children: lag > 0 ? `+${lag}` : `${lag}`
+              }
+            )
+          ] }, id);
+        })
       ]
     }
   );
@@ -1608,17 +1611,51 @@ DependencyLines.displayName = "DependencyLines";
 var DependencyLines_default = DependencyLines;
 
 // src/components/TaskList/TaskList.tsx
-import { useMemo as useMemo7, useCallback as useCallback5 } from "react";
+import React10, { useMemo as useMemo8, useCallback as useCallback5, useState as useState5, useEffect as useEffect4, useRef as useRef4 } from "react";
+
+// src/components/ui/Popover.tsx
+import * as RadixPopover from "@radix-ui/react-popover";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Popover = ({ open, onOpenChange, children }) => {
+  return /* @__PURE__ */ jsx7(RadixPopover.Root, { open, onOpenChange, children });
+};
+var PopoverTrigger = RadixPopover.Trigger;
+var PopoverContent = ({
+  children,
+  className,
+  align = "start",
+  side = "bottom",
+  portal = true,
+  collisionPadding = 8,
+  onInteractOutside
+}) => {
+  const content = /* @__PURE__ */ jsx7(
+    RadixPopover.Content,
+    {
+      className: `gantt-popover${className ? ` ${className}` : ""}`,
+      align,
+      side,
+      collisionPadding,
+      sideOffset: 4,
+      onInteractOutside,
+      children
+    }
+  );
+  if (portal) {
+    return /* @__PURE__ */ jsx7(RadixPopover.Portal, { children: content });
+  }
+  return content;
+};
 
 // src/components/TaskList/TaskListRow.tsx
-import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback4 } from "react";
+import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback4, useMemo as useMemo7 } from "react";
 
 // src/components/ui/Input.tsx
 import React6 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Input = React6.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "input",
       {
         ref,
@@ -1656,7 +1693,7 @@ import {
   startOfDay
 } from "date-fns";
 import { ru as ru2 } from "date-fns/locale";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function getDayClassName(day, selected) {
   const classes = ["gantt-day-btn"];
   if (selected && isSameDay(day, selected)) classes.push("selected");
@@ -1726,12 +1763,12 @@ var Calendar = ({
       const emptyDays = (getDay(firstDay) + 6) % 7;
       const monthKey = format2(month, "yyyy-MM");
       const monthLabel = format2(month, "LLLL yyyy", { locale: ru2 });
-      const emptyCells = Array.from({ length: emptyDays }, (_, i) => /* @__PURE__ */ jsx8("div", { className: "gantt-cal-empty-day" }, `e-${i}`));
+      const emptyCells = Array.from({ length: emptyDays }, (_, i) => /* @__PURE__ */ jsx9("div", { className: "gantt-cal-empty-day" }, `e-${i}`));
       const dayCells = Array.from({ length: totalDays }, (_, i) => {
         const dayNum = i + 1;
         const day = new Date(month.getFullYear(), month.getMonth(), dayNum);
         const className = getDayClassName(day, selected);
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1748,7 +1785,7 @@ var Calendar = ({
         );
       });
       return /* @__PURE__ */ jsxs6("div", { className: "gantt-cal-month", "data-month": monthKey, children: [
-        /* @__PURE__ */ jsx8("div", { className: "gantt-cal-month-header", children: monthLabel }),
+        /* @__PURE__ */ jsx9("div", { className: "gantt-cal-month-header", children: monthLabel }),
         /* @__PURE__ */ jsxs6("div", { className: "gantt-cal-month-days", children: [
           emptyCells,
           dayCells
@@ -1761,42 +1798,10 @@ var Calendar = ({
     () => months.map(renderMonth),
     [months, renderMonth]
   );
-  return /* @__PURE__ */ jsx8("div", { ref: scrollRef, className: "gantt-cal-container", children: renderedMonths });
+  return /* @__PURE__ */ jsx9("div", { ref: scrollRef, className: "gantt-cal-container", children: renderedMonths });
 };
 Calendar.displayName = "Calendar";
 
-// src/components/ui/Popover.tsx
-import * as RadixPopover from "@radix-ui/react-popover";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Popover = ({ open, onOpenChange, children }) => {
-  return /* @__PURE__ */ jsx9(RadixPopover.Root, { open, onOpenChange, children });
-};
-var PopoverTrigger = RadixPopover.Trigger;
-var PopoverContent = ({
-  children,
-  className,
-  align = "start",
-  side = "bottom",
-  portal = true,
-  collisionPadding = 8
-}) => {
-  const content = /* @__PURE__ */ jsx9(
-    RadixPopover.Content,
-    {
-      className: `gantt-popover${className ? ` ${className}` : ""}`,
-      align,
-      side,
-      collisionPadding,
-      sideOffset: 4,
-      children
-    }
-  );
-  if (portal) {
-    return /* @__PURE__ */ jsx9(RadixPopover.Portal, { children: content });
-  }
-  return content;
-};
-
 // src/components/ui/DatePicker.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DatePicker = ({
@@ -1861,19 +1866,198 @@ var DatePicker = ({
 };
 DatePicker.displayName = "DatePicker";
 
-// src/components/TaskList/TaskListRow.tsx
+// src/components/TaskList/DepIcons.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DepIconFS = () => /* @__PURE__ */ jsxs8("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__ */ jsx11("path", { d: "m10 15 5 5 5-5" }),
+  /* @__PURE__ */ jsx11("path", { d: "M4 4h7a4 4 0 0 1 4 4v12" })
+] });
+var DepIconSS = () => /* @__PURE__ */ jsxs8("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__ */ jsx11("path", { d: "M3 5v14" }),
+  /* @__PURE__ */ jsx11("path", { d: "M21 12H7" }),
+  /* @__PURE__ */ jsx11("path", { d: "m15 18 6-6-6-6" })
+] });
+var DepIconFF = () => /* @__PURE__ */ jsxs8("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__ */ jsx11("path", { d: "M17 12H3" }),
+  /* @__PURE__ */ jsx11("path", { d: "m11 18 6-6-6-6" }),
+  /* @__PURE__ */ jsx11("path", { d: "M21 5v14" })
+] });
+var DepIconSF = () => /* @__PURE__ */ jsxs8("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__ */ jsx11("path", { d: "m14 15-5 5-5-5" }),
+  /* @__PURE__ */ jsx11("path", { d: "M20 4h-7a4 4 0 0 0-4 4v12" })
+] });
+var LINK_TYPE_ICONS = {
+  FS: DepIconFS,
+  SS: DepIconSS,
+  FF: DepIconFF,
+  SF: DepIconSF
+};
+var LINK_TYPE_LABELS = {
+  FS: "\u041E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435-\u043D\u0430\u0447\u0430\u043B\u043E",
+  SS: "\u041D\u0430\u0447\u0430\u043B\u043E-\u043D\u0430\u0447\u0430\u043B\u043E",
+  FF: "\u041E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435-\u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435",
+  SF: "\u041D\u0430\u0447\u0430\u043B\u043E-\u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435"
+};
+
+// src/components/TaskList/TaskListRow.tsx
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var TrashIcon = () => /* @__PURE__ */ jsxs9("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__ */ jsx12("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+  /* @__PURE__ */ jsx12("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx12("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+] });
+function formatDepDescription(type, lag) {
+  const effectiveLag = lag ?? 0;
+  if (type === "FS") {
+    if (effectiveLag > 0) return `\u041D\u0430\u0447\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 ${effectiveLag} \u0434\u043D. \u043F\u043E\u0441\u043B\u0435 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+    if (effectiveLag < 0) return `\u041D\u0430\u0447\u0430\u0442\u044C \u0437\u0430 ${Math.abs(effectiveLag)} \u0434\u043D. \u0434\u043E \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+    return `\u041D\u0430\u0447\u0430\u0442\u044C \u0441\u0440\u0430\u0437\u0443 \u043F\u043E\u0441\u043B\u0435 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+  }
+  if (type === "FF") {
+    if (effectiveLag > 0) return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0447\u0435\u0440\u0435\u0437 ${effectiveLag} \u0434\u043D. \u043F\u043E\u0441\u043B\u0435 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+    if (effectiveLag < 0) return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0437\u0430 ${Math.abs(effectiveLag)} \u0434\u043D. \u0434\u043E \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+    return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u043F\u043E\u0441\u043B\u0435 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F`;
+  }
+  if (type === "SS") {
+    if (effectiveLag > 0) return `\u041D\u0430\u0447\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 ${effectiveLag} \u0434\u043D. \u043F\u043E\u0441\u043B\u0435 \u043D\u0430\u0447\u0430\u043B\u0430`;
+    if (effectiveLag < 0) return `\u041D\u0430\u0447\u0430\u0442\u044C \u0437\u0430 ${Math.abs(effectiveLag)} \u0434\u043D. \u0434\u043E \u043D\u0430\u0447\u0430\u043B\u0430`;
+    return `\u041D\u0430\u0447\u0430\u0442\u044C \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043D\u0430\u0447\u0430\u043B\u043E\u043C`;
+  }
+  if (type === "SF") {
+    if (effectiveLag > 0) return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0447\u0435\u0440\u0435\u0437 ${effectiveLag} \u0434\u043D. \u043F\u043E\u0441\u043B\u0435 \u043D\u0430\u0447\u0430\u043B\u0430`;
+    if (effectiveLag < 0) return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0437\u0430 ${Math.abs(effectiveLag)} \u0434\u043D. \u0434\u043E \u043D\u0430\u0447\u0430\u043B\u0430`;
+    return `\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0434\u043E \u043D\u0430\u0447\u0430\u043B\u0430`;
+  }
+  return "";
+}
+var DepChip = ({
+  lag,
+  dep,
+  taskId,
+  predecessorName,
+  selectedChip,
+  disableDependencyEditing,
+  onChipSelect,
+  onRowClick,
+  onScrollToTask,
+  onRemoveDependency,
+  onChipSelectClear
+}) => {
+  const isSelected = selectedChip?.successorId === taskId && selectedChip?.predecessorId === dep.taskId && selectedChip?.linkType === dep.type;
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (disableDependencyEditing) return;
+    onChipSelect?.(isSelected ? null : { successorId: taskId, predecessorId: dep.taskId, linkType: dep.type });
+    if (!isSelected) {
+      onRowClick?.(taskId);
+      onScrollToTask?.(taskId);
+    }
+  };
+  const handleTrashClick = (e) => {
+    e.stopPropagation();
+    onRemoveDependency?.(taskId, dep.taskId, dep.type);
+    onChipSelectClear();
+  };
+  const Icon = LINK_TYPE_ICONS[dep.type];
+  const depPrefix = formatDepDescription(dep.type, lag);
+  const depName = predecessorName ?? dep.taskId;
+  return /* @__PURE__ */ jsxs9(Popover, { open: isSelected, onOpenChange: (open) => {
+  }, children: [
+    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9("span", { className: "gantt-tl-dep-chip-wrapper", children: [
+      /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: `gantt-tl-dep-chip${isSelected ? " gantt-tl-dep-chip-selected" : ""}`,
+          onClick: handleClick,
+          children: /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsx12(Icon, {}),
+            lag != null && lag !== 0 ? lag > 0 ? `+${lag}` : `${lag}` : ""
+          ] })
+        }
+      ),
+      !disableDependencyEditing && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "gantt-tl-dep-chip-trash",
+          "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0432\u044F\u0437\u044C",
+          onClick: handleTrashClick,
+          children: /* @__PURE__ */ jsx12(TrashIcon, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs9(
+      PopoverContent,
+      {
+        portal: true,
+        side: "bottom",
+        align: "start",
+        className: "gantt-tl-dep-info-popover",
+        onInteractOutside: (event) => {
+          const target = event.target;
+          if (target?.closest?.(".gantt-tl-dep-chip") || target?.closest?.(".gantt-tl-dep-delete-label") || target?.closest?.(".gantt-tl-dep-chip-trash")) {
+            event.preventDefault();
+          } else {
+            onChipSelectClear();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-prefix", children: depPrefix }),
+          /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-name", children: depName })
+        ]
+      }
+    )
+  ] });
+};
 var toISODate = (value) => {
   if (value instanceof Date) return value.toISOString().split("T")[0];
   if (typeof value === "string" && value.includes("T")) return value.split("T")[0];
   return value;
 };
 var TaskListRow = React9.memo(
-  ({ task, rowIndex, rowHeight, onTaskChange, selectedTaskId, onRowClick, disableTaskNameEditing = false }) => {
+  ({
+    task,
+    rowIndex,
+    rowHeight,
+    onTaskChange,
+    selectedTaskId,
+    onRowClick,
+    disableTaskNameEditing = false,
+    disableDependencyEditing = false,
+    allTasks = [],
+    activeLinkType,
+    selectingPredecessorFor,
+    onSetSelectingPredecessorFor,
+    onAddDependency,
+    onRemoveDependency,
+    selectedChip,
+    onChipSelect,
+    onScrollToTask
+  }) => {
     const [editingName, setEditingName] = useState4(false);
     const [nameValue, setNameValue] = useState4("");
     const nameInputRef = useRef3(null);
+    const [overflowOpen, setOverflowOpen] = useState4(false);
     const isSelected = selectedTaskId === task.id;
+    const isPicking = selectingPredecessorFor != null;
+    const isSourceRow = isPicking && selectingPredecessorFor === task.id;
+    const chips = useMemo7(() => {
+      const succStart = new Date(task.startDate);
+      const succEnd = new Date(task.endDate);
+      const taskById = new Map((allTasks ?? []).map((t) => [t.id, t]));
+      return (task.dependencies ?? []).map((dep) => {
+        const pred = taskById.get(dep.taskId);
+        const lag = pred ? computeLagFromDates(
+          dep.type,
+          new Date(pred.startDate),
+          new Date(pred.endDate),
+          succStart,
+          succEnd
+        ) : dep.lag ?? 0;
+        return { dep, lag, predecessorName: pred?.name ?? dep.taskId };
+      });
+    }, [task.dependencies, task.startDate, task.endDate, allTasks]);
+    const linkWord = chips.length <= 4 ? "\u0441\u0432\u044F\u0437\u0438" : "\u0441\u0432\u044F\u0437\u0435\u0439";
     useEffect3(() => {
       if (editingName && nameInputRef.current) {
         nameInputRef.current.focus();
@@ -1919,18 +2103,60 @@ var TaskListRow = React9.memo(
     const handleRowClickInternal = useCallback4(() => {
       onRowClick?.(task.id);
     }, [task.id, onRowClick]);
+    const handleNumberClick = useCallback4((e) => {
+      e.stopPropagation();
+      onRowClick?.(task.id);
+      onScrollToTask?.(task.id);
+    }, [task.id, onRowClick, onScrollToTask]);
+    const handleAddClick = useCallback4((e) => {
+      e.stopPropagation();
+      onSetSelectingPredecessorFor?.(task.id);
+    }, [task.id, onSetSelectingPredecessorFor]);
+    const handlePredecessorPick = useCallback4((e) => {
+      e.stopPropagation();
+      if (!isPicking || isSourceRow) return;
+      if (!selectingPredecessorFor || !activeLinkType) return;
+      onAddDependency?.(task.id, selectingPredecessorFor, activeLinkType);
+    }, [isPicking, isSourceRow, selectingPredecessorFor, task.id, activeLinkType, onAddDependency]);
+    const isSelectedPredecessor = selectedChip != null && selectedChip.predecessorId === task.id;
+    const handleDeleteSelected = useCallback4((e) => {
+      e.stopPropagation();
+      if (!selectedChip) return;
+      onRemoveDependency?.(selectedChip.successorId, selectedChip.predecessorId, selectedChip.linkType);
+      onChipSelect?.(null);
+    }, [selectedChip, onRemoveDependency, onChipSelect]);
     const startDateISO = toISODate(task.startDate);
     const endDateISO = toISODate(task.endDate);
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
-        className: `gantt-tl-row ${isSelected ? "gantt-tl-row-selected" : ""}`,
+        className: [
+          "gantt-tl-row",
+          isSelected ? "gantt-tl-row-selected" : "",
+          isPicking && !isSourceRow ? "gantt-tl-row-picking" : "",
+          isSourceRow ? "gantt-tl-row-picking-self" : ""
+        ].filter(Boolean).join(" "),
         style: { minHeight: `${rowHeight}px` },
         onClick: handleRowClickInternal,
         children: [
-          /* @__PURE__ */ jsx11("div", { className: "gantt-tl-cell gantt-tl-cell-number", children: rowIndex + 1 }),
-          /* @__PURE__ */ jsxs8("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
-            editingName && /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              className: "gantt-tl-cell gantt-tl-cell-number",
+              onClick: handleNumberClick,
+              title: "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0440\u0430\u0431\u043E\u0442\u0435",
+              children: [
+                /* @__PURE__ */ jsx12("span", { className: "gantt-tl-num-label", children: rowIndex + 1 }),
+                /* @__PURE__ */ jsxs9("svg", { className: "gantt-tl-num-icon", 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__ */ jsx12("path", { d: "M17 12H3" }),
+                  /* @__PURE__ */ jsx12("path", { d: "m11 18 6-6-6-6" }),
+                  /* @__PURE__ */ jsx12("path", { d: "M21 5v14" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
+            editingName && /* @__PURE__ */ jsx12(
               Input,
               {
                 ref: nameInputRef,
@@ -1943,7 +2169,7 @@ var TaskListRow = React9.memo(
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1954,7 +2180,7 @@ var TaskListRow = React9.memo(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11("div", { className: "gantt-tl-cell gantt-tl-cell-date", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-cell gantt-tl-cell-date", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx12(
             DatePicker,
             {
               value: startDateISO,
@@ -1964,7 +2190,7 @@ var TaskListRow = React9.memo(
               disabled: task.locked
             }
           ) }),
-          /* @__PURE__ */ jsx11("div", { className: "gantt-tl-cell gantt-tl-cell-date", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-cell gantt-tl-cell-date", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx12(
             DatePicker,
             {
               value: endDateISO,
@@ -1973,7 +2199,97 @@ var TaskListRow = React9.memo(
               portal: true,
               disabled: task.locked
             }
-          ) })
+          ) }),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: "gantt-tl-cell gantt-tl-cell-deps",
+              onClick: isPicking && !isSourceRow ? handlePredecessorPick : void 0,
+              children: isSourceRow ? /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-source-hint", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0443" }) : isSelectedPredecessor && !disableDependencyEditing ? (
+                /* Full-replacement: "Зависит от [name]" → hover → "Удалить" */
+                /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-dep-delete-label",
+                    onClick: handleDeleteSelected,
+                    "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0432\u044F\u0437\u044C",
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-delete-label-default", children: "\u0421\u0432\u044F\u0437\u0430\u043D\u043E \u0441" }),
+                      /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-delete-label-hover", children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0432\u044F\u0437\u044C" })
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                chips.length >= 2 ? (
+                  /* 2+ deps — show only "N связей" summary chip that opens a popover */
+                  /* @__PURE__ */ jsxs9(Popover, { open: overflowOpen, onOpenChange: setOverflowOpen, children: [
+                    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+                      "button",
+                      {
+                        type: "button",
+                        className: "gantt-tl-dep-summary-chip",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setOverflowOpen((v) => !v);
+                        },
+                        children: [
+                          chips.length,
+                          " ",
+                          linkWord
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx12(PopoverContent, { portal: true, align: "start", children: /* @__PURE__ */ jsx12("div", { className: "gantt-tl-dep-overflow-list", onClick: (e) => e.stopPropagation(), children: chips.map(({ dep, lag, predecessorName }) => /* @__PURE__ */ jsx12(
+                      DepChip,
+                      {
+                        lag,
+                        dep,
+                        taskId: task.id,
+                        predecessorName,
+                        selectedChip,
+                        disableDependencyEditing,
+                        onChipSelect,
+                        onRowClick,
+                        onScrollToTask,
+                        onRemoveDependency,
+                        onChipSelectClear: () => onChipSelect?.(null)
+                      },
+                      `${dep.taskId}-${dep.type}`
+                    )) }) })
+                  ] })
+                ) : chips.length === 1 ? (
+                  /* Single chip — unified DepChip */
+                  /* @__PURE__ */ jsx12(
+                    DepChip,
+                    {
+                      lag: chips[0].lag,
+                      dep: chips[0].dep,
+                      taskId: task.id,
+                      predecessorName: chips[0].predecessorName,
+                      selectedChip,
+                      disableDependencyEditing,
+                      onChipSelect,
+                      onRowClick,
+                      onScrollToTask,
+                      onRemoveDependency,
+                      onChipSelectClear: () => onChipSelect?.(null)
+                    }
+                  )
+                ) : null,
+                !disableDependencyEditing && !isPicking && /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gantt-tl-dep-add",
+                    onClick: handleAddClick,
+                    "aria-label": "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0432\u044F\u0437\u044C",
+                    children: "+"
+                  }
+                )
+              ] })
+            }
+          )
         ]
       }
     );
@@ -1982,7 +2298,8 @@ var TaskListRow = React9.memo(
 TaskListRow.displayName = "TaskListRow";
 
 // src/components/TaskList/TaskList.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var LINK_TYPE_ORDER = ["FS", "SS", "FF", "SF"];
 var TaskList = ({
   tasks,
   rowHeight,
@@ -1992,28 +2309,156 @@ var TaskList = ({
   selectedTaskId,
   onTaskSelect,
   show = true,
-  disableTaskNameEditing = false
+  disableTaskNameEditing = false,
+  disableDependencyEditing = false,
+  onScrollToTask,
+  onSelectedChipChange
 }) => {
-  const totalHeight = useMemo7(
+  const totalHeight = useMemo8(
     () => tasks.length * rowHeight,
     [tasks.length, rowHeight]
   );
   const handleRowClick = useCallback5((taskId) => {
     onTaskSelect?.(taskId);
   }, [onTaskSelect]);
-  return /* @__PURE__ */ jsx12(
+  const [activeLinkType, setActiveLinkType] = useState5("FS");
+  const [selectingPredecessorFor, setSelectingPredecessorFor] = useState5(null);
+  const [typeMenuOpen, setTypeMenuOpen] = useState5(false);
+  const [cycleError, setCycleError] = useState5(false);
+  const overlayRef = useRef4(null);
+  const [selectedChip, setSelectedChip] = useState5(null);
+  const handleChipSelect = useCallback5((chip) => {
+    setSelectedChip(chip);
+    onSelectedChipChange?.(chip);
+  }, [onSelectedChipChange]);
+  useEffect4(() => {
+    if (!selectingPredecessorFor && !selectedChip) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setSelectingPredecessorFor(null);
+        setSelectedChip(null);
+        onSelectedChipChange?.(null);
+      }
+    };
+    const handleMouseDown = (e) => {
+      const target = e.target;
+      if (overlayRef.current?.contains(target)) return;
+      if (target.closest?.(".gantt-popover")) return;
+      setSelectingPredecessorFor(null);
+      setSelectedChip(null);
+      onSelectedChipChange?.(null);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleMouseDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleMouseDown, true);
+    };
+  }, [selectingPredecessorFor, selectedChip, onSelectedChipChange]);
+  const handleAddDependency = useCallback5((successorTaskId, predecessorTaskId, linkType) => {
+    if (successorTaskId === predecessorTaskId) return;
+    const successor = tasks.find((t) => t.id === successorTaskId);
+    if (!successor) return;
+    const alreadyExists = (successor.dependencies ?? []).some(
+      (d) => d.taskId === predecessorTaskId && d.type === linkType
+    );
+    if (alreadyExists) {
+      setSelectingPredecessorFor(null);
+      return;
+    }
+    const newDep = { taskId: predecessorTaskId, type: linkType, lag: 0 };
+    const hypothetical = tasks.map(
+      (t) => t.id === successorTaskId ? { ...t, dependencies: [...t.dependencies ?? [], newDep] } : t
+    );
+    const validation = validateDependencies(hypothetical);
+    if (!validation.isValid) {
+      setCycleError(true);
+      setTimeout(() => setCycleError(false), 3e3);
+      return;
+    }
+    const updatedTask = hypothetical.find((t) => t.id === successorTaskId);
+    const predecessor = tasks.find((t) => t.id === predecessorTaskId);
+    if (predecessor) {
+      const predStart = new Date(predecessor.startDate);
+      const predEnd = new Date(predecessor.endDate);
+      const constraintDate = calculateSuccessorDate(predStart, predEnd, linkType, 0);
+      const origSuccessor = tasks.find((t) => t.id === successorTaskId);
+      const durationMs = new Date(origSuccessor.endDate).getTime() - new Date(origSuccessor.startDate).getTime();
+      let newStart;
+      let newEnd;
+      if (linkType === "FS" || linkType === "SS") {
+        newStart = constraintDate;
+        newEnd = new Date(constraintDate.getTime() + durationMs);
+      } else {
+        newEnd = constraintDate;
+        newStart = new Date(constraintDate.getTime() - durationMs);
+      }
+      const snappedTask = {
+        ...updatedTask,
+        startDate: newStart.toISOString().split("T")[0],
+        endDate: newEnd.toISOString().split("T")[0]
+      };
+      onTaskChange?.(snappedTask);
+    } else {
+      onTaskChange?.(updatedTask);
+    }
+    setSelectingPredecessorFor(null);
+  }, [tasks, onTaskChange]);
+  const handleRemoveDependency = useCallback5((taskId, predecessorTaskId, linkType) => {
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task) return;
+    const updatedDeps = (task.dependencies ?? []).filter(
+      (d) => !(d.taskId === predecessorTaskId && d.type === linkType)
+    );
+    onTaskChange?.({ ...task, dependencies: updatedDeps });
+  }, [tasks, onTaskChange]);
+  return /* @__PURE__ */ jsx13(
     "div",
     {
+      ref: overlayRef,
       className: `gantt-tl-overlay${show ? "" : " gantt-tl-hidden"}`,
       style: { width: `${taskListWidth}px` },
-      children: /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-table", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-header", style: { height: `${headerHeight + 0.5}px` }, children: [
-          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-headerCell gantt-tl-cell-number", children: "\u2116" }),
-          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-headerCell gantt-tl-cell-name", children: "\u0418\u043C\u044F" }),
-          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041D\u0430\u0447\u0430\u043B\u043E" }),
-          /* @__PURE__ */ jsx12("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435" })
+      children: /* @__PURE__ */ jsxs10("div", { className: "gantt-tl-table", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "gantt-tl-header", style: { height: `${headerHeight + 0.5}px` }, children: [
+          /* @__PURE__ */ jsx13("div", { className: "gantt-tl-headerCell gantt-tl-cell-number", children: "\u2116" }),
+          /* @__PURE__ */ jsx13("div", { className: "gantt-tl-headerCell gantt-tl-cell-name", children: "\u0418\u043C\u044F" }),
+          /* @__PURE__ */ jsx13("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041D\u0430\u0447\u0430\u043B\u043E" }),
+          /* @__PURE__ */ jsx13("div", { className: "gantt-tl-headerCell gantt-tl-cell-date", children: "\u041E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u0435" }),
+          /* @__PURE__ */ jsxs10("div", { className: "gantt-tl-headerCell gantt-tl-cell-deps", style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxs10(Popover, { open: typeMenuOpen, onOpenChange: setTypeMenuOpen, children: [
+              /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+                "button",
+                {
+                  className: "gantt-tl-dep-type-trigger",
+                  disabled: disableDependencyEditing,
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    "\u0421\u0432\u044F\u0437\u0438 ",
+                    React10.createElement(LINK_TYPE_ICONS[activeLinkType]),
+                    " \u25BE"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx13(PopoverContent, { portal: true, align: "start", children: /* @__PURE__ */ jsx13("div", { className: "gantt-tl-dep-type-menu", children: LINK_TYPE_ORDER.map((lt) => /* @__PURE__ */ jsxs10(
+                "button",
+                {
+                  className: `gantt-tl-dep-type-option${activeLinkType === lt ? " active" : ""}`,
+                  onClick: () => {
+                    setActiveLinkType(lt);
+                    setTypeMenuOpen(false);
+                  },
+                  children: [
+                    React10.createElement(LINK_TYPE_ICONS[lt]),
+                    /* @__PURE__ */ jsx13("span", { children: LINK_TYPE_LABELS[lt] })
+                  ]
+                },
+                lt
+              )) }) })
+            ] }),
+            cycleError && /* @__PURE__ */ jsx13("div", { className: "gantt-tl-dep-error", children: "\u0426\u0438\u043A\u043B \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u0435\u0439!" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "gantt-tl-body", style: { height: `${totalHeight}px` }, children: tasks.map((task, index) => /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13("div", { className: "gantt-tl-body", style: { height: `${totalHeight}px` }, children: tasks.map((task, index) => /* @__PURE__ */ jsx13(
           TaskListRow,
           {
             task,
@@ -2022,7 +2467,17 @@ var TaskList = ({
             onTaskChange,
             selectedTaskId,
             onRowClick: handleRowClick,
-            disableTaskNameEditing
+            disableTaskNameEditing,
+            disableDependencyEditing,
+            allTasks: tasks,
+            activeLinkType,
+            selectingPredecessorFor,
+            onSetSelectingPredecessorFor: setSelectingPredecessorFor,
+            onAddDependency: handleAddDependency,
+            onRemoveDependency: handleRemoveDependency,
+            selectedChip,
+            onChipSelect: handleChipSelect,
+            onScrollToTask
           },
           task.id
         )) })
@@ -2032,7 +2487,7 @@ var TaskList = ({
 };
 
 // src/components/GanttChart/GanttChart.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var GanttChart = forwardRef(({
   tasks,
   dayWidth = 40,
@@ -2046,34 +2501,37 @@ var GanttChart = forwardRef(({
   onCascade,
   showTaskList = false,
   taskListWidth = 520,
-  disableTaskNameEditing = false
+  disableTaskNameEditing = false,
+  disableDependencyEditing = false,
+  highlightExpiredTasks = false
 }, ref) => {
-  const scrollContainerRef = useRef4(null);
-  const [selectedTaskId, setSelectedTaskId] = useState5(null);
-  const dateRange = useMemo8(() => getMultiMonthDays(tasks), [tasks]);
-  const [validationResult, setValidationResult] = useState5(null);
-  const [cascadeOverrides, setCascadeOverrides] = useState5(/* @__PURE__ */ new Map());
-  const gridWidth = useMemo8(
+  const scrollContainerRef = useRef5(null);
+  const [selectedTaskId, setSelectedTaskId] = useState6(null);
+  const [selectedChip, setSelectedChip] = useState6(null);
+  const dateRange = useMemo9(() => getMultiMonthDays(tasks), [tasks]);
+  const [validationResult, setValidationResult] = useState6(null);
+  const [cascadeOverrides, setCascadeOverrides] = useState6(/* @__PURE__ */ new Map());
+  const gridWidth = useMemo9(
     () => Math.round(dateRange.length * dayWidth),
     [dateRange.length, dayWidth]
   );
-  const totalGridHeight = useMemo8(
+  const totalGridHeight = useMemo9(
     () => tasks.length * rowHeight,
     [tasks.length, rowHeight]
   );
-  const monthStart = useMemo8(() => {
+  const monthStart = useMemo9(() => {
     if (dateRange.length === 0) {
       return new Date(Date.UTC((/* @__PURE__ */ new Date()).getUTCFullYear(), (/* @__PURE__ */ new Date()).getUTCMonth(), 1));
     }
     const firstDay = dateRange[0];
     return new Date(Date.UTC(firstDay.getUTCFullYear(), firstDay.getUTCMonth(), 1));
   }, [dateRange]);
-  const todayInRange = useMemo8(() => {
+  const todayInRange = useMemo9(() => {
     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());
   }, [dateRange]);
-  useEffect4(() => {
+  useEffect5(() => {
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
     const now = /* @__PURE__ */ new Date();
@@ -2097,16 +2555,34 @@ var GanttChart = forwardRef(({
     const scrollLeft = Math.round(todayOffset - containerWidth / 2 + dayWidth / 2);
     container.scrollLeft = Math.max(0, scrollLeft);
   }, [dateRange, dayWidth]);
+  const scrollToTask = useCallback6((taskId) => {
+    const container = scrollContainerRef.current;
+    if (!container || dateRange.length === 0) return;
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task) return;
+    const taskStart = new Date(task.startDate);
+    const taskStartUTC = new Date(Date.UTC(
+      taskStart.getUTCFullYear(),
+      taskStart.getUTCMonth(),
+      taskStart.getUTCDate()
+    ));
+    const taskIndex = dateRange.findIndex((day) => day.getTime() === taskStartUTC.getTime());
+    if (taskIndex === -1) return;
+    const taskOffset = taskIndex * dayWidth;
+    const scrollLeft = Math.round(taskOffset - dayWidth * 2);
+    container.scrollLeft = Math.max(0, scrollLeft);
+  }, [tasks, dateRange, dayWidth]);
   useImperativeHandle(
     ref,
     () => ({
-      scrollToToday
+      scrollToToday,
+      scrollToTask
     }),
-    [scrollToToday]
+    [scrollToToday, scrollToTask]
   );
-  const [dragGuideLines, setDragGuideLines] = useState5(null);
-  const [draggedTaskOverride, setDraggedTaskOverride] = useState5(null);
-  useEffect4(() => {
+  const [dragGuideLines, setDragGuideLines] = useState6(null);
+  const [draggedTaskOverride, setDraggedTaskOverride] = useState6(null);
+  useEffect5(() => {
     const result = validateDependencies(tasks);
     setValidationResult(result);
     onValidateDependencies?.(result);
@@ -2135,7 +2611,7 @@ var GanttChart = forwardRef(({
     });
     onCascade?.(allCascaded);
   }, [tasks, onChange, disableConstraints, onCascade]);
-  const dependencyOverrides = useMemo8(() => {
+  const dependencyOverrides = useMemo9(() => {
     const map = new Map(cascadeOverrides);
     if (draggedTaskOverride) {
       map.set(draggedTaskOverride.taskId, {
@@ -2158,7 +2634,7 @@ var GanttChart = forwardRef(({
   const handleTaskSelect = useCallback6((taskId) => {
     setSelectedTaskId(taskId);
   }, []);
-  const panStateRef = useRef4(null);
+  const panStateRef = useRef5(null);
   const handlePanStart = useCallback6((e) => {
     if (e.button !== 0) return;
     const target = e.target;
@@ -2180,7 +2656,7 @@ var GanttChart = forwardRef(({
     container.style.cursor = "grabbing";
     e.preventDefault();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const handlePanMove = (e) => {
       const pan = panStateRef.current;
       if (!pan?.active) return;
@@ -2202,15 +2678,15 @@ var GanttChart = forwardRef(({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, []);
-  return /* @__PURE__ */ jsx13("div", { className: "gantt-container", children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className: "gantt-container", children: /* @__PURE__ */ jsx14(
     "div",
     {
       ref: scrollContainerRef,
       className: "gantt-scrollContainer",
       style: { height: containerHeight ?? "auto", cursor: "grab" },
       onMouseDown: handlePanStart,
-      children: /* @__PURE__ */ jsxs10("div", { className: "gantt-scrollContent", children: [
-        /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsxs11("div", { className: "gantt-scrollContent", children: [
+        /* @__PURE__ */ jsx14(
           TaskList,
           {
             tasks,
@@ -2221,11 +2697,14 @@ var GanttChart = forwardRef(({
             selectedTaskId: selectedTaskId ?? void 0,
             onTaskSelect: handleTaskSelect,
             show: showTaskList,
-            disableTaskNameEditing
+            disableTaskNameEditing,
+            disableDependencyEditing,
+            onScrollToTask: scrollToTask,
+            onSelectedChipChange: setSelectedChip
           }
         ),
-        /* @__PURE__ */ jsxs10("div", { style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
-          /* @__PURE__ */ jsx13("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs11("div", { style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
+          /* @__PURE__ */ jsx14("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx14(
             TimeScaleHeader_default,
             {
               days: dateRange,
@@ -2233,7 +2712,7 @@ var GanttChart = forwardRef(({
               headerHeight
             }
           ) }),
-          /* @__PURE__ */ jsxs10(
+          /* @__PURE__ */ jsxs11(
             "div",
             {
               className: "gantt-taskArea",
@@ -2242,7 +2721,7 @@ var GanttChart = forwardRef(({
                 width: `${gridWidth}px`
               },
               children: [
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(
                   GridBackground_default,
                   {
                     dateRange,
@@ -2250,8 +2729,8 @@ var GanttChart = forwardRef(({
                     totalHeight: totalGridHeight
                   }
                 ),
-                todayInRange && /* @__PURE__ */ jsx13(TodayIndicator_default, { monthStart, dayWidth }),
-                /* @__PURE__ */ jsx13(
+                todayInRange && /* @__PURE__ */ jsx14(TodayIndicator_default, { monthStart, dayWidth }),
+                /* @__PURE__ */ jsx14(
                   DependencyLines_default,
                   {
                     tasks,
@@ -2259,10 +2738,11 @@ var GanttChart = forwardRef(({
                     dayWidth,
                     rowHeight,
                     gridWidth,
-                    dragOverrides: dependencyOverrides
+                    dragOverrides: dependencyOverrides,
+                    selectedDep: selectedChip
                   }
                 ),
-                dragGuideLines && /* @__PURE__ */ jsx13(
+                dragGuideLines && /* @__PURE__ */ jsx14(
                   DragGuideLines_default,
                   {
                     isDragging: dragGuideLines.isDragging,
@@ -2272,7 +2752,7 @@ var GanttChart = forwardRef(({
                     totalHeight: totalGridHeight
                   }
                 ),
-                tasks.map((task, index) => /* @__PURE__ */ jsx13(
+                tasks.map((task, index) => /* @__PURE__ */ jsx14(
                   TaskRow_default,
                   {
                     task,
@@ -2295,7 +2775,8 @@ var GanttChart = forwardRef(({
                     disableConstraints: disableConstraints ?? false,
                     overridePosition: cascadeOverrides.get(task.id),
                     onCascadeProgress: handleCascadeProgress,
-                    onCascade: handleCascade
+                    onCascade: handleCascade,
+                    highlightExpiredTasks
                   },
                   task.id
                 ))
@@ -2311,7 +2792,7 @@ GanttChart.displayName = "GanttChart";
 
 // src/components/ui/Button.tsx
 import React12 from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Button = React12.forwardRef(
   ({ className, variant = "default", size = "default", children, ...props }, ref) => {
     const classes = [
@@ -2320,7 +2801,7 @@ var Button = React12.forwardRef(
       size !== "default" ? `gantt-btn-${size}` : "",
       className || ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx14("button", { ref, className: classes, ...props, children });
+    return /* @__PURE__ */ jsx15("button", { ref, className: classes, ...props, children });
   }
 );
 Button.displayName = "Button";
@@ -2349,6 +2830,7 @@ export {
   calculateTaskBar,
   calculateWeekendBlocks,
   cascadeByLinks,
+  computeLagFromDates,
   detectCycles,
   detectEdgeZone,
   formatDateLabel,