@j3m-quantum/ui 1.9.1 → 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
   };
 }
@@ -9418,36 +9429,41 @@ function getLeftStrokeStyles(state, hasRisk, isHovered) {
       stroke: "border-l-[3px] border-l-red-500",
       content: "text-foreground",
       progressBg: "bg-red-500",
-      iconColor: "text-red-600 dark:text-red-400"
+      iconColor: "text-red-600 dark:text-red-400",
+      cardBg: "bg-background"
     };
   }
   switch (state) {
     case "sent":
       return {
-        stroke: "border-l-[3px] border-l-green-500/50",
-        content: "text-muted-foreground/60",
-        progressBg: "bg-green-500",
-        iconColor: "text-green-600 dark:text-green-400"
+        stroke: "border-l-[3px] border-l-green-500/40",
+        content: "text-muted-foreground/50",
+        progressBg: "bg-green-500/50",
+        iconColor: "text-green-600/50 dark:text-green-400/50",
+        cardBg: "bg-muted/30"
       };
     case "ready":
       return {
         stroke: "border-l-[3px] border-l-green-500",
         content: "text-foreground",
         progressBg: "bg-green-500",
-        iconColor: "text-green-600 dark:text-green-400"
+        iconColor: "text-green-600 dark:text-green-400",
+        cardBg: "bg-background"
       };
     default:
       return {
         stroke: isHovered ? "border-l-[3px] border-l-primary/50" : "border-l-[3px] border-l-border",
         content: "text-foreground",
         progressBg: "bg-primary",
-        iconColor: "text-muted-foreground"
+        iconColor: "text-muted-foreground",
+        cardBg: "bg-background"
       };
   }
 }
 function DeliveryBadge({
   delivery,
   onClick,
+  onCommentClick,
   className
 }) {
   const [isHovered, setIsHovered] = React27__namespace.useState(false);
@@ -9510,70 +9526,125 @@ function DeliveryBadge({
       onClick?.();
     }
   };
+  const handleCommentClick = (e) => {
+    e.stopPropagation();
+    onCommentClick?.();
+  };
+  const amountColorClass = React27__namespace.useMemo(() => {
+    if (visualState === "sent") {
+      return "text-muted-foreground/40";
+    }
+    if (delivery.isReadyToUnload) {
+      return "text-green-600 dark:text-green-400";
+    }
+    if (delivery.hasProductionRisk) {
+      return "text-red-600 dark:text-red-400";
+    }
+    return "text-muted-foreground";
+  }, [visualState, delivery.isReadyToUnload, delivery.hasProductionRisk]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       className: cn(
-        // Position relative for comment dot
+        // Position relative for comment button
         "relative",
         // Full-width in cell, 90° corners
         "w-full rounded-none",
         // Sizing using Quantum tokens:
-        // - h-[80px] card height
-        // - px-6 = 24px horizontal (j3m.spacing.l)
-        // - py-4 = 16px vertical (j3m.spacing.m)
-        "h-[80px] px-6 py-4",
-        // Layout
-        "flex items-center",
-        // Card base: white background, complete border
-        "bg-background border border-border",
+        // - min-h-[100px] card min-height
+        // - pt-4 pb-3 = vertical padding (j3m.spacing.m / j3m.spacing.s)
+        // - pl-4 = left padding (j3m.spacing.m)
+        // - pr-2 = minimal right padding (progress bar extends further)
+        "min-h-[100px] pt-4 pb-3 pl-4 pr-2",
+        // Card base: dynamic background based on state, complete border
+        styles.cardBg,
+        "border border-border",
         // Left stroke for status
         styles.stroke,
-        // Interactive states
-        "cursor-pointer transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
-        "active:translate-y-0 active:shadow-sm",
-        // Focus state
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
-        // Greyed out for sent state
-        visualState === "sent" && "opacity-60",
+        // Interactive states (reduced for sent state)
+        "transition-all duration-200 ease-out",
+        visualState !== "sent" && "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
         className
       ),
       children: [
-        hasComments && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
           {
-            className: "absolute -top-1 -right-1 h-3 w-3 rounded-full bg-primary ring-2 ring-background",
-            "aria-label": "Has comments"
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: cn(
+              "absolute top-2 right-2",
+              // 44px touch target for accessibility
+              "h-11 w-11",
+              "rounded-full",
+              hasComments && "text-primary"
+            ),
+            onClick: handleCommentClick,
+            "aria-label": hasComments ? `${delivery.comments.length} comments` : "Add comment",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-5 w-5" }),
+              hasComments && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-primary border-2 border-background",
+                  "aria-hidden": "true"
+                }
+              )
+            ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center gap-3 min-w-0 flex-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
-            visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
-            delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-            delivery.supplierName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate ml-auto", children: delivery.supplierName })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3.5 w-3.5 shrink-0", styles.iconColor) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn("h-full rounded-full transition-all", styles.progressBg),
-                style: { width: `${productionProgress}%` }
-              }
-            ) }),
-            productionDisplay && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-              "text-xs tabular-nums font-medium shrink-0",
-              delivery.isReadyToUnload ? "text-green-600 dark:text-green-400" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : "text-muted-foreground"
-            ), children: productionDisplay })
-          ] })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            className: cn(
+              // Full width, no background (inherits from parent)
+              "w-full bg-transparent text-left",
+              // Layout - vertical stack
+              "flex flex-col gap-2",
+              // Interactive states
+              "cursor-pointer",
+              "active:translate-y-0 active:shadow-sm",
+              // Focus state
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 overflow-hidden pr-12", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+                delivery.supplierName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "text-xs truncate ml-auto",
+                  visualState === "sent" ? "text-muted-foreground/40" : "text-muted-foreground"
+                ), children: delivery.supplierName })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pr-14", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("h-full rounded-full transition-all", styles.progressBg),
+                  style: { width: `${productionProgress}%` }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                productionDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3 w-3 shrink-0", styles.iconColor) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                    "text-[11px] tabular-nums font-medium",
+                    amountColorClass
+                  ), children: productionDisplay })
+                ] }),
+                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground/50 uppercase tracking-wide", children: "Sent" })
+                ] })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -9583,7 +9654,7 @@ function WeeklyLoadingView({
   deliveries,
   onDeliveryClick,
   onWeekChange,
-  onDayCommentClick,
+  onDeliveryCommentClick,
   showNavigation = true,
   className
 }) {
@@ -9614,20 +9685,6 @@ function WeeklyLoadingView({
     }
     return grouped;
   }, [deliveries]);
-  const commentCountByDay = React27__namespace.useMemo(() => {
-    const counts = /* @__PURE__ */ new Map();
-    for (let i = 1; i <= 5; i++) {
-      counts.set(i, 0);
-    }
-    for (const delivery of deliveries) {
-      const dayOfWeek = delivery.date.getDay();
-      if (dayOfWeek >= 1 && dayOfWeek <= 5) {
-        const current = counts.get(dayOfWeek) ?? 0;
-        counts.set(dayOfWeek, current + delivery.comments.length);
-      }
-    }
-    return counts;
-  }, [deliveries]);
   const totalDeliveries = deliveries.length;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between", children: [
@@ -9692,54 +9749,27 @@ function WeeklyLoadingView({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "flex-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 border-b border-border bg-muted/30", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
-          const dayCommentCount = commentCountByDay.get(dayOfWeek) ?? 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                // Relative for positioning comment button
-                "relative",
-                // Compact padding: py-2 px-3 (j3m.spacing.xs / j3m.spacing.s)
-                "flex items-center justify-center gap-2 py-2 px-3",
-                dayIsToday && "bg-primary/5"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "text-xs font-medium uppercase tracking-wide",
-                  dayIsToday ? "text-primary" : "text-muted-foreground"
-                ), children: getShortDayLabel(dayOfWeek) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "text-base font-semibold tabular-nums",
-                  dayIsToday ? "text-primary" : "text-foreground"
-                ), children: date.getDate() }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: cn(
-                      "absolute top-1 right-1 h-7 w-7",
-                      dayCommentCount > 0 && "text-primary"
-                    ),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDayCommentClick?.(dayOfWeek, date);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4" }),
-                        dayCommentCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dayCommentCount > 0 ? `${dayCommentCount} comments on ${getShortDayLabel(dayOfWeek)}` : `Add comment for ${getShortDayLabel(dayOfWeek)}` })
-                    ]
-                  }
-                )
-              ]
-            },
-            dayOfWeek
-          );
-        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 border-b border-border bg-muted/30", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              // Compact padding
+              "flex flex-col items-center justify-center py-2 px-2",
+              dayIsToday && "bg-primary/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                dayIsToday ? "text-primary" : "text-muted-foreground"
+              ), children: getShortDayLabel(dayOfWeek) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "text-lg font-medium tabular-nums leading-tight mt-0.5",
+                dayIsToday ? "text-primary" : "text-foreground"
+              ), children: date.getDate() })
+            ]
+          },
+          dayOfWeek
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
           const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9754,7 +9784,8 @@ function WeeklyLoadingView({
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
@@ -9765,7 +9796,6 @@ function WeeklyLoadingView({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden divide-y divide-border", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
         const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
-        const dayCommentCount = commentCountByDay.get(dayOfWeek) ?? 0;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -9774,52 +9804,31 @@ function WeeklyLoadingView({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-xs font-medium uppercase",
-                    dayIsToday ? "text-primary" : "text-muted-foreground"
-                  ), children: getShortDayLabel(dayOfWeek) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-base font-semibold tabular-nums",
-                    dayIsToday ? "text-primary" : "text-foreground"
-                  ), children: date.getDate() }),
-                  dayIsToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary font-medium", children: "Today" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                    dayDeliveries.length,
-                    " ",
-                    dayDeliveries.length === 1 ? "delivery" : "deliveries"
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center min-w-[40px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                      dayIsToday ? "text-primary" : "text-muted-foreground"
+                    ), children: getShortDayLabel(dayOfWeek) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-lg font-medium tabular-nums leading-tight mt-0.5",
+                      dayIsToday ? "text-primary" : "text-foreground"
+                    ), children: date.getDate() })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: cn(
-                        "h-7 w-7",
-                        dayCommentCount > 0 && "text-primary"
-                      ),
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onDayCommentClick?.(dayOfWeek, date);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4" }),
-                          dayCommentCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Comments" })
-                      ]
-                    }
-                  )
+                  dayIsToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded", children: "Today" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                  dayDeliveries.length,
+                  " ",
+                  dayDeliveries.length === 1 ? "delivery" : "deliveries"
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 p-3 pt-0", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
@@ -9929,7 +9938,7 @@ function AddCommentDialog({
   }, [open]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-unloading note" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-loading note" }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
         "Add a note for ",
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: delivery.label }),
@@ -9945,7 +9954,7 @@ function AddCommentDialog({
         Textarea,
         {
           id: "comment-text",
-          placeholder: "Add a note before unloading...",
+          placeholder: "Add a note before loading...",
           value: commentText,
           onChange: (e) => setCommentText(e.target.value),
           onKeyDown: handleKeyDown,
@@ -9987,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",
@@ -10000,7 +10009,7 @@ function CommentsSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Notes before unloading" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Notes before loading" }),
           comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-[10px] h-5", children: comments.length })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10031,11 +10040,11 @@ 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)) })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground", children: "No pre-unloading notes yet. Add notes before confirming the load." })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground", children: "No pre-loading notes yet. Add notes before confirming the load." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AddCommentDialog,
@@ -10098,7 +10107,7 @@ function DeliveryDetailPage({
     const addons = delivery.elements.filter((e) => e.status === "addon");
     return { loaded, missing, moved, addons };
   }, [delivery.elements]);
-  const preUnloadingComments = delivery.comments.filter((c) => c.context === "pre_unloading");
+  const preLoadingComments = delivery.comments.filter((c) => c.context === "pre_unloading");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b bg-background sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -10147,7 +10156,7 @@ function DeliveryDetailPage({
               {
                 variant: "outline",
                 className: "bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700 text-green-700 dark:text-green-300",
-                children: "Ready to unload"
+                children: "Ready to load"
               }
             )
           ] })
@@ -10238,13 +10247,13 @@ function DeliveryDetailPage({
           ] })
         ] })
       ] }),
-      delivery.elements.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+      (elementsByStatus.loaded.length > 0 || elementsByStatus.missing.length > 0 || elementsByStatus.moved.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Elements to Unload" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "What should be packed" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
-            delivery.elements.length,
-            " total"
+            elementsByStatus.loaded.length + elementsByStatus.missing.length + elementsByStatus.moved.length,
+            " items"
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
@@ -10255,7 +10264,7 @@ function DeliveryDetailPage({
             /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
             /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: delivery.elements.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: [...elementsByStatus.loaded, ...elementsByStatus.missing, ...elementsByStatus.moved].map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
             TableRow,
             {
               className: getElementRowBg(element.status),
@@ -10283,10 +10292,6 @@ function DeliveryDetailPage({
                   element.status === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
                     "\u2192 ",
                     element.actualDeliveryLabel
-                  ] }),
-                  element.status === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
-                    "from ",
-                    element.originalDeliveryLabel
                   ] })
                 ] }) })
               ]
@@ -10295,10 +10300,48 @@ function DeliveryDetailPage({
           )) })
         ] }) })
       ] }),
+      elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Extra items (moved to this delivery)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            elementsByStatus.addons.length,
+            " items"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "These items were originally planned for other deliveries but have been moved to this one." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-purple-200 dark:border-purple-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "bg-purple-50/50 dark:bg-purple-950/30 hover:bg-purple-50/50 dark:hover:bg-purple-950/30", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Moved from" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: elementsByStatus.addons.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              className: "bg-purple-50/30 dark:bg-purple-950/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-medium", children: element.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: element.type }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  element.weight,
+                  " ",
+                  element.weightUnit || "kg"
+                ] }) : "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.sizeSqm ?? "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: element.originalDeliveryLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-purple-600 dark:text-purple-400", children: element.originalDeliveryLabel }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })
+              ]
+            },
+            element.id
+          )) })
+        ] }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         CommentsSection,
         {
-          comments: preUnloadingComments,
+          comments: preLoadingComments,
           delivery,
           weekId: week.weekKey,
           onAddComment
@@ -10335,6 +10378,9 @@ function SupplierWeeklyLoading({
 }) {
   const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
   const [sheetOpen, setSheetOpen] = React27__namespace.useState(false);
+  const [commentDelivery, setCommentDelivery] = React27__namespace.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React27__namespace.useState(false);
+  const [commentText, setCommentText] = React27__namespace.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -10345,6 +10391,38 @@ function SupplierWeeklyLoading({
     setTimeout(() => setSelectedDelivery(null), 200);
     onBack?.();
   };
+  const handleDeliveryCommentClick = (delivery) => {
+    setCommentDelivery(delivery);
+    setCommentDialogOpen(true);
+  };
+  const handleCommentDialogClose = () => {
+    setCommentDialogOpen(false);
+    setCommentText("");
+    setTimeout(() => setCommentDelivery(null), 200);
+  };
+  const handleCommentSubmit = () => {
+    if (commentText.trim() && commentDelivery && onAddComment) {
+      onAddComment({
+        author: "Current User",
+        // Would come from auth context in real app
+        text: commentText.trim(),
+        context: "pre_unloading",
+        weekId: week.weekKey,
+        deliveryId: commentDelivery.id,
+        supplierId: commentDelivery.supplierId,
+        supplierName: commentDelivery.supplierName,
+        prefixId: commentDelivery.prefixScope,
+        prefixName: commentDelivery.prefixScope
+      });
+      handleCommentDialogClose();
+    }
+  };
+  const handleCommentKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleCommentSubmit();
+    }
+  };
   const Wrapper = bordered ? Card : "div";
   const Content14 = bordered ? CardContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -10363,6 +10441,7 @@ function SupplierWeeklyLoading({
             week,
             deliveries,
             onDeliveryClick: handleDeliveryClick,
+            onDeliveryCommentClick: handleDeliveryCommentClick,
             onWeekChange,
             showNavigation
           }
@@ -10391,7 +10470,58 @@ function SupplierWeeklyLoading({
           )
         ]
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: commentDialogOpen, onOpenChange: (open) => !open && handleCommentDialogClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-loading note" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
+          "Add a note for ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: commentDelivery?.label }),
+          " (",
+          commentDelivery?.supplierName,
+          commentDelivery?.prefixScope && ` \u2022 ${commentDelivery.prefixScope}`,
+          ")."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "card-comment-text", className: "text-sm font-medium", children: "Note" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            id: "card-comment-text",
+            placeholder: "Add a note before loading...",
+            value: commentText,
+            onChange: (e) => setCommentText(e.target.value),
+            onKeyDown: handleCommentKeyDown,
+            className: "min-h-[120px] text-base resize-none",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u2318+Enter to save" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: handleCommentDialogClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            onClick: handleCommentSubmit,
+            disabled: !commentText.trim(),
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+              "Save note"
+            ]
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
 function getStatusBadgeVariant3(status) {
@@ -10902,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,
@@ -13627,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,
@@ -13858,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;
@@ -13878,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;
@@ -14125,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;