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

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

@@ -0,0 +1,162 @@
+import React, { ReactNode } from "react";
+export interface GanttTask {
+    id: string;
+    groupId: string;
+    title: string;
+    startDate: Date | string;
+    endDate: Date | string;
+    progress: number;
+    assignee?: {
+        name: string;
+        avatar?: string;
+    };
+    color?: string;
+    completed?: boolean;
+    dependencies?: string[];
+    milestone?: boolean;
+    [key: string]: any;
+}
+export interface GanttHoliday {
+    date: Date | string;
+    label: string;
+    color?: string;
+}
+export interface GanttGroup {
+    id: string;
+    title: string;
+    color: string;
+    order?: number;
+}
+export interface GanttColumn<T extends GanttTask = GanttTask> {
+    id: string;
+    header: string;
+    accessor: keyof T | ((task: T) => any);
+    cell?: (task: T, group: GanttGroup) => ReactNode;
+    width?: number;
+    align?: "left" | "center" | "right";
+}
+export interface GanttDragState {
+    taskId: string;
+    mode: "move" | "resize-left" | "resize-right";
+    deltaX: number;
+}
+export type GanttZoom = "day" | "week" | "quarter" | "month" | "year";
+export declare const DAY_WIDTHS: Record<GanttZoom, number>;
+export type GanttRowType = "group" | "task";
+export interface GanttGroupRow {
+    type: "group";
+    group: GanttGroup;
+    taskCount: number;
+    completedCount: number;
+    earliestStart: Date;
+    latestEnd: Date;
+}
+export interface GanttTaskRow {
+    type: "task";
+    task: GanttTask;
+    group: GanttGroup;
+}
+export type GanttRow = GanttGroupRow | GanttTaskRow;
+export interface GanttChartThemeOverrides {
+    baseStyle?: string;
+    toolbarStyle?: string;
+    tablePanelStyle?: string;
+    chartPanelStyle?: string;
+    tableHeaderStyle?: string;
+    tableHeaderCellStyle?: string;
+    tableGroupRowStyle?: string;
+    tableTaskRowStyle?: string;
+    tableCellStyle?: string;
+    timelineHeaderStyle?: string;
+    timelineMonthStyle?: string;
+    timelineDayStyle?: string;
+    gridLineStyle?: string;
+    weekendStyle?: string;
+    todayMarkerStyle?: string;
+    todayColumnStyle?: string;
+    taskBarStyle?: string;
+    groupBarStyle?: string;
+    splitterStyle?: string;
+}
+export interface GanttContextValue {
+    groups: GanttGroup[];
+    tasks: GanttTask[];
+    columns: GanttColumn[];
+    rows: GanttRow[];
+    rangeStart: Date;
+    rangeEnd: Date;
+    totalDays: number;
+    dayWidth: number;
+    zoom: GanttZoom;
+    collapsedGroups: string[];
+    hideCompleted: boolean;
+    tablePanelWidth: number;
+    readonly: boolean;
+    readonlyDates: boolean;
+    readonlyProgress: boolean;
+    onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
+    onTaskDelete?: (taskId: string) => void;
+    onTaskDuplicate?: (taskId: string) => void;
+    onTaskAdd?: (groupId: string) => void;
+    onGroupAdd?: () => void;
+    onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+    toggleGroup: (groupId: string) => void;
+    setZoom: (zoom: GanttZoom) => void;
+    setHideCompleted: (hide: boolean) => void;
+    setTablePanelWidth: (width: number) => void;
+    theme: GanttChartThemeOverrides;
+    todayMarker: boolean;
+    todayOffset: number | null;
+    scrollToToday: boolean;
+    holidays: GanttHoliday[];
+    gridLines: "both" | "vertical" | "horizontal" | "none";
+    rowHeight: number;
+}
+/**
+ * Frequently-changing interaction state is separated into its own context
+ * so that stable consumers (toolbar, grid, table header) don't re-render
+ * on hover/focus/drag changes.
+ */
+export interface GanttInteractionValue {
+    hoveredTaskId: string | null;
+    setHoveredTaskId: (id: string | null) => void;
+    focusedTaskId: string | null;
+    setFocusedTaskId: (id: string | null) => void;
+    activeDrag: GanttDragState | null;
+    setActiveDrag: (state: GanttDragState | null) => void;
+}
+export interface GanttChartProps {
+    data: GanttTask[];
+    groups: GanttGroup[];
+    columns?: GanttColumn[];
+    startDate?: Date | string;
+    endDate?: Date | string;
+    todayMarker?: boolean;
+    scrollToToday?: boolean;
+    readonly?: boolean;
+    readonlyDates?: boolean;
+    readonlyProgress?: boolean;
+    zoom?: GanttZoom;
+    defaultZoom?: GanttZoom;
+    onZoomChange?: (zoom: GanttZoom) => void;
+    collapsedGroups?: string[];
+    defaultCollapsedGroups?: string[];
+    onCollapsedGroupsChange?: (groups: string[]) => void;
+    hideCompleted?: boolean;
+    defaultHideCompleted?: boolean;
+    onHideCompletedChange?: (hide: boolean) => void;
+    tablePanelWidth?: number;
+    defaultTablePanelWidth?: number;
+    onTablePanelWidthChange?: (width: number) => void;
+    onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
+    onTaskDelete?: (taskId: string) => void;
+    onTaskDuplicate?: (taskId: string) => void;
+    onTaskAdd?: (groupId: string) => void;
+    onGroupAdd?: () => void;
+    onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+    holidays?: GanttHoliday[];
+    gridLines?: "both" | "vertical" | "horizontal" | "none";
+    className?: string;
+    theme?: GanttChartThemeOverrides;
+    rowHeight?: number;
+}

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

@@ -0,0 +1,9 @@
+const DAY_WIDTHS = {
+    day: 40,
+    week: 16,
+    quarter: 8,
+    month: 4,
+    year: 1.2,
+};
+
+export { DAY_WIDTHS };

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

@@ -0,0 +1,80 @@
+import type { GanttTask, GanttGroup, GanttRow, GanttDragState } from "./GanttChart.types";
+export { toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, } from "../../../utils/dateUtils";
+/**
+ * Day-offset of `date` from `rangeStart` (0-based).
+ */
+export declare function getDayOffset(date: Date | string, rangeStart: Date | string): number;
+/**
+ * Generate every date between rangeStart and rangeEnd (inclusive).
+ */
+export declare function generateDayColumns(rangeStart: Date, rangeEnd: Date): Date[];
+/**
+ * Group consecutive days into month spans.
+ * Returns [{month: "Jan 2024", startIndex: 0, span: 31}, …]
+ */
+export interface MonthSpan {
+    label: string;
+    startIndex: number;
+    span: number;
+}
+export declare function generateMonthSpans(days: Date[]): MonthSpan[];
+/**
+ * Auto-detect date range from task data with padding.
+ */
+export declare function autoDateRange(tasks: GanttTask[], paddingDays?: number): {
+    start: Date;
+    end: Date;
+};
+/**
+ * Compute group summary: earliest start, latest end, completed count.
+ */
+export declare function computeGroupSummary(group: GanttGroup, tasks: GanttTask[]): {
+    earliestStart: Date;
+    latestEnd: Date;
+    completedCount: number;
+};
+/**
+ * Format a short day label (e.g. "15", "Mon 15").
+ */
+export declare function formatDayLabel(date: Date, zoom: "day" | "week" | "quarter" | "month" | "year"): string;
+/**
+ * Format duration as "X days".
+ */
+export declare function formatDuration(startDate: Date | string, endDate: Date | string): string;
+/**
+ * Format a date as "Jan 15" style short label.
+ */
+export declare function formatDateShort(date: Date | string): string;
+export interface WeekSpan {
+    label: string;
+    startIndex: number;
+    span: number;
+}
+/**
+ * Group consecutive days into week spans with "W3" style labels.
+ */
+export declare function generateWeekSpans(days: Date[]): WeekSpan[];
+export interface ArrowPath {
+    id: string;
+    d: string;
+    isBackward: boolean;
+}
+/**
+ * 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
+ */
+export declare function calculateDependencyPath(fromLeft: number, fromWidth: number, fromTop: number, fromHeight: number, toLeft: number, toTop: number, toHeight: number): {
+    d: string;
+    isBackward: boolean;
+};
+/**
+ * Build all dependency arrow paths for visible tasks.
+ */
+export declare function buildDependencyArrows(tasks: GanttTask[], rows: GanttRow[], dayWidth: number, rowHeight: number, rangeStart: Date, activeDrag?: GanttDragState | null): ArrowPath[];
+/**
+ * Calculate expected progress (0-100) based on elapsed time.
+ */
+export declare function calculateExpectedProgress(startDate: Date | string, endDate: Date | string): number;

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-base font-medium", children: "No tasks to display" }), jsx("div", { className: "text-sm 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 {};