@j3m-quantum/ui 1.10.0 → 1.11.1

package/dist/index.cjs

@@ -43,6 +43,15 @@ var ResizablePrimitive = require('react-resizable-panels');
 var reactLeaflet = require('react-leaflet');
 var reactTable = require('@tanstack/react-table');
 var dateFns = require('date-fns');
+var core = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
+var usehooks = require('@uidotdev/usehooks');
+var jotai = require('jotai');
+var throttle = require('lodash.throttle');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var reactDom = require('react-dom');
+var tunnel = require('tunnel-rat');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -93,6 +102,8 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
+var throttle__default = /*#__PURE__*/_interopDefault(throttle);
+var tunnel__default = /*#__PURE__*/_interopDefault(tunnel);
 
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
@@ -6828,7 +6839,7 @@ function PlanningWeekCommentPopover({
       onCommentClick(comment);
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -6908,7 +6919,7 @@ function PlanningWeekCommentPopover({
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
                     ]
@@ -7435,7 +7446,7 @@ function DeliveryCommentPopover({
       setNewCommentText("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -7481,7 +7492,7 @@ function DeliveryCommentPopover({
               /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
               ] }, comment.id)) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
@@ -7575,7 +7586,7 @@ function ProductionCommentSection({
       setNewComment("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -7587,7 +7598,7 @@ function ProductionCommentSection({
     comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-2.5 space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
     ] }, comment.id)) }),
@@ -8531,7 +8542,7 @@ function CommentPopover({
       setNewCommentText("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -8599,7 +8610,7 @@ function CommentPopover({
                     ),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
                   ]
@@ -9318,7 +9329,7 @@ function generateLoadingWeek(date) {
   const today = /* @__PURE__ */ new Date();
   today.setHours(0, 0, 0, 0);
   const isCurrentWeek = monday <= today && today <= friday;
-  const formatDate2 = (d) => {
+  const formatDate3 = (d) => {
     return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
   };
   return {
@@ -9326,7 +9337,7 @@ function generateLoadingWeek(date) {
     label: `W${getLoadingISOWeek(monday).toString().padStart(2, "0")}`,
     startDate: monday,
     endDate: friday,
-    dateRange: `${formatDate2(monday)} - ${formatDate2(friday)}`,
+    dateRange: `${formatDate3(monday)} - ${formatDate3(friday)}`,
     isCurrentWeek
   };
 }
@@ -9985,7 +9996,7 @@ function CommentsSection({
 }) {
   const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
   const [addDialogOpen, setAddDialogOpen] = React27__namespace.useState(false);
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -10029,7 +10040,7 @@ function CommentsSection({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
               comment.supplierName && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[9px] px-1.5 py-0 h-4", children: comment.prefixName ? `${comment.supplierName} - ${comment.prefixName}` : comment.supplierName })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: comment.text })
         ] }, comment.id)) })
@@ -11021,11 +11032,11 @@ function getVisibleHours(visibleHours, singleDayEvents) {
 function getCalendarCells(selectedDate) {
   const currentYear = selectedDate.getFullYear();
   const currentMonth = selectedDate.getMonth();
-  const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+  const getDaysInMonth2 = (year, month) => new Date(year, month + 1, 0).getDate();
   const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
-  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const daysInMonth = getDaysInMonth2(currentYear, currentMonth);
   const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
-  const daysInPrevMonth = getDaysInMonth(currentYear, currentMonth - 1);
+  const daysInPrevMonth = getDaysInMonth2(currentYear, currentMonth - 1);
   const totalDays = firstDayOfMonth + daysInMonth;
   const prevMonthCells = Array.from({ length: firstDayOfMonth }, (_, i) => ({
     day: daysInPrevMonth - firstDayOfMonth + i + 1,
@@ -13746,6 +13757,1569 @@ function CalendarView({
       return null;
   }
 }
+var draggingAtom = jotai.atom(false);
+var scrollXAtom = jotai.atom(0);
+var useGanttDragging = () => jotai.useAtom(draggingAtom);
+var useGanttScrollX = () => jotai.useAtom(scrollXAtom);
+var getDifferenceIn = (range) => {
+  if (range === "weekly") {
+    return dateFns.differenceInWeeks;
+  }
+  return dateFns.differenceInMonths;
+};
+var getInnerDifferenceIn = (range) => {
+  if (range === "weekly") {
+    return dateFns.differenceInDays;
+  }
+  return dateFns.differenceInDays;
+};
+var getStartOf = (range) => {
+  if (range === "weekly") {
+    return (date) => dateFns.startOfWeek(date, { weekStartsOn: 1 });
+  }
+  return dateFns.startOfMonth;
+};
+var getEndOf = (range) => {
+  if (range === "weekly") {
+    return (date) => dateFns.endOfWeek(date, { weekStartsOn: 1 });
+  }
+  return dateFns.endOfMonth;
+};
+var getAddRange = (range) => {
+  if (range === "weekly") {
+    return dateFns.addWeeks;
+  }
+  return dateFns.addMonths;
+};
+var getDateByMousePosition = (context, mouseX) => {
+  const columnWidth = context.columnWidth * context.zoom / 100;
+  const offset = Math.floor(mouseX / columnWidth);
+  const addRange = getAddRange(context.range);
+  if (context.range === "weekly") {
+    const firstYear = context.timelineData[0].year;
+    const weekStart = getWeekStartDate(firstYear, 1);
+    const targetWeekStart = addRange(weekStart, offset);
+    const pixelsPerDay2 = columnWidth / 7;
+    const dayOffset2 = Math.floor(mouseX % columnWidth / pixelsPerDay2);
+    return dateFns.addDays(targetWeekStart, dayOffset2);
+  }
+  const timelineStartDate = new Date(context.timelineData[0].year, 0, 1);
+  const month = addRange(timelineStartDate, offset);
+  const daysInMonth = dateFns.getDaysInMonth(month);
+  const pixelsPerDay = Math.round(columnWidth / daysInMonth);
+  const dayOffset = Math.floor(mouseX % columnWidth / pixelsPerDay);
+  return dateFns.addDays(month, dayOffset);
+};
+var createInitialTimelineData = (today) => {
+  const data = [];
+  data.push(
+    { year: today.getFullYear() - 1, quarters: new Array(4).fill(null) },
+    { year: today.getFullYear(), quarters: new Array(4).fill(null) },
+    { year: today.getFullYear() + 1, quarters: new Array(4).fill(null) }
+  );
+  for (const yearObj of data) {
+    yearObj.quarters = new Array(4).fill(null).map((_, quarterIndex) => ({
+      months: new Array(3).fill(null).map((_2, monthIndex) => {
+        const month = quarterIndex * 3 + monthIndex;
+        return {
+          days: dateFns.getDaysInMonth(new Date(yearObj.year, month, 1))
+        };
+      })
+    }));
+  }
+  return data;
+};
+var getOffset = (date, timelineStartDate, context) => {
+  const parsedColumnWidth = context.columnWidth * context.zoom / 100;
+  const differenceIn = getDifferenceIn(context.range);
+  const startOf = getStartOf(context.range);
+  const fullColumns = differenceIn(startOf(date), startOf(timelineStartDate));
+  if (context.range === "weekly") {
+    const weekStart = startOf(date);
+    const dayOfWeek = dateFns.differenceInDays(date, weekStart);
+    const pixelsPerDay2 = parsedColumnWidth / 7;
+    return fullColumns * parsedColumnWidth + dayOfWeek * pixelsPerDay2;
+  }
+  const partialColumns = date.getDate();
+  const daysInMonth = dateFns.getDaysInMonth(date);
+  const pixelsPerDay = parsedColumnWidth / daysInMonth;
+  return fullColumns * parsedColumnWidth + partialColumns * pixelsPerDay;
+};
+var getWidth = (startAt, endAt, context) => {
+  const parsedColumnWidth = context.columnWidth * context.zoom / 100;
+  if (!endAt) {
+    return parsedColumnWidth * 2;
+  }
+  const startOf = getStartOf(context.range);
+  if (context.range === "weekly") {
+    const pixelsPerDay = parsedColumnWidth / 7;
+    const daysDiff = dateFns.differenceInDays(endAt, startAt);
+    return Math.max(pixelsPerDay, daysDiff * pixelsPerDay);
+  }
+  const differenceIn = getDifferenceIn(context.range);
+  const daysInStartMonth = dateFns.getDaysInMonth(startAt);
+  const pixelsPerDayInStartMonth = parsedColumnWidth / daysInStartMonth;
+  if (dateFns.isSameDay(startAt, endAt)) {
+    return pixelsPerDayInStartMonth;
+  }
+  const innerDifferenceIn = getInnerDifferenceIn(context.range);
+  if (dateFns.isSameDay(startOf(startAt), startOf(endAt))) {
+    return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth;
+  }
+  const startRangeOffset = daysInStartMonth - dateFns.getDate(startAt);
+  const endRangeOffset = dateFns.getDate(endAt);
+  const fullRangeOffset = differenceIn(startOf(endAt), startOf(startAt));
+  const daysInEndMonth = dateFns.getDaysInMonth(endAt);
+  const pixelsPerDayInEndMonth = parsedColumnWidth / daysInEndMonth;
+  return (fullRangeOffset - 1) * parsedColumnWidth + startRangeOffset * pixelsPerDayInStartMonth + endRangeOffset * pixelsPerDayInEndMonth;
+};
+var calculateInnerOffset = (date, range, columnWidth) => {
+  const startOf = getStartOf(range);
+  const endOf = getEndOf(range);
+  const startOfRange = startOf(date);
+  const endOfRange = endOf(date);
+  if (range === "weekly") {
+    const dayOfWeek = dateFns.differenceInDays(date, startOfRange);
+    return dayOfWeek / 7 * columnWidth;
+  }
+  const totalRangeDays = dateFns.differenceInDays(endOfRange, startOfRange);
+  const dayOfMonth = date.getDate();
+  return dayOfMonth / totalRangeDays * columnWidth;
+};
+var GanttContext = React27.createContext({
+  zoom: 100,
+  range: "monthly",
+  columnWidth: 50,
+  headerHeight: 60,
+  sidebarWidth: 300,
+  rowHeight: 36,
+  onAddItem: void 0,
+  placeholderLength: 2,
+  timelineData: [],
+  ref: null,
+  scrollToFeature: void 0,
+  expandedGroups: {},
+  setGroupExpanded: () => {
+  }
+});
+var GanttContentHeader = ({
+  title,
+  columns,
+  renderHeaderItem
+}) => {
+  const id = React27.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "sticky top-0 z-20 grid w-full shrink-0 bg-background/95 backdrop-blur-sm",
+      style: { height: "var(--gantt-header-height)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky inline-flex whitespace-nowrap px-3 py-2 text-muted-foreground text-xs",
+            style: {
+              left: "var(--gantt-sidebar-width)"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: title })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid w-full",
+            style: {
+              gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`
+            },
+            children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "shrink-0 border-border/50 border-b py-1 text-center text-xs",
+                children: renderHeaderItem(index)
+              },
+              `${id}-${index}`
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+var getWeeksInYear = (year) => {
+  const dec28 = new Date(year, 11, 28);
+  return dateFns.getISOWeek(dec28);
+};
+var getWeekStartDate = (year, weekNumber) => {
+  const jan4 = new Date(year, 0, 4);
+  const week1Start = dateFns.startOfWeek(jan4, { weekStartsOn: 1 });
+  return dateFns.addWeeks(week1Start, weekNumber - 1);
+};
+var WeeklyHeader = () => {
+  const gantt = React27.useContext(GanttContext);
+  const weeklyData = React27.useMemo(() => {
+    const result = [];
+    for (const yearData of gantt.timelineData) {
+      const year = yearData.year;
+      const weeksInYear = getWeeksInYear(year);
+      const weeks = [];
+      for (let w = 1; w <= weeksInYear; w++) {
+        weeks.push({
+          weekNumber: w,
+          startDate: getWeekStartDate(year, w)
+        });
+      }
+      result.push({ year, weeks });
+    }
+    return result;
+  }, [gantt.timelineData]);
+  return weeklyData.map((yearData) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GanttContentHeader,
+      {
+        columns: yearData.weeks.length,
+        renderHeaderItem: (weekIndex) => {
+          const week = yearData.weeks[weekIndex];
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+            "W",
+            week.weekNumber.toString().padStart(2, "0")
+          ] }) });
+        },
+        title: `${yearData.year}`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(GanttColumns, { columns: yearData.weeks.length })
+  ] }, yearData.year));
+};
+var MonthlyHeader = () => {
+  const gantt = React27.useContext(GanttContext);
+  return gantt.timelineData.map((year) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GanttContentHeader,
+      {
+        columns: year.quarters.flatMap((quarter) => quarter.months).length,
+        renderHeaderItem: (item) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: dateFns.format(new Date(year.year, item, 1), "MMM") }),
+        title: `${year.year}`
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GanttColumns,
+      {
+        columns: year.quarters.flatMap((quarter) => quarter.months).length
+      }
+    )
+  ] }, year.year));
+};
+var QuarterlyHeader = () => {
+  const gantt = React27.useContext(GanttContext);
+  return gantt.timelineData.map(
+    (year) => year.quarters.map((quarter, quarterIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "relative flex flex-col",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            GanttContentHeader,
+            {
+              columns: quarter.months.length,
+              renderHeaderItem: (item) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: dateFns.format(new Date(year.year, quarterIndex * 3 + item, 1), "MMM") }),
+              title: `Q${quarterIndex + 1} ${year.year}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(GanttColumns, { columns: quarter.months.length })
+        ]
+      },
+      `${year.year}-${quarterIndex}`
+    ))
+  );
+};
+var headers = {
+  weekly: WeeklyHeader,
+  monthly: MonthlyHeader,
+  quarterly: QuarterlyHeader
+};
+var GanttHeader = ({ className }) => {
+  const gantt = React27.useContext(GanttContext);
+  const Header2 = headers[gantt.range];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "-space-x-px flex h-full w-max divide-x-2 divide-border",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Header2, {})
+    }
+  );
+};
+var GanttSidebarItem = ({
+  feature,
+  onSelectItem,
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const tempEndAt = feature.endAt && dateFns.isSameDay(feature.startAt, feature.endAt) ? dateFns.addDays(feature.endAt, 1) : feature.endAt;
+  const duration = tempEndAt ? dateFns.formatDistance(feature.startAt, tempEndAt) : `${dateFns.formatDistance(feature.startAt, /* @__PURE__ */ new Date())} so far`;
+  const handleClick = (event) => {
+    if (event.target === event.currentTarget) {
+      gantt.scrollToFeature?.(feature);
+      onSelectItem?.(feature.id);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      gantt.scrollToFeature?.(feature);
+      onSelectItem?.(feature.id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex items-center gap-2.5 px-2.5 py-1.5 text-xs hover:bg-muted/50 border-b border-border/30",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      style: {
+        height: "var(--gantt-row-height)"
+      },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none h-2 w-2 shrink-0 rounded-full",
+            style: {
+              backgroundColor: feature.status.color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pointer-events-none flex-1 truncate text-left font-medium", children: feature.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pointer-events-none text-muted-foreground text-[11px]", children: duration })
+      ]
+    },
+    feature.id
+  );
+};
+var GanttSidebarHeader = ({
+  title = "Tasks",
+  durationLabel = "Duration"
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "sticky top-0 z-10 flex shrink-0 items-end justify-between gap-2.5 border-border/50 border-b bg-background/95 px-2.5 py-2 font-medium text-muted-foreground text-xs backdrop-blur-sm",
+    style: { height: "var(--gantt-header-height)" },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 truncate text-left", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0", children: durationLabel })
+    ]
+  }
+);
+function computeGroupRange(features) {
+  if (features.length === 0) {
+    return { start: null, end: null };
+  }
+  let minStart = features[0].startAt;
+  let maxEnd = features[0].endAt;
+  for (const feature of features) {
+    if (feature.startAt < minStart) {
+      minStart = feature.startAt;
+    }
+    if (feature.endAt > maxEnd) {
+      maxEnd = feature.endAt;
+    }
+  }
+  return { start: minStart, end: maxEnd };
+}
+var GanttGroupSummaryBar = React27.memo(({
+  group,
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const timelineStartDate = React27.useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const { start: groupStart, end: groupEnd } = React27.useMemo(
+    () => computeGroupRange(group.features),
+    [group.features]
+  );
+  const offset = React27.useMemo(() => {
+    if (!groupStart) return 0;
+    return Math.round(getOffset(groupStart, timelineStartDate, gantt));
+  }, [groupStart, timelineStartDate, gantt]);
+  const width = React27.useMemo(() => {
+    if (!groupStart || !groupEnd) return 0;
+    return Math.round(getWidth(groupStart, groupEnd, gantt));
+  }, [groupStart, groupEnd, gantt]);
+  if (!groupStart || !groupEnd || width === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute pointer-events-none",
+        className
+      ),
+      style: {
+        height: "calc(var(--gantt-row-height) - 12px)",
+        top: "6px",
+        width,
+        left: offset
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full w-full rounded-sm border border-border/60 bg-muted/40 shadow-sm",
+          style: {
+            // Subtle gradient for depth
+            background: "linear-gradient(180deg, hsl(var(--muted) / 0.5) 0%, hsl(var(--muted) / 0.3) 100%)"
+          }
+        }
+      )
+    }
+  );
+});
+GanttGroupSummaryBar.displayName = "GanttGroupSummaryBar";
+var GanttCollapsibleSidebarGroup = ({
+  group,
+  children,
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const isExpanded = gantt.expandedGroups[group.id] ?? true;
+  const { start: groupStart, end: groupEnd } = React27.useMemo(
+    () => computeGroupRange(group.features),
+    [group.features]
+  );
+  const duration = React27.useMemo(() => {
+    if (!groupStart || !groupEnd) return null;
+    return dateFns.formatDistance(groupStart, groupEnd);
+  }, [groupStart, groupEnd]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Collapsible,
+    {
+      open: isExpanded,
+      onOpenChange: (open) => gantt.setGroupExpanded(group.id, open),
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            className: "flex w-full items-center gap-2 px-2.5 py-2 text-left font-medium text-xs hover:bg-muted/30 border-b border-border/50 bg-background",
+            style: { height: "var(--gantt-row-height)" },
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronRightIcon,
+                {
+                  className: cn(
+                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ),
+              group.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: group.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: group.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] text-muted-foreground", children: group.features.length }),
+              duration && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: duration })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "[&[data-state]]:!opacity-100", children })
+      ]
+    }
+  );
+};
+var GanttCollapsibleTimelineGroup = ({
+  group,
+  children,
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const isExpanded = gantt.expandedGroups[group.id] ?? true;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Collapsible,
+    {
+      open: isExpanded,
+      onOpenChange: (open) => gantt.setGroupExpanded(group.id, open),
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative w-full border-b border-border/50",
+            style: { height: "var(--gantt-row-height)" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(GanttGroupSummaryBar, { group })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "[&[data-state]]:!opacity-100", children })
+      ]
+    }
+  );
+};
+var GanttSidebarGroup = ({
+  children,
+  name,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: "w-full truncate px-2.5 py-2 text-left font-medium text-muted-foreground text-xs border-b border-border/50 bg-background",
+      style: { height: "var(--gantt-row-height)" },
+      children: name
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+] });
+var GanttSidebar = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: cn(
+      "sticky left-0 z-30 h-max min-h-full border-border/50 border-r bg-background",
+      className
+    ),
+    style: { width: "var(--gantt-sidebar-width)" },
+    "data-roadmap-ui": "gantt-sidebar",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(GanttSidebarHeader, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+    ]
+  }
+);
+var GanttAddFeatureHelper = ({
+  top,
+  className
+}) => {
+  const [scrollX] = useGanttScrollX();
+  const gantt = React27.useContext(GanttContext);
+  const [mousePosition, mouseRef] = usehooks.useMouse();
+  const handleClick = () => {
+    const ganttRect = gantt.ref?.current?.getBoundingClientRect();
+    const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
+    const currentDate = getDateByMousePosition(gantt, x);
+    gantt.onAddItem?.(currentDate);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("absolute top-0 w-full px-0.5", className),
+      ref: mouseRef,
+      style: {
+        marginTop: -gantt.rowHeight / 2,
+        transform: `translateY(${top}px)`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "flex h-full w-full items-center justify-center rounded-sm border border-dashed p-2",
+          onClick: handleClick,
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.PlusIcon,
+            {
+              className: "pointer-events-none select-none text-muted-foreground",
+              size: 16
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var GanttColumn = ({
+  index,
+  isColumnSecondary
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const [dragging] = useGanttDragging();
+  const [mousePosition, mouseRef] = usehooks.useMouse();
+  const [hovering, setHovering] = React27.useState(false);
+  const [windowScroll] = usehooks.useWindowScroll();
+  const handleMouseEnter = () => setHovering(true);
+  const handleMouseLeave = () => setHovering(false);
+  const top = usehooks.useThrottle(
+    mousePosition.y - (mouseRef.current?.getBoundingClientRect().y ?? 0) - (windowScroll.y ?? 0),
+    10
+  );
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable column"
+    // biome-ignore lint/nursery/noNoninteractiveElementInteractions: "This is a clickable column"
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "group relative h-full overflow-hidden",
+          isColumnSecondary?.(index) ? "bg-muted/30" : ""
+        ),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ref: mouseRef,
+        children: !dragging && hovering && gantt.onAddItem ? /* @__PURE__ */ jsxRuntime.jsx(GanttAddFeatureHelper, { top }) : null
+      }
+    )
+  );
+};
+var GanttColumns = ({
+  columns,
+  isColumnSecondary
+}) => {
+  const id = React27.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "divide grid h-full w-full divide-x divide-border",
+      style: {
+        gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`
+      },
+      children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        GanttColumn,
+        {
+          index,
+          isColumnSecondary
+        },
+        `${id}-${index}`
+      ))
+    }
+  );
+};
+var GanttGridLines = React27.memo(({
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const id = React27.useId();
+  const { columns, monthBoundaryIndices } = React27.useMemo(() => {
+    let totalColumns = 0;
+    const monthIndices = [];
+    if (gantt.range === "weekly") {
+      let weekIndex = 0;
+      for (const yearData of gantt.timelineData) {
+        const weeksInYear = getWeeksInYear(yearData.year);
+        let currentMonth = -1;
+        for (let w = 1; w <= weeksInYear; w++) {
+          const weekStart = getWeekStartDate(yearData.year, w);
+          const monthOfWeek = weekStart.getMonth();
+          if (monthOfWeek !== currentMonth) {
+            monthIndices.push(weekIndex);
+            currentMonth = monthOfWeek;
+          }
+          weekIndex++;
+        }
+        totalColumns += weeksInYear;
+      }
+    } else {
+      for (const yearData of gantt.timelineData) {
+        const monthsInYear = yearData.quarters.flatMap((q) => q.months).length;
+        totalColumns += monthsInYear;
+      }
+    }
+    return { columns: totalColumns, monthBoundaryIndices: monthIndices };
+  }, [gantt.timelineData, gantt.range]);
+  const columnWidth = gantt.columnWidth * gantt.zoom / 100;
+  const totalWidth = columns * columnWidth;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute top-0 left-0 h-full",
+        className
+      ),
+      style: {
+        marginTop: "var(--gantt-header-height)",
+        width: totalWidth
+      },
+      children: Array.from({ length: columns + 1 }).map((_, index) => {
+        const isMonthBoundary = gantt.range === "weekly" && monthBoundaryIndices.includes(index);
+        const x = Math.round(index * columnWidth);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute top-0 bottom-0",
+            style: {
+              left: x,
+              width: isMonthBoundary ? "2px" : "1px",
+              backgroundColor: isMonthBoundary ? "hsl(var(--foreground) / 0.25)" : "hsl(var(--border) / 0.8)"
+            }
+          },
+          `${id}-grid-${index}`
+        );
+      })
+    }
+  );
+});
+GanttGridLines.displayName = "GanttGridLines";
+var GanttCreateMarkerTrigger = ({
+  onCreateMarker,
+  className
+}) => {
+  const gantt = React27.useContext(GanttContext);
+  const [mousePosition, mouseRef] = usehooks.useMouse();
+  const [windowScroll] = usehooks.useWindowScroll();
+  const x = usehooks.useThrottle(
+    mousePosition.x - (mouseRef.current?.getBoundingClientRect().x ?? 0) - (windowScroll.x ?? 0),
+    10
+  );
+  const date = getDateByMousePosition(gantt, x);
+  const handleClick = () => onCreateMarker(date);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "group pointer-events-none absolute top-0 left-0 h-full w-full select-none overflow-visible",
+        className
+      ),
+      ref: mouseRef,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "-ml-2 pointer-events-auto sticky top-6 z-20 flex w-4 flex-col items-center justify-center gap-1 overflow-visible opacity-0 group-hover:opacity-100",
+          style: { transform: `translateX(${x}px)` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "z-50 inline-flex h-4 w-4 items-center justify-center rounded-full bg-card",
+                onClick: handleClick,
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "text-muted-foreground", size: 12 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap rounded-sm border border-border/50 bg-background/95 px-2 py-1 text-foreground text-xs backdrop-blur-sm", children: dateFns.formatDate(date, "MMM dd, yyyy") })
+          ]
+        }
+      )
+    }
+  );
+};
+var GanttFeatureDragHelper = ({
+  direction,
+  featureId,
+  date
+}) => {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = core.useDraggable({
+    id: `feature-drag-helper-${featureId}`
+  });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "group -translate-y-1/2 !cursor-col-resize absolute top-1/2 z-[3] h-full w-6 rounded-sm outline-none",
+        direction === "left" ? "-left-2.5" : "-right-2.5"
+      ),
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "-translate-y-1/2 absolute top-1/2 h-[80%] w-1 rounded-sm bg-muted-foreground opacity-0 transition-all",
+              direction === "left" ? "left-2.5" : "right-2.5",
+              direction === "left" ? "group-hover:left-0" : "group-hover:right-0",
+              isPressed && (direction === "left" ? "left-0" : "right-0"),
+              "group-hover:opacity-100",
+              isPressed && "opacity-100"
+            )
+          }
+        ),
+        date && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "-translate-x-1/2 absolute top-10 hidden whitespace-nowrap rounded-sm border border-border/50 bg-background/95 px-2 py-1 text-foreground text-xs backdrop-blur-sm group-hover:block",
+              isPressed && "block"
+            ),
+            children: dateFns.format(date, "MMM dd, yyyy")
+          }
+        )
+      ]
+    }
+  );
+};
+var GanttFeatureItemCard = ({
+  id,
+  children
+}) => {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = core.useDraggable({ id });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full w-full rounded-sm border bg-background px-2 py-1.5 text-xs shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full items-center justify-between gap-2 text-left",
+        isPressed && "cursor-grabbing"
+      ),
+      ...attributes,
+      ...listeners,
+      ref: setNodeRef,
+      children
+    }
+  ) });
+};
+var GanttFeatureItem = ({
+  onMove,
+  contextMenuActions,
+  onEdit,
+  onDelete,
+  onDuplicate,
+  children,
+  className,
+  ...feature
+}) => {
+  const [scrollX] = useGanttScrollX();
+  const gantt = React27.useContext(GanttContext);
+  const timelineStartDate = React27.useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const [startAt, setStartAt] = React27.useState(feature.startAt);
+  const [endAt, setEndAt] = React27.useState(feature.endAt);
+  const width = React27.useMemo(
+    () => Math.round(getWidth(startAt, endAt, gantt)),
+    [startAt, endAt, gantt]
+  );
+  const offset = React27.useMemo(
+    () => Math.round(getOffset(startAt, timelineStartDate, gantt)),
+    [startAt, timelineStartDate, gantt]
+  );
+  const addRange = React27.useMemo(() => getAddRange(gantt.range), [gantt.range]);
+  const [mousePosition] = usehooks.useMouse();
+  const [previousMouseX, setPreviousMouseX] = React27.useState(0);
+  const [previousStartAt, setPreviousStartAt] = React27.useState(startAt);
+  const [previousEndAt, setPreviousEndAt] = React27.useState(endAt);
+  const mouseSensor = core.useSensor(core.MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  const handleItemDragStart = React27.useCallback(() => {
+    setPreviousMouseX(mousePosition.x);
+    setPreviousStartAt(startAt);
+    setPreviousEndAt(endAt);
+  }, [mousePosition.x, startAt, endAt]);
+  const handleItemDragMove = React27.useCallback(() => {
+    const currentDate = getDateByMousePosition(gantt, mousePosition.x);
+    const originalDate = getDateByMousePosition(gantt, previousMouseX);
+    const delta = gantt.range === "weekly" ? dateFns.differenceInDays(currentDate, originalDate) : getInnerDifferenceIn(gantt.range)(currentDate, originalDate);
+    const newStartDate = dateFns.addDays(previousStartAt, delta);
+    const newEndDate = previousEndAt ? dateFns.addDays(previousEndAt, delta) : null;
+    setStartAt(newStartDate);
+    setEndAt(newEndDate);
+  }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
+  const onDragEnd = React27.useCallback(
+    () => onMove?.(feature.id, startAt, endAt),
+    [onMove, feature.id, startAt, endAt]
+  );
+  const handleLeftDragMove = React27.useCallback(() => {
+    const ganttRect = gantt.ref?.current?.getBoundingClientRect();
+    const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
+    const newStartAt = getDateByMousePosition(gantt, x);
+    setStartAt(newStartAt);
+  }, [gantt, mousePosition.x, scrollX]);
+  const handleRightDragMove = React27.useCallback(() => {
+    const ganttRect = gantt.ref?.current?.getBoundingClientRect();
+    const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
+    const newEndAt = getDateByMousePosition(gantt, x);
+    setEndAt(newEndAt);
+  }, [gantt, mousePosition.x, scrollX]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative flex w-max min-w-full", className),
+      style: { height: "var(--gantt-row-height)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "pointer-events-auto absolute",
+          style: {
+            height: "calc(var(--gantt-row-height) - 8px)",
+            top: "4px",
+            width,
+            left: offset
+          },
+          children: [
+            onMove && /* @__PURE__ */ jsxRuntime.jsx(
+              core.DndContext,
+              {
+                modifiers: [modifiers.restrictToHorizontalAxis],
+                onDragEnd,
+                onDragMove: handleLeftDragMove,
+                sensors: [mouseSensor],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  GanttFeatureDragHelper,
+                  {
+                    date: startAt,
+                    direction: "left",
+                    featureId: feature.id
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                core.DndContext,
+                {
+                  modifiers: [modifiers.restrictToHorizontalAxis],
+                  onDragEnd,
+                  onDragMove: handleItemDragMove,
+                  onDragStart: handleItemDragStart,
+                  sensors: [mouseSensor],
+                  children: /* @__PURE__ */ jsxRuntime.jsx(GanttFeatureItemCard, { id: feature.id, children: children ?? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 truncate text-xs", children: feature.name }) })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuContent, { children: [
+                onEdit && /* @__PURE__ */ jsxRuntime.jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2",
+                    onClick: () => onEdit(feature),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilIcon, { size: 14 }),
+                      "Edit"
+                    ]
+                  }
+                ),
+                onDuplicate && /* @__PURE__ */ jsxRuntime.jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2",
+                    onClick: () => onDuplicate(feature),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: 14 }),
+                      "Duplicate"
+                    ]
+                  }
+                ),
+                contextMenuActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  ContextMenuItem,
+                  {
+                    className: cn(
+                      "flex items-center gap-2",
+                      action.destructive && "text-destructive"
+                    ),
+                    onClick: () => action.onClick(feature),
+                    disabled: action.disabled,
+                    children: [
+                      action.icon,
+                      action.label
+                    ]
+                  },
+                  index
+                )),
+                onDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2 text-destructive",
+                    onClick: () => onDelete(feature),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { size: 14 }),
+                      "Delete"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            onMove && /* @__PURE__ */ jsxRuntime.jsx(
+              core.DndContext,
+              {
+                modifiers: [modifiers.restrictToHorizontalAxis],
+                onDragEnd,
+                onDragMove: handleRightDragMove,
+                sensors: [mouseSensor],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  GanttFeatureDragHelper,
+                  {
+                    date: endAt ?? addRange(startAt, 2),
+                    direction: "right",
+                    featureId: feature.id
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var GanttFeatureListGroup = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className,
+    style: { paddingTop: "var(--gantt-row-height)" },
+    children
+  }
+);
+var GanttFeatureRow = ({
+  features,
+  onMove,
+  children,
+  className
+}) => {
+  const sortedFeatures = [...features].sort(
+    (a, b) => a.startAt.getTime() - b.startAt.getTime()
+  );
+  const featureWithPositions = [];
+  const subRowEndTimes = [];
+  for (const feature of sortedFeatures) {
+    let subRow = 0;
+    while (subRow < subRowEndTimes.length && subRowEndTimes[subRow] > feature.startAt) {
+      subRow++;
+    }
+    if (subRow === subRowEndTimes.length) {
+      subRowEndTimes.push(feature.endAt);
+    } else {
+      subRowEndTimes[subRow] = feature.endAt;
+    }
+    featureWithPositions.push({ ...feature, subRow });
+  }
+  const maxSubRows = Math.max(1, subRowEndTimes.length);
+  const subRowHeight = 36;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative", className),
+      style: {
+        height: `${maxSubRows * subRowHeight}px`,
+        minHeight: "var(--gantt-row-height)"
+      },
+      children: featureWithPositions.map((feature) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute w-full",
+          style: {
+            top: `${feature.subRow * subRowHeight}px`,
+            height: `${subRowHeight}px`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(GanttFeatureItem, { ...feature, onMove, children: children ? children(feature) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 truncate text-xs", children: feature.name }) })
+        },
+        feature.id
+      ))
+    }
+  );
+};
+var GanttFeatureList = ({
+  className,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("absolute top-0 left-0 h-max w-max min-w-full", className),
+    style: { marginTop: "var(--gantt-header-height)" },
+    children
+  }
+);
+var GanttMarker = React27.memo(({ label, date, id, onRemove, className }) => {
+  const gantt = React27.useContext(GanttContext);
+  const differenceIn = React27.useMemo(
+    () => getDifferenceIn(gantt.range),
+    [gantt.range]
+  );
+  const timelineStartDate = React27.useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const offset = React27.useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate]
+  );
+  const innerOffset = React27.useMemo(
+    () => calculateInnerOffset(
+      date,
+      gantt.range,
+      gantt.columnWidth * gantt.zoom / 100
+    ),
+    [date, gantt.range, gantt.columnWidth, gantt.zoom]
+  );
+  const handleRemove = React27.useCallback(() => onRemove?.(id), [onRemove, id]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible",
+      style: {
+        width: 0,
+        transform: `translateX(calc(var(--gantt-column-width) * ${offset} + ${Math.round(innerOffset)}px))`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "group pointer-events-auto sticky top-0 flex select-auto flex-col flex-nowrap items-center justify-center whitespace-nowrap rounded-sm bg-card px-2 py-1 text-foreground text-xs shadow-sm",
+                className
+              ),
+              children: [
+                label,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]", children: dateFns.formatDate(date, "MMM dd, yyyy") })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContent, { children: onRemove ? /* @__PURE__ */ jsxRuntime.jsxs(
+            ContextMenuItem,
+            {
+              className: "flex items-center gap-2 text-destructive",
+              onClick: handleRemove,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { size: 16 }),
+                "Remove marker"
+              ]
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-px bg-card", className) })
+      ]
+    }
+  );
+});
+GanttMarker.displayName = "GanttMarker";
+var GanttProvider = ({
+  zoom = 100,
+  range = "monthly",
+  onAddItem,
+  children,
+  className,
+  defaultExpandedGroups = {}
+}) => {
+  const scrollRef = React27.useRef(null);
+  const [timelineData, setTimelineData] = React27.useState(
+    createInitialTimelineData(/* @__PURE__ */ new Date())
+  );
+  const [, setScrollX] = useGanttScrollX();
+  const sidebarWidth = 280;
+  const [expandedGroups, setExpandedGroups] = React27.useState(defaultExpandedGroups);
+  const setGroupExpanded = React27.useCallback((groupId, expanded) => {
+    setExpandedGroups((prev) => ({ ...prev, [groupId]: expanded }));
+  }, []);
+  const headerHeight = 60;
+  const rowHeight = 36;
+  let columnWidth = 50;
+  if (range === "monthly") {
+    columnWidth = 150;
+  } else if (range === "quarterly") {
+    columnWidth = 100;
+  }
+  const cssVariables = React27.useMemo(
+    () => ({
+      "--gantt-zoom": `${zoom}`,
+      "--gantt-column-width": `${zoom / 100 * columnWidth}px`,
+      "--gantt-header-height": `${headerHeight}px`,
+      "--gantt-row-height": `${rowHeight}px`,
+      "--gantt-sidebar-width": `${sidebarWidth}px`
+    }),
+    [zoom, columnWidth, sidebarWidth]
+  );
+  React27.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth / 2 - scrollRef.current.clientWidth / 2;
+      setScrollX(scrollRef.current.scrollLeft);
+    }
+  }, [setScrollX]);
+  const handleScroll = React27.useCallback(
+    throttle__default.default(() => {
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      const { scrollLeft, scrollWidth, clientWidth } = scrollElement;
+      setScrollX(scrollLeft);
+      if (scrollLeft === 0) {
+        const firstYear = timelineData[0]?.year;
+        if (!firstYear) {
+          return;
+        }
+        const newTimelineData = [...timelineData];
+        newTimelineData.unshift({
+          year: firstYear - 1,
+          quarters: new Array(4).fill(null).map((_, quarterIndex) => ({
+            months: new Array(3).fill(null).map((_2, monthIndex) => {
+              const month = quarterIndex * 3 + monthIndex;
+              return {
+                days: dateFns.getDaysInMonth(new Date(firstYear, month, 1))
+              };
+            })
+          }))
+        });
+        setTimelineData(newTimelineData);
+        scrollElement.scrollLeft = scrollElement.clientWidth;
+        setScrollX(scrollElement.scrollLeft);
+      } else if (scrollLeft + clientWidth >= scrollWidth) {
+        const lastYear = timelineData.at(-1)?.year;
+        if (!lastYear) {
+          return;
+        }
+        const newTimelineData = [...timelineData];
+        newTimelineData.push({
+          year: lastYear + 1,
+          quarters: new Array(4).fill(null).map((_, quarterIndex) => ({
+            months: new Array(3).fill(null).map((_2, monthIndex) => {
+              const month = quarterIndex * 3 + monthIndex;
+              return {
+                days: dateFns.getDaysInMonth(new Date(lastYear, month, 1))
+              };
+            })
+          }))
+        });
+        setTimelineData(newTimelineData);
+        scrollElement.scrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth;
+        setScrollX(scrollElement.scrollLeft);
+      }
+    }, 100),
+    []
+  );
+  React27.useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (scrollElement) {
+      scrollElement.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (scrollElement) {
+        scrollElement.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [handleScroll]);
+  const scrollToFeature = React27.useCallback(
+    (feature) => {
+      const scrollElement = scrollRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      const timelineStartDate = new Date(timelineData[0].year, 0, 1);
+      const offset = getOffset(feature.startAt, timelineStartDate, {
+        zoom,
+        range,
+        columnWidth});
+      const targetScrollLeft = Math.max(0, offset);
+      scrollElement.scrollTo({
+        left: targetScrollLeft,
+        behavior: "smooth"
+      });
+    },
+    [timelineData, zoom, range, columnWidth, sidebarWidth, onAddItem, expandedGroups, setGroupExpanded]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    GanttContext.Provider,
+    {
+      value: {
+        zoom,
+        range,
+        headerHeight,
+        columnWidth,
+        sidebarWidth,
+        rowHeight,
+        onAddItem,
+        timelineData,
+        placeholderLength: 2,
+        ref: scrollRef,
+        scrollToFeature,
+        expandedGroups,
+        setGroupExpanded
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "gantt relative isolate grid h-full w-full flex-none select-none rounded-sm border bg-background",
+            range,
+            className
+          ),
+          style: {
+            ...cssVariables,
+            gridTemplateColumns: "var(--gantt-sidebar-width) 1fr"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "col-span-2 grid overflow-auto",
+              ref: scrollRef,
+              style: {
+                gridTemplateColumns: "var(--gantt-sidebar-width) 1fr"
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var GanttTimeline = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "relative flex h-max min-h-full w-max flex-none",
+      className
+    ),
+    children
+  }
+);
+var GanttToday = ({ className }) => {
+  const label = "Today";
+  const date = React27.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const gantt = React27.useContext(GanttContext);
+  const differenceIn = React27.useMemo(
+    () => getDifferenceIn(gantt.range),
+    [gantt.range]
+  );
+  const timelineStartDate = React27.useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const offset = React27.useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate]
+  );
+  const innerOffset = React27.useMemo(
+    () => Math.round(calculateInnerOffset(
+      date,
+      gantt.range,
+      gantt.columnWidth * gantt.zoom / 100
+    )),
+    [date, gantt.range, gantt.columnWidth, gantt.zoom]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible",
+      style: {
+        width: 0,
+        transform: `translateX(calc(var(--gantt-column-width) * ${offset} + ${innerOffset}px))`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "group pointer-events-auto sticky top-0 flex select-auto flex-col flex-nowrap items-center justify-center whitespace-nowrap rounded-sm bg-primary px-2 py-1 text-primary-foreground text-xs shadow-sm",
+              className
+            ),
+            children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]", children: dateFns.formatDate(date, "MMM dd, yyyy") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-px bg-primary", className) })
+      ]
+    }
+  );
+};
+var t = tunnel__default.default();
+var KanbanContext = React27.createContext({
+  columns: [],
+  data: [],
+  activeCardId: null
+});
+var KanbanBoard = ({ id, children, className }) => {
+  const { isOver, setNodeRef } = core.useDroppable({
+    id
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex size-full min-h-40 flex-col divide-y overflow-hidden rounded-md border bg-secondary text-xs shadow-sm ring-2 transition-all",
+        isOver ? "ring-primary" : "ring-transparent",
+        className
+      ),
+      ref: setNodeRef,
+      children
+    }
+  );
+};
+var KanbanCard = ({
+  id,
+  name,
+  children,
+  className
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transition,
+    transform,
+    isDragging
+  } = sortable.useSortable({
+    id
+  });
+  const { activeCardId } = React27.useContext(KanbanContext);
+  const style = {
+    transition,
+    transform: utilities.CSS.Transform.toString(transform)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style, ...listeners, ...attributes, ref: setNodeRef, className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        className: cn(
+          "cursor-grab gap-4 rounded-md p-2 shadow-sm overflow-hidden",
+          isDragging && "pointer-events-none cursor-grabbing opacity-30",
+          className
+        ),
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 font-medium text-sm", children: name })
+      }
+    ) }),
+    activeCardId === id && /* @__PURE__ */ jsxRuntime.jsx(t.In, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        className: cn(
+          "cursor-grab gap-4 rounded-md p-2 shadow-sm ring-2 ring-primary overflow-hidden",
+          isDragging && "cursor-grabbing",
+          className
+        ),
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 font-medium text-sm", children: name })
+      }
+    ) })
+  ] });
+};
+var KanbanCards = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { data } = React27.useContext(KanbanContext);
+  const filteredData = data.filter((item) => item.column === props.id);
+  const items = filteredData.map((item) => item.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("flex flex-grow flex-col gap-2 p-2", className),
+        ...props,
+        children: filteredData.map(children)
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" })
+  ] });
+};
+var KanbanHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("m-0 p-2 font-semibold text-sm", className), ...props });
+var KanbanProvider = ({
+  children,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  className,
+  columns,
+  data,
+  onDataChange,
+  ...props
+}) => {
+  const [activeCardId, setActiveCardId] = React27.useState(null);
+  const sensors = core.useSensors(
+    core.useSensor(core.MouseSensor),
+    core.useSensor(core.TouchSensor),
+    core.useSensor(core.KeyboardSensor)
+  );
+  const handleDragStart = (event) => {
+    const card = data.find((item) => item.id === event.active.id);
+    if (card) {
+      setActiveCardId(event.active.id);
+    }
+    onDragStart?.(event);
+  };
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!over) {
+      return;
+    }
+    const activeItem = data.find((item) => item.id === active.id);
+    const overItem = data.find((item) => item.id === over.id);
+    if (!activeItem) {
+      return;
+    }
+    const activeColumn = activeItem.column;
+    const overColumn = overItem?.column || columns.find((col) => col.id === over.id)?.id || columns[0]?.id;
+    if (activeColumn !== overColumn) {
+      let newData = [...data];
+      const activeIndex = newData.findIndex((item) => item.id === active.id);
+      const overIndex = newData.findIndex((item) => item.id === over.id);
+      newData[activeIndex].column = overColumn;
+      newData = sortable.arrayMove(newData, activeIndex, overIndex);
+      onDataChange?.(newData);
+    }
+    onDragOver?.(event);
+  };
+  const handleDragEnd = (event) => {
+    setActiveCardId(null);
+    onDragEnd?.(event);
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    let newData = [...data];
+    const oldIndex = newData.findIndex((item) => item.id === active.id);
+    const newIndex = newData.findIndex((item) => item.id === over.id);
+    newData = sortable.arrayMove(newData, oldIndex, newIndex);
+    onDataChange?.(newData);
+  };
+  const announcements = {
+    onDragStart({ active }) {
+      const { name, column } = data.find((item) => item.id === active.id) ?? {};
+      return `Picked up the card "${name}" from the "${column}" column`;
+    },
+    onDragOver({ active, over }) {
+      const { name } = data.find((item) => item.id === active.id) ?? {};
+      const newColumn = columns.find((column) => column.id === over?.id)?.name;
+      return `Dragged the card "${name}" over the "${newColumn}" column`;
+    },
+    onDragEnd({ active, over }) {
+      const { name } = data.find((item) => item.id === active.id) ?? {};
+      const newColumn = columns.find((column) => column.id === over?.id)?.name;
+      return `Dropped the card "${name}" into the "${newColumn}" column`;
+    },
+    onDragCancel({ active }) {
+      const { name } = data.find((item) => item.id === active.id) ?? {};
+      return `Cancelled dragging the card "${name}"`;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(KanbanContext.Provider, { value: { columns, data, activeCardId }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
+    {
+      accessibility: { announcements },
+      collisionDetection: core.closestCenter,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+      onDragStart: handleDragStart,
+      sensors,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid size-full auto-cols-fr grid-flow-col gap-4",
+              className
+            ),
+            children: columns.map((column) => children(column))
+          }
+        ),
+        typeof window !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx(t.Out, {}) }),
+          document.body
+        )
+      ]
+    }
+  ) });
+};
 
 Object.defineProperty(exports, "flexRender", {
   enumerable: true,
@@ -13977,6 +15551,30 @@ exports.FormField = FormField;
 exports.FormItem = FormItem;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.GanttAddFeatureHelper = GanttAddFeatureHelper;
+exports.GanttCollapsibleSidebarGroup = GanttCollapsibleSidebarGroup;
+exports.GanttCollapsibleTimelineGroup = GanttCollapsibleTimelineGroup;
+exports.GanttColumn = GanttColumn;
+exports.GanttColumns = GanttColumns;
+exports.GanttContentHeader = GanttContentHeader;
+exports.GanttCreateMarkerTrigger = GanttCreateMarkerTrigger;
+exports.GanttFeatureDragHelper = GanttFeatureDragHelper;
+exports.GanttFeatureItem = GanttFeatureItem;
+exports.GanttFeatureItemCard = GanttFeatureItemCard;
+exports.GanttFeatureList = GanttFeatureList;
+exports.GanttFeatureListGroup = GanttFeatureListGroup;
+exports.GanttFeatureRow = GanttFeatureRow;
+exports.GanttGridLines = GanttGridLines;
+exports.GanttGroupSummaryBar = GanttGroupSummaryBar;
+exports.GanttHeader = GanttHeader;
+exports.GanttMarker = GanttMarker;
+exports.GanttProvider = GanttProvider;
+exports.GanttSidebar = GanttSidebar;
+exports.GanttSidebarGroup = GanttSidebarGroup;
+exports.GanttSidebarHeader = GanttSidebarHeader;
+exports.GanttSidebarItem = GanttSidebarItem;
+exports.GanttTimeline = GanttTimeline;
+exports.GanttToday = GanttToday;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
@@ -13997,6 +15595,11 @@ exports.ItemHeader = ItemHeader;
 exports.ItemMedia = ItemMedia;
 exports.ItemSeparator = ItemSeparator;
 exports.ItemTitle = ItemTitle;
+exports.KanbanBoard = KanbanBoard;
+exports.KanbanCard = KanbanCard;
+exports.KanbanCards = KanbanCards;
+exports.KanbanHeader = KanbanHeader;
+exports.KanbanProvider = KanbanProvider;
 exports.Kbd = Kbd;
 exports.KbdGroup = KbdGroup;
 exports.Label = Label2;
@@ -14244,6 +15847,8 @@ exports.useEventCalendar = useEventCalendar;
 exports.useEventsInRange = useEventsInRange;
 exports.useFilteredEvents = useFilteredEvents;
 exports.useFormField = useFormField;
+exports.useGanttDragging = useGanttDragging;
+exports.useGanttScrollX = useGanttScrollX;
 exports.useIsMobile = useIsMobile;
 exports.useSearchShortcut = useSearchShortcut;
 exports.useSidebar = useSidebar;