gantt-lib 0.135.9 → 0.136.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
 "use client";
 
 // src/components/GanttChart/GanttChart.tsx
-import { useMemo as useMemo13, useCallback as useCallback10, useRef as useRef12, useState as useState12, useEffect as useEffect10, useImperativeHandle, forwardRef } from "react";
+import { useMemo as useMemo13, useCallback as useCallback10, useRef as useRef13, useState as useState13, useEffect as useEffect11, useImperativeHandle, forwardRef } from "react";
 
 // src/core/scheduling/dateMath.ts
 var DAY_MS = 24 * 60 * 60 * 1e3;
@@ -3155,7 +3155,8 @@ var TimeScaleHeader = ({
 var TimeScaleHeader_default = TimeScaleHeader;
 
 // src/components/TaskRow/TaskRow.tsx
-import React2, { useCallback as useCallback2, useMemo as useMemo2, useSyncExternalStore } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
 
 // src/utils/geometry.ts
 var getUTCDayDifference = (date1, date2) => {
@@ -4263,12 +4264,35 @@ var useTaskDrag = (options) => {
 
 // src/components/TaskRow/TaskRow.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var formatCompositePreviewDate = (date) => {
+  const month = new Intl.DateTimeFormat("ru-RU", { month: "short", timeZone: "UTC" }).format(date).replace(/\.$/, "");
+  const yearSuffix = date.getUTCFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "" : ` ${String(date.getUTCFullYear()).slice(-2)}`;
+  return `${date.getUTCDate()} ${month}${yearSuffix}`;
+};
 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.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && 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.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.deferCascadePreview === nextProps.deferCascadePreview && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode && prevProps.showTaskDateLabels === nextProps.showTaskDateLabels && prevProps.showTaskNames === nextProps.showTaskNames;
+  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.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && 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.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.deferCascadePreview === nextProps.deferCascadePreview && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.onCompositeToggle === nextProps.onCompositeToggle && prevProps.compactDetail === nextProps.compactDetail && prevProps.compositeParentColor === nextProps.compositeParentColor && prevProps.compositeExpanded === nextProps.compositeExpanded && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode && prevProps.showTaskDateLabels === nextProps.showTaskDateLabels && prevProps.showTaskNames === nextProps.showTaskNames;
 };
 var TaskRow = React2.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, deferCascadePreview = false, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day", showTaskDateLabels = true, showTaskNames = true }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, deferCascadePreview = false, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day", showTaskDateLabels = true, showTaskNames = true, onCompositeToggle, compactDetail = false, compositeParentColor, compositeExpanded = false }) => {
     const defaultParentBarColor = "#782FC4";
+    const [showCompositePreview, setShowCompositePreview] = useState2(false);
+    const [compositePreviewPosition, setCompositePreviewPosition] = useState2(null);
+    const pointerStart = useRef2(null);
+    const suppressCompositeClick = useRef2(false);
+    const compositeChildren = useMemo2(
+      () => task.composite ? (allTasks ?? []).filter((child) => child.parentId === task.id) : [],
+      [allTasks, task.composite, task.id]
+    );
+    useEffect2(() => {
+      if (!showCompositePreview) return;
+      const hide = () => setShowCompositePreview(false);
+      window.addEventListener("scroll", hide, true);
+      window.addEventListener("resize", hide);
+      return () => {
+        window.removeEventListener("scroll", hide, true);
+        window.removeEventListener("resize", hide);
+      };
+    }, [showCompositePreview]);
     const { divider: taskDivider } = task;
     const normalizedTask = useMemo2(() => normalizeTaskDatesForType(task), [task]);
     const milestone = useMemo2(() => isMilestoneTask(normalizedTask), [normalizedTask]);
@@ -4285,6 +4309,7 @@ var TaskRow = React2.memo(
     const isParent = useMemo2(() => {
       return allTasks ? isTaskParent(task.id, allTasks) : false;
     }, [allTasks, task.id]);
+    const isVisualParent = isParent && !task.composite;
     const childCount = useMemo2(() => {
       return allTasks ? getChildren(task.id, allTasks).length : 0;
     }, [allTasks, task.id]);
@@ -4330,19 +4355,19 @@ var TaskRow = React2.memo(
       if (isExpired) {
         return "color-mix(in srgb, var(--gantt-expired-color) 40%, black)";
       }
-      const baseColor = isParent ? task.color || defaultParentBarColor : task.color || "var(--gantt-task-bar-default-color)";
+      const baseColor = isVisualParent ? task.color || defaultParentBarColor : task.color || "var(--gantt-task-bar-default-color)";
       return `color-mix(in srgb, ${baseColor} 40%, black)`;
-    }, [defaultParentBarColor, isCritical, isExpired, isParent, task.color]);
+    }, [defaultParentBarColor, isCritical, isExpired, isVisualParent, task.color]);
     const barStyle = useMemo2(() => {
       const parentBarColor = task.color || defaultParentBarColor;
       if (isCritical && !isExpired) {
         const c = criticalBarColor;
-        if (isParent) {
+        if (isVisualParent) {
           return { backgroundColor: c, "--gantt-parent-bar-color": c };
         }
         return { backgroundColor: c };
       }
-      if (isParent) {
+      if (isVisualParent) {
         if (progressWidth >= 100) {
           const c = isExpired ? "color-mix(in srgb, var(--gantt-expired-color) 40%, black)" : `color-mix(in srgb, ${parentBarColor} 40%, black)`;
           return { backgroundColor: c, "--gantt-parent-bar-color": c };
@@ -4353,7 +4378,7 @@ var TaskRow = React2.memo(
         return { backgroundColor: progressColor };
       }
       return { backgroundColor: barColor };
-    }, [isCritical, defaultParentBarColor, isExpired, isParent, progressWidth, barColor, progressColor, task.color]);
+    }, [isCritical, defaultParentBarColor, isExpired, isVisualParent, progressWidth, barColor, progressColor, task.color]);
     const handleDragEnd = (result) => {
       const updatedTask = {
         ...normalizedTask,
@@ -4427,6 +4452,25 @@ var TaskRow = React2.memo(
     }, [displayLeft, dayWidth, milestoneGeometry.size]);
     const visualLeft = milestone ? displayMilestoneGeometry.left : displayLeft;
     const visualWidth = milestone ? displayMilestoneGeometry.size : displayWidth;
+    const compositeSegments = useMemo2(() => {
+      if (!task.composite || width <= 0) return [];
+      const laneEnds = [];
+      return compositeChildren.map((child) => {
+        const segment = calculateTaskBar(parseUTCDate(child.startDate), parseUTCDate(child.endDate), monthStart, dayWidth);
+        let lane = laneEnds.findIndex((end) => end <= segment.left);
+        if (lane < 0) lane = laneEnds.length;
+        laneEnds[lane] = segment.left + segment.width;
+        return {
+          id: child.id,
+          name: child.name,
+          left: (segment.left - left) / width * 100,
+          width: segment.width / width * 100,
+          lane
+        };
+      });
+    }, [task.composite, compositeChildren, monthStart, dayWidth, left, width, displayLeft]);
+    const compositeLaneCount = Math.max(1, ...compositeSegments.map((segment) => segment.lane + 1));
+    const showCompositeSegments = task.composite && compositeSegments.length > 0 && visualWidth / compositeSegments.length >= 22;
     const shouldRenderBaseline = showBaseline && baselineGeometry !== null;
     const hasPreviewPosition = isDragging || effectiveOverridePosition !== void 0;
     const currentStartDate = hasPreviewPosition ? pixelsToDate(displayLeft, monthStart, dayWidth) : taskStartDate;
@@ -4444,17 +4488,20 @@ var TaskRow = React2.memo(
       if (lastDigit >= 2 && lastDigit <= 4) return `${count} \u0440\u0430\u0431\u043E\u0442\u044B`;
       return `${count} \u0440\u0430\u0431\u043E\u0442`;
     };
-    const estimatedTextWidth = isParent ? 120 : durationDays >= 10 ? 76 : 62;
-    const showProgressInside = !milestone && progressWidth > 0 && displayWidth > estimatedTextWidth;
-    const MIN_DURATION_WIDTH = isParent ? 80 : 50;
-    const showDurationInside = !milestone && durationDays >= 2 && displayWidth > MIN_DURATION_WIDTH;
+    const estimatedTextWidth = isVisualParent ? 120 : durationDays >= 10 ? 76 : 62;
+    const showProgressInside = !milestone && progressWidth > 0 && displayWidth > (compactDetail ? 28 : estimatedTextWidth);
+    const MIN_DURATION_WIDTH = isVisualParent ? 80 : task.composite ? 92 : 50;
+    const showDurationInside = !compactDetail && !milestone && durationDays >= 2 && displayWidth > MIN_DURATION_WIDTH;
     return /* @__PURE__ */ jsxs2(
       "div",
       {
         "data-filter-match": isFilterMatch ? "true" : "false",
         "data-gantt-task-row-id": task.id,
-        className: `gantt-tr-row ${isFilterMatch ? "gantt-tr-row-filter-match" : ""}`,
-        style: { height: `${rowHeight}px` },
+        className: `gantt-tr-row ${compactDetail ? "gantt-tr-row-compositeDetail" : ""} ${isFilterMatch ? "gantt-tr-row-filter-match" : ""}`,
+        style: {
+          height: `${rowHeight}px`,
+          "--gantt-tr-composite-detail-color": compositeParentColor ?? "var(--gantt-task-bar-default-color, #8b5cf6)"
+        },
         children: [
           taskDivider === "top" && /* @__PURE__ */ jsx2("div", { className: "gantt-tr-divider gantt-tr-divider-top" }),
           /* @__PURE__ */ jsxs2("div", { className: "gantt-tr-taskContainer", children: [
@@ -4472,7 +4519,11 @@ var TaskRow = React2.memo(
               "div",
               {
                 "data-taskbar": true,
-                className: `gantt-tr-taskBar ${isDragging ? "gantt-tr-dragging" : ""} ${task.locked ? "gantt-tr-locked" : ""} ${task.synced === false ? "gantt-tr-unsynced" : ""} ${isParent ? "gantt-tr-parentBar" : ""} ${milestone ? "gantt-tr-milestone" : ""} ${isCritical ? "gantt-tr-critical" : ""}`,
+                role: task.composite ? "button" : void 0,
+                tabIndex: task.composite ? 0 : void 0,
+                "aria-label": task.composite ? `${task.name}: ${compositeExpanded ? "\u0441\u0432\u0435\u0440\u043D\u0443\u0442\u044C" : "\u0440\u0430\u0441\u043A\u0440\u044B\u0442\u044C"} \u0434\u0435\u0442\u0430\u043B\u0438` : void 0,
+                "aria-expanded": task.composite ? compositeExpanded : void 0,
+                className: `gantt-tr-taskBar ${isDragging ? "gantt-tr-dragging" : ""} ${task.locked ? "gantt-tr-locked" : ""} ${task.synced === false ? "gantt-tr-unsynced" : ""} ${isVisualParent ? "gantt-tr-parentBar" : ""} ${task.composite ? "gantt-tr-compositeBar" : ""} ${milestone ? "gantt-tr-milestone" : ""} ${isCritical ? "gantt-tr-critical" : ""}`,
                 style: {
                   left: `${visualLeft}px`,
                   ...barStyle,
@@ -4482,14 +4533,57 @@ var TaskRow = React2.memo(
                     padding: 0
                   } : {
                     width: `${visualWidth}px`,
-                    height: isParent ? "var(--gantt-parent-bar-height, 14px)" : "var(--gantt-task-bar-height)"
+                    height: compactDetail ? "18px" : isVisualParent ? "var(--gantt-parent-bar-height, 14px)" : "var(--gantt-task-bar-height)"
                   },
                   cursor: dragHandleProps.style.cursor,
                   userSelect: dragHandleProps.style.userSelect
                 },
                 onMouseDown: dragHandleProps.onMouseDown,
                 onMouseMove: dragHandleProps.onMouseMove,
-                onMouseLeave: dragHandleProps.onMouseLeave,
+                onMouseLeave: () => {
+                  dragHandleProps.onMouseLeave();
+                  setShowCompositePreview(false);
+                },
+                onMouseEnter: task.composite ? (event) => {
+                  const rect = event.currentTarget.getBoundingClientRect();
+                  const previewWidth = 220;
+                  const previewHeight = Math.min(340, 68 + Math.min(compositeChildren.length, 12) * 20);
+                  setCompositePreviewPosition({
+                    left: Math.max(8, Math.min(rect.left, window.innerWidth - previewWidth - 8)),
+                    top: rect.bottom + previewHeight + 8 < window.innerHeight ? rect.bottom + 6 : Math.max(8, rect.top - previewHeight - 6)
+                  });
+                  setShowCompositePreview(true);
+                } : void 0,
+                onMouseDownCapture: task.composite ? (event) => {
+                  suppressCompositeClick.current = Boolean(event.target.closest(".gantt-tr-resizeHandle"));
+                  pointerStart.current = { x: event.clientX, y: event.clientY };
+                } : void 0,
+                onMouseMoveCapture: task.composite ? (event) => {
+                  const start = pointerStart.current;
+                  if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) >= 4) {
+                    suppressCompositeClick.current = true;
+                  }
+                } : void 0,
+                onMouseUpCapture: task.composite ? (event) => {
+                  const start = pointerStart.current;
+                  if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) >= 4) {
+                    suppressCompositeClick.current = true;
+                  }
+                  pointerStart.current = null;
+                } : void 0,
+                onClick: task.composite ? () => {
+                  if (!isDragging && !suppressCompositeClick.current) {
+                    setShowCompositePreview(false);
+                    onCompositeToggle?.("click");
+                  }
+                  suppressCompositeClick.current = false;
+                } : void 0,
+                onKeyDown: task.composite ? (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    onCompositeToggle?.("keyboard");
+                  }
+                } : void 0,
                 children: [
                   !milestone && progressWidth > 0 && progressWidth < 100 && /* @__PURE__ */ jsx2(
                     "div",
@@ -4498,14 +4592,28 @@ var TaskRow = React2.memo(
                       style: {
                         width: `${progressWidth}%`,
                         backgroundColor: progressColor,
-                        ...isParent && {
+                        ...isVisualParent && {
                           borderRadius: "var(--gantt-parent-bar-radius, 8px) 0 0 0"
                         }
                       }
                     }
                   ),
                   !milestone && /* @__PURE__ */ jsx2("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleLeft" }),
-                  showDurationInside && /* @__PURE__ */ jsx2("span", { className: "gantt-tr-taskDuration", children: isParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
+                  showCompositeSegments && /* @__PURE__ */ jsx2("span", { className: "gantt-tr-compositeSegments", "aria-hidden": "true", children: compositeSegments.map((segment) => /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: "gantt-tr-compositeSegment",
+                      style: {
+                        left: `${segment.left}%`,
+                        width: `${segment.width}%`,
+                        top: `${segment.lane / compositeLaneCount * 100}%`,
+                        height: `${100 / compositeLaneCount}%`
+                      }
+                    },
+                    segment.id
+                  )) }),
+                  task.composite && /* @__PURE__ */ jsx2("span", { className: "gantt-tr-compositeHoverChevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { className: `gantt-tr-compositeChevron${compositeExpanded ? " gantt-tr-compositeChevron-open" : ""}`, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx2("path", { d: "m7 4 6 6-6 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+                  showDurationInside && /* @__PURE__ */ jsx2("span", { className: "gantt-tr-taskDuration", children: isVisualParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
                   progressWidth > 0 && showProgressInside && /* @__PURE__ */ jsxs2("span", { className: "gantt-tr-progressText", children: [
                     progressWidth,
                     "%"
@@ -4514,6 +4622,41 @@ var TaskRow = React2.memo(
                 ]
               }
             ),
+            task.composite && showCompositePreview && compositePreviewPosition && compositeChildren.length > 0 && !isDragging && typeof document !== "undefined" && createPortal(
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: "gantt-tr-compositePreview",
+                  style: { left: `${compositePreviewPosition.left}px`, top: `${compositePreviewPosition.top}px` },
+                  role: "tooltip",
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", { className: "gantt-tr-compositePreviewAxis", children: [
+                      /* @__PURE__ */ jsx2("span", { children: formatCompositePreviewDate(currentStartDate) }),
+                      /* @__PURE__ */ jsx2("span", { children: formatCompositePreviewDate(currentEndDate) })
+                    ] }),
+                    compositeChildren.slice(0, 12).map((child) => /* @__PURE__ */ jsxs2("div", { className: "gantt-tr-compositePreviewRow", children: [
+                      /* @__PURE__ */ jsx2("span", { children: child.name }),
+                      /* @__PURE__ */ jsx2("span", { className: "gantt-tr-compositePreviewTrack", children: /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          className: "gantt-tr-compositePreviewBar",
+                          style: {
+                            left: `${Math.max(0, (parseUTCDate(child.startDate).getTime() - taskStartDate.getTime()) / (taskEndDate.getTime() - taskStartDate.getTime() + 864e5) * 100)}%`,
+                            width: `${Math.max(2, (parseUTCDate(child.endDate).getTime() - parseUTCDate(child.startDate).getTime() + 864e5) / (taskEndDate.getTime() - taskStartDate.getTime() + 864e5) * 100)}%`,
+                            backgroundColor: barColor
+                          }
+                        }
+                      ) })
+                    ] }, child.id)),
+                    compositeChildren.length > 12 && /* @__PURE__ */ jsxs2("div", { children: [
+                      "+",
+                      compositeChildren.length - 12
+                    ] })
+                  ]
+                }
+              ),
+              document.body
+            ),
             !disableDependencyEditing && onDependencyPortPointerDown && /* @__PURE__ */ jsxs2(Fragment, { children: [
               /* @__PURE__ */ jsx2(
                 "button",
@@ -4522,7 +4665,7 @@ var TaskRow = React2.memo(
                   "data-gantt-dependency-port": true,
                   "data-task-id": task.id,
                   "data-port-side": "left",
-                  className: `gantt-tr-dependencyPort gantt-tr-dependencyPortLeft ${milestone ? "gantt-tr-dependencyPortMilestone" : ""} ${isParent ? "gantt-tr-dependencyPortParent" : ""} ${isDependencyDragActive ? "gantt-tr-dependencyPortDragActive" : ""}`,
+                  className: `gantt-tr-dependencyPort gantt-tr-dependencyPortLeft ${milestone ? "gantt-tr-dependencyPortMilestone" : ""} ${isVisualParent ? "gantt-tr-dependencyPortParent" : ""} ${isDependencyDragActive ? "gantt-tr-dependencyPortDragActive" : ""}`,
                   style: { left: `${visualLeft - 24}px` },
                   "aria-label": `\u041D\u0430\u0447\u0430\u0442\u044C \u0441\u0432\u044F\u0437\u044C \u043E\u0442 \u043B\u0435\u0432\u043E\u0433\u043E \u043A\u0440\u0430\u044F: ${task.name}`,
                   title: "\u041F\u043E\u0442\u044F\u043D\u0438\u0442\u0435 \u043A \u043A\u0440\u0430\u044E \u0434\u0440\u0443\u0433\u043E\u0439 \u043F\u043E\u043B\u043E\u0441\u044B, \u0447\u0442\u043E\u0431\u044B \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0441\u0432\u044F\u0437\u044C",
@@ -4536,7 +4679,7 @@ var TaskRow = React2.memo(
                   "data-gantt-dependency-port": true,
                   "data-task-id": task.id,
                   "data-port-side": "right",
-                  className: `gantt-tr-dependencyPort gantt-tr-dependencyPortRight ${milestone ? "gantt-tr-dependencyPortMilestone" : ""} ${isParent ? "gantt-tr-dependencyPortParent" : ""} ${isDependencyDragActive ? "gantt-tr-dependencyPortDragActive" : ""}`,
+                  className: `gantt-tr-dependencyPort gantt-tr-dependencyPortRight ${milestone ? "gantt-tr-dependencyPortMilestone" : ""} ${isVisualParent ? "gantt-tr-dependencyPortParent" : ""} ${isDependencyDragActive ? "gantt-tr-dependencyPortDragActive" : ""}`,
                   style: { left: `${visualLeft + visualWidth}px` },
                   "aria-label": `\u041D\u0430\u0447\u0430\u0442\u044C \u0441\u0432\u044F\u0437\u044C \u043E\u0442 \u043F\u0440\u0430\u0432\u043E\u0433\u043E \u043A\u0440\u0430\u044F: ${task.name}`,
                   title: "\u041F\u043E\u0442\u044F\u043D\u0438\u0442\u0435 \u043A \u043A\u0440\u0430\u044E \u0434\u0440\u0443\u0433\u043E\u0439 \u043F\u043E\u043B\u043E\u0441\u044B, \u0447\u0442\u043E\u0431\u044B \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0441\u0432\u044F\u0437\u044C",
@@ -4575,6 +4718,14 @@ var TaskRow = React2.memo(
                 children: /* @__PURE__ */ jsx2("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" })
               }
             ),
+            !showDurationInside && !milestone && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: `gantt-tr-externalDuration gantt-tr-durationBeforeBar${compactDetail ? " gantt-tr-compositeDuration" : ""}`,
+                style: { left: `${visualLeft - 46}px`, color: isParent ? task.color || defaultParentBarColor : barColor },
+                children: isVisualParent ? getChildCountLabel(childCount) : `${durationDays} \u0434`
+              }
+            ),
             /* @__PURE__ */ jsxs2(
               "div",
               {
@@ -4584,7 +4735,6 @@ var TaskRow = React2.memo(
                   color: isParent ? task.color || defaultParentBarColor : barColor
                 },
                 children: [
-                  !showDurationInside && !milestone && /* @__PURE__ */ jsx2("span", { className: "gantt-tr-externalDuration", children: isParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
                   progressWidth > 0 && !showProgressInside && /* @__PURE__ */ jsxs2("span", { className: "gantt-tr-externalProgress", children: [
                     progressWidth,
                     "%"
@@ -4849,7 +4999,7 @@ var DragGuideLines = ({
 var DragGuideLines_default = DragGuideLines;
 
 // src/components/DependencyLines/DependencyLines.tsx
-import React6, { useMemo as useMemo6, useState as useState2 } from "react";
+import React6, { useMemo as useMemo6, useState as useState3 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function isTaskHidden(taskId, collapsedParentIds, taskMap) {
   const task = taskMap.get(taskId);
@@ -4888,6 +5038,8 @@ var DependencyLines = React6.memo(({
   gridWidth,
   totalHeight,
   rowIndexByTaskId,
+  rowTops,
+  rowHeights,
   dragOverrides,
   selectedDep,
   criticalTaskIds,
@@ -4895,7 +5047,7 @@ var DependencyLines = React6.memo(({
   weekendPredicate,
   onDependencyClick
 }) => {
-  const [hoveredLineId, setHoveredLineId] = useState2(null);
+  const [hoveredLineId, setHoveredLineId] = useState3(null);
   const tasksForPositions = allTasks ?? tasks;
   const { taskPositions, taskIndices, hiddenTaskIds } = useMemo6(() => {
     const positions = /* @__PURE__ */ new Map();
@@ -4911,7 +5063,8 @@ var DependencyLines = React6.memo(({
         left: computed.left,
         right: computed.right,
         centerX: computed.centerX,
-        rowTop: rowIndex * rowHeight,
+        rowTop: rowTops?.[rowIndex] ?? rowIndex * rowHeight,
+        rowHeight: rowHeights?.[rowIndex] ?? rowHeight,
         isVirtual: false
       });
     });
@@ -4931,6 +5084,7 @@ var DependencyLines = React6.memo(({
           right: computed.right,
           centerX: computed.centerX,
           rowTop: ancestorPosition.rowTop,
+          rowHeight: ancestorPosition.rowHeight,
           isVirtual: true
         });
       }
@@ -4944,18 +5098,19 @@ var DependencyLines = React6.memo(({
         const override = dragOverrides?.get(task.id);
         const computed = resolveTaskHorizontalGeometry(task, monthStart, dayWidth, override);
         const rowIndex = rowIndexByTaskId?.get(task.id);
-        const rowTop = rowIndex !== void 0 ? rowIndex * rowHeight : 0;
+        const rowTop = rowIndex !== void 0 ? rowTops?.[rowIndex] ?? rowIndex * rowHeight : 0;
         positions.set(task.id, {
           left: computed.left,
           right: computed.right,
           centerX: computed.centerX,
           rowTop,
+          rowHeight: rowIndex !== void 0 ? rowHeights?.[rowIndex] ?? rowHeight : rowHeight,
           isVirtual: false
         });
       }
     }
     return { taskPositions: positions, taskIndices: indices, hiddenTaskIds: hidden };
-  }, [tasks, tasksForPositions, allTasks, collapsedParentIds, monthStart, dayWidth, rowHeight, dragOverrides, rowIndexByTaskId]);
+  }, [tasks, tasksForPositions, allTasks, collapsedParentIds, monthStart, dayWidth, rowHeight, rowTops, rowHeights, dragOverrides, rowIndexByTaskId]);
   const tasksForCycleDetection = allTasks ?? tasks;
   const cycleInfo = useMemo6(() => {
     const result = detectCycles(tasksForCycleDetection);
@@ -4997,7 +5152,9 @@ var DependencyLines = React6.memo(({
             continue;
           }
         }
-        if (!renderedTaskIdSet.has(edge.predecessorId) && !renderedTaskIdSet.has(edge.successorId)) {
+        const predecessorVisibleId = predecessor.isVirtual ? findVisibleAncestor(taskMap.get(edge.predecessorId), collapsedParentIds, taskMap)?.id : edge.predecessorId;
+        const successorVisibleId = successor.isVirtual ? findVisibleAncestor(taskMap.get(edge.successorId), collapsedParentIds, taskMap)?.id : edge.successorId;
+        if (!renderedTaskIdSet.has(predecessorVisibleId ?? "") && !renderedTaskIdSet.has(successorVisibleId ?? "")) {
           continue;
         }
         const isVirtual = predecessor.isVirtual || successor.isVirtual;
@@ -5011,9 +5168,9 @@ var DependencyLines = React6.memo(({
         let toY;
         if (reverseOrder) {
           fromY = predecessor.rowTop + 10;
-          toY = successor.rowTop + rowHeight - 6;
+          toY = successor.rowTop + successor.rowHeight - 6;
         } else {
-          fromY = predecessor.rowTop + rowHeight - 10;
+          fromY = predecessor.rowTop + predecessor.rowHeight - 10;
           toY = successor.rowTop + 6;
         }
         let fromX = predecessorTask && isMilestoneTask(predecessorTask) ? predecessor.centerX : edge.type === "SS" || edge.type === "SF" ? predecessor.left : predecessor.right;
@@ -5289,7 +5446,7 @@ var DependencyCreationOverlay = ({ drag, width, height }) => {
 };
 
 // src/components/TaskList/TaskList.tsx
-import React13, { useMemo as useMemo9, useCallback as useCallback6, useState as useState7, useEffect as useEffect6, useRef as useRef7 } from "react";
+import React13, { useMemo as useMemo9, useCallback as useCallback6, useState as useState8, useEffect as useEffect7, useRef as useRef8 } from "react";
 
 // src/utils/taskListReorder.ts
 function getDescendantIds(taskId, tasks) {
@@ -5494,9 +5651,9 @@ var PopoverContent = ({
 
 // src/components/TaskList/TaskListRow.tsx
 import React10, {
-  useState as useState5,
-  useRef as useRef4,
-  useEffect as useEffect4,
+  useState as useState6,
+  useRef as useRef5,
+  useEffect as useEffect5,
   useCallback as useCallback5,
   useMemo as useMemo8
 } from "react";
@@ -5519,14 +5676,14 @@ var Input = React7.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/DatePicker.tsx
-import { useState as useState4, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useState as useState5, useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4 } from "react";
 import { format as format3, isValid, parse, addDays, addMonths as addMonths2, addYears, subMonths as subMonths2, subYears, subDays } from "date-fns";
 
 // src/components/ui/Calendar.tsx
 import {
-  useState as useState3,
-  useRef as useRef2,
-  useEffect as useEffect2,
+  useState as useState4,
+  useRef as useRef3,
+  useEffect as useEffect3,
   useCallback as useCallback3,
   useMemo as useMemo7
 } from "react";
@@ -5561,13 +5718,13 @@ var Calendar = ({
   disabled = false,
   isWeekend: isWeekendProp
 }) => {
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   const initialMonth = useMemo7(
     () => startOfMonth(initialDate ?? selected ?? /* @__PURE__ */ new Date()),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const [months, setMonths] = useState3(() => [
+  const [months, setMonths] = useState4(() => [
     subMonths(initialMonth, 1),
     initialMonth,
     addMonths(initialMonth, 1)
@@ -5581,7 +5738,7 @@ var Calendar = ({
       }
     });
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const container = scrollRef.current;
     if (!container) return;
     const handleScroll = () => {
@@ -5599,7 +5756,7 @@ var Calendar = ({
     container.addEventListener("scroll", handleScroll);
     return () => container.removeEventListener("scroll", handleScroll);
   }, [loadMoreMonths]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!scrollRef.current) return;
     const target = selected ?? initialDate ?? /* @__PURE__ */ new Date();
     const monthKey = format2(startOfMonth(target), "yyyy-MM");
@@ -5704,12 +5861,12 @@ var DatePicker = ({
   businessDays = true,
   footer
 }) => {
-  const [open, setOpen] = useState4(false);
-  const [inputValue, setInputValue] = useState4("");
-  const [draftDate, setDraftDate] = useState4(void 0);
-  const dateInputRef = useRef3(null);
-  const segIdxRef = useRef3(0);
-  const charPosRef = useRef3(0);
+  const [open, setOpen] = useState5(false);
+  const [inputValue, setInputValue] = useState5("");
+  const [draftDate, setDraftDate] = useState5(void 0);
+  const dateInputRef = useRef4(null);
+  const segIdxRef = useRef4(0);
+  const charPosRef = useRef4(0);
   const selectedDate = (() => {
     if (!value) return void 0;
     const d = /* @__PURE__ */ new Date(value + "T00:00:00Z");
@@ -5717,7 +5874,7 @@ var DatePicker = ({
   })();
   const activeDate = draftDate ?? selectedDate;
   const displayValue = selectedDate ? formatUTCDate(selectedDate, displayFormat) : placeholder;
-  useEffect3(() => {
+  useEffect4(() => {
     if (value) {
       const d = /* @__PURE__ */ new Date(value + "T00:00:00Z");
       if (isValid(d)) {
@@ -5734,7 +5891,7 @@ var DatePicker = ({
     const seg = segments[idx] ?? segments[0];
     dateInputRef.current.setSelectionRange(seg.start, seg.end);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open) {
       setTimeout(() => {
         if (dateInputRef.current) {
@@ -6333,10 +6490,10 @@ var DepChip = ({
   businessDays = true,
   weekendPredicate
 }) => {
-  const [popoverOpen, setPopoverOpen] = useState5(false);
+  const [popoverOpen, setPopoverOpen] = useState6(false);
   const lagAbs = Math.abs(lag ?? 0);
-  const [inputAbs, setInputAbs] = useState5(lagAbs === 0 ? "" : String(lagAbs));
-  useEffect4(() => {
+  const [inputAbs, setInputAbs] = useState6(lagAbs === 0 ? "" : String(lagAbs));
+  useEffect5(() => {
     const abs = Math.abs(lag ?? 0);
     setInputAbs(abs === 0 ? "" : String(abs));
   }, [lag]);
@@ -6715,13 +6872,14 @@ var TaskListRow = React10.memo(
     taskListMenuCommands = [],
     hideTaskListRowActions = false,
     rowClassName,
+    compositeParentColor,
     getTaskListNamePrefixIcon,
     taskDateChangeMode = "preserve-duration",
     onTaskDateChangeModeChange,
     printDependencyLabels = false
   }) => {
-    const [editingColumnId, setEditingColumnId] = useState5(null);
-    const [editingColumnStartValue, setEditingColumnStartValue] = useState5(void 0);
+    const [editingColumnId, setEditingColumnId] = useState6(null);
+    const [editingColumnStartValue, setEditingColumnStartValue] = useState6(void 0);
     const editingName = editingColumnId === "name";
     const editingDuration = editingColumnId === "duration";
     const editingProgress = editingColumnId === "progress";
@@ -6752,27 +6910,27 @@ var TaskListRow = React10.memo(
     }, [columnWidthStyleMap]);
     const normalizedTask = useMemo8(() => normalizeTaskDatesForType(task), [task]);
     const isMilestone = useMemo8(() => isMilestoneTask(normalizedTask), [normalizedTask]);
-    const [nameValue, setNameValue] = useState5("");
-    const nameInputRef = useRef4(null);
-    const [durationValue, setDurationValue] = useState5(
+    const [nameValue, setNameValue] = useState6("");
+    const nameInputRef = useRef5(null);
+    const [durationValue, setDurationValue] = useState6(
       () => getInclusiveDurationDays(normalizedTask.startDate, normalizedTask.endDate)
     );
-    const durationInputRef = useRef4(null);
-    const dependencySearchInputRef = useRef4(null);
-    const dependencySearchListRef = useRef4(null);
-    const [progressValue, setProgressValue] = useState5(0);
-    const progressInputRef = useRef4(null);
-    const [overflowOpen, setOverflowOpen] = useState5(false);
-    const [contextMenuOpen, setContextMenuOpen] = useState5(false);
-    const [colorMenuOpen, setColorMenuOpen] = useState5(false);
-    const nameConfirmedRef = useRef4(false);
-    const durationConfirmedRef = useRef4(false);
-    const progressConfirmedRef = useRef4(false);
-    const autoEditedForRef = useRef4(null);
-    const editTriggerRef = useRef4(
+    const durationInputRef = useRef5(null);
+    const dependencySearchInputRef = useRef5(null);
+    const dependencySearchListRef = useRef5(null);
+    const [progressValue, setProgressValue] = useState6(0);
+    const progressInputRef = useRef5(null);
+    const [overflowOpen, setOverflowOpen] = useState6(false);
+    const [contextMenuOpen, setContextMenuOpen] = useState6(false);
+    const [colorMenuOpen, setColorMenuOpen] = useState6(false);
+    const nameConfirmedRef = useRef5(false);
+    const durationConfirmedRef = useRef5(false);
+    const progressConfirmedRef = useRef5(false);
+    const autoEditedForRef = useRef5(null);
+    const editTriggerRef = useRef5(
       "doubleclick"
     );
-    const rowRef = useRef4(null);
+    const rowRef = useRef5(null);
     const isSelected = selectedTaskId === task.id;
     const isParent = useMemo8(
       () => isTaskParent(task.id, allTasks),
@@ -6799,13 +6957,42 @@ var TaskListRow = React10.memo(
       [businessDays, weekendPredicate]
     );
     const isCollapsed = collapsedParentIds.has(task.id);
+    const [compositeIconMode, setCompositeIconMode] = useState6(
+      () => isCollapsed ? "composite" : "down"
+    );
+    const compositeIconModeRef = useRef5(compositeIconMode);
+    const [compositeIconAnimation, setCompositeIconAnimation] = useState6(null);
+    const [compositeIconAnimationPhase, setCompositeIconAnimationPhase] = useState6(null);
+    useEffect5(() => {
+      const nextMode = isCollapsed ? "composite" : "down";
+      if (nextMode === compositeIconModeRef.current) {
+        setCompositeIconAnimation(null);
+        setCompositeIconAnimationPhase(null);
+        return;
+      }
+      setCompositeIconAnimation(isCollapsed ? "closing" : "opening");
+      setCompositeIconAnimationPhase("outgoing");
+      const swapTimeoutId = window.setTimeout(() => {
+        compositeIconModeRef.current = nextMode;
+        setCompositeIconMode(nextMode);
+        setCompositeIconAnimationPhase("incoming");
+      }, 120);
+      const finishTimeoutId = window.setTimeout(() => {
+        setCompositeIconAnimation(null);
+        setCompositeIconAnimationPhase(null);
+      }, 240);
+      return () => {
+        window.clearTimeout(swapTimeoutId);
+        window.clearTimeout(finishTimeoutId);
+      };
+    }, [isCollapsed]);
     const getHierarchyLineColor = useCallback5((columnDepth) => {
       return columnDepth % 2 === 0 ? "#93c5fd" : "var(--gantt-hierarchy-line-color)";
     }, []);
     const isPicking = selectingPredecessorFor != null;
     const isSourceRow = isPicking && selectingPredecessorFor === task.id;
-    const [dependencySearchQuery, setDependencySearchQuery] = useState5("");
-    const [highlightedDependencyIndex, setHighlightedDependencyIndex] = useState5(0);
+    const [dependencySearchQuery, setDependencySearchQuery] = useState6("");
+    const [highlightedDependencyIndex, setHighlightedDependencyIndex] = useState6(0);
     const chips = useMemo8(() => {
       const taskById = new Map((allTasks ?? []).map((t) => [t.id, t]));
       return (task.dependencies ?? []).map((dep) => {
@@ -6842,7 +7029,7 @@ var TaskListRow = React10.memo(
       taskNumberMap,
       task.dependencies
     ]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (editingName && nameInputRef.current) {
         nameInputRef.current.focus();
         if (editTriggerRef.current === "keypress") {
@@ -6853,15 +7040,15 @@ var TaskListRow = React10.memo(
         }
       }
     }, [editingName]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (!isSourceRow && dependencySearchQuery !== "") {
         setDependencySearchQuery("");
       }
     }, [isSourceRow, dependencySearchQuery]);
-    useEffect4(() => {
+    useEffect5(() => {
       setHighlightedDependencyIndex(0);
     }, [dependencySearchQuery, isSourceRow, dependencyPickMode]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (dependencySearchCandidates.length === 0) {
         setHighlightedDependencyIndex(0);
         return;
@@ -6870,13 +7057,13 @@ var TaskListRow = React10.memo(
         setHighlightedDependencyIndex(dependencySearchCandidates.length - 1);
       }
     }, [dependencySearchCandidates, highlightedDependencyIndex]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (isSourceRow && dependencySearchInputRef.current) {
         dependencySearchInputRef.current.focus();
         dependencySearchInputRef.current.select();
       }
     }, [isSourceRow, dependencyPickMode, activeLinkType]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (!isSourceRow || dependencySearchCandidates.length === 0) {
         return;
       }
@@ -6888,7 +7075,7 @@ var TaskListRow = React10.memo(
         block: "nearest"
       });
     }, [isSourceRow, highlightedDependencyIndex, dependencySearchCandidates]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (editingTaskId === task.id && !disableTaskNameEditing && autoEditedForRef.current !== editingTaskId) {
         autoEditedForRef.current = editingTaskId;
         nameConfirmedRef.current = false;
@@ -6907,6 +7094,7 @@ var TaskListRow = React10.memo(
     );
     const handleNameDoubleClick = useCallback5(
       (e) => {
+        if (task.composite) return;
         if (disableTaskNameEditing) return;
         e.stopPropagation();
         nameConfirmedRef.current = false;
@@ -6914,7 +7102,7 @@ var TaskListRow = React10.memo(
         setNameValue(task.name);
         setEditingColumnId("name");
       },
-      [task.name, disableTaskNameEditing]
+      [task.name, task.composite, disableTaskNameEditing]
     );
     const handleRowKeyDown = useCallback5(
       (e) => {
@@ -7069,16 +7257,16 @@ var TaskListRow = React10.memo(
       },
       [progressValue, task, onTasksChange, handleProgressCancel, allTasks]
     );
-    useEffect4(() => {
+    useEffect5(() => {
       if (editingProgress && progressInputRef.current) {
         progressInputRef.current.focus();
         progressInputRef.current.select();
       }
     }, [editingProgress]);
-    useEffect4(() => {
+    useEffect5(() => {
       setDurationValue(getDuration(normalizedTask.startDate, normalizedTask.endDate));
     }, [normalizedTask.startDate, normalizedTask.endDate, getDuration]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (editingDuration && durationInputRef.current) {
         durationInputRef.current.focus();
         durationInputRef.current.select();
@@ -7563,7 +7751,7 @@ var TaskListRow = React10.memo(
         ]
       }
     );
-    const nameTriggerPaddingLeft = isParent ? `${nestingDepth * 20 + 28}px` : nestingDepth > 0 ? `${nestingDepth * 20 + 8}px` : void 0;
+    const nameTriggerPaddingLeft = isParent && !task.composite ? `${nestingDepth * 20 + 28}px` : nestingDepth > 0 ? `${nestingDepth * 20 + 8}px` : void 0;
     const nameInputPaddingLeft = nestingDepth > 0 ? `${nestingDepth * 20 + 8}px` : void 0;
     const nestedDropIndicatorLeft = (() => {
       const numberColumnWidth = resolvedColumns?.find((col) => col.id === "number")?.width ?? 40;
@@ -7661,36 +7849,35 @@ var TaskListRow = React10.memo(
             }
           )
         ] }),
-        isParent && !editingName && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-          !isFilterHideMode && !isCollapsed && /* @__PURE__ */ jsx14(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                left: `${nestingDepth * 20 + 9}px`,
-                top: `${rowHeight / 2 + 7}px`,
-                height: `${rowHeight / 2 - 7}px`,
-                width: "1.5px",
-                background: getHierarchyLineColor(nestingDepth),
-                borderRadius: "1px",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            "button",
-            {
-              type: "button",
-              className: `gantt-tl-collapse-btn ${isCollapsed ? "gantt-tl-collapse-btn-collapsed" : ""}`,
-              onClick: handleToggleCollapse,
-              style: { left: `${nestingDepth * 20 + 1}px` },
-              "aria-label": isCollapsed ? "Expand children" : "Collapse children",
-              children: /* @__PURE__ */ jsx14(ChevronRightIcon, {})
+        task.composite && !isFilterHideMode && !isCollapsed && !editingName && /* @__PURE__ */ jsx14(
+          "span",
+          {
+            "data-testid": "gantt-tl-parent-connector-tail",
+            style: {
+              position: "absolute",
+              left: `${nestingDepth * 20 + 9}px`,
+              top: `${rowHeight / 2 + 7}px`,
+              height: `${rowHeight / 2 - 7}px`,
+              width: "1.5px",
+              background: getHierarchyLineColor(nestingDepth),
+              borderRadius: "1px",
+              pointerEvents: "none"
             }
-          )
-        ] })
+          }
+        ),
+        isParent && !task.composite && !editingName && /* @__PURE__ */ jsx14(Fragment3, { children: /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: `gantt-tl-collapse-btn ${isCollapsed ? "gantt-tl-collapse-btn-collapsed" : ""}`,
+            onClick: handleToggleCollapse,
+            style: { left: `${nestingDepth * 20 - 2}px` },
+            "aria-label": isCollapsed ? "Expand children" : "Collapse children",
+            children: /* @__PURE__ */ jsx14(ChevronRightIcon, {})
+          }
+        ) })
       ] }),
-      !isChild && isParent && !editingName && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      !isChild && isParent && !task.composite && !editingName && /* @__PURE__ */ jsxs10(Fragment3, { children: [
         !isFilterHideMode && !isCollapsed && /* @__PURE__ */ jsx14(
           "span",
           {
@@ -7713,7 +7900,7 @@ var TaskListRow = React10.memo(
             type: "button",
             className: `gantt-tl-collapse-btn ${isCollapsed ? "gantt-tl-collapse-btn-collapsed" : ""}`,
             onClick: handleToggleCollapse,
-            style: { left: `${nestingDepth * 20 + 1}px` },
+            style: { left: `${nestingDepth * 20 - 2}px` },
             "aria-label": isCollapsed ? "Expand children" : "Collapse children",
             children: /* @__PURE__ */ jsx14(ChevronRightIcon, {})
           }
@@ -7732,27 +7919,57 @@ var TaskListRow = React10.memo(
           style: { paddingLeft: nameInputPaddingLeft },
           onClick: (e) => e.stopPropagation()
         }
-      ) : /* @__PURE__ */ jsxs10(
-        "button",
-        {
-          type: "button",
-          className: [
-            "gantt-tl-name-trigger",
-            disableTaskNameEditing ? "gantt-tl-name-locked" : ""
-          ].filter(Boolean).join(" "),
-          title: task.name,
-          onClick: handleNameClick,
-          onDoubleClick: handleNameDoubleClick,
-          style: {
-            paddingLeft: nameTriggerPaddingLeft,
-            paddingRight: task.color ? "20px" : void 0
-          },
-          children: [
-            taskListNamePrefixIcon ? /* @__PURE__ */ jsx14("span", { className: "gantt-tl-name-trigger-icon", "aria-hidden": "true", children: taskListNamePrefixIcon }) : null,
-            /* @__PURE__ */ jsx14("span", { className: "gantt-tl-name-trigger-text", children: task.name })
-          ]
-        }
-      ),
+      ) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        task.composite && /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: "gantt-tl-compositeToggle",
+            onClick: handleToggleCollapse,
+            style: { left: `${nestingDepth * 20 - 3}px` },
+            "aria-label": isCollapsed ? `\u0420\u0430\u0441\u043A\u0440\u044B\u0442\u044C ${task.name}` : `\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C ${task.name}`,
+            "aria-expanded": !isCollapsed,
+            title: isCollapsed ? "\u0420\u0430\u0441\u043A\u0440\u044B\u0442\u044C \u044D\u0442\u0430\u0436\u0438" : "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u044D\u0442\u0430\u0436\u0438",
+            children: /* @__PURE__ */ jsx14(
+              "svg",
+              {
+                className: compositeIconAnimation && compositeIconAnimationPhase ? `gantt-tl-compositeGlyph-${compositeIconMode}-${compositeIconAnimation}-${compositeIconAnimationPhase}` : void 0,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: compositeIconMode === "composite" ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                  /* @__PURE__ */ jsx14("path", { d: "M21 5H11" }),
+                  /* @__PURE__ */ jsx14("path", { d: "M21 12H11" }),
+                  /* @__PURE__ */ jsx14("path", { d: "M21 19H11" }),
+                  /* @__PURE__ */ jsx14("path", { d: "m3 8 4 4-4 4" })
+                ] }) : /* @__PURE__ */ jsx14("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "button",
+          {
+            type: "button",
+            className: `gantt-tl-name-trigger${disableTaskNameEditing ? " gantt-tl-name-locked" : ""}`,
+            title: task.name,
+            onClick: handleNameClick,
+            onDoubleClick: handleNameDoubleClick,
+            style: {
+              paddingLeft: task.composite ? `${nestingDepth * 20 + 30}px` : nameTriggerPaddingLeft,
+              paddingRight: task.color ? "20px" : void 0
+            },
+            children: [
+              taskListNamePrefixIcon ? /* @__PURE__ */ jsx14("span", { className: "gantt-tl-name-trigger-icon", "aria-hidden": "true", children: taskListNamePrefixIcon }) : null,
+              /* @__PURE__ */ jsx14("span", { className: "gantt-tl-name-trigger-text", children: task.name })
+            ]
+          }
+        )
+      ] }),
       !editingName && task.color && /* @__PURE__ */ jsx14(
         "span",
         {
@@ -8369,8 +8586,9 @@ var TaskListRow = React10.memo(
           isDragOver && isNestedDropTarget ? "gantt-tl-row-drag-over-nested" : "",
           isDragOver && isDirectChildDropTarget ? "gantt-tl-row-drag-over-direct-child" : "",
           isChild ? "gantt-tl-row-child" : "",
-          isParent ? "gantt-tl-row-parent" : "",
-          isParent && fillParentRow ? "gantt-tl-row-parent-filled" : "",
+          isParent && !task.composite ? "gantt-tl-row-parent" : "",
+          task.composite ? "gantt-tl-row-composite" : "",
+          isParent && !task.composite && fillParentRow ? "gantt-tl-row-parent-filled" : "",
           `gantt-tl-row-level-${rowFillLevel}`,
           isTotalRow ? "gantt-tl-row-total" : "",
           rowClassName ?? ""
@@ -8378,6 +8596,7 @@ var TaskListRow = React10.memo(
         style: {
           height: `${rowHeight}px`,
           position: "relative",
+          "--gantt-tl-composite-detail-color": compositeParentColor ?? "var(--gantt-task-bar-default-color, #8b5cf6)",
           "--gantt-tl-nested-drop-left": nestedDropIndicatorLeft,
           "--gantt-tl-nested-inside-drop-left": nestedInsideDropIndicatorLeft
         },
@@ -8519,7 +8738,7 @@ var TaskListRow = React10.memo(
 TaskListRow.displayName = "TaskListRow";
 
 // src/components/TaskList/NewTaskRow.tsx
-import { useState as useState6, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useState as useState7, useRef as useRef6, useEffect as useEffect6 } from "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var NewTaskRow = ({
   rowHeight,
@@ -8527,12 +8746,12 @@ var NewTaskRow = ({
   onCancel,
   nestingDepth = 0
 }) => {
-  const [nameValue, setNameValue] = useState6("");
-  const inputRef = useRef5(null);
-  const confirmedRef = useRef5(false);
+  const [nameValue, setNameValue] = useState7("");
+  const inputRef = useRef6(null);
+  const confirmedRef = useRef6(false);
   const inputInnerPadding = 4;
   const levelOffset = nestingDepth > 0 ? nestingDepth * 20 + 8 : 0;
-  useEffect5(() => {
+  useEffect6(() => {
     if (inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -8585,7 +8804,7 @@ var NewTaskRow = ({
 };
 
 // src/components/GenerationSkeleton/GenerationSkeleton.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import { Fragment as Fragment4, jsx as jsx16 } from "react/jsx-runtime";
 var MAX_SKELETON_ROWS = 200;
 var SHIMMER_DURATION_MS = 1450;
@@ -8603,14 +8822,15 @@ var GenerationSkeletonRows = ({
   rowHeight,
   variant,
   startIndex = 0,
+  startTop,
   taskListLayout,
   chartDayWidth = 40,
   chartStartDayOffset = 0,
   chartStartJitterDays = 0
 }) => {
   const safeCount = clampCount(count);
-  const previousCountRef = useRef6(null);
-  const shimmerDelayRef = useRef6("0ms");
+  const previousCountRef = useRef7(null);
+  const shimmerDelayRef = useRef7("0ms");
   if (previousCountRef.current !== safeCount) {
     previousCountRef.current = safeCount;
     shimmerDelayRef.current = `-${Date.now() % SHIMMER_DURATION_MS}ms`;
@@ -8643,7 +8863,7 @@ var GenerationSkeletonRows = ({
           "div",
           {
             className: "gantt-generation-skeleton-row",
-            style: { top: `${rowIndex * rowHeight}px`, height: `${rowHeight}px` },
+            style: { top: `${(startTop ?? startIndex * rowHeight) + index * rowHeight}px`, height: `${rowHeight}px` },
             children: variant === "task-list" ? /* @__PURE__ */ jsx16(Fragment4, { children: /* @__PURE__ */ jsx16("span", { className: `gantt-generation-skeleton-label ${shortShape ? "gantt-generation-skeleton-label-short" : ""} ${mediumShape ? "gantt-generation-skeleton-label-medium" : ""}` }) }) : /* @__PURE__ */ jsx16("span", { className: `gantt-generation-skeleton-bar ${parentShape ? "gantt-generation-skeleton-bar-parent" : ""} ${shortShape ? "gantt-generation-skeleton-bar-short" : ""}`, style: chartBarStyle })
           },
           rowIndex
@@ -8881,8 +9101,8 @@ var SelectAllCheckbox = ({
   indeterminate,
   onChange
 }) => {
-  const ref = useRef7(null);
-  useEffect6(() => {
+  const ref = useRef8(null);
+  useEffect7(() => {
     if (ref.current) {
       ref.current.indeterminate = indeterminate;
     }
@@ -8903,6 +9123,8 @@ var SelectAllCheckbox = ({
 var TaskList = ({
   tasks,
   rowHeight,
+  rowTops,
+  rowHeights,
   headerHeight,
   taskListWidth,
   onTasksChange,
@@ -8961,14 +9183,14 @@ var TaskList = ({
   skeletonRowCount = 0
 }) => {
   const reorderDisabled = disableTaskListReorder || disableTaskDrag;
-  const [internalSelectedTaskIds, setInternalSelectedTaskIds] = useState7(/* @__PURE__ */ new Set());
-  const [activeCustomCell, setActiveCustomCell] = useState7(null);
-  const [columnWidthOverrides, setColumnWidthOverrides] = useState7(() => normalizeColumnWidthMap(taskListColumnWidths));
-  const [isColumnResizeMode, setIsColumnResizeMode] = useState7(false);
-  const columnResizeHeaderRef = useRef7(null);
-  const resizeStateRef = useRef7(null);
+  const [internalSelectedTaskIds, setInternalSelectedTaskIds] = useState8(/* @__PURE__ */ new Set());
+  const [activeCustomCell, setActiveCustomCell] = useState8(null);
+  const [columnWidthOverrides, setColumnWidthOverrides] = useState8(() => normalizeColumnWidthMap(taskListColumnWidths));
+  const [isColumnResizeMode, setIsColumnResizeMode] = useState8(false);
+  const columnResizeHeaderRef = useRef8(null);
+  const resizeStateRef = useRef8(null);
   const effectiveSelectedTaskIds = selectedTaskIds ?? internalSelectedTaskIds;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isColumnResizeMode) {
       return;
     }
@@ -8990,7 +9212,7 @@ var TaskList = ({
     }
     onSelectedTaskIdsChange?.(nextSelectedTaskIds);
   }, [onSelectedTaskIdsChange, selectedTaskIds]);
-  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState7(/* @__PURE__ */ new Set());
+  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState8(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
   const handleToggleCollapse = externalOnToggleCollapse ?? useCallback6((parentId) => {
     setInternalCollapsedParentIds((prev) => {
@@ -9030,14 +9252,22 @@ var TaskList = ({
     return tasks2;
   }, [orderedTasks, collapsedParentIds, filterMode, filteredTaskIds, isFilterActive, criticalPathMode, criticalTaskIds]);
   const totalHeight = useMemo9(
-    () => (visibleTasks.length + Math.max(0, Math.floor(skeletonRowCount))) * rowHeight,
-    [rowHeight, skeletonRowCount, visibleTasks.length]
+    () => (rowTops && rowHeights && visibleTasks.length > 0 ? rowTops[visibleTasks.length - 1] + rowHeights[visibleTasks.length - 1] : visibleTasks.length * rowHeight) + Math.max(0, Math.floor(skeletonRowCount)) * rowHeight,
+    [rowHeight, rowTops, rowHeights, skeletonRowCount, visibleTasks.length]
   );
   const visibleTaskNumberMap = useMemo9(
     () => Object.fromEntries(buildTaskNumberMap(visibleTasks)),
     [visibleTasks]
   );
   const visibleTaskIds = useMemo9(() => visibleTasks.map((task) => task.id), [visibleTasks]);
+  const compositeParentIds = useMemo9(
+    () => new Set(tasks.filter((task) => task.composite).map((task) => task.id)),
+    [tasks]
+  );
+  const compositeParentsById = useMemo9(
+    () => new Map(tasks.filter((task) => task.composite).map((task) => [task.id, task])),
+    [tasks]
+  );
   const renderedVisibleRowIndices = useMemo9(
     () => visibleRowIndices ?? visibleTasks.map((_, index) => index),
     [visibleRowIndices, visibleTasks]
@@ -9148,14 +9378,14 @@ var TaskList = ({
   const handleRowClick = useCallback6((taskId) => {
     onTaskSelect?.(taskId);
   }, [onTaskSelect]);
-  const [activeLinkType, setActiveLinkType] = useState7("FS");
-  const [selectingPredecessorFor, setSelectingPredecessorFor] = useState7(null);
-  const [dependencyPickMode, setDependencyPickMode] = useState7("successor");
-  const [typeMenuOpen, setTypeMenuOpen] = useState7(false);
-  const [dependencyError, setDependencyError] = useState7(null);
-  const overlayRef = useRef7(null);
-  const [selectedChip, setSelectedChip] = useState7(controlledSelectedChip ? { ...controlledSelectedChip, linkType: controlledSelectedChip.linkType } : null);
-  useEffect6(() => {
+  const [activeLinkType, setActiveLinkType] = useState8("FS");
+  const [selectingPredecessorFor, setSelectingPredecessorFor] = useState8(null);
+  const [dependencyPickMode, setDependencyPickMode] = useState8("successor");
+  const [typeMenuOpen, setTypeMenuOpen] = useState8(false);
+  const [dependencyError, setDependencyError] = useState8(null);
+  const overlayRef = useRef8(null);
+  const [selectedChip, setSelectedChip] = useState8(controlledSelectedChip ? { ...controlledSelectedChip, linkType: controlledSelectedChip.linkType } : null);
+  useEffect7(() => {
     if (controlledSelectedChip !== void 0) {
       setSelectedChip(controlledSelectedChip ? { ...controlledSelectedChip, linkType: controlledSelectedChip.linkType } : null);
     }
@@ -9164,7 +9394,7 @@ var TaskList = ({
     setSelectedChip(chip);
     onSelectedChipChange?.(chip);
   }, [onSelectedChipChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!selectingPredecessorFor && !selectedChip && !selectedTaskId && !activeCustomCell) return;
     const pendingCanvasMouseDownRef = {
       container: null,
@@ -9346,13 +9576,13 @@ var TaskList = ({
     );
     onTasksChange?.([{ ...task, dependencies: updatedDeps }]);
   }, [tasks, onTasksChange]);
-  const [isCreating, setIsCreating] = useState7(false);
-  const [pendingInsert, setPendingInsert] = useState7(null);
-  const [draggingIndex, setDraggingIndex] = useState7(null);
-  const [dragOverTarget, setDragOverTarget] = useState7(null);
-  const [isBeforeFirstDropZoneActive, setIsBeforeFirstDropZoneActive] = useState7(false);
-  const dragOriginIndexRef = useRef7(null);
-  const dragTaskIdRef = useRef7(null);
+  const [isCreating, setIsCreating] = useState8(false);
+  const [pendingInsert, setPendingInsert] = useState8(null);
+  const [draggingIndex, setDraggingIndex] = useState8(null);
+  const [dragOverTarget, setDragOverTarget] = useState8(null);
+  const [isBeforeFirstDropZoneActive, setIsBeforeFirstDropZoneActive] = useState8(false);
+  const dragOriginIndexRef = useRef8(null);
+  const dragTaskIdRef = useRef8(null);
   const clearDragState = useCallback6(() => {
     setDraggingIndex(null);
     setDragOverTarget(null);
@@ -9688,7 +9918,7 @@ var TaskList = ({
     () => createBuiltInColumns({ businessDays, enableTaskMultiSelect }),
     [businessDays, enableTaskMultiSelect]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setColumnWidthOverrides(normalizeColumnWidthMap(taskListColumnWidths));
   }, [taskListColumnWidths]);
   const resolvedColumns = useMemo9(
@@ -9740,7 +9970,7 @@ var TaskList = ({
       return next;
     });
   }, [onTaskListColumnWidthsChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     const updateResizedColumn = (clientX) => {
       const resizeState = resizeStateRef.current;
       if (!resizeState) {
@@ -10029,7 +10259,7 @@ var TaskList = ({
               renderedVisibleTasks.map(({ task, index }) => {
                 const previousVisibleTask = index > 0 ? visibleTasks[index - 1] : void 0;
                 const canDemoteTask = index === 0 || !task.parentId || previousVisibleTask?.id !== task.parentId;
-                const topOffset = index * rowHeight + (hasVisiblePendingInsert && index > pendingInsertRowIndex ? rowHeight : 0);
+                const topOffset = (rowTops?.[index] ?? index * rowHeight) + (hasVisiblePendingInsert && index > pendingInsertRowIndex ? rowHeight : 0);
                 return /* @__PURE__ */ jsx17(
                   "div",
                   {
@@ -10046,7 +10276,7 @@ var TaskList = ({
                         rowIndex: index,
                         taskNumber: originalTaskNumberMap[task.id] || "",
                         taskNumberMap: originalTaskNumberMap,
-                        rowHeight,
+                        rowHeight: rowHeights?.[index] ?? rowHeight,
                         onTasksChange,
                         onDurationChange,
                         selectedTaskId,
@@ -10103,7 +10333,8 @@ var TaskList = ({
                         onActiveCustomCellChange: setActiveCustomCell,
                         taskListMenuCommands,
                         hideTaskListRowActions,
-                        rowClassName: getTaskListRowClassName?.(task),
+                        rowClassName: [task.parentId && compositeParentIds.has(task.parentId) ? "gantt-tl-row-composite-detail" : "", getTaskListRowClassName?.(task)].filter(Boolean).join(" "),
+                        compositeParentColor: task.parentId ? compositeParentsById.get(task.parentId)?.color : void 0,
                         getTaskListNamePrefixIcon,
                         taskDateChangeMode,
                         onTaskDateChangeModeChange,
@@ -10119,7 +10350,7 @@ var TaskList = ({
                 {
                   style: {
                     position: "absolute",
-                    top: `${(pendingInsertRowIndex + 1) * rowHeight}px`,
+                    top: `${rowTops?.[pendingInsertRowIndex + 1] ?? (pendingInsertRowIndex + 1) * rowHeight}px`,
                     left: 0,
                     right: 0
                   },
@@ -10141,6 +10372,7 @@ var TaskList = ({
                   rowHeight,
                   variant: "task-list",
                   startIndex: visibleTasks.length,
+                  startTop: totalHeight - Math.max(0, Math.floor(skeletonRowCount)) * rowHeight,
                   taskListLayout: generationSkeletonTaskListLayout
                 }
               )
@@ -10194,7 +10426,7 @@ var TaskList = ({
 };
 
 // src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
-import React14, { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo10, useRef as useRef9, useState as useState9 } from "react";
+import React14, { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo10, useRef as useRef10, useState as useState10 } from "react";
 
 // src/utils/resourceTimelineLayout.ts
 var isInvalidDate = (date) => Number.isNaN(date.getTime());
@@ -10396,7 +10628,7 @@ var layoutResourceTimelineItems = (resources, options) => {
 };
 
 // src/hooks/useResourceItemDrag.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
 var RESOURCE_CURSOR_STYLE_ID = "gantt-resource-global-drag-cursor-style";
 function ensureResourceGlobalCursorStyle() {
   if (typeof document === "undefined") return;
@@ -10508,15 +10740,15 @@ var useResourceItemDrag = ({
   weekendPredicate,
   onResourceItemMove
 }) => {
-  const activeDragRef = useRef8(null);
-  const rowsRef = useRef8(rows);
-  const onResourceItemMoveRef = useRef8(onResourceItemMove);
-  const rafRef = useRef8(null);
-  const [preview, setPreview] = useState8(null);
-  useEffect7(() => {
+  const activeDragRef = useRef9(null);
+  const rowsRef = useRef9(rows);
+  const onResourceItemMoveRef = useRef9(onResourceItemMove);
+  const rafRef = useRef9(null);
+  const [preview, setPreview] = useState9(null);
+  useEffect8(() => {
     rowsRef.current = rows;
   }, [rows]);
-  useEffect7(() => {
+  useEffect8(() => {
     onResourceItemMoveRef.current = onResourceItemMove;
   }, [onResourceItemMove]);
   const clearRaf = useCallback7(() => {
@@ -10531,7 +10763,7 @@ var useResourceItemDrag = ({
     activeDragRef.current = null;
     setPreview(null);
   }, [clearRaf]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleMouseMove = (event) => {
       const activeDrag = activeDragRef.current;
       if (!activeDrag || rafRef.current !== null) {
@@ -10864,13 +11096,13 @@ var ResourceHeader = ({
   onConflictBadgeClick,
   columnTemplate
 }) => {
-  const [menuOpen, setMenuOpen] = useState9(false);
-  const [typeMenuOpen, setTypeMenuOpen] = useState9(false);
-  const [scopeMenuOpen, setScopeMenuOpen] = useState9(false);
-  const [editingName, setEditingName] = useState9(false);
-  const [nameValue, setNameValue] = useState9(resource.name);
-  const nameInputRef = useRef9(null);
-  const nameConfirmedRef = useRef9(false);
+  const [menuOpen, setMenuOpen] = useState10(false);
+  const [typeMenuOpen, setTypeMenuOpen] = useState10(false);
+  const [scopeMenuOpen, setScopeMenuOpen] = useState10(false);
+  const [editingName, setEditingName] = useState10(false);
+  const [nameValue, setNameValue] = useState10(resource.name);
+  const nameInputRef = useRef10(null);
+  const nameConfirmedRef = useRef10(false);
   const visibleCommands = useMemo10(
     () => menuCommands.filter((command) => command.isVisible?.(resource) ?? true),
     [menuCommands, resource]
@@ -10883,12 +11115,12 @@ var ResourceHeader = ({
   const applyResourcePatch = useCallback8((patch) => {
     onResourceChange?.({ ...resource, ...patch });
   }, [onResourceChange, resource]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!editingName) {
       setNameValue(resource.name);
     }
   }, [editingName, resource.name]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (editingName && nameInputRef.current) {
       nameInputRef.current.focus();
       nameInputRef.current.select();
@@ -11129,10 +11361,10 @@ var ResourceHeader = ({
   );
 };
 var NewResourceRow = ({ height, onConfirm, onCancel, columnTemplate }) => {
-  const [nameValue, setNameValue] = useState9("");
-  const inputRef = useRef9(null);
-  const confirmedRef = useRef9(false);
-  useEffect8(() => {
+  const [nameValue, setNameValue] = useState10("");
+  const inputRef = useRef10(null);
+  const confirmedRef = useRef10(false);
+  useEffect9(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
@@ -11217,18 +11449,18 @@ function ResourceTimelineChart({
   resourceTableColumnWidths,
   onResourceTableColumnWidthsChange
 }) {
-  const scrollContainerRef = useRef9(null);
-  const gridRef = useRef9(null);
-  const panStateRef = useRef9(null);
-  const resourceColumnResizeRef = useRef9(null);
-  const conflictNavigationIndexRef = useRef9(/* @__PURE__ */ new Map());
-  const resourceNavigationIndexRef = useRef9(/* @__PURE__ */ new Map());
-  const conflictHighlightTimeoutRef = useRef9(null);
-  const [isCreatingResource, setIsCreatingResource] = useState9(false);
-  const [creatingResourceGroupType, setCreatingResourceGroupType] = useState9(null);
-  const [activeConflictItemId, setActiveConflictItemId] = useState9(null);
-  const [resourceColumnHasRightShadow, setResourceColumnHasRightShadow] = useState9(false);
-  const [resourceColumnWidthOverrides, setResourceColumnWidthOverrides] = useState9(() => normalizeResourceColumnWidthMap(resourceTableColumnWidths));
+  const scrollContainerRef = useRef10(null);
+  const gridRef = useRef10(null);
+  const panStateRef = useRef10(null);
+  const resourceColumnResizeRef = useRef10(null);
+  const conflictNavigationIndexRef = useRef10(/* @__PURE__ */ new Map());
+  const resourceNavigationIndexRef = useRef10(/* @__PURE__ */ new Map());
+  const conflictHighlightTimeoutRef = useRef10(null);
+  const [isCreatingResource, setIsCreatingResource] = useState10(false);
+  const [creatingResourceGroupType, setCreatingResourceGroupType] = useState10(null);
+  const [activeConflictItemId, setActiveConflictItemId] = useState10(null);
+  const [resourceColumnHasRightShadow, setResourceColumnHasRightShadow] = useState10(false);
+  const [resourceColumnWidthOverrides, setResourceColumnWidthOverrides] = useState10(() => normalizeResourceColumnWidthMap(resourceTableColumnWidths));
   const validItems = useMemo10(() => collectValidItems(resources), [resources]);
   const dateRange = useMemo10(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = useMemo10(() => {
@@ -11240,7 +11472,7 @@ function ResourceTimelineChart({
     [customDays, isWeekend3]
   );
   const gridWidth = useMemo10(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
-  useEffect8(() => {
+  useEffect9(() => {
     setResourceColumnWidthOverrides(normalizeResourceColumnWidthMap(resourceTableColumnWidths));
   }, [resourceTableColumnWidths]);
   const resolvedResourceColumnWidths = useMemo10(
@@ -11296,7 +11528,7 @@ function ResourceTimelineChart({
   );
   const canAddResource = enableAddResource && Boolean(onAddResource);
   const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
-  const [collapsedResourceGroups, setCollapsedResourceGroups] = useState9(/* @__PURE__ */ new Set());
+  const [collapsedResourceGroups, setCollapsedResourceGroups] = useState10(/* @__PURE__ */ new Set());
   const updateResourceColumnWidth = useCallback8((columnId, width) => {
     setResourceColumnWidthOverrides((prev) => {
       if (prev[columnId] === width) {
@@ -11307,7 +11539,7 @@ function ResourceTimelineChart({
       return next;
     });
   }, [onResourceTableColumnWidthsChange]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleMouseMove = (event) => {
       const resizeState = resourceColumnResizeRef.current;
       if (!resizeState) {
@@ -11576,7 +11808,7 @@ function ResourceTimelineChart({
     weekendPredicate,
     onResourceItemMove
   });
-  useEffect8(() => {
+  useEffect9(() => {
     const container = scrollContainerRef.current;
     if (!container) return;
     const updateShadow = () => {
@@ -11616,7 +11848,7 @@ function ResourceTimelineChart({
     container.style.cursor = "grabbing";
     event.preventDefault();
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const handlePanMove = (event) => {
       const pan = panStateRef.current;
       const container = scrollContainerRef.current;
@@ -11645,7 +11877,7 @@ function ResourceTimelineChart({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, [allowVerticalPan]);
-  useEffect8(() => {
+  useEffect9(() => {
     const nextNavigation = /* @__PURE__ */ new Map();
     for (const [resourceId, resourceItems] of itemsByResourceId.entries()) {
       if (resourceItems.length === 0) {
@@ -11655,7 +11887,7 @@ function ResourceTimelineChart({
     }
     resourceNavigationIndexRef.current = nextNavigation;
   }, [itemsByResourceId]);
-  useEffect8(() => {
+  useEffect9(() => {
     return () => {
       if (conflictHighlightTimeoutRef.current) {
         window.clearTimeout(conflictHighlightTimeoutRef.current);
@@ -12075,7 +12307,7 @@ function ResourceTimelineChart({
 }
 
 // src/components/TableMatrix/TableMatrix.tsx
-import { useLayoutEffect, useMemo as useMemo11, useRef as useRef10, useState as useState10 } from "react";
+import { useLayoutEffect, useMemo as useMemo11, useRef as useRef11, useState as useState11 } from "react";
 import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var AUTO_COLUMN_MIN_WIDTH = 72;
 var AUTO_COLUMN_MAX_WIDTH = 180;
@@ -12142,8 +12374,8 @@ function TableMatrix({
   filterMode = "highlight",
   visibleRowIndices
 }) {
-  const measureRef = useRef10(null);
-  const [measuredAutoWidths, setMeasuredAutoWidths] = useState10([]);
+  const measureRef = useRef11(null);
+  const [measuredAutoWidths, setMeasuredAutoWidths] = useState11([]);
   const hasAutoWidthColumns = useMemo11(
     () => columns.some((column) => typeof column.width !== "number"),
     [columns]
@@ -12443,7 +12675,7 @@ function TableMatrix({
 }
 
 // src/components/PlanFactMatrix/PlanFactMatrix.tsx
-import React16, { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo12, useRef as useRef11, useState as useState11 } from "react";
+import React16, { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo12, useRef as useRef12, useState as useState12 } from "react";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var DAY_MS5 = 24 * 60 * 60 * 1e3;
 function joinClasses2(...values) {
@@ -12535,9 +12767,9 @@ function PlanFactCellEditor({
   onCommitRange,
   onCancel
 }) {
-  const [draft, setDraft] = useState11(startValue ?? (value === void 0 ? "" : String(value)));
-  const inputRef = useRef11(null);
-  useEffect9(() => {
+  const [draft, setDraft] = useState12(startValue ?? (value === void 0 ? "" : String(value)));
+  const inputRef = useRef12(null);
+  useEffect10(() => {
     inputRef.current?.focus();
     if (startValue === void 0) {
       inputRef.current?.select();
@@ -12890,18 +13122,18 @@ function PlanFactMatrix({
   todayDateIndex,
   isCustomWeekend
 }) {
-  const [activeCell, setActiveCell] = useState11(null);
-  const [editingCell, setEditingCell] = useState11(null);
-  const [selectedRange, setSelectedRange] = useState11(null);
-  const [fillRange, setFillRange] = useState11(null);
-  const [overflowTooltip, setOverflowTooltip] = useState11(null);
-  const isSelectingRef = useRef11(false);
-  const isFillDraggingRef = useRef11(false);
-  const didDragSelectRef = useRef11(false);
-  const pendingHoverCellRef = useRef11(null);
-  const hoverFrameRef = useRef11(null);
-  const rootRef = useRef11(null);
-  const bodyRef = useRef11(null);
+  const [activeCell, setActiveCell] = useState12(null);
+  const [editingCell, setEditingCell] = useState12(null);
+  const [selectedRange, setSelectedRange] = useState12(null);
+  const [fillRange, setFillRange] = useState12(null);
+  const [overflowTooltip, setOverflowTooltip] = useState12(null);
+  const isSelectingRef = useRef12(false);
+  const isFillDraggingRef = useRef12(false);
+  const didDragSelectRef = useRef12(false);
+  const pendingHoverCellRef = useRef12(null);
+  const hoverFrameRef = useRef12(null);
+  const rootRef = useRef12(null);
+  const bodyRef = useRef12(null);
   const totalWidth = dateRange.length * dayWidth;
   const subrowHeight = rowHeight / 2;
   const renderedRowIndices = useMemo12(
@@ -13307,7 +13539,7 @@ function PlanFactMatrix({
     onTaskSelect?.(nextCell.taskId);
     focusCell(selectedRange?.anchor ?? cell);
   }, [dateRange.length, focusCell, onTaskSelect, parentTaskIds, selectedRange, tasks]);
-  useEffect9(() => {
+  useEffect10(() => {
     const endSelection = () => {
       let pendingFillRange = null;
       if (hoverFrameRef.current !== null) {
@@ -13330,12 +13562,12 @@ function PlanFactMatrix({
       window.removeEventListener("mouseup", endSelection);
     };
   }, [applyFillRange, flushPendingHoverCell]);
-  useEffect9(() => () => {
+  useEffect10(() => () => {
     if (hoverFrameRef.current !== null) {
       window.cancelAnimationFrame(hoverFrameRef.current);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeyDown = (event) => {
       if (event.key !== "Escape") return;
       clearSelection();
@@ -14138,31 +14370,31 @@ function TaskGanttChartInner(props, ref) {
   const onMatrixCellClick = isTableMatrixMode ? props.onMatrixCellClick : void 0;
   const matrixDateOverlay = isTableMatrixMode ? props.matrixDateOverlay : void 0;
   const onPlanFactCellCommit = isPlanFactMode ? props.onPlanFactCellCommit : void 0;
-  const containerRef = useRef12(null);
-  const scrollContainerRef = useRef12(null);
-  const scrollContentRef = useRef12(null);
-  const clearSelectedTaskTimeoutRef = useRef12(null);
-  const hasAutoScrolledToTodayRef = useRef12(false);
-  const previewPositionStoreRef = useRef12(null);
-  const renderedTaskIdsRef = useRef12(/* @__PURE__ */ new Set());
+  const containerRef = useRef13(null);
+  const scrollContainerRef = useRef13(null);
+  const scrollContentRef = useRef13(null);
+  const clearSelectedTaskTimeoutRef = useRef13(null);
+  const hasAutoScrolledToTodayRef = useRef13(false);
+  const previewPositionStoreRef = useRef13(null);
+  const renderedTaskIdsRef = useRef13(/* @__PURE__ */ new Set());
   if (previewPositionStoreRef.current === null) {
     previewPositionStoreRef.current = createTaskPreviewPositionStore();
   }
   const previewPositionStore = previewPositionStoreRef.current;
-  const [selectedTaskId, setSelectedTaskId] = useState12(null);
-  const [taskListHasRightShadow, setTaskListHasRightShadow] = useState12(false);
-  const [internalTaskDateChangeMode, setInternalTaskDateChangeMode] = useState12("preserve-duration");
-  const [scrollViewport, setScrollViewport] = useState12(() => ({
+  const [selectedTaskId, setSelectedTaskId] = useState13(null);
+  const [taskListHasRightShadow, setTaskListHasRightShadow] = useState13(false);
+  const [internalTaskDateChangeMode, setInternalTaskDateChangeMode] = useState13("preserve-duration");
+  const [scrollViewport, setScrollViewport] = useState13(() => ({
     scrollTop: 0,
     viewportHeight: getInitialScrollViewportHeight(containerHeight, headerHeight + 1)
   }));
-  const [forceFullRenderForPrint, setForceFullRenderForPrint] = useState12(false);
-  const [planFactDateWindow, setPlanFactDateWindow] = useState12({ start: 0, end: 0 });
-  const [selectedChip, setSelectedChip] = useState12(null);
-  const [dependencyCreationDrag, setDependencyCreationDrag] = useState12(null);
-  const dependencyCreationRef = useRef12(null);
-  const [dependencyCreationError, setDependencyCreationError] = useState12(null);
-  const [dependencyLineMenu, setDependencyLineMenu] = useState12(null);
+  const [forceFullRenderForPrint, setForceFullRenderForPrint] = useState13(false);
+  const [planFactDateWindow, setPlanFactDateWindow] = useState13({ start: 0, end: 0 });
+  const [selectedChip, setSelectedChip] = useState13(null);
+  const [dependencyCreationDrag, setDependencyCreationDrag] = useState13(null);
+  const dependencyCreationRef = useRef13(null);
+  const [dependencyCreationError, setDependencyCreationError] = useState13(null);
+  const [dependencyLineMenu, setDependencyLineMenu] = useState13(null);
   const getDependencyPortPoint = useCallback10((element, chartRect) => {
     const rect = element.getBoundingClientRect();
     const side = element.getAttribute("data-port-side");
@@ -14196,7 +14428,7 @@ function TaskGanttChartInner(props, ref) {
     dependencyCreationRef.current = nextDrag;
     setDependencyCreationDrag(nextDrag);
   }, [disableDependencyEditing, getDependencyPortPoint]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!dependencyCreationDrag) return;
     const handlePointerMove = (event) => {
       const activeDrag = dependencyCreationRef.current;
@@ -14280,12 +14512,12 @@ function TaskGanttChartInner(props, ref) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [businessDays, customDays, dependencyCreationDrag !== null, getDependencyPortPoint, getVisualDependencyType, isWeekend3, onTasksChange, tasks]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!dependencyCreationError) return;
     const timeout = window.setTimeout(() => setDependencyCreationError(null), 3e3);
     return () => window.clearTimeout(timeout);
   }, [dependencyCreationError]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!dependencyLineMenu) return;
     const closeMenu = (event) => {
       const target = event.target;
@@ -14323,10 +14555,10 @@ function TaskGanttChartInner(props, ref) {
     setSelectedChip(null);
     setDependencyLineMenu(null);
   }, [dependencyLineMenu, onTasksChange, tasks]);
-  const [activeTimelineTooltip, setActiveTimelineTooltip] = useState12(null);
-  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState12(/* @__PURE__ */ new Set());
-  const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
-  const [editingTaskId, setEditingTaskId] = useState12(null);
+  const [activeTimelineTooltip, setActiveTimelineTooltip] = useState13(null);
+  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState13(/* @__PURE__ */ new Set());
+  const [expandedCompositeIds, setExpandedCompositeIds] = useState13(/* @__PURE__ */ new Set());
+  const [editingTaskId, setEditingTaskId] = useState13(null);
   const taskDateChangeMode = externalTaskDateChangeMode ?? internalTaskDateChangeMode;
   const handleTaskDateChangeMode = externalOnTaskDateChangeModeChange ?? setInternalTaskDateChangeMode;
   const resolvedRowContentLines = isPlanFactMode ? Math.max(2, Math.floor(rowContentLines)) : Math.max(1, Math.floor(rowContentLines));
@@ -14335,14 +14567,43 @@ function TaskGanttChartInner(props, ref) {
     () => Math.max(rowHeight, 10 + resolvedRowContentLines * 18),
     [resolvedRowContentLines, rowHeight]
   );
-  const normalizedTasks = useMemo13(() => normalizeHierarchyTasks(tasks), [tasks]);
+  const normalizedTasks = useMemo13(() => {
+    const ordered = normalizeHierarchyTasks(tasks);
+    const ranges = /* @__PURE__ */ new Map();
+    for (const task of ordered) {
+      if (!task.parentId) continue;
+      const start = parseUTCDate(task.startDate).getTime();
+      const end = parseUTCDate(task.endDate).getTime();
+      const range = ranges.get(task.parentId);
+      ranges.set(task.parentId, {
+        start: Math.min(range?.start ?? start, start),
+        end: Math.max(range?.end ?? end, end)
+      });
+    }
+    return ordered.map((task) => {
+      const range = task.composite ? ranges.get(task.id) : void 0;
+      return range ? {
+        ...task,
+        startDate: new Date(range.start).toISOString().slice(0, 10),
+        endDate: new Date(range.end).toISOString().slice(0, 10)
+      } : task;
+    });
+  }, [tasks]);
+  const collapsedParentIds = useMemo13(() => {
+    if (externalCollapsedParentIds) return externalCollapsedParentIds;
+    const ids = new Set(internalCollapsedParentIds);
+    for (const task of normalizedTasks) {
+      if (task.composite && !expandedCompositeIds.has(task.id)) ids.add(task.id);
+    }
+    return ids;
+  }, [externalCollapsedParentIds, internalCollapsedParentIds, normalizedTasks, expandedCompositeIds]);
   const controlledScheduleIdentity = useMemo13(
     () => buildControlledScheduleIdentity(normalizedTasks),
     [normalizedTasks]
   );
-  const previousControlledScheduleIdentityRef = useRef12(null);
+  const previousControlledScheduleIdentityRef = useRef13(null);
   const controlledScheduleChanged = previousControlledScheduleIdentityRef.current !== null && previousControlledScheduleIdentityRef.current !== controlledScheduleIdentity;
-  const [previewTasksById, setPreviewTasksById] = useState12(/* @__PURE__ */ new Map());
+  const [previewTasksById, setPreviewTasksById] = useState13(/* @__PURE__ */ new Map());
   const previewNormalizedTasks = useMemo13(() => {
     if (controlledScheduleChanged || previewTasksById.size === 0) return normalizedTasks;
     return normalizedTasks.map((task) => previewTasksById.get(task.id) ?? task);
@@ -14382,8 +14643,8 @@ function TaskGanttChartInner(props, ref) {
     },
     [dateRangeTasks, explicitDateRange, isPlanFactMode]
   );
-  const [validationResult, setValidationResult] = useState12(null);
-  const [cascadeOverrides, setCascadeOverrides] = useState12(/* @__PURE__ */ new Map());
+  const [validationResult, setValidationResult] = useState13(null);
+  const [cascadeOverrides, setCascadeOverrides] = useState13(/* @__PURE__ */ new Map());
   const gridWidth = useMemo13(
     () => Math.round(dateRange.length * dayWidth),
     [dateRange.length, dayWidth]
@@ -14415,6 +14676,23 @@ function TaskGanttChartInner(props, ref) {
     }
     return tasks2;
   }, [normalizedTasks, collapsedParentIds, filterMode, taskFilter, criticalPathMode, criticalTaskIds]);
+  const compositeRowLayout = useMemo13(() => {
+    const compositeIds = new Set(normalizedTasks.filter((task) => task.composite).map((task) => task.id));
+    const tops = [];
+    const heights = [];
+    let top = 0;
+    for (const task of visibleTasks) {
+      tops.push(top);
+      const height = task.parentId && compositeIds.has(task.parentId) ? Math.min(effectiveRowHeight, 22) : effectiveRowHeight;
+      heights.push(height);
+      top += height;
+    }
+    return { tops, heights, totalHeight: top };
+  }, [normalizedTasks, visibleTasks, effectiveRowHeight]);
+  const compositeParentsById = useMemo13(
+    () => new Map(normalizedTasks.filter((task) => task.composite).map((task) => [task.id, task])),
+    [normalizedTasks]
+  );
   const matchedTaskIds = useMemo13(() => {
     if (!taskFilter) return /* @__PURE__ */ new Set();
     return new Set(visibleTasks.filter(taskFilter).map((task) => task.id));
@@ -14436,8 +14714,8 @@ function TaskGanttChartInner(props, ref) {
     return mergedHighlightedTaskIds;
   }, [filterMode, highlightedTaskIds, matchedTaskIds, criticalPathMode, criticalTaskIds]);
   const totalGridHeight = useMemo13(
-    () => (visibleTasks.length + Math.max(0, Math.floor(skeletonRowCount))) * effectiveRowHeight,
-    [effectiveRowHeight, skeletonRowCount, visibleTasks.length]
+    () => compositeRowLayout.totalHeight + Math.max(0, Math.floor(skeletonRowCount)) * effectiveRowHeight,
+    [compositeRowLayout.totalHeight, effectiveRowHeight, skeletonRowCount]
   );
   const timelineHeaderHeight = headerHeight + 1;
   const tableBodyMinHeight = useMemo13(() => {
@@ -14475,7 +14753,7 @@ function TaskGanttChartInner(props, ref) {
       return markerDate >= rangeStartMs && markerDate <= rangeEndMs;
     });
   }, [dateRange, isTableMatrixMode, timelineMarkers]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isTableMatrixMode) return;
     if (hasAutoScrolledToTodayRef.current) return;
     const container = scrollContainerRef.current;
@@ -14489,7 +14767,7 @@ function TaskGanttChartInner(props, ref) {
     container.scrollLeft = Math.max(0, scrollLeft);
     hasAutoScrolledToTodayRef.current = true;
   }, [dateRange, dayWidth, isTableMatrixMode]);
-  useEffect10(() => {
+  useEffect11(() => {
     const container = scrollContainerRef.current;
     if (!container) return;
     let frameId = null;
@@ -14564,7 +14842,7 @@ function TaskGanttChartInner(props, ref) {
       const rowIndex = visibleTasks.findIndex((visibleTask) => visibleTask.id === taskId);
       if (rowIndex === -1) return;
       const paddedRowIndex = Math.max(0, rowIndex - SCROLL_TO_ROW_CONTEXT_ROWS);
-      container2.scrollTo({ top: Math.max(0, effectiveRowHeight * paddedRowIndex), behavior: "smooth" });
+      container2.scrollTo({ top: Math.max(0, compositeRowLayout.tops[paddedRowIndex] ?? 0), behavior: "smooth" });
       setSelectedTaskId(taskId);
       return;
     }
@@ -14583,7 +14861,7 @@ function TaskGanttChartInner(props, ref) {
     const taskOffset = taskIndex * dayWidth;
     const scrollLeft = Math.round(taskOffset - dayWidth * 2);
     container.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
-  }, [dateRange, dayWidth, effectiveRowHeight, isTableMatrixMode, tasks, visibleTasks]);
+  }, [dateRange, dayWidth, effectiveRowHeight, compositeRowLayout, isTableMatrixMode, tasks, visibleTasks]);
   const scrollToRow = useCallback10((taskId, options = {}) => {
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -14592,7 +14870,7 @@ function TaskGanttChartInner(props, ref) {
     const rowIndex = visibleTasks.findIndex((visibleTask) => visibleTask.id === task.id);
     if (rowIndex === -1) return;
     const paddedRowIndex = Math.max(0, rowIndex - SCROLL_TO_ROW_CONTEXT_ROWS);
-    const scrollTop = Math.max(0, effectiveRowHeight * paddedRowIndex);
+    const scrollTop = Math.max(0, compositeRowLayout.tops[paddedRowIndex] ?? 0);
     const {
       select = true,
       behavior = "smooth",
@@ -14612,10 +14890,10 @@ function TaskGanttChartInner(props, ref) {
       }
     }
     container.scrollTo({ top: scrollTop, behavior });
-  }, [effectiveRowHeight, tasks, visibleTasks]);
-  const [dragGuideLines, setDragGuideLines] = useState12(null);
-  const [draggedTaskOverride, setDraggedTaskOverride] = useState12(null);
-  useEffect10(() => {
+  }, [effectiveRowHeight, compositeRowLayout, tasks, visibleTasks]);
+  const [dragGuideLines, setDragGuideLines] = useState13(null);
+  const [draggedTaskOverride, setDraggedTaskOverride] = useState13(null);
+  useEffect11(() => {
     const previousIdentity = previousControlledScheduleIdentityRef.current;
     previousControlledScheduleIdentityRef.current = controlledScheduleIdentity;
     if (previousIdentity === null || previousIdentity === controlledScheduleIdentity) {
@@ -14627,21 +14905,21 @@ function TaskGanttChartInner(props, ref) {
     setDraggedTaskOverride((current) => current === null ? current : null);
     setDragGuideLines((current) => current === null ? current : null);
   }, [controlledScheduleIdentity, previewPositionStore]);
-  useEffect10(() => {
+  useEffect11(() => {
     const result = validateDependencies(tasks);
     setValidationResult(result);
     onValidateDependencies?.(result);
   }, [tasks, onValidateDependencies]);
-  useEffect10(() => () => {
+  useEffect11(() => () => {
     if (clearSelectedTaskTimeoutRef.current !== null) {
       window.clearTimeout(clearSelectedTaskTimeoutRef.current);
     }
     previewPositionStore.clear();
   }, [previewPositionStore]);
   const handleTaskChange = useCallback10((updatedTasks, durationEdit) => {
-    const updatedTask = updatedTasks[0];
+    let updatedTask = updatedTasks[0];
     if (!updatedTask) return;
-    const originalTask = tasks.find((t) => t.id === updatedTask.id);
+    const originalTask = normalizedTasks.find((t) => t.id === updatedTask.id);
     if (!originalTask) {
       onTasksChange?.(updatedTasks);
       if (editingTaskId === updatedTask.id) {
@@ -14654,6 +14932,8 @@ function TaskGanttChartInner(props, ref) {
     const newStart = new Date(updatedTask.startDate);
     const newEnd = new Date(updatedTask.endDate);
     const datesChanged = origStart.getTime() !== newStart.getTime() || origEnd.getTime() !== newEnd.getTime();
+    const isCompositeDetail = datesChanged && tasks.some((task) => task.id === updatedTask.parentId && task.composite);
+    if (isCompositeDetail) updatedTask = { ...updatedTask, synced: false };
     if (!datesChanged) {
       if (updatedTasks.length > 1) {
         onTasksChange?.(updatedTasks);
@@ -14715,7 +14995,7 @@ function TaskGanttChartInner(props, ref) {
         }
         return;
       }
-      const movedParentCascade = disableConstraints ? [updatedTask] : universalCascade(updatedTask, newStart, newEnd, tasks, businessDays, isCustomWeekend);
+      const movedParentCascade = disableConstraints && !originalTask.composite ? [updatedTask] : universalCascade(updatedTask, newStart, newEnd, normalizedTasks, businessDays, isCustomWeekend);
       if (onScheduleIntent) {
         onScheduleIntent({
           type: "move_task",
@@ -14739,7 +15019,8 @@ function TaskGanttChartInner(props, ref) {
           taskId: updatedTask.id,
           duration: durationEdit.duration,
           anchor: durationEdit.anchor,
-          taskType: updatedTask.type ?? "task"
+          taskType: updatedTask.type ?? "task",
+          ...isCompositeDetail ? { localOverride: true } : {}
         });
       } else {
         onTasksChange?.(cascadedTasks);
@@ -14751,7 +15032,8 @@ function TaskGanttChartInner(props, ref) {
         onScheduleIntent({
           type: "move_task",
           taskId: updatedTask.id,
-          startDate: newStart.toISOString().split("T")[0]
+          startDate: newStart.toISOString().split("T")[0],
+          ...isCompositeDetail ? { localOverride: true } : {}
         });
       } else {
         const anchor = startChanged ? "end" : "start";
@@ -14759,13 +15041,14 @@ function TaskGanttChartInner(props, ref) {
           type: "resize_task",
           taskId: updatedTask.id,
           anchor,
-          date: (startChanged ? newStart : newEnd).toISOString().split("T")[0]
+          date: (startChanged ? newStart : newEnd).toISOString().split("T")[0],
+          ...isCompositeDetail ? { localOverride: true } : {}
         });
       }
     } else {
       onTasksChange?.(cascadedTasks);
     }
-  }, [tasks, onTasksChange, onScheduleIntent, disableConstraints, editingTaskId, businessDays, isCustomWeekend, onSubtreeScaleResult]);
+  }, [tasks, normalizedTasks, onTasksChange, onScheduleIntent, disableConstraints, editingTaskId, businessDays, isCustomWeekend, onSubtreeScaleResult]);
   const handleTaskDurationChange = useCallback10((task, duration) => {
     const updatedTask = {
       ...task,
@@ -14879,12 +15162,25 @@ function TaskGanttChartInner(props, ref) {
     if (scrollViewport.viewportHeight <= 0) {
       return Array.from({ length: totalTasks }, (_, index) => index);
     }
-    const viewportRows = Math.max(1, Math.ceil(scrollViewport.viewportHeight / effectiveRowHeight));
-    const rangeStart = Math.max(0, Math.floor(scrollViewport.scrollTop / effectiveRowHeight) - TASK_ROW_OVERSCAN);
-    const rangeEnd = Math.min(
-      totalTasks - 1,
-      rangeStart + viewportRows + TASK_ROW_OVERSCAN * 2 - 1
-    );
+    let low = 0;
+    let high = totalTasks;
+    while (low < high) {
+      const middle = low + high >>> 1;
+      if (compositeRowLayout.tops[middle] + compositeRowLayout.heights[middle] < scrollViewport.scrollTop) low = middle + 1;
+      else high = middle;
+    }
+    const first = Math.min(low, totalTasks - 1);
+    const viewportBottom = scrollViewport.scrollTop + scrollViewport.viewportHeight;
+    low = first;
+    high = totalTasks;
+    while (low < high) {
+      const middle = low + high >>> 1;
+      if (compositeRowLayout.tops[middle] < viewportBottom) low = middle + 1;
+      else high = middle;
+    }
+    const last = Math.min(low, totalTasks - 1);
+    const rangeStart = Math.max(0, first - TASK_ROW_OVERSCAN);
+    const rangeEnd = Math.min(totalTasks - 1, last + TASK_ROW_OVERSCAN);
     const indices = /* @__PURE__ */ new Set();
     for (let index = rangeStart; index <= rangeEnd; index += 1) {
       indices.add(index);
@@ -14896,7 +15192,7 @@ function TaskGanttChartInner(props, ref) {
       }
     }
     return Array.from(indices).sort((left, right) => left - right);
-  }, [effectiveRowHeight, forceFullRenderForPrint, forcedRenderedTaskIds, scrollViewport, visibleTaskIndexMap, visibleTasks.length]);
+  }, [compositeRowLayout, forceFullRenderForPrint, forcedRenderedTaskIds, scrollViewport, visibleTaskIndexMap, visibleTasks.length]);
   const visiblePlanFactDateIndices = useMemo13(() => {
     if (forceFullRenderForPrint) {
       return void 0;
@@ -14933,7 +15229,7 @@ function TaskGanttChartInner(props, ref) {
   const handleTaskSelect = useCallback10((taskId) => {
     setSelectedTaskId(taskId);
   }, []);
-  const hoveredRowElementsRef = useRef12([]);
+  const hoveredRowElementsRef = useRef13([]);
   const clearHoveredRows = useCallback10(() => {
     for (const element of hoveredRowElementsRef.current) {
       element.classList.remove("gantt-tl-row-hovered", "gantt-tr-row-hovered", "gantt-mx-row-hovered", "gantt-pf-row-hovered");
@@ -14973,7 +15269,16 @@ function TaskGanttChartInner(props, ref) {
     }
     applyHoveredRows(taskId);
   }, [applyHoveredRows]);
-  const handleToggleCollapse = externalOnToggleCollapse ?? useCallback10((parentId) => {
+  const handleToggleCollapse = externalOnToggleCollapse ?? ((parentId) => {
+    if (normalizedTasks.some((task) => task.id === parentId && task.composite)) {
+      setExpandedCompositeIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(parentId)) next.delete(parentId);
+        else next.add(parentId);
+        return next;
+      });
+      return;
+    }
     setInternalCollapsedParentIds((prev) => {
       const next = new Set(prev);
       if (next.has(parentId)) {
@@ -14983,7 +15288,14 @@ function TaskGanttChartInner(props, ref) {
       }
       return next;
     });
-  }, []);
+  });
+  const lastCompositeBarToggleRef = useRef13(null);
+  const handleCompositeBarToggle = (taskId, source) => {
+    const now = Date.now();
+    if (source === "click" && lastCompositeBarToggleRef.current?.source === "release" && lastCompositeBarToggleRef.current.id === taskId && now - lastCompositeBarToggleRef.current.time < 150) return;
+    lastCompositeBarToggleRef.current = { id: taskId, time: now, source };
+    handleToggleCollapse(taskId);
+  };
   const allParentIds = useMemo13(() => {
     const taskIds = new Set(normalizedTasks.map((task) => task.id));
     return new Set(normalizedTasks.map((task) => task.parentId).filter((parentId) => Boolean(parentId && taskIds.has(parentId))));
@@ -14991,11 +15303,13 @@ function TaskGanttChartInner(props, ref) {
   const handleCollapseAll = useCallback10(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(allParentIds);
+    setExpandedCompositeIds(/* @__PURE__ */ new Set());
   }, [allParentIds, externalCollapsedParentIds]);
   const handleExpandAll = useCallback10(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(/* @__PURE__ */ new Set());
-  }, [externalCollapsedParentIds]);
+    setExpandedCompositeIds(new Set(normalizedTasks.filter((task) => task.composite).map((task) => task.id)));
+  }, [externalCollapsedParentIds, normalizedTasks]);
   const exportToPdf = useCallback10(async (options) => {
     const sourceContainer = containerRef.current;
     if (!sourceContainer || typeof window === "undefined" || typeof document === "undefined") {
@@ -15167,7 +15481,7 @@ function TaskGanttChartInner(props, ref) {
       onTasksChange?.(changedTasks);
     }
   }, [tasks, onTasksChange, onUngroupTask]);
-  const panStateRef = useRef12(null);
+  const panStateRef = useRef13(null);
   const handlePanStart = useCallback10((e) => {
     if (e.button !== 0) return;
     const target = e.target;
@@ -15192,7 +15506,7 @@ function TaskGanttChartInner(props, ref) {
     container.style.cursor = "grabbing";
     e.preventDefault();
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const flushPanMove = () => {
       const pan = panStateRef.current;
       if (!pan?.active) return;
@@ -15260,6 +15574,8 @@ function TaskGanttChartInner(props, ref) {
                   {
                     tasks: normalizedTasks,
                     rowHeight: effectiveRowHeight,
+                    rowTops: compositeRowLayout.tops,
+                    rowHeights: compositeRowLayout.heights,
                     headerHeight,
                     taskListWidth,
                     onTasksChange: handleTaskChange,
@@ -15454,6 +15770,8 @@ function TaskGanttChartInner(props, ref) {
                                 gridWidth: renderGridWidth,
                                 totalHeight: totalGridHeight,
                                 rowIndexByTaskId: visibleTaskIndexMap,
+                                rowTops: compositeRowLayout.tops,
+                                rowHeights: compositeRowLayout.heights,
                                 dragOverrides: dependencyOverrides,
                                 selectedDep: selectedChip,
                                 businessDays,
@@ -15540,10 +15858,10 @@ function TaskGanttChartInner(props, ref) {
                               {
                                 style: {
                                   position: "absolute",
-                                  top: `${index * effectiveRowHeight}px`,
+                                  top: `${compositeRowLayout.tops[index]}px`,
                                   left: 0,
                                   right: 0,
-                                  height: `${effectiveRowHeight}px`
+                                  height: `${compositeRowLayout.heights[index]}px`
                                 },
                                 children: /* @__PURE__ */ jsx21(
                                   TaskRow_default,
@@ -15551,7 +15869,9 @@ function TaskGanttChartInner(props, ref) {
                                     task,
                                     monthStart,
                                     dayWidth,
-                                    rowHeight: effectiveRowHeight,
+                                    rowHeight: compositeRowLayout.heights[index],
+                                    compactDetail: compositeRowLayout.heights[index] < effectiveRowHeight,
+                                    compositeParentColor: task.parentId ? compositeParentsById.get(task.parentId)?.color : void 0,
                                     onTasksChange: handleTaskChange,
                                     onDragStateChange: (state) => {
                                       if (state.isDragging) {
@@ -15588,7 +15908,9 @@ function TaskGanttChartInner(props, ref) {
                                     isDependencyDragActive: dependencyCreationDrag !== null,
                                     viewMode,
                                     showTaskDateLabels,
-                                    showTaskNames
+                                    showTaskNames,
+                                    onCompositeToggle: task.composite ? (source) => handleCompositeBarToggle(task.id, source) : void 0,
+                                    compositeExpanded: task.composite ? !collapsedParentIds.has(task.id) : void 0
                                   }
                                 )
                               },
@@ -15601,6 +15923,7 @@ function TaskGanttChartInner(props, ref) {
                                 rowHeight: effectiveRowHeight,
                                 variant: "chart",
                                 startIndex: visibleTasks.length,
+                                startTop: compositeRowLayout.totalHeight,
                                 chartDayWidth: dayWidth,
                                 chartStartDayOffset: todayInRange ? Math.max(0, todayIndex + Math.floor(Number.isFinite(skeletonStartOffsetDays) ? skeletonStartOffsetDays : 0)) : 0,
                                 chartStartJitterDays: skeletonStartJitterDays