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

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

@@ -0,0 +1,274 @@
+import { toDate, getDaysBetween } from '../../../utils/dateUtils.js';
+export { addDays, isSameDay, isWeekend } from '../../../utils/dateUtils.js';
+
+// Re-export generic date utilities from shared utils so existing consumers
+// that import from "GanttChart.utils" continue to work.
+/**
+ * Day-offset of `date` from `rangeStart` (0-based).
+ */
+function getDayOffset(date, rangeStart) {
+    return Math.round((toDate(date).getTime() - toDate(rangeStart).getTime()) / 86400000);
+}
+/**
+ * Generate every date between rangeStart and rangeEnd (inclusive).
+ */
+function generateDayColumns(rangeStart, rangeEnd) {
+    const days = [];
+    const current = new Date(rangeStart);
+    current.setHours(0, 0, 0, 0);
+    const end = new Date(rangeEnd);
+    end.setHours(0, 0, 0, 0);
+    while (current <= end) {
+        days.push(new Date(current));
+        current.setDate(current.getDate() + 1);
+    }
+    return days;
+}
+function generateMonthSpans(days) {
+    if (days.length === 0)
+        return [];
+    const spans = [];
+    let currentLabel = formatMonthLabel(days[0]);
+    let startIndex = 0;
+    for (let i = 1; i < days.length; i++) {
+        const label = formatMonthLabel(days[i]);
+        if (label !== currentLabel) {
+            spans.push({ label: currentLabel, startIndex, span: i - startIndex });
+            currentLabel = label;
+            startIndex = i;
+        }
+    }
+    spans.push({
+        label: currentLabel,
+        startIndex,
+        span: days.length - startIndex,
+    });
+    return spans;
+}
+function formatMonthLabel(date) {
+    return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+}
+/**
+ * Auto-detect date range from task data with padding.
+ */
+function autoDateRange(tasks, paddingDays = 7) {
+    if (tasks.length === 0) {
+        const now = new Date();
+        now.setHours(0, 0, 0, 0);
+        const end = new Date(now);
+        end.setDate(end.getDate() + 30);
+        return { start: now, end };
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    for (const t of tasks) {
+        const s = toDate(t.startDate).getTime();
+        const e = toDate(t.endDate).getTime();
+        if (s < min)
+            min = s;
+        if (e > max)
+            max = e;
+    }
+    const start = new Date(min);
+    start.setDate(start.getDate() - paddingDays);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(max);
+    end.setDate(end.getDate() + paddingDays);
+    end.setHours(0, 0, 0, 0);
+    return { start, end };
+}
+/**
+ * Compute group summary: earliest start, latest end, completed count.
+ */
+function computeGroupSummary(group, tasks) {
+    const groupTasks = tasks.filter((t) => t.groupId === group.id);
+    if (groupTasks.length === 0) {
+        const now = new Date();
+        return { earliestStart: now, latestEnd: now, completedCount: 0 };
+    }
+    let earliest = Infinity;
+    let latest = -Infinity;
+    let completed = 0;
+    for (const t of groupTasks) {
+        const s = toDate(t.startDate).getTime();
+        const e = toDate(t.endDate).getTime();
+        if (s < earliest)
+            earliest = s;
+        if (e > latest)
+            latest = e;
+        if (t.completed)
+            completed++;
+    }
+    return {
+        earliestStart: new Date(earliest),
+        latestEnd: new Date(latest),
+        completedCount: completed,
+    };
+}
+/**
+ * Format a short day label (e.g. "15", "Mon 15").
+ */
+function formatDayLabel(date, zoom) {
+    if (zoom === "day") {
+        const weekday = date.toLocaleDateString("en-US", { weekday: "short" });
+        return `${weekday} ${date.getDate()}`;
+    }
+    if (zoom === "year") {
+        return date.getDate() === 1
+            ? date.toLocaleDateString("en-US", { month: "short" })
+            : "";
+    }
+    return `${date.getDate()}`;
+}
+/**
+ * Format duration as "X days".
+ */
+function formatDuration(startDate, endDate) {
+    const days = getDaysBetween(startDate, endDate);
+    return `${days}d`;
+}
+/**
+ * Format a date as "Jan 15" style short label.
+ */
+function formatDateShort(date) {
+    const d = toDate(date);
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+/**
+ * Calculate an SVG path string for a dependency arrow from one task bar to another.
+ *
+ * Two routing modes:
+ * - Forward: target left >= source right + minGap → clean L-shaped path through midpoint
+ * - Overlap/backward: bars overlap horizontally → route below both bars
+ */
+function calculateDependencyPath(fromLeft, fromWidth, fromTop, fromHeight, toLeft, toTop, toHeight) {
+    const startX = fromLeft + fromWidth;
+    const startY = fromTop + fromHeight / 2;
+    const endX = toLeft;
+    const endY = toTop + toHeight / 2;
+    const minGap = 24;
+    // Forward: enough horizontal space for a clean L-path
+    if (endX >= startX + minGap) {
+        if (Math.abs(endY - startY) < 1) {
+            // Same row — straight line
+            return { d: `M ${startX} ${startY} H ${endX}`, isBackward: false };
+        }
+        const midX = startX + (endX - startX) / 2;
+        const r = Math.min(5, Math.abs(endY - startY) / 2, (endX - startX) / 4);
+        const goDown = endY > startY;
+        const d = [
+            `M ${startX} ${startY}`,
+            `H ${midX - r}`,
+            `Q ${midX} ${startY} ${midX} ${startY + (goDown ? r : -r)}`,
+            `V ${endY + (goDown ? -r : r)}`,
+            `Q ${midX} ${endY} ${midX + r} ${endY}`,
+            `H ${endX}`,
+        ].join(" ");
+        return { d, isBackward: false };
+    }
+    // Overlap or close proximity: route below both bars
+    const gap = 14;
+    const exitX = startX + gap;
+    const entryX = endX - gap;
+    // Go below the lower of the two bars so we never cross through them
+    const lowerBottom = Math.max(fromTop + fromHeight, toTop + toHeight);
+    const routeY = lowerBottom + gap;
+    const d = [
+        `M ${startX} ${startY}`,
+        `H ${exitX}`,
+        `V ${routeY}`,
+        `H ${entryX}`,
+        `V ${endY}`,
+        `H ${endX}`,
+    ].join(" ");
+    // Only visually mark as backward (dashed) if target truly starts before source
+    return { d, isBackward: endX < fromLeft };
+}
+/**
+ * Build all dependency arrow paths for visible tasks.
+ */
+function buildDependencyArrows(tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag) {
+    var _a;
+    const taskMap = new Map(tasks.map((t) => [t.id, t]));
+    const rowIndexMap = new Map();
+    rows.forEach((row, i) => {
+        if (row.type === "task")
+            rowIndexMap.set(row.task.id, i);
+    });
+    const arrows = [];
+    const barHeight = rowHeight - 12;
+    for (const task of tasks) {
+        if (!((_a = task.dependencies) === null || _a === void 0 ? void 0 : _a.length))
+            continue;
+        const toIdx = rowIndexMap.get(task.id);
+        if (toIdx === undefined)
+            continue;
+        for (const depId of task.dependencies) {
+            const dep = taskMap.get(depId);
+            if (!dep)
+                continue;
+            const fromIdx = rowIndexMap.get(depId);
+            if (fromIdx === undefined)
+                continue;
+            const fromOffset = getDayOffset(dep.startDate, rangeStart);
+            const fromSpan = getDaysBetween(dep.startDate, dep.endDate);
+            let fromLeft = fromOffset * dayWidth;
+            let fromWidth = Math.max(fromSpan * dayWidth, dayWidth);
+            const fromTop = fromIdx * rowHeight + (rowHeight - barHeight) / 2;
+            const toOffset = getDayOffset(task.startDate, rangeStart);
+            let toLeft = toOffset * dayWidth;
+            const toTop = toIdx * rowHeight + (rowHeight - barHeight) / 2;
+            // Apply drag offsets for real-time arrow following
+            if (activeDrag) {
+                // Source task (dep) is being dragged
+                if (activeDrag.taskId === depId) {
+                    if (activeDrag.mode === "move") {
+                        fromLeft += activeDrag.deltaX;
+                    }
+                    else if (activeDrag.mode === "resize-left") {
+                        fromLeft += activeDrag.deltaX;
+                        fromWidth -= activeDrag.deltaX;
+                    }
+                    else if (activeDrag.mode === "resize-right") {
+                        fromWidth += activeDrag.deltaX;
+                    }
+                }
+                // Target task is being dragged
+                if (activeDrag.taskId === task.id) {
+                    if (activeDrag.mode === "move") {
+                        toLeft += activeDrag.deltaX;
+                    }
+                    else if (activeDrag.mode === "resize-left") {
+                        toLeft += activeDrag.deltaX;
+                    }
+                    // resize-right doesn't move the left edge (target start)
+                }
+            }
+            const result = calculateDependencyPath(fromLeft, fromWidth, fromTop, barHeight, toLeft, toTop, barHeight);
+            arrows.push({
+                id: `${depId}->${task.id}`,
+                d: result.d,
+                isBackward: result.isBackward,
+            });
+        }
+    }
+    return arrows;
+}
+// ---------------------------------------------------------------------------
+// Expected progress
+// ---------------------------------------------------------------------------
+/**
+ * Calculate expected progress (0-100) based on elapsed time.
+ */
+function calculateExpectedProgress(startDate, endDate) {
+    const start = toDate(startDate).getTime();
+    const end = toDate(endDate).getTime();
+    const now = new Date().setHours(0, 0, 0, 0);
+    if (now <= start)
+        return 0;
+    if (now >= end)
+        return 100;
+    return Math.round(((now - start) / (end - start)) * 100);
+}
+
+export { autoDateRange, buildDependencyArrows, calculateDependencyPath, calculateExpectedProgress, computeGroupSummary, formatDateShort, formatDayLabel, formatDuration, generateDayColumns, generateMonthSpans, getDayOffset, getDaysBetween, toDate };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { MonthSpan } from "./GanttChart.utils";
+interface GanttChartPanelProps {
+    onScroll: () => void;
+    days: Date[];
+    monthSpans: MonthSpan[];
+}
+export declare const GanttChartPanel: React.ForwardRefExoticComponent<GanttChartPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useEffect, useCallback } from 'react';
+import { CalendarDaysIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { GanttTimelineHeader } from './GanttTimelineHeader.js';
+import { GanttTimelineGrid } from './GanttTimelineGrid.js';
+import { GanttDependencyArrows } from './GanttDependencyArrows.js';
+import { GanttTaskBar } from './GanttTaskBar.js';
+import { GanttGroupBar } from './GanttGroupBar.js';
+import { GanttMilestone } from './GanttMilestone.js';
+
+const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
+    const { theme, rows, tasks, dayWidth, rowHeight, todayOffset, scrollToToday, onTaskClick, } = useGanttContext();
+    const { focusedTaskId, setFocusedTaskId } = useGanttInteraction();
+    const totalWidth = days.length * dayWidth;
+    const bodyHeight = rows.length * rowHeight;
+    // Auto-scroll to today on mount
+    useEffect(() => {
+        if (!scrollToToday || todayOffset === null)
+            return;
+        if (!ref || !("current" in ref) || !ref.current)
+            return;
+        const container = ref.current;
+        requestAnimationFrame(() => {
+            const targetScroll = todayOffset * dayWidth - container.clientWidth / 3;
+            container.scrollLeft = Math.max(0, targetScroll);
+        });
+        // Only run on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        const taskRows = rows.filter((r) => r.type === "task");
+        if (taskRows.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const currentIndex = focusedTaskId
+                ? taskRows.findIndex((r) => r.type === "task" && r.task.id === focusedTaskId)
+                : -1;
+            let nextIndex;
+            if (e.key === "ArrowDown") {
+                nextIndex = currentIndex < taskRows.length - 1 ? currentIndex + 1 : 0;
+            }
+            else {
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : taskRows.length - 1;
+            }
+            const nextRow = taskRows[nextIndex];
+            if (nextRow.type === "task") {
+                setFocusedTaskId(nextRow.task.id);
+            }
+        }
+        else if ((e.key === "Enter" || e.key === " ") &&
+            focusedTaskId) {
+            e.preventDefault();
+            const taskRow = taskRows.find((r) => r.type === "task" && r.task.id === focusedTaskId);
+            if ((taskRow === null || taskRow === void 0 ? void 0 : taskRow.type) === "task" && onTaskClick) {
+                onTaskClick(taskRow.task, e);
+            }
+        }
+        else if (e.key === "Escape") {
+            setFocusedTaskId(null);
+        }
+    }, [rows, focusedTaskId, setFocusedTaskId, onTaskClick]);
+    if (tasks.length === 0) {
+        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-sm font-medium", children: "No tasks to display" }), jsx("div", { className: "text-xs opacity-70", children: "Add tasks to see them on the timeline" })] }) }));
+    }
+    return (jsx("div", { className: cn(theme.chartPanelStyle), children: jsx("div", { ref: ref, className: "overflow-auto flex-1 min-h-0 focus:outline-none", onScroll: onScroll, onKeyDown: handleKeyDown, tabIndex: 0, role: "grid", "aria-label": "Gantt chart timeline", "data-gantt-chart-scroll": true, children: jsxs("div", { style: { width: totalWidth }, children: [jsx("div", { className: "sticky top-0 z-10", children: jsx(GanttTimelineHeader, { days: days, monthSpans: monthSpans }) }), jsxs("div", { className: "relative", style: { height: bodyHeight }, children: [jsx(GanttTimelineGrid, { days: days, height: bodyHeight }), jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
+                                const top = i * rowHeight;
+                                if (row.type === "group") {
+                                    return (jsx(GanttGroupBar, { row: row, top: top }, `group-${row.group.id}`));
+                                }
+                                if (row.task.milestone) {
+                                    return (jsx(GanttMilestone, { task: row.task, group: row.group, top: top }, `milestone-${row.task.id}`));
+                                }
+                                return (jsx(GanttTaskBar, { task: row.task, group: row.group, top: top }, `task-${row.task.id}`));
+                            })] })] }) }) }));
+});
+GanttChartPanel.displayName = "GanttChartPanel";
+
+export { GanttChartPanel };

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

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

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

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { buildDependencyArrows } from './GanttChart.utils.js';
+
+const GanttDependencyArrows = () => {
+    const { tasks, rows, dayWidth, rowHeight, rangeStart } = useGanttContext();
+    const { hoveredTaskId, activeDrag } = useGanttInteraction();
+    const arrows = useMemo(() => buildDependencyArrows(tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag), [tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag]);
+    if (arrows.length === 0)
+        return null;
+    // When a task is hovered, determine which arrows are connected to it
+    const isArrowConnected = (arrowId) => {
+        if (!hoveredTaskId)
+            return false;
+        // Arrow id format: "sourceId->targetId"
+        const [sourceId, targetId] = arrowId.split("->");
+        return sourceId === hoveredTaskId || targetId === hoveredTaskId;
+    };
+    return (jsxs("svg", { className: "absolute inset-0 pointer-events-none", style: { overflow: "visible" }, children: [jsxs("defs", { children: [jsx("marker", { id: "gantt-arrowhead", markerWidth: "8", markerHeight: "6", refX: "8", refY: "3", orient: "auto", children: jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "var(--color-text-secondary, #888)" }) }), jsx("marker", { id: "gantt-arrowhead-highlight", markerWidth: "8", markerHeight: "6", refX: "8", refY: "3", orient: "auto", children: jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "var(--color-primary, #3B82F6)" }) })] }), arrows.map((arrow) => {
+                const connected = isArrowConnected(arrow.id);
+                const faded = hoveredTaskId !== null && !connected;
+                return (jsx("path", { d: arrow.d, fill: "none", stroke: connected
+                        ? "var(--color-primary, #3B82F6)"
+                        : "var(--color-text-secondary, #888)", strokeWidth: connected ? 2.5 : 1.5, strokeDasharray: arrow.isBackward ? "4 3" : undefined, markerEnd: connected
+                        ? "url(#gantt-arrowhead-highlight)"
+                        : "url(#gantt-arrowhead)", opacity: faded ? 0.15 : connected ? 1 : 0.6, style: {
+                        transition: activeDrag
+                            ? "none"
+                            : "opacity 0.15s, stroke-width 0.15s",
+                    } }, arrow.id));
+            })] }));
+};
+
+export { GanttDependencyArrows };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { GanttGroupRow } from "./GanttChart.types";
+interface GanttGroupBarProps {
+    row: GanttGroupRow;
+    top: number;
+}
+export declare const GanttGroupBar: React.FC<GanttGroupBarProps>;
+export {};

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-xs 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-xs 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-xs 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 };