gantt-lib 0.135.9 → 0.136.1

package/dist/index.js

@@ -3306,6 +3306,7 @@ var TimeScaleHeader_default = TimeScaleHeader;
 
 // src/components/TaskRow/TaskRow.tsx
 var import_react3 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 
 // src/utils/geometry.ts
 var getUTCDayDifference = (date1, date2) => {
@@ -4413,12 +4414,36 @@ var useTaskDrag = (options) => {
 
 // src/components/TaskRow/TaskRow.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var COMPOSITE_SEGMENT_CUT_MIN_PX = 10;
+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 && prevProps.showCompositeSegments === nextProps.showCompositeSegments;
 };
 var TaskRow = import_react3.default.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, showCompositeSegments: showCompositeSegmentsProp = true, onCompositeToggle, compactDetail = false, compositeParentColor, compositeExpanded = false }) => {
     const defaultParentBarColor = "#782FC4";
+    const [showCompositePreview, setShowCompositePreview] = (0, import_react3.useState)(false);
+    const [compositePreviewPosition, setCompositePreviewPosition] = (0, import_react3.useState)(null);
+    const pointerStart = (0, import_react3.useRef)(null);
+    const suppressCompositeClick = (0, import_react3.useRef)(false);
+    const compositeChildren = (0, import_react3.useMemo)(
+      () => task.composite ? (allTasks ?? []).filter((child) => child.parentId === task.id) : [],
+      [allTasks, task.composite, task.id]
+    );
+    (0, import_react3.useEffect)(() => {
+      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 = (0, import_react3.useMemo)(() => normalizeTaskDatesForType(task), [task]);
     const milestone = (0, import_react3.useMemo)(() => isMilestoneTask(normalizedTask), [normalizedTask]);
@@ -4435,6 +4460,7 @@ var TaskRow = import_react3.default.memo(
     const isParent = (0, import_react3.useMemo)(() => {
       return allTasks ? isTaskParent(task.id, allTasks) : false;
     }, [allTasks, task.id]);
+    const isVisualParent = isParent && !task.composite;
     const childCount = (0, import_react3.useMemo)(() => {
       return allTasks ? getChildren(task.id, allTasks).length : 0;
     }, [allTasks, task.id]);
@@ -4480,19 +4506,19 @@ var TaskRow = import_react3.default.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 = (0, import_react3.useMemo)(() => {
       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 };
@@ -4503,7 +4529,7 @@ var TaskRow = import_react3.default.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,
@@ -4577,6 +4603,35 @@ var TaskRow = import_react3.default.memo(
     }, [displayLeft, dayWidth, milestoneGeometry.size]);
     const visualLeft = milestone ? displayMilestoneGeometry.left : displayLeft;
     const visualWidth = milestone ? displayMilestoneGeometry.size : displayWidth;
+    const compositeSegments = (0, import_react3.useMemo)(() => {
+      if (!task.composite || width <= 0) return [];
+      const laneEnds = [];
+      const segments2 = compositeChildren.map((child) => {
+        const segment = calculateTaskBar(parseUTCDate(child.startDate), parseUTCDate(child.endDate), monthStart, dayWidth);
+        let lane = Math.max(0, laneEnds.length - 1);
+        if (laneEnds.length > 0 && segment.left < laneEnds[lane]) {
+          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,
+          pxLeft: segment.left - left,
+          cut: false
+        };
+      });
+      const lastCutByLane = [];
+      for (const segment of [...segments2].sort((a, b) => a.pxLeft - b.pxLeft)) {
+        segment.cut = segment.pxLeft >= 1 && segment.pxLeft - (lastCutByLane[segment.lane] ?? 0) >= COMPOSITE_SEGMENT_CUT_MIN_PX;
+        if (segment.cut) lastCutByLane[segment.lane] = segment.pxLeft;
+      }
+      return segments2;
+    }, [task.composite, compositeChildren, monthStart, dayWidth, left, width, displayLeft]);
+    const compositeLaneCount = Math.max(1, ...compositeSegments.map((segment) => segment.lane + 1));
+    const shouldRenderCompositeSegments = showCompositeSegmentsProp && 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;
@@ -4594,17 +4649,20 @@ var TaskRow = import_react3.default.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__ */ (0, import_jsx_runtime2.jsxs)(
       "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-divider gantt-tr-divider-top" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gantt-tr-taskContainer", children: [
@@ -4622,7 +4680,11 @@ var TaskRow = import_react3.default.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,
@@ -4632,14 +4694,57 @@ var TaskRow = import_react3.default.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__ */ (0, import_jsx_runtime2.jsx)(
                     "div",
@@ -4648,14 +4753,42 @@ var TaskRow = import_react3.default.memo(
                       style: {
                         width: `${progressWidth}%`,
                         backgroundColor: progressColor,
-                        ...isParent && {
+                        ...isVisualParent && {
                           borderRadius: "var(--gantt-parent-bar-radius, 8px) 0 0 0"
                         }
                       }
                     }
                   ),
                   !milestone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "gantt-tr-resizeHandle gantt-tr-resizeHandleLeft" }),
-                  showDurationInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-taskDuration", children: isParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
+                  shouldRenderCompositeSegments && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gantt-tr-compositeSegments", "aria-hidden": "true", children: [
+                    compositeSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "gantt-tr-compositeSegment",
+                        style: {
+                          left: `${segment.left}%`,
+                          width: `${segment.width}%`,
+                          top: `${segment.lane / compositeLaneCount * 100}%`,
+                          height: `${100 / compositeLaneCount}%`
+                        }
+                      },
+                      segment.id
+                    )),
+                    compositeSegments.map((segment) => segment.cut ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "gantt-tr-compositeSegmentCut",
+                        style: {
+                          left: `${segment.left}%`,
+                          top: `${segment.lane / compositeLaneCount * 100}%`,
+                          height: `${100 / compositeLaneCount}%`
+                        }
+                      },
+                      `${segment.id}-cut`
+                    ) : null)
+                  ] }),
+                  task.composite && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-compositeHoverChevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: `gantt-tr-compositeChevron${compositeExpanded ? " gantt-tr-compositeChevron-open" : ""}`, viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 4 6 6-6 6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+                  showDurationInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-taskDuration", children: isVisualParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
                   progressWidth > 0 && showProgressInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gantt-tr-progressText", children: [
                     progressWidth,
                     "%"
@@ -4664,6 +4797,41 @@ var TaskRow = import_react3.default.memo(
                 ]
               }
             ),
+            task.composite && showCompositePreview && compositePreviewPosition && compositeChildren.length > 0 && !isDragging && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  className: "gantt-tr-compositePreview",
+                  style: { left: `${compositePreviewPosition.left}px`, top: `${compositePreviewPosition.top}px` },
+                  role: "tooltip",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gantt-tr-compositePreviewAxis", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: formatCompositePreviewDate(currentStartDate) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: formatCompositePreviewDate(currentEndDate) })
+                    ] }),
+                    compositeChildren.slice(0, 12).map((child) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "gantt-tr-compositePreviewRow", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: child.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-compositePreviewTrack", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                      "+",
+                      compositeChildren.length - 12
+                    ] })
+                  ]
+                }
+              ),
+              document.body
+            ),
             !disableDependencyEditing && onDependencyPortPointerDown && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
@@ -4672,7 +4840,7 @@ var TaskRow = import_react3.default.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",
@@ -4686,7 +4854,7 @@ var TaskRow = import_react3.default.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",
@@ -4725,6 +4893,14 @@ var TaskRow = import_react3.default.memo(
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
@@ -4734,7 +4910,6 @@ var TaskRow = import_react3.default.memo(
                   color: isParent ? task.color || defaultParentBarColor : barColor
                 },
                 children: [
-                  !showDurationInside && !milestone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "gantt-tr-externalDuration", children: isParent ? getChildCountLabel(childCount) : `${durationDays} \u0434` }),
                   progressWidth > 0 && !showProgressInside && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "gantt-tr-externalProgress", children: [
                     progressWidth,
                     "%"
@@ -5038,6 +5213,8 @@ var DependencyLines = import_react7.default.memo(({
   gridWidth,
   totalHeight,
   rowIndexByTaskId,
+  rowTops,
+  rowHeights,
   dragOverrides,
   selectedDep,
   criticalTaskIds,
@@ -5061,7 +5238,8 @@ var DependencyLines = import_react7.default.memo(({
         left: computed.left,
         right: computed.right,
         centerX: computed.centerX,
-        rowTop: rowIndex * rowHeight,
+        rowTop: rowTops?.[rowIndex] ?? rowIndex * rowHeight,
+        rowHeight: rowHeights?.[rowIndex] ?? rowHeight,
         isVirtual: false
       });
     });
@@ -5081,6 +5259,7 @@ var DependencyLines = import_react7.default.memo(({
           right: computed.right,
           centerX: computed.centerX,
           rowTop: ancestorPosition.rowTop,
+          rowHeight: ancestorPosition.rowHeight,
           isVirtual: true
         });
       }
@@ -5094,18 +5273,19 @@ var DependencyLines = import_react7.default.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 = (0, import_react7.useMemo)(() => {
     const result = detectCycles(tasksForCycleDetection);
@@ -5147,7 +5327,9 @@ var DependencyLines = import_react7.default.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;
@@ -5161,9 +5343,9 @@ var DependencyLines = import_react7.default.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;
@@ -6841,6 +7023,7 @@ var TaskListRow = import_react11.default.memo(
     taskListMenuCommands = [],
     hideTaskListRowActions = false,
     rowClassName,
+    compositeParentColor,
     getTaskListNamePrefixIcon,
     taskDateChangeMode = "preserve-duration",
     onTaskDateChangeModeChange,
@@ -6925,6 +7108,35 @@ var TaskListRow = import_react11.default.memo(
       [businessDays, weekendPredicate]
     );
     const isCollapsed = collapsedParentIds.has(task.id);
+    const [compositeIconMode, setCompositeIconMode] = (0, import_react11.useState)(
+      () => isCollapsed ? "composite" : "down"
+    );
+    const compositeIconModeRef = (0, import_react11.useRef)(compositeIconMode);
+    const [compositeIconAnimation, setCompositeIconAnimation] = (0, import_react11.useState)(null);
+    const [compositeIconAnimationPhase, setCompositeIconAnimationPhase] = (0, import_react11.useState)(null);
+    (0, import_react11.useEffect)(() => {
+      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 = (0, import_react11.useCallback)((columnDepth) => {
       return columnDepth % 2 === 0 ? "#93c5fd" : "var(--gantt-hierarchy-line-color)";
     }, []);
@@ -7033,6 +7245,7 @@ var TaskListRow = import_react11.default.memo(
     );
     const handleNameDoubleClick = (0, import_react11.useCallback)(
       (e) => {
+        if (task.composite) return;
         if (disableTaskNameEditing) return;
         e.stopPropagation();
         nameConfirmedRef.current = false;
@@ -7040,7 +7253,7 @@ var TaskListRow = import_react11.default.memo(
         setNameValue(task.name);
         setEditingColumnId("name");
       },
-      [task.name, disableTaskNameEditing]
+      [task.name, task.composite, disableTaskNameEditing]
     );
     const handleRowKeyDown = (0, import_react11.useCallback)(
       (e) => {
@@ -7689,7 +7902,7 @@ var TaskListRow = import_react11.default.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;
@@ -7787,36 +8000,35 @@ var TaskListRow = import_react11.default.memo(
             }
           )
         ] }),
-        isParent && !editingName && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          !isFilterHideMode && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "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__ */ (0, import_jsx_runtime14.jsx)(
-            "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__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, {})
+        task.composite && !isFilterHideMode && !isCollapsed && !editingName && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "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__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "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__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, {})
+          }
+        ) })
       ] }),
-      !isChild && isParent && !editingName && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      !isChild && isParent && !task.composite && !editingName && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
         !isFilterHideMode && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "span",
           {
@@ -7839,7 +8051,7 @@ var TaskListRow = import_react11.default.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__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, {})
           }
@@ -7858,27 +8070,57 @@ var TaskListRow = import_react11.default.memo(
           style: { paddingLeft: nameInputPaddingLeft },
           onClick: (e) => e.stopPropagation()
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "gantt-tl-name-trigger-icon", "aria-hidden": "true", children: taskListNamePrefixIcon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "gantt-tl-name-trigger-text", children: task.name })
-          ]
-        }
-      ),
+      ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        task.composite && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "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__ */ (0, import_jsx_runtime14.jsx)(
+              "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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M21 5H11" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M21 12H11" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M21 19H11" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m3 8 4 4-4 4" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "gantt-tl-name-trigger-icon", "aria-hidden": "true", children: taskListNamePrefixIcon }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "gantt-tl-name-trigger-text", children: task.name })
+            ]
+          }
+        )
+      ] }),
       !editingName && task.color && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "span",
         {
@@ -8495,8 +8737,9 @@ var TaskListRow = import_react11.default.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 ?? ""
@@ -8504,6 +8747,7 @@ var TaskListRow = import_react11.default.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
         },
@@ -8729,6 +8973,7 @@ var GenerationSkeletonRows = ({
   rowHeight,
   variant,
   startIndex = 0,
+  startTop,
   taskListLayout,
   chartDayWidth = 40,
   chartStartDayOffset = 0,
@@ -8769,7 +9014,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__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `gantt-generation-skeleton-label ${shortShape ? "gantt-generation-skeleton-label-short" : ""} ${mediumShape ? "gantt-generation-skeleton-label-medium" : ""}` }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `gantt-generation-skeleton-bar ${parentShape ? "gantt-generation-skeleton-bar-parent" : ""} ${shortShape ? "gantt-generation-skeleton-bar-short" : ""}`, style: chartBarStyle })
           },
           rowIndex
@@ -9029,6 +9274,8 @@ var SelectAllCheckbox = ({
 var TaskList = ({
   tasks,
   rowHeight,
+  rowTops,
+  rowHeights,
   headerHeight,
   taskListWidth,
   onTasksChange,
@@ -9156,14 +9403,22 @@ var TaskList = ({
     return tasks2;
   }, [orderedTasks, collapsedParentIds, filterMode, filteredTaskIds, isFilterActive, criticalPathMode, criticalTaskIds]);
   const totalHeight = (0, import_react14.useMemo)(
-    () => (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 = (0, import_react14.useMemo)(
     () => Object.fromEntries(buildTaskNumberMap(visibleTasks)),
     [visibleTasks]
   );
   const visibleTaskIds = (0, import_react14.useMemo)(() => visibleTasks.map((task) => task.id), [visibleTasks]);
+  const compositeParentIds = (0, import_react14.useMemo)(
+    () => new Set(tasks.filter((task) => task.composite).map((task) => task.id)),
+    [tasks]
+  );
+  const compositeParentsById = (0, import_react14.useMemo)(
+    () => new Map(tasks.filter((task) => task.composite).map((task) => [task.id, task])),
+    [tasks]
+  );
   const renderedVisibleRowIndices = (0, import_react14.useMemo)(
     () => visibleRowIndices ?? visibleTasks.map((_, index) => index),
     [visibleRowIndices, visibleTasks]
@@ -10155,7 +10410,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__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
@@ -10172,7 +10427,7 @@ var TaskList = ({
                         rowIndex: index,
                         taskNumber: originalTaskNumberMap[task.id] || "",
                         taskNumberMap: originalTaskNumberMap,
-                        rowHeight,
+                        rowHeight: rowHeights?.[index] ?? rowHeight,
                         onTasksChange,
                         onDurationChange,
                         selectedTaskId,
@@ -10229,7 +10484,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,
@@ -10245,7 +10501,7 @@ var TaskList = ({
                 {
                   style: {
                     position: "absolute",
-                    top: `${(pendingInsertRowIndex + 1) * rowHeight}px`,
+                    top: `${rowTops?.[pendingInsertRowIndex + 1] ?? (pendingInsertRowIndex + 1) * rowHeight}px`,
                     left: 0,
                     right: 0
                   },
@@ -10267,6 +10523,7 @@ var TaskList = ({
                   rowHeight,
                   variant: "task-list",
                   startIndex: visibleTasks.length,
+                  startTop: totalHeight - Math.max(0, Math.floor(skeletonRowCount)) * rowHeight,
                   taskListLayout: generationSkeletonTaskListLayout
                 }
               )
@@ -14237,6 +14494,7 @@ function TaskGanttChartInner(props, ref) {
     skeletonStartJitterDays = 0,
     showTaskDateLabels = true,
     showTaskNames = true,
+    showCompositeSegments = true,
     timelineMarkers,
     additionalColumns,
     hiddenTaskListColumns,
@@ -14451,17 +14709,46 @@ function TaskGanttChartInner(props, ref) {
   }, [dependencyLineMenu, onTasksChange, tasks]);
   const [activeTimelineTooltip, setActiveTimelineTooltip] = (0, import_react19.useState)(null);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
-  const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
+  const [expandedCompositeIds, setExpandedCompositeIds] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
   const [editingTaskId, setEditingTaskId] = (0, import_react19.useState)(null);
   const taskDateChangeMode = externalTaskDateChangeMode ?? internalTaskDateChangeMode;
   const handleTaskDateChangeMode = externalOnTaskDateChangeModeChange ?? setInternalTaskDateChangeMode;
   const resolvedRowContentLines = isPlanFactMode ? Math.max(2, Math.floor(rowContentLines)) : Math.max(1, Math.floor(rowContentLines));
   const shouldFillParentRowsInTaskList = fillParentRowsInTaskList ?? isPlanFactMode;
   const effectiveRowHeight = (0, import_react19.useMemo)(
-    () => Math.max(rowHeight, 10 + resolvedRowContentLines * 18),
-    [resolvedRowContentLines, rowHeight]
+    () => rowContentLines === 0 && !isPlanFactMode ? rowHeight : Math.max(rowHeight, 10 + resolvedRowContentLines * 18),
+    [isPlanFactMode, resolvedRowContentLines, rowContentLines, rowHeight]
   );
-  const normalizedTasks = (0, import_react19.useMemo)(() => normalizeHierarchyTasks(tasks), [tasks]);
+  const normalizedTasks = (0, import_react19.useMemo)(() => {
+    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 = (0, import_react19.useMemo)(() => {
+    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 = (0, import_react19.useMemo)(
     () => buildControlledScheduleIdentity(normalizedTasks),
     [normalizedTasks]
@@ -14541,6 +14828,23 @@ function TaskGanttChartInner(props, ref) {
     }
     return tasks2;
   }, [normalizedTasks, collapsedParentIds, filterMode, taskFilter, criticalPathMode, criticalTaskIds]);
+  const compositeRowLayout = (0, import_react19.useMemo)(() => {
+    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 = (0, import_react19.useMemo)(
+    () => new Map(normalizedTasks.filter((task) => task.composite).map((task) => [task.id, task])),
+    [normalizedTasks]
+  );
   const matchedTaskIds = (0, import_react19.useMemo)(() => {
     if (!taskFilter) return /* @__PURE__ */ new Set();
     return new Set(visibleTasks.filter(taskFilter).map((task) => task.id));
@@ -14562,8 +14866,8 @@ function TaskGanttChartInner(props, ref) {
     return mergedHighlightedTaskIds;
   }, [filterMode, highlightedTaskIds, matchedTaskIds, criticalPathMode, criticalTaskIds]);
   const totalGridHeight = (0, import_react19.useMemo)(
-    () => (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 = (0, import_react19.useMemo)(() => {
@@ -14690,7 +14994,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;
     }
@@ -14709,7 +15013,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 = (0, import_react19.useCallback)((taskId, options = {}) => {
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -14718,7 +15022,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",
@@ -14738,7 +15042,7 @@ function TaskGanttChartInner(props, ref) {
       }
     }
     container.scrollTo({ top: scrollTop, behavior });
-  }, [effectiveRowHeight, tasks, visibleTasks]);
+  }, [effectiveRowHeight, compositeRowLayout, tasks, visibleTasks]);
   const [dragGuideLines, setDragGuideLines] = (0, import_react19.useState)(null);
   const [draggedTaskOverride, setDraggedTaskOverride] = (0, import_react19.useState)(null);
   (0, import_react19.useEffect)(() => {
@@ -14765,9 +15069,9 @@ function TaskGanttChartInner(props, ref) {
     previewPositionStore.clear();
   }, [previewPositionStore]);
   const handleTaskChange = (0, import_react19.useCallback)((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) {
@@ -14780,6 +15084,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);
@@ -14841,7 +15147,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",
@@ -14865,7 +15171,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);
@@ -14877,7 +15184,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";
@@ -14885,13 +15193,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 = (0, import_react19.useCallback)((task, duration) => {
     const updatedTask = {
       ...task,
@@ -15005,12 +15314,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);
@@ -15022,7 +15344,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 = (0, import_react19.useMemo)(() => {
     if (forceFullRenderForPrint) {
       return void 0;
@@ -15099,7 +15421,16 @@ function TaskGanttChartInner(props, ref) {
     }
     applyHoveredRows(taskId);
   }, [applyHoveredRows]);
-  const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react19.useCallback)((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)) {
@@ -15109,7 +15440,14 @@ function TaskGanttChartInner(props, ref) {
       }
       return next;
     });
-  }, []);
+  });
+  const lastCompositeBarToggleRef = (0, import_react19.useRef)(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 = (0, import_react19.useMemo)(() => {
     const taskIds = new Set(normalizedTasks.map((task) => task.id));
     return new Set(normalizedTasks.map((task) => task.parentId).filter((parentId) => Boolean(parentId && taskIds.has(parentId))));
@@ -15117,11 +15455,13 @@ function TaskGanttChartInner(props, ref) {
   const handleCollapseAll = (0, import_react19.useCallback)(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(allParentIds);
+    setExpandedCompositeIds(/* @__PURE__ */ new Set());
   }, [allParentIds, externalCollapsedParentIds]);
   const handleExpandAll = (0, import_react19.useCallback)(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(/* @__PURE__ */ new Set());
-  }, [externalCollapsedParentIds]);
+    setExpandedCompositeIds(new Set(normalizedTasks.filter((task) => task.composite).map((task) => task.id)));
+  }, [externalCollapsedParentIds, normalizedTasks]);
   const exportToPdf = (0, import_react19.useCallback)(async (options) => {
     const sourceContainer = containerRef.current;
     if (!sourceContainer || typeof window === "undefined" || typeof document === "undefined") {
@@ -15386,6 +15726,8 @@ function TaskGanttChartInner(props, ref) {
                   {
                     tasks: normalizedTasks,
                     rowHeight: effectiveRowHeight,
+                    rowTops: compositeRowLayout.tops,
+                    rowHeights: compositeRowLayout.heights,
                     headerHeight,
                     taskListWidth,
                     onTasksChange: handleTaskChange,
@@ -15580,6 +15922,8 @@ function TaskGanttChartInner(props, ref) {
                                 gridWidth: renderGridWidth,
                                 totalHeight: totalGridHeight,
                                 rowIndexByTaskId: visibleTaskIndexMap,
+                                rowTops: compositeRowLayout.tops,
+                                rowHeights: compositeRowLayout.heights,
                                 dragOverrides: dependencyOverrides,
                                 selectedDep: selectedChip,
                                 businessDays,
@@ -15666,10 +16010,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__ */ (0, import_jsx_runtime21.jsx)(
                                   TaskRow_default,
@@ -15677,7 +16021,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) {
@@ -15714,7 +16060,10 @@ function TaskGanttChartInner(props, ref) {
                                     isDependencyDragActive: dependencyCreationDrag !== null,
                                     viewMode,
                                     showTaskDateLabels,
-                                    showTaskNames
+                                    showTaskNames,
+                                    showCompositeSegments,
+                                    onCompositeToggle: task.composite ? (source) => handleCompositeBarToggle(task.id, source) : void 0,
+                                    compositeExpanded: task.composite ? !collapsedParentIds.has(task.id) : void 0
                                   }
                                 )
                               },
@@ -15727,6 +16076,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