@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.27

package/dist/components/core/Tag/Tag.types.d.ts

@@ -30,6 +30,13 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "o
     startContent?: ReactNode;
     /** Whether the tag is disabled */
     disabled?: boolean;
+    /**
+     * Whether to render with motion (layout + enter/exit animation). Default true.
+     * Set `false` to render a plain `<span>` — required when a Tag lives inside a
+     * contentEditable host (e.g. Mention chips), where Framer-Motion's `layout`
+     * FLIP re-measurement fights the browser's caret/selection on every keystroke.
+     */
+    animated?: boolean;
     /** Additional class name for the tag */
     className?: string;
     /** Theme overrides */

package/dist/components/core/Tooltip/Tooltip.js

@@ -115,7 +115,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
         })
         : children;
     return (jsxs("div", { className: cn("relative inline-block", triggerClassName), ref: triggerRef, ...triggerHandlers, "aria-describedby": isVisible && id ? id : undefined, children: [childWithFocusHandlers, isClient &&
-                createPortal(jsx("div", { className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
+                createPortal(jsx("div", { "data-flikkui-portal": "", className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
 };
 // Set display name for dev tools and Storybook
 Tooltip.displayName = "Tooltip";

package/dist/components/core/Tooltip/Tooltip.theme.js

@@ -1,7 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg " +
-        "dark:bg-[var(--color-neutral-800)]/90 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-[var(--color-surface-overlay)]/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg",
 };
 
 export { tooltipTheme };

package/dist/components/core/index.d.ts

@@ -15,6 +15,7 @@ export * from "./CommandPalette";
 export * from "./Separator";
 export * from "./Drawer";
 export * from "./Dropdown";
+export * from "./DotSeparator";
 export * from "./Kbd";
 export * from "./MenuItem";
 export * from "./Link";

package/dist/components/core/index.js

@@ -32,6 +32,8 @@ export { DropdownItem } from './Dropdown/DropdownItem.js';
 export { DropdownSection } from './Dropdown/DropdownSection.js';
 export { DropdownSeparator } from './Dropdown/DropdownSeparator.js';
 export { dropdownTheme } from './Dropdown/Dropdown.theme.js';
+export { DotSeparator } from './DotSeparator/DotSeparator.js';
+export { dotSeparatorTheme } from './DotSeparator/DotSeparator.theme.js';
 export { Kbd } from './Kbd/Kbd.js';
 export { MenuItem } from './MenuItem/MenuItem.js';
 export { menuItemTheme } from './MenuItem/MenuItem.theme.js';
@@ -100,6 +102,8 @@ export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { SidebarLogo } from './Sidebar/SidebarLogo.js';
+export { SidebarSearch } from './Sidebar/SidebarSearch.js';
+export { SidebarCard } from './Sidebar/SidebarCard.js';
 export { SidebarProvider, useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';

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

@@ -1,7 +1,7 @@
 import type { GanttChartProps, GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
 export declare function useGanttContext(): GanttContextValue;
 export declare function useGanttInteraction(): GanttInteractionValue;
-declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
+declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, toolbar, showTable, showDependencies, showTaskLabels, emptyState, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GanttChartComponent {
     var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext, createContext, useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ganttChartTheme } from './GanttChart.theme.js';
@@ -60,10 +60,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 +131,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 +146,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 +173,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,7 +190,7 @@ 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";
 

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-lg 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

@@ -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/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

@@ -11,7 +11,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 +64,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-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, "items-center justify-center"), children: emptyState !== null && emptyState !== void 0 ? emptyState : (jsxs("div", { className: cn(theme.emptyStateStyle), children: [jsx(CalendarDaysIcon, { 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,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useId, 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 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 +20,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/GanttMilestone.js

@@ -8,7 +8,7 @@ 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;
@@ -26,19 +26,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-sm 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/GanttTablePanel.js

@@ -8,7 +8,7 @@ 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

@@ -15,8 +15,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);

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

@@ -13,8 +13,8 @@ import { getDaysBetween, addDays, toDate } from '../../../utils/dateUtils.js';
 
 const GanttTaskBar = React__default.memo(({ task, group, top }) => {
     var _a;
-    const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, } = useGanttContext();
-    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setActiveDrag } = useGanttInteraction();
+    const { theme, dayWidth, rangeStart, rowHeight, readonly, readonlyDates, readonlyProgress, onTaskUpdate, onTaskClick, tasks, showTaskLabels, } = useGanttContext();
+    const { hoveredTaskId, setHoveredTaskId, focusedTaskId, setFocusedTaskId, setActiveDrag, } = useGanttInteraction();
     const [tooltipPos, setTooltipPos] = useState(null);
     const offset = getDayOffset(task.startDate, rangeStart);
     const span = getDaysBetween(task.startDate, task.endDate);
@@ -26,6 +26,13 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
     const canDragProgress = !readonly && !readonlyProgress && !!onTaskUpdate;
     const expectedProgress = calculateExpectedProgress(task.startDate, task.endDate);
     const isBehindSchedule = !task.completed && task.progress < expectedProgress;
+    const updateActiveDrag = useCallback((isDragging, deltaX, mode) => {
+        if (isDragging) {
+            setTooltipPos(null);
+            setHoveredTaskId(null);
+        }
+        setActiveDrag(isDragging ? { taskId: task.id, mode, deltaX } : null);
+    }, [setActiveDrag, setHoveredTaskId, task.id]);
     // ----- Drag: Move -----
     const handleMoveDragEnd = useCallback((result) => {
         if (!onTaskUpdate || result.daysDelta === 0)
@@ -45,8 +52,8 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
         disabled: !canDragDates,
         onDragEnd: handleMoveDragEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging ? { taskId: task.id, mode: "move", deltaX } : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "move");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Resize left -----
     const handleResizeLeftEnd = useCallback((result) => {
@@ -66,10 +73,8 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeLeftEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging
-                ? { taskId: task.id, mode: "resize-left", deltaX }
-                : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "resize-left");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Resize right -----
     const handleResizeRightEnd = useCallback((result) => {
@@ -89,20 +94,20 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
         disabled: !canDragDates,
         onDragEnd: handleResizeRightEnd,
         onDragStateChange: useCallback((isDragging, deltaX) => {
-            setActiveDrag(isDragging
-                ? { taskId: task.id, mode: "resize-right", deltaX }
-                : null);
-        }, [setActiveDrag, task.id]),
+            updateActiveDrag(isDragging, deltaX, "resize-right");
+        }, [updateActiveDrag]),
     });
     // ----- Drag: Progress -----
     const handleProgressDragEnd = useCallback((result) => {
         if (!onTaskUpdate)
             return;
+        if (result.newProgress === task.progress)
+            return;
         onTaskUpdate(task.id, {
             progress: result.newProgress,
             completed: result.newProgress === 100,
         });
-    }, [onTaskUpdate, task.id]);
+    }, [onTaskUpdate, task.id, task.progress]);
     const progressDrag = useGanttDrag({
         dayWidth,
         mode: "progress",
@@ -110,6 +115,12 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
         originalProgress: task.progress,
         disabled: !canDragProgress,
         onDragEnd: handleProgressDragEnd,
+        onDragStateChange: useCallback((isDragging) => {
+            if (isDragging) {
+                setTooltipPos(null);
+                setHoveredTaskId(null);
+            }
+        }, [setHoveredTaskId]),
     });
     const anyDragging = moveDrag.isDragging ||
         resizeLeftDrag.isDragging ||
@@ -143,6 +154,10 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
         displayProgress = progressDrag.dragProgress;
     }
     const isNarrow = visualWidth <= 80;
+    const showInsideLabel = showTaskLabels === "inside" ||
+        (showTaskLabels === "auto" && !isNarrow);
+    const showOutsideLabel = showTaskLabels === "outside" ||
+        (showTaskLabels === "auto" && isNarrow);
     // ----- Hover highlighting (dependency connections) -----
     const isHighlighted = useMemo(() => {
         var _a, _b, _c;
@@ -163,6 +178,12 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
             return;
         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);
+        }
+    };
     // ----- Tooltip -----
     const tooltipContent = (jsxs("div", { className: "text-sm space-y-2 min-w-[180px]", children: [jsx("div", { className: "font-semibold text-base", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 opacity-70", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsxs("div", { className: "space-y-0.5", children: [jsxs("div", { children: [formatDateShort(task.startDate), " \u2014 ", formatDateShort(task.endDate)] }), jsx("div", { className: "opacity-70", children: formatDuration(task.startDate, task.endDate) })] }), jsxs("div", { children: [jsxs("div", { className: "flex justify-between mb-1", children: [jsx("span", { children: "Progress" }), jsxs("span", { className: "font-medium", children: [task.progress, "%"] })] }), jsx("div", { className: "h-1.5 rounded-full bg-white/20 overflow-hidden", children: jsx("div", { className: "h-full rounded-full", style: {
                                 width: `${task.progress}%`,
@@ -183,12 +204,12 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
                     }, onMouseLeave: () => {
                         setTooltipPos(null);
                         setHoveredTaskId(null);
-                    }, onClick: onTaskClick ? handleClick : undefined, onPointerDown: canDragDates ? moveDrag.handlePointerDown : undefined, role: "button", "aria-label": task.title, children: [jsxs(motion.div, { className: cn(theme.taskBarStyle, "group", task.completed && "opacity-60", canDragDates && !anyDragging && "cursor-grab", anyDragging && "cursor-grabbing", !canDragDates && "cursor-default", isHighlighted && "ring-2 ring-white/60", isFaded && "opacity-40", isFocused && "ring-2 ring-[var(--color-primary)] ring-offset-1"), style: {
+                    }, onClick: onTaskClick ? handleClick : undefined, onPointerDown: canDragDates ? moveDrag.handlePointerDown : undefined, onFocus: () => setFocusedTaskId(task.id), onBlur: () => setFocusedTaskId(null), onKeyDown: handleKeyDown, role: onTaskClick ? "button" : "img", tabIndex: onTaskClick ? 0 : undefined, "aria-label": task.title, children: [jsxs(motion.div, { className: cn(theme.taskBarStyle, "group", task.completed && "opacity-60", canDragDates && !anyDragging && "cursor-grab", anyDragging && "cursor-grabbing", !canDragDates && "cursor-default", isHighlighted && "ring-2 ring-white/60", isFaded && "opacity-40", isFocused && "ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--color-background)]"), style: {
                                 width: visualWidth,
                                 height: barHeight,
                                 backgroundColor: barColor,
                                 border: "1px solid rgba(0,0,0,0.12)",
-                                borderRadius: "2rem",
+                                borderRadius: 999,
                                 transformOrigin: "left center",
                                 transition: anyDragging ? "none" : undefined,
                             }, variants: taskBarVariants, initial: "hidden", animate: "visible", whileHover: anyDragging ? undefined : { filter: "brightness(0.96)" }, children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
@@ -197,7 +218,7 @@ const GanttTaskBar = React__default.memo(({ task, group, top }) => {
                                     } }), isBehindSchedule && (jsx("div", { className: "absolute top-0 bottom-0 w-px", style: {
                                         left: `${expectedProgress}%`,
                                         borderLeft: "2px dashed rgba(255,255,255,0.5)",
-                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-l-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeLeftDrag.handlePointerDown })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize z-20 rounded-r-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/10", onPointerDown: resizeRightDrag.handlePointerDown })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 w-3 cursor-ew-resize z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, children: jsx("div", { className: "w-0.5 h-3 rounded-full bg-white/80 shadow" }) })), !isNarrow && (jsxs("div", { className: "relative flex items-center gap-1.5 px-1 z-10 min-w-0 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), isNarrow && (jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
+                                    } })), task.completed && (jsx("div", { className: "absolute top-1/2 left-2 right-2 h-px bg-white/60", style: { transform: "translateY(-0.5px)" } })), canDragDates && (jsx("div", { className: "absolute left-0 top-0 bottom-0 z-20 w-3 cursor-ew-resize rounded-l-full opacity-0 transition-opacity hover:bg-black/15 group-hover:opacity-100", onPointerDown: resizeLeftDrag.handlePointerDown, "aria-hidden": "true" })), canDragDates && (jsx("div", { className: "absolute right-0 top-0 bottom-0 z-20 w-3 cursor-ew-resize rounded-r-full opacity-0 transition-opacity hover:bg-black/15 group-hover:opacity-100", onPointerDown: resizeRightDrag.handlePointerDown, "aria-hidden": "true" })), canDragProgress && !isNarrow && (jsx("div", { className: "absolute top-0 bottom-0 z-20 flex w-4 cursor-ew-resize items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", style: { left: `calc(${displayProgress}% - 6px)` }, onPointerDown: progressDrag.handlePointerDown, "aria-hidden": "true", children: jsx("div", { className: "h-3.5 w-0.5 rounded-full bg-white/90 shadow" }) })), showInsideLabel && (jsxs("div", { className: "relative z-10 flex min-w-0 items-center gap-1.5 px-1.5 pointer-events-none", children: [task.assignee && (jsx(Avatar, { src: task.assignee.avatar, name: task.assignee.name, size: "xs" })), jsx("span", { className: "truncate text-sm text-[var(--color-text-inverse)] font-medium", children: task.title })] }))] }), showOutsideLabel && (jsx("span", { className: cn(theme.taskLabelOutsideStyle), style: {
                                 left: visualWidth + 6,
                                 top: barHeight / 2,
                                 transform: "translateY(-50%)",

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

@@ -9,6 +9,7 @@ const GanttTimelineGrid = ({ days, height, }) => {
     const totalWidth = days.length * dayWidth;
     const showVertical = gridLines === "both" || gridLines === "vertical";
     const showHorizontal = gridLines === "both" || gridLines === "horizontal";
+    const shouldDrawVerticalLine = (day) => dayWidth >= 12 || day.getDate() === 1 || day.getDay() === 1;
     // Build a dateKey -> holiday lookup
     const holidayMap = useMemo(() => {
         const map = new Map();
@@ -23,7 +24,7 @@ const GanttTimelineGrid = ({ days, height, }) => {
                 var _a, _b;
                 const key = `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
                 const holiday = holidayMap.get(key);
-                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
+                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && shouldDrawVerticalLine(day) && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
                                     backgroundColor: (_a = holiday.color) !== null && _a !== void 0 ? _a : "var(--color-warning-100, rgba(245, 158, 11, 0.08))",
                                 } }), jsx("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-[8px] whitespace-nowrap opacity-60", style: { color: (_b = holiday.color) !== null && _b !== void 0 ? _b : "var(--color-warning, #F59E0B)" }, children: holiday.label })] })) }, i));
             }), showHorizontal &&