@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/data-display/GanttChart/GanttTableTaskRow.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { GanttTask, GanttGroup } from "./GanttChart.types";
+interface GanttTableTaskRowProps {
+    task: GanttTask;
+    group: GanttGroup;
+}
+export declare const GanttTableTaskRow: React.FC<GanttTableTaskRowProps>;
+export {};

package/dist/components/data-display/GanttChart/GanttTableTaskRow.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
+
+function getCellValue(task, group, column) {
+    if (column.cell) {
+        return column.cell(task, group);
+    }
+    const raw = typeof column.accessor === "function"
+        ? column.accessor(task)
+        : task[column.accessor];
+    return raw != null ? String(raw) : "";
+}
+const GanttTableTaskRow = React__default.memo(({ task, group, }) => {
+    const { theme, columns, rowHeight, onTaskClick } = useGanttContext();
+    const { focusedTaskId } = useGanttInteraction();
+    return (jsx(GanttTaskContextMenu, { task: task, children: jsx("div", { className: cn(theme.tableTaskRowStyle, "group", onTaskClick && "cursor-pointer", focusedTaskId === task.id && "bg-[var(--color-primary)]/5"), style: { height: rowHeight }, onClick: onTaskClick ? (e) => onTaskClick(task, e) : undefined, onKeyDown: onTaskClick ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onTaskClick(task, e);
+                }
+            } : undefined, role: onTaskClick ? "button" : "row", tabIndex: onTaskClick ? 0 : undefined, "aria-label": task.title, children: columns.map((col) => {
+                var _a;
+                return (jsx("div", { className: cn(theme.tableCellStyle, "flex items-center", col.align === "center" && "justify-center", col.align === "right" && "justify-end"), style: { width: (_a = col.width) !== null && _a !== void 0 ? _a : 120 }, children: getCellValue(task, group, col) }, col.id));
+            }) }) }));
+});
+
+export { GanttTableTaskRow };

package/dist/components/data-display/GanttChart/GanttTaskBar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GanttTask, GanttGroup } from "./GanttChart.types";
+interface GanttTaskBarProps {
+    task: GanttTask;
+    group: GanttGroup;
+    top: number;
+}
+export declare const GanttTaskBar: React.FC<GanttTaskBarProps>;
+export {};

package/dist/components/data-display/GanttChart/GanttTaskBar.js

@@ -0,0 +1,206 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useCallback, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { getDayOffset, calculateExpectedProgress, formatDateShort, formatDuration } from './GanttChart.utils.js';
+import { ChartTooltip } from '../../charts/shared/ChartTooltip/ChartTooltip.js';
+import { Avatar } from '../../core/Avatar/Avatar.js';
+import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
+import { taskBarVariants } from './GanttChart.animations.js';
+import { useGanttDrag } from './hooks/useGanttDrag.js';
+import { getDaysBetween, addDays, toDate } from '../../../utils/dateUtils.js';
+
+const GanttTaskBar = React__default.memo(({ task, group, top, }) => {
+    var _a;
+    const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, } = useGanttContext();
+    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setActiveDrag, } = useGanttInteraction();
+    const [tooltipPos, setTooltipPos] = useState(null);
+    const offset = getDayOffset(task.startDate, rangeStart);
+    const span = getDaysBetween(task.startDate, task.endDate);
+    const left = offset * dayWidth;
+    const width = Math.max(span * dayWidth, dayWidth);
+    const barColor = (_a = task.color) !== null && _a !== void 0 ? _a : group.color;
+    const barHeight = rowHeight - 8;
+    const canDragDates = !readonly && !readonlyDates && !!onTaskUpdate;
+    const canDragProgress = !readonly && !readonlyProgress && !!onTaskUpdate;
+    const expectedProgress = calculateExpectedProgress(task.startDate, task.endDate);
+    const isBehindSchedule = !task.completed && task.progress < expectedProgress;
+    // ----- Drag: Move -----
+    const handleMoveDragEnd = useCallback((result) => {
+        if (!onTaskUpdate || result.daysDelta === 0)
+            return;
+        const newStart = addDays(task.startDate, result.daysDelta);
+        const newEnd = addDays(task.endDate, result.daysDelta);
+        onTaskUpdate(task.id, {
+            startDate: newStart,
+            endDate: newEnd,
+        });
+    }, [onTaskUpdate, task.id, task.startDate, task.endDate]);
+    const moveDrag = useGanttDrag({
+        dayWidth,
+        mode: "move",
+        barWidthPx: width,
+        originalProgress: task.progress,
+        disabled: !canDragDates,
+        onDragEnd: handleMoveDragEnd,
+        onDragStateChange: useCallback((isDragging, deltaX) => {
+            setActiveDrag(isDragging ? { taskId: task.id, mode: "move", deltaX } : null);
+        }, [setActiveDrag, task.id]),
+    });
+    // ----- Drag: Resize left -----
+    const handleResizeLeftEnd = useCallback((result) => {
+        if (!onTaskUpdate || result.daysDelta === 0)
+            return;
+        const newStart = addDays(task.startDate, result.daysDelta);
+        // Ensure start doesn't go past end
+        if (toDate(newStart).getTime() >= toDate(task.endDate).getTime())
+            return;
+        onTaskUpdate(task.id, { startDate: newStart });
+    }, [onTaskUpdate, task.id, task.startDate, task.endDate]);
+    const resizeLeftDrag = useGanttDrag({
+        dayWidth,
+        mode: "resize-left",
+        barWidthPx: width,
+        originalProgress: task.progress,
+        disabled: !canDragDates,
+        onDragEnd: handleResizeLeftEnd,
+        onDragStateChange: useCallback((isDragging, deltaX) => {
+            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-left", deltaX } : null);
+        }, [setActiveDrag, task.id]),
+    });
+    // ----- Drag: Resize right -----
+    const handleResizeRightEnd = useCallback((result) => {
+        if (!onTaskUpdate || result.daysDelta === 0)
+            return;
+        const newEnd = addDays(task.endDate, result.daysDelta);
+        // Ensure end doesn't go before start
+        if (toDate(newEnd).getTime() <= toDate(task.startDate).getTime())
+            return;
+        onTaskUpdate(task.id, { endDate: newEnd });
+    }, [onTaskUpdate, task.id, task.startDate, task.endDate]);
+    const resizeRightDrag = useGanttDrag({
+        dayWidth,
+        mode: "resize-right",
+        barWidthPx: width,
+        originalProgress: task.progress,
+        disabled: !canDragDates,
+        onDragEnd: handleResizeRightEnd,
+        onDragStateChange: useCallback((isDragging, deltaX) => {
+            setActiveDrag(isDragging ? { taskId: task.id, mode: "resize-right", deltaX } : null);
+        }, [setActiveDrag, task.id]),
+    });
+    // ----- Drag: Progress -----
+    const handleProgressDragEnd = useCallback((result) => {
+        if (!onTaskUpdate)
+            return;
+        onTaskUpdate(task.id, {
+            progress: result.newProgress,
+            completed: result.newProgress === 100,
+        });
+    }, [onTaskUpdate, task.id]);
+    const progressDrag = useGanttDrag({
+        dayWidth,
+        mode: "progress",
+        barWidthPx: width,
+        originalProgress: task.progress,
+        disabled: !canDragProgress,
+        onDragEnd: handleProgressDragEnd,
+    });
+    const anyDragging = moveDrag.isDragging ||
+        resizeLeftDrag.isDragging ||
+        resizeRightDrag.isDragging ||
+        progressDrag.isDragging;
+    const anyDidDrag = moveDrag.didDrag ||
+        resizeLeftDrag.didDrag ||
+        resizeRightDrag.didDrag ||
+        progressDrag.didDrag;
+    // ----- Computed visual positions during drag -----
+    let visualLeft = left;
+    let visualWidth = width;
+    let displayProgress = task.progress;
+    if (moveDrag.isDragging) {
+        visualLeft = left + moveDrag.dragDeltaX;
+    }
+    else if (resizeLeftDrag.isDragging) {
+        const delta = resizeLeftDrag.dragDeltaX;
+        // Clamp so width never goes below 1 day
+        const maxDelta = width - dayWidth;
+        const clampedDelta = Math.min(delta, maxDelta);
+        visualLeft = left + clampedDelta;
+        visualWidth = width - clampedDelta;
+    }
+    else if (resizeRightDrag.isDragging) {
+        const delta = resizeRightDrag.dragDeltaX;
+        // Clamp so width never goes below 1 day
+        visualWidth = Math.max(width + delta, dayWidth);
+    }
+    if (progressDrag.isDragging) {
+        displayProgress = progressDrag.dragProgress;
+    }
+    const isNarrow = visualWidth <= 80;
+    // ----- Hover highlighting (dependency connections) -----
+    const isHighlighted = useMemo(() => {
+        var _a, _b, _c;
+        if (!hoveredTaskId || hoveredTaskId === task.id)
+            return false;
+        // Check if this task depends on hovered task
+        if ((_a = task.dependencies) === null || _a === void 0 ? void 0 : _a.includes(hoveredTaskId))
+            return true;
+        // Check if hovered task depends on this task
+        const hoveredTask = tasks.find((t) => t.id === hoveredTaskId);
+        return (_c = (_b = hoveredTask === null || hoveredTask === void 0 ? void 0 : hoveredTask.dependencies) === null || _b === void 0 ? void 0 : _b.includes(task.id)) !== null && _c !== void 0 ? _c : false;
+    }, [hoveredTaskId, task.id, task.dependencies, tasks]);
+    const isFaded = hoveredTaskId !== null &&
+        hoveredTaskId !== task.id &&
+        !isHighlighted;
+    const isFocused = focusedTaskId === task.id;
+    // ----- Click handler -----
+    const handleClick = (e) => {
+        if (anyDidDrag)
+            return;
+        onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
+    };
+    // ----- Tooltip -----
+    const tooltipContent = (jsxs("div", { className: "text-xs space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-sm", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
+                                width: `${task.progress}%`,
+                                backgroundColor: barColor,
+                            } }) })] }), task.assignee && (jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" }), jsx("span", { children: task.assignee.name })] })), isBehindSchedule && (jsxs("div", { className: "text-[var(--color-warning)] text-[10px]", children: ["Behind schedule (expected ", expectedProgress, "%)"] }))] }));
+    return (jsxs(Fragment, { children: [jsx(GanttTaskContextMenu, { task: task, children: jsxs("div", { className: "absolute", style: {
+                        left: visualLeft,
+                        top: top + (rowHeight - barHeight) / 2,
+                    }, onMouseEnter: (e) => {
+                        if (!anyDragging) {
+                            setTooltipPos({ x: e.clientX, y: e.clientY });
+                            setHoveredTaskId(task.id);
+                        }
+                    }, onMouseMove: (e) => {
+                        if (!anyDragging) {
+                            setTooltipPos({ x: e.clientX, y: e.clientY });
+                        }
+                    }, onMouseLeave: () => {
+                        setTooltipPos(null);
+                        setHoveredTaskId(null);
+                    }, onClick: onTaskClick ? handleClick : undefined, onPointerDown: canDragDates ? moveDrag.handlePointerDown : undefined, role: "button", "aria-label": task.title, children: [jsxs(motion.div, { className: cn(theme.taskBarStyle, "group", task.completed && "opacity-60", canDragDates && !anyDragging && "cursor-grab", anyDragging && "cursor-grabbing", !canDragDates && "cursor-default", isHighlighted && "ring-2 ring-white/60", isFaded && "opacity-40", isFocused && "ring-2 ring-[var(--color-primary)] ring-offset-1"), style: {
+                                width: visualWidth,
+                                height: barHeight,
+                                backgroundColor: barColor,
+                                border: "1px solid rgba(0,0,0,0.12)",
+                                borderRadius: "2rem",
+                                transformOrigin: "left center",
+                                transition: anyDragging ? "none" : undefined,
+                            }, variants: taskBarVariants, initial: "hidden", animate: "visible", whileHover: anyDragging ? undefined : { filter: "brightness(0.96)" }, children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
+                                        width: `${displayProgress}%`,
+                                        background: "linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15))",
+                                    } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
+                                        left: `${expectedProgress}%`,
+                                        borderLeft: "2px dashed rgba(255,255,255,0.5)",
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, alt: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-xs text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-xs font-medium whitespace-nowrap pointer-events-none", style: {
+                                left: visualWidth + 6,
+                                top: barHeight / 2,
+                                transform: "translateY(-50%)",
+                                color: barColor,
+                            }, children: task.title }))] }) }), jsx(ChartTooltip, { active: !!tooltipPos && !anyDragging, position: tooltipPos !== null && tooltipPos !== void 0 ? tooltipPos : { x: 0, y: 0 }, content: tooltipContent })] }));
+});
+
+export { GanttTaskBar };

package/dist/components/data-display/GanttChart/GanttTaskContextMenu.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from "react";
+import type { GanttTask } from "./GanttChart.types";
+interface GanttTaskContextMenuProps {
+    task: GanttTask;
+    children: ReactElement;
+}
+export declare const GanttTaskContextMenu: React.FC<GanttTaskContextMenuProps>;
+export {};

package/dist/components/data-display/GanttChart/GanttTaskContextMenu.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { CheckCircleIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { ContextMenu } from '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import { useGanttContext } from './GanttChart.js';
+
+const PROGRESS_STEPS = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+const GanttTaskContextMenu = ({ task, children, }) => {
+    const { onTaskUpdate, onTaskDuplicate, onTaskDelete, readonly } = useGanttContext();
+    // If readonly or no callbacks, just render children without wrapping
+    if (readonly || (!onTaskUpdate && !onTaskDuplicate && !onTaskDelete)) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsxs(ContextMenu, { children: [jsx(ContextMenu.Trigger, { children: children }), jsxs(ContextMenu.Content, { children: [onTaskUpdate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { completed: !task.completed, progress: task.completed ? 0 : 100 }), children: [jsx(CheckCircleIcon, { className: "size-4 mr-2" }), task.completed ? "Mark as incomplete" : "Mark as done"] })), onTaskUpdate && (jsxs(ContextMenu.Sub, { children: [jsx(ContextMenu.SubTrigger, { children: "Progress" }), jsx(ContextMenu.SubContent, { children: PROGRESS_STEPS.map((val) => (jsxs(ContextMenu.Item, { onSelect: () => onTaskUpdate(task.id, { progress: val, completed: val === 100 }), children: [val, "%"] }, val))) })] })), (onTaskDuplicate || onTaskDelete) && jsx(ContextMenu.Separator, {}), onTaskDuplicate && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDuplicate(task.id), children: [jsx(DocumentDuplicateIcon, { className: "size-4 mr-2" }), "Duplicate"] })), onTaskDelete && (jsxs(ContextMenu.Item, { onSelect: () => onTaskDelete(task.id), className: "text-[var(--color-danger)]", children: [jsx(TrashIcon, { className: "size-4 mr-2" }), "Delete"] }))] })] }));
+};
+
+export { GanttTaskContextMenu };

package/dist/components/data-display/GanttChart/GanttTimelineGrid.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface GanttTimelineGridProps {
+    days: Date[];
+    height: number;
+}
+export declare const GanttTimelineGrid: React.FC<GanttTimelineGridProps>;
+export {};

package/dist/components/data-display/GanttChart/GanttTimelineGrid.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { toDate, isWeekend } from '../../../utils/dateUtils.js';
+
+const GanttTimelineGrid = ({ days, height, }) => {
+    const { theme, dayWidth, todayMarker, todayOffset, rows, rowHeight, holidays, gridLines, } = useGanttContext();
+    const totalWidth = days.length * dayWidth;
+    const showVertical = gridLines === "both" || gridLines === "vertical";
+    const showHorizontal = gridLines === "both" || gridLines === "horizontal";
+    // Build a dateKey -> holiday lookup
+    const holidayMap = useMemo(() => {
+        const map = new Map();
+        for (const h of holidays) {
+            const d = toDate(h.date);
+            const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+            map.set(key, { label: h.label, color: h.color });
+        }
+        return map;
+    }, [holidays]);
+    return (jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { width: totalWidth, height }, children: [days.map((day, i) => {
+                var _a, _b;
+                const key = `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
+                const holiday = holidayMap.get(key);
+                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
+                                    backgroundColor: (_a = holiday.color) !== null && _a !== void 0 ? _a : "var(--color-warning-100, rgba(245, 158, 11, 0.08))",
+                                } }), jsx("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-[8px] whitespace-nowrap opacity-60", style: { color: (_b = holiday.color) !== null && _b !== void 0 ? _b : "var(--color-warning, #F59E0B)" }, children: holiday.label })] })) }, i));
+            }), showHorizontal &&
+                rows.map((_, i) => (jsx("div", { className: "absolute left-0 right-0 border-b border-[var(--color-border)]/20", style: { top: (i + 1) * rowHeight } }, `h-${i}`))), todayMarker && todayOffset !== null && (jsxs(Fragment, { children: [jsx("div", { className: cn("absolute top-0 bottom-0", theme.todayColumnStyle), style: { left: todayOffset * dayWidth, width: dayWidth } }), jsx("div", { className: cn("absolute top-0 bottom-0 z-10", theme.todayMarkerStyle), style: { left: todayOffset * dayWidth + dayWidth / 2 } })] }))] }));
+};
+
+export { GanttTimelineGrid };

package/dist/components/data-display/GanttChart/GanttTimelineHeader.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { MonthSpan } from "./GanttChart.utils";
+interface GanttTimelineHeaderProps {
+    days: Date[];
+    monthSpans: MonthSpan[];
+}
+export declare const GanttTimelineHeader: React.FC<GanttTimelineHeaderProps>;
+export {};

package/dist/components/data-display/GanttChart/GanttTimelineHeader.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { formatDayLabel } from './GanttChart.utils.js';
+import { isSameDay, isWeekend } from '../../../utils/dateUtils.js';
+
+function getDayLabel(day, zoom) {
+    switch (zoom) {
+        case "day":
+            return formatDayLabel(day, zoom);
+        case "week":
+            // Show day number only on Mondays
+            return day.getDay() === 1 ? `${day.getDate()}` : "";
+        case "quarter":
+            // Show day number on 1st, 8th, 15th, 22nd
+            return [1, 8, 15, 22].includes(day.getDate())
+                ? `${day.getDate()}`
+                : "";
+        case "month":
+            // Show day number on 1st and 15th
+            return day.getDate() === 1 || day.getDate() === 15
+                ? `${day.getDate()}`
+                : "";
+        case "year":
+            // Show only on 1st of each month
+            return day.getDate() === 1
+                ? day.toLocaleDateString("en-US", { month: "short" })
+                : "";
+    }
+}
+const GanttTimelineHeader = ({ days, monthSpans, }) => {
+    const { theme, dayWidth, zoom } = useGanttContext();
+    const totalWidth = days.length * dayWidth;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: monthSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
+                    const isToday = isSameDay(day, today);
+                    const weekend = isWeekend(day);
+                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-background-secondary)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
+                }) })] }));
+};
+
+export { GanttTimelineHeader };

package/dist/components/data-display/GanttChart/GanttToolbar.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const GanttToolbar: React.FC;

package/dist/components/data-display/GanttChart/GanttToolbar.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CalendarIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { Segmented } from '../../core/Segmented/Segmented.js';
+import { Button } from '../../core/Button/Button.js';
+import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+
+const ZOOM_OPTIONS = [
+    { value: "day", label: "Day" },
+    { value: "week", label: "Week" },
+    { value: "quarter", label: "Quarter" },
+    { value: "month", label: "Month" },
+    { value: "year", label: "Year" },
+];
+const GanttToolbar = () => {
+    const { theme, zoom, setZoom, hideCompleted, setHideCompleted, onGroupAdd, todayOffset, dayWidth, readonly, } = useGanttContext();
+    const handleScrollToToday = () => {
+        const container = document.querySelector("[data-gantt-chart-scroll]");
+        if (!container || todayOffset === null)
+            return;
+        const targetScroll = todayOffset * dayWidth - container.clientWidth / 2;
+        container.scrollTo({ left: targetScroll, behavior: "smooth" });
+    };
+    return (jsxs("div", { className: cn(theme.toolbarStyle), children: [jsxs("div", { className: "flex items-center gap-3", children: [todayOffset !== null && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleScrollToToday, children: [jsx(CalendarIcon, { className: "size-4" }), "Today"] })), jsx(Segmented, { value: zoom, onChange: (val) => setZoom(val), size: "sm", children: ZOOM_OPTIONS.map((opt) => (jsx(Segmented.Item, { value: opt.value, children: opt.label }, opt.value))) }), jsx(Checkbox, { id: "gantt-hide-completed", name: "hideCompleted", value: "hideCompleted", checked: hideCompleted, onChange: (checked) => setHideCompleted(checked), label: "Hide completed", size: "sm" })] }), jsx("div", { className: "flex items-center gap-2", children: onGroupAdd && !readonly && (jsxs(Button, { variant: "ghost", size: "sm", onClick: onGroupAdd, children: [jsx(PlusIcon, { className: "size-3.5" }), "Add group"] })) })] }));
+};
+
+export { GanttToolbar };

package/dist/components/data-display/GanttChart/hooks/useGanttDates.d.ts

@@ -0,0 +1,12 @@
+import type { GanttTask, GanttZoom } from "../GanttChart.types";
+import type { MonthSpan } from "../GanttChart.utils";
+export interface UseGanttDatesResult {
+    rangeStart: Date;
+    rangeEnd: Date;
+    days: Date[];
+    monthSpans: MonthSpan[];
+    totalDays: number;
+    dayWidth: number;
+    todayOffset: number | null;
+}
+export declare function useGanttDates(tasks: GanttTask[], zoom: GanttZoom, startDate?: Date | string, endDate?: Date | string): UseGanttDatesResult;

package/dist/components/data-display/GanttChart/hooks/useGanttDates.js

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { DAY_WIDTHS } from '../GanttChart.types.js';
+import { autoDateRange, generateDayColumns, generateMonthSpans, getDayOffset } from '../GanttChart.utils.js';
+import { toDate, isSameDay } from '../../../../utils/dateUtils.js';
+
+function useGanttDates(tasks, zoom, startDate, endDate) {
+    return useMemo(() => {
+        const auto = autoDateRange(tasks);
+        const rangeStart = startDate ? toDate(startDate) : auto.start;
+        const rangeEnd = endDate ? toDate(endDate) : auto.end;
+        const days = generateDayColumns(rangeStart, rangeEnd);
+        const monthSpans = generateMonthSpans(days);
+        const totalDays = days.length;
+        const dayWidth = DAY_WIDTHS[zoom];
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const todayInRange = days.some((d) => isSameDay(d, today));
+        const todayOffset = todayInRange
+            ? getDayOffset(today, rangeStart)
+            : null;
+        return { rangeStart, rangeEnd, days, monthSpans, totalDays, dayWidth, todayOffset };
+    }, [tasks, zoom, startDate, endDate]);
+}
+
+export { useGanttDates };

package/dist/components/data-display/GanttChart/hooks/useGanttDrag.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+export type DragMode = "move" | "resize-left" | "resize-right" | "progress";
+export interface DragResult {
+    mode: DragMode;
+    daysDelta: number;
+    newProgress: number;
+}
+interface UseGanttDragOptions {
+    dayWidth: number;
+    mode: DragMode;
+    barWidthPx: number;
+    originalProgress: number;
+    disabled?: boolean;
+    onDragEnd: (result: DragResult) => void;
+    onDragStateChange?: (isDragging: boolean, deltaX: number) => void;
+}
+interface UseGanttDragReturn {
+    isDragging: boolean;
+    didDrag: boolean;
+    dragDeltaX: number;
+    dragProgress: number;
+    handlePointerDown: (e: React.PointerEvent) => void;
+}
+export declare function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled, onDragEnd, onDragStateChange, }: UseGanttDragOptions): UseGanttDragReturn;
+export {};

package/dist/components/data-display/GanttChart/hooks/useGanttDrag.js

@@ -0,0 +1,144 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DRAG_THRESHOLD = 3; // px dead zone before drag activates
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+function useGanttDrag({ dayWidth, mode, barWidthPx, originalProgress, disabled = false, onDragEnd, onDragStateChange, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragDeltaX, setDragDeltaX] = useState(0);
+    const [dragProgress, setDragProgress] = useState(originalProgress);
+    const didDragRef = useRef(false);
+    const startXRef = useRef(0);
+    const activatedRef = useRef(false);
+    const cancelledRef = useRef(false);
+    const cleanupRef = useRef(null);
+    // Reset didDrag after a tick so click handler can read it
+    const [didDrag, setDidDrag] = useState(false);
+    useEffect(() => {
+        if (didDrag) {
+            const timer = setTimeout(() => setDidDrag(false), 0);
+            return () => clearTimeout(timer);
+        }
+    }, [didDrag]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled || e.button !== 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        startXRef.current = e.clientX;
+        activatedRef.current = false;
+        cancelledRef.current = false;
+        didDragRef.current = false;
+        const onPointerMove = (ev) => {
+            var _a;
+            if (cancelledRef.current)
+                return;
+            const rawDelta = ev.clientX - startXRef.current;
+            // Dead zone: don't activate drag until threshold crossed
+            if (!activatedRef.current) {
+                if (Math.abs(rawDelta) < DRAG_THRESHOLD)
+                    return;
+                activatedRef.current = true;
+                didDragRef.current = true;
+                setIsDragging(true);
+            }
+            if (mode === "progress") {
+                // Progress: map delta to 0-100 range
+                const progressDelta = barWidthPx > 0 ? (rawDelta / barWidthPx) * 100 : 0;
+                const newProgress = Math.round(Math.max(0, Math.min(100, originalProgress + progressDelta)));
+                setDragProgress(newProgress);
+                setDragDeltaX(rawDelta);
+            }
+            else {
+                // Move/resize: snap to day grid
+                const snappedDelta = Math.round(rawDelta / dayWidth) * dayWidth;
+                setDragDeltaX(snappedDelta);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, true, snappedDelta);
+            }
+        };
+        const onPointerUp = () => {
+            var _a, _b;
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("keydown", onKeyDown);
+            cleanupRef.current = null;
+            if (cancelledRef.current) {
+                setIsDragging(false);
+                setDragDeltaX(0);
+                setDragProgress(originalProgress);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, false, 0);
+                return;
+            }
+            if (activatedRef.current) {
+                setDidDrag(true);
+                const finalDelta = dragDeltaXRef.current;
+                const daysDelta = Math.round(finalDelta / dayWidth);
+                if (mode === "progress") {
+                    onDragEnd({
+                        mode,
+                        daysDelta: 0,
+                        newProgress: dragProgressRef.current,
+                    });
+                }
+                else if (daysDelta !== 0) {
+                    onDragEnd({ mode, daysDelta, newProgress: originalProgress });
+                }
+            }
+            (_b = onDragStateChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onDragStateChangeRef, false, 0);
+            setIsDragging(false);
+            setDragDeltaX(0);
+            setDragProgress(originalProgress);
+        };
+        const onKeyDown = (ev) => {
+            var _a;
+            if (ev.key === "Escape") {
+                cancelledRef.current = true;
+                setIsDragging(false);
+                setDragDeltaX(0);
+                setDragProgress(originalProgress);
+                (_a = onDragStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragStateChangeRef, false, 0);
+                document.removeEventListener("pointermove", onPointerMove);
+                document.removeEventListener("pointerup", onPointerUp);
+                document.removeEventListener("keydown", onKeyDown);
+                cleanupRef.current = null;
+            }
+        };
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+        document.addEventListener("keydown", onKeyDown);
+        // Store cleanup so useEffect can remove listeners if component unmounts mid-drag
+        cleanupRef.current = () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("keydown", onKeyDown);
+            cleanupRef.current = null;
+        };
+    }, [disabled, dayWidth, mode, barWidthPx, originalProgress, onDragEnd]);
+    // Remove dangling listeners on unmount
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        };
+    }, []);
+    // Keep refs in sync with state/callbacks so closures read current values
+    const dragDeltaXRef = useRef(dragDeltaX);
+    dragDeltaXRef.current = dragDeltaX;
+    const dragProgressRef = useRef(dragProgress);
+    dragProgressRef.current = dragProgress;
+    const onDragStateChangeRef = useRef(onDragStateChange);
+    onDragStateChangeRef.current = onDragStateChange;
+    return {
+        isDragging,
+        didDrag,
+        dragDeltaX,
+        dragProgress,
+        handlePointerDown,
+    };
+}
+
+export { useGanttDrag };

package/dist/components/data-display/GanttChart/hooks/useGanttLayout.d.ts

@@ -0,0 +1,2 @@
+import type { GanttTask, GanttGroup, GanttRow } from "../GanttChart.types";
+export declare function useGanttLayout(groups: GanttGroup[], tasks: GanttTask[], collapsedGroups: string[], hideCompleted: boolean): GanttRow[];