@j3m-quantum/ui 1.9.1 → 1.11.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React27 from 'react';
-import { useMemo } from 'react';
+import { createContext, memo, useContext, useMemo, useId, useCallback, useState, useEffect, useRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { SearchIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Check, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, ChevronsLeft, ChevronLeft, ChevronsRight, Settings2, FolderIcon, ShareIcon, TrashIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, X, Flag, Factory, Truck, MessageSquare, ChevronDown, Plus, Send, MessageSquarePlus, AlertTriangle, CheckCircle, Calendar as Calendar$1, MapPin, Package, User, Clock, CalendarX2, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Info, Moon, ArrowUpDown, CheckCircle2, XCircle } from 'lucide-react';
+import { SearchIcon, TrashIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Check, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, ChevronsLeft, ChevronLeft, ChevronsRight, Settings2, FolderIcon, ShareIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, X, Flag, Factory, Truck, MessageSquare, ChevronDown, Plus, Send, MessageSquarePlus, AlertTriangle, CheckCircle, Calendar as Calendar$1, MapPin, Package, User, Clock, CalendarX2, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Info, Moon, PlusIcon, PencilIcon, CopyIcon, ArrowUpDown, CheckCircle2, XCircle } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -42,8 +42,17 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 import { MapContainer, TileLayer, Marker, Popup, Tooltip, ZoomControl } from 'react-leaflet';
 import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 export { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { addDays, isToday, subMonths, subYears, subWeeks, subDays, addMonths, addYears, addWeeks, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear, isSameMonth, isSameWeek, isSameDay, isSameYear, isWithinInterval, parseISO, differenceInMinutes, eachDayOfInterval, differenceInDays, startOfDay, setMinutes, setHours, eachHourOfInterval, endOfDay, getHours, getMinutes, addMinutes, areIntervalsOverlapping } from 'date-fns';
+import { formatDate as formatDate$1, differenceInDays, getDaysInMonth, isSameDay, getDate, getISOWeek as getISOWeek$1, startOfWeek, addWeeks, differenceInWeeks, differenceInMonths, startOfMonth, endOfWeek, endOfMonth, addDays, isToday, subMonths, subYears, subWeeks, subDays, addMonths, addYears, format, startOfYear, endOfYear, isSameMonth, isSameWeek, isSameYear, isWithinInterval, parseISO, differenceInMinutes, eachDayOfInterval, startOfDay, setMinutes, setHours, eachHourOfInterval, endOfDay, getHours, getMinutes, addMinutes, areIntervalsOverlapping, formatDistance } from 'date-fns';
 export { areIntervalsOverlapping, format, getDay, isSameDay, isSameMonth, isToday, parseISO } from 'date-fns';
+import { useDraggable as useDraggable$1, useSensor, MouseSensor, DndContext, useDroppable as useDroppable$1, useSensors, TouchSensor, KeyboardSensor, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+import { useMouse, useWindowScroll, useThrottle } from '@uidotdev/usehooks';
+import { atom, useAtom } from 'jotai';
+import throttle from 'lodash.throttle';
+import { useSortable, SortableContext, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
+import tunnel from 'tunnel-rat';
 
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
@@ -6779,7 +6788,7 @@ function PlanningWeekCommentPopover({
       onCommentClick(comment);
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -6859,7 +6868,7 @@ function PlanningWeekCommentPopover({
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                         /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                       ] }),
                       /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
                     ]
@@ -7386,7 +7395,7 @@ function DeliveryCommentPopover({
       setNewCommentText("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -7432,7 +7441,7 @@ function DeliveryCommentPopover({
               /* @__PURE__ */ jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
               ] }, comment.id)) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
@@ -7526,7 +7535,7 @@ function ProductionCommentSection({
       setNewComment("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -7538,7 +7547,7 @@ function ProductionCommentSection({
     comments.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-2.5 space-y-1", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
       ] }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
     ] }, comment.id)) }),
@@ -8482,7 +8491,7 @@ function CommentPopover({
       setNewCommentText("");
     }
   };
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -8550,7 +8559,7 @@ function CommentPopover({
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
-                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
                     ] }),
                     /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
                   ]
@@ -9269,7 +9278,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 {
@@ -9277,7 +9286,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
   };
 }
@@ -9369,36 +9378,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.useState(false);
@@ -9461,70 +9475,125 @@ function DeliveryBadge({
       onClick?.();
     }
   };
+  const handleCommentClick = (e) => {
+    e.stopPropagation();
+    onCommentClick?.();
+  };
+  const amountColorClass = React27.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__ */ 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__ */ jsx(
-          "span",
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(MessageSquare, { className: "h-5 w-5" }),
+              hasComments && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col justify-center gap-3 min-w-0 flex-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
-            visualState === "sent" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
-            delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-            delivery.supplierName && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate ml-auto", children: delivery.supplierName })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Factory, { className: cn("h-3.5 w-3.5 shrink-0", styles.iconColor) }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("h-full rounded-full transition-all", styles.progressBg),
-                style: { width: `${productionProgress}%` }
-              }
-            ) }),
-            productionDisplay && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 overflow-hidden pr-12", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+                delivery.supplierName && /* @__PURE__ */ jsx("span", { className: cn(
+                  "text-xs truncate ml-auto",
+                  visualState === "sent" ? "text-muted-foreground/40" : "text-muted-foreground"
+                ), children: delivery.supplierName })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "pr-14", children: /* @__PURE__ */ jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("h-full rounded-full transition-all", styles.progressBg),
+                  style: { width: `${productionProgress}%` }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                productionDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(Factory, { className: cn("h-3 w-3 shrink-0", styles.iconColor) }),
+                  /* @__PURE__ */ jsx("span", { className: cn(
+                    "text-[11px] tabular-nums font-medium",
+                    amountColorClass
+                  ), children: productionDisplay })
+                ] }),
+                visualState === "sent" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+                  /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground/50 uppercase tracking-wide", children: "Sent" })
+                ] })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -9534,7 +9603,7 @@ function WeeklyLoadingView({
   deliveries,
   onDeliveryClick,
   onWeekChange,
-  onDayCommentClick,
+  onDeliveryCommentClick,
   showNavigation = true,
   className
 }) {
@@ -9565,20 +9634,6 @@ function WeeklyLoadingView({
     }
     return grouped;
   }, [deliveries]);
-  const commentCountByDay = React27.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__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between", children: [
@@ -9643,54 +9698,27 @@ function WeeklyLoadingView({
     ] }),
     /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1", children: [
       /* @__PURE__ */ jsxs("div", { className: "hidden sm:block", children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: cn(
-                  "text-xs font-medium uppercase tracking-wide",
-                  dayIsToday ? "text-primary" : "text-muted-foreground"
-                ), children: getShortDayLabel(dayOfWeek) }),
-                /* @__PURE__ */ jsx("span", { className: cn(
-                  "text-base font-semibold tabular-nums",
-                  dayIsToday ? "text-primary" : "text-foreground"
-                ), children: date.getDate() }),
-                /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4" }),
-                        dayCommentCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: dayCommentCount > 0 ? `${dayCommentCount} comments on ${getShortDayLabel(dayOfWeek)}` : `Add comment for ${getShortDayLabel(dayOfWeek)}` })
-                    ]
-                  }
-                )
-              ]
-            },
-            dayOfWeek
-          );
-        }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 border-b border-border bg-muted/30", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              // Compact padding
+              "flex flex-col items-center justify-center py-2 px-2",
+              dayIsToday && "bg-primary/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                dayIsToday ? "text-primary" : "text-muted-foreground"
+              ), children: getShortDayLabel(dayOfWeek) }),
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
           const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
           return /* @__PURE__ */ jsx(
@@ -9705,7 +9733,8 @@ function WeeklyLoadingView({
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
@@ -9716,7 +9745,6 @@ function WeeklyLoadingView({
       ] }),
       /* @__PURE__ */ 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__ */ jsxs(
           "div",
           {
@@ -9725,52 +9753,31 @@ function WeeklyLoadingView({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: cn(
-                    "text-xs font-medium uppercase",
-                    dayIsToday ? "text-primary" : "text-muted-foreground"
-                  ), children: getShortDayLabel(dayOfWeek) }),
-                  /* @__PURE__ */ jsx("span", { className: cn(
-                    "text-base font-semibold tabular-nums",
-                    dayIsToday ? "text-primary" : "text-foreground"
-                  ), children: date.getDate() }),
-                  dayIsToday && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary font-medium", children: "Today" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                    dayDeliveries.length,
-                    " ",
-                    dayDeliveries.length === 1 ? "delivery" : "deliveries"
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center min-w-[40px]", children: [
+                    /* @__PURE__ */ jsx("span", { className: cn(
+                      "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                      dayIsToday ? "text-primary" : "text-muted-foreground"
+                    ), children: getShortDayLabel(dayOfWeek) }),
+                    /* @__PURE__ */ jsx("span", { className: cn(
+                      "text-lg font-medium tabular-nums leading-tight mt-0.5",
+                      dayIsToday ? "text-primary" : "text-foreground"
+                    ), children: date.getDate() })
                   ] }),
-                  /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4" }),
-                          dayCommentCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                        ] }),
-                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Comments" })
-                      ]
-                    }
-                  )
+                  dayIsToday && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded", children: "Today" })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                  dayDeliveries.length,
+                  " ",
+                  dayDeliveries.length === 1 ? "delivery" : "deliveries"
                 ] })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 p-3 pt-0", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsx(
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
@@ -9880,7 +9887,7 @@ function AddCommentDialog({
   }, [open]);
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Add pre-unloading note" }),
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Add pre-loading note" }),
       /* @__PURE__ */ jsxs(DialogDescription, { children: [
         "Add a note for ",
         /* @__PURE__ */ jsx("strong", { children: delivery.label }),
@@ -9896,7 +9903,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,
@@ -9938,7 +9945,7 @@ function CommentsSection({
 }) {
   const [viewCommentsOpen, setViewCommentsOpen] = React27.useState(true);
   const [addDialogOpen, setAddDialogOpen] = React27.useState(false);
-  const formatDate2 = (date) => {
+  const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
       day: "numeric",
@@ -9951,7 +9958,7 @@ function CommentsSection({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Notes before unloading" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Notes before loading" }),
           comments.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px] h-5", children: comments.length })
         ] }),
         /* @__PURE__ */ jsxs(
@@ -9982,11 +9989,11 @@ function CommentsSection({
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
               comment.supplierName && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[9px] px-1.5 py-0 h-4", children: comment.prefixName ? `${comment.supplierName} - ${comment.prefixName}` : comment.supplierName })
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-sm", children: comment.text })
         ] }, comment.id)) })
-      ] }) : /* @__PURE__ */ 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__ */ 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__ */ jsx(
       AddCommentDialog,
@@ -10049,7 +10056,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__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b bg-background sticky top-0 z-10", children: /* @__PURE__ */ jsxs(
       Button,
@@ -10098,7 +10105,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"
               }
             )
           ] })
@@ -10189,13 +10196,13 @@ function DeliveryDetailPage({
           ] })
         ] })
       ] }),
-      delivery.elements.length > 0 && /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+      (elementsByStatus.loaded.length > 0 || elementsByStatus.missing.length > 0 || elementsByStatus.moved.length > 0) && /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Package, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Elements to Unload" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "What should be packed" }),
           /* @__PURE__ */ 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__ */ jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -10206,7 +10213,7 @@ function DeliveryDetailPage({
             /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
             /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
           ] }) }),
-          /* @__PURE__ */ jsx(TableBody, { children: delivery.elements.map((element) => /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(TableBody, { children: [...elementsByStatus.loaded, ...elementsByStatus.missing, ...elementsByStatus.moved].map((element) => /* @__PURE__ */ jsxs(
             TableRow,
             {
               className: getElementRowBg(element.status),
@@ -10234,10 +10241,6 @@ function DeliveryDetailPage({
                   element.status === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
                     "\u2192 ",
                     element.actualDeliveryLabel
-                  ] }),
-                  element.status === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
-                    "from ",
-                    element.originalDeliveryLabel
                   ] })
                 ] }) })
               ]
@@ -10246,10 +10249,48 @@ function DeliveryDetailPage({
           )) })
         ] }) })
       ] }),
+      elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Extra items (moved to this delivery)" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            elementsByStatus.addons.length,
+            " items"
+          ] })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "rounded-lg border border-purple-200 dark:border-purple-800 overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ 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__ */ jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Moved from" })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: elementsByStatus.addons.map((element) => /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              className: "bg-purple-50/30 dark:bg-purple-950/10",
+              children: [
+                /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: element.prefix }),
+                /* @__PURE__ */ jsx(TableCell, { children: element.type }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? /* @__PURE__ */ jsxs("span", { children: [
+                  element.weight,
+                  " ",
+                  element.weightUnit || "kg"
+                ] }) : "\u2014" }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: element.sizeSqm ?? "\u2014" }),
+                /* @__PURE__ */ jsx(TableCell, { children: element.originalDeliveryLabel ? /* @__PURE__ */ jsx("span", { className: "text-sm text-purple-600 dark:text-purple-400", children: element.originalDeliveryLabel }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })
+              ]
+            },
+            element.id
+          )) })
+        ] }) })
+      ] }),
       /* @__PURE__ */ jsx(
         CommentsSection,
         {
-          comments: preUnloadingComments,
+          comments: preLoadingComments,
           delivery,
           weekId: week.weekKey,
           onAddComment
@@ -10286,6 +10327,9 @@ function SupplierWeeklyLoading({
 }) {
   const [selectedDelivery, setSelectedDelivery] = React27.useState(null);
   const [sheetOpen, setSheetOpen] = React27.useState(false);
+  const [commentDelivery, setCommentDelivery] = React27.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React27.useState(false);
+  const [commentText, setCommentText] = React27.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -10296,6 +10340,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__ */ jsxs(Fragment, { children: [
@@ -10314,6 +10390,7 @@ function SupplierWeeklyLoading({
             week,
             deliveries,
             onDeliveryClick: handleDeliveryClick,
+            onDeliveryCommentClick: handleDeliveryCommentClick,
             onWeekChange,
             showNavigation
           }
@@ -10342,7 +10419,58 @@ function SupplierWeeklyLoading({
           )
         ]
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsx(Dialog, { open: commentDialogOpen, onOpenChange: (open) => !open && handleCommentDialogClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Add pre-loading note" }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          "Add a note for ",
+          /* @__PURE__ */ jsx("strong", { children: commentDelivery?.label }),
+          " (",
+          commentDelivery?.supplierName,
+          commentDelivery?.prefixScope && ` \u2022 ${commentDelivery.prefixScope}`,
+          ")."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label2, { htmlFor: "card-comment-text", className: "text-sm font-medium", children: "Note" }),
+        /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "\u2318+Enter to save" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: handleCommentDialogClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleCommentSubmit,
+            disabled: !commentText.trim(),
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }),
+              "Save note"
+            ]
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
 function getStatusBadgeVariant3(status) {
@@ -10853,11 +10981,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,
@@ -13578,7 +13706,1570 @@ function CalendarView({
       return null;
   }
 }
+var draggingAtom = atom(false);
+var scrollXAtom = atom(0);
+var useGanttDragging = () => useAtom(draggingAtom);
+var useGanttScrollX = () => useAtom(scrollXAtom);
+var getDifferenceIn = (range) => {
+  if (range === "weekly") {
+    return differenceInWeeks;
+  }
+  return differenceInMonths;
+};
+var getInnerDifferenceIn = (range) => {
+  if (range === "weekly") {
+    return differenceInDays;
+  }
+  return differenceInDays;
+};
+var getStartOf = (range) => {
+  if (range === "weekly") {
+    return (date) => startOfWeek(date, { weekStartsOn: 1 });
+  }
+  return startOfMonth;
+};
+var getEndOf = (range) => {
+  if (range === "weekly") {
+    return (date) => endOfWeek(date, { weekStartsOn: 1 });
+  }
+  return endOfMonth;
+};
+var getAddRange = (range) => {
+  if (range === "weekly") {
+    return addWeeks;
+  }
+  return 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 addDays(targetWeekStart, dayOffset2);
+  }
+  const timelineStartDate = new Date(context.timelineData[0].year, 0, 1);
+  const month = addRange(timelineStartDate, offset);
+  const daysInMonth = getDaysInMonth(month);
+  const pixelsPerDay = Math.round(columnWidth / daysInMonth);
+  const dayOffset = Math.floor(mouseX % columnWidth / pixelsPerDay);
+  return 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: 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 = differenceInDays(date, weekStart);
+    const pixelsPerDay2 = parsedColumnWidth / 7;
+    return fullColumns * parsedColumnWidth + dayOfWeek * pixelsPerDay2;
+  }
+  const partialColumns = date.getDate();
+  const daysInMonth = 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 = differenceInDays(endAt, startAt);
+    return Math.max(pixelsPerDay, daysDiff * pixelsPerDay);
+  }
+  const differenceIn = getDifferenceIn(context.range);
+  const daysInStartMonth = getDaysInMonth(startAt);
+  const pixelsPerDayInStartMonth = parsedColumnWidth / daysInStartMonth;
+  if (isSameDay(startAt, endAt)) {
+    return pixelsPerDayInStartMonth;
+  }
+  const innerDifferenceIn = getInnerDifferenceIn(context.range);
+  if (isSameDay(startOf(startAt), startOf(endAt))) {
+    return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth;
+  }
+  const startRangeOffset = daysInStartMonth - getDate(startAt);
+  const endRangeOffset = getDate(endAt);
+  const fullRangeOffset = differenceIn(startOf(endAt), startOf(startAt));
+  const daysInEndMonth = 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 = differenceInDays(date, startOfRange);
+    return dayOfWeek / 7 * columnWidth;
+  }
+  const totalRangeDays = differenceInDays(endOfRange, startOfRange);
+  const dayOfMonth = date.getDate();
+  return dayOfMonth / totalRangeDays * columnWidth;
+};
+var GanttContext = 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 = useId();
+  return /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsx("p", { children: title })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid w-full",
+            style: {
+              gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`
+            },
+            children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ 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 getISOWeek$1(dec28);
+};
+var getWeekStartDate = (year, weekNumber) => {
+  const jan4 = new Date(year, 0, 4);
+  const week1Start = startOfWeek(jan4, { weekStartsOn: 1 });
+  return addWeeks(week1Start, weekNumber - 1);
+};
+var WeeklyHeader = () => {
+  const gantt = useContext(GanttContext);
+  const weeklyData = 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__ */ jsxs("div", { className: "relative flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      GanttContentHeader,
+      {
+        columns: yearData.weeks.length,
+        renderHeaderItem: (weekIndex) => {
+          const week = yearData.weeks[weekIndex];
+          return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            "W",
+            week.weekNumber.toString().padStart(2, "0")
+          ] }) });
+        },
+        title: `${yearData.year}`
+      }
+    ),
+    /* @__PURE__ */ jsx(GanttColumns, { columns: yearData.weeks.length })
+  ] }, yearData.year));
+};
+var MonthlyHeader = () => {
+  const gantt = useContext(GanttContext);
+  return gantt.timelineData.map((year) => /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      GanttContentHeader,
+      {
+        columns: year.quarters.flatMap((quarter) => quarter.months).length,
+        renderHeaderItem: (item) => /* @__PURE__ */ jsx("p", { children: format(new Date(year.year, item, 1), "MMM") }),
+        title: `${year.year}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GanttColumns,
+      {
+        columns: year.quarters.flatMap((quarter) => quarter.months).length
+      }
+    )
+  ] }, year.year));
+};
+var QuarterlyHeader = () => {
+  const gantt = useContext(GanttContext);
+  return gantt.timelineData.map(
+    (year) => year.quarters.map((quarter, quarterIndex) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex flex-col",
+        children: [
+          /* @__PURE__ */ jsx(
+            GanttContentHeader,
+            {
+              columns: quarter.months.length,
+              renderHeaderItem: (item) => /* @__PURE__ */ jsx("p", { children: format(new Date(year.year, quarterIndex * 3 + item, 1), "MMM") }),
+              title: `Q${quarterIndex + 1} ${year.year}`
+            }
+          ),
+          /* @__PURE__ */ jsx(GanttColumns, { columns: quarter.months.length })
+        ]
+      },
+      `${year.year}-${quarterIndex}`
+    ))
+  );
+};
+var headers = {
+  weekly: WeeklyHeader,
+  monthly: MonthlyHeader,
+  quarterly: QuarterlyHeader
+};
+var GanttHeader = ({ className }) => {
+  const gantt = useContext(GanttContext);
+  const Header2 = headers[gantt.range];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "-space-x-px flex h-full w-max divide-x-2 divide-border",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Header2, {})
+    }
+  );
+};
+var GanttSidebarItem = ({
+  feature,
+  onSelectItem,
+  className
+}) => {
+  const gantt = useContext(GanttContext);
+  const tempEndAt = feature.endAt && isSameDay(feature.startAt, feature.endAt) ? addDays(feature.endAt, 1) : feature.endAt;
+  const duration = tempEndAt ? formatDistance(feature.startAt, tempEndAt) : `${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__ */ 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__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-none h-2 w-2 shrink-0 rounded-full",
+            style: {
+              backgroundColor: feature.status.color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "pointer-events-none flex-1 truncate text-left font-medium", children: feature.name }),
+        /* @__PURE__ */ jsx("p", { className: "pointer-events-none text-muted-foreground text-[11px]", children: duration })
+      ]
+    },
+    feature.id
+  );
+};
+var GanttSidebarHeader = ({
+  title = "Tasks",
+  durationLabel = "Duration"
+}) => /* @__PURE__ */ 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__ */ jsx("p", { className: "flex-1 truncate text-left", children: title }),
+      /* @__PURE__ */ 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 = memo(({
+  group,
+  className
+}) => {
+  const gantt = useContext(GanttContext);
+  const timelineStartDate = useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const { start: groupStart, end: groupEnd } = useMemo(
+    () => computeGroupRange(group.features),
+    [group.features]
+  );
+  const offset = useMemo(() => {
+    if (!groupStart) return 0;
+    return Math.round(getOffset(groupStart, timelineStartDate, gantt));
+  }, [groupStart, timelineStartDate, gantt]);
+  const width = 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__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute pointer-events-none",
+        className
+      ),
+      style: {
+        height: "calc(var(--gantt-row-height) - 12px)",
+        top: "6px",
+        width,
+        left: offset
+      },
+      children: /* @__PURE__ */ 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 = useContext(GanttContext);
+  const isExpanded = gantt.expandedGroups[group.id] ?? true;
+  const { start: groupStart, end: groupEnd } = useMemo(
+    () => computeGroupRange(group.features),
+    [group.features]
+  );
+  const duration = useMemo(() => {
+    if (!groupStart || !groupEnd) return null;
+    return formatDistance(groupStart, groupEnd);
+  }, [groupStart, groupEnd]);
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: isExpanded,
+      onOpenChange: (open) => gantt.setGroupExpanded(group.id, open),
+      className,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+                    isExpanded && "rotate-90"
+                  )
+                }
+              ),
+              group.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: group.icon }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: group.title }),
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: duration })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(CollapsibleContent2, { className: "[&[data-state]]:!opacity-100", children })
+      ]
+    }
+  );
+};
+var GanttCollapsibleTimelineGroup = ({
+  group,
+  children,
+  className
+}) => {
+  const gantt = useContext(GanttContext);
+  const isExpanded = gantt.expandedGroups[group.id] ?? true;
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: isExpanded,
+      onOpenChange: (open) => gantt.setGroupExpanded(group.id, open),
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full border-b border-border/50",
+            style: { height: "var(--gantt-row-height)" },
+            children: /* @__PURE__ */ jsx(GanttGroupSummaryBar, { group })
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent2, { className: "[&[data-state]]:!opacity-100", children })
+      ]
+    }
+  );
+};
+var GanttSidebarGroup = ({
+  children,
+  name,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className, children: [
+  /* @__PURE__ */ 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__ */ jsx("div", { children })
+] });
+var GanttSidebar = ({
+  children,
+  className
+}) => /* @__PURE__ */ 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__ */ jsx(GanttSidebarHeader, {}),
+      /* @__PURE__ */ jsx("div", { children })
+    ]
+  }
+);
+var GanttAddFeatureHelper = ({
+  top,
+  className
+}) => {
+  const [scrollX] = useGanttScrollX();
+  const gantt = useContext(GanttContext);
+  const [mousePosition, mouseRef] = 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__ */ 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__ */ 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__ */ jsx(
+            PlusIcon,
+            {
+              className: "pointer-events-none select-none text-muted-foreground",
+              size: 16
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var GanttColumn = ({
+  index,
+  isColumnSecondary
+}) => {
+  const gantt = useContext(GanttContext);
+  const [dragging] = useGanttDragging();
+  const [mousePosition, mouseRef] = useMouse();
+  const [hovering, setHovering] = useState(false);
+  const [windowScroll] = useWindowScroll();
+  const handleMouseEnter = () => setHovering(true);
+  const handleMouseLeave = () => setHovering(false);
+  const top = 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__ */ 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__ */ jsx(GanttAddFeatureHelper, { top }) : null
+      }
+    )
+  );
+};
+var GanttColumns = ({
+  columns,
+  isColumnSecondary
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ 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__ */ jsx(
+        GanttColumn,
+        {
+          index,
+          isColumnSecondary
+        },
+        `${id}-${index}`
+      ))
+    }
+  );
+};
+var GanttGridLines = memo(({
+  className
+}) => {
+  const gantt = useContext(GanttContext);
+  const id = useId();
+  const { columns, monthBoundaryIndices } = 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__ */ 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__ */ 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 = useContext(GanttContext);
+  const [mousePosition, mouseRef] = useMouse();
+  const [windowScroll] = useWindowScroll();
+  const x = useThrottle(
+    mousePosition.x - (mouseRef.current?.getBoundingClientRect().x ?? 0) - (windowScroll.x ?? 0),
+    10
+  );
+  const date = getDateByMousePosition(gantt, x);
+  const handleClick = () => onCreateMarker(date);
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(PlusIcon, { className: "text-muted-foreground", size: 12 })
+              }
+            ),
+            /* @__PURE__ */ 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: formatDate$1(date, "MMM dd, yyyy") })
+          ]
+        }
+      )
+    }
+  );
+};
+var GanttFeatureDragHelper = ({
+  direction,
+  featureId,
+  date
+}) => {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = useDraggable$1({
+    id: `feature-drag-helper-${featureId}`
+  });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+  useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  return /* @__PURE__ */ 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__ */ 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__ */ 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: format(date, "MMM dd, yyyy")
+          }
+        )
+      ]
+    }
+  );
+};
+var GanttFeatureItemCard = ({
+  id,
+  children
+}) => {
+  const [, setDragging] = useGanttDragging();
+  const { attributes, listeners, setNodeRef } = useDraggable$1({ id });
+  const isPressed = Boolean(attributes["aria-pressed"]);
+  useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  return /* @__PURE__ */ 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__ */ 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 = useContext(GanttContext);
+  const timelineStartDate = useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const [startAt, setStartAt] = useState(feature.startAt);
+  const [endAt, setEndAt] = useState(feature.endAt);
+  const width = useMemo(
+    () => Math.round(getWidth(startAt, endAt, gantt)),
+    [startAt, endAt, gantt]
+  );
+  const offset = useMemo(
+    () => Math.round(getOffset(startAt, timelineStartDate, gantt)),
+    [startAt, timelineStartDate, gantt]
+  );
+  const addRange = useMemo(() => getAddRange(gantt.range), [gantt.range]);
+  const [mousePosition] = useMouse();
+  const [previousMouseX, setPreviousMouseX] = useState(0);
+  const [previousStartAt, setPreviousStartAt] = useState(startAt);
+  const [previousEndAt, setPreviousEndAt] = useState(endAt);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  const handleItemDragStart = useCallback(() => {
+    setPreviousMouseX(mousePosition.x);
+    setPreviousStartAt(startAt);
+    setPreviousEndAt(endAt);
+  }, [mousePosition.x, startAt, endAt]);
+  const handleItemDragMove = useCallback(() => {
+    const currentDate = getDateByMousePosition(gantt, mousePosition.x);
+    const originalDate = getDateByMousePosition(gantt, previousMouseX);
+    const delta = gantt.range === "weekly" ? differenceInDays(currentDate, originalDate) : getInnerDifferenceIn(gantt.range)(currentDate, originalDate);
+    const newStartDate = addDays(previousStartAt, delta);
+    const newEndDate = previousEndAt ? addDays(previousEndAt, delta) : null;
+    setStartAt(newStartDate);
+    setEndAt(newEndDate);
+  }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
+  const onDragEnd = useCallback(
+    () => onMove?.(feature.id, startAt, endAt),
+    [onMove, feature.id, startAt, endAt]
+  );
+  const handleLeftDragMove = 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 = 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__ */ jsx(
+    "div",
+    {
+      className: cn("relative flex w-max min-w-full", className),
+      style: { height: "var(--gantt-row-height)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "pointer-events-auto absolute",
+          style: {
+            height: "calc(var(--gantt-row-height) - 8px)",
+            top: "4px",
+            width,
+            left: offset
+          },
+          children: [
+            onMove && /* @__PURE__ */ jsx(
+              DndContext,
+              {
+                modifiers: [restrictToHorizontalAxis],
+                onDragEnd,
+                onDragMove: handleLeftDragMove,
+                sensors: [mouseSensor],
+                children: /* @__PURE__ */ jsx(
+                  GanttFeatureDragHelper,
+                  {
+                    date: startAt,
+                    direction: "left",
+                    featureId: feature.id
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(ContextMenu, { children: [
+              /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(
+                DndContext,
+                {
+                  modifiers: [restrictToHorizontalAxis],
+                  onDragEnd,
+                  onDragMove: handleItemDragMove,
+                  onDragStart: handleItemDragStart,
+                  sensors: [mouseSensor],
+                  children: /* @__PURE__ */ jsx(GanttFeatureItemCard, { id: feature.id, children: children ?? /* @__PURE__ */ jsx("p", { className: "flex-1 truncate text-xs", children: feature.name }) })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
+                onEdit && /* @__PURE__ */ jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2",
+                    onClick: () => onEdit(feature),
+                    children: [
+                      /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+                      "Edit"
+                    ]
+                  }
+                ),
+                onDuplicate && /* @__PURE__ */ jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2",
+                    onClick: () => onDuplicate(feature),
+                    children: [
+                      /* @__PURE__ */ jsx(CopyIcon, { size: 14 }),
+                      "Duplicate"
+                    ]
+                  }
+                ),
+                contextMenuActions?.map((action, index) => /* @__PURE__ */ 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__ */ jsxs(
+                  ContextMenuItem,
+                  {
+                    className: "flex items-center gap-2 text-destructive",
+                    onClick: () => onDelete(feature),
+                    children: [
+                      /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+                      "Delete"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            onMove && /* @__PURE__ */ jsx(
+              DndContext,
+              {
+                modifiers: [restrictToHorizontalAxis],
+                onDragEnd,
+                onDragMove: handleRightDragMove,
+                sensors: [mouseSensor],
+                children: /* @__PURE__ */ jsx(
+                  GanttFeatureDragHelper,
+                  {
+                    date: endAt ?? addRange(startAt, 2),
+                    direction: "right",
+                    featureId: feature.id
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var GanttFeatureListGroup = ({
+  children,
+  className
+}) => /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      className: cn("relative", className),
+      style: {
+        height: `${maxSubRows * subRowHeight}px`,
+        minHeight: "var(--gantt-row-height)"
+      },
+      children: featureWithPositions.map((feature) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute w-full",
+          style: {
+            top: `${feature.subRow * subRowHeight}px`,
+            height: `${subRowHeight}px`
+          },
+          children: /* @__PURE__ */ jsx(GanttFeatureItem, { ...feature, onMove, children: children ? children(feature) : /* @__PURE__ */ jsx("p", { className: "flex-1 truncate text-xs", children: feature.name }) })
+        },
+        feature.id
+      ))
+    }
+  );
+};
+var GanttFeatureList = ({
+  className,
+  children
+}) => /* @__PURE__ */ 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 = memo(({ label, date, id, onRemove, className }) => {
+  const gantt = useContext(GanttContext);
+  const differenceIn = useMemo(
+    () => getDifferenceIn(gantt.range),
+    [gantt.range]
+  );
+  const timelineStartDate = useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const offset = useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate]
+  );
+  const innerOffset = useMemo(
+    () => calculateInnerOffset(
+      date,
+      gantt.range,
+      gantt.columnWidth * gantt.zoom / 100
+    ),
+    [date, gantt.range, gantt.columnWidth, gantt.zoom]
+  );
+  const handleRemove = useCallback(() => onRemove?.(id), [onRemove, id]);
+  return /* @__PURE__ */ 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__ */ jsxs(ContextMenu, { children: [
+          /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]", children: formatDate$1(date, "MMM dd, yyyy") })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ContextMenuContent, { children: onRemove ? /* @__PURE__ */ jsxs(
+            ContextMenuItem,
+            {
+              className: "flex items-center gap-2 text-destructive",
+              onClick: handleRemove,
+              children: [
+                /* @__PURE__ */ jsx(TrashIcon, { size: 16 }),
+                "Remove marker"
+              ]
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ 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 = useRef(null);
+  const [timelineData, setTimelineData] = useState(
+    createInitialTimelineData(/* @__PURE__ */ new Date())
+  );
+  const [, setScrollX] = useGanttScrollX();
+  const sidebarWidth = 280;
+  const [expandedGroups, setExpandedGroups] = useState(defaultExpandedGroups);
+  const setGroupExpanded = 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 = 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]
+  );
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth / 2 - scrollRef.current.clientWidth / 2;
+      setScrollX(scrollRef.current.scrollLeft);
+    }
+  }, [setScrollX]);
+  const handleScroll = useCallback(
+    throttle(() => {
+      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: 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: getDaysInMonth(new Date(lastYear, month, 1))
+              };
+            })
+          }))
+        });
+        setTimelineData(newTimelineData);
+        scrollElement.scrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth;
+        setScrollX(scrollElement.scrollLeft);
+      }
+    }, 100),
+    []
+  );
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+    if (scrollElement) {
+      scrollElement.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (scrollElement) {
+        scrollElement.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [handleScroll]);
+  const scrollToFeature = 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__ */ jsx(
+    GanttContext.Provider,
+    {
+      value: {
+        zoom,
+        range,
+        headerHeight,
+        columnWidth,
+        sidebarWidth,
+        rowHeight,
+        onAddItem,
+        timelineData,
+        placeholderLength: 2,
+        ref: scrollRef,
+        scrollToFeature,
+        expandedGroups,
+        setGroupExpanded
+      },
+      children: /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              className: "col-span-2 grid overflow-auto",
+              ref: scrollRef,
+              style: {
+                gridTemplateColumns: "var(--gantt-sidebar-width) 1fr"
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var GanttTimeline = ({
+  children,
+  className
+}) => /* @__PURE__ */ 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 = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const gantt = useContext(GanttContext);
+  const differenceIn = useMemo(
+    () => getDifferenceIn(gantt.range),
+    [gantt.range]
+  );
+  const timelineStartDate = useMemo(
+    () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
+    [gantt.timelineData]
+  );
+  const offset = useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate]
+  );
+  const innerOffset = useMemo(
+    () => Math.round(calculateInnerOffset(
+      date,
+      gantt.range,
+      gantt.columnWidth * gantt.zoom / 100
+    )),
+    [date, gantt.range, gantt.columnWidth, gantt.zoom]
+  );
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "max-h-[0] overflow-hidden opacity-80 transition-all group-hover:max-h-[2rem]", children: formatDate$1(date, "MMM dd, yyyy") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("h-full w-px bg-primary", className) })
+      ]
+    }
+  );
+};
+var t = tunnel();
+var KanbanContext = createContext({
+  columns: [],
+  data: [],
+  activeCardId: null
+});
+var KanbanBoard = ({ id, children, className }) => {
+  const { isOver, setNodeRef } = useDroppable$1({
+    id
+  });
+  return /* @__PURE__ */ 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
+  } = useSortable({
+    id
+  });
+  const { activeCardId } = useContext(KanbanContext);
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform)
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style, ...listeners, ...attributes, ref: setNodeRef, className: "min-w-0", children: /* @__PURE__ */ 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__ */ jsx("p", { className: "m-0 font-medium text-sm", children: name })
+      }
+    ) }),
+    activeCardId === id && /* @__PURE__ */ jsx(t.In, { children: /* @__PURE__ */ 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__ */ jsx("p", { className: "m-0 font-medium text-sm", children: name })
+      }
+    ) })
+  ] });
+};
+var KanbanCards = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { data } = useContext(KanbanContext);
+  const filteredData = data.filter((item) => item.column === props.id);
+  const items = filteredData.map((item) => item.id);
+  return /* @__PURE__ */ jsxs(ScrollArea, { className: "overflow-hidden", children: [
+    /* @__PURE__ */ jsx(SortableContext, { items, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex flex-grow flex-col gap-2 p-2", className),
+        ...props,
+        children: filteredData.map(children)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
+  ] });
+};
+var KanbanHeader = ({ className, ...props }) => /* @__PURE__ */ 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] = useState(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(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 = 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 = 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__ */ jsx(KanbanContext.Provider, { value: { columns, data, activeCardId }, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      accessibility: { announcements },
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      onDragOver: handleDragOver,
+      onDragStart: handleDragStart,
+      sensors,
+      ...props,
+      children: [
+        /* @__PURE__ */ 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" && createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(t.Out, {}) }),
+          document.body
+        )
+      ]
+    }
+  ) });
+};
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, CalibrationTable, CalibrationWeekCell, CalibrationWeekHeader, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommentButton, CommentDialog, CommentPopover, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DateBadge, DayView, DeliveryBadge, DeliveryCard, DeliveryDetailPage, DeliveryIndicator, DeliveryIndicators, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Map2 as Map, MapMarker, MapPopup, MapTileLayer, MapTooltip, MapZoomControl, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetBadge, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlanningTable, PlanningTableToolbar, PlanningWeekCommentPopover, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowHeaderCell, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, SubmitCalibrationBar, SupplierCell, SupplierWeeklyLoading, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekCell, WeekDetailDialog, WeekHeader, WeekView, WeeklyLoadingView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateCalibrationCells, calculateDropDates, calculateMonthEventPositions, canSubmitCalibration, cardVariants, createDefaultEvent, deliveryIndicatorVariants, extractPrefixes, formatCalibrationUnit, formatDateRange2 as formatDateRange, formatProductionUnit, formatTime, generateColumns, generateEventId, generateLoadingWeek, generateLocationOptions, generateWeekColumns, generateWeeks, getCalendarCells, getCommentLocationLabel, getCurrentEvents, getDayHours, getDayLabel, getDeliveryVisualState, getElementShipmentStatus, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getISOWeek, getLoadingDeliveryStatusLabel, getLoadingElementStatusLabel, getLoadingISOWeek, getLoadingWeekKey, getMonthCellEvents, getMonthDays, getShipmentStatusLabel, getShortDayLabel, getSupplierColumn, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getWeekKey, getYearMonths, groupDeliveriesByDay, groupDeliveriesByPrefixAndDay, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useIsMobile, useSearchShortcut, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, CalibrationTable, CalibrationWeekCell, CalibrationWeekHeader, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommentButton, CommentDialog, CommentPopover, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DateBadge, DayView, DeliveryBadge, DeliveryCard, DeliveryDetailPage, DeliveryIndicator, DeliveryIndicators, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GanttAddFeatureHelper, GanttCollapsibleSidebarGroup, GanttCollapsibleTimelineGroup, GanttColumn, GanttColumns, GanttContentHeader, GanttCreateMarkerTrigger, GanttFeatureDragHelper, GanttFeatureItem, GanttFeatureItemCard, GanttFeatureList, GanttFeatureListGroup, GanttFeatureRow, GanttGridLines, GanttGroupSummaryBar, GanttHeader, GanttMarker, GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarHeader, GanttSidebarItem, GanttTimeline, GanttToday, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider, Kbd, KbdGroup, Label2 as Label, Map2 as Map, MapMarker, MapPopup, MapTileLayer, MapTooltip, MapZoomControl, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetBadge, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlanningTable, PlanningTableToolbar, PlanningWeekCommentPopover, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowHeaderCell, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, SubmitCalibrationBar, SupplierCell, SupplierWeeklyLoading, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekCell, WeekDetailDialog, WeekHeader, WeekView, WeeklyLoadingView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateCalibrationCells, calculateDropDates, calculateMonthEventPositions, canSubmitCalibration, cardVariants, createDefaultEvent, deliveryIndicatorVariants, extractPrefixes, formatCalibrationUnit, formatDateRange2 as formatDateRange, formatProductionUnit, formatTime, generateColumns, generateEventId, generateLoadingWeek, generateLocationOptions, generateWeekColumns, generateWeeks, getCalendarCells, getCommentLocationLabel, getCurrentEvents, getDayHours, getDayLabel, getDeliveryVisualState, getElementShipmentStatus, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getISOWeek, getLoadingDeliveryStatusLabel, getLoadingElementStatusLabel, getLoadingISOWeek, getLoadingWeekKey, getMonthCellEvents, getMonthDays, getShipmentStatusLabel, getShortDayLabel, getSupplierColumn, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getWeekKey, getYearMonths, groupDeliveriesByDay, groupDeliveriesByPrefixAndDay, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useGanttDragging, useGanttScrollX, useIsMobile, useSearchShortcut, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map