gantt-lib 0.81.0 → 0.83.0

package/dist/index.js

@@ -7137,6 +7137,7 @@ var TaskList = ({
     [resolvedColumns]
   );
   const effectiveTaskListWidth = Math.max(taskListWidth, MIN_TASK_LIST_WIDTH, resolvedColumnWidthTotal);
+  const tableHeaderHeight = headerHeight + 1;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
@@ -7144,7 +7145,7 @@ var TaskList = ({
       className: `gantt-tl-overlay${show ? "" : " gantt-tl-hidden"}${hasRightShadow ? " gantt-tl-overlay-shadowed" : ""}`,
       style: { "--tasklist-width": `${effectiveTaskListWidth}px` },
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-header", style: { height: `${headerHeight + 0.5}px` }, children: resolvedColumns.map((col) => {
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
           if (col.id === "dependencies") {
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "div",
@@ -7328,7 +7329,7 @@ var TaskList = ({
 };
 
 // src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
-var import_react14 = require("react");
+var import_react14 = __toESM(require("react"));
 
 // src/utils/resourceTimelineLayout.ts
 var isInvalidDate = (date) => Number.isNaN(date.getTime());
@@ -7746,8 +7747,9 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 var DEFAULT_DAY_WIDTH = 40;
 var DEFAULT_HEADER_HEIGHT = 40;
 var DEFAULT_LANE_HEIGHT = 40;
-var DEFAULT_ROW_HEADER_WIDTH = 240;
+var DEFAULT_ROW_HEADER_WIDTH = 420;
 var DEFAULT_RESOURCE_ROW_GAP = 8;
+var DEFAULT_RESOURCE_GROUP_HEIGHT = 28;
 var ITEM_OUTER_VERTICAL_INSET = 2;
 var ITEM_INNER_VERTICAL_INSET = 1;
 var ITEM_START_HORIZONTAL_INSET = 2;
@@ -7834,21 +7836,114 @@ var clampOverlaySegments = (segments2, maxWidth) => segments2.flatMap((segment)
   return width > 0 ? [{ left, width }] : [];
 });
 var getDurationValue = (startDate, endDate, businessDays, weekendPredicate) => businessDays ? getBusinessDaysCount(startDate, endDate, weekendPredicate) : Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3)) + 1);
+var RESOURCE_TYPE_OPTIONS = ["\u041B\u044E\u0434\u0438", "\u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435", "\u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B", "\u0414\u0440\u0443\u0433\u043E\u0435"];
+var RESOURCE_SCOPE_OPTIONS = ["Shared", "Project"];
+var RESOURCE_SCOPE_LABELS = {
+  Shared: "\u041E\u0431\u0449\u0438\u0439",
+  Project: "\u041F\u0440\u043E\u0435\u043A\u0442"
+};
+var RESOURCE_TYPE_CLASS_NAMES = {
+  \u041B\u044E\u0434\u0438: "People",
+  \u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435: "Equipment",
+  \u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B: "Materials",
+  \u0414\u0440\u0443\u0433\u043E\u0435: "Other"
+};
+var RESOURCE_TYPE_ORDER = {
+  \u041B\u044E\u0434\u0438: 0,
+  \u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435: 1,
+  \u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B: 2,
+  \u0414\u0440\u0443\u0433\u043E\u0435: 3
+};
+var RESOURCE_SCOPE_ORDER = {
+  Shared: 0,
+  Project: 1
+};
+var getResourceType = (resource) => resource.type ?? "\u0414\u0440\u0443\u0433\u043E\u0435";
+var getResourceScopeOrder = (resource) => RESOURCE_SCOPE_ORDER[resource.scope ?? "Project"] ?? 99;
+var orderResourcesByType = (resources) => {
+  return resources.map((resource, index) => ({ resource, index })).sort((left, right) => {
+    const leftType = getResourceType(left.resource);
+    const rightType = getResourceType(right.resource);
+    const typeDiff = (RESOURCE_TYPE_ORDER[leftType] ?? 99) - (RESOURCE_TYPE_ORDER[rightType] ?? 99);
+    if (typeDiff !== 0) {
+      return typeDiff;
+    }
+    const scopeDiff = getResourceScopeOrder(left.resource) - getResourceScopeOrder(right.resource);
+    return scopeDiff !== 0 ? scopeDiff : left.index - right.index;
+  }).map(({ resource }) => resource);
+};
+var ResourceTypeIcon = ({ type }) => {
+  if (type === "\u041B\u044E\u0434\u0438") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconPeople", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+    ] });
+  }
+  if (type === "\u041E\u0431\u043E\u0440\u0443\u0434\u043E\u0432\u0430\u043D\u0438\u0435") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconEquipment", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m18 15 4-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" })
+    ] });
+  }
+  if (type === "\u041C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u044B") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconMaterials", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 22v-8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M2.336 8.89 10 14l11.715-7.029" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M22 14a2 2 0 0 1-.971 1.715l-10 6a2 2 0 0 1-2.138-.05l-6-4A2 2 0 0 1 2 16v-6a2 2 0 0 1 .971-1.715l10-6a2 2 0 0 1 2.138.05l6 4A2 2 0 0 1 22 8z" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "gantt-resourceTimeline-resourceTypeIcon gantt-resourceTimeline-resourceTypeIconOther", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 8v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 16h.01" })
+  ] });
+};
 var ResourceHeader = ({
   resource,
   resourceId,
+  rowIndex,
   conflictCount,
+  workedDays,
+  assignmentCount,
   height,
   paddingBottom,
   menuCommands,
+  onResourceChange,
+  onResourceNameClick,
   onConflictBadgeClick
 }) => {
   const [menuOpen, setMenuOpen] = (0, import_react14.useState)(false);
+  const [typeMenuOpen, setTypeMenuOpen] = (0, import_react14.useState)(false);
+  const [scopeMenuOpen, setScopeMenuOpen] = (0, import_react14.useState)(false);
+  const [editingName, setEditingName] = (0, import_react14.useState)(false);
+  const [nameValue, setNameValue] = (0, import_react14.useState)(resource.name);
+  const nameInputRef = (0, import_react14.useRef)(null);
+  const nameConfirmedRef = (0, import_react14.useRef)(false);
   const visibleCommands = (0, import_react14.useMemo)(
     () => menuCommands.filter((command) => command.isVisible?.(resource) ?? true),
     [menuCommands, resource]
   );
   const hasMenu = visibleCommands.length > 0;
+  const type = resource.type ?? "\u0414\u0440\u0443\u0433\u043E\u0435";
+  const scope = resource.scope ?? "Project";
+  const scopeLabel = RESOURCE_SCOPE_LABELS[scope] ?? scope;
+  const applyResourcePatch = (0, import_react14.useCallback)((patch) => {
+    onResourceChange?.({ ...resource, ...patch });
+  }, [onResourceChange, resource]);
+  (0, import_react14.useEffect)(() => {
+    if (!editingName) {
+      setNameValue(resource.name);
+    }
+  }, [editingName, resource.name]);
+  (0, import_react14.useEffect)(() => {
+    if (editingName && nameInputRef.current) {
+      nameInputRef.current.focus();
+      nameInputRef.current.select();
+    }
+  }, [editingName]);
   const handleCommandClick = (command, event) => {
     event.stopPropagation();
     if (command.closeOnSelect !== false) {
@@ -7856,6 +7951,42 @@ var ResourceHeader = ({
     }
     command.onSelect(resource);
   };
+  const handleNameDoubleClick = (0, import_react14.useCallback)((event) => {
+    if (!onResourceChange) {
+      return;
+    }
+    event.stopPropagation();
+    nameConfirmedRef.current = false;
+    setNameValue(resource.name);
+    setEditingName(true);
+  }, [onResourceChange, resource.name]);
+  const handleNameSave = (0, import_react14.useCallback)(() => {
+    if (nameConfirmedRef.current) {
+      nameConfirmedRef.current = false;
+      return;
+    }
+    const nextName = nameValue.trim();
+    if (nextName && nextName !== resource.name) {
+      applyResourcePatch({ name: nextName });
+    }
+    setEditingName(false);
+  }, [applyResourcePatch, nameValue, resource.name]);
+  const handleNameCancel = (0, import_react14.useCallback)(() => {
+    setNameValue(resource.name);
+    setEditingName(false);
+  }, [resource.name]);
+  const handleNameKeyDown = (0, import_react14.useCallback)((event) => {
+    if (event.key === "Enter") {
+      nameConfirmedRef.current = true;
+      const nextName = nameValue.trim();
+      if (nextName && nextName !== resource.name) {
+        applyResourcePatch({ name: nextName });
+      }
+      setEditingName(false);
+    } else if (event.key === "Escape") {
+      handleNameCancel();
+    }
+  }, [applyResourcePatch, handleNameCancel, nameValue, resource.name]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
@@ -7866,49 +7997,167 @@ var ResourceHeader = ({
         paddingBottom: `${paddingBottom}px`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceName", children: resource.name }),
-        conflictCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "gantt-resourceTimeline-conflictBadge",
-            "aria-label": formatOverlapCount(conflictCount),
-            title: formatOverlapCount(conflictCount),
-            onClick: (event) => {
-              event.stopPropagation();
-              onConflictBadgeClick?.(resourceId);
-            },
-            children: conflictCount
-          }
-        ),
-        hasMenu && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceNumber", children: rowIndex + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "gantt-resourceTimeline-resourceName", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open: typeMenuOpen, onOpenChange: setTypeMenuOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceTypeIconButton gantt-resourceTimeline-resourceTypeIconButton${RESOURCE_TYPE_CLASS_NAMES[type] ?? "Other"}`,
+                disabled: !onResourceChange,
+                "aria-label": `\u0422\u0438\u043F \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}: ${type}`,
+                title: type,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setTypeMenuOpen((open) => !open);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ResourceTypeIcon, { type })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverContent, { className: "gantt-resourceTimeline-resourceOptionMenu", portal: true, align: "start", children: RESOURCE_TYPE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceOption${type === option ? " gantt-resourceTimeline-resourceOptionActive" : ""}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setTypeMenuOpen(false);
+                  applyResourcePatch({ type: option });
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceOptionIcon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ResourceTypeIcon, { type: option }) }),
+                  option
+                ]
+              },
+              option
+            )) })
+          ] }),
+          editingName ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Input,
+            {
+              ref: nameInputRef,
+              value: nameValue,
+              onChange: (event) => setNameValue(event.target.value),
+              onBlur: handleNameSave,
+              onKeyDown: handleNameKeyDown,
+              onClick: (event) => event.stopPropagation(),
+              "aria-label": `\u041D\u043E\u0432\u043E\u0435 \u043D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
+              className: "gantt-tl-name-input gantt-resourceTimeline-resourceNameInput"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "gantt-resourceTimeline-resourceNameButton",
+              "aria-label": `\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
+              title: resource.name,
+              onClick: (event) => {
+                event.stopPropagation();
+                onResourceNameClick?.(resourceId);
+              },
+              onDoubleClick: handleNameDoubleClick,
+              children: resource.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open: scopeMenuOpen, onOpenChange: setScopeMenuOpen, children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "button",
             {
-              className: "gantt-resourceTimeline-resourceMenuButton",
               type: "button",
-              "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+              className: `gantt-resourceTimeline-resourceScopeChip gantt-resourceTimeline-resourceScope${scope === "Shared" ? "Shared" : "Project"}`,
+              disabled: !onResourceChange,
+              "aria-label": `\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}`,
               onClick: (event) => {
                 event.stopPropagation();
-                setMenuOpen((open) => !open);
+                setScopeMenuOpen((open) => !open);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u22EE" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: scopeLabel })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverContent, { className: "gantt-resourceTimeline-resourceMenu", portal: true, align: "end", children: visibleCommands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverContent, { className: "gantt-resourceTimeline-resourceOptionMenu", portal: true, align: "start", children: RESOURCE_SCOPE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "button",
             {
               type: "button",
-              className: `gantt-resourceTimeline-resourceMenuItem${command.danger ? " gantt-resourceTimeline-resourceMenuItemDanger" : ""}`,
-              disabled: command.isDisabled?.(resource) ?? false,
-              onClick: (event) => handleCommandClick(command, event),
+              className: `gantt-resourceTimeline-resourceOption${scope === option ? " gantt-resourceTimeline-resourceOptionActive" : ""}`,
+              onClick: (event) => {
+                event.stopPropagation();
+                setScopeMenuOpen(false);
+                applyResourcePatch({ scope: option });
+              },
               children: [
-                command.icon,
-                command.label
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `gantt-resourceTimeline-resourceOptionScopeDot gantt-resourceTimeline-resourceScope${option}` }),
+                RESOURCE_SCOPE_LABELS[option] ?? option
               ]
             },
-            command.id
+            option
           )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "span",
+          {
+            className: "gantt-resourceTimeline-resourceAssignments",
+            "aria-label": `\u041D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430 ${resource.name}: ${assignmentCount}, ${workedDays} \u0434\u043D.`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "gantt-resourceTimeline-resourceWorkedDays", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceMetricValue", children: workedDays > 0 ? workedDays : "-" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceMetricLabel", children: workedDays > 0 ? "\u0434\u043D." : "" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "gantt-resourceTimeline-resourceAssignmentCount", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceMetricValue", children: assignmentCount > 0 ? assignmentCount : "" }),
+                assignmentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "gantt-resourceTimeline-resourceAssignmentIcon", width: "14", height: "14", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "15", height: "5", x: "4", y: "5", rx: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "10", height: "5", x: "4", y: "14", rx: "2" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "gantt-resourceTimeline-resourceActions", children: [
+          conflictCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "gantt-resourceTimeline-conflictBadge",
+              "aria-label": formatOverlapCount(conflictCount),
+              title: formatOverlapCount(conflictCount),
+              onClick: (event) => {
+                event.stopPropagation();
+                onConflictBadgeClick?.(resourceId);
+              },
+              children: conflictCount
+            }
+          ),
+          hasMenu && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                className: "gantt-resourceTimeline-resourceMenuButton",
+                type: "button",
+                "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  setMenuOpen((open) => !open);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u22EE" })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverContent, { className: "gantt-resourceTimeline-resourceMenu", portal: true, align: "end", children: visibleCommands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `gantt-resourceTimeline-resourceMenuItem${command.danger ? " gantt-resourceTimeline-resourceMenuItemDanger" : ""}`,
+                disabled: command.isDisabled?.(resource) ?? false,
+                onClick: (event) => handleCommandClick(command, event),
+                children: [
+                  command.icon,
+                  command.label
+                ]
+              },
+              command.id
+            )) })
+          ] })
         ] })
       ]
     }
@@ -7947,7 +8196,7 @@ var NewResourceRow = ({ height, onConfirm, onCancel }) => {
       handleConfirm();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: "gantt-resourceTimeline-resourceHeader gantt-resourceTimeline-resourceHeaderNew",
@@ -7955,18 +8204,21 @@ var NewResourceRow = ({ height, onConfirm, onCancel }) => {
         height: `${height}px`,
         paddingBottom: `${DEFAULT_RESOURCE_ROW_GAP}px`
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        Input,
-        {
-          ref: inputRef,
-          value: nameValue,
-          onChange: (event) => setNameValue(event.target.value),
-          onKeyDown: handleKeyDown,
-          onBlur: handleBlur,
-          placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
-          className: "gantt-resourceTimeline-resourceInput"
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceNumber", children: "+" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Input,
+          {
+            ref: inputRef,
+            value: nameValue,
+            onChange: (event) => setNameValue(event.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: handleBlur,
+            placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+            className: "gantt-resourceTimeline-resourceInput"
+          }
+        )
+      ]
     }
   );
 };
@@ -7982,6 +8234,7 @@ function ResourceTimelineChart({
   customDays,
   isWeekend: isWeekend3,
   businessDays = true,
+  resourceGrouping = false,
   readonly,
   disableResourceReassignment,
   renderItem,
@@ -7990,6 +8243,7 @@ function ResourceTimelineChart({
   onResourceItemMenuClick,
   activeResourceItemId,
   onResourceItemMove,
+  onResourceChange,
   onAddResource,
   enableAddResource = true,
   resourceMenuCommands = []
@@ -7998,9 +8252,12 @@ function ResourceTimelineChart({
   const gridRef = (0, import_react14.useRef)(null);
   const panStateRef = (0, import_react14.useRef)(null);
   const conflictNavigationIndexRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const resourceNavigationIndexRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
   const conflictHighlightTimeoutRef = (0, import_react14.useRef)(null);
   const [isCreatingResource, setIsCreatingResource] = (0, import_react14.useState)(false);
+  const [creatingResourceGroupType, setCreatingResourceGroupType] = (0, import_react14.useState)(null);
   const [activeConflictItemId, setActiveConflictItemId] = (0, import_react14.useState)(null);
+  const [resourceColumnHasRightShadow, setResourceColumnHasRightShadow] = (0, import_react14.useState)(false);
   const validItems = (0, import_react14.useMemo)(() => collectValidItems(resources), [resources]);
   const dateRange = (0, import_react14.useMemo)(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = (0, import_react14.useMemo)(() => {
@@ -8012,15 +8269,112 @@ function ResourceTimelineChart({
     [customDays, isWeekend3]
   );
   const gridWidth = (0, import_react14.useMemo)(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
+  const effectiveRowHeaderWidth = Math.max(rowHeaderWidth, DEFAULT_ROW_HEADER_WIDTH);
+  const orderedResources = (0, import_react14.useMemo)(
+    () => resourceGrouping === "type" ? orderResourcesByType(resources) : resources,
+    [resourceGrouping, resources]
+  );
+  const workedDaysByResourceId = (0, import_react14.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const resource of resources) {
+      const workedDays = resource.items.reduce((sum, item) => {
+        try {
+          const startDate = parseUTCDate(item.startDate);
+          const endDate = parseUTCDate(item.endDate);
+          if (!isValidDate(startDate) || !isValidDate(endDate)) {
+            return sum;
+          }
+          return sum + getDurationValue(startDate, endDate, businessDays, weekendPredicate);
+        } catch {
+          return sum;
+        }
+      }, 0);
+      map.set(resource.id, workedDays);
+    }
+    return map;
+  }, [businessDays, resources, weekendPredicate]);
   const layout = (0, import_react14.useMemo)(
-    () => layoutResourceTimelineItems(resources, {
+    () => layoutResourceTimelineItems(orderedResources, {
       monthStart,
       dayWidth,
       laneHeight,
       rowGap: DEFAULT_RESOURCE_ROW_GAP
     }),
-    [resources, monthStart, dayWidth, laneHeight]
+    [orderedResources, monthStart, dayWidth, laneHeight]
   );
+  const canAddResource = enableAddResource && Boolean(onAddResource);
+  const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
+  const displayLayout = (0, import_react14.useMemo)(() => {
+    if (resourceGrouping !== "type") {
+      return {
+        rows: layout.rows,
+        items: layout.items,
+        groupHeaders: [],
+        groupAddRows: [],
+        totalHeight: layout.totalHeight
+      };
+    }
+    const countsByType = /* @__PURE__ */ new Map();
+    for (const row of layout.rows) {
+      const type = getResourceType(row.resource);
+      countsByType.set(type, (countsByType.get(type) ?? 0) + 1);
+    }
+    let offset = 0;
+    let previousType = null;
+    const rowTopOffsets = /* @__PURE__ */ new Map();
+    const groupHeaders = [];
+    const groupAddRows = [];
+    const rows = layout.rows.map((row) => {
+      const type = getResourceType(row.resource);
+      if (type !== previousType) {
+        if (previousType !== null && creatingResourceGroupType === previousType) {
+          groupAddRows.push({
+            key: previousType,
+            top: row.resourceRowTop + offset,
+            height: resourceAddRowHeight
+          });
+          offset += resourceAddRowHeight;
+        }
+        groupHeaders.push({
+          key: type,
+          label: type,
+          count: countsByType.get(type) ?? 0,
+          top: row.resourceRowTop + offset,
+          height: DEFAULT_RESOURCE_GROUP_HEIGHT
+        });
+        offset += DEFAULT_RESOURCE_GROUP_HEIGHT;
+        previousType = type;
+      }
+      rowTopOffsets.set(row.resourceId, offset);
+      return {
+        ...row,
+        resourceRowTop: row.resourceRowTop + offset
+      };
+    });
+    if (previousType !== null && creatingResourceGroupType === previousType) {
+      groupAddRows.push({
+        key: previousType,
+        top: layout.totalHeight + offset,
+        height: resourceAddRowHeight
+      });
+      offset += resourceAddRowHeight;
+    }
+    const items = layout.items.map((item) => {
+      const itemOffset = rowTopOffsets.get(item.resourceId) ?? 0;
+      return {
+        ...item,
+        resourceRowTop: item.resourceRowTop + itemOffset,
+        top: item.top + itemOffset
+      };
+    });
+    return {
+      rows,
+      items,
+      groupHeaders,
+      groupAddRows,
+      totalHeight: layout.totalHeight + offset
+    };
+  }, [creatingResourceGroupType, layout, resourceAddRowHeight, resourceGrouping]);
   const todayInRange = (0, import_react14.useMemo)(() => {
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
@@ -8028,16 +8382,16 @@ function ResourceTimelineChart({
   }, [dateRange]);
   const itemsByResourceId = (0, import_react14.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of layout.items) {
+    for (const item of displayLayout.items) {
       const next = map.get(item.resourceId) ?? [];
       next.push(item);
       map.set(item.resourceId, next);
     }
     return map;
-  }, [layout.items]);
+  }, [displayLayout.items]);
   const conflictItemsByResourceId = (0, import_react14.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of layout.items) {
+    for (const item of displayLayout.items) {
       if (item.conflictRanges.length === 0) {
         continue;
       }
@@ -8051,19 +8405,28 @@ function ResourceTimelineChart({
       );
     }
     return map;
-  }, [layout.items]);
-  const canAddResource = enableAddResource && Boolean(onAddResource);
-  const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
-  const displayTotalHeight = layout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
+  }, [displayLayout.items]);
+  const displayTotalHeight = displayLayout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
+  const timelineHeaderHeight = headerHeight + 1;
   const handleConfirmNewResource = (0, import_react14.useCallback)((name) => {
     onAddResource?.({
       id: crypto.randomUUID(),
       name,
+      type: creatingResourceGroupType ?? "\u0414\u0440\u0443\u0433\u043E\u0435",
+      scope: "Project",
       items: []
     });
     setIsCreatingResource(false);
-  }, [onAddResource]);
-  const handleCancelNewResource = (0, import_react14.useCallback)(() => setIsCreatingResource(false), []);
+    setCreatingResourceGroupType(null);
+  }, [creatingResourceGroupType, onAddResource]);
+  const handleStartAddResourceToGroup = (0, import_react14.useCallback)((type) => {
+    setIsCreatingResource(false);
+    setCreatingResourceGroupType(type);
+  }, []);
+  const handleCancelNewResource = (0, import_react14.useCallback)(() => {
+    setIsCreatingResource(false);
+    setCreatingResourceGroupType(null);
+  }, []);
   const handleConflictBadgeClick = (0, import_react14.useCallback)((resourceId) => {
     const conflictItems = conflictItemsByResourceId.get(resourceId) ?? [];
     if (conflictItems.length === 0) {
@@ -8089,10 +8452,31 @@ function ResourceTimelineChart({
       conflictHighlightTimeoutRef.current = null;
     }, 1600);
   }, [conflictItemsByResourceId, dayWidth, laneHeight]);
+  const handleResourceNameClick = (0, import_react14.useCallback)((resourceId) => {
+    const resourceItems = itemsByResourceId.get(resourceId) ?? [];
+    if (resourceItems.length === 0) {
+      return;
+    }
+    const orderedItems = [...resourceItems].sort(
+      (left, right) => left.left - right.left || left.top - right.top || left.itemId.localeCompare(right.itemId)
+    );
+    const currentIndex = resourceNavigationIndexRef.current.get(resourceId) ?? 0;
+    const targetItem = orderedItems[currentIndex % orderedItems.length];
+    resourceNavigationIndexRef.current.set(resourceId, (currentIndex + 1) % orderedItems.length);
+    const container = scrollContainerRef.current;
+    if (!container || !targetItem) {
+      return;
+    }
+    container.scrollTo({
+      left: Math.max(0, Math.round(targetItem.left - dayWidth * 2)),
+      top: Math.max(0, Math.round(targetItem.top - laneHeight)),
+      behavior: "smooth"
+    });
+  }, [dayWidth, itemsByResourceId, laneHeight]);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
-    rows: layout.rows,
+    rows: displayLayout.rows,
     gridElementRef: gridRef,
     readonly,
     disableResourceReassignment,
@@ -8100,6 +8484,18 @@ function ResourceTimelineChart({
     weekendPredicate,
     onResourceItemMove
   });
+  (0, import_react14.useEffect)(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const updateShadow = () => {
+      setResourceColumnHasRightShadow(container.scrollLeft > 0);
+    };
+    updateShadow();
+    container.addEventListener("scroll", updateShadow, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", updateShadow);
+    };
+  }, []);
   const handlePanStart = (0, import_react14.useCallback)((event) => {
     if (event.button !== 0) {
       return;
@@ -8157,6 +8553,16 @@ function ResourceTimelineChart({
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, [allowVerticalPan]);
+  (0, import_react14.useEffect)(() => {
+    const nextNavigation = /* @__PURE__ */ new Map();
+    for (const [resourceId, resourceItems] of itemsByResourceId.entries()) {
+      if (resourceItems.length === 0) {
+        continue;
+      }
+      nextNavigation.set(resourceId, (resourceNavigationIndexRef.current.get(resourceId) ?? 0) % resourceItems.length);
+    }
+    resourceNavigationIndexRef.current = nextNavigation;
+  }, [itemsByResourceId]);
   (0, import_react14.useEffect)(() => {
     return () => {
       if (conflictHighlightTimeoutRef.current) {
@@ -8180,25 +8586,92 @@ function ResourceTimelineChart({
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
-            className: "gantt-resourceTimeline-resourceColumn",
-            style: { width: `${rowHeaderWidth}px`, minWidth: `${rowHeaderWidth}px` },
+            className: `gantt-resourceTimeline-resourceColumn${resourceColumnHasRightShadow ? " gantt-resourceTimeline-resourceColumnShadowed" : ""}`,
+            style: { width: `${effectiveRowHeaderWidth}px`, minWidth: `${effectiveRowHeaderWidth}px` },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
                   className: "gantt-resourceTimeline-corner",
-                  style: { height: `${headerHeight}px` }
+                  style: { height: `${timelineHeaderHeight}px` },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderNumber", children: "#" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderName", children: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceHeaderCell", "aria-label": "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u043E\u0441\u0442\u044C" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceHeaderCell", children: "\u041D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceHeaderCell gantt-resourceTimeline-resourceHeaderActions", "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F" })
+                  ]
                 }
               ),
-              layout.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              displayLayout.groupHeaders.length > 0 ? displayLayout.groupHeaders.map((group) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react14.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  "div",
+                  {
+                    className: "gantt-resourceTimeline-resourceGroupHeader",
+                    style: { height: `${group.height}px` },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceGroupTitle", children: group.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceGroupCount", children: group.count }),
+                      canAddResource && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          className: "gantt-resourceTimeline-resourceGroupAddButton",
+                          "aria-label": `\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0433\u0440\u0443\u043F\u043F\u0443 ${group.label}`,
+                          title: `\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0433\u0440\u0443\u043F\u043F\u0443 ${group.label}`,
+                          onClick: (event) => {
+                            event.stopPropagation();
+                            handleStartAddResourceToGroup(group.key);
+                          },
+                          children: "+"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                displayLayout.rows.filter((row) => getResourceType(row.resource) === group.key).map((row) => {
+                  const rowIndex = displayLayout.rows.findIndex((candidate) => candidate.resourceId === row.resourceId);
+                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    ResourceHeader,
+                    {
+                      resource: row.resource,
+                      resourceId: row.resourceId,
+                      rowIndex,
+                      conflictCount: row.conflictCount,
+                      workedDays: workedDaysByResourceId.get(row.resourceId) ?? 0,
+                      assignmentCount: row.resource.items.length,
+                      height: row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP,
+                      paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
+                      menuCommands: resourceMenuCommands,
+                      onResourceChange,
+                      onResourceNameClick: handleResourceNameClick,
+                      onConflictBadgeClick: handleConflictBadgeClick
+                    },
+                    row.resourceId
+                  );
+                }),
+                displayLayout.groupAddRows.some((row) => row.key === group.key) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  NewResourceRow,
+                  {
+                    height: resourceAddRowHeight,
+                    onConfirm: handleConfirmNewResource,
+                    onCancel: handleCancelNewResource
+                  }
+                )
+              ] }, group.key)) : displayLayout.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 ResourceHeader,
                 {
                   resource: row.resource,
                   resourceId: row.resourceId,
+                  rowIndex,
                   conflictCount: row.conflictCount,
+                  workedDays: workedDaysByResourceId.get(row.resourceId) ?? 0,
+                  assignmentCount: row.resource.items.length,
                   height: row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP,
                   paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
                   menuCommands: resourceMenuCommands,
+                  onResourceChange,
+                  onResourceNameClick: handleResourceNameClick,
                   onConflictBadgeClick: handleConflictBadgeClick
                 },
                 row.resourceId
@@ -8216,7 +8689,10 @@ function ResourceTimelineChart({
                   className: "gantt-resourceTimeline-addResourceButton",
                   type: "button",
                   style: { height: `${resourceAddRowHeight}px` },
-                  onClick: () => setIsCreatingResource(true),
+                  onClick: () => {
+                    setCreatingResourceGroupType(null);
+                    setIsCreatingResource(true);
+                  },
                   children: "+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441"
                 }
               ))
@@ -8229,16 +8705,23 @@ function ResourceTimelineChart({
             className: "gantt-resourceTimeline-chartSurface",
             style: { minWidth: `${gridWidth}px` },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-resourceTimeline-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                TimeScaleHeader_default,
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
                 {
-                  days: dateRange,
-                  dayWidth,
-                  headerHeight,
-                  viewMode,
-                  isCustomWeekend: weekendPredicate
+                  className: "gantt-resourceTimeline-stickyHeader",
+                  style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    TimeScaleHeader_default,
+                    {
+                      days: dateRange,
+                      dayWidth,
+                      headerHeight,
+                      viewMode,
+                      isCustomWeekend: weekendPredicate
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
@@ -8257,7 +8740,19 @@ function ResourceTimelineChart({
                       }
                     ),
                     todayInRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
-                    layout.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    displayLayout.groupHeaders.map((group) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row gantt-resourceTimeline-groupRow",
+                        "data-resource-group": group.key,
+                        style: {
+                          top: `${group.top}px`,
+                          height: `${group.height}px`
+                        }
+                      },
+                      `group-row-${group.key}`
+                    )),
+                    displayLayout.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       "div",
                       {
                         className: "gantt-resourceTimeline-row",
@@ -8275,11 +8770,23 @@ function ResourceTimelineChart({
                         className: "gantt-resourceTimeline-row gantt-resourceTimeline-rowNew",
                         "data-resource-add-row": "true",
                         style: {
-                          top: `${layout.totalHeight}px`,
+                          top: `${displayLayout.totalHeight}px`,
                           height: `${resourceAddRowHeight}px`
                         }
                       }
                     ),
+                    displayLayout.groupAddRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row gantt-resourceTimeline-rowNew",
+                        "data-resource-group-add-row": row.key,
+                        style: {
+                          top: `${row.top}px`,
+                          height: `${row.height}px`
+                        }
+                      },
+                      `group-add-row-${row.key}`
+                    )),
                     Array.from(itemsByResourceId.values()).flatMap(
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
@@ -8886,6 +9393,7 @@ function TaskGanttChartInner(props, ref) {
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
   );
+  const timelineHeaderHeight = headerHeight + 1;
   const monthStart = (0, import_react15.useMemo)(() => {
     if (dateRange.length === 0) {
       return new Date(Date.UTC((/* @__PURE__ */ new Date()).getUTCFullYear(), (/* @__PURE__ */ new Date()).getUTCMonth(), 1));
@@ -9368,16 +9876,23 @@ function TaskGanttChartInner(props, ref) {
             className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden",
             style: { minWidth: `${gridWidth}px`, flex: 1, display: showChart ? void 0 : "none" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                TimeScaleHeader_default,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "div",
                 {
-                  days: dateRange,
-                  dayWidth,
-                  headerHeight,
-                  viewMode,
-                  isCustomWeekend
+                  className: "gantt-stickyHeader",
+                  style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    TimeScaleHeader_default,
+                    {
+                      days: dateRange,
+                      dayWidth,
+                      headerHeight,
+                      viewMode,
+                      isCustomWeekend
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "div",
                 {