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

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

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ganttChartTheme } from './GanttChart.theme.js';
 import { useGanttDates } from './hooks/useGanttDates.js';
@@ -11,26 +12,9 @@ import { GanttChartPanel } from './GanttChartPanel.js';
 import { GanttSplitter } from './GanttSplitter.js';
 import { formatDuration } from './GanttChart.utils.js';
 import { GanttProgressCircle } from './GanttProgressCircle.js';
+import { GanttContext, GanttInteractionContext } from './GanttChartContext.js';
+export { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-const GanttContext = createContext(undefined);
-const GanttInteractionContext = createContext(undefined);
-function useGanttContext() {
-    const ctx = useContext(GanttContext);
-    if (!ctx) {
-        throw new Error("useGanttContext must be used within <GanttChart>");
-    }
-    return ctx;
-}
-function useGanttInteraction() {
-    const ctx = useContext(GanttInteractionContext);
-    if (!ctx) {
-        throw new Error("useGanttInteraction must be used within <GanttChart>");
-    }
-    return ctx;
-}
 // ---------------------------------------------------------------------------
 // Default columns
 // ---------------------------------------------------------------------------
@@ -60,10 +44,30 @@ const defaultColumns = [
         align: "center",
     },
 ];
+const defaultToolbarOptions = {
+    today: true,
+    zoom: true,
+    hideCompleted: true,
+    addGroup: true,
+};
+function resolveToolbarOptions(toolbar) {
+    if (toolbar === false) {
+        return {
+            today: false,
+            zoom: false,
+            hideCompleted: false,
+            addGroup: false,
+        };
+    }
+    if (toolbar === true || toolbar === undefined) {
+        return defaultToolbarOptions;
+    }
+    return { ...defaultToolbarOptions, ...toolbar };
+}
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker = true, scrollToToday = true, readonly: readonlyProp = false, readonlyDates: readonlyDatesProp = false, readonlyProgress: readonlyProgressProp = false, zoom: zoomProp, defaultZoom = "day", onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted = false, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth = 400, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp = [], gridLines = "both", className, theme: themeOverrides, rowHeight = 40, }) {
+function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker = true, scrollToToday = true, toolbar, showTable = true, showDependencies = true, showTaskLabels = "auto", emptyState, readonly: readonlyProp = false, readonlyDates: readonlyDatesProp = false, readonlyProgress: readonlyProgressProp = false, zoom: zoomProp, defaultZoom = "day", onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups = [], onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted = false, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth = 400, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp = [], gridLines = "both", className, theme: themeOverrides, rowHeight = 40, }) {
     // ----- Controlled / uncontrolled state -----
     const [uncontrolledZoom, setUncontrolledZoom] = useState(defaultZoom);
     const isZoomControlled = zoomProp !== undefined;
@@ -111,6 +115,7 @@ function GanttChartComponent({ data, groups, columns, startDate, endDate, todayM
     const rows = useGanttLayout(groups, data, collapsedGroups, hideCompleted);
     const { tableRef, chartRef, handleTableScroll, handleChartScroll } = useGanttScrollSync();
     const theme = useMemo(() => ({ ...ganttChartTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    const toolbarOptions = useMemo(() => resolveToolbarOptions(toolbar), [toolbar]);
     // ----- Context -----
     const contextValue = useMemo(() => ({
         groups,
@@ -125,6 +130,11 @@ function GanttChartComponent({ data, groups, columns, startDate, endDate, todayM
         collapsedGroups,
         hideCompleted,
         tablePanelWidth,
+        toolbar: toolbarOptions,
+        showTable,
+        showDependencies,
+        showTaskLabels,
+        emptyState,
         readonly: readonlyProp,
         readonlyDates: readonlyDatesProp,
         readonlyProgress: readonlyProgressProp,
@@ -147,7 +157,8 @@ function GanttChartComponent({ data, groups, columns, startDate, endDate, todayM
         rowHeight,
     }), [
         groups, data, resolvedColumns, rows, dates, zoom, collapsedGroups,
-        hideCompleted, tablePanelWidth, readonlyProp, readonlyDatesProp,
+        hideCompleted, tablePanelWidth, toolbarOptions, showTable,
+        showDependencies, showTaskLabels, emptyState, readonlyProp, readonlyDatesProp,
         readonlyProgressProp, onTaskUpdate, onTaskDelete, onTaskDuplicate,
         onTaskAdd, onGroupAdd, onTaskClick, toggleGroup, setZoom,
         setHideCompleted, setTablePanelWidth,
@@ -163,8 +174,8 @@ function GanttChartComponent({ data, groups, columns, startDate, endDate, todayM
         activeDrag,
         setActiveDrag,
     }), [hoveredTaskId, focusedTaskId, activeDrag]);
-    return (jsx(GanttContext.Provider, { value: contextValue, children: jsx(GanttInteractionContext.Provider, { value: interactionValue, children: jsxs("div", { className: cn(theme.baseStyle, className), children: [jsx(GanttToolbar, {}), jsxs("div", { className: "flex flex-1 min-h-0 overflow-x-auto", children: [jsx(GanttTablePanel, { ref: tableRef, onScroll: handleTableScroll }), jsx(GanttSplitter, {}), jsx(GanttChartPanel, { ref: chartRef, onScroll: handleChartScroll, days: dates.days, monthSpans: dates.monthSpans })] })] }) }) }));
+    return (jsx(GanttContext.Provider, { value: contextValue, children: jsx(GanttInteractionContext.Provider, { value: interactionValue, children: jsxs("div", { className: cn(theme.baseStyle, className), children: [Object.values(toolbarOptions).some(Boolean) && jsx(GanttToolbar, {}), jsxs("div", { className: "flex flex-1 min-h-0 overflow-x-auto", children: [showTable && (jsxs(Fragment, { children: [jsx(GanttTablePanel, { ref: tableRef, onScroll: handleTableScroll }), jsx(GanttSplitter, {})] })), jsx(GanttChartPanel, { ref: chartRef, onScroll: showTable ? handleChartScroll : undefined, days: dates.days, monthSpans: dates.monthSpans })] })] }) }) }));
 }
 GanttChartComponent.displayName = "GanttChart";
 
-export { GanttChartComponent as GanttChart, useGanttContext, useGanttInteraction };
+export { GanttChartComponent as GanttChart };

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

@@ -1,23 +1,25 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden text-sm",
-    toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
-    tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
+    baseStyle: "flex flex-col w-full overflow-hidden rounded-[var(--gantt-chart-radius)] border border-[var(--color-border)] bg-[var(--color-background)] text-sm shadow-sm",
+    toolbarStyle: "flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    tablePanelStyle: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
-    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
-    tableHeaderCellStyle: "px-3 font-medium text-[var(--color-text-secondary)] truncate",
-    tableGroupRowStyle: "flex items-center cursor-pointer select-none hover:bg-[var(--color-background-secondary)] transition-colors",
-    tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableHeaderStyle: "flex items-center h-[56px] border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]/80",
+    tableHeaderCellStyle: "px-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-muted)] truncate",
+    tableGroupRowStyle: "flex items-center cursor-pointer select-none border-b border-[var(--color-border)]/30 bg-[var(--color-background-secondary)]/35 hover:bg-[var(--color-background-secondary)] transition-colors",
+    tableTaskRowStyle: "flex items-center border-b border-[var(--color-border)]/20 hover:bg-[var(--color-background-secondary)]/70 transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
-    timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
-    timelineMonthStyle: "text-xs font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
-    timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
-    gridLineStyle: "border-r border-[var(--color-border)]/30",
-    weekendStyle: "bg-[var(--color-background-secondary)]/50",
-    todayMarkerStyle: "bg-[var(--color-primary)] w-px",
-    todayColumnStyle: "bg-[var(--color-primary)]/5",
-    taskBarStyle: "absolute rounded-md cursor-pointer flex items-center",
-    groupBarStyle: "absolute rounded-md opacity-25",
-    splitterStyle: "hidden sm:block w-1 cursor-col-resize bg-[var(--color-border)] hover:bg-[var(--color-primary)] transition-colors shrink-0",
+    timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)] shadow-[0_1px_0_var(--color-border)]",
+    timelineMonthStyle: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center bg-[var(--color-background-secondary)]/45",
+    timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center border-r border-[var(--color-border)]/20",
+    gridLineStyle: "border-r border-[var(--color-border)]/20",
+    weekendStyle: "bg-[var(--color-background-secondary)]/35",
+    todayMarkerStyle: "bg-[var(--color-primary)] w-0.5",
+    todayColumnStyle: "bg-[var(--color-primary)]/10",
+    taskBarStyle: "absolute cursor-pointer flex items-center overflow-hidden shadow-sm ring-1 ring-black/10",
+    taskLabelOutsideStyle: "absolute text-xs font-medium whitespace-nowrap pointer-events-none drop-shadow-sm",
+    emptyStateStyle: "flex flex-col items-center gap-2 px-6 py-8 text-center text-[var(--color-text-muted)]",
+    groupBarStyle: "absolute rounded-full opacity-40",
+    splitterStyle: "w-1 cursor-col-resize bg-[var(--color-border)]/70 hover:bg-[var(--color-primary)] transition-colors shrink-0",
 };
 
 export { ganttChartTheme };

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

@@ -14,7 +14,7 @@ export interface GanttTask {
     completed?: boolean;
     dependencies?: string[];
     milestone?: boolean;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 export interface GanttHoliday {
     date: Date | string;
@@ -30,7 +30,7 @@ export interface GanttGroup {
 export interface GanttColumn<T extends GanttTask = GanttTask> {
     id: string;
     header: string;
-    accessor: keyof T | ((task: T) => any);
+    accessor: keyof T | ((task: T) => ReactNode | string | number | boolean | null | undefined);
     cell?: (task: T, group: GanttGroup) => ReactNode;
     width?: number;
     align?: "left" | "center" | "right";
@@ -41,6 +41,13 @@ export interface GanttDragState {
     deltaX: number;
 }
 export type GanttZoom = "day" | "week" | "quarter" | "month" | "year";
+export type GanttTaskLabelMode = "auto" | "inside" | "outside" | "none";
+export interface GanttToolbarOptions {
+    today?: boolean;
+    zoom?: boolean;
+    hideCompleted?: boolean;
+    addGroup?: boolean;
+}
 export declare const DAY_WIDTHS: Record<GanttZoom, number>;
 export type GanttRowType = "group" | "task";
 export interface GanttGroupRow {
@@ -75,6 +82,8 @@ export interface GanttChartThemeOverrides {
     todayMarkerStyle?: string;
     todayColumnStyle?: string;
     taskBarStyle?: string;
+    taskLabelOutsideStyle?: string;
+    emptyStateStyle?: string;
     groupBarStyle?: string;
     splitterStyle?: string;
 }
@@ -91,6 +100,11 @@ export interface GanttContextValue {
     collapsedGroups: string[];
     hideCompleted: boolean;
     tablePanelWidth: number;
+    toolbar: GanttToolbarOptions;
+    showTable: boolean;
+    showDependencies: boolean;
+    showTaskLabels: GanttTaskLabelMode;
+    emptyState?: ReactNode;
     readonly: boolean;
     readonlyDates: boolean;
     readonlyProgress: boolean;
@@ -133,6 +147,11 @@ export interface GanttChartProps {
     endDate?: Date | string;
     todayMarker?: boolean;
     scrollToToday?: boolean;
+    toolbar?: boolean | GanttToolbarOptions;
+    showTable?: boolean;
+    showDependencies?: boolean;
+    showTaskLabels?: GanttTaskLabelMode;
+    emptyState?: ReactNode;
     readonly?: boolean;
     readonlyDates?: boolean;
     readonlyProgress?: boolean;

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

@@ -1,5 +1,5 @@
 import { toDate, getDaysBetween } from '../../../utils/dateUtils.js';
-export { addDays, isSameDay, isWeekend } from '../../../utils/dateUtils.js';
+export { addDays, getWeekNumber, 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.

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

@@ -0,0 +1,5 @@
+import type { GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
+export declare const GanttContext: import("react").Context<GanttContextValue | undefined>;
+export declare const GanttInteractionContext: import("react").Context<GanttInteractionValue | undefined>;
+export declare function useGanttContext(): GanttContextValue;
+export declare function useGanttInteraction(): GanttInteractionValue;

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

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not GanttChart.tsx) so sub-components
+// (GanttChartPanel, GanttTablePanel, GanttToolbar, GanttTaskBar, ...) can
+// consume the contexts without importing GanttChart.tsx, which imports the
+// sub-components back (circular dep). GanttChart.tsx re-exports the hooks,
+// so `from "./GanttChart"` keeps working.
+const GanttContext = createContext(undefined);
+const GanttInteractionContext = createContext(undefined);
+function useGanttContext() {
+    const ctx = useContext(GanttContext);
+    if (!ctx) {
+        throw new Error("useGanttContext must be used within <GanttChart>");
+    }
+    return ctx;
+}
+function useGanttInteraction() {
+    const ctx = useContext(GanttInteractionContext);
+    if (!ctx) {
+        throw new Error("useGanttInteraction must be used within <GanttChart>");
+    }
+    return ctx;
+}
+
+export { GanttContext, GanttInteractionContext, useGanttContext, useGanttInteraction };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { MonthSpan } from "./GanttChart.utils";
 interface GanttChartPanelProps {
-    onScroll: () => void;
+    onScroll?: () => void;
     days: Date[];
     monthSpans: MonthSpan[];
 }

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useCallback } from 'react';
-import { CalendarDaysIcon } from '@heroicons/react/24/outline';
+import { CalendarDots } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTimelineHeader } from './GanttTimelineHeader.js';
 import { GanttTimelineGrid } from './GanttTimelineGrid.js';
 import { GanttDependencyArrows } from './GanttDependencyArrows.js';
@@ -11,7 +12,7 @@ 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 { theme, rows, tasks, dayWidth, rowHeight, todayOffset, scrollToToday, onTaskClick, showDependencies, emptyState, } = useGanttContext();
     const { focusedTaskId, setFocusedTaskId } = useGanttInteraction();
     const totalWidth = days.length * dayWidth;
     const bodyHeight = rows.length * rowHeight;
@@ -64,9 +65,9 @@ const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
         }
     }, [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, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDots, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium text-[var(--color-text-secondary)]", 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) => {
+    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 }), showDependencies && 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}`));

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

@@ -1,11 +1,15 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useId, useMemo } from 'react';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { buildDependencyArrows } from './GanttChart.utils.js';
 
 const GanttDependencyArrows = () => {
     const { tasks, rows, dayWidth, rowHeight, rangeStart } = useGanttContext();
     const { hoveredTaskId, activeDrag } = useGanttInteraction();
+    const markerId = useId();
+    const arrowheadId = `${markerId}-gantt-arrowhead`;
+    const highlightedArrowheadId = `${markerId}-gantt-arrowhead-highlight`;
     const arrows = useMemo(() => buildDependencyArrows(tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag), [tasks, rows, dayWidth, rowHeight, rangeStart, activeDrag]);
     if (arrows.length === 0)
         return null;
@@ -17,14 +21,14 @@ const GanttDependencyArrows = () => {
         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) => {
+    return (jsxs("svg", { className: "absolute inset-0 pointer-events-none", style: { overflow: "visible" }, children: [jsxs("defs", { children: [jsx("marker", { id: arrowheadId, 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: highlightedArrowheadId, 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: {
+                        ? `url(#${highlightedArrowheadId})`
+                        : `url(#${arrowheadId})`, opacity: faded ? 0.15 : connected ? 1 : 0.6, style: {
                         transition: activeDrag
                             ? "none"
                             : "opacity 0.15s, stroke-width 0.15s",

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { getDayOffset } from './GanttChart.utils.js';
 import { getDaysBetween } from '../../../utils/dateUtils.js';
 

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

@@ -1,19 +1,20 @@
+"use client";
 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 { useGanttContext } from './GanttChartContext.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 { dayWidth, rangeStart, rowHeight, onTaskClick, readonly, showTaskLabels, theme, } = 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 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);
     };
@@ -26,19 +27,19 @@ const GanttMilestone = React__default.memo(({ task, group, top, }) => {
     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: {
+                }, onClick: onTaskClick ? handleClick : undefined, onKeyDown: handleKeyDown, role: onTaskClick ? "button" : "img", 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,
+                        } }), showTaskLabels !== "none" && showTaskLabels !== "inside" && (jsx("span", { className: theme.taskLabelOutsideStyle, style: {
+                            left: size + 6,
                             top: size / 2,
                             transform: "translateY(-50%)",
                             color: barColor,
-                        }, children: task.title })] }) }) }));
+                        }, children: task.title }))] }) }) }));
 });
 
 export { GanttMilestone };

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const STEP = 20;
 const MIN_WIDTH = 200;
@@ -10,6 +11,18 @@ const GanttSplitter = () => {
     const { theme, tablePanelWidth, setTablePanelWidth } = useGanttContext();
     const startX = useRef(0);
     const startWidth = useRef(0);
+    // Track active pointer listeners so they can be cleaned up on unmount during a drag
+    const activeListenersRef = useRef({ move: null, up: null });
+    // Cleanup on unmount — removes any lingering listeners if component unmounts during a drag
+    useEffect(() => {
+        return () => {
+            const { move, up } = activeListenersRef.current;
+            if (move)
+                document.removeEventListener("pointermove", move);
+            if (up)
+                document.removeEventListener("pointerup", up);
+        };
+    }, []);
     const onPointerDown = useCallback((e) => {
         e.preventDefault();
         startX.current = e.clientX;
@@ -20,9 +33,11 @@ const GanttSplitter = () => {
             setTablePanelWidth(next);
         };
         const onPointerUp = () => {
+            activeListenersRef.current = { move: null, up: null };
             document.removeEventListener("pointermove", onPointerMove);
             document.removeEventListener("pointerup", onPointerUp);
         };
+        activeListenersRef.current = { move: onPointerMove, up: onPointerUp };
         document.addEventListener("pointermove", onPointerMove);
         document.addEventListener("pointerup", onPointerUp);
     }, [tablePanelWidth, setTablePanelWidth]);

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

@@ -1,9 +1,10 @@
+"use client";
 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 { CaretRight, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 import { chevronVariants } from './GanttChart.animations.js';
 
 const GanttTableGroupRow = React__default.memo(({ row, }) => {
@@ -14,10 +15,10 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 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) => {
+        }, 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(CaretRight, { 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-surface-hover)] 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" }) }))] }));
+                }, children: jsx(Plus, { className: "size-4" }) }))] }));
 });
 
 export { GanttTableGroupRow };

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

@@ -1,6 +1,7 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.js';
 
 const GanttTableHeader = () => {
     const { theme, columns } = useGanttContext();

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

@@ -1,14 +1,15 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext } from './GanttChart.js';
+import { useGanttContext } from './GanttChartContext.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) => {
+    return (jsxs("div", { className: cn(theme.tablePanelStyle), style: { width: tablePanelWidth, minWidth: Math.min(tablePanelWidth, 280) }, 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}`));
                     }

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useGanttContext, useGanttInteraction } from './GanttChart.js';
+import { useGanttContext, useGanttInteraction } from './GanttChartContext.js';
 import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';
 
 function getCellValue(task, group, column) {
@@ -15,8 +16,8 @@ function getCellValue(task, group, column) {
 }
 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) => {
+    const { focusedTaskId, setFocusedTaskId, setHoveredTaskId } = 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 }, onMouseEnter: () => setHoveredTaskId(task.id), onMouseLeave: () => setHoveredTaskId(null), onClick: onTaskClick ? (e) => onTaskClick(task, e) : undefined, onFocus: () => setFocusedTaskId(task.id), onBlur: () => setFocusedTaskId(null), onKeyDown: onTaskClick ? (e) => {
                 if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     onTaskClick(task, e);