@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { getDayOffset } from './GanttChart.utils.js';
+import { getDaysBetween } from '../../../utils/dateUtils.js';
+
+const GanttGroupBar = React__default.memo(({ row, top }) => {
+    const { theme, dayWidth, rangeStart, rowHeight } = useGanttContext();
+    if (row.taskCount === 0)
+        return null;
+    const offset = getDayOffset(row.earliestStart, rangeStart);
+    const span = getDaysBetween(row.earliestStart, row.latestEnd);
+    const left = offset * dayWidth;
+    const width = span * dayWidth;
+    const barHeight = 6;
+    return (jsx("div", { className: cn(theme.groupBarStyle), style: {
+            left,
+            width: Math.max(width, dayWidth),
+            top: top + rowHeight - barHeight - 4,
+            height: barHeight,
+            backgroundColor: row.group.color,
+        } }));
+});
+
+export { GanttGroupBar };

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

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

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

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { getDayOffset, formatDateShort } from './GanttChart.utils.js';
+import { useGanttContext } from './GanttChart.js';
+import { Tooltip } from '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
+
+const GanttMilestone = React__default.memo(({ task, group, top, }) => {
+    var _a;
+    const { dayWidth, rangeStart, rowHeight, onTaskClick, readonly } = useGanttContext();
+    const offset = getDayOffset(task.endDate, rangeStart);
+    const left = offset * dayWidth + dayWidth / 2;
+    const size = 14;
+    const barColor = (_a = task.color) !== null && _a !== void 0 ? _a : group.color;
+    const tooltipContent = (jsxs("div", { className: "text-sm space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
+    const handleClick = (e) => {
+        onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === "Enter" || e.key === " ") && onTaskClick) {
+            e.preventDefault();
+            onTaskClick(task, e);
+        }
+    };
+    return (jsx(GanttTaskContextMenu, { task: task, children: jsx(Tooltip, { content: tooltipContent, placement: "top", children: jsxs("div", { className: "absolute", style: {
+                    left: left - size / 2,
+                    top: top + rowHeight / 2 - size / 2,
+                }, onClick: onTaskClick ? handleClick : undefined, onKeyDown: handleKeyDown, role: "button", tabIndex: onTaskClick ? 0 : undefined, "aria-label": `Milestone: ${task.title}`, children: [jsx("div", { className: `hover:scale-110 transition-transform ${readonly ? "cursor-default" : "cursor-pointer"}`, style: {
+                            width: size,
+                            height: size,
+                            backgroundColor: barColor,
+                            border: "2px solid var(--color-background, white)",
+                            transform: "rotate(45deg)",
+                            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+                        } }), jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
+                            left: size + 4,
+                            top: size / 2,
+                            transform: "translateY(-50%)",
+                            color: barColor,
+                        }, children: task.title })] }) }) }));
+});
+
+export { GanttMilestone };

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface GanttProgressCircleProps {
+    progress: number;
+    color: string;
+    size?: number;
+    strokeWidth?: number;
+}
+export declare const GanttProgressCircle: React.FC<GanttProgressCircleProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const GanttProgressCircle = ({ progress, color, size = 20, strokeWidth = 2.5, }) => {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (progress / 100) * circumference;
+    const center = size / 2;
+    return (jsxs("svg", { width: size, height: size, className: "shrink-0", children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, className: "text-[var(--color-border)]" }), jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: `rotate(-90 ${center} ${center})` }), progress === 100 && (jsx("path", { d: `M${center - 3} ${center} l2 2.5 l4 -4.5`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }))] }));
+};
+
+export { GanttProgressCircle };

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

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

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+
+const STEP = 20;
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 800;
+const GanttSplitter = () => {
+    const { theme, tablePanelWidth, setTablePanelWidth } = useGanttContext();
+    const startX = useRef(0);
+    const startWidth = useRef(0);
+    const onPointerDown = useCallback((e) => {
+        e.preventDefault();
+        startX.current = e.clientX;
+        startWidth.current = tablePanelWidth;
+        const onPointerMove = (ev) => {
+            const delta = ev.clientX - startX.current;
+            const next = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, startWidth.current + delta));
+            setTablePanelWidth(next);
+        };
+        const onPointerUp = () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+        };
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+    }, [tablePanelWidth, setTablePanelWidth]);
+    const onKeyDown = useCallback((e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            e.preventDefault();
+            const delta = e.key === "ArrowRight" ? STEP : -STEP;
+            setTablePanelWidth(Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, tablePanelWidth + delta)));
+        }
+    }, [tablePanelWidth, setTablePanelWidth]);
+    return (jsx("div", { className: cn(theme.splitterStyle), onPointerDown: onPointerDown, onKeyDown: onKeyDown, role: "separator", "aria-orientation": "vertical", "aria-valuenow": tablePanelWidth, "aria-valuemin": MIN_WIDTH, "aria-valuemax": MAX_WIDTH, "aria-label": "Resize table panel", tabIndex: 0 }));
+};
+
+export { GanttSplitter };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { GanttGroupRow } from "./GanttChart.types";
+interface GanttTableGroupRowProps {
+    row: GanttGroupRow;
+}
+export declare const GanttTableGroupRow: React.FC<GanttTableGroupRowProps>;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { motion } from 'motion/react';
+import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { chevronVariants } from './GanttChart.animations.js';
+
+const GanttTableGroupRow = React__default.memo(({ row, }) => {
+    const { theme, collapsedGroups, toggleGroup, onTaskAdd, rowHeight, readonly } = useGanttContext();
+    const isCollapsed = collapsedGroups.includes(row.group.id);
+    return (jsxs("div", { className: cn(theme.tableGroupRowStyle, "group"), style: { height: rowHeight }, onClick: () => toggleGroup(row.group.id), onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleGroup(row.group.id);
+            }
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+                    e.stopPropagation();
+                    onTaskAdd(row.group.id);
+                }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));
+});
+
+export { GanttTableGroupRow };

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

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

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

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+
+const GanttTableHeader = () => {
+    const { theme, columns } = useGanttContext();
+    return (jsx("div", { className: cn(theme.tableHeaderStyle), style: { height: 56 }, children: columns.map((col) => {
+            var _a;
+            return (jsx("div", { className: cn(theme.tableHeaderCellStyle, col.align === "center" && "text-center", col.align === "right" && "text-right"), style: { width: (_a = col.width) !== null && _a !== void 0 ? _a : 120 }, children: col.header }, col.id));
+        }) }));
+};
+
+export { GanttTableHeader };

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface GanttTablePanelProps {
+    onScroll: () => void;
+}
+export declare const GanttTablePanel: React.ForwardRefExoticComponent<GanttTablePanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext } from './GanttChart.js';
+import { GanttTableHeader } from './GanttTableHeader.js';
+import { GanttTableGroupRow } from './GanttTableGroupRow.js';
+import { GanttTableTaskRow } from './GanttTableTaskRow.js';
+
+const GanttTablePanel = forwardRef(({ onScroll }, ref) => {
+    const { theme, rows, tablePanelWidth } = useGanttContext();
+    return (jsxs("div", { className: cn(theme.tablePanelStyle), style: { width: tablePanelWidth }, children: [jsx(GanttTableHeader, {}), jsx("div", { ref: ref, className: "overflow-y-auto overflow-x-hidden flex-1 min-h-0", onScroll: onScroll, children: rows.map((row, i) => {
+                    if (row.type === "group") {
+                        return (jsx(GanttTableGroupRow, { row: row }, `group-${row.group.id}`));
+                    }
+                    return (jsx(GanttTableTaskRow, { task: row.task, group: row.group }, `task-${row.task.id}`));
+                }) })] }));
+});
+GanttTablePanel.displayName = "GanttTablePanel";
+
+export { GanttTablePanel };

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-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", 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-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm 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;