gantt-lib 0.74.0 → 0.75.0

package/dist/index.js

@@ -515,6 +515,7 @@ __export(index_exports, {
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
+  ResourceTimelineChart: () => ResourceTimelineChart,
   TaskList: () => TaskList,
   TaskRow: () => TaskRow_default,
   TimeScaleHeader: () => TimeScaleHeader_default,
@@ -578,6 +579,7 @@ __export(index_exports, {
   isTaskParent: () => isTaskParent,
   isToday: () => isToday,
   isWeekend: () => isWeekend,
+  layoutResourceTimelineItems: () => layoutResourceTimelineItems,
   moveTaskRange: () => moveTaskRange,
   moveTaskWithCascade: () => moveTaskWithCascade,
   nameContains: () => nameContains,
@@ -610,7 +612,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/GanttChart/GanttChart.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 init_dateUtils();
 
 // src/core/scheduling/index.ts
@@ -7357,6 +7359,522 @@ var TaskList = ({
   );
 };
 
+// src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
+var import_react14 = require("react");
+init_dateUtils();
+
+// src/utils/resourceTimelineLayout.ts
+init_dateUtils();
+var isInvalidDate = (date) => Number.isNaN(date.getTime());
+var getUTCDayNumber = (date) => {
+  return Math.floor(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) / 864e5);
+};
+var compareParsedItems = (a, b) => {
+  const startDiff = getUTCDayNumber(a.startDate) - getUTCDayNumber(b.startDate);
+  if (startDiff !== 0) {
+    return startDiff;
+  }
+  const endDiff = getUTCDayNumber(a.endDate) - getUTCDayNumber(b.endDate);
+  if (endDiff !== 0) {
+    return endDiff;
+  }
+  return a.item.id.localeCompare(b.item.id);
+};
+var layoutResourceTimelineItems = (resources, options) => {
+  const rows = [];
+  const items = [];
+  const diagnostics = [];
+  let currentTop = 0;
+  for (const resource of resources) {
+    const parsedItems = [];
+    for (const item of resource.items) {
+      try {
+        const startDate = parseUTCDate(item.startDate);
+        const endDate = parseUTCDate(item.endDate);
+        if (isInvalidDate(startDate) || isInvalidDate(endDate)) {
+          throw new Error("Invalid date");
+        }
+        parsedItems.push({ item, startDate, endDate });
+      } catch {
+        diagnostics.push({
+          itemId: item.id,
+          resourceId: resource.id,
+          reason: "invalid-date"
+        });
+      }
+    }
+    parsedItems.sort(compareParsedItems);
+    const laneEndDays = [];
+    const laidOutItems = [];
+    for (const parsed of parsedItems) {
+      const startDay = getUTCDayNumber(parsed.startDate);
+      const endDay = getUTCDayNumber(parsed.endDate);
+      let laneIndex = laneEndDays.findIndex((laneEndDay) => laneEndDay < startDay);
+      if (laneIndex === -1) {
+        laneIndex = laneEndDays.length;
+        laneEndDays.push(endDay);
+      } else {
+        laneEndDays[laneIndex] = endDay;
+      }
+      const { left, width } = calculateTaskBar(parsed.startDate, parsed.endDate, options.monthStart, options.dayWidth);
+      laidOutItems.push({
+        item: parsed.item,
+        itemId: parsed.item.id,
+        resourceId: resource.id,
+        laneIndex,
+        left,
+        width,
+        resourceRowTop: currentTop,
+        resourceRowHeight: 0,
+        top: currentTop + laneIndex * options.laneHeight,
+        height: options.laneHeight,
+        startDate: parsed.startDate,
+        endDate: parsed.endDate
+      });
+    }
+    const laneCount = Math.max(1, laneEndDays.length);
+    const resourceRowHeight = laneCount * options.laneHeight;
+    const row = {
+      resource,
+      resourceId: resource.id,
+      laneCount,
+      resourceRowTop: currentTop,
+      resourceRowHeight
+    };
+    rows.push(row);
+    items.push(...laidOutItems.map((item) => ({
+      ...item,
+      resourceRowHeight
+    })));
+    currentTop += resourceRowHeight;
+  }
+  return {
+    rows,
+    items,
+    diagnostics,
+    totalHeight: currentTop
+  };
+};
+
+// src/hooks/useResourceItemDrag.ts
+var import_react13 = require("react");
+var snapToDay = (pixels, dayWidth) => {
+  return Math.round(pixels / dayWidth) * dayWidth;
+};
+var addUTCDays = (date, days) => {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
+};
+var resolveTargetResource = (rows, clientY, gridTop) => {
+  const localY = clientY - gridTop;
+  return rows.find(
+    (row) => localY >= row.resourceRowTop && localY < row.resourceRowTop + row.resourceRowHeight
+  )?.resource ?? null;
+};
+var useResourceItemDrag = ({
+  dayWidth,
+  rows,
+  gridElementRef,
+  readonly,
+  disableResourceReassignment,
+  onResourceItemMove
+}) => {
+  const activeDragRef = (0, import_react13.useRef)(null);
+  const rowsRef = (0, import_react13.useRef)(rows);
+  const onResourceItemMoveRef = (0, import_react13.useRef)(onResourceItemMove);
+  const rafRef = (0, import_react13.useRef)(null);
+  const [preview, setPreview] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
+    rowsRef.current = rows;
+  }, [rows]);
+  (0, import_react13.useEffect)(() => {
+    onResourceItemMoveRef.current = onResourceItemMove;
+  }, [onResourceItemMove]);
+  const clearRaf = (0, import_react13.useCallback)(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+  const cancelDrag2 = (0, import_react13.useCallback)(() => {
+    clearRaf();
+    activeDragRef.current = null;
+    setPreview(null);
+  }, [clearRaf]);
+  (0, import_react13.useEffect)(() => {
+    const handleMouseMove = (event) => {
+      const activeDrag = activeDragRef.current;
+      if (!activeDrag || rafRef.current !== null) {
+        return;
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const latestDrag = activeDragRef.current;
+        if (!latestDrag) {
+          return;
+        }
+        const nextLeft = latestDrag.initialLeft + snapToDay(event.clientX - latestDrag.startX, latestDrag.dayWidth);
+        const nextTop = disableResourceReassignment ? latestDrag.initialTop : latestDrag.initialTop + (event.clientY - latestDrag.startY);
+        latestDrag.currentLeft = nextLeft;
+        latestDrag.currentTop = nextTop;
+        setPreview({
+          itemId: latestDrag.itemId,
+          left: nextLeft,
+          top: nextTop
+        });
+      });
+    };
+    const handleMouseUp = (event) => {
+      const activeDrag = activeDragRef.current;
+      if (!activeDrag) {
+        return;
+      }
+      clearRaf();
+      activeDragRef.current = null;
+      setPreview(null);
+      const gridTop = gridElementRef?.current?.getBoundingClientRect().top ?? 0;
+      const targetResource = disableResourceReassignment ? rowsRef.current.find((row) => row.resourceId === activeDrag.fromResourceId)?.resource ?? null : resolveTargetResource(rowsRef.current, event.clientY, gridTop);
+      if (!targetResource) {
+        return;
+      }
+      const dayDelta = Math.round((activeDrag.currentLeft - activeDrag.initialLeft) / activeDrag.dayWidth);
+      onResourceItemMoveRef.current?.({
+        item: activeDrag.item,
+        itemId: activeDrag.itemId,
+        fromResourceId: activeDrag.fromResourceId,
+        toResourceId: targetResource.id,
+        startDate: addUTCDays(activeDrag.startDate, dayDelta),
+        endDate: addUTCDays(activeDrag.endDate, dayDelta)
+      });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      cancelDrag2();
+    };
+  }, [cancelDrag2, clearRaf, disableResourceReassignment, gridElementRef]);
+  const startDrag = (0, import_react13.useCallback)((event, layoutItem) => {
+    if (readonly || layoutItem.item.locked || event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    activeDragRef.current = {
+      item: layoutItem.item,
+      itemId: layoutItem.itemId,
+      fromResourceId: layoutItem.resourceId,
+      startX: event.clientX,
+      startY: event.clientY,
+      initialLeft: layoutItem.left,
+      initialTop: layoutItem.top,
+      currentLeft: layoutItem.left,
+      currentTop: layoutItem.top,
+      dayWidth,
+      startDate: layoutItem.startDate,
+      endDate: layoutItem.endDate
+    };
+    setPreview({
+      itemId: layoutItem.itemId,
+      left: layoutItem.left,
+      top: layoutItem.top
+    });
+  }, [dayWidth, readonly]);
+  return {
+    preview,
+    startDrag,
+    cancelDrag: cancelDrag2
+  };
+};
+
+// src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
+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 ITEM_OUTER_VERTICAL_INSET = 2;
+var ITEM_INNER_VERTICAL_INSET = 1;
+var ITEM_HORIZONTAL_INSET = 1;
+var isValidDate = (date) => !Number.isNaN(date.getTime());
+var getResourceTimelineDays = (items) => {
+  if (items.length === 0) {
+    return getMonthDays(/* @__PURE__ */ new Date());
+  }
+  let minDate = null;
+  let maxDate = null;
+  for (const item of items) {
+    const startDate = parseUTCDate(item.startDate);
+    const endDate = parseUTCDate(item.endDate);
+    if (!minDate || startDate.getTime() < minDate.getTime()) {
+      minDate = startDate;
+    }
+    if (!maxDate || endDate.getTime() > maxDate.getTime()) {
+      maxDate = endDate;
+    }
+  }
+  if (!minDate || !maxDate) {
+    return getMonthDays(/* @__PURE__ */ new Date());
+  }
+  const startOfMonth2 = new Date(Date.UTC(minDate.getUTCFullYear(), minDate.getUTCMonth(), 1));
+  const endOfMonth = new Date(Date.UTC(maxDate.getUTCFullYear(), maxDate.getUTCMonth() + 1, 0));
+  const days = [];
+  const current = new Date(startOfMonth2);
+  while (current.getTime() <= endOfMonth.getTime()) {
+    days.push(new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth(), current.getUTCDate())));
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+  return days;
+};
+var collectValidItems = (resources) => {
+  return resources.flatMap(
+    (resource) => resource.items.flatMap((item) => {
+      try {
+        const startDate = parseUTCDate(item.startDate);
+        const endDate = parseUTCDate(item.endDate);
+        if (!isValidDate(startDate) || !isValidDate(endDate)) {
+          return [];
+        }
+        return [{ startDate, endDate }];
+      } catch {
+        return [];
+      }
+    })
+  );
+};
+var getVisualItemGeometry = (geometry, laneIndex, laneCount) => {
+  const topInset = laneIndex === 0 ? ITEM_OUTER_VERTICAL_INSET : ITEM_INNER_VERTICAL_INSET;
+  const bottomInset = laneIndex === laneCount - 1 ? ITEM_OUTER_VERTICAL_INSET : ITEM_INNER_VERTICAL_INSET;
+  return {
+    left: geometry.left + ITEM_HORIZONTAL_INSET,
+    top: geometry.top + topInset,
+    width: Math.max(0, geometry.width - ITEM_HORIZONTAL_INSET * 2),
+    height: Math.max(0, geometry.height - topInset - bottomInset)
+  };
+};
+function ResourceTimelineChart({
+  resources,
+  dayWidth = DEFAULT_DAY_WIDTH,
+  rowHeaderWidth = DEFAULT_ROW_HEADER_WIDTH,
+  laneHeight = DEFAULT_LANE_HEIGHT,
+  headerHeight = DEFAULT_HEADER_HEIGHT,
+  readonly,
+  disableResourceReassignment,
+  renderItem,
+  getItemClassName,
+  onResourceItemMove
+}) {
+  const scrollContainerRef = (0, import_react14.useRef)(null);
+  const gridRef = (0, import_react14.useRef)(null);
+  const panStateRef = (0, import_react14.useRef)(null);
+  const validItems = (0, import_react14.useMemo)(() => collectValidItems(resources), [resources]);
+  const dateRange = (0, import_react14.useMemo)(() => {
+    return getResourceTimelineDays(validItems);
+  }, [validItems]);
+  const monthStart = (0, import_react14.useMemo)(() => {
+    const firstDay = dateRange[0] ?? /* @__PURE__ */ new Date();
+    return new Date(Date.UTC(firstDay.getUTCFullYear(), firstDay.getUTCMonth(), 1));
+  }, [dateRange]);
+  const gridWidth = (0, import_react14.useMemo)(() => Math.round(dateRange.length * dayWidth), [dateRange.length, dayWidth]);
+  const layout = (0, import_react14.useMemo)(
+    () => layoutResourceTimelineItems(resources, { monthStart, dayWidth, laneHeight }),
+    [resources, monthStart, dayWidth, laneHeight]
+  );
+  const todayInRange = (0, import_react14.useMemo)(() => {
+    const now = /* @__PURE__ */ new Date();
+    const today = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+    return dateRange.some((day) => day.getTime() === today.getTime());
+  }, [dateRange]);
+  const itemsByResourceId = (0, import_react14.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of layout.items) {
+      const next = map.get(item.resourceId) ?? [];
+      next.push(item);
+      map.set(item.resourceId, next);
+    }
+    return map;
+  }, [layout.items]);
+  const { preview, startDrag } = useResourceItemDrag({
+    dayWidth,
+    rows: layout.rows,
+    gridElementRef: gridRef,
+    readonly,
+    disableResourceReassignment,
+    onResourceItemMove
+  });
+  const handlePanStart = (0, import_react14.useCallback)((event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    if (target.closest("[data-resource-item-id]")) {
+      return;
+    }
+    if (target.closest("input, button, textarea, [contenteditable]")) {
+      return;
+    }
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    panStateRef.current = {
+      active: true,
+      startX: event.clientX,
+      startY: event.clientY,
+      scrollX: container.scrollLeft,
+      scrollY: container.scrollTop
+    };
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    container.style.cursor = "grabbing";
+    event.preventDefault();
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    const handlePanMove = (event) => {
+      const pan = panStateRef.current;
+      const container = scrollContainerRef.current;
+      if (!pan?.active || !container) {
+        return;
+      }
+      container.scrollLeft = pan.scrollX - (event.clientX - pan.startX);
+      container.scrollTop = pan.scrollY - (event.clientY - pan.startY);
+    };
+    const handlePanEnd = () => {
+      if (!panStateRef.current?.active) {
+        return;
+      }
+      panStateRef.current = null;
+      const container = scrollContainerRef.current;
+      if (container) {
+        container.style.cursor = "";
+      }
+    };
+    window.addEventListener("mousemove", handlePanMove);
+    window.addEventListener("mouseup", handlePanEnd);
+    return () => {
+      window.removeEventListener("mousemove", handlePanMove);
+      window.removeEventListener("mouseup", handlePanEnd);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-container gantt-resourceTimeline", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      ref: scrollContainerRef,
+      className: "gantt-resourceTimeline-scrollContainer",
+      style: { cursor: "grab" },
+      onMouseDown: handlePanStart,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "gantt-resourceTimeline-scrollContent", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: "gantt-resourceTimeline-resourceColumn",
+            style: { width: `${rowHeaderWidth}px`, minWidth: `${rowHeaderWidth}px` },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  className: "gantt-resourceTimeline-corner",
+                  style: { height: `${headerHeight}px` }
+                }
+              ),
+              layout.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  className: "gantt-resourceTimeline-resourceHeader",
+                  "data-resource-row-id": row.resourceId,
+                  style: { height: `${row.resourceRowHeight}px` },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-resourceName", children: row.resource.name })
+                },
+                row.resourceId
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            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, { days: dateRange, dayWidth, headerHeight }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                "div",
+                {
+                  ref: gridRef,
+                  className: "gantt-resourceTimeline-grid",
+                  style: { width: `${gridWidth}px`, height: `${layout.totalHeight}px` },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GridBackground_default, { dateRange, dayWidth, totalHeight: layout.totalHeight }),
+                    todayInRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
+                    layout.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row",
+                        "data-resource-row-id": row.resourceId,
+                        style: {
+                          top: `${row.resourceRowTop}px`,
+                          height: `${row.resourceRowHeight}px`
+                        }
+                      },
+                      row.resourceId
+                    )),
+                    Array.from(itemsByResourceId.values()).flatMap(
+                      (resourceItems) => resourceItems.map((layoutItem) => {
+                        const customClassName = getItemClassName?.(layoutItem.item);
+                        const className = [
+                          "gantt-resourceTimeline-item",
+                          preview?.itemId === layoutItem.itemId && "gantt-resourceTimeline-itemDragging",
+                          (readonly || layoutItem.item.locked) && "gantt-resourceTimeline-itemDisabled",
+                          customClassName
+                        ].filter(Boolean).join(" ");
+                        const laneCount = Math.max(1, Math.round(layoutItem.resourceRowHeight / layoutItem.height));
+                        const previewStyle = preview?.itemId === layoutItem.itemId ? getVisualItemGeometry({
+                          left: preview.left,
+                          top: preview.top,
+                          width: layoutItem.width,
+                          height: layoutItem.height
+                        }, layoutItem.laneIndex, laneCount) : void 0;
+                        const itemGeometry = getVisualItemGeometry({
+                          left: layoutItem.left,
+                          top: layoutItem.top,
+                          width: layoutItem.width,
+                          height: layoutItem.height
+                        }, layoutItem.laneIndex, laneCount);
+                        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          "div",
+                          {
+                            className,
+                            "data-resource-item-id": layoutItem.itemId,
+                            onMouseDown: (event) => startDrag(event, layoutItem),
+                            style: {
+                              left: `${itemGeometry.left}px`,
+                              top: `${itemGeometry.top}px`,
+                              ...previewStyle,
+                              width: `${itemGeometry.width}px`,
+                              height: `${itemGeometry.height}px`,
+                              backgroundColor: layoutItem.item.color ?? "var(--gantt-task-bar-default-color, #3b82f6)"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-resourceTimeline-itemInner", children: renderItem ? renderItem(layoutItem.item) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-itemTitle", children: layoutItem.item.title }),
+                              layoutItem.item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-itemSubtitle", children: layoutItem.item.subtitle }),
+                              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "gantt-resourceTimeline-itemDates", children: formatDateRangeLabel(layoutItem.startDate, layoutItem.endDate) })
+                            ] }) })
+                          },
+                          layoutItem.itemId
+                        );
+                      })
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+
 // src/components/GanttChart/print.ts
 function getPrintDocumentTitle({
   header,
@@ -7695,9 +8213,21 @@ async function printGanttChart({
 }
 
 // src/components/GanttChart/GanttChart.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var SCROLL_TO_ROW_CONTEXT_ROWS = 2;
 function GanttChartInner(props, ref) {
+  if (props.mode === "resource-planner") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ResourceTimelineChart, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    TaskGanttChart,
+    {
+      ...props,
+      ref
+    }
+  );
+}
+function TaskGanttChartInner(props, ref) {
   const {
     tasks,
     dayWidth = 40,
@@ -7737,28 +8267,28 @@ function GanttChartInner(props, ref) {
     additionalColumns,
     taskListMenuCommands
   } = props;
-  const containerRef = (0, import_react13.useRef)(null);
-  const scrollContainerRef = (0, import_react13.useRef)(null);
-  const scrollContentRef = (0, import_react13.useRef)(null);
-  const [selectedTaskId, setSelectedTaskId] = (0, import_react13.useState)(null);
-  const [taskListHasRightShadow, setTaskListHasRightShadow] = (0, import_react13.useState)(false);
-  const [selectedChip, setSelectedChip] = (0, import_react13.useState)(null);
-  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
+  const containerRef = (0, import_react15.useRef)(null);
+  const scrollContainerRef = (0, import_react15.useRef)(null);
+  const scrollContentRef = (0, import_react15.useRef)(null);
+  const [selectedTaskId, setSelectedTaskId] = (0, import_react15.useState)(null);
+  const [taskListHasRightShadow, setTaskListHasRightShadow] = (0, import_react15.useState)(false);
+  const [selectedChip, setSelectedChip] = (0, import_react15.useState)(null);
+  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
-  const [editingTaskId, setEditingTaskId] = (0, import_react13.useState)(null);
-  const normalizedTasks = (0, import_react13.useMemo)(() => normalizeHierarchyTasks(tasks), [tasks]);
-  const isCustomWeekend = (0, import_react13.useMemo)(
+  const [editingTaskId, setEditingTaskId] = (0, import_react15.useState)(null);
+  const normalizedTasks = (0, import_react15.useMemo)(() => normalizeHierarchyTasks(tasks), [tasks]);
+  const isCustomWeekend = (0, import_react15.useMemo)(
     () => createCustomDayPredicate({ customDays, isWeekend: isWeekend3 }),
     [customDays, isWeekend3]
   );
-  const dateRange = (0, import_react13.useMemo)(() => getMultiMonthDays(normalizedTasks), [normalizedTasks]);
-  const [validationResult, setValidationResult] = (0, import_react13.useState)(null);
-  const [cascadeOverrides, setCascadeOverrides] = (0, import_react13.useState)(/* @__PURE__ */ new Map());
-  const gridWidth = (0, import_react13.useMemo)(
+  const dateRange = (0, import_react15.useMemo)(() => getMultiMonthDays(normalizedTasks), [normalizedTasks]);
+  const [validationResult, setValidationResult] = (0, import_react15.useState)(null);
+  const [cascadeOverrides, setCascadeOverrides] = (0, import_react15.useState)(/* @__PURE__ */ new Map());
+  const gridWidth = (0, import_react15.useMemo)(
     () => Math.round(dateRange.length * dayWidth),
     [dateRange.length, dayWidth]
   );
-  const visibleTasks = (0, import_react13.useMemo)(() => {
+  const visibleTasks = (0, import_react15.useMemo)(() => {
     const parentMap = new Map(normalizedTasks.map((t) => [t.id, t.parentId]));
     function isAnyAncestorCollapsed(parentId) {
       let current = parentId;
@@ -7774,11 +8304,11 @@ function GanttChartInner(props, ref) {
     }
     return tasks2;
   }, [normalizedTasks, collapsedParentIds, filterMode, taskFilter]);
-  const matchedTaskIds = (0, import_react13.useMemo)(() => {
+  const matchedTaskIds = (0, import_react15.useMemo)(() => {
     if (!taskFilter) return /* @__PURE__ */ new Set();
     return new Set(visibleTasks.filter(taskFilter).map((task) => task.id));
   }, [visibleTasks, taskFilter]);
-  const taskListHighlightedTaskIds = (0, import_react13.useMemo)(() => {
+  const taskListHighlightedTaskIds = (0, import_react15.useMemo)(() => {
     if (filterMode === "hide") {
       return /* @__PURE__ */ new Set();
     }
@@ -7789,23 +8319,23 @@ function GanttChartInner(props, ref) {
     matchedTaskIds.forEach((taskId) => mergedHighlightedTaskIds.add(taskId));
     return mergedHighlightedTaskIds;
   }, [filterMode, highlightedTaskIds, matchedTaskIds]);
-  const totalGridHeight = (0, import_react13.useMemo)(
+  const totalGridHeight = (0, import_react15.useMemo)(
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
   );
-  const monthStart = (0, import_react13.useMemo)(() => {
+  const monthStart = (0, import_react15.useMemo)(() => {
     if (dateRange.length === 0) {
       return new Date(Date.UTC((/* @__PURE__ */ new Date()).getUTCFullYear(), (/* @__PURE__ */ new Date()).getUTCMonth(), 1));
     }
     const firstDay = dateRange[0];
     return new Date(Date.UTC(firstDay.getUTCFullYear(), firstDay.getUTCMonth(), 1));
   }, [dateRange]);
-  const todayInRange = (0, import_react13.useMemo)(() => {
+  const todayInRange = (0, import_react15.useMemo)(() => {
     const now = /* @__PURE__ */ new Date();
     const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
     return dateRange.some((day) => day.getTime() === today.getTime());
   }, [dateRange]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
     const now = /* @__PURE__ */ new Date();
@@ -7817,7 +8347,7 @@ function GanttChartInner(props, ref) {
     const scrollLeft = Math.round(todayOffset + dayWidth / 2 - containerWidth * 0.3);
     container.scrollLeft = Math.max(0, scrollLeft);
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const container = scrollContainerRef.current;
     if (!container) return;
     const updateShadow = () => {
@@ -7829,7 +8359,7 @@ function GanttChartInner(props, ref) {
       container.removeEventListener("scroll", updateShadow);
     };
   }, []);
-  const scrollToToday = (0, import_react13.useCallback)(() => {
+  const scrollToToday = (0, import_react15.useCallback)(() => {
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
     const now = /* @__PURE__ */ new Date();
@@ -7841,7 +8371,7 @@ function GanttChartInner(props, ref) {
     const scrollLeft = Math.round(todayOffset + dayWidth / 2 - containerWidth * 0.3);
     container.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
   }, [dateRange, dayWidth]);
-  const scrollToTask = (0, import_react13.useCallback)((taskId) => {
+  const scrollToTask = (0, import_react15.useCallback)((taskId) => {
     const container = scrollContainerRef.current;
     if (!container || dateRange.length === 0) return;
     const task = tasks.find((t) => t.id === taskId);
@@ -7858,7 +8388,7 @@ function GanttChartInner(props, ref) {
     const scrollLeft = Math.round(taskOffset - dayWidth * 2);
     container.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
   }, [tasks, dateRange, dayWidth]);
-  const scrollToRow = (0, import_react13.useCallback)((taskId) => {
+  const scrollToRow = (0, import_react15.useCallback)((taskId) => {
     const container = scrollContainerRef.current;
     if (!container) return;
     const task = tasks.find((t) => t.id === taskId);
@@ -7870,15 +8400,15 @@ function GanttChartInner(props, ref) {
     setSelectedTaskId(taskId);
     container.scrollTo({ top: scrollTop, behavior: "smooth" });
   }, [tasks, visibleTasks, rowHeight]);
-  const [dragGuideLines, setDragGuideLines] = (0, import_react13.useState)(null);
-  const [draggedTaskOverride, setDraggedTaskOverride] = (0, import_react13.useState)(null);
-  const [previewTasksById, setPreviewTasksById] = (0, import_react13.useState)(/* @__PURE__ */ new Map());
-  (0, import_react13.useEffect)(() => {
+  const [dragGuideLines, setDragGuideLines] = (0, import_react15.useState)(null);
+  const [draggedTaskOverride, setDraggedTaskOverride] = (0, import_react15.useState)(null);
+  const [previewTasksById, setPreviewTasksById] = (0, import_react15.useState)(/* @__PURE__ */ new Map());
+  (0, import_react15.useEffect)(() => {
     const result = validateDependencies(tasks);
     setValidationResult(result);
     onValidateDependencies?.(result);
   }, [tasks, onValidateDependencies]);
-  const handleTaskChange = (0, import_react13.useCallback)((updatedTasks) => {
+  const handleTaskChange = (0, import_react15.useCallback)((updatedTasks) => {
     const updatedTask = updatedTasks[0];
     if (!updatedTask) return;
     const originalTask = tasks.find((t) => t.id === updatedTask.id);
@@ -7924,7 +8454,7 @@ function GanttChartInner(props, ref) {
     const cascadedTasks = disableConstraints ? [updatedTask] : universalCascade(updatedTask, newStart, newEnd, sourceTasks, businessDays, isCustomWeekend);
     onTasksChange?.(cascadedTasks);
   }, [tasks, onTasksChange, disableConstraints, editingTaskId, businessDays, isCustomWeekend]);
-  const handleDelete = (0, import_react13.useCallback)((taskId) => {
+  const handleDelete = (0, import_react15.useCallback)((taskId) => {
     const toDelete = /* @__PURE__ */ new Set([taskId]);
     function collectDescendants(parentId) {
       const children = getChildren(parentId, tasks);
@@ -7949,10 +8479,10 @@ function GanttChartInner(props, ref) {
     }
     toDelete.forEach((id) => onDelete?.(id));
   }, [tasks, onTasksChange, onDelete]);
-  const handleInsertAfter = (0, import_react13.useCallback)((taskId, newTask) => {
+  const handleInsertAfter = (0, import_react15.useCallback)((taskId, newTask) => {
     onInsertAfter?.(taskId, newTask);
   }, [onInsertAfter]);
-  const handleReorder = (0, import_react13.useCallback)((reorderedTasks, movedTaskId, inferredParentId) => {
+  const handleReorder = (0, import_react15.useCallback)((reorderedTasks, movedTaskId, inferredParentId) => {
     let updated = reorderedTasks;
     if (movedTaskId) {
       updated = updated.map((t) => {
@@ -7969,7 +8499,7 @@ function GanttChartInner(props, ref) {
     }
     onTasksChange?.(normalized);
   }, [onTasksChange, onReorder]);
-  const dependencyOverrides = (0, import_react13.useMemo)(() => {
+  const dependencyOverrides = (0, import_react15.useMemo)(() => {
     const map = new Map(cascadeOverrides);
     if (draggedTaskOverride) {
       map.set(draggedTaskOverride.taskId, {
@@ -7979,25 +8509,25 @@ function GanttChartInner(props, ref) {
     }
     return map;
   }, [cascadeOverrides, draggedTaskOverride]);
-  const handleCascadeProgress = (0, import_react13.useCallback)((overrides, previewTasks = []) => {
+  const handleCascadeProgress = (0, import_react15.useCallback)((overrides, previewTasks = []) => {
     setCascadeOverrides(new Map(overrides));
     setPreviewTasksById(new Map(previewTasks.map((task) => [task.id, task])));
   }, []);
-  const previewNormalizedTasks = (0, import_react13.useMemo)(() => {
+  const previewNormalizedTasks = (0, import_react15.useMemo)(() => {
     if (previewTasksById.size === 0) return normalizedTasks;
     return normalizedTasks.map((task) => previewTasksById.get(task.id) ?? task);
   }, [normalizedTasks, previewTasksById]);
-  const previewVisibleTasks = (0, import_react13.useMemo)(() => {
+  const previewVisibleTasks = (0, import_react15.useMemo)(() => {
     if (previewTasksById.size === 0) return visibleTasks;
     return visibleTasks.map((task) => previewTasksById.get(task.id) ?? task);
   }, [visibleTasks, previewTasksById]);
-  const handleCascade = (0, import_react13.useCallback)((cascadedTasks) => {
+  const handleCascade = (0, import_react15.useCallback)((cascadedTasks) => {
     onTasksChange?.(cascadedTasks);
   }, [tasks, onTasksChange]);
-  const handleTaskSelect = (0, import_react13.useCallback)((taskId) => {
+  const handleTaskSelect = (0, import_react15.useCallback)((taskId) => {
     setSelectedTaskId(taskId);
   }, []);
-  const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react13.useCallback)((parentId) => {
+  const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react15.useCallback)((parentId) => {
     setInternalCollapsedParentIds((prev) => {
       const next = new Set(prev);
       if (next.has(parentId)) {
@@ -8008,20 +8538,20 @@ function GanttChartInner(props, ref) {
       return next;
     });
   }, []);
-  const allParentIds = (0, import_react13.useMemo)(() => {
+  const allParentIds = (0, import_react15.useMemo)(() => {
     return new Set(
       normalizedTasks.filter((t) => isTaskParent(t.id, normalizedTasks)).map((t) => t.id)
     );
   }, [normalizedTasks]);
-  const handleCollapseAll = (0, import_react13.useCallback)(() => {
+  const handleCollapseAll = (0, import_react15.useCallback)(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(allParentIds);
   }, [allParentIds, externalCollapsedParentIds]);
-  const handleExpandAll = (0, import_react13.useCallback)(() => {
+  const handleExpandAll = (0, import_react15.useCallback)(() => {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(/* @__PURE__ */ new Set());
   }, [externalCollapsedParentIds]);
-  const exportToPdf = (0, import_react13.useCallback)(async (options) => {
+  const exportToPdf = (0, import_react15.useCallback)(async (options) => {
     const sourceContainer = containerRef.current;
     const sourceContent = scrollContentRef.current;
     if (!sourceContainer || !sourceContent || typeof window === "undefined" || typeof document === "undefined") {
@@ -8057,7 +8587,7 @@ function GanttChartInner(props, ref) {
       orientation: options?.orientation
     });
   }, [showTaskList, showChart]);
-  (0, import_react13.useImperativeHandle)(
+  (0, import_react15.useImperativeHandle)(
     ref,
     () => ({
       scrollToToday,
@@ -8080,7 +8610,7 @@ function GanttChartInner(props, ref) {
     }
     return depth;
   }
-  const handlePromoteTask = (0, import_react13.useCallback)((taskId) => {
+  const handlePromoteTask = (0, import_react15.useCallback)((taskId) => {
     if (onPromoteTask) {
       onPromoteTask(taskId);
       return;
@@ -8110,7 +8640,7 @@ function GanttChartInner(props, ref) {
     ]);
     onTasksChange?.(reorderedTasks);
   }, [tasks, onTasksChange, onPromoteTask]);
-  const handleDemoteTask = (0, import_react13.useCallback)((taskId, newParentId) => {
+  const handleDemoteTask = (0, import_react15.useCallback)((taskId, newParentId) => {
     if (onDemoteTask) {
       onDemoteTask(taskId, newParentId);
       return;
@@ -8151,7 +8681,7 @@ function GanttChartInner(props, ref) {
     };
     onTasksChange?.([updatedDemotedTask]);
   }, [tasks, onTasksChange, onDemoteTask]);
-  const handleUngroupTask = (0, import_react13.useCallback)((taskId) => {
+  const handleUngroupTask = (0, import_react15.useCallback)((taskId) => {
     if (onUngroupTask) {
       onUngroupTask(taskId);
       return;
@@ -8178,8 +8708,8 @@ function GanttChartInner(props, ref) {
     }
     onDelete?.(taskId);
   }, [tasks, onTasksChange, onDelete, onUngroupTask]);
-  const panStateRef = (0, import_react13.useRef)(null);
-  const handlePanStart = (0, import_react13.useCallback)((e) => {
+  const panStateRef = (0, import_react15.useRef)(null);
+  const handlePanStart = (0, import_react15.useCallback)((e) => {
     if (e.button !== 0) return;
     const target = e.target;
     if (target.closest("[data-taskbar]")) return;
@@ -8200,7 +8730,7 @@ function GanttChartInner(props, ref) {
     container.style.cursor = "grabbing";
     e.preventDefault();
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const handlePanMove = (e) => {
       const pan = panStateRef.current;
       if (!pan?.active) return;
@@ -8222,15 +8752,15 @@ function GanttChartInner(props, ref) {
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "gantt-container", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "gantt-container", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref: scrollContainerRef,
       className: "gantt-scrollContainer",
       style: { height: containerHeight ?? "auto", cursor: "grab" },
       onMouseDown: handlePanStart,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: scrollContentRef, className: "gantt-scrollContent", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: scrollContentRef, className: "gantt-scrollContent", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           TaskList,
           {
             tasks: normalizedTasks,
@@ -8268,13 +8798,13 @@ function GanttChartInner(props, ref) {
             taskListMenuCommands
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "div",
           {
             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_runtime15.jsx)("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 TimeScaleHeader_default,
                 {
                   days: dateRange,
@@ -8284,7 +8814,7 @@ function GanttChartInner(props, ref) {
                   isCustomWeekend
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 "div",
                 {
                   className: "gantt-taskArea",
@@ -8293,7 +8823,7 @@ function GanttChartInner(props, ref) {
                     width: `${gridWidth}px`
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       GridBackground_default,
                       {
                         dateRange,
@@ -8303,8 +8833,8 @@ function GanttChartInner(props, ref) {
                         isCustomWeekend
                       }
                     ),
-                    todayInRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    todayInRange && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       DependencyLines_default,
                       {
                         tasks: previewVisibleTasks,
@@ -8320,7 +8850,7 @@ function GanttChartInner(props, ref) {
                         weekendPredicate: isCustomWeekend
                       }
                     ),
-                    dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       DragGuideLines_default,
                       {
                         isDragging: dragGuideLines.isDragging,
@@ -8330,7 +8860,7 @@ function GanttChartInner(props, ref) {
                         totalHeight: totalGridHeight
                       }
                     ),
-                    visibleTasks.map((task, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    visibleTasks.map((task, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       TaskRow_default,
                       {
                         task,
@@ -8374,13 +8904,14 @@ function GanttChartInner(props, ref) {
     }
   ) });
 }
-var GanttChart = (0, import_react13.forwardRef)(GanttChartInner);
+var TaskGanttChart = (0, import_react15.forwardRef)(TaskGanttChartInner);
+var GanttChart = (0, import_react15.forwardRef)(GanttChartInner);
 GanttChart.displayName = "GanttChart";
 
 // src/components/ui/Button.tsx
-var import_react14 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Button = import_react14.default.forwardRef(
+var import_react16 = __toESM(require("react"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Button = import_react16.default.forwardRef(
   ({ className, variant = "default", size = "default", children, ...props }, ref) => {
     const classes = [
       "gantt-btn",
@@ -8388,7 +8919,7 @@ var Button = import_react14.default.forwardRef(
       size !== "default" ? `gantt-btn-${size}` : "",
       className || ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { ref, className: classes, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { ref, className: classes, ...props, children });
   }
 );
 Button.displayName = "Button";
@@ -8434,6 +8965,7 @@ var nameContains = (substring, caseSensitive = false) => (task) => {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  ResourceTimelineChart,
   TaskList,
   TaskRow,
   TimeScaleHeader,
@@ -8497,6 +9029,7 @@ var nameContains = (substring, caseSensitive = false) => (task) => {
   isTaskParent,
   isToday,
   isWeekend,
+  layoutResourceTimelineItems,
   moveTaskRange,
   moveTaskWithCascade,
   nameContains,